/* --------- BARRE DE RECHERCHE --------- */
    .search-container {
      display: flex;
      gap: 2%;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 30px;
      width: 100%;
    }

    .search-container input[type="text"] {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #676767;
      border-radius: 10px;
      width: 70%;
      background-color: white;
      color: #000;
      transition: border-color 0.3s;
      margin-bottom: 0px;
    }

    .search-container input[type="text"]:focus {
      outline: none;
      border-color: #676767;
    }

    .search-container button {
      padding: 10px 30px;
            width : 20%;
      font-size: 16px;
            font-family: inter;
      background-color: #d1f2ba;
      color: #000;
      border: 1px solid #676767;
      border-radius: 10px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .search-container button:hover {
      background-color: #c1e4a9;
    }

    /* --------- BOUTONS DE FILTRE PRINCIPAUX --------- */
    .filter-buttons {
      display: flex;
      flex-wrap: wrap;
            /*width: 92%;*/
            width: 100%;
      gap: 2%;
      margin: auto;
      justify-content: center;
    }

.filter-buttons div, .filter-buttons button{
    width: 21.5%;
}

.filter-buttons .checkbox-dropdown button{
    background-color: #d6f4fa;
    color: #000;
    border: 1px solid #676767;
    border-radius : 10px;
}
.filter-buttons .checkbox-dropdown button:hover{
    background-color:#bbe3eb;
}

.filter-buttons .btn-advanced-search{
    background-color: #d1f2ba;
    color: #000;
    border: 1px solid #676767;
    border-radius : 10px;
}

    .filter-buttons .btn-advanced-search:hover {
      background-color: #c1e4a9; /* Gris légèrement plus clair au survol */
    }

#reset-filters{
    background-color: #e0e0e0;
    color: #000;
    border: 1px solid #676767;
    border-radius : 10px;
}

