/*
Theme Name: Troc & Rank Light
Author: José & Copilot
Description: Thème minimal avec interface publique + privée
Version: 1.0
*/

/* Styles généraux pour le champ de recherche */
.search-bar {
  margin-bottom: 20px;
  text-align: center;
}
#urlSearch {
  width: 80%; /* Commence avec une largeur relative */
  max-width: 600px; /* Limite la largeur sur les grands écrans */
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box; /* S'assure que padding ne fait pas déborder l'élément */
}

/* Styles généraux pour les blocs d'URLs */
.blog-box {
  border: 1px solid #eee;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  box-sizing: border-box; /* Très important pour le responsive */
}
.blog-box h3 {
  margin-top: 0;
  color: #333;
  word-wrap: break-word; /* Important pour les URLs très longues */
}
.blog-box a {
  display: inline-block;
  margin-bottom: 10px;
  color: #007bff;
  text-decoration: none;
  word-break: break-all; /* Permet aux URLs de se casser si elles sont trop longues */
}
.blog-box a:hover {
  text-decoration: underline;
}
.blog-box form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blog-box input[type="text"],
.blog-box input[type="password"] {
  width: 100%; /* Important : prend 100% de la largeur disponible */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* S'assure que padding ne fait pas déborder l'élément */
}
.blog-box input[type="submit"] {
  background-color: #28a745;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  width: 100%; /* Le bouton prend 100% de la largeur */
  box-sizing: border-box;
}
.blog-box input[type="submit"]:hover {
  background-color: #218838;
}

/* --- Media Queries pour les petits écrans (smartphones) --- */
@media (max-width: 768px) {
  #urlSearch {
    width: 95%; /* Le champ de recherche est plus large sur les petits écrans */
    padding: 8px;
    font-size: 14px;
  }

  .blog-box {
    padding: 10px; /* Réduire le padding des blocs */
    margin-left: 5%; /* Centrer un peu les blocs */
    margin-right: 5%;
    width: 90%; /* Les blocs prennent 90% de la largeur de l'écran */
    max-width: none; /* Annule toute max-width potentielle */
  }

  .blog-box h3 {
    font-size: 1em; /* Ajuster la taille du titre */
  }

  .blog-box a {
    font-size: 0.9em; /* Ajuster la taille du lien */
  }

  .blog-box input[type="text"],
  .blog-box input[type="password"],
  .blog-box input[type="submit"] {
    font-size: 14px; /* Rendre les champs de formulaire et boutons plus petits */
    padding: 8px;
  }
}

/* --- Media Queries pour les très petits écrans (smartphones étroits) --- */
@media (max-width: 480px) {
  .blog-box {
    padding: 8px; /* Encore moins de padding */
  }
  .blog-box h3 {
    font-size: 0.9em;
  }
  .blog-box a {
    font-size: 0.8em;
  }
}