/* ===== 9-PANNEAU-CONTROLE-BASE.CSS ===== */

/* DÉFAUT (DESKTOP) */
.control-zone,
.navigation-panel {
    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 */
    width: 550px;
    height: 240px;
    padding: var(--padding-lg);
    
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    z-index: 10000;
}

/* TABLETTE (max 1023px) */
@media (max-width: 63.9375rem) {
    .control-zone,
    .navigation-panel {
        width: 500px;
        padding: var(--padding-md);
    }
}

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

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