#reset-filters:hover{
    background-color:#d6d6d6;
}

    /* Styles généraux pour les boutons de filtre principaux (si besoin) */
    .filter-buttons button {
      padding: 10px 20px;
      font-size: 16px;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    /* Couleurs spécifiques pour les boutons de filtre */
    .btn-taxons{
      background-color: #555555; /* Bleu légèrement moins clair (SkyBlue) */
    }

    .advanced-filters .btn-sujets {
      background-color: #4169E1; /* Bleu foncé (RoyalBlue) */
    }
    .advanced-filters .btn-sujets:hover {
      background-color: #2A52BE; /* Un peu plus foncé au survol */
    }



    /* --------- ÉTIQUETTES DE FILTRE SÉLECTIONNÉES --------- */
    .selected-filters-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px; /* Espace entre les étiquettes */
      width: 100%;
      justify-content: center; /* Centrer les étiquettes */
    }

    .filter-tag {
      background-color: #6c757d; /* Couleur de fond grise par défaut */
      color: white;
      padding: 6px 12px;
      border-radius: 20px; /* Bords arrondis pour un look "pilule" */
      font-size: 14px;
      display: flex;
      align-items: center;
      white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
    }

    .filter-tag .tag-close-btn {
      background: none;
      border: none;
      color: white;
      margin-left: 8px;
      font-size: 16px;
      cursor: pointer;
      padding: 0;
      line-height: 1; /* Assure que le 'x' est bien centré */
    }

    .filter-tag .tag-close-btn:hover {
      color: #e74c3c; /* Couleur au survol pour le bouton de fermeture */
    }

    /* Couleurs spécifiques par catégorie pour les étiquettes */
    .filter-tag[data-category="taxons"] { background-color: #87CEEB; } /* Bleu légèrement moins clair */
    .filter-tag[data-category="milieux"] { background-color: #6495ED; } /* Bleu moyen */
    .filter-tag[data-category="sujets"] { background-color: #4169E1; } /* Bleu foncé */

    /* --------- NOUVELLE SECTION RECHERCHE AVANCÉE --------- */
    .advanced-search-section {
      padding: 25px;
      margin-top: 25px;
      width: 100%;
      display: none; /* Cachée par défaut */
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: all 0.5s ease-in-out; /* Ajoute une transition douce */
      opacity: 0; /* Pour l'effet de fondu */
      transform: translateY(20px); /* Pour l'effet de glissement */
    }

.advanced-search-section hr{
    width: 60%;
  border: none;
  border-top: 1px solid #676767;
  margin-top: 30px;
    margin-bottom: 0px;
}


    .advanced-search-section.visible {
      display: flex; /* Affiche la section */
      opacity: 1; /* Rends-la visible */
      transform: translateY(0); /* Ramène-la à sa position normale */
      margin: auto;
  margin-top: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
    }

    .advanced-search-section h2 {
      color: #2c3e50;
            margin-top: 5px;
      margin-bottom: 15px;
      font-size: 24px;
    }

    .advanced-search-section p {
      color: #555;
      font-size: 16px;
      line-height: 1.6;
    }

    /* Styles pour les nouveaux éléments de la recherche avancée */
    .advanced-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 2%;
      margin-top: 20px;
      justify-content: center;
      width: 100%;
    }

    /* Les boutons simples ne sont plus utilisés, mais je laisse les styles au cas où */
    .advanced-filters button {
      padding: 10px 20px;
      font-size: 16px;
      color: #000;
      border-radius: 10px;
      cursor: pointer;
      transition: background-color 0.3s;
    }



    .date-range-box, .price-range-box {
      border: 1px solid #676767;
      border-radius: 10px;
      padding: 8px 20px;
      background-color: #d6f4fa;
      display: flex;
      align-items: center;
      gap: 2%;
      font-size: 16px;
      color: #333;
    }

    .date-range-box input[type="text"],
    .price-range-box input[type="text"] {
      padding: 4px 8px;
      border: 1px solid #676767;
      border-radius: 10px;
      font-size: 16px;
      width: 80px;
      text-align: center;
      box-sizing: border-box;
      margin-bottom: 0px;
    }

    /* --- Styles pour les listes déroulantes cochables --- */
    .checkbox-dropdown {
      position: relative;
      width: 100%; /* Permet de prendre toute la largeur disponible dans advanced-filters */
      max-width: 250px; /* Pour qu'il ne soit pas trop large sur desktop */
      box-sizing: border-box; /* Inclut padding et border dans la largeur */
    }

    .checkbox-dropdown .dropdown-toggle {
      padding: 10px 20px;
      font-size: 16px;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      width: 100%; /* Prend toute la largeur de son parent */
      text-align: left; /* Aligne le texte à gauche */
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
    }


    .checkbox-dropdown .dropdown-toggle::after {
      content: '▼';
      font-size: 12px;
      margin-left: 10px;
      transition: transform 0.3s ease;
    }

    .checkbox-dropdown.open .dropdown-toggle::after {
      transform: rotate(180deg);
    }
.checkbox-dropdown.open .checkbox-dropdown-content{
  display: block;
}

    .checkbox-dropdown-content {
      display: none; /* Cachée par défaut */
      position: absolute;
      background-color: #f9f9f9;
      min-width: 100%; /* S'étend sur la largeur du bouton */
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 100;
      border-radius: 8px;
      overflow: hidden; /* Pour que le border-radius s'applique aux options */
      margin-top: 5px; /* Petit espace sous le bouton */
      max-height: 200px; /* Limite la hauteur et ajoute un scroll si nécessaire */
      overflow-y: auto;
      text-align: left;
      padding: 10px 0; /* Padding interne */
      border: 1px solid #eee; /* Petite bordure pour le contenu */
    }

    .checkbox-dropdown-content label {
      display: flex;
      align-items: center;
      padding: 8px 15px; /* Padding pour chaque option */
      cursor: pointer;
      font-size: 15px;
      color: #333;
    }

    .checkbox-dropdown-content label:hover {
      background-color: #e2e2e2;
    }

    .checkbox-dropdown-content input[type="checkbox"] {
      margin-right: 10px;
      transform: scale(1.1);
      cursor: pointer;
    }

    /* Nouveau bouton Rechercher en bas de la section avancée */
    .advanced-search-section .search-button-bottom {
      margin-top: 30px; /* Espace au-dessus du bouton */
      padding: 12px 25px;
      font-size: 18px;
      background-color: #FFB247;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s;
      width: 100%; /* Prend toute la largeur de la section */
      max-width: 300px; /* Optionnel: limiter la largeur même si "100%" */
      box-sizing: border-box; /* Inclure padding et border dans la largeur */
    }

    .advanced-search-section .search-button-bottom:hover {
      background-color: #EB9C2C; /* Orange plus foncé au survol */
    }

    /* --------- OVERLAY POPUP --------- */
    .popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.4);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999;
      padding: 16px;
    }

    /* --------- POPUP --------- */
    .popup {
      background: #ffffff;
      padding: 24px;
      border-radius: 16px;
      width: 100%;
      max-width: 500px;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
      position: relative;
      transition: height 0.3s ease;
      margin-top: 20vh;
    }

    .popup::-webkit-scrollbar {
      width: 8px;
    }
    .popup::-webkit-scrollbar-thumb {
      background-color: #bbb;
      border-radius: 8px;
    }

    /* --------- TITRE & FERMETURE --------- */
    .popup h2 {
      margin-top: 0;
      color: #222;
    }

    .close-btn {
      position: absolute;
      top: 12px;
      right: 16px;
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      color: #777;
      transition: color 0.2s;
    }
    .close-btn:hover {
      color: #e74c3c;
    }

    /* --------- CATÉGORIES --------- */
    .cat-list {
      margin-top: 10px;
    }

    .cat-list ul {
      list-style: none;
      padding-left: 20px;
      margin: 5px 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.8s ease;
    }

    .cat-list ul.open {
      max-height: 1000px;
    }

    .cat-list label {
      cursor: pointer;
      font-weight: 500;
      font-size: 15px;
      color: #333;
    }

    .cat-list input[type="checkbox"] {
      margin-right: 6px;
      transform: scale(1.1);
      cursor: pointer;
    }

    /* Style pour l'état indéterminé */
    .cat-list input[type="checkbox"]:indeterminate + label {
      font-style: italic;
      color: #888;
    }
