/* ============================================================
   MOBILE SIDEBAR SELECTOR BUTTONS
   Styles pour les boutons de sélection mobile (Qualités/Notes)
   Fichier dédié - À charger uniquement pour les pages avec sidebars
   ============================================================ */

/* Uniquement en mobile (max-width: 992px) */
@media (max-width: 992px) {
    
    /* ========================================
       WRAPPER LABEL + BOUTON
       ======================================== */
    
    .mobile-selector-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0;
        background: none;
    }
    
    /* ========================================
       LABEL AU-DESSUS DU BOUTON
       ======================================== */
    
    .mobile-selector-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: center;
        margin-bottom: 0.25rem;
    }
    
    /* ========================================
       BOUTON SÉLECTEUR MOBILE
       ======================================== */
    
    .mobile-selector-button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.875rem 1rem;
        background: #808000;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 700;
        color: #FFFAEB;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-selector-button:hover {
        background: #6b6b00;
    }
    
    .mobile-selector-button:active {
        background: #5a5a00;
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }
    
    /* ========================================
       CONTENU DU BOUTON
       ======================================== */
    
    .mobile-selector-button .selector-value {
        flex: 1;
        text-align: center;
        color: #FFFAEB;
        font-weight: 700;
    }
    
    .mobile-selector-button i {
        color: #FFFAEB;
        font-size: 0.875rem;
        margin-left: 0.5rem;
    }
}

/* ========================================
   MASQUER EN DESKTOP
   ======================================== */

@media (min-width: 993px) {
    .mobile-selector-wrapper {
        display: none !important;
    }
}