/* Affichage des carrousels sur téléphone.
   Sur grand écran, chaque slide est une scène fixe de 1280 × 720 réduite par
   autoScaleStage(). Sur téléphone, cette réduction rend le texte illisible :
   la scène est donc remise en page (une colonne, hauteur libre) et légèrement
   zoomée. Les !important passent devant les styles écrits en ligne par le JS.
   html.adt-export (posé par carousel-mobile.js pendant un téléchargement PNG)
   désactive ces règles pour que l'image garde le format 1280 × 720. */
@media (max-width: 820px) {
    html:not(.adt-export) body { padding: 8px 8px 24px !important; }

    /* Barre de navigation : sur deux lignes, boutons compacts, figée en haut de l'écran */
    html:not(.adt-export) .presentation-bar {
        flex-wrap: wrap; justify-content: center; gap: 8px;
        padding: 10px 12px; border-radius: 18px; position: sticky !important; top: 6px; z-index: 1000;
    }
    /* Une fois la page défilée (classe posée par carousel-mobile.js), la barre ne garde
       que Précédent / compteur / Suivant pour masquer le moins de contenu possible */
    html.adt-stuck:not(.adt-export) .presentation-bar { padding: 6px 8px; border-radius: 999px; }
    html.adt-stuck:not(.adt-export) .presentation-bar .brand-pill,
    html.adt-stuck:not(.adt-export) .nav-controls > :not([onclick^="prevSlide"]):not([onclick^="nextSlide"]):not(#slideCounter) { display: none !important; }
    html:not(.adt-export) .brand-pill { width: 100%; justify-content: center; font-size: 15px; flex-wrap: wrap; gap: 8px; }
    html:not(.adt-export) .nav-controls { width: 100%; justify-content: center; gap: 6px; }
    html:not(.adt-export) .nav-btn { padding: 7px 12px; font-size: 13.5px; }
    html:not(.adt-export) .btn-download-main { order: 5; }

    /* Scène : plus de mise à l'échelle, la slide suit la largeur de l'écran */
    html:not(.adt-export) .stage-scaler-wrapper { height: auto !important; }
    html:not(.adt-export) .stage-container-box {
        transform: none !important; width: 100% !important; height: auto !important;
        min-height: 0 !important; border-radius: 16px;
    }
    html:not(.adt-export) .slide-deck { height: auto !important; }
    html:not(.adt-export) .slide-item {
        position: relative !important; display: none !important; height: auto !important; min-height: 0 !important;
        transform: none !important; padding: 18px 16px !important; gap: 14px; zoom: 0.78;
    }
    html:not(.adt-export) .slide-item.active { display: flex !important; }

    /* Tout ce qui était côte à côte passe sur une colonne */
    html:not(.adt-export) .slide-item [class*="grid"],
    html:not(.adt-export) .slide-item [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    html:not(.adt-export) .slide-item [style*="width"] { max-width: 100% !important; }
    html:not(.adt-export) .slide-item * { min-width: 0; overflow-wrap: anywhere; }
    html:not(.adt-export) .slide-item [style*="position: absolute"],
    html:not(.adt-export) .slide-item [style*="position:absolute"] { max-width: 100%; }
    html:not(.adt-export) .content-area { justify-content: flex-start !important; }

    /* En-tête et pied de slide */
    html:not(.adt-export) .slide-header { height: auto !important; flex-wrap: wrap; gap: 10px; }
    html:not(.adt-export) .slide-title-bar { align-items: flex-start; }
    html:not(.adt-export) .slide-footer { flex-wrap: wrap; justify-content: center; gap: 10px; text-align: center; padding-top: 12px; }
    html:not(.adt-export) .slide-footer > * { flex: 1 1 100%; justify-content: center; }

    html:not(.adt-export) .carousel-bar { flex-wrap: wrap; justify-content: center; }
}