.cat-list ul.open{
    display: block;
}

    /* --------- EXPAND BUTTON --------- */
    .expand-btn {
      font-size: 15px;
      margin-left: 8px;
      color: #3498db;
      cursor: pointer;
      background: none;
      border: none;
            padding-right: 30px;
            padding-left: 0px;
      font-family: Montserrat;
    }

.cat .expand-btn:hover{
  color: blueviolet;
}

    .cat {
      margin: 8px 0;
    }

.cat input,
.cat label,
.cat button {
  display: inline-block;
  vertical-align: middle; /* Important for vertical alignment */
}

.cat ul {
  /* This ul will still naturally go to the next line because it's a block element */
  /* You could make it inline-block, but that might make it sit next to other elements if space allows, which you probably don't want. */
  /* For a nested list, it's usually desired to be on its own line below. */
  clear: both; /* If you were to float the above elements, this would ensure the ul clears floats */
    display: none;
}

    /* --------- BOUTON "TOUT COCHER" --------- */
    .select-all-btn {
      display: block;
      width: 100%;
      margin: 16px 0;
      padding: 10px;
      font-size: 14px;
      background-color: #ddd;
      color: #222;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .select-all-btn:hover {
      background-color: #ccc;
    }

    /* --------- RESPONSIVE --------- */
    @media (max-width: 600px) {
      .popup {
        max-width: 100%;
        max-height: 90vh;
        padding: 20px;
      }

      .search-container input[type="text"] {
        width: 100%;
        min-width: 240px;
      }

      .filter-buttons {
        flex-direction: column;
        align-items: stretch;
      }

      .filter-buttons button {
        width: 100%;
      }

      .advanced-search-section {
        width: 95%; /* Ajustement pour les petits écrans */
        padding: 20px;
      }

      .advanced-filters {
        flex-direction: column; /* Empile les éléments sur petits écrans */
        align-items: stretch;
      }

      .date-range-box, .price-range-box, .checkbox-dropdown {
        width: 100%; /* Prend toute la largeur disponible */
        max-width: none; /* Annule le max-width */
      }
      .selected-filters-container {
        padding: 0 10px; /* Un peu de padding sur les côtés */
      }
    }






