/* ══ ACADÉMIE STREAMIKU (2026-10-12, lot 1), préfixe aca- ═══════════════════════════════════════════════════════════════════════
   Shared/AcademieFenetre.razor (la fenêtre : parcours, leçon), Shared/AcademieCarte.razor (la carte du hub), js/academie.js.
   • Grammaire de l'app : surfaces --surf-*, textes --tx1 / --tx2 / --mut1, marque --brand, filets --o8 / --o12 ; thème clair par
     html[data-theme="light"]. Les VRAIES vues (aex-, hubsynth) gardent leurs propres styles : on ne fait que les cadrer.
   • Rang 10093 / 10094 : au-dessus du pilotage, du Reporting et de Mes analyses ; sous le glossaire (10095), qu'une leçon ouvre.
   • Mat et Papier : surfaces et filets du style. Compact : resserrée. Téléphone (≤ 640 px) : plein écran, une colonne, cibles de
     44 px, jamais de hauteur en vh seule (iOS).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.aca-voile { position: fixed; inset: 0; z-index: 10093; background: var(--bd72, rgba(3,12,18,.62)); }
html[data-theme="light"] .aca-voile { background: rgba(15, 30, 45, .38); }
.aca {
    position: fixed; z-index: 10094; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(1240px, calc(100vw - 32px)); height: min(860px, calc(100vh - 32px)); height: min(860px, calc(100dvh - 32px));
    display: flex; flex-direction: column; overflow: hidden; outline: none; border-radius: 16px;
    background: var(--surf-2, #102733); color: var(--tx1, #eafdff); font-family: var(--font-family);
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 24%, transparent);
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
    animation: aca-entree .16s ease-out;
}
html[data-theme="light"] .aca { background: #fff; color: #10212b; box-shadow: 0 24px 70px rgba(30,41,59,.24); }
@keyframes aca-entree { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
html[data-motion="reduites"] .aca { animation: none; }
@media (prefers-reduced-motion: reduce) { .aca { animation: none; } }

/* ── En-tête ── */
.aca-tete { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--o8, rgba(255,255,255,.08)); }
html[data-theme="light"] .aca-tete { border-bottom-color: rgba(15, 38, 56, .1); }
.aca-tete-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
               background: color-mix(in srgb, var(--brand, #00B1CF) 16%, transparent); color: var(--brand-strong, var(--brand, #00B1CF)); }
.aca-tete-ic svg { width: 18px; height: 18px; }
.aca-tete-tx { flex: 1 1 auto; min-width: 0; }
.aca-titre { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; }
.aca-sous { margin: 2px 0 0; font-size: 12.5px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .aca-sous { color: #4b5d68; }
.aca-x { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
         border: 1px solid transparent; background: transparent; color: var(--mut1, #8aa0ad); cursor: pointer; }
.aca-x:hover { background: var(--o6, rgba(255,255,255,.06)); color: var(--tx1, #eafdff); }
html[data-theme="light"] .aca-x:hover { background: rgba(15, 38, 56, .06); color: #10212b; }
.aca-x svg { width: 16px; height: 16px; }

/* ── Communs ── */
.aca :focus-visible { outline: 2px solid var(--anneau-focus, var(--brand, #00B1CF)); outline-offset: 2px; }
.aca-h { margin: 0 0 4px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; outline: none; text-wrap: balance; }
.aca-h b { color: var(--brand-strong, var(--brand, #00B1CF)); font-variant-numeric: tabular-nums; }
html[data-theme="light"] .aca-h b { color: var(--brand-strong, #006f85); }   /* 13/10 : la marque lisible de la palette, plus un bleu canard fixe */
.aca-lead { margin: 4px 0 14px; max-width: 78ch; font-size: 13.5px; line-height: 1.55; color: var(--tx2, #c2cdd6); }
html[data-theme="light"] .aca-lead { color: #24343e; }
.aca-lead b { color: var(--tx1, #eafdff); font-variant-numeric: tabular-nums; }
html[data-theme="light"] .aca-lead b { color: #10212b; }
.aca-eyebrow { display: block; margin: 0 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .aca-eyebrow { color: #4b5d68; }
.aca-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 10px;
           border: 1px solid transparent; background: var(--brand, #00B1CF); color: #032530; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.aca-btn:hover { filter: brightness(1.06); }
.aca-btn:disabled { opacity: .45; cursor: default; filter: none; }
.aca-btn.ghost { background: transparent; color: var(--tx1, #eafdff); border-color: var(--o20, rgba(255,255,255,.2)); }
.aca-btn.ghost:hover { background: var(--o6, rgba(255,255,255,.06)); }
html[data-theme="light"] .aca-btn.ghost { color: #10212b; border-color: rgba(15, 38, 56, .24); }
html[data-theme="light"] .aca-btn.ghost:hover { background: rgba(15, 38, 56, .05); }
.aca-btn.sm { min-height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.aca-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 2px 10px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
            color: var(--tx2, #c2cdd6); background: transparent; border: 1px solid var(--o12, rgba(255,255,255,.12)); }
.aca-chip:hover { border-color: color-mix(in srgb, var(--brand, #00B1CF) 50%, transparent); }
.aca-chip[aria-pressed="true"] { color: var(--tx1, #eafdff); background: color-mix(in srgb, var(--brand, #00B1CF) 16%, transparent); border-color: color-mix(in srgb, var(--brand, #00B1CF) 55%, transparent); }
html[data-theme="light"] .aca-chip { color: #24343e; border-color: rgba(15, 38, 56, .18); }
html[data-theme="light"] .aca-chip[aria-pressed="true"] { color: #10212b; background: #e9f7fa; border-color: #3aa9bf; }
.aca-fr { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px;
          background: color-mix(in srgb, var(--pal-6, #7c6cf0) 12%, transparent); color: var(--tx2, #c2cdd6); }
html[data-theme="light"] .aca-fr { color: #24343e; }

/* ── Parcours ── */
.aca-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 18px; }
.aca-p-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin-bottom: 12px; }
.aca-p-tx { flex: 1 1 420px; min-width: 0; }
.aca-src { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .aca-src { color: #4b5d68; }
.aca-stats { display: flex; flex-wrap: wrap; gap: 20px; }
.aca-stat b { display: block; font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
.aca-stat span { font-size: 12px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .aca-stat span { color: #4b5d68; }
.aca-niveaux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.aca-niv { display: grid; align-content: start; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--o8, rgba(255,255,255,.08));
           background: var(--surf-1, rgba(255,255,255,.03)); min-width: 0; }
html[data-theme="light"] .aca-niv { border-color: rgba(15, 38, 56, .12); background: #f6f9fa; }
.aca-niv-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.aca-niv-h h4 { margin: 0; font-size: 14px; font-weight: 700; }
.aca-niv-h small, .aca-sc { font-size: 11.5px; font-weight: 600; color: var(--mut1, #8aa0ad); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-theme="light"] :is(.aca-niv-h small, .aca-sc) { color: #4b5d68; }
.aca-niv-obj { margin: 0; font-size: 12.5px; color: var(--tx2, #c2cdd6); }
html[data-theme="light"] .aca-niv-obj { color: #24343e; }
.aca-barre { height: 5px; border-radius: 3px; background: var(--o8, rgba(255,255,255,.08)); overflow: hidden; }
html[data-theme="light"] .aca-barre { background: rgba(15, 38, 56, .1); }
.aca-barre i { display: block; height: 100%; border-radius: 3px; background: var(--brand, #00B1CF); }
.aca-notions { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.aca-notion { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 8px; border-radius: 9px; text-align: left; cursor: pointer;
              font: inherit; font-size: 13px; color: inherit; border: 1px solid var(--o8, rgba(255,255,255,.08)); background: var(--surf-2, rgba(255,255,255,.04)); }
.aca-notion:hover { border-color: color-mix(in srgb, var(--brand, #00B1CF) 50%, transparent); }
html[data-theme="light"] .aca-notion { background: #fff; border-color: rgba(15, 38, 56, .12); }
.aca-notion.is-bientot { cursor: default; opacity: .62; border-style: dashed; background: transparent; }
.aca-notion.is-bientot:hover { border-color: var(--o8, rgba(255,255,255,.08)); }
.aca-nl { flex: 1 1 auto; min-width: 0; }
.aca-st { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.aca-st.fait { background: color-mix(in srgb, var(--st-green, #34d399) 18%, transparent); color: var(--st-green, #34d399); }
.aca-st.cours { box-shadow: inset 0 0 0 1.5px var(--brand, #00B1CF); background: color-mix(in srgb, var(--brand, #00B1CF) 14%, transparent); }
.aca-st.afaire { box-shadow: inset 0 0 0 1.5px var(--o20, rgba(255,255,255,.2)); }
html[data-theme="light"] .aca-st.fait { color: #047857; background: rgba(4, 120, 87, .1); }
html[data-theme="light"] .aca-st.afaire { box-shadow: inset 0 0 0 1.5px rgba(15, 38, 56, .25); }
.aca-exam { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 9px; border: 1px dashed var(--o20, rgba(255,255,255,.2)); font-size: 12px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .aca-exam { border-color: rgba(15, 38, 56, .22); color: #4b5d68; }
.aca-carnet { margin-top: 14px; border-top: 1px solid var(--o8, rgba(255,255,255,.08)); padding-top: 10px; }
html[data-theme="light"] .aca-carnet { border-top-color: rgba(15, 38, 56, .1); }
.aca-carnet-h { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 650; color: inherit; cursor: pointer; }
.aca-chev { font-size: 11px; transition: transform .15s; }
.aca-carnet-h[aria-expanded="false"] .aca-chev { transform: rotate(-90deg); }
.aca-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.aca-note { position: relative; padding: 8px 40px 8px 12px; border-radius: 10px; border: 1px solid var(--o8, rgba(255,255,255,.08)); background: var(--surf-1, rgba(255,255,255,.03)); }
html[data-theme="light"] .aca-note { border-color: rgba(15, 38, 56, .12); background: #f6f9fa; }
.aca-note small { display: block; font-size: 11.5px; color: var(--mut1, #8aa0ad); }
.aca-note p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.aca-note-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; border: 0; background: none; color: var(--mut1, #8aa0ad); cursor: pointer; }
.aca-note-x:hover { color: var(--st-red, #f87171); background: var(--o6, rgba(255,255,255,.06)); }
.aca-vide { margin: 8px 0 0; font-size: 13px; color: var(--mut1, #8aa0ad); }
.aca-p-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--o8, rgba(255,255,255,.08)); }
html[data-theme="light"] .aca-p-pied { border-top-color: rgba(15, 38, 56, .1); }
.aca-p-pied-tx { flex: 1 1 260px; font-size: 12.5px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .aca-p-pied-tx { color: #4b5d68; }
.aca-import { position: relative; }
.aca-import:focus-within { outline: 2px solid var(--anneau-focus, var(--brand, #00B1CF)); outline-offset: 2px; }
.aca-fichier { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.aca-msg { flex: 1 1 100%; margin: 0; font-size: 12.5px; color: var(--tx2, #c2cdd6); }
html[data-theme="light"] .aca-msg { color: #24343e; }

/* ── Leçon ── */
.aca-lecon { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 228px minmax(0, 1fr); }
.aca-nav { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border-right: 1px solid var(--o8, rgba(255,255,255,.08));
           background: color-mix(in srgb, var(--surf-1, #0b1f29) 60%, transparent); }
html[data-theme="light"] .aca-nav { border-right-color: rgba(15, 38, 56, .1); background: #f6f9fa; }
.aca-retour { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border-radius: 8px; border: 0; background: none;
              font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mut1, #8aa0ad); cursor: pointer; }
.aca-retour:hover { color: var(--tx1, #eafdff); background: var(--o6, rgba(255,255,255,.06)); }
html[data-theme="light"] .aca-retour:hover { color: #10212b; background: rgba(15, 38, 56, .06); }
.aca-fil { padding: 0 6px 6px; font-size: 12px; color: var(--mut1, #8aa0ad); }
.aca-fil b { display: block; margin-top: 2px; font-size: 15px; line-height: 1.3; color: var(--tx1, #eafdff); }
html[data-theme="light"] .aca-fil b { color: #10212b; }
.aca-fil small { display: block; margin-top: 2px; font-size: 11.5px; }
.aca-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.aca-etape { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 6px 8px; border-radius: 9px; border: 1px solid transparent; background: none;
             font: inherit; font-size: 13px; font-weight: 600; text-align: left; color: var(--tx2, #c2cdd6); cursor: pointer; }
html[data-theme="light"] .aca-etape { color: #24343e; }
.aca-etape:hover { background: var(--o6, rgba(255,255,255,.06)); }
.aca-etape[aria-current="step"] { color: var(--tx1, #eafdff); background: color-mix(in srgb, var(--brand, #00B1CF) 14%, transparent); border-color: color-mix(in srgb, var(--brand, #00B1CF) 35%, transparent); }
html[data-theme="light"] .aca-etape[aria-current="step"] { color: #10212b; background: #e9f7fa; border-color: #9fd6e2; }
.aca-k { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; box-shadow: inset 0 0 0 1.5px var(--o20, rgba(255,255,255,.2)); }
.aca-etape.vu .aca-k { box-shadow: none; background: color-mix(in srgb, var(--st-green, #34d399) 18%, transparent); color: var(--st-green, #34d399); }
html[data-theme="light"] .aca-etape.vu .aca-k { color: #047857; background: rgba(4, 120, 87, .1); }
.aca-l-src { margin-top: auto; padding: 10px 6px 2px; border-top: 1px solid var(--o8, rgba(255,255,255,.08)); display: grid; gap: 6px; font-size: 12px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .aca-l-src { border-top-color: rgba(15, 38, 56, .1); color: #4b5d68; }
.aca-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 9px; border: 1px solid var(--o12, rgba(255,255,255,.12)); }
.aca-seg button { min-height: 28px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12px; font-weight: 600; color: inherit; cursor: pointer; }
.aca-seg button[aria-pressed="true"] { background: var(--brand, #00B1CF); color: #032530; }
.aca-main { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 18px; }
.aca-pied { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--o8, rgba(255,255,255,.08)); }
html[data-theme="light"] .aca-pied { border-top-color: rgba(15, 38, 56, .1); }

/* Comprendre */
.aca-formule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 16px; padding: 12px 14px; border-radius: 12px;
               border: 1px solid var(--o8, rgba(255,255,255,.08)); background: var(--surf-1, rgba(255,255,255,.03)); font-size: 13px; font-weight: 600; }
html[data-theme="light"] .aca-formule { border-color: rgba(15, 38, 56, .12); background: #f6f9fa; }
.aca-terme { padding: 3px 9px; border-radius: 7px; border: 1px solid var(--o12, rgba(255,255,255,.12)); background: var(--surf-2, rgba(255,255,255,.04)); }
html[data-theme="light"] .aca-terme { background: #fff; border-color: rgba(15, 38, 56, .14); }
.aca-terme.is-res { border-color: color-mix(in srgb, var(--brand, #00B1CF) 55%, transparent); background: color-mix(in srgb, var(--brand, #00B1CF) 14%, transparent); }
.aca-op { color: var(--mut1, #8aa0ad); font-weight: 500; }
.aca-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.aca-encadre { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--o8, rgba(255,255,255,.08)); }
html[data-theme="light"] .aca-encadre { border-color: rgba(15, 38, 56, .12); }
.aca-encadre h4 { margin: 0 0 6px; font-size: 13.5px; }
.aca-encadre ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13px; line-height: 1.5; color: var(--tx2, #c2cdd6); }
html[data-theme="light"] .aca-encadre ul { color: #24343e; }
.aca-gl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; }
.aca-gl .aca-eyebrow { margin: 0 4px 0 0; }

/* Dans vos chiffres : la légende numérotée, la vraie vue, le constat */
.aca-legende { list-style: none; counter-reset: aca; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.aca-legende li { counter-increment: aca; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline;
                  padding: 7px 10px 7px 34px; border-radius: 10px; border: 1px solid var(--o8, rgba(255,255,255,.08)); background: var(--surf-1, rgba(255,255,255,.03)); font-size: 12.5px; }
html[data-theme="light"] .aca-legende li { border-color: rgba(15, 38, 56, .12); background: #f6f9fa; }
.aca-legende li::before { content: counter(aca); position: absolute; left: 9px; top: 8px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
                          font-size: 10.5px; font-weight: 700; background: var(--pal-6, #7c6cf0); color: #fff; }
.aca-legende li.is-total { border-color: color-mix(in srgb, var(--brand, #00B1CF) 45%, transparent); }
.aca-legende-l { font-weight: 600; min-width: 0; }
.aca-legende-l small { display: block; font-weight: 500; font-size: 11px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .aca-legende-l small { color: #4b5d68; }
.aca-legende-v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aca-legende-d { grid-column: 1 / -1; font-size: 11.5px; color: var(--mut1, #8aa0ad); font-variant-numeric: tabular-nums; }
html[data-theme="light"] .aca-legende-d { color: #4b5d68; }
.aca-exos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.aca-exos .aca-eyebrow { margin: 0 4px 0 0; }
.aca-vue { position: relative; min-width: 0; padding: 12px; border-radius: 14px; border: 1px solid var(--o8, rgba(255,255,255,.08)); background: var(--surf-1, rgba(255,255,255,.02)); }
html[data-theme="light"] .aca-vue { border-color: rgba(15, 38, 56, .12); background: #fbfcfd; }
.aca-vue-cas { max-height: 460px; overflow-y: auto; overscroll-behavior: contain; }
.aca-vue-t { margin-top: 16px; }
/* Les pastilles posées sur la vraie vue (js/academie.js) : mêmes numéros que la légende. */
.aca-vue [data-aca-n] { position: relative; }
.aca-vue [data-aca-n]::before { content: attr(data-aca-n); position: absolute; z-index: 2; top: -7px; left: -7px; width: 18px; height: 18px; border-radius: 50%;
                                display: grid; place-items: center; font: 700 10.5px/1 var(--font-family, system-ui); background: var(--pal-6, #7c6cf0); color: #fff;
                                box-shadow: 0 0 0 2px var(--surf-2, #102733); pointer-events: none; }
html[data-theme="light"] .aca-vue [data-aca-n]::before { box-shadow: 0 0 0 2px #fff; }
/* Dans un tableau (bloc de synthèse), la pastille précède le libellé au lieu de le recouvrir. */
.aca-vue td[data-aca-n]::before { position: static; display: inline-grid; margin-right: 6px; vertical-align: -4px; box-shadow: none; }
/* Le titre reçoit le focus à chaque étape (lecteur d'écran) : pas d'anneau pour un focus que personne n'a demandé au clavier. */
.aca .aca-h:focus, .aca .aca-h:focus-visible { outline: none; }
.aca-allume { outline: 2px solid var(--brand, #00B1CF); outline-offset: 3px; border-radius: 12px; transition: outline-color .6s; }
.aca-constat { display: flex; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--st-amber, #fbbf24) 12%, transparent); }
.aca-constat svg { flex: 0 0 auto; margin-top: 2px; color: var(--st-amber, #fbbf24); }
html[data-theme="light"] .aca-constat svg { color: #a15c07; }
.aca-constat p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.aca-constat b { font-variant-numeric: tabular-nums; }
.aca-invit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
             border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 40%, transparent); background: color-mix(in srgb, var(--brand, #00B1CF) 8%, transparent); }
.aca-invit p { flex: 1 1 320px; margin: 0; font-size: 13px; line-height: 1.5; }
.aca-invit-l { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 12.5px; color: var(--st-amber, #fbbf24); }
html[data-theme="light"] .aca-invit-l { color: #8a5a00; }
/* Cas d'école : l'historique en barres, dans une carte des vues (aex-card). */
.aca-histo { display: grid; gap: 8px; }
.aca-barres { display: flex; align-items: flex-end; gap: 18px; height: 150px; padding: 18px 8px 0; }
.aca-b { flex: 0 1 90px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.aca-b i { display: block; width: 44px; min-height: 2px; border-radius: 5px 5px 0 0; background: var(--brand, #00B1CF); }
.aca-b i.is-neg { background: var(--st-red, #f87171); }
.aca-b-v { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.aca-b-l { font-size: 11.5px; color: var(--mut1, #8aa0ad); }

/* Cas pratique */
.aca-saisie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.aca-saisie-l { font-size: 14px; font-weight: 650; margin-right: 4px; }
.aca-champ { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 0; border-radius: 10px; border: 1px solid var(--o20, rgba(255,255,255,.2)); background: var(--surf-1, rgba(255,255,255,.03)); }
html[data-theme="light"] .aca-champ { border-color: rgba(15, 38, 56, .24); background: #fff; }
.aca-champ:focus-within { border-color: var(--brand, #00B1CF); }
.aca-champ input { width: 120px; height: 38px; padding: 0 0 0 11px; border: 0; outline: none; background: transparent; color: inherit; font: inherit; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.aca .aca-champ input:focus-visible { outline: none; }
.aca-u { font-size: 13px; color: var(--mut1, #8aa0ad); }
.aca-verdict { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.55; }
.aca-verdict.ok { background: color-mix(in srgb, var(--st-green, #34d399) 12%, transparent); box-shadow: inset 3px 0 0 var(--st-green, #34d399); }
.aca-verdict.ko { background: color-mix(in srgb, var(--st-red, #f87171) 12%, transparent); box-shadow: inset 3px 0 0 var(--st-red, #f87171); }
.aca-verdict.is-indice { background: color-mix(in srgb, var(--pal-6, #7c6cf0) 12%, transparent); box-shadow: inset 3px 0 0 var(--pal-6, #7c6cf0); }
.aca-verdict .aca-btn { margin-left: 8px; }

/* QCM */
.aca-qcm { display: grid; gap: 12px; max-width: 760px; }
.aca-q { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--o8, rgba(255,255,255,.08)); min-width: 0; }
html[data-theme="light"] .aca-q { border-color: rgba(15, 38, 56, .12); }
.aca-q legend { padding: 0 4px; font-size: 13.5px; font-weight: 650; line-height: 1.45; }
.aca-rep { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; margin-top: 6px; padding: 7px 10px; border-radius: 9px; text-align: left; cursor: pointer;
           font: inherit; font-size: 13.5px; color: inherit; border: 1px solid var(--o12, rgba(255,255,255,.12)); background: var(--surf-1, rgba(255,255,255,.03)); }
html[data-theme="light"] .aca-rep { border-color: rgba(15, 38, 56, .16); background: #f6f9fa; }
.aca-rep:not(:disabled):hover { border-color: color-mix(in srgb, var(--brand, #00B1CF) 55%, transparent); }
.aca-rep:disabled { cursor: default; opacity: 1; }
.aca-rep.juste { border-color: var(--st-green, #34d399); background: color-mix(in srgb, var(--st-green, #34d399) 12%, transparent); }
.aca-rep.faux { border-color: var(--st-red, #f87171); background: color-mix(in srgb, var(--st-red, #f87171) 12%, transparent); }
.aca-lt { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; font-size: 11px; font-weight: 700; border: 1px solid var(--o12, rgba(255,255,255,.12)); }
.aca-expl { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--tx2, #c2cdd6); }
html[data-theme="light"] .aca-expl { color: #24343e; }
.aca-score { margin-left: 6px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--mut1, #8aa0ad); }

/* Notes et portes */
.aca-texte { width: 100%; min-height: 120px; resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--o20, rgba(255,255,255,.2));
             background: var(--surf-1, rgba(255,255,255,.03)); color: inherit; font: inherit; font-size: 14px; line-height: 1.5; }
html[data-theme="light"] .aca-texte { border-color: rgba(15, 38, 56, .24); background: #fff; }
.aca-ligne { display: flex; gap: 8px; margin: 8px 0 4px; }
.aca-portes { display: grid; gap: 10px; max-width: 780px; }
.aca-porte { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--o8, rgba(255,255,255,.08)); background: var(--surf-1, rgba(255,255,255,.03)); }
html[data-theme="light"] .aca-porte { border-color: rgba(15, 38, 56, .12); background: #f6f9fa; }
.aca-porte-tx { flex: 1 1 280px; min-width: 0; }
.aca-porte-tx b { display: block; font-size: 13.5px; }
.aca-porte-tx span { font-size: 12.5px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .aca-porte-tx span { color: #4b5d68; }
.aca-porte-off { font-size: 12px; color: var(--mut1, #8aa0ad); }

/* ── La carte du hub ── */
/* 19/10 (Arthur : harmoniser avec le reste du hub) : la peau des cartes du hub (.intent-card) : verre --o4, flou, filet --o8, coins de
   18 px ; Mat et Papier par les listes de .intent-card (style-mat.css, style-papier.css), ombre douce du thème clair dans analyses.css. */
.aca-carte { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 14px; padding: 16px 18px; border-radius: 18px;
             border: 1px solid var(--o8); background: var(--o4); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.hubp-perso > .aca-carte { flex: 1 1 100%; min-width: 0; margin: 0; }
.aca-carte-tx { flex: 1 1 340px; min-width: 0; }
.aca-carte-t { margin: 2px 0 4px; font-size: 17px; font-weight: 700; }
.aca-carte-p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tx2, #c2cdd6); }
html[data-theme="light"] .aca-carte-p { color: #24343e; }
.aca-carte-suite { display: flex; align-items: center; gap: 14px; flex: 0 1 auto; flex-wrap: wrap; }
/*  19/10 : l'anneau est évidé par un masque (sur la carte en verre, un disque plein au centre se voyait). */
.aca-anneau { --p: 0; position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.aca-anneau::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
                      background: conic-gradient(var(--brand, #00B1CF) calc(var(--p) * 1%), var(--o12, rgba(255,255,255,.12)) 0);
                      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
                      mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px)); }
html[data-theme="light"] .aca-anneau::before { background: conic-gradient(var(--brand, #00B1CF) calc(var(--p) * 1%), rgba(15, 38, 56, .12) 0); }
.aca-anneau span { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.aca-carte-next { min-width: 160px; max-width: 260px; font-size: 13px; }
.aca-carte-next b { display: block; }

/* ── Le lien « Comprendre cet indicateur » des vues (BfrView, PointMortView, chiffres par exercice) ── */
.aca-lien { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; background: none;
            font: inherit; font-size: 12px; font-weight: 600; color: var(--brand-strong, var(--brand, #00B1CF)); cursor: pointer; white-space: nowrap; }
.aca-lien:hover { border-color: color-mix(in srgb, var(--brand, #00B1CF) 40%, transparent); background: color-mix(in srgb, var(--brand, #00B1CF) 8%, transparent); }
html[data-theme="light"] .aca-lien { color: var(--brand-strong, #006f85); }

/* ── Mat et Papier ── */
html[data-style="mat"] .aca { background: var(--mt-carte) !important; border-color: var(--mt-trait) !important; box-shadow: 0 16px 44px rgba(0, 0, 0, .34) !important; }
html[data-style="mat"][data-theme="light"] .aca { box-shadow: 0 16px 44px rgba(15, 38, 56, .16) !important; }
html[data-style="mat"] :is(.aca-tete, .aca-nav, .aca-l-src, .aca-pied, .aca-carnet, .aca-p-pied, .aca-niv, .aca-notion, .aca-legende li, .aca-vue, .aca-q, .aca-porte, .aca-encadre, .aca-formule, .aca-note, .aca-carte) { border-color: var(--mt-trait) !important; }
html[data-style="mat"] :is(.aca-nav, .aca-niv, .aca-legende li, .aca-porte, .aca-formule, .aca-note) { background: var(--mt-carte-2) !important; }
html[data-papier] .aca { box-shadow: var(--pp-ombre-fen) !important; border-radius: 6px; }
html[data-papier] :is(.aca-titre, .aca-h, .aca-niv-h h4, .aca-fil b, .aca-carte-t, .aca-encadre h4) { font-family: var(--pp-serif); }
html[data-papier] :is(.aca-niv, .aca-notion, .aca-legende li, .aca-vue, .aca-q, .aca-porte, .aca-encadre, .aca-formule, .aca-terme, .aca-btn, .aca-rep, .aca-note, .aca-carte, .aca-tete-ic, .aca-champ, .aca-texte) { border-radius: 4px !important; }
html[data-papier] .aca-tete { border-bottom: 1px solid var(--pp-trait-fort) !important; }

/* ── Compact ── */
html[data-density="compact"] .aca-corps { padding: 12px 14px 14px; }
html[data-density="compact"] .aca-main { padding: 12px 16px 14px; }
html[data-density="compact"] .aca-niveaux { gap: 8px; }
html[data-density="compact"] .aca-niv { padding: 10px; gap: 6px; }
html[data-density="compact"] .aca-notion, html[data-density="compact"] .aca-etape { min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
html[data-density="compact"] .aca-h { font-size: 17px; }
html[data-density="compact"] .aca-lead { margin-bottom: 10px; font-size: 13px; }
html[data-density="compact"] .aca-carte { padding: 12px 14px; }

/* ── Largeurs ── */
@media (max-width: 1100px) { .aca-niveaux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
    .aca-lecon { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .aca-nav { border-right: 0; border-bottom: 1px solid var(--o8, rgba(255,255,255,.08)); flex-direction: row; flex-wrap: wrap; align-items: center; max-height: none; overflow: visible; }
    .aca-fil { flex: 1 1 200px; padding-bottom: 0; }
    .aca-etapes { flex: 1 1 100%; display: flex; overflow-x: auto; gap: 4px; scrollbar-width: none; }
    .aca-etapes li { flex: 0 0 auto; }
    .aca-l-src { flex: 1 1 100%; margin-top: 0; padding-top: 6px; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
    .aca-l-src .aca-eyebrow { display: none; }
    .aca-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .aca { left: 0; top: 0; transform: none; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; animation: none; }
    .aca-tete { padding: 10px 6px 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
    .aca-x { width: 44px; height: 44px; }
    .aca-niveaux { grid-template-columns: minmax(0, 1fr); }
    .aca-corps, .aca-main { padding: 12px 16px max(16px, env(safe-area-inset-bottom)); }
    .aca-nav { padding: 8px 12px; }
    .aca-etape, .aca-notion, .aca-btn, .aca-chip, .aca-rep, .aca-retour { min-height: 44px; }
    .aca-l-src { grid-template-columns: minmax(0, 1fr); }
    .aca-legende { grid-template-columns: minmax(0, 1fr); }
    .aca-vue { padding: 8px; margin-inline: -4px; }
    .aca-vue-cas { max-height: 380px; }
    .aca-pied .aca-btn { flex: 1 1 0; }
    .aca-carte-suite { width: 100%; }
    .aca-carte-suite .aca-btn { margin-left: auto; }
}
/* ── Lot 2 (2026-10-12) : les vues du niveau 1 ──
   La carte « Activité mensuelle » du pilotage (Shared/AcademieActivite) : ses règles vivent dans le <style> de PilotDataViz, qui
   n'est pas rendu ici ; reprises à l'identique, sous .aca-vue. L'arbre du pilotage (StyledFinTree en lecture) garde les siennes. */
.aca-vue .pdv-card { position: relative; background: var(--surf-2); border: 1px solid var(--o8); border-radius: 8px; overflow: hidden; }
.aca-vue .pdv-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); opacity: .55; }
.aca-vue .pdvb-bar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 9px 12px; border-bottom: 1px solid var(--o7); box-sizing: border-box; background: var(--surf-1); }
.aca-vue .pdvb-title { font-size: 13px; font-weight: 700; color: var(--brand-strong); }
.aca-vue .pdvb-bar-sub { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--mut1); }
.aca-vue .pdvb-chart { padding: 0 2px; height: 300px; box-sizing: border-box; }
.aca-vue .pdvb-chart-tall { height: 320px; }
.aca-vue .pdv-apex { width: 100%; height: 100%; }
html[data-density="compact"] .aca-vue .pdvb-chart-tall { height: 244px; }
.aca-arbre { min-width: 0; max-height: 540px; overflow: auto; overscroll-behavior: contain; }
/* Dans l'arbre, la pastille entre dans l'enveloppe flexible du libellé, à côté du chevron. */
.aca-vue .ftt-lblwrap[data-aca-n]::before { position: static; flex: none; margin-right: 6px; box-shadow: none; }
/* Cas d'école : douze mois au lieu de deux exercices. */
.aca-barres.is-dense { gap: 6px; }
.aca-barres.is-dense .aca-b { flex: 1 1 0; min-width: 0; }
.aca-barres.is-dense .aca-b i { width: 100%; max-width: 40px; }
.aca-barres.is-dense .aca-b-v { font-size: 10.5px; }
.aca-barres.is-dense .aca-b-l { font-size: 10px; white-space: nowrap; }
@media (max-width: 640px) { .aca-barres.is-dense .aca-b-v { writing-mode: vertical-rl; transform: rotate(180deg); } }

.recap-modal-head .aca-lien { margin-left: auto; margin-right: 6px; }
.aex-head .aca-lien { align-self: center; }

/* ══ Lot 2 (2026-10-12) : fond en dégradé et confort des fenêtres ══════════════════════════════════════════════════════════════
   • Fond : la 1re et la 6e couleur de la palette active en halos sur la surface pleine, comme la palette de commandes (.cpal) et la
     fenêtre de l'IS (.finmod-is) : la 1re en haut à gauche (en-tête, rail), la 6e en bas à droite. Mat garde son aplat (règle
     !important plus haut), Papier son papier.
   • Surfaces internes translucides : le rail, les cartes et les encadrés laissent passer le dégradé sans le découper en bandes ;
     la vraie vue garde un fond presque plein, ses propres couleurs y restent lisibles.
   • Pied collant : « Étape suivante » toujours atteignable, sans défiler. Le scrolleur (.aca-main) n'a plus de padding bas :
     un collant s'arrête à la boîte de padding (mémoire sticky-padding-scrolleur) ; le pied porte son air et déborde des marges.
   • En-tête resserré pendant une leçon, progression de la leçon dans le rail, rail compact au téléphone. ═══════════════════════ */
.aca {
    background: radial-gradient(120% 75% at 0% 0%, color-mix(in srgb, var(--pal-1, var(--brand, #00B1CF)) 22%, transparent), transparent 62%),
                radial-gradient(120% 80% at 100% 100%, color-mix(in srgb, var(--pal-6, var(--brand2, var(--brand, #00B1CF))) 26%, transparent), transparent 66%),
                var(--surf-2, #102733);
}
html[data-theme="light"] .aca {
    background: radial-gradient(120% 75% at 0% 0%, color-mix(in srgb, var(--pal-1, var(--brand, #00B1CF)) 16%, transparent), transparent 62%),
                radial-gradient(120% 80% at 100% 100%, color-mix(in srgb, var(--pal-6, var(--brand2, var(--brand, #00B1CF))) 20%, transparent), transparent 66%),
                #fff;
}
html[data-papier] .aca { background: var(--pp-carte) !important; }

/* Surfaces internes : translucides sur le dégradé. */
.aca-nav { background: color-mix(in srgb, var(--surf-1, #0b1f29) 34%, transparent); }
html[data-theme="light"] .aca-nav { background: rgba(255, 255, 255, .5); }
.aca :is(.aca-niv, .aca-legende li, .aca-formule, .aca-note, .aca-porte, .aca-rep) { background: color-mix(in srgb, var(--surf-1, #0b1f29) 52%, transparent); }
html[data-theme="light"] .aca :is(.aca-niv, .aca-legende li, .aca-formule, .aca-note, .aca-porte, .aca-rep) { background: rgba(255, 255, 255, .62); }
html[data-theme="light"] .aca :is(.aca-notion, .aca-terme) { background: rgba(255, 255, 255, .82); }
/* isolation : les rangs collants de la vraie vue (colonne figée de l'arbre…) restent sous le pied collant de la fenêtre. */
.aca-vue { background: color-mix(in srgb, var(--surf-2, #102733) 88%, transparent); isolation: isolate; }
html[data-theme="light"] .aca-vue { background: rgba(251, 252, 253, .94); }

/* En-tête resserré pendant une leçon : le titre de la leçon est déjà dans le rail. */
.aca.is-lecon .aca-tete { padding-top: 8px; padding-bottom: 8px; }
.aca.is-lecon .aca-sous { display: none; }
.aca.is-lecon .aca-tete-ic { width: 30px; height: 30px; }

/* Le numéro des étapes, en clair : son anneau (--o20) y disparaissait. */
html[data-theme="light"] .aca-etape:not(.vu) .aca-k { box-shadow: inset 0 0 0 1.5px rgba(15, 38, 56, .3); }

/* Progression de la leçon (rail). */
.aca-prog { display: block; height: 4px; margin-top: 8px; border-radius: 2px; overflow: hidden; background: var(--o12, rgba(255,255,255,.12)); }
html[data-theme="light"] .aca-prog { background: rgba(15, 38, 56, .12); }
.aca-prog i { display: block; height: 100%; border-radius: 2px; background: var(--st-green, #34d399); transition: width .3s ease; }
html[data-theme="light"] .aca-prog i { background: #059669; }
html[data-motion="reduites"] .aca-prog i { transition: none; }

/* Pied collant ; sur une étape courte, l'air (.aca-pied-air) le pousse en bas de la fenêtre au lieu de le laisser à mi-hauteur. */
.aca-main { padding-bottom: 0; display: flex; flex-direction: column; }
.aca-main > * { flex-shrink: 0; }
.aca-pied-air { flex: 1 0 22px; }
html[data-density="compact"] .aca-pied-air { flex-basis: 16px; }
.aca-pied {
    position: sticky; bottom: 0; z-index: 20; align-items: center;
    margin: 0 -20px; padding: 10px 20px; padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surf-2, #102733) 86%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html[data-theme="light"] .aca-pied { background: rgba(255, 255, 255, .86); }
html[data-style="mat"] .aca-pied { background: var(--mt-carte) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-papier] .aca-pied { background: var(--pp-carte) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.aca-pied-n { font-size: 12px; font-weight: 600; color: var(--mut1, #8aa0ad); font-variant-numeric: tabular-nums; }
html[data-theme="light"] .aca-pied-n { color: #4b5d68; }
/* Les pastilles de la vue sur une carte qui rogne ses bords (colonnes de « Chiffres par exercice ») ou sur un titre : dedans. */
.aca-vue :is(.pc-card, .pc-ring)[data-aca-n]::before { top: 6px; left: 6px; }
.aca-vue .pdvb-title[data-aca-n]::before { position: static; display: inline-grid; margin-right: 6px; vertical-align: -4px; box-shadow: none; }

html[data-density="compact"] .aca-main { padding-bottom: 0; }
html[data-density="compact"] .aca-pied { margin: 0 -16px; padding: 7px 16px; }
html[data-density="compact"] .aca.is-lecon .aca-tete { padding-top: 6px; padding-bottom: 6px; }

@media (max-width: 860px) {
    .aca-fil b { font-size: 14px; }
    .aca-prog { margin-top: 6px; }
}
/* Téléphone : rail compact (titre sur une ligne, sans durée), la source sur une seule rangée, le pied garde ses deux boutons à
   44 px et perd le compteur (la barre de progression le dit). */
@media (max-width: 640px) {
    .aca-sous { display: none; }
    .aca-tete { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
    .aca-nav { gap: 4px; padding: 6px 12px 8px; }
    .aca-fil { min-width: 0; font-size: 11px; }
    .aca-fil b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .aca-fil small { display: none; }
    .aca-l-src { grid-template-columns: minmax(0, 1fr) auto; padding-top: 4px; }
    .aca-l-src .aca-seg { order: 2; }
    .aca-l-src-lib { order: 1; align-self: center; font-size: 11.5px; }
    .aca-pied { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
    .aca-pied-n { display: none; }
}

/* ══ AUTO-ÉVALUATIONS ET DÉBLOCAGE (2026-10-12, lot 2), préfixe aca-eval ═════════════════════════════════════════════════════════
   Le pied de chaque niveau du parcours (auto-évaluation, verrou), la notion verrouillée, la vue de l'auto-évaluation (une question
   à la fois, score, notions à revoir). Reprend les primitives des leçons (aca-q, aca-rep, aca-expl, aca-pied, aca-chip).
   Mat, Papier, clair, sombre ; téléphone ≤ 640 px : cibles de 44 px. Pas de contenu flouté : un verrou se lit, il ne se devine pas.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.aca-eval-pied { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 30%, transparent);
                 background: color-mix(in srgb, var(--brand, #00B1CF) 6%, transparent); }
.aca-eval-pied.is-ok { border-color: color-mix(in srgb, var(--st-green, #34d399) 45%, transparent); background: color-mix(in srgb, var(--st-green, #34d399) 8%, transparent); }
.aca-eval-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--brand-strong, var(--brand, #00B1CF));
               background: color-mix(in srgb, var(--brand, #00B1CF) 14%, transparent); }
.aca-eval-pied.is-ok .aca-eval-ic { color: var(--st-green, #34d399); background: color-mix(in srgb, var(--st-green, #34d399) 16%, transparent); }
.aca-eval-pied-tx { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.aca-eval-pied-tx b { font-size: 12.5px; font-weight: 650; }
.aca-eval-pied-tx small { font-size: 11.5px; color: var(--mut1, #8aa0ad); font-variant-numeric: tabular-nums; }
.aca-eval-pied .aca-btn { flex: 0 0 auto; }
html[data-theme="light"] .aca-eval-pied { border-color: rgba(0, 111, 133, .3); background: #f1f9fb; }
html[data-theme="light"] .aca-eval-pied.is-ok { border-color: rgba(4, 120, 87, .35); background: #eefaf4; }
html[data-theme="light"] .aca-eval-ic { color: var(--brand-strong, #006f85); }
html[data-theme="light"] .aca-eval-pied.is-ok .aca-eval-ic { color: #047857; }
html[data-theme="light"] .aca-eval-pied-tx small { color: #4b5d68; }

/* Niveau verrouillé : les notions restent lisibles ; le verrou dit pourquoi et propose le geste. */
.aca-niv.is-verrou .aca-barre { opacity: .45; }
.aca-niv.is-cible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #00B1CF) 55%, transparent); }
.aca-niv-h h4 { display: flex; align-items: center; gap: 6px; outline: none; }
.aca-niv.is-verrou .aca-niv-h h4 svg { flex: 0 0 auto; color: var(--mut1, #8aa0ad); }
.aca-notion.is-verrou { cursor: default; background: transparent; }
.aca-notion.is-verrou:hover { border-color: var(--o8, rgba(255,255,255,.08)); }
.aca-notion.is-verrou .aca-sc { display: inline-flex; align-items: center; gap: 4px; }
html[data-theme="light"] .aca-notion.is-verrou { background: transparent; }
html[data-theme="light"] .aca-notion.is-verrou:hover { border-color: rgba(15, 38, 56, .12); }
.aca-eval-verrou { display: grid; gap: 8px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--o12, rgba(255,255,255,.12));
                   background: var(--o4, rgba(255,255,255,.04)); }
.aca-eval-verrou p { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tx2, #c2cdd6); }
.aca-eval-verrou p svg { flex: 0 0 auto; margin-top: 2px; }
.aca-eval-verrou .aca-btn { justify-self: start; }
html[data-theme="light"] .aca-eval-verrou { border-color: rgba(15, 38, 56, .16); background: #fff; }
html[data-theme="light"] .aca-eval-verrou p { color: #24343e; }

/* La vue de l'auto-évaluation */
.aca-eval { display: flex; flex-direction: column; gap: 10px; }
.aca-eval > * { width: 100%; max-width: 780px; margin-inline: auto; }
.aca-eval-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.aca-eval-tete .aca-fil { padding: 0; }
.aca-eval-prog { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mut1, #8aa0ad); font-variant-numeric: tabular-nums; }
.aca-eval-num { font-weight: 650; white-space: nowrap; }
.aca-eval-barre { flex: 1 1 auto; height: 6px; border-radius: 999px; overflow: hidden; background: var(--o8, rgba(255,255,255,.08)); }
.aca-eval-barre i { display: block; height: 100%; border-radius: inherit; background: var(--brand, #00B1CF); transition: width .2s ease; }
.aca-eval-prog .aca-score { margin-left: 0; white-space: nowrap; }
html[data-theme="light"] .aca-eval-prog { color: #4b5d68; }
html[data-theme="light"] .aca-eval-barre { background: rgba(15, 38, 56, .1); }
html[data-theme="light"] .aca-eval-barre i { background: #0090a8; }
html[data-motion="reduites"] .aca-eval-barre i { transition: none; }
@media (prefers-reduced-motion: reduce) { .aca-eval-barre i { transition: none; } }
.aca-eval-q { padding: 14px 16px; }
.aca-eval-q legend { padding: 0; float: left; width: 100%; margin-bottom: 4px; }
.aca-eval-q legend + * { clear: both; }
.aca-eval-q .aca-h { font-size: 17px; }
.aca-eval .aca-pied { margin-top: 6px; }

.aca-eval-res { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 16px; padding: 14px 16px; border-radius: 12px;
                background: color-mix(in srgb, var(--st-red, #f87171) 9%, transparent); box-shadow: inset 3px 0 0 var(--st-red, #f87171); }
.aca-eval-res.is-ok { background: color-mix(in srgb, var(--st-green, #34d399) 10%, transparent); box-shadow: inset 3px 0 0 var(--st-green, #34d399); }
.aca-eval-score { grid-row: span 2; display: grid; justify-items: center; min-width: 84px; }
.aca-eval-score b { font-size: 30px; font-weight: 750; line-height: 1.05; font-variant-numeric: tabular-nums; }
.aca-eval-score b small { font-size: 16px; font-weight: 650; color: var(--mut1, #8aa0ad); }
.aca-eval-score span { font-size: 12px; font-weight: 650; color: var(--mut1, #8aa0ad); font-variant-numeric: tabular-nums; }
.aca-eval-res p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.aca-eval-debloque { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; color: var(--st-green, #34d399); }
.aca-eval-best { font-size: 11.5px; color: var(--mut1, #8aa0ad); font-variant-numeric: tabular-nums; }
html[data-theme="light"] :is(.aca-eval-score b small, .aca-eval-score span, .aca-eval-best) { color: #4b5d68; }
html[data-theme="light"] .aca-eval-debloque { color: #047857; }
.aca-eval-h4 { margin-block: 8px 0; font-size: 13px; font-weight: 700; }
.aca-eval-revoir { list-style: none; margin-block: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.aca-chip.is-off { cursor: default; opacity: .7; border-style: dashed; }
.aca-chip.is-off:hover { border-color: var(--o12, rgba(255,255,255,.12)); }

html[data-style="mat"] :is(.aca-eval-verrou, .aca-eval-pied) { border-color: var(--mt-trait) !important; }
html[data-style="mat"] .aca-eval-verrou { background: var(--mt-carte) !important; }
html[data-papier] :is(.aca-eval-pied, .aca-eval-verrou, .aca-eval-res, .aca-eval-ic) { border-radius: 4px !important; }
html[data-papier] .aca-eval-score b { font-family: var(--pp-serif); }
html[data-density="compact"] :is(.aca-eval-pied, .aca-eval-verrou) { padding: 5px 7px; }

@media (max-width: 640px) {
    .aca-eval-pied { flex-wrap: wrap; }
    .aca-eval-pied .aca-btn { flex: 1 1 100%; }
    .aca-eval-verrou .aca-btn { justify-self: stretch; }
    .aca-eval-prog { flex-wrap: wrap; }
    .aca-eval-barre { flex: 1 1 100%; order: 3; }
    .aca-eval-q { padding: 12px; }
    .aca-eval-res { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    .aca-eval-score { grid-row: auto; justify-items: start; }
    .aca-eval-revoir .aca-chip { min-height: 44px; }
}

/* ══ NIVEAU 3 « Piloter » (2026-10-12, lot 3 ; Shared/AcademiePilotage.razor) : les vues du pilotage sur la copie du moteur.
   Préfixe aca-p-. La vue des ratios bancaires est une fenêtre (fixe, plein cadre) : posée dans la leçon, elle redevient un bloc.
   Le panneau de stress-test garde ses styles (analyses.css) ; la fenêtre de l'impôt de l'arbre se cale en haut du cadre. ══ */
.aca-p-bac { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 7px 10px; border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--brand, #00B1CF) 45%, transparent); color: var(--mut1); font-size: 12.5px; line-height: 1.4; }
.aca-p-bac svg { flex: none; color: var(--brand-strong, var(--brand, #00B1CF)); }
.aca-p-bac span { flex: 1 1 260px; min-width: 0; }
.aca-p-vide { margin: 0; padding: 14px; border-radius: 10px; background: var(--o3); color: var(--mut1); font-size: 13px; }
.aca-p-stress { display: grid; grid-template-columns: minmax(220px, 270px) minmax(0, 1fr); gap: 12px; align-items: start; }
.aca-p-stress .stresspanel { min-width: 0; }
.aca-p-col { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.aca-p-ab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--o8); background: var(--o3); }
.aca-p-ab .aex-kpi-l { flex: 1 1 100%; }
.aca-p-ab-k { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--mut1); }
.aca-p-ab-k b { font-size: 15px; color: var(--tx1, inherit); font-variant-numeric: tabular-nums; }
.aca-p-ab-d { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ok, #2fbf71); }
.aca-p-ab-d.is-neg { color: var(--ko, #e5484d); }
.aca-p-arbre { max-height: 480px; }
.aca-p-btr { min-width: 0; }
.aca-p-ratios .rb-back, .aca-p-ratios .rb-x { display: none; }
.aca-p-ratios .rb-modal { position: relative; inset: auto; z-index: auto; margin: 0; width: auto; height: auto; max-height: 560px;
    border-radius: 12px; box-shadow: none; }
.aca-p-ratios .rb-corps { overflow-y: auto; }
.aca-p-v-impot .finmod-is { left: 50% !important; top: 12px !important; transform: translateX(-50%); }
@media (max-width: 760px) {
    .aca-p-stress { grid-template-columns: minmax(0, 1fr); }
    .aca-p-ratios .rb-modal { width: auto; height: auto; max-height: 520px; border-radius: 10px; border: 1px solid var(--o8); }
    .aca-p-v-impot .finmod-is { width: calc(100% - 16px); }
}
.aca-p-stress + .aca-p-arbre { margin-top: 12px; }
.aca-vue .btr-t th[data-aca-n]::before { position: static; display: inline-grid; margin-right: 6px; vertical-align: -4px; box-shadow: none; }
/* ── Cas pratique en choix de réponses (2026-10-12, Arthur : « un QCM avec la bonne réponse et des fausses, le calcul sur la bonne ») ──
   Les valeurs, rangées par valeur croissante ; une fausse se grise après essai, la bonne fige tout. */
/*  12/10 (Arthur : « 4 lignes vides alors que tu pourrais avoir 4 colonnes ») : quatre cartes côte à côte, la lettre en haut, la
    valeur en grand ; deux colonnes au téléphone. Le fieldset perd son cadre : les cartes suffisent à grouper. */
.aca-q.aca-cas-choix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 760px; margin: 4px 0 10px; padding: 0; border: 0; }
.aca-cas-choix legend { padding: 0; margin: 0 0 8px; }
.aca-cas-choix .aca-rep { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; margin: 0; min-height: 68px; padding: 10px 12px; }
.aca-cas-choix .aca-lt { width: 20px; height: 20px; font-size: 10.5px; }
.aca-cas-v { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; line-height: 1.15; }
.aca-cas-actions { display: flex; gap: 8px; margin: 0 0 8px; }
.aca-cas-actions:empty { display: none; }
@media (max-width: 640px) { .aca-q.aca-cas-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Niveau 4 (2026-10-12) : les vraies vues de la valeur dans une leçon. « Ma valorisation » prend toute la largeur de la leçon (son plafond
   de 1 240 px vaut pour les livrables) ; la vue « Emprunter » garde la grammaire du volet Financement (synthèse en haut, réglages et
   onglets qui défilent chacun) dans une hauteur fixe, comme dans le volet plein écran. */
.aca-vue .aca-valo .vl3-root.vl3-v4 { max-width: none; }
/* La leçon est plus étroite que le volet plein écran : « Ma valorisation » y prend sa mise en page de 1 100 px (méthodes puis lecture,
   en une colonne), quelle que soit la largeur de la fenêtre ; sans cela, les interrupteurs des méthodes débordent sur la lecture. */
.aca-vue .aca-valo .vl3-main { grid-template-columns: minmax(0, 1fr); }
.aca-vue .aca-valo .vl3-panel { border-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.aca-vue .aca-valo .vl3-panel > [data-blk="lecture"], .aca-vue .aca-valo .vl3-panel > [data-blk="goal"] { grid-column: 1 / -1; }
@media (max-width: 640px) { .aca-vue .aca-valo .vl3-panel { grid-template-columns: minmax(0, 1fr); } }
.aca-vue .aca-fin { height: min(760px, 80vh); min-height: 520px; overflow: hidden; border-radius: 10px; }
.aca-vue .aca-fin > .lbo { padding: 10px 12px 0; }
.aca-vue-cas .aca-fin { height: 440px; min-height: 0; }
@media (max-width: 640px) {
    .aca-vue .aca-fin { height: auto; min-height: 0; overflow: visible; }
    .aca-vue .aca-fin > .lbo { height: auto; padding: 6px 4px 0; }
}

/* ── Auto-évaluation : cas chiffrés en variante (2026-10-12 soir). Mêmes primitives que le cas pratique de la leçon
   (aca-cas-choix, aca-rep, aca-verdict) ; l'erreur nommée s'affiche dans le faux choix retenu. ── */
.aca-eval .aca-lead { margin-bottom: 10px; }
.aca-eval > .aca-q.aca-cas-choix.aca-eval-cas { max-width: 780px; margin: 0 auto; }
.aca-eval-cas .aca-rep { min-height: 72px; }
.aca-eval-err { display: block; font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--tx2, #c2cdd6); }
html[data-theme="light"] .aca-eval-err { color: #24343e; }
@media (max-width: 640px) { .aca-eval-cas .aca-rep { min-height: 64px; } }
/* Juste / faux lisibles dans les deux thèmes : le fond translucide des réponses (.aca :is(…, .aca-rep)) et leur bordure du
   thème clair passaient devant .aca-rep.juste / .faux (leçons comprises). */
.aca .aca-rep.juste, html[data-theme="light"] .aca .aca-rep.juste { border-color: var(--st-green, #34d399); background: color-mix(in srgb, var(--st-green, #34d399) 14%, transparent); }
.aca .aca-rep.faux, html[data-theme="light"] .aca .aca-rep.faux { border-color: var(--st-red, #f87171); background: color-mix(in srgb, var(--st-red, #f87171) 12%, transparent); }
.aca-eval-cas .aca-rep { justify-content: flex-start; }

/* ══ RETOUCHE DU PARCOURS (2026-10-12) : prochaine étape, niveaux verrouillés, pied d'auto-évaluation, pied de fenêtre ═════════════
   • « Continuer » (.aca-suite) : la leçon à reprendre, sinon l'auto-évaluation à passer, sinon la fin du parcours.
   • Cartes de niveau à hauteur égale (rangée de la grille), pied d'auto-évaluation collé en bas (colonne flex, margin-top: auto).
   • Niveau verrouillé : notions atténuées sans badge (contraste ≥ 4,5:1, pas de flou), un seul pied, un lien vers la carte préalable.
   • Carnet et échanges dans un pied de fenêtre hors défilement (.aca-p-pied sous .aca-corps) : visibles sans défiler.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.aca-parcours .aca-p-tete { margin-bottom: 10px; }
.aca-parcours .aca-lead { margin-bottom: 0; }
.aca-parcours > .aca-src { margin: 0 0 12px; font-size: 11.5px; }

/* Prochaine étape */
.aca-suite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 6px; padding: 10px 12px; border-radius: 12px;
             border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 40%, transparent); background: color-mix(in srgb, var(--brand, #00B1CF) 10%, transparent); }
.aca-suite-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
                color: var(--brand-strong, var(--brand, #00B1CF)); background: color-mix(in srgb, var(--brand, #00B1CF) 18%, transparent); }
.aca-suite-tx { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; }
.aca-suite-t { margin: 0; font-size: 14px; line-height: 1.35; }
.aca-suite-t span { font-weight: 600; color: var(--tx2, #c2cdd6); }
.aca-suite-t b { font-weight: 700; }
.aca-suite-tx small { font-size: 12px; color: var(--mut1, #8aa0ad); font-variant-numeric: tabular-nums; }
.aca-suite .aca-btn { flex: 0 0 auto; }
.aca-suite.is-fin { border-color: color-mix(in srgb, var(--st-green, #34d399) 45%, transparent); background: color-mix(in srgb, var(--st-green, #34d399) 9%, transparent); }
.aca-suite.is-fin .aca-suite-ic { color: var(--st-green, #34d399); background: color-mix(in srgb, var(--st-green, #34d399) 16%, transparent); }
html[data-theme="light"] .aca-suite { border-color: rgba(0, 111, 133, .35); background: #eaf6f9; }
html[data-theme="light"] .aca-suite-ic { color: var(--brand-strong, #006f85); }
html[data-theme="light"] .aca-suite-t span { color: #24343e; }
html[data-theme="light"] .aca-suite-tx small { color: #4b5d68; }
html[data-theme="light"] .aca-suite.is-fin { border-color: rgba(4, 120, 87, .35); background: #eefaf4; }
html[data-theme="light"] .aca-suite.is-fin .aca-suite-ic { color: #047857; }

/* Cartes de niveau : colonne, pied en bas ; la grille les met déjà à la même hauteur. */
.aca-niv { display: flex; flex-direction: column; }
.aca-niv > :is(.aca-eval-pied, .aca-eval-verrou, .aca-exam) { margin-top: auto; }

/* Notions d'un niveau verrouillé : lisibles, atténuées, inertes. */
.aca .aca-niv.is-verrou .aca-notion { color: var(--mut1, #8aa0ad); background: transparent; border-style: dashed; cursor: default; }
html[data-theme="light"] .aca .aca-niv.is-verrou .aca-notion { color: #4b5d68; background: transparent; }
html[data-papier] .aca .aca-niv.is-verrou .aca-notion { color: var(--pp-encre-2, #b9b2a3); }
html[data-papier][data-theme="light"] .aca .aca-niv.is-verrou .aca-notion { color: #4b5d68; }
.aca-eval-verrou { gap: 6px; }
.aca-eval-verrou .aca-lien { justify-self: start; margin-left: 13px; white-space: normal; text-align: left; }

/* Pied d'auto-évaluation compact : titre + puce d'état sur une ligne, bouton à droite ou dessous. */
.aca-eval-pied { flex-wrap: wrap; }
.aca-eval-pied-tx { flex: 1 1 120px; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; }
.aca-eval-pied-tx b { white-space: nowrap; }
.aca-eval-pied .aca-btn { margin-left: auto; }
.aca-eval-puce { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
                 font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--tx2, #c2cdd6);
                 border: 1px solid var(--o12, rgba(255,255,255,.12)); }
.aca-eval-puce.is-ok { color: var(--st-green, #34d399); border-color: color-mix(in srgb, var(--st-green, #34d399) 45%, transparent); background: color-mix(in srgb, var(--st-green, #34d399) 12%, transparent); }
html[data-theme="light"] .aca-eval-puce { color: #24343e; border-color: rgba(15, 38, 56, .2); }
html[data-theme="light"] .aca-eval-puce.is-ok { color: #047857; border-color: rgba(4, 120, 87, .35); background: rgba(4, 120, 87, .08); }

/* Le carnet, déplié, au bas du défilement */
.aca-carnet-t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 650; outline: none; }

/* Pied de fenêtre : carnet, mention locale, échanges ; hors du défilement */
.aca-p-pied { flex: 0 0 auto; margin: 0; padding: 8px 18px; gap: 6px 10px;
              background: color-mix(in srgb, var(--surf-1, #0b1f29) 34%, transparent); }
html[data-theme="light"] .aca-p-pied { background: rgba(255, 255, 255, .55); }
html[data-style="mat"] .aca-p-pied { background: var(--mt-carte) !important; }
html[data-papier] .aca-p-pied { border-top-color: var(--pp-trait, rgba(15, 38, 56, .1)); }
.aca-p-pied .aca-carnet-h { flex: 0 0 auto; padding: 0 6px; border-radius: 8px; }
.aca-p-pied .aca-carnet-h:hover { background: var(--o6, rgba(255,255,255,.06)); }
html[data-theme="light"] .aca-p-pied .aca-carnet-h:hover { background: rgba(15, 38, 56, .06); }
.aca-p-pied .aca-p-pied-tx { flex: 1 1 200px; font-size: 12px; }

html[data-style="mat"] .aca-suite { border-color: var(--mt-trait) !important; background: var(--mt-carte-2) !important; }
html[data-papier] :is(.aca-suite, .aca-suite-ic, .aca-eval-puce) { border-radius: 4px !important; }
html[data-papier] .aca-suite-t b { font-family: var(--pp-serif); }
html[data-density="compact"] .aca-suite { padding: 7px 10px; }
html[data-density="compact"] .aca-suite-ic { width: 28px; height: 28px; }
html[data-density="compact"] .aca-p-pied { padding: 6px 14px; }

@media (max-width: 640px) {
    .aca-suite { padding: 10px; }
    .aca-suite .aca-btn { flex: 1 1 100%; }
    .aca-niv.is-verrou .aca-notion { min-height: 36px; }
    .aca-eval-verrou .aca-lien { min-height: 44px; margin-left: 0; }
    .aca-p-pied { padding: 6px 16px max(6px, env(safe-area-inset-bottom)); }
    .aca-p-pied .aca-carnet-h { min-height: 44px; }
    .aca-p-pied .aca-p-pied-tx { order: 9; flex-basis: 100%; font-size: 11.5px; }
}

/* ── Leçon « Marge brute » (2026-10-13, Arthur : « marge brute pas affichée ici ») : « Chiffres par exercice » montre la marge brute
   en carte sous le CA (PeriodKpiColumn MargeEnCarte) : la sous-grille partagée des colonnes passe de 5 à 6 rangées. */
.aca .periods-grid.aca-periods-mb { grid-template-rows: repeat(6, auto); }
.aca .periods-grid.aca-periods-mb .period-col { grid-row: span 6; }
.aca .pc-mb { --accent: var(--pal-2, var(--brand2, #00b1cf)); --accent-fade: color-mix(in srgb, var(--pal-2, var(--brand2, #00b1cf)) 12%, transparent); }

/* ══ Leçon : pied hors du défilement, cas pratique à un seul défilement (2026-10-13, Arthur : « moche ») ══════════════════════════
   Avant : le pied collant vivait DANS le scrolleur (.aca-main), dont la barre longeait « Étape suivante » ; au cas pratique, la vue
   (.aca-vue-cas, 460 px) défilait aussi : deux barres côte à côte, la vue coupée net par le pied. Désormais .aca-main = colonne
   (.aca-defile qui défile, puis le pied, fixe) ; au cas pratique (.is-cas), la vue prend la hauteur qui reste et défile SEULE : la
   question et les réponses restent à l'écran. L'arbre (.aca-arbre) et les vues pleines (.aca-fin) y prennent toute la hauteur de la
   vue et gardent leur propre défilement, sans défilement autour. Le pied de l'auto-évaluation (.aca-corps) n'est pas concerné. */
.aca-main { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.aca-defile { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
    padding: 16px 20px 0; scrollbar-width: thin; }
.aca-defile > * { flex-shrink: 0; }
.aca-main > .aca-pied { position: static; flex: none; margin: 0; padding: 10px 20px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
html[data-density="compact"] .aca-defile { padding: 12px 16px 0; }
html[data-density="compact"] .aca-main > .aca-pied { margin: 0; padding: 7px 16px; }
.aca-main.is-cas .aca-pied-air { flex: 0 0 16px; }
.aca-main.is-cas .aca-vue-cas { flex: 1 1 0; min-height: 220px; max-height: none; display: flex; flex-direction: column;
    scrollbar-width: thin; scrollbar-gutter: stable; }
.aca-main.is-cas .aca-vue-cas > * { flex-shrink: 0; }
.aca-main.is-cas .aca-vue-cas > :is(.aca-arbre, .aca-fin) { flex: 1 1 0; min-height: 0; max-height: none; height: auto; }
@media (max-width: 640px) {
    .aca-defile { padding: 12px 16px 0; }
    .aca-main > .aca-pied { margin: 0; padding-left: 16px; padding-right: 16px; }
    .aca-main.is-cas .aca-vue-cas { flex: none; max-height: 380px; }
    .aca-main.is-cas .aca-vue-cas > :is(.aca-arbre, .aca-fin) { flex: none; }
}

/* ── Parcours : le haut des quatre cartes de niveau aligné (2026-10-13, Arthur : « 2 lignes pour les deux premières cartes puis 1
      ligne pour les autres ») : l'objectif de chaque niveau réserve deux lignes, la barre et la première notion tombent au même
      niveau dans les quatre colonnes. Une colonne seule (téléphone) n'a rien à aligner. ── */
.aca-niveaux .aca-niv-obj { line-height: 1.45; min-height: calc(2em * 1.45); }
@media (max-width: 640px) { .aca-niveaux .aca-niv-obj { min-height: 0; } }