body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column; /* Pour empiler les éléments verticalement */
}



.Form-recherche{
    display: flex;
  }
.info-recherche-principal{
    margin-left: 20%;
    margin-right: 50px;
    display: flex;
    flex-direction: column;
}
/* Style du bouton Filtre avancé */
#toggleFilter {
    margin-left: 20%;
    margin-top: 20px;
    background-color: #5752D0; /* Couleur de fond (violet du thème) */
    color: white; /* Couleur du texte en blanc */
    font-size: 1.2em; /* Taille de la police */
    font-weight: 500; /* Poids de la police pour plus de visibilité */
    border: none; /* Retire la bordure par défaut */
    padding: 10px 20px; /* Espacement interne pour donner de la place au texte */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Le curseur devient un pointeur au survol */
    transition: all 0.3s ease; /* Transition fluide pour les effets de survol et de focus */
}

/* Style au survol */
#toggleFilter:hover {
    background-color: #3c3aa6; /* Couleur légèrement plus foncée pour l'effet hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre portée pour l'effet de profondeur */
}

/* Effet au clic (lorsque le bouton est pressé) */
#toggleFilter:active {
    background-color: #4e45a0; /* Couleur encore plus foncée pendant le clic */
    transform: scale(0.96); /* Réduit légèrement la taille pour simuler un effet de pression */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre plus douce pendant le clic */
}


/* Style lorsqu'il est activé (focus) */
#toggleFilter:focus {
    outline: none; /* Retire le contour de focus par défaut */
    box-shadow: 0 0 10px rgba(87, 82, 208, 0.7); /* Ombre autour du bouton lors du focus */
}

/* Style du bouton */
#showDateRange {
    margin: 13px;
    background-color: transparent; /* Fond transparent pour ne pas avoir de fond visible */
    color: #5752D0; /* Couleur du texte (violet du thème) */
    font-size: 1.2em; /* Taille de la police */
    font-weight: 500; /* Poids de la police pour plus de visibilité */
    border: none; /* Enlève la bordure par défaut */
    padding: 6px 20px; /* Espacement interne pour donner de la place au texte */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Le curseur se transforme en pointeur au survol */
    text-decoration: none; /* Retire le soulignement du texte (s'il est appliqué) */
    transition: all 0.3s ease; /* Transition fluide lors des changements d'état */
}

/* Style au survol */
#showDateRange:hover {
    color: white; /* Change la couleur du texte au survol */
    background-color: #5752D0; /* Fond violet au survol */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ajoute une ombre au survol */
}

/* Style lorsqu'il est activé (focus) */
#showDateRange:focus {
    outline: none; /* Retire le contour de focus */
    box-shadow: 0 0 10px rgba(87, 82, 208, 0.7); /* Ombre spécifique au focus pour attirer l'attention */
}
#dateTo{
    margin-bottom: 20px;
}
/* Style global pour le select */
#dateFrom, #dateTo{
    -webkit-appearance: none; /* Retire l'apparence par défaut dans les navigateurs WebKit */
    appearance: none; /* Retire l'apparence par défaut dans d'autres navigateurs */
    background-color: #5752D0; /* Couleur de fond du select */
    color: white; /* Texte en blanc */
    font-size: 1.2em; /* Taille de la police */
    font-weight: 400; /* Poids de la police */
    padding: 5px 15px; /* Espacement interne du select */
    border: 2px solid #4e44b3; /* Bordure de couleur plus foncée */
    border-radius: 5px; /* Coins arrondis */
    outline: none; /* Retire le contour de focus */
    cursor: pointer; /* Change le curseur au survol */
    width: 100%; /* Prend toute la largeur disponible */
    transition: all 0.3s ease; /* Ajoute une transition fluide */
}

/* Style de la flèche pour l'élément select */
#dateFrom::-ms-expand {
    display: none; /* Masque la flèche par défaut dans IE */
}

/* Style lors du survol */
#dateFrom:hover {
    border-color: #3c38a3; /* Couleur de la bordure au survol */
}

/* Style lorsque le select est activé (focus) */
#dateFrom:focus {
    border-color: #2f2a8e; /* Couleur de la bordure lorsque le champ est sélectionné */
    background-color: #4e44b3; /* Changement de couleur de fond */
}