.book_library {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: center;
  padding: 2em;
  border-radius: 5px;
  background-color: #a2978a;
  margin-bottom: 20px;
}

.book_card {
  width: 260px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.book_card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.book_img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.book_img_img{
  max-height: 100%;
  border: 1px solid #8C8C8C;
}



.book_content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* pas d’espace entre les éléments */
}

.book_title {
  font-size: 1.2em;
  margin-bottom: 0.15em; /* marge très réduite */
  background-color: #e0f2f7;
  border: 1px solid #88B3BF;
  border-radius: 5px;
  padding: 5px;
}

.book_content h2{
    color: #555;
}

.book_author,
.book_date,
.book_remark {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 0.1em; /* marge minimale */
  line-height: 1.2; /* pour resserrer les lignes */
}

/* POPUP */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
}

.modal_content {
  background: white;
  padding: 1.5em;
  border-radius: 12px;
  max-width: 900px;
  width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  position: relative;

  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-areas:
    "title title"
    "image details"
    "resume resume"
    "sommaire sommaire"
    "remarque remarque";
  gap: 1em;

  transform: scale(0.8);
  transition: transform 0.3s ease;
  overflow-wrap: break-word;
  overflow-x: hidden; /* pas de scroll horizontal */
}

.modal.show .modal_content {
  transform: scale(1);
}

#modalTitle {
  grid-area: title;
  font-size: 1.8em;
  margin-bottom: 0.3em;
  color: #2c3e50;
  text-decoration: underline;
}

#modalImage {
  grid-area: image;
  width: 320px;
  height: auto;
  object-fit: cover;
  border: 1px solid #8C8C8C;
}

.details {
  grid-area: details;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.1em;
  color: #555;
  font-size: 0.95em;
  background-color: #F9F9F9;
  border-radius: 8px;
  padding: 0.8em 1em;
}

.details p{
  margin-bottom: 10px;
    display: flex;
}

.details p strong {
  color: #2c3e50;
  margin-right: 0.3em;
  white-space: nowrap;
}

#modalResume,
#modalSommaire,
#modalRemark, #modalResume_perso {
  grid-column: 1 / -1; /* occuper toute la largeur */
  padding: 0.8em 1em;
  background: #f9f9f9;
  border-radius: 8px;
  font-size: 0.95em;
  color: #444;
  margin: 0 0 1em 0;
  white-space: normal;
  word-wrap: break-word;
}

#modalResume::before,
#modalSommaire::before,
#modalRemark::before, #modalResume_perso::before {
  font-weight: bold;
  display: block;
  margin-bottom: 0.4em;
  color: #2c3e50;
}

#modalResume::before {
  content: "Résumé :";
}

#modalSommaire::before {
  content: "Sommaire :";
}

#modalRemark::before {
  content: "Remarque :";
}

#modalResume_perso::before {
  content: "Résumé personnel :";
}

#modalClose {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  border: none;
  background: transparent;
  font-size: 1.8em;
  cursor: pointer;
  color: #333;
}

/* Styles pour le bouton "Renvellopper toutes les catégories" */
.collapse-all-btn {
  position: fixed; /* Fixe le bouton par rapport à la fenêtre */
  top: 10%; /* Ajuste la position verticale (par exemple, 10% du haut de la fenêtre) */
  right: calc(50% - 400px); /* Ajuste la position horizontale par rapport au centre de la fenêtre et à la largeur de la popup */
  background-color: #d1f2ba; /* Couleur de fond */
  color: #000; /* Couleur du texte */
  border: none;
  padding: 6px 10px; /* Réduit le padding pour rendre le bouton plus petit */
  cursor: pointer;
  border-radius: 5px;
  font-size: 10px; /* Réduit la taille de la police */
  z-index: 1001; /* S'assure qu'il est au-dessus de la popup (qui a probablement un z-index de 1000) */
  white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* Ajoute une petite ombre pour le faire ressortir */
  margin-bottom: 10px;
  margin-top: 10px;
}



