/* Styles pour la barre de tri et le bouton de direction */

/* En-tête pour les boutons de filtres et le tri */
.filters-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.filters-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Container de tri */
.sort-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* .sort-label n'est plus utilisé car "Trier par :" est dans le select */
.sort-label {
    display: none;
}

.sort-controls {
    display: flex;
    align-items: stretch;
    height: 40px;
}

/* Style du select */
.sort-select {
    max-width: 220px; /* Largeur ajustée pour inclure "Trier par :" */
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px; /* Arrondi uniquement à gauche */
    background-color: #f9f9f9;
    font-size: 0.9rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    cursor: pointer;
    /* Tronquer le texte avec ellipsis si trop long */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 30px; /* Espace pour la flèche */
}

/* Style du bouton de direction */
.sort-direction-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    padding: 0;
    color: var(--primary-color);
    border: 1px solid #ddd;
    border-left: none; /* Supprimer la bordure gauche pour la jointure avec le select */
    border-radius: 0 4px 4px 0; /* Arrondi uniquement à droite */
    background-color: #f9f9f9;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sort-direction-btn:hover,
.sort-select:hover {
    background-color: #f0f0f0;
}

.sort-direction-btn .sort-arrow {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 20px;
    height: 20px;
    color: #666;
}

/* Animation pour le tri descendant (par défaut) - flèche vers le bas */
.sort-direction-btn[data-direction="desc"] .sort-arrow,
.sort-direction-btn:not([data-direction]) .sort-arrow {
    transform: rotate(180deg);
}

/* Animation pour le tri ascendant - flèche vers le haut */
.sort-direction-btn[data-direction="asc"] .sort-arrow {
    transform: rotate(0deg);
}

/* Couleur du SVG au hover */
.sort-direction-btn:hover .sort-arrow {
    color: var(--primary-color, #3498db);
}

/* Mode sombre pour le SVG */
.dark-mode .sort-direction-btn .sort-arrow {
    color: #aaa;
}

.dark-mode .sort-direction-btn:hover .sort-arrow {
    color: #fff;
}

/* Style pour le mode actif */
.sort-direction-btn.active,
.sort-select:focus {
    border-color: #3498db;
    outline: none;
}

/* Mode sombre */
.dark-mode .sort-select,
.dark-mode .sort-direction-btn {
    background-color: #2a2a2a;
    border-color: #444;
}

.dark-mode .sort-select {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23aaa' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
}

.dark-mode .sort-direction-btn:hover,
.dark-mode .sort-select:hover {
    background-color: #333;
}

/* Media queries pour responsive */
@media screen and (max-width: 768px) {
    .filters-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .sort-container,
    .filters-left {
        width: 100%;
    }
    
    .sort-select {
        width: 120px; /* Encore plus étroit sur mobile */
    }
    
    .sort-label {
        margin-right: 8px;
    }
}