/* Styles pour les boutons de filtre et de tri */
.filter-btn, .sort-btn {
    padding: 8px 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease; /* Transition ajoutée */
    transition-property: background-color, transform; /* Spécifie les propriétés à animer */
}

/* Effet de hover pour les boutons */
.filter-btn:hover, .sort-btn:hover {
    background-color: #e0e0e0; /* Changement de couleur au survol */
}

/* Effet pour l'état actif */
.filter-btn.active, .sort-btn.active {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
    transform: scale(1); /* Réduction de l'échelle pour indiquer un bouton pressé */
}

/* Animation d'appui pour donner un effet de clic */
.filter-btn:active, .sort-btn:active {
    transform: scale(1); /* Légère réduction lorsque le bouton est pressé */
    transition: transform 0.05s ease; /* Transition rapide pour simuler l'effet de clic */
}

/* Style pour chaque groupe de filtres */
.filter-group {
    margin-bottom: 20px;
}

/* Disposition des boutons dans chaque groupe de filtre */
.filter-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Grille responsive */
    gap: 8px;
    margin-top: 5px;
}

/* Style pour les chansons dans une disposition de carte */
.chanson-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Styles additionnels pour .chanson-item */
.chanson-item {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.chanson-item h3 {
    font-size: 1.2rem; /* Taille augmentée pour les titres */
    font-weight: bold;
    margin-bottom: 4px;
    color: #333;
}

.chanson-item p {
    font-size: 1rem;
    color: #666;
}

.chanson-item p strong {
    font-weight: bold;
    color: #333;
}

/* Styles pour la barre de recherche */
#search-container {
    position: relative; /* Positionnement relatif pour le bouton de réinitialisation */
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#search-input {
    flex: 1;
    padding: 10px 35px 10px 10px; /* Espace à droite pour le bouton de réinitialisation */
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}

/* Positionnement et couleur du bouton de réinitialisation dans le champ de recherche */
#search-reset {
    position: absolute;
    right: 0px; /* Aligné à droite du champ de recherche */
    top: 50%; /* Centré verticalement */
    transform: translateY(-50%); /* Ajustement de l'alignement vertical */
    background: none;
    border: none;
    font-size: 30px; /* Taille de police augmentée */
    color: #ff0000; /* Couleur rouge */
    cursor: pointer;
    display: none; /* Masquer le bouton par défaut */
}

/* Disposition des boutons de tri */
#sort-buttons {
    display: flex;
    margin-top: 15px;
}

/* Autre définition pour les boutons de tri */
#sort-buttons {
    display: flex;
    margin-top: 5px;
    gap: 10px;
}

#sort-buttons .sort-btn {
    flex: 1;
    padding: 10px;
    text-align: center;
}

/* Media query pour les écrans de 768px ou moins */
@media (max-width: 768px) {

    /* Disposition en 3 colonnes pour les boutons de filtre */
    .filter-buttons {
        grid-template-columns: repeat(3, 1fr); /* Grille en 3 colonnes */
        gap: 5px;
    }

    /* Disposition en 2 colonnes pour les boutons de tri */
    #sort-buttons {
        grid-template-columns: repeat(2, 1fr); /* Grille en 2 colonnes */
        gap: 5px;
    }

    /* Forcer la hauteur des boutons de filtre et de tri */
    .filter-btn, .sort-btn {
        width: 100%;
        padding: 8px 10px;
        font-size: 1em;
        height: auto;
        min-height: 40px;
        box-sizing: border-box;
    }

    /* Réduction de l'espacement des groupes de filtres */
    .filter-group {
        margin-bottom: 15px;
    }

    /* Barre de recherche en disposition colonne */
    #search-container {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 15px;
    }

    #search-input {
        width: 100%;
        padding: 10px;
    }

    /* Positionnement du bouton de réinitialisation de la recherche */
    #search-reset {
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        color: #ff0000; /* Couleur rouge pour le bouton de réinitialisation sur mobile également */
    }

    /* Styles pour les cartes de chansons sur mobile */
    .chanson-item {
        padding: 10px;
        margin-bottom: 15px;
    }

    .chanson-item h3 {
        font-size: 1.1em;
    }

    .chanson-item p {
        font-size: 0.9em;
    }
}