/* Styles pour le bouton "Renvellopper toutes les catégories" */
.collapse-all-btn {
  position: sticky; /* Rends le bouton sticky à l'intérieur de son conteneur parent */
  top: 0; /* Colle le bouton au sommet du conteneur parent quand on scroll */
  width: 100%; /* S'assure que le bouton prend toute la largeur du conteneur */
  background-color: #d1f2ba; /* Couleur de fond du bouton */
  color: #000; /* Couleur du texte */
  border: 1px solid #676767;
  cursor: pointer;
  border-radius: 5px;
  font-size: 10px; /* Taille de police légèrement plus grande */
  text-align: center; /* Centre le texte du bouton */
  z-index: 10; /* Assure que le bouton sticky est au-dessus du contenu défilant */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Ajoute une ombre en bas du bouton */
  box-sizing: border-box; /* Inclut padding et border dans la largeur/hauteur */
  /* Si le bouton était déjà un enfant direct de #popup-taxons-box, c'est bon.
     Sinon, vous devrez peut-être ajuster votre structure HTML. */
}

.collapse-all-btn:hover{
    color: #000;
    background-color:#c1e4a9;
}

/* Styles pour la popup elle-même */
#popup-taxons-box {
  max-height: 80vh; /* La popup doit avoir une hauteur maximale pour que le scroll se déclenche */
  overflow-y: auto; /* Permet le défilement vertical si le contenu dépasse la hauteur */
  padding-top: 45px; /* Crée de l'espace en haut de la popup pour le bouton sticky
                         (ajustez cette valeur en fonction de la hauteur réelle de votre bouton + un petit espace) */
  position: relative; /* Nécessaire pour que le z-index du bouton sticky fonctionne par rapport à son contenu */
  background-color: #fff; /* Assurez-vous que la popup a un fond pour cacher le contenu derrière le bouton sticky */
  border-radius: 8px; /* Si votre popup a des coins arrondis */
}

/* Ajustez les marges du titre h2 si elles interfèrent avec le bouton */
#popup-taxons-box h2 {
  margin-top: 0; /* Supprime toute marge supérieure qui pousserait le bouton */
  padding-top: 15px; /* Ajoute du padding au titre pour l'éloigner du bouton sticky si nécessaire */
}

/* S'assurer que l'overlay est en dessous de la popup et du bouton */
.popup-overlay {
    z-index: 999; /* La popup aura un z-index de 1000, l'overlay 999 */
}


/* --- START Custom Biodivotheque Styles (Simplified) --- */

/* Make parent categories bold */
.cat-parent {
  font-weight: bold;
}

/* Ensure direct children (list items' labels) within a parent category are NOT bold.
   This targets labels that are descendants of a 'cat' container and inside an unordered list. */
.cat ul li label {
  font-weight: normal;
}

/* If the 'cat-parent' class is directly on the label element for the main category,
   this ensures it's bold, and the rule above for 'cat ul li label' will handle the children. */
.cat > label.cat-parent {
  font-weight: bold;
}

/* --- END Custom Biodivotheque Styles --- */



























/* Basic styling for the book library */
.book_library {
  display: grid;
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
}

/* Default: 3 books per line */
.book_library.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.book_library.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.book_library.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

/* Added: 6 books per line */
.book_library.cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

/* Added: 7 books per line */
.book_library.cols-7 {
  grid-template-columns: repeat(7, 1fr);
}

.book_library.cols-8 {
  grid-template-columns: repeat(8, 1fr);
}

