.checkbox-columns {
    display: grid;
    /* Crée 3 colonnes de taille égale */
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; /* Espacement entre les éléments */
}

/* Assure que chaque élément prend sa propre cellule dans la grille */
.checkbox-columns label {
    display: block;
}

/* Styles de base pour l'accordéon */
/* Styles de base pour l'accordéon */
.accordion {
    position: relative;
    margin: 10px 0;
}

/* Style du header de l'accordéon */
.accordion-header {
    background-color: #f1f1f1;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    border: 1px solid #ddd;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

/* Contenu de l'accordéon, caché au départ */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    visibility: hidden; /* Rendre invisible au départ */
    opacity: 0; /* Rendre complètement transparent */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Transition fluide */
    padding: 0 10px;  /* Espacement pour le contenu */
}

/* Lors du survol du header, le contenu devient visible */
.accordion-header:hover + .accordion-content,
.accordion-content:hover {
    max-height: 500px;  /* Ajuster selon la taille de ton contenu */
    visibility: visible; /* Rendre visible */
    opacity: 1; /* Rendre le contenu opaque */
    padding: 10px ;  /* Appliquer un padding pour plus d'espace */
    transition: opacity 0.3s ease, visibility 0s linear 0s; /* Transition immédiate pour visibilite */
}

/* Changement de couleur du header au survol */
.accordion-header:hover {
    background-color: #e1e1e1;
}

/* Animation de la flèche */
.accordion-header:hover .arrow {
    transform: rotate(180deg); /* Tourner la flèche */
    transition: transform 0.3s ease; /* Transition fluide */
}


#books-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
}

.livre {
    width: 400px; /* Ajustez cette valeur en fonction de vos besoins */
    margin: 10px; /* Espacement autour de la carte */
    padding: 10px; /* Espacement interne */
    border: 1px solid #ddd; /* Ajouter une bordure pour mieux visualiser les cartes */
    border-radius: 10px; /* Coins arrondis */
    background-color: #f9f9f9; /* Couleur de fond */
}

.livre img {
    width: 100%; /* Rendre l'image responsive pour s'adapter à la largeur de la carte */
    height: auto; /* Assurez-vous que l'image conserve ses proportions */
}


.livre-image {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.livre-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* This is the key change */
}

.livre-content {
  padding: 15px;
  text-align: center;
}

/* Style pour le sélecteur de l'opérateur */
#operateur {
    padding: 8px;
    width : 400px ;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Ajout d'un style au survol pour améliorer l'interaction */
#operateur:hover {
    background-color: #e9e9e9;
}

/* Ajout de style pour les options */
#operateur option {
    padding: 8px;
    background-color: #fff;
}

/* Changer la couleur du texte au survol d'une option */
#operateur option:hover {
    background-color: #ddd;
    color: #333;
}

#operateur:focus {
    border-color: #0056b3; /* Changer la couleur de la bordure quand sélectionné */
    background-color: #e0f0ff; /* Couleur de fond plus claire au focus */
}

/* Style de la flèche de Select2 */
.select2-container .select2-selection--single {
    height: 40px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 5px 10px;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    width : 400px ;
}

/* Style de la flèche dans Select2 */
.select2-container .select2-selection__arrow {
    height: 30px;
    top: 50%;
    margin: 5px 10px ;
}

/* Apparence des options au survol */
.select2-results__option:hover {
    background-color: #f1f1f1;
    color: #333;
}