/* Style pour les options dans le select */
#dateFrom option {
    background-color: #5752D0; /* Couleur de fond des options */
    color: white; /* Texte des options en blanc */
    padding: 10px; /* Espacement interne des options */
}

/* Style pour les options au survol */
#dateFrom option:hover {
    background-color: #4e44b3; /* Couleur de fond au survol */
}

/* Personnalisation de la barre de l'input range */
#evaluationMax, #evaluationMin {
    -webkit-appearance: none; /* Supprime l'apparence par défaut */
    appearance: none;
    width: 100%; /* Prend toute la largeur disponible */
    height: 8px; /* Hauteur de la barre */
    background: #5752D0; /* Couleur de la barre */
    border-radius: 5px; /* Bords arrondis */
    outline: none; /* Retire le contour par défaut */
    transition: background-color 0.3s ease; /* Transition lors du survol */
}

/* Lorsque l'on survole la barre */
#evaluationMax:hover, #evaluationMin:hover {
    background: #4e44b3; /* Couleur légèrement plus foncée sur hover */
}

/* Personnalisation du cercle (le bouton qui bouge) */
#evaluationMax::-webkit-slider-thumb, #evaluationMin::-webkit-slider-thumb  {
    -webkit-appearance: none; /* Retire l'apparence par défaut */
    appearance: none;
    width: 20px; /* Largeur du cercle */
    height: 20px; /* Hauteur du cercle */
    background: white; /* Couleur du cercle */
    border-radius: 50%; /* Rendre le cercle rond */
    border: 2px solid black; /* Bordure noire autour du cercle */
    cursor: pointer; /* Curseur pointer pour montrer qu'il est interactif */
    transition: background-color 0.3s ease; /* Transition pour le survol */
}

/* Personnalisation du cercle (le bouton) lors du survol */
#evaluationMax::-webkit-slider-thumb:hover, #evaluationMin::-webkit-slider-thumb:hover{
    background: #ccc; /* Couleur gris clair lors du survol */
}

/* Personnalisation pour Firefox */
#evaluationMax::-moz-range-thumb, #evaluationMin::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    border: 2px solid black;
    cursor: pointer;
}

/* Personnalisation pour Internet Explorer */
#evaluationMax::-ms-thumb, #evaluationMin::-ms-thumb {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    border: 2px solid black;
    cursor: pointer;
}

.filtre-search-option {
    margin-left: 20%;
    display: none; /* Masquer par défaut */
    margin-top: 20px;
    padding: 15px;
    max-width: 300px;
    background-color: #0e0e0e;
    border: 1px solid #5752D0;
    border-radius: 5px;
    
}
.genre-buttons button {
    color: #6c6c6c;
    font-size: 1.4em;
    background: none; /* Retire l'arrière-plan */
    border: none; /* Retire les bordures */
    outline: none; /* Retire le contour de focus */
    text-decoration: none; /* Retire toute décoration du texte */
    cursor: pointer; /* Ajoute un curseur de main */
    padding: 0; /* Supprime les espacements internes */
    display: block; /* Rend le bouton un élément de type bloc, pour une meilleure gestion de la mise en page */
    margin: 0; /* Enlève les marges par défaut */
     text-align: left;
    padding: 5px 5px 5px 20px;
  
}

.Form-recherche{
    margin-top: 50px;
}


.genre-buttons {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    max-height: 500px;
    overflow-y: auto; /* Active la barre de défilement verticale */
    background: none;
    padding: 0.5rem;
    border-radius: 4px;
}

/* Personnalisation de la scrollbar pour WebKit (Chrome, Safari) */
.genre-buttons::-webkit-scrollbar {
    width: 12px; /* Largeur de la scrollbar */
}

/* Couleur de la barre */
.genre-buttons::-webkit-scrollbar-thumb {
    background: rgba(60, 60, 60, 0.8); /* Couleur de la partie déplaçable */
    border-radius: 10px; /* Arrondi des coins */
}

/* Couleur de la barre au survol */
.genre-buttons::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, 1); /* Couleur au survol */
}

/* Couleur de la piste de la scrollbar */
.genre-buttons::-webkit-scrollbar-track {
    background: rgba(15, 16, 20, 0.5); /* Couleur de la piste */
    border-radius: 10px; /* Arrondi des coins */
}