/* Ensure book cards adapt within the grid */
.book_card {
    position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  background-color: #fff;
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.book_card:hover {
  transform: translateY(-5px);
}

/* Styling for images within book cards */
.book_img {
    position: relative;
  max-width: 100%;
  height: auto; /* La hauteur sera définie par les classes spécifiques ci-dessous */
  object-fit: contain; /* L'image est redimensionnée pour tenir dans le conteneur, en conservant son rapport d'aspect. */
  flex-shrink: 0;
  display: block;
}

/* Ajustement de la hauteur de l'image en fonction du nombre de colonnes */
.book_library.cols-3 .book_card .book_img {
  height: 300px; /* Grande hauteur pour 3 colonnes */
    margin-bottom: 10px; /* Conserve une marge pour l'espacement */
}

.book_library.cols-4 .book_card .book_img {
  height: 270px; /* Hauteur légèrement réduite pour 4 colonnes */
    margin-bottom: 8px; /* Conserve une marge pour l'espacement */
}

.book_library.cols-5 .book_card .book_img {
  height: 210px; /* Hauteur encore réduite pour 5 colonnes */
    margin-bottom: 6px; /* Conserve une marge pour l'espacement */
}

.book_library.cols-6 .book_card .book_img {
  height: 180px; /* Hauteur pour 6 colonnes */
    margin-bottom: 4px; /* Conserve une marge pour l'espacement */
}

.book_library.cols-7 .book_card .book_img {
  height: 140px; /* Hauteur plus petite pour 7 colonnes (titres cachés) */
}

.book_library.cols-8 .book_card .book_img {
  height: 120px; /* La plus petite hauteur pour 8 colonnes (titres cachés) */
}

/* Lorsque le titre est caché, ajustez la marge inférieure de l'image */
.book_library.cols-7 .book_card .book_img,
.book_library.cols-8 .book_card .book_img {
  margin-bottom: 0; /* Supprime la marge inférieure si le titre est caché */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
  .book_library.cols-6 .book_card .book_img {
    height: 190px; /* Ajuste la hauteur pour 6 colonnes sur écran moyen */
  }
  .book_library.cols-7 .book_card .book_img,
  .book_library.cols-8 .book_card .book_img {
    height: 160px; /* Ajuste la hauteur pour 7/8 colonnes sur écran moyen */
  }
}

@media (max-width: 992px) {
  .book_library.cols-5 .book_card .book_img,
  .book_library.cols-6 .book_card .book_img,
  .book_library.cols-7 .book_card .book_img,
  .book_library.cols-8 .book_card .book_img {
    height: 220px; /* Plus de colonnes affichées, mais taille d'image plus grande sur petit écran */
  }
}

@media (max-width: 768px) {
  .book_library.cols-4 .book_card .book_img,
  .book_library.cols-5 .book_card .book_img,
  .book_library.cols-6 .book_card .book_img,
  .book_library.cols-7 .book_card .book_img,
  .book_library.cols-8 .book_card .book_img {
    height: 250px; /* Plus de colonnes affichées, mais taille d'image encore plus grande */
  }
}

@media (max-width: 576px) {
  .book_library.cols-3 .book_card .book_img,
  .book_library.cols-4 .book_card .book_img,
  .book_library.cols-5 .book_card .book_img,
  .book_library.cols-6 .book_card .book_img,
  .book_library.cols-7 .book_card .book_img,
  .book_library.cols-8 .book_card .book_img {
    height: 300px; /* Très peu de colonnes, taille d'image plus grande */
  }
}

@media (max-width: 400px) {
  .book_library.cols-3 .book_card .book_img,
  .book_library.cols-4 .book_card .book_img,
  .book_library.cols-5 .book_card .book_img,
  .book_library.cols-6 .book_card .book_img,
  .book_library.cols-7 .book_card .book_img,
  .book_library.cols-8 .book_card .book_img {
    height: 350px; /* Sur un téléphone très petit, une colonne par ligne */
  }
}

.book_content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}

/* Base styling for book titles - Allow wrapping and ensure word breaking */
.book_title {
  font-size: 1.1em;
  font-weight: bold;
  margin: 0;
  color: #333;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding: 5px 10px;
}

.book_content h2{
  padding-top: 5px;
}

/* Adjust font size for different column layouts */
.book_library.cols-3 .book_card .book_title {
  font-size: 1em;
}

.book_library.cols-4 .book_card .book_title {
  font-size: 0.9em;
}

.book_library.cols-5 .book_card .book_title {
  font-size: 0.8em;
}

.book_library.cols-6 .book_card .book_title { /* Added font size for 6 columns */
  font-size: 0.70em;
}

/* Hide title for 7 and 8 columns */
.book_library.cols-7 .book_card .book_title,
.book_library.cols-8 .book_card .book_title {
  display: none; /* Hide the title */
}

/* When title is hidden, adjust image margin to reduce extra space */
.book_library.cols-7 .book_card .book_img,
.book_library.cols-8 .book_card .book_img {
  margin-bottom: 0; /* Remove bottom margin if title is hidden */
}


