/* ===== BOUTON TOGGLE PANNEAU ===== */
/* Bouton +/- pour afficher/masquer les contrôles avancés */

.panel-toggle-btn {
    /* Dimensions */
    width: clamp(2.5rem, 5vw, 3rem);
    height: clamp(2.5rem, 5vw, 3rem);
    
    /* Style avec couleurs du projet */
    background-color: var(--couleur-primaire);
    border: var(--bordure-normale) solid var(--couleur-primaire-foncee);
    border-radius: var(--rayon-md);
    
    /* Centrage de l'icône */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Curseur */
    cursor: pointer;
    
    /* Transition smooth */
    transition: all var(--transition-normale);
    
    /* Retirer les styles par défaut du bouton */
    padding: 0;
    margin: 0;
    
    /* Ombre */
    box-shadow: var(--ombre-sm);
}

.panel-toggle-btn:hover {
    background-color: var(--couleur-primaire-foncee);
    transform: translateY(-2px);
    box-shadow: var(--ombre-md);
}

.panel-toggle-btn:active {
    transform: translateY(0);
    box-shadow: var(--ombre-sm);
}

.panel-toggle-btn:focus {
    outline: 2px solid var(--couleur-primaire);
    outline-offset: 2px;
}

/* Icône +/- */
.toggle-icon {
    font-size: clamp(1.5rem, 3.5vw, 1.75rem);
    font-weight: var(--poids-bold);
    color: var(--texte-blanc);
    line-height: 1;
    user-select: none;
}

/* ========================================
   ANIMATION DE LA DEUXIÈME LIGNE
   ======================================== */

#enrichmentControls {
    transition: all var(--transition-normale);
    max-height: 0;
    opacity: 0;
}

#enrichmentControls.open {
    max-height: 10rem; /* Hauteur suffisante pour la deuxième ligne */
    opacity: 1;
    margin-top: var(--gap-lg);
}

/* ========================================
   PANNEAU RÉDUIT / ÉTENDU
   ======================================== */

/* Le panneau s'adapte automatiquement en hauteur */
.control-zone {
    transition: all var(--transition-normale);
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Mobile : bouton ajusté automatiquement par clamp() */
@media (max-width: 37.5rem) {
    .panel-toggle-btn {
        /* Les dimensions sont déjà fluides avec clamp() */
    }
}

/* ========================================
   PRINT
   ======================================== */

@media print {
    .panel-toggle-btn {
        display: none;
    }
}