/* =========================================================
   MOBILE — surcharges pour téléphone uniquement.
   Chargé EN DERNIER. TOUT est dans @media (max-width: 720px) :
   au-dessus, ce fichier n'a aucun effet (version web inchangée).
   Ne jamais ajouter de règle hors de ce bloc.
   ========================================================= */
@media (max-width: 720px) {

    /* Carte d'exercice : rail (type + difficulté) au-dessus du contenu
       au lieu d'une colonne à gauche qui écrase le titre */
    .exo-layout { flex-direction: column; gap: var(--space-2); }
    .exo-rail { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-2); }

    /* Bandeau de contexte : passe à la ligne au lieu de tronquer */
    .context-banner { flex-wrap: wrap; }
    .context-banner-search-label,
    .context-banner-segment strong { white-space: normal; }

    /* Barre de contexte (fixed, éléments en position:absolute superposés) :
       sur téléphone, une seule ligne où les éléments se suivent, défilable
       horizontalement. Hauteur inchangée → le décalage du contenu reste bon. */
    .ctx-bar .ctx-bar-inner {
        display: flex; align-items: center; gap: 12px;
        overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
        padding: 0 12px; max-width: none;
    }
    .ctx-bar .ctx-breadcrumb,
    .ctx-bar .ctx-bar-center,
    .ctx-bar .ctx-bar-extra,
    .ctx-bar .spdf-tools,
    .ctx-bar .spdf-corner {
        position: static !important; transform: none !important;
        left: auto !important; right: auto !important; top: auto !important;
        height: auto !important; max-width: none !important;
        flex: none !important; margin: 0 !important;
    }
    .ctx-bar .ctx-bar-extra { display: flex; gap: 12px; }
    /* Outils sans intérêt au doigt : recompiler, zoom/pagination (le PDF
       défile), lien ancienne page, icônes admin du coin */
    .ctx-bar .doc-pdf-recompile-group,
    .ctx-bar .doc-pdf-toolbar-sep,
    .ctx-bar .spdf-tools-right,
    .ctx-bar .spdf-corner { display: none !important; }

    /* Page feuille/cours : le PDF était masqué sous 860px (doc.css).
       Sur téléphone on ne montre QUE le PDF, pleine largeur, à la hauteur
       de l'écran (son défilement interne reste celui du viewer). */
    .doc-page > .doc-page-pdf:not(.doc-page-pdf-embedded) {
        display: flex !important; position: static !important;
        width: auto !important; max-width: none !important;
        flex: none !important; order: 1;
        height: calc(100dvh - 110px) !important;
    }
    .doc-page-pdf .fpdf-scroll { flex: 1 1 auto; min-height: 0; }
    .doc-page:has(> .doc-page-pdf:not(.doc-page-pdf-embedded)) > .doc-page-sidebar,
    .doc-page:has(> .doc-page-pdf:not(.doc-page-pdf-embedded)) > .fpdf-code { display: none !important; }

    /* Cartes Devoirs (DM/DS/Colles) : icône étroite, corps qui prend la
       place, colonne de progression compacte — le titre n'est plus « D… » */
    .devoirs-card-badge { flex: 0 0 48px !important; width: 48px !important; min-width: 0 !important; padding: 0 !important; }
    .devoirs-card-badge .sh-kind-icon { width: 30px; height: 30px; }
    .devoirs-card-body { flex: 1 1 0 !important; min-width: 0 !important; padding-left: 12px !important; padding-right: 8px !important; }
    .devoirs-card-title { white-space: normal !important; }
    .devoirs-card-side { flex: none !important; width: auto !important; min-width: 0 !important; }
    .devoirs-card-progress { padding: 0 6px !important; min-width: 0 !important; width: auto !important; }
    .devoirs-card-chevron { flex: none !important; width: 24px !important; min-width: 0 !important; padding: 0 !important; }

    /* Cartes Colles : la liste d'élèves (position:absolute sur desktop)
       chevauchait la date → remise dans le flux, avec retour à la ligne */
    .devoirs-card .devoirs-card-chapters {
        position: static !important; inset: auto !important;
        flex-wrap: wrap !important; overflow: visible !important;
        width: auto !important; max-width: none !important;
        padding: 0 !important; margin-top: 8px;
    }
    .devoirs-card-names-featured { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important; grid-auto-flow: row !important; }
    .devoirs-card-names-featured-item { min-width: 0 !important; width: auto !important; }

    /* Planning : sur desktop, la page tient pile dans la hauteur d'écran,
       périodes côte à côte. Empilées sur téléphone, chaque période n'avait
       plus que ~37px → la page grandit, chaque période a une vraie hauteur
       (les chapitres gardent leur taille proportionnelle aux heures).
       La règle des semaines n'a de sens qu'à côté des colonnes : masquée. */
    main:has(.planning-page) { width: auto !important; }
    .planning-page { height: auto !important; overflow: visible !important; padding-left: 0 !important; padding-right: 0 !important; }
    .planning-grid { flex: none !important; }
    .planning-week-ruler { display: none !important; }
    .planning-col-body { flex: none !important; height: 420px; }

    /* Tableaux larges (liste des élèves…) : défilement horizontal dans leur
       bloc au lieu de colonnes coupées hors écran */
    .doc-chapters-scroll:has(> table) { overflow-x: auto !important; }

    /* Page cours/feuille en MODE ÉLÈVE : le PDF est un panneau « embedded »
       (sans [hidden] quand l'affichage PDF est choisi). En colonne il
       tombait à 0px de large, sous le sommaire → pleine largeur, en premier,
       à la hauteur de l'écran, sommaire masqué pendant l'affichage PDF. */
    .doc-page > .doc-page-pdf-embedded:not([hidden]) {
        width: 100% !important; flex: none !important; align-self: stretch !important;
        height: calc(100dvh - 110px) !important; order: -1;
    }
    body:not(.m-toc-open) .doc-page:has(> .doc-page-pdf-embedded:not([hidden])) > .doc-page-sidebar { display: none !important; }

    /* Sommaire en panneau (mobile.js : tap sur le PDF → body.m-toc-open) */
    body.m-toc-open .doc-page > .doc-page-sidebar {
        display: flex !important;
        position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
        z-index: 500; width: auto !important; max-height: 70dvh !important;
        overflow-y: auto !important; margin: 0 !important;
        background: var(--surface-2, #12161d);
        border-top: 1px solid var(--border);
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    }
    body.m-toc-open::after {
        content: ""; position: fixed; inset: 0; z-index: 499;
        background: rgba(0, 0, 0, 0.45);
    }

    /* Menu du PDF (télécharger, nouvel onglet, plein écran, pages) : sur
       desktop il apparaît au survol de la souris, donc jamais au doigt.
       Affiché en haut avec le sommaire ; groupe zoom retiré (pincer suffit)
       pour tenir dans la largeur. */
    body.m-toc-open .doc-page-pdf .doc-pdf-toolbar {
        position: fixed !important;
        top: calc(var(--nav-height, 52px) + 52px) !important;
        left: 50% !important; transform: translateX(-50%) !important;
        opacity: 1 !important; pointer-events: auto !important;
        z-index: 501 !important; max-width: calc(100vw - 16px);
        grid-template-columns: auto var(--dp-pdf-sep-w, 31px) auto !important;
    }
    body.m-toc-open .doc-page-pdf .doc-pdf-toolbar,
    body.m-toc-open .doc-page-pdf .doc-pdf-toolbar * { opacity: 1 !important; transition: none !important; }
    body.m-toc-open .doc-page-pdf .doc-pdf-toolbar::after,
    body.m-toc-open .doc-page-pdf .doc-pdf-toolbar-group-zoom { display: none !important; }

    /* Fil d'Ariane mode élève : limité à ~13px par un calcul pensé pour
       desktop → toute la place à gauche des boutons Cours/TD/Résumé */
    .dp-context-bar .dp-breadcrumb { left: 12px !important; max-width: calc(100vw - 170px) !important; }
}