/* Styling for the new selector */
.books-per-row-selector {
  margin-bottom: 20px;
  text-align: center;
}

.books-per-row-selector label {
  margin-right: 15px;
  font-weight: normal;
  cursor: pointer;
}

.books-per-row-selector input[type="radio"] {
  margin-right: 5px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
  /* Added responsive adjustments for 6 and 7 cols */
  .book_library.cols-6 {
    grid-template-columns: repeat(5, 1fr);
  }
  .book_library.cols-7,
  .book_library.cols-8 {
    grid-template-columns: repeat(6, 1fr);
  }
  .book_library.cols-6 .book_card .book_title {
    font-size: 0.9em;
  }
}

@media (max-width: 992px) {
  /* Added responsive adjustments for 6 and 7 cols */
  .book_library.cols-5,
  .book_library.cols-6,
  .book_library.cols-7,
  .book_library.cols-8 {
    grid-template-columns: repeat(4, 1fr);
  }
  .book_library.cols-5 .book_card .book_title,
  .book_library.cols-6 .book_card .book_title {
    font-size: 0.95em;
  }
}

@media (max-width: 768px) {
  /* Added responsive adjustments for 6 and 7 cols */
  .book_library.cols-4,
  .book_library.cols-5,
  .book_library.cols-6,
  .book_library.cols-7,
  .book_library.cols-8 {
    grid-template-columns: repeat(3, 1fr);
  }
  .book_library.cols-4 .book_card .book_title,
  .book_library.cols-5 .book_card .book_title,
  .book_library.cols-6 .book_card .book_title {
    font-size: 1em;
  }
}

@media (max-width: 576px) {
  /* Added responsive adjustments for 6 and 7 cols */
  .book_library.cols-3,
  .book_library.cols-4,
  .book_library.cols-5,
  .book_library.cols-6,
  .book_library.cols-7,
  .book_library.cols-8 {
    grid-template-columns: repeat(2, 1fr);
  }
  .book_library.cols-3 .book_card .book_title,
  .book_library.cols-4 .book_card .book_title,
  .book_library.cols-5 .book_card .book_title,
  .book_library.cols-6 .book_card .book_title {
    font-size: 1.05em;
  }
  .books-per-row-selector label {
    display: block;
    margin-bottom: 5px;
  }
}

@media (max-width: 400px) {
  /* Added responsive adjustments for 6 and 7 cols */
  .book_library.cols-3,
  .book_library.cols-4,
  .book_library.cols-5,
  .book_library.cols-6,
  .book_library.cols-7,
  .book_library.cols-8 {
    grid-template-columns: repeat(1, 1fr);
  }
  .book_library.cols-3 .book_card .book_title,
  .book_library.cols-4 .book_card .book_title,
  .book_library.cols-5 .book_card .book_title,
  .book_library.cols-6 .book_card .book_title {
    font-size: 1.1em;
  }
}

/* Styles pour le sélecteur de livres par ligne avec le slider */
.books_per_row_selector {
  display: flex; /* Utilise flexbox pour aligner les éléments */
  align-items: center; /* Centre verticalement les éléments */
  justify-content: flex-end; /* Aligne le contenu à droite */
  margin-bottom: 20px; /* Espace sous le sélecteur */
  gap: 10px; /* Espace entre les éléments */
}

.books_per_row_selector label {
  white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
  font-weight: bold;
}

#books_per_row_slider {
  width: 150px; /* Largeur du slider, ajustez si nécessaire */
  -webkit-appearance: none; /* Cache le style par défaut du navigateur */
  appearance: none;
  height: 8px; /* Hauteur de la piste du slider */
  background: #d3d3d3; /* Couleur de la piste */
  outline: none; /* Supprime le contour bleu au focus */
  opacity: 0.7;
  -webkit-transition: .2s; /* Transition pour l'opacité au survol */
  transition: opacity .2s;
  border-radius: 5px; /* Bords arrondis pour la piste */
}

#books_per_row_slider:hover {
  opacity: 1;
}

