/* ===== 9-PANNEAU-CONTROLE-BASE.CSS ===== */
/* 🎯 Conteneur parent COMMUN aux deux modes avec dimensions fixes identiques */

/* ========================================
   CONTENEUR PARENT - DIMENSIONS FIXES IDENTIQUES
   ======================================== */

.control-zone,
.navigation-panel {
    /* Bordure olive commune */
    background: var(--fond-creme);
    border: var(--bordure-epaisse) solid var(--bordure-principale);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-lg);
    
    /* Dimensions fixes identiques pour les deux modes */
    width: 550px;
    min-height: 228px; /* Hauteur minimale pour cohérence */
    max-width: 90%;
    margin: var(--margin-lg) auto;
    padding: var(--padding-lg);
    
    /* Layout */
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
     z-index: 10000;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 47.9375rem) {
    .control-zone,
    .navigation-panel {
        width: 100%;
        min-height: auto;
        max-width: 100%;
        padding: var(--padding-md);
    }
}

/* ========================================
   RESPONSIVE - TABLETTE
   ======================================== */

@media (min-width: 48rem) and (max-width: 63.9375rem) {
    .control-zone,
    .navigation-panel {
        width: 520px;
        min-height: 220px;
        max-width: 85%;
        padding: var(--padding-lg);
    }
}

/* ========================================
   RESPONSIVE - DESKTOP
   ======================================== */

@media (min-width: 64rem) {
    .control-zone,
    .navigation-panel {
        width: 550px;
        min-height: 228px;
        max-width: 80%;
        padding: 1.5rem;
    }
}

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

@media print {
    .control-zone,
    .navigation-panel {
        display: none;
    }
}