/* ===== 5-CONTENEUR-AFFICHAGE.CSS ===== */
/* 🟢 Le conteneur avec bordure olive uniquement */
/* 📦 Ne gère QUE le cadre, pas son contenu */

/* ========================================
   CONTENEUR PRINCIPAL
   ======================================== */

.content-display-area {
    border: var(--bordure-epaisse) solid var(--bordure-principale);
    border-radius: var(--rayon-lg);
    margin: var(--margin-sm) auto var(--margin-lg);
    max-width: var(--largeur-max-conteneur);
    
    /* Padding uniforme pour tous les instruments */
    padding: var(--padding-md);
    
    /* Dimensions adaptatives */
    width: fit-content;
    height: auto;
    min-height: 400px;
    
    background: transparent;
    
    /* Layout flex pour centrer le contenu */
    display: flex;
    align-items: center;              /* ✅ Centrage vertical */
    justify-content: center;           /* ✅ Centrage horizontal */
    position: relative;
    overflow-y: hidden;
    overflow-x: hidden;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    
    /* Transitions fluides */
    transition: min-height 0.4s ease, 
                width 0.4s ease, 
                height 0.4s ease,
                opacity 0.3s ease;
}

/* ========================================
   MODE DICTIONNAIRE
   Adaptations pour le mode bibliothèque
   ======================================== */

body[data-current-note] .content-display-area {
    margin: var(--margin-lg) auto;
    max-width: 100%;
}

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

@media (max-width: 47.9375rem) {
    .content-display-area {
        min-height: 350px;
        max-width: calc(100% - 2rem);
        margin-left: 1rem;
        margin-right: 1rem;
        padding: var(--padding-sm);
    }
}

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

@media (min-width: 48rem) and (max-width: 63.9375rem) {
    .content-display-area {
        min-height: 380px;
    }
}

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

@media (min-width: 64rem) {
    .content-display-area {
        min-height: 300px;
    }
}

/* ========================================
   ÉTATS SPÉCIAUX
   ======================================== */

/* État de chargement */
.content-display-area.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* État vide (aucun diagramme) */
.content-display-area:empty {
    min-height: 300px;
}

/* ========================================
   PRÉFÉRENCE MOUVEMENT RÉDUIT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .content-display-area {
        transition: none;
    }
}

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

@media print {
    .content-display-area {
        border: var(--bordure-fine) solid #ccc;
        padding: 0;
        margin: 1rem auto;
        min-height: auto;
        page-break-inside: avoid;
    }
}