#books_per_row_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; /* Largeur du bouton du slider */
  height: 20px; /* Hauteur du bouton du slider */
  border-radius: 50%; /* Bouton rond */
  background: #31a4bd; /* Couleur du bouton, adaptez à votre thème */
  cursor: pointer;
}

#books_per_row_slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #31a4bd;
  cursor: pointer;
}

#slider_value {
  font-weight: bold;
  min-width: 15px; /* Pour éviter que le chiffre ne "danse" trop */
  text-align: center;
}


.books-count{
  width: auto;
  display: flex;
  justify-content: flex-start;
  flex: auto;
}
.books-count span{
  font-weight: bold;
}
.books-count-display{
  margin-bottom: 5px;
  display: block;
}



.download-button {
    display: inline-block;
    background-color: #31A4BD; /* Couleur verte */
    color: white;
    padding: 5px 15px;
    margin-top: 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.download-button:hover {
    background-color: #35C881;
  color: #fff;
}


.book_price_tag {
    position: absolute;
    top: -10px; /* Adjust as needed for vertical positioning */
    right: -10px; /* Adjust as needed for horizontal positioning */
    background-color: #555; /* Semi-transparent black background */
    
    
    

    color: white; /* White text color */
    padding: 5px 8px; /* Padding inside the box */
    border-radius: 3px; /* Slightly rounded corners */
    font-size: 0.8em; /* Adjust font size as needed */
    font-weight: bold;
    z-index: 10; /* Ensures it's above the image */
    white-space: nowrap; /* Prevents text from wrapping */
}



/*Icône développer*/
/* Styles pour les icônes */
.expand-btn .icon-open {
    display: none; /* Cache l'icône "ouvrir" par défaut */
}

.expand-btn.open .icon-open {
    display: inline; /* Affiche l'icône "ouvrir" quand la liste est ouverte */
}

.expand-btn.open .icon-closed {
    display: none; /* Cache l'icône "fermer" quand la liste est ouverte */
}


button, div.wpforms-container-full .wpforms-form .wpforms-page-button, div.wpforms-container-full .wpforms-form button[type="submit"], div.wpforms-container-full .wpforms-form input[type="submit"], input[type="button"], input[type="reset"], input[type="submit"]{
    padding: 0px 25px;
}

label{
    margin-bottom: 0px;
}







/* REFONTE GRAPHIQUE */

#menu-menu-biodivotheque li a{
    color: #000000;
    font-size: 20px;
}

#menu-item-3341 a{
    background-color: #d6f4fa;
    padding-left: 10px;
    padding-right: 10px;
    border: none;
    border-radius: 10px;
}

#menu-item-3341 a:hover{
    color: #000000;            
  display: inline-block;
}

#menu-item-3342 a:hover, #menu-item-3340 a:hover, #menu-item-3343 a:hover{
    color: #000000;
    text-decoration: none;           
  border-bottom: 2px solid #31a4bd;    
  padding-bottom: 3px;             
  display: inline-block;
}

.librairies-locales{
    background-color: #d1f2ba;
    width: 80%;
    border-radius: 10px;
    padding: 10px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.menu-item-357 a{
    background-color: #61AEFF;
}
.librairies-locales p{
    margin: 0px;
    color: #676767;
}

.boite-a-filtres{
    margin: 35px 15px;
    padding: 30px 15px;
    border: 1px solid #676767;
    border-radius: 18px;
    width: 100%;
}

.site-contenu{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-taxons, #type-document-dropdown button, #langue-dropdown button{
background-color: #d6f4fa;
    color: #000;
    border: 1px solid #676767;
    border-radius: 10px;
}

.filtres-avances:nth-child(-n+3) {
  flex: 0 0 21.5%;
}

.filtres-avances:nth-child(n+4) {
  flex: 0 0 31%;
    margin-top: 20px;
}

.filter-tag{
    display: none;
}










/* Spinner chargement */
/* Le cercle qui tourne */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f; /* Changez la couleur selon votre thème */
    animation: spin 1s linear infinite;
    display: inline-block;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Optionnel : ajout d'une transition pour l'apparition des livres */
#books-container.fade-in {
    display: grid !important; /* Ou 'block' selon votre mise en page */
    animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}