/* Personnalisation pour Firefox */
.genre-buttons {
    scrollbar-width: thin; /* Rend la scrollbar plus fine */
    scrollbar-color: rgba(60, 60, 60, 0.8) rgba(15, 16, 20, 0.5); /* [partie déplaçable] [piste] */
}


.btn-genre.selected {
    padding: 5px 5px 5px 20px;
    border: 2px solid #5752D0;
    border-radius: 5px;
    color: white;
}
.btn-genre:hover {
    padding: 5px 5px 5px 20px;
    border: 2px solid #5752D0;
    border-radius: 5px;
    color: white;
}


.btn-search {
    max-width: 350px;
    font-size: 2.2em;
    font-weight: 400;
    background: none;
    border: none;
    outline: none;
    text-decoration: none;
    cursor: text;
    display: block;
    color: white;
    border-bottom: 1px solid #f8f8f82b;
    padding: 5px 5px 5px 10px;
}

/* Style du texte lorsque l'input est en cours d'édition */
.btn-search:focus {
    font-size: 2.3em;
    color: white;
 }

.btn-search:hover {
    font-size: 2.3em;
    color: white;
 }


/* Conteneur principal */
.results-recherche {
    padding: 20px;
    display: flex;
    flex-wrap: wrap; /* Pour permettre aux éléments de passer sur une nouvelle ligne */
    gap: 1rem; /* Espace entre les éléments */
}

.search-result-affiche-image, .search-result-affiche{
    border-radius: 7px;
    text-align: right;
    width: 200px;
    overflow: hidden; /* Cache le texte qui dépasse */
    text-overflow: ellipsis;
}
/* Conteneur pour l'image et le bouton */
.titre-favoris-affiche{
    white-space: nowrap;}
.play-button {
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    
    font-size: 18px;
    width: 150px;
    border-radius: 50%;
    display: none; /* Cacher le bouton par défaut */
    cursor: pointer;
}
.play-button:hover {
    width: 160px; /* L'agrandissement du bouton au survol */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre douce autour du bouton */
}

/* Affichage du bouton Play lors du survol de l'image */
.image-container:hover .play-button {
    display: block; /* Afficher le bouton au survol */
    
}

/* Effet visuel de l'image lors du survol */
/* Lorsque l'on survole le conteneur */
.image-container:hover .search-result-affiche-image {
    opacity: 0.8; /* Légère transparence sur l'image */
    background-color: black; /* Ajouter un fond noir */
    filter: blur(3px); /* Ajouter un flou de 5px */
}

/* Vous pouvez également ajouter un effet de transition pour que le flou apparaisse en douceur */
.search-result-affiche-image {
    transition: filter 0.15s ease, opacity 0.1s ease;
}
@media (max-width: 1000px) and (min-width: 768px) {
    .filtre-search-option, #toggleFilter  {
    margin-left: 10%;
    }
.Form-recherche{
    margin-top: 50px;
}
.info-recherche-principal{
    margin-left: 8%;
    margin-right: 20px;
}

.genre-buttons {
    max-width: 280px;

} 
    .btn-search {
    max-width: 250px;
}
}

@media (max-width: 768px) {
.Form-recherche{
    margin-top: 0px;
}

    .Form-recherche{
    display: block;
  }
.info-recherche-principal{
    margin-left: 20%;
    margin-right: 50px;
    display: flex;
    flex-direction: column;
}


.genre-buttons button, .btn-primary {
display: none;
  
}

.btn-search {
    min-width: 80%;
    max-width: 400px;
    font-size: 1.4em;
    font-weight: 400;
    padding: 10px;
    text-align: center;

    /* Ajout d'une ombre portée */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* Ombre légère */
    margin-bottom: 20px;
}



    .btn-search:focus {
    max-width: 250px;
    font-size: 1.5em;
    padding: 15px 15px 15px 20px;
    text-align: left;
}
    .btn-search:hover {
    font-size: 1.4em;
    color: white;
 }
    .search-result-affiche-image, .search-result-affiche{
    width: 150px;
    border-radius: 4px;
}

.image-container:hover .play-button {
    display: none; /* Afficher le bouton au survol */
    
}
    .results-recherche {
    padding: 0px;
    display: flex;
    flex-wrap: wrap; /* Pour permettre aux éléments de passer sur une nouvelle ligne */
    gap: 1rem; /* Espace entre les éléments */

        justify-content: center;
}
}