/* ============================================================================================================
   EDN Smart Planner — jetons du design system (lot B0, direction « le tableau de service »).
   Une seule définition par couleur grâce à light-dark() : le mode suit color-scheme, que pose data-theme sur <html>
   (jour / nuit) ou, sans choix mémorisé, le réglage du système. Les valeurs jour sont posées d'abord en repli pour
   les navigateurs sans light-dark(). Contrastes vérifiés par scripts/contraste.mjs (AA texte, 3:1 composants).
   ============================================================================================================ */
:root {
    color-scheme: light dark;

    /* --- surfaces du tableau --------------------------------------------------------------------------- */
    --bg: #f4f5f8;      --bg: light-dark(#f4f5f8, #1a1b1f);
    --bg-2: #eceef3;    --bg-2: light-dark(#eceef3, #1f2025);
    --card: #ffffff;    --card: light-dark(#ffffff, #24252b);
    --card-2: #f4f5f8;  --card-2: light-dark(#f4f5f8, #2c2d34);
    --track: #dcdfe7;   --track: light-dark(#dcdfe7, #3f414c);
    /* Rempli d'une jauge : une marque de donnée, pas une action. Une teinte plus claire que l'accent la nuit,
       pour tenir 3:1 contre la piste (l'accent plein n'y tenait que 2,3:1). */
    --jauge: #2852e0;   --jauge: light-dark(#2852e0, #6b8cff);
    --line: rgba(20, 22, 28, .09);   --line: light-dark(rgba(20, 22, 28, .09), rgba(255, 255, 255, .09));
    --line-2: rgba(20, 22, 28, .18); --line-2: light-dark(rgba(20, 22, 28, .18), rgba(255, 255, 255, .17));

    /* --- encres ---------------------------------------------------------------------------------------- */
    --ink: #14161c;     --ink: light-dark(#14161c, #f2f3f7);
    --ink-2: #4b5160;   --ink-2: light-dark(#4b5160, #b5bac7);
    --ink-3: #646a7a;   --ink-3: light-dark(#646a7a, #9499a8);

    /* --- l'accent, un seul : cobalt --------------------------------------------------------------------- */
    --accent: #2852e0;         --accent: light-dark(#2852e0, #3a63f0);
    --accent-strong: #1e45c8;  --accent-strong: light-dark(#1e45c8, #5375f5);
    --accent-text: #1e45c8;    --accent-text: light-dark(#1e45c8, #a3b6ff);
    --accent-soft: rgba(40, 82, 224, .12);  --accent-soft: light-dark(rgba(40, 82, 224, .12), rgba(58, 99, 240, .22));
    --accent-glow: rgba(40, 82, 224, .28);  --accent-glow: light-dark(rgba(40, 82, 224, .28), rgba(58, 99, 240, .35));
    --on-accent: #ffffff;      --on-accent: #ffffff;

    /* --- sémantique de révision : validé, en retard, erreur (toujours doublée d'un mot ou d'une icône) --- */
    --ok: #1a9457;        --ok: light-dark(#1a9457, #3ccf7f);
    /* Le trait posé SUR le vert plein : blanc sur le vert foncé du jour (3,9:1), encre sombre sur le vert
       clair de la nuit (7,7:1). Un blanc unique y tombait à 2:1 et la coche disparaissait. */
    --on-ok: #ffffff;     --on-ok: light-dark(#ffffff, #0d2a1a);
    --ok-text: #137046;   --ok-text: light-dark(#137046, #7fe3ab);
    --ok-soft: rgba(26, 148, 87, .12);   --ok-soft: light-dark(rgba(26, 148, 87, .12), rgba(60, 207, 127, .16));
    --warn: #d97d00;      --warn: light-dark(#d97d00, #f2a531);
    --warn-text: #8a4f00; --warn-text: light-dark(#8a4f00, #ffc973);
    --warn-soft: rgba(217, 125, 0, .14); --warn-soft: light-dark(rgba(217, 125, 0, .14), rgba(242, 165, 49, .16));
    --danger: #dc3a41;       --danger: light-dark(#dc3a41, #ff6b70);
    --danger-fill: #c5262d;  --danger-fill: light-dark(#c5262d, #ff6b70);
    --on-danger: #ffffff;    --on-danger: light-dark(#ffffff, #1c0a0b);
    --danger-text: #b8262d;  --danger-text: light-dark(#b8262d, #ff9a9e);
    --danger-soft: rgba(220, 58, 65, .12); --danger-soft: light-dark(rgba(220, 58, 65, .12), rgba(255, 107, 112, .16));
    /* Renforcement pédiatrie : la séance doublée sur l'angle de l'enfant. Rose, décidé par l'utilisateur ; une
       couleur sémantique de plus, portée par son aimant (point + mot), jamais un second accent d'interface. */
    /* Rang R2C d'une notion : le code du programme, que tout étudiant lit d'un coup d'œil — A en rouge (à
       connaître pour tous), B en bleu (pour la spécialité). Deux teintes à eux, distinctes du rouge d'erreur
       et du cobalt d'action, et toujours doublées du mot « Rang A » / « Rang B ». */
    --rang-a: #d4342a;        --rang-a: light-dark(#d4342a, #ff7a6e);
    --rang-a-text: #a82a22;   --rang-a-text: light-dark(#a82a22, #ffa79e);
    --rang-a-soft: rgba(212, 52, 42, .12);   --rang-a-soft: light-dark(rgba(212, 52, 42, .12), rgba(255, 122, 110, .18));
    --rang-b: #1f6fd0;        --rang-b: light-dark(#1f6fd0, #6aa9f5);
    --rang-b-text: #175aa8;   --rang-b-text: light-dark(#175aa8, #9cc6ff);
    --rang-b-soft: rgba(31, 111, 208, .12);  --rang-b-soft: light-dark(rgba(31, 111, 208, .12), rgba(106, 169, 245, .18));

    --pedia: #d63384;        --pedia: light-dark(#d63384, #ff6fb5);
    --pedia-text: #a8236e;   --pedia-text: light-dark(#a8236e, #ffa8d2);
    --pedia-soft: rgba(214, 51, 132, .14); --pedia-soft: light-dark(rgba(214, 51, 132, .14), rgba(255, 111, 181, .18));

    /* --- matières : six familles, jamais peintes telles quelles. Chaque badge les mélange à la surface et à
       l'encre du moment (color-mix), donc le jour comme la nuit suivent, et le texte reste celui de la charte. */
    --mat-med: #b5533f;        /* médecine */
    --mat-chir: #4d6478;       /* chirurgie et blocs */
    --mat-mere: #a8497a;       /* mère et enfant */
    --mat-neuro: #6b4fa8;      /* neurologie et psychiatrie */
    --mat-urg: #9a6410;        /* urgences, douleur, réadaptation */
    --mat-trans: #2f7168;      /* transversal : santé publique, LCA, légale, pharmaco */

    /* Types d'épreuve de Training : douze teintes à luminosité égale (OKLCH L 0,60 · C 0,135), réparties sur le cercle
       en laissant libre la zone du cobalt (245-290°), pour qu'aucun type ne se confonde avec l'action. Les familles
       voisines ont des teintes voisines : épreuves complètes (rouges), quiz et DP courts (ors et verts), formats
       (sarcelles et bleu d'eau), cours (violets et roses). Comme les matières, elles ne colorent jamais un texte ni un
       bouton : un point, ou un fond mélangé à la carte, et le nom toujours écrit. Point sur carte : 3,6 à 4,2:1 le
       jour, 3,6 à 4,3:1 la nuit. */
    --ep-annals: #c45b56;      /* Annale EDN, 25° */
    --ep-ecni-blank: #c06234;  /* EDN Blanc, 45° */
    --ep-contest: #b66c00;     /* Concours EDN, 65° */
    --ep-quizz: #9f7b00;       /* EDNiQuizz, 90° */
    --ep-easy-dp: #6e8d23;     /* Easy DP, 125° */
    --ep-mini-dp: #369653;     /* Mini DP transversaux, 150° */
    --ep-kfp: #009983;         /* KFP, 180° */
    --ep-tcs: #0096a6;         /* TCS, 205° */
    --ep-imaging: #008ebf;     /* Imagerie, 228° */
    --ep-lca: #9369c0;         /* LCA, 305° */
    --ep-conftube: #ac60a6;    /* Conftube, 330° */
    --ep-masterclass: #bd5a84; /* Masterclass, 355° */

    /* --- alias lus par le code historique (jusqu'à la fin de la migration) ------------------------------ */
    --dark: #14161c;      --dark: light-dark(#14161c, #1a1b1f);
    --dark-2: #1e2129;    --dark-2: light-dark(#1e2129, #24252b);
    --on-dark: #f2f3f7;
    --on-dark-2: rgba(242, 243, 247, .72);
    --surface: var(--card);
    --surface-2: var(--card-2);
    --radius: var(--r-card);
    --radius-sm: var(--r-ctrl);
    --shadow: var(--shadow-1);
    --shadow-lift: var(--shadow-2);

    /* --- typographie : Geist, échelle de 7 marches, plancher 13 px ------------------------------------- */
    --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --t-1: 13px; --t-2: 15px; --t-3: 17px; --t-4: 20px; --t-5: 24px; --t-6: 30px; --t-7: 40px;
    --lh-serre: 1.15; --lh-ui: 1.4; --lh-lecture: 1.55;

    /* --- espace : module de 4 px, rythme de 8 ------------------------------------------------------------ */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    --largeur: 1120px;

    /* --- forme : contrôles 8, cartes 14, pilules ------------------------------------------------------- */
    --r-micro: 6px; --r-ctrl: 8px; --r-card: 14px; --r-pill: 999px;
    /* Voile posé sous une fenêtre ou une feuille : l'encre de la page, jamais un noir figé. */
    --voile: rgba(20, 22, 28, .45); --voile: light-dark(rgba(20, 22, 28, .45), rgba(0, 0, 0, .6));
    --voile-leger: rgba(20, 22, 28, .32); --voile-leger: light-dark(rgba(20, 22, 28, .32), rgba(0, 0, 0, .48));

    /* --- profondeur : deux niveaux, teintés par l'encre ------------------------------------------------- */
    --shadow-1: 0 1px 2px rgba(20, 22, 28, .06), 0 8px 24px -12px rgba(20, 22, 28, .18);
    --shadow-2: 0 2px 6px rgba(20, 22, 28, .08), 0 24px 48px -20px rgba(20, 22, 28, .28);
}
/* Les ombres ne sont pas des couleurs : light-dark() ne les accepte pas, elles s'assombrissent donc ici. */
html[data-theme="nuit"] { --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7); --shadow-2: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 48px -20px rgba(0, 0, 0, .85); }
@media (prefers-color-scheme: dark) { html:not([data-theme="jour"]) { --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7); --shadow-2: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 48px -20px rgba(0, 0, 0, .85); } }
:root {
    --anneau-focus: 0 0 0 3px var(--accent-soft), 0 0 0 1.5px var(--accent);

    /* --- plans -------------------------------------------------------------------------------------------- */
    --z-nav: 10; --z-player: 20; --z-menu: 30; --z-modal: 40; --z-toast: 50; --z-crash: 60;

    /* --- mouvement (vocabulaire de video/src/motion.ts) -------------------------------------------------- */
    --ease-doux: cubic-bezier(.2, .7, .2, 1);
    --ease-net: cubic-bezier(.16, 1, .3, 1);
    --ease-sortie: cubic-bezier(.4, 0, 1, 1);
    --d-1: 120ms; --d-2: 180ms; --d-3: 240ms; --d-4: 320ms; --d-donnee: 600ms;

    /* --- coquille ----------------------------------------------------------------------------------------- */
    --nav-h: 56px; --outils-h: 56px; --barre-basse-h: 64px;
}
/* Le choix explicite prime sur le réglage du système ; sans choix, light dark laisse le système décider. */
html[data-theme="jour"] { color-scheme: light; }
html[data-theme="nuit"] { color-scheme: dark; }
/* ---------------------------------------------------------------- police : Geist, variable, auto-hébergée (OFL) */
@font-face { font-family: "Geist"; src: url("assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("assets/fonts/Geist-Italic-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

/* ---------------------------------------------------------------- base */
/* overflow-x: clip, jamais hidden : hidden ferait de body un conteneur de défilement et tuerait position: sticky
   (rails, en-têtes de jour). clip coupe le débordement horizontal sans rien changer au défilement. */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; scroll-padding-top: calc(var(--nav-h) + var(--outils-h) + var(--s-3)); }
body { font-family: var(--font); font-size: var(--t-2); line-height: var(--lh-ui); background-color: var(--bg); color: var(--ink);
       overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
       font-feature-settings: "ss01", "cv11"; }
h1, h2, h3, .h-display { letter-spacing: -.02em; line-height: var(--lh-serre); text-wrap: balance; }
h1 { font-size: var(--t-6); font-weight: 600; } h2 { font-size: var(--t-4); font-weight: 600; } h3 { font-size: var(--t-3); font-weight: 600; }
p, li { text-wrap: pretty; }
.num, .tabular, [data-num] { font-variant-numeric: tabular-nums; }
.lecture { font-size: var(--t-3); line-height: var(--lh-lecture); max-width: 68ch; }
::selection { background: var(--accent-soft); color: var(--ink); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
button, a, select, label, input[type=checkbox], [role=button], [data-action] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
#main-content a { overflow-wrap: anywhere; }

/* Le focus se voit, partout, et de la même façon : anneau cobalt sur fond doux. Jamais outline:none seul. */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--anneau-focus); border-radius: var(--r-ctrl); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--anneau-focus); border-color: var(--accent); }

/* Champs : jamais plus petits que 16 px au doigt (sinon iOS zoome, téléphone comme iPad), et la couleur de la charte. */
input, select, textarea { font-family: inherit; color: var(--ink); accent-color: var(--accent); }
@media (max-width: 767px), (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }

/* ---------------------------------------------------------------- icônes (sprite Phosphor, assets/icons.svg) */
.ico { display: inline-block; width: 1.2em; height: 1.2em; fill: currentColor; vertical-align: -.25em; flex-shrink: 0; }
.ico-16 { width: 16px; height: 16px; } .ico-20 { width: 20px; height: 20px; } .ico-24 { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- accessibilité utilitaire */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- mouvement de base */
.fade-in { animation: fadeIn .3s var(--ease-doux); }
body.rendu .fade-in { animation: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn var(--d-2) var(--ease-doux); transform-origin: center; }
/* Changement de page (documents séparés) et d'onglet (même document) : fondu court, rails immobiles. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--d-2); animation-timing-function: var(--ease-doux); }
::view-transition-old(contenu) { animation: vt-sortie var(--d-1) var(--ease-sortie) both; }
::view-transition-new(contenu) { animation: vt-entree var(--d-2) var(--ease-doux) both; }
@keyframes vt-sortie { to { opacity: 0; } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(4px); } }
.rail-haut, .nav { view-transition-name: rail-haut; }
.rail-outils, .toolbar { view-transition-name: rail-outils; }
.barre-basse, .mobile-nav { view-transition-name: barre-basse; }
#main-content { view-transition-name: contenu; }
/* Bascule jour/nuit : un seul fondu tonal, jamais de transition permanente sur tout. */
html.bascule-theme, html.bascule-theme *, html.bascule-theme *::before, html.bascule-theme *::after { transition: background-color var(--d-3) linear, color var(--d-3) linear, border-color var(--d-3) linear, fill var(--d-3) linear !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
    @view-transition { navigation: none; }
}
/* ============================================================================================================
   Styles hérités du moteur historique (cartes .card-x, héros sombre, .mtable, fiches, LCA, anciennes barres des
   pages publiques). Ils disparaissent page par page au fil de la refonte ; les jetons vivent dans tokens.css.
   ============================================================================================================ */
/* ============================================================================================================
   EDN Smart Planner — feuille de style commune à toutes les pages.
   Charte « Quantro / Apple » : fond gris très clair, cartes blanches très arrondies, typographie système large et
   serrée, un seul accent (bleu clair), des sections sombres en fondu pour les moments forts. Deux modes : jour et nuit.
   Les jetons ci-dessous sont la seule source des couleurs ; theme.css (engendré) rejoue dessus les classes
   Tailwind du moteur, si bien que tout le site bascule d'un bloc.
   ============================================================================================================ */


/* ---------------------------------------------------------------- base */
.font-serif-heading { font-family: var(--font); letter-spacing: -.01em; }
h1, h2, h3, .h-display { letter-spacing: -.02em; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
.toggle-checkbox:checked { right: 0; border-color: var(--accent); }
.toggle-checkbox:checked + .toggle-label { background-color: var(--accent); }
audio { border-radius: 10px; background-color: var(--card-2); width: 100%; height: 40px; }
audio::-webkit-media-controls-panel { background-color: var(--card-2); }
/* Une page ne s'anime qu'à sa première peinture. Les redessins qui suivent (réponse du serveur, case cochée, index
   des podcasts reçu) ne doivent pas faire clignoter ce qui est déjà à l'écran : body.rendu est posé juste après. */
button, a, select, label, input[type=checkbox] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#main-content a { overflow-wrap: anywhere; }
/* Les coins Tailwind du moteur suivent le rayon de la charte : plus doux, plus « Apple ». */
html .rounded-2xl { border-radius: var(--radius); }
html .rounded-xl { border-radius: var(--radius-sm); }
html .shadow-sm, html .shadow-md, html .shadow, html .shadow-lg { box-shadow: var(--shadow); }
html .shadow-xl, html .shadow-2xl { box-shadow: var(--shadow-lift); }
/* Les cartes blanches du moteur : bordure fine plutôt que grise épaisse. */
html .bg-white.border { border-color: var(--line); }

/* ---------------------------------------------------------------- barre de navigation (style Apple) */
.nav { position: sticky; top: 0; z-index: 60; height: var(--nav-h); background: rgba(22, 22, 23, .82);
       -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
       color: var(--on-dark); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.nav-inner { max-width: 1120px; margin: 0 auto; height: 100%; padding: 0 16px; display: flex; align-items: center; gap: 8px; }
.nav-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: #fff; text-decoration: none; white-space: nowrap; }
.nav-brand .mark { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); font-size: 12px; box-shadow: 0 0 0 3px var(--accent-glow); }
.nav-links { display: none; flex: 1 1 auto; min-width: 0; justify-content: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
/* iPad en portrait (768–1023 px) : huit onglets + les boutons de droite ne tiennent pas en pleine taille. Les liens
   se resserrent et la marque perd son nom ; les boutons de droite, eux, ne bougent pas — c'est eux qu'on perdait
   hors de l'écran. */
@media (min-width: 768px) { .nav-links { display: flex; } }
@media (min-width: 768px) and (max-width: 1023px) {
    .nav-link { padding: 6px 8px; font-size: 12px; }
    .nav-brand > span:last-child { display: none; }
    .nav-inner { gap: 6px; }
}
.nav-right { flex-shrink: 0; }
.nav-link { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; transition: color .2s, background .2s; position: relative; white-space: nowrap; }
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-link[aria-current="page"] { color: #fff; }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: var(--accent); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-btn { height: 30px; min-width: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background .2s, transform .15s; position: relative; }
.nav-btn:hover { background: rgba(255, 255, 255, .16); }
.nav-btn:active { transform: scale(.96); }
.nav-btn.danger:hover { background: rgba(255, 69, 58, .35); }
.nav-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); background: var(--accent); }
.nav-badge.attente { background: #ffd60a; }
.nav-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .9); }
/* Les pastilles d'information (Admin, série) n'ont leur place que sur grand écran. Une classe à nous : la règle
   .nav-pill ci-dessus, chargée après Tailwind, écrasait son « hidden » et les affichait partout. */
.nav-pill.large-seulement { display: none; }
@media (min-width: 1024px) { .nav-pill.large-seulement { display: inline-flex; } }

/* ---------------------------------------------------------------- barre d'outils (plannings, actions) */
.toolbar { background: var(--card); border-bottom: 1px solid var(--line); }
.toolbar-inner { max-width: 1120px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.toolbar-inner::-webkit-scrollbar { display: none; }
/* Téléphone : un défilement horizontal sans barre visible, personne ne le devine — les boutons de droite
   (partiels, lots) semblaient simplement absents. La barre passe à la ligne : tout est visible, rien à deviner. */
@media (max-width: 639px) { .toolbar-inner { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; } .tb-select { max-width: 130px; } }
.tb-label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tb-select { height: 30px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--ink); font-size: 12px !important; font-weight: 600; padding: 0 28px 0 12px; outline: none; max-width: 180px; appearance: none; -webkit-appearance: none;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.tb-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tb-btn { height: 30px; min-width: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .15s; position: relative; flex-shrink: 0; }
.tb-btn:hover { background: var(--card-2); color: var(--ink); border-color: var(--line-2); }
.tb-btn:active { transform: scale(.97); }
.tb-btn.primary { background: var(--ink); color: var(--bg); border-color: transparent; }
.tb-btn.primary:hover { background: var(--accent); color: var(--on-accent); }
.tb-btn.danger:hover { color: var(--danger); border-color: rgba(255, 69, 58, .4); }
.tb-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; flex-shrink: 0; }
.tb-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); background: var(--accent); }
.tb-badge.attente { background: #ffd60a; }

/* ---------------------------------------------------------------- composants de la charte */
.on-dark .eyebrow { color: var(--accent); }
.h-display { font-weight: 700; line-height: 1.05; }
.card-x { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tile-link { display: block; color: inherit; text-decoration: none; }
/* Section sombre en fondu, comme les « bg-black-fading » du gabarit Quantro : elle sort du flux clair avec des
   bords qui s'estompent, et une lueur d'accent en haut à gauche. */
.hero-dark { position: relative; overflow: hidden; color: var(--on-dark); border-radius: 28px;
             background: radial-gradient(900px 420px at 12% -20%, var(--accent-glow), transparent 60%),
                         radial-gradient(600px 300px at 100% 110%, rgba(255, 255, 255, .06), transparent 60%),
                         linear-gradient(180deg, #0b0b0f 0%, #15151a 100%); }
.muted { color: var(--ink-2); }
.hero-dark .muted { color: var(--on-dark-2); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(closest-side at 50% 0%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(closest-side at 50% 0%, #000 30%, transparent 100%); pointer-events: none; }
.btn, .btn-accent, .btn-dark, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn:active, .btn-accent:active, .btn-dark:active, .btn-ghost:active { transform: scale(.97); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-strong); }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--card-2); }
.on-dark .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .22); }
.on-dark .btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.btn-sm { height: 32px; padding: 0 14px; font-size: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--card-2); color: var(--ink-2); border: 1px solid var(--line); }
.kpi { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); }
.list-row:first-child { border-top: 0; }
.check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink-3); display: inline-flex; align-items: center; justify-content: center; color: transparent; background: transparent; cursor: pointer; transition: background .2s, border-color .2s, color .2s; flex-shrink: 0; }
.check:hover { border-color: var(--accent); }
.check.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Anneaux et camemberts : le trait se remplit à l'arrivée (stroke-dashoffset), la valeur au centre compte. */
.anneau { transform: rotate(-90deg); }
.anneau .anneau-piste { stroke: var(--track); }
.anneau .anneau-val { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2, .7, .2, 1); }
.on-dark .anneau .anneau-piste { stroke: rgba(255, 255, 255, .12); }
.donut .part { transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .2, 1), stroke-dasharray 1.1s cubic-bezier(.2, .7, .2, 1); }
.donut .part:hover { filter: brightness(1.12); }

/* Apparition au défilement : les blocs marqués .reveal montent et se dévoilent quand ils entrent à l'écran. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; } .reveal[data-delay="2"] { transition-delay: .16s; } .reveal[data-delay="3"] { transition-delay: .24s; } .reveal[data-delay="4"] { transition-delay: .32s; }

/* Graphiques SVG de l'onglet Statistiques : encres et grille suivent le mode. */
.viz-encre { fill: var(--ink); } .viz-encre2 { fill: var(--ink-2); } .viz-grille { stroke: var(--track); } .viz-fond { stroke: var(--card); }

/* ---------------------------------------------------------------- pied de page */
.footer { margin-top: 56px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 28px 16px 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; }

/* ---------------------------------------------------------------- mobile */
.mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding-bottom: env(safe-area-inset-bottom);
              background: rgba(22, 22, 23, .86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(255, 255, 255, .08); }
.mnav-grille { display: grid; }
.mnav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 3.75rem; padding: 8px 0; font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, .55); text-decoration: none; }
.mnav-link i { font-size: 18px; }
.mnav-link[aria-current="page"] { color: var(--accent); }
@media (max-width: 767px) {
    input:not([type=checkbox]):not([type=range]):not([type=file]):not([type=radio]), select, textarea { font-size: 16px !important; }
    .player-bar-fixed { bottom: calc(3.75rem + env(safe-area-inset-bottom)); }
    .hero-dark { border-radius: 22px; }
    .mtable { min-width: 0 !important; }
    .mtable thead { display: none; }
    .mtable tbody { display: block; }
    .mtable tr { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; padding: .7rem .9rem; }
    .mtable tr.hidden { display: none; }
    .mtable td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; }
    .mtable td.mt-num { order: 0; }
    .mtable td.mt-title { order: 1; flex: 1 1 0; min-width: 0; }
    .mtable td.mt-side { order: 2; white-space: nowrap; }
    .mtable td.mt-tags { order: 3; flex-basis: 100%; }
    .mtable td.mt-more { order: 4; }
    .mtable td.mt-actions { order: 5; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .35rem; }
    .mtable td.mt-actions > * { margin-right: 0 !important; }
    .mtable td.mt-empty { display: none; }
    .mtable td[colspan] { flex-basis: 100%; text-align: center !important; }
}

/* --------------------------------------------- fiche remise en forme (aperçu depuis l'onglet Gestion)
   Même rendu que la page imprimable servie par api.php (action fiche_planner_page) : c'est le serveur qui
   produit le HTML, ici on ne fait que l'habiller aux couleurs du site. */
.fiche-planner { color: var(--ink); font-size: 14px; line-height: 1.6; }
.fiche-planner .sec { margin: 0 0 18px; }
.fiche-planner .sec:last-child { margin-bottom: 0; }
.fiche-planner h2 { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; font-size: 11px; font-weight: 800;
                    letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-soft); }
.fiche-planner p { margin: 0 0 8px; }
.fiche-planner ul { margin: 0 0 10px; padding-left: 20px; list-style: disc; }
.fiche-planner li { margin: 3px 0; }
.fiche-planner code { background: var(--surface-2, rgba(0, 0, 0, .05)); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.fiche-planner .tableau { overflow-x: auto; margin: 0 0 12px; }
.fiche-planner table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.fiche-planner th, .fiche-planner td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; }
.fiche-planner th { background: var(--accent-soft); font-weight: 700; }

/* ---- Sujets LCA Pro (lcapro.fr) : correction proposition par proposition, encadrés « point clé », citations de l'article ---- */

/* Courbe d'évolution : le SVG ne porte que le tracé ; les repères sont en HTML, à la taille du système, donc
   ils ne rétrécissent pas avec la largeur de l'écran (ils tombaient à 4 px sur téléphone). */
.viz-courbe { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px var(--s-2); align-items: stretch; }
.viz-courbe-axe { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; font-size: var(--t-1); color: var(--ink-3); padding: 2px 0; }
.viz-courbe-trace { grid-column: 2; grid-row: 1; min-width: 0; }
.viz-courbe-pied { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-1); color: var(--ink-3); }
.viz-courbe-fin strong { color: var(--ink); font-weight: 600; }
/* ============================================================================================================
   Composants du design system. Chaque composant : états hover (sous hover:hover), focus-visible, active, disabled.
   ============================================================================================================ */

/* ---------------------------------------------------------------- boutons */
.btn, .btn-accent, .btn-dark, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 44px; padding: 0 var(--s-4);
    border-radius: var(--r-ctrl); font-size: var(--t-2); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
    border: 1px solid transparent; background: var(--card-2); color: var(--ink); transition: background var(--d-2) var(--ease-doux), color var(--d-2) var(--ease-doux), border-color var(--d-2) var(--ease-doux), transform var(--d-1) var(--ease-doux); }
.btn:active, .btn-accent:active, .btn-dark:active, .btn-ghost:active, .ico-btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-disabled="true"], .ico-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { position: relative; color: transparent; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: var(--ink-2); animation: tourne .8s linear infinite; }
.btn-primaire, .btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-secondaire { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn-fantome, .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-danger { background: var(--danger-fill); color: var(--on-danger); }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-sm { height: 36px; padding: 0 var(--s-3); font-size: var(--t-1); }
/* Une cible visuellement plus basse garde 44 px de zone pointable. */
.btn-sm { position: relative; } .btn-sm::after { content: ""; position: absolute; inset: -4px; }
.btn-lg { height: 48px; padding: 0 var(--s-5); font-size: var(--t-3); }
.btn-pleine { width: 100%; }
@media (hover: hover) and (pointer: fine) {
    .btn:hover { background: var(--track); }
    .btn-primaire:hover, .btn-accent:hover { background: var(--accent-strong); }
    .btn-secondaire:hover, .btn-fantome:hover, .btn-ghost:hover { background: var(--card-2); border-color: var(--line-2); }
    .btn-danger:hover { filter: brightness(.94); }
    .btn-dark:hover { background: var(--accent); color: var(--on-accent); }
}

/* Bouton icône seule : 44 × 44 de zone, glyphe centré, aria-label obligatoire. */
.ico-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-ctrl); border: 1px solid transparent;
    background: transparent; color: var(--ink-2); cursor: pointer; transition: background var(--d-2) var(--ease-doux), color var(--d-2) var(--ease-doux), transform var(--d-1) var(--ease-doux); position: relative; flex-shrink: 0; }
.ico-btn .ico { width: 20px; height: 20px; }
.ico-btn[aria-current="page"], .ico-btn[aria-expanded="true"] { background: var(--card-2); color: var(--ink); }
.ico-btn.danger { color: var(--danger-text); }
@media (hover: hover) and (pointer: fine) { .ico-btn:hover { background: var(--card-2); color: var(--ink); } .ico-btn.danger:hover { background: var(--danger-soft); } }
.ico-btn .compteur { position: absolute; top: 2px; right: 2px; }

/* ---------------------------------------------------------------- champs */
.champ { display: flex; flex-direction: column; gap: var(--s-1); }
.champ > label, .champ-label { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.champ input, .champ select, .champ textarea, .saisie { height: 44px; padding: 0 var(--s-3); border-radius: var(--r-ctrl); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-size: var(--t-2); width: 100%; transition: border-color var(--d-2) var(--ease-doux), box-shadow var(--d-2) var(--ease-doux); }
.champ textarea { height: auto; padding: var(--s-2) var(--s-3); line-height: var(--lh-ui); resize: vertical; }
.champ input::placeholder, .saisie::placeholder { color: var(--ink-3); }
.champ .aide { font-size: var(--t-1); color: var(--ink-3); }
.champ .erreur { font-size: var(--t-1); color: var(--danger-text); }
.champ[data-invalide] input, .champ[data-invalide] select { border-color: var(--danger); }
.select { appearance: none; -webkit-appearance: none; padding-right: 32px; position: relative; }
/* Le chevron suit l'encre du mode (masque coloré par currentColor), pas une couleur figée. */
.select-enveloppe { position: relative; display: inline-block; }
.select-enveloppe::after { content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; pointer-events: none; background-color: var(--ink-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------------------------------------------------------------- pastilles d'état (« aimants ») et compteurs */
.puce { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--t-1); font-weight: 500;
    background: var(--card); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.puce::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex-shrink: 0; }
.puce-ok { color: var(--ok-text); } .puce-ok::before { background: var(--ok); }
.puce-warn { color: var(--warn-text); } .puce-warn::before { background: var(--warn); }
.puce-danger { color: var(--danger-text); } .puce-danger::before { background: var(--danger); }
.puce-accent { color: var(--accent-text); } .puce-accent::before { background: var(--accent); }
/* Rang R2C : la couleur porte le code du programme, le mot le dit quand même. */
.puce-rang-a { color: var(--rang-a-text); background: var(--rang-a-soft); border-color: color-mix(in srgb, var(--rang-a) 38%, var(--line)); font-weight: 600; }
.puce-rang-a::before { background: var(--rang-a); }
.puce-rang-b { color: var(--rang-b-text); background: var(--rang-b-soft); border-color: color-mix(in srgb, var(--rang-b) 38%, var(--line)); font-weight: 600; }
.puce-rang-b::before { background: var(--rang-b); }

/* L'aimant pédiatrie est plein : il doit se voir d'un coup d'œil dans une colonne de séances. */
.puce-pedia { color: var(--pedia-text); background: var(--pedia-soft); border-color: color-mix(in srgb, var(--pedia) 40%, var(--line)); font-weight: 600; }
.puce-pedia::before { background: var(--pedia); }
.puce-sans-point::before { display: none; }
.puce-attente::before { animation: pulse-doux 1.6s var(--ease-doux) infinite; }
@keyframes pulse-doux { 50% { opacity: .35; } }
.compteur { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
    font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; background: var(--accent); color: var(--on-accent); }
.compteur-warn { background: var(--warn); color: var(--on-accent); }
html:not([data-theme="nuit"]) .compteur-warn { color: #fff; }

/* ---------------------------------------------------------------- menus (popover ancré, ou feuille en bas sur téléphone) */
.menu { position: fixed; z-index: var(--z-menu); min-width: 220px; max-width: min(92vw, 320px); padding: var(--s-1); border-radius: var(--r-card);
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-2); opacity: 0; transform: scale(.97) translateY(-4px); transform-origin: var(--origine, top right);
    transition: opacity var(--d-2) var(--ease-doux), transform var(--d-2) var(--ease-doux); }
.menu.ouvert { opacity: 1; transform: none; }
.menu.sortie { opacity: 0; transform: scale(.98); transition-duration: var(--d-1); transition-timing-function: var(--ease-sortie); }
.menu-titre { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--t-1); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-ctrl); border: 0; background: none;
    color: var(--ink); font-size: var(--t-2); text-align: left; text-decoration: none; cursor: pointer; }
.menu-item .ico { color: var(--ink-2); }
.menu-item[aria-current="page"] { color: var(--accent-text); font-weight: 500; } .menu-item[aria-current="page"] .ico { color: var(--accent); }
.menu-item.danger { color: var(--danger-text); } .menu-item.danger .ico { color: var(--danger); }
.menu-item:focus-visible, .menu-item.actif, .menu-item:active { background: var(--card-2); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .menu-item:hover { background: var(--card-2); } }
.menu-sep { height: 1px; margin: var(--s-1) var(--s-2); background: var(--line); }
/* Le formulaire ancré : un champ, deux boutons, même boîte que le menu (feuille basse sur téléphone). */
.menu-formulaire { max-width: min(92vw, 360px); }
.menu-form { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-2) var(--s-3) var(--s-3); }
.menu-form .menu-titre { padding: 0; font-size: var(--t-2); font-weight: 600; color: var(--ink); white-space: normal; }
.menu-form .aide { margin: 0; font-size: var(--t-1); color: var(--ink-3); line-height: var(--lh-lecture); }
.menu-form-actions { display: flex; justify-content: flex-end; gap: var(--s-2); }
@media (max-width: 767px) { .menu.feuille .menu-form { padding: 0 var(--s-1) var(--s-2); } .menu-form-actions .btn { flex: 1 1 auto; height: 44px; } }
/* Jauge fine : la piste porte le rayon et masque, la valeur se met à l'échelle (transform, jamais width). */
.jauge-piste { border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.jauge-val { display: block; width: 100%; height: 100%; background: var(--jauge); transform-origin: left center;
    transform: scaleX(var(--p, 0)); transition: transform var(--d-donnee) var(--ease-doux); }
@media (max-width: 767px) {
    .menu.feuille { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; max-width: none; border-radius: var(--r-card) var(--r-card) 0 0;
        padding: var(--s-2) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom)); transform: translateY(100%); transform-origin: bottom center; }
    .menu.feuille.ouvert { transform: none; }
    .menu.feuille.sortie { transform: translateY(100%); }
    .menu.feuille .menu-item { min-height: 48px; }
    .menu.feuille { max-height: calc(100dvh - env(safe-area-inset-top) - 24px); overflow-y: auto; overscroll-behavior: contain; }
    .menu-poignee { width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--line-2); margin: var(--s-1) auto var(--s-2); }
}
.voile-menu { position: fixed; inset: 0; z-index: calc(var(--z-menu) - 1); background: transparent; }
@media (max-width: 767px) { .voile-menu.feuille { background: var(--voile-leger); } }

/* ---------------------------------------------------------------- dialogues (<dialog> natif) */
.dlg { border: 0; padding: 0; max-width: min(92vw, 440px); width: 100%; border-radius: var(--r-card); background: var(--card); color: var(--ink);
    box-shadow: var(--shadow-2); opacity: 0; transform: scale(.96) translateY(8px); transition: opacity var(--d-3) var(--ease-doux), transform var(--d-3) var(--ease-doux), overlay var(--d-3) allow-discrete, display var(--d-3) allow-discrete; }
.dlg[open] { opacity: 1; transform: none; }
@starting-style { .dlg[open] { opacity: 0; transform: scale(.96) translateY(8px); } }
.dlg.sortie { opacity: 0; transform: scale(.98); transition-duration: var(--d-1); transition-timing-function: var(--ease-sortie); }
.dlg::backdrop { background: var(--voile); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity var(--d-2) linear; }
.dlg.sortie::backdrop { opacity: 0; }
.dlg-corps { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.dlg h2 { font-size: var(--t-4); margin: 0; }
.dlg p { margin: 0; color: var(--ink-2); font-size: var(--t-2); line-height: var(--lh-lecture); white-space: pre-line; }
.dlg-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }
/* Réglage chiffré : le champ court reste au doigt (44 px), l'aperçu se lit juste en dessous. */
.dlg-grille { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.dlg-ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.dlg-ligne label { margin: 0; font-size: var(--t-1); color: var(--ink-2); }
.dlg-ligne .saisie { width: 5.5rem; min-height: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.dlg-corps--grille { max-height: 80vh; overflow-y: auto; }
.dlg-apercu { margin: 0; padding: var(--s-3); border-radius: var(--r-controle); background: var(--card-2);
    color: var(--ink-2); font-size: var(--t-1); line-height: var(--lh-lecture); }
@media (max-width: 767px) {
    .dlg { max-width: none; margin: auto 0 0; border-radius: var(--r-card) var(--r-card) 0 0; padding-bottom: env(safe-area-inset-bottom); }
    .dlg-actions { flex-direction: column-reverse; } .dlg-actions .btn { width: 100%; }
}

/* ---------------------------------------------------------------- toasts */
.toasts { position: fixed; left: 50%; bottom: calc(var(--barre-basse-h) + env(safe-area-inset-bottom) + var(--s-3)); transform: translateX(-50%); z-index: var(--z-toast);
    display: flex; flex-direction: column; align-items: center; gap: var(--s-2); pointer-events: none; width: max-content; max-width: 92vw; }
@media (min-width: 768px) { .toasts { bottom: var(--s-5); } }
.toast { display: flex; align-items: center; gap: var(--s-2); padding: 10px 14px; border-radius: var(--r-ctrl); background: var(--ink); color: var(--bg); font-size: var(--t-1); font-weight: 500;
    box-shadow: var(--shadow-2); opacity: 0; transform: translateY(8px); transition: opacity var(--d-2) var(--ease-doux), transform var(--d-2) var(--ease-doux); pointer-events: auto; }
.toast.visible { opacity: 1; transform: none; }
.toast.sortie { opacity: 0; transform: translateY(4px); transition-duration: var(--d-1); transition-timing-function: var(--ease-sortie); }
.toast .ico { color: var(--bg); opacity: .8; }
.toast-danger { background: var(--danger-fill); color: var(--on-danger); }
.toast-action { margin-left: var(--s-1); padding: 4px 8px; border: 0; border-radius: var(--r-micro); background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.toast-action:focus-visible { box-shadow: 0 0 0 2px var(--bg); }

/* ---------------------------------------------------------------- squelettes et états vides */
.squelette { position: relative; overflow: hidden; background: var(--track); border-radius: var(--r-ctrl); color: transparent !important; }
.squelette::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: miroite 1.2s linear infinite; }
html[data-theme="nuit"] .squelette::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); }
.squelette-ligne { height: 14px; margin: 6px 0; } .squelette-titre { height: 22px; width: 40%; margin-bottom: 12px; } .squelette-bloc { height: 88px; margin-bottom: 12px; border-radius: var(--r-card); }
.squelettes { opacity: 0; animation: apparait-tard 1ms linear 300ms forwards; }
@keyframes apparait-tard { to { opacity: 1; } }
@keyframes miroite { to { transform: translateX(100%); } }
@keyframes tourne { to { transform: rotate(360deg); } }
.vide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding: var(--s-7) var(--s-4); color: var(--ink-2); }
.vide .ico { width: 32px; height: 32px; color: var(--ink-3); }
.vide h2 { font-size: var(--t-3); color: var(--ink); margin: 0; }
.vide p { margin: 0; max-width: 40ch; font-size: var(--t-2); }
.vide .btn { margin-top: var(--s-2); }

/* ---------------------------------------------------------------- onglets segmentés et cartes */
.segments { display: inline-flex; padding: 3px; border-radius: var(--r-ctrl); background: var(--card-2); gap: 2px; }
.segments [role=tab] { height: 32px; padding: 0 var(--s-3); border-radius: var(--r-micro); border: 0; background: transparent; color: var(--ink-2); font-size: var(--t-1); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.segments [role=tab][aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
.carte { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.carte-corps { padding: var(--s-4); } @media (min-width: 768px) { .carte-corps { padding: var(--s-5); } }

/* ---------------------------------------------------------------- badges de matière (six familles) */
/* La couleur ne porte plus l'identification : le nom est toujours écrit. La teinte sert seulement à repérer une
   famille d'un coup d'œil. Fond à 12 % de la teinte, texte = l'encre de la charte : lisible dans les deux modes. */
.mat { background-color: color-mix(in srgb, var(--mat, var(--ink-3)) 12%, var(--card)); color: var(--ink-2);
    border-color: color-mix(in srgb, var(--mat, var(--ink-3)) 30%, var(--line)); }
.mat-med { --mat: var(--mat-med); } .mat-chir { --mat: var(--mat-chir); } .mat-mere { --mat: var(--mat-mere); }
.mat-neuro { --mat: var(--mat-neuro); } .mat-urg { --mat: var(--mat-urg); } .mat-trans { --mat: var(--mat-trans); }

/* ---------------------------------------------------------------- échelles non sémantiques */
/* Longueur d'une fiche : quatre crans de densité, du plus léger au plus dense. Aucune n'est une erreur, donc
   aucune n'est rouge : la couleur sémantique reste réservée aux états de révision. */
.densite { background-color: var(--card-2); color: var(--ink-2); border-color: var(--line); }
.densite-1 { background-color: color-mix(in srgb, var(--ink-3) 6%, var(--card)); }
.densite-2 { background-color: color-mix(in srgb, var(--ink-3) 12%, var(--card)); }
.densite-3 { background-color: color-mix(in srgb, var(--ink-3) 18%, var(--card)); color: var(--ink); }
.densite-4 { background-color: color-mix(in srgb, var(--ink-3) 26%, var(--card)); color: var(--ink); font-weight: 500; }
/* Rang d'un item (score) : même échelle, l'accent marquant le rang le plus haut. */
.rang { background-color: var(--card-2); color: var(--ink-2); border-color: var(--line); }
.rang-3 { background-color: var(--accent-soft); color: var(--accent-text); border-color: transparent; font-weight: 600; }
.rang-2 { background-color: color-mix(in srgb, var(--ink-3) 18%, var(--card)); color: var(--ink); font-weight: 500; }
.rang-1 { background-color: color-mix(in srgb, var(--ink-3) 10%, var(--card)); color: var(--ink-2); }
.rang-0 { background-color: var(--card-2); color: var(--ink-3); }

/* Bouton qui se lit comme un lien : sept pages s'en servent, il appartient au système et non à une page
   (remonté de src/styles/pages/aujourdhui.css au lot B13, comme la note de surface l'annonçait). */
.lien-bouton { position: relative; background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* Une zone pointable de 44 px autour d'un lien de 18 px, sans changer la mise en page. */
.lien-bouton::after { content: ""; position: absolute; inset: -12px 0; }
.lien-bouton:active { opacity: .7; }
/* ============================================================================================================
   Coquille : le cadre du tableau de service. Deux rails plats fermés par un filet, une barre basse sur téléphone.
   ============================================================================================================ */
.app { min-height: 100dvh; padding-bottom: calc(var(--barre-basse-h) + env(safe-area-inset-bottom) + var(--s-6)); }
@media (min-width: 768px) { .app { padding-bottom: var(--s-6); } }
.rails { position: sticky; top: 0; z-index: var(--z-nav); }
.contenu { max-width: var(--largeur); margin: var(--s-5) auto 0; padding: 0 var(--s-4); }
@media (min-width: 768px) { .contenu { margin-top: var(--s-6); padding: 0 var(--s-5); } }

/* ---------------------------------------------------------------- rail du haut */
.rail-haut { height: var(--nav-h); background: var(--card); border-bottom: 1px solid var(--line);
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.rail-inner { max-width: var(--largeur); margin: 0 auto; height: 100%; padding: 0 var(--s-3); display: flex; align-items: center; gap: var(--s-2); }
@media (min-width: 768px) { .rail-inner { padding: 0 var(--s-5); gap: var(--s-3); } }
.marque { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 var(--s-2) 0 0; border-radius: var(--r-ctrl); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--t-2); letter-spacing: -.01em; white-space: nowrap; }
.marque-carre { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.onglets { display: none; flex: 1 1 auto; min-width: 0; justify-content: center; gap: 2px; }
@media (min-width: 768px) { .onglets { display: flex; } }
.onglet { position: relative; display: inline-flex; align-items: center; height: var(--nav-h); padding: 0 12px; color: var(--ink-2); font-size: var(--t-2); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--d-2) var(--ease-doux); }
.onglet::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); transform: scaleX(0); transition: transform var(--d-2) var(--ease-doux); }
.onglet[aria-current="page"] { color: var(--ink); }
.onglet[aria-current="page"]::after { transform: scaleX(1); }
.onglet:focus-visible { box-shadow: inset var(--anneau-focus); border-radius: var(--r-ctrl); }
@media (hover: hover) and (pointer: fine) { .onglet:hover { color: var(--ink); } }
@media (min-width: 768px) and (max-width: 1023px) { .onglet { padding: 0 8px; font-size: var(--t-1); } .marque > span:last-child { display: none; } }
.rail-droite { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; }
/* état du serveur : une pastille avec son mot, toujours, pas seulement une couleur */
.pastille-serveur { margin-right: var(--s-1); }
@media (max-width: 479px) { .marque > span:last-child { display: none; } }
.serie { display: none; align-items: center; gap: 5px; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); padding: 0 var(--s-2); font-variant-numeric: tabular-nums; }
.serie .ico { color: var(--warn); }
@media (min-width: 1024px) { .serie { display: inline-flex; } }

/* ---------------------------------------------------------------- rail d'outils du planning */
.rail-outils { min-height: var(--outils-h); background: var(--bg); border-bottom: 1px solid var(--line); }
.rail-outils-inner { max-width: var(--largeur); margin: 0 auto; padding: var(--s-1) var(--s-3); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
@media (min-width: 768px) { .rail-outils-inner { padding: var(--s-1) var(--s-5); } }
.outil-planning { display: inline-flex; align-items: center; gap: var(--s-1); }
.outil-planning .select { height: 44px; max-width: 200px; background-color: var(--card); font-weight: 500; font-size: var(--t-1); border-color: var(--line); }
.rail-outils .btn { font-size: var(--t-1); }
.rail-outils .btn .ico { width: 16px; height: 16px; }
.espace { flex: 1 1 8px; }
@media (max-width: 767px) { .rail-outils .btn-texte { display: none; } .rail-outils .btn-sm-ico { width: 44px; padding: 0; } .outil-planning .select { max-width: 150px; } }
/* Sous 640 px, Partiels et Lots vivent dans le menu « … » : le rail garde le planning, le menu et Planifier sur une ligne. */
@media (max-width: 639px) { .rail-outils .btn-sm-ico { display: none; } }

/* ---------------------------------------------------------------- barre basse (téléphone) */
.barre-basse { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); background: var(--card); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
@media (min-width: 768px) { .barre-basse { display: none; } }
.barre-basse-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.onglet-bas { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--barre-basse-h); color: var(--ink-3); text-decoration: none; font-size: 11px; font-weight: 500; border: 0; background: none; cursor: pointer; }
.onglet-bas .ico { width: 24px; height: 24px; }
.onglet-bas::before { content: ""; position: absolute; top: -1px; left: 50%; width: 24px; height: 2px; margin-left: -12px; border-radius: 0 0 2px 2px; background: var(--accent); transform: scaleX(0); transition: transform var(--d-2) var(--ease-doux); }
.onglet-bas[aria-current="page"], .onglet-bas[aria-expanded="true"] { color: var(--accent-text); }
.onglet-bas[aria-current="page"]::before { transform: scaleX(1); }
.onglet-bas:focus-visible { box-shadow: inset var(--anneau-focus); border-radius: 0; }
.onglet-bas:active { color: var(--ink); }

/* ---------------------------------------------------------------- pied de page */
.pied { max-width: var(--largeur); margin: var(--s-8) auto 0; padding: var(--s-5) var(--s-4) var(--s-4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--t-1); color: var(--ink-3); }
.pied a { color: var(--ink-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pied a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }
.pied .marque { height: 32px; font-size: var(--t-1); }
.pied .droite { margin-left: auto; }
/* ============================================================================================================
   Contenu riche des QCM (exports edn.fr), fiches chrono et corrections LCA : des HTML venus du serveur, habillés
   ici sur les jetons pour tenir dans les deux modes. Remplace la feuille crème que qcm.js injectait sans variante
   nuit (le mode nuit y était illisible).

   LES NOMS DE PALETTE TAILWIND CI-DESSOUS SONT DES SÉLECTEURS, PAS DES DÉCLARATIONS. Sept règles nomment une
   classe Tailwind (border-gray-200, bg-emerald-50/60, bg-violet-50/60, bg-teal-50/60, bg-indigo-50/60,
   bg-amber-50/60) pour la DÉSHABILLER : elles ne posent aucune couleur figée, elles remplacent celle que le
   contenu apportait par un jeton. Elles sont donc l'inverse d'un manquement, et le lot de clôture les garde —
   les supprimer rendrait ses aplats d'origine à un HTML que le site ne rédige pas et ne peut pas corriger, sans
   variante nuit. Elles disparaîtront le jour où la banque de QCM cessera de livrer du Tailwind, pas avant.
   ============================================================================================================ */

/* --- onglet QCM : le texte secondaire reste lisible, l'énoncé est encadré, les micro-tailles remontent au plancher */
#qcm-root .text-\[10px\], #qcm-root .text-\[9px\], #qcm-root .text-\[11px\], #qcm-root .text-\[8px\] { font-size: var(--t-1); }
#qcm-root h3.font-black { font-size: var(--t-3); font-weight: 600; }
#qcm-root .qcm-enonce-block { background: var(--card-2); border: 1px solid var(--accent-soft); border-radius: var(--r-ctrl); padding: .9rem 1rem; }
#qcm-root #qcm-props > div { border-width: 1.5px; }
#qcm-root #qcm-props > div.border-gray-200 { border-color: var(--line-2); background: var(--card); }
@media (hover: hover) and (pointer: fine) { #qcm-root #qcm-props > div.border-gray-200:hover { border-color: var(--accent); background: var(--accent-soft); } }
#qcm-root #qcm-correction .bg-emerald-50\/60 { background-color: var(--ok-soft); border-color: var(--ok); border-width: 1.5px; }
#qcm-root .chrono-content { background: var(--card-2); border-color: var(--line-2); border-width: 1.5px; }
#qcm-root table thead tr { background-color: var(--card-2); color: var(--ink); }
#qcm-root tbody tr { border-color: var(--line); }
#qcm-root .bg-violet-50\/60, #qcm-root .bg-teal-50\/60, #qcm-root .bg-indigo-50\/60, #qcm-root .bg-amber-50\/60 { background-color: var(--card-2); border-color: var(--line-2); }

/* --- HTML des questions edn.fr */
.qcm-rich p { margin: 0 0 .5em; } .qcm-rich p:last-child { margin-bottom: 0; }
.qcm-rich ul, .qcm-rich ol { margin: .4em 0 .4em 1.2em; list-style: disc; } .qcm-rich ol { list-style: decimal; }
.qcm-rich table { border-collapse: collapse; margin: .5em 0; font-size: .9em; }
.qcm-rich td, .qcm-rich th { border: 1px solid var(--line-2); padding: 4px 8px; }
.qcm-rich .page, .qcm-rich .section, .qcm-rich .layoutArea, .qcm-rich .column { display: block; }
.qcm-img { max-width: 100%; height: auto; border-radius: var(--r-ctrl); border: 1px solid var(--line); margin: .5em 0; background: var(--card); }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- fiches chrono (HTML de edn_data/fiches_chrono) : quatre teintes sémantiques, jamais de blanc ni de brun figés */
.chrono-content { font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink); }
.chrono-content .row { margin-bottom: 4px; } .chrono-content strong { font-weight: 600; }
.chrono-content table { width: 100%; border-collapse: collapse; font-size: var(--t-1); margin-top: 6px; }
.chrono-content th { background: var(--accent); color: var(--on-accent); font-weight: 600; padding: 5px 8px; text-align: left; font-size: var(--t-1); }
.chrono-content td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.chrono-content .td-g, .chrono-content tr.vert td, .chrono-content .vert, .chrono-content .qcm-reponse, .chrono-content .qcm-rep { background: var(--ok-soft); color: var(--ok-text); }
.chrono-content .td-a, .chrono-content tr.amber td, .chrono-content .amber, .chrono-content .box-meds { background: var(--warn-soft); color: var(--warn-text); }
.chrono-content .td-o, .chrono-content tr.orange td, .chrono-content .orange, .chrono-content .box-graves { background: var(--warn-soft); color: var(--warn-text); }
.chrono-content .td-r, .chrono-content tr.rouge td, .chrono-content .rouge, .chrono-content .qcm-distracteur, .chrono-content .qcm-dist, .chrono-content .alerte-box { background: var(--danger-soft); color: var(--danger-text); }
.chrono-content tr.bleu td, .chrono-content .bleu, .chrono-content .update-box, .chrono-content .cc-scenario { background: var(--accent-soft); color: var(--accent-text); }
.chrono-content tr.violet td, .chrono-content .violet, .chrono-content .box-pieges { background: var(--card-2); color: var(--ink); }
.chrono-content .highlight-box { background: var(--danger-soft); border: 1px solid var(--danger); border-radius: var(--r-micro); padding: 7px 10px; margin-top: 6px; font-size: var(--t-1); color: var(--danger-text); }
.chrono-content .mnemo-box, .chrono-content .mnemo-card { background: var(--card); border: 1px solid var(--ok); border-radius: var(--r-micro); padding: 8px 11px; margin-top: 5px; color: var(--ok-text); }
.chrono-content .mnemo-key { font-weight: 700; color: var(--ok-text); } .chrono-content .mnemo-line { margin-top: 4px; color: var(--ink-2); }
.chrono-content .col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.chrono-content .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .chrono-content .col2, .chrono-content .two-col { grid-template-columns: 1fr; } }
.chrono-content .line { margin: 5px 0; padding-left: 16px; position: relative; }
.chrono-content .line::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.chrono-content ul, .chrono-content ol { padding-left: 18px; margin: 4px 0; } .chrono-content li { margin-bottom: 4px; } .chrono-content p { margin-bottom: 6px; }
.chrono-content .card, .chrono-content .box, .chrono-content .qbox, .chrono-content .qcm-enonce { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: 10px 12px; margin-bottom: 8px; }
.chrono-content .sub-label { font-size: var(--t-1); font-weight: 600; color: var(--accent-text); margin: 10px 0 4px; }
.chrono-content .tag, .chrono-content .alerte-title, .chrono-content .update-title, .chrono-content .qcm-rep-label, .chrono-content .qcm-dist-label { font-size: var(--t-1); font-weight: 600; margin-bottom: 3px; color: inherit; }
.chrono-content .alerte-box, .chrono-content .update-box { border: 1px solid currentColor; border-radius: var(--r-ctrl); padding: 10px 14px; margin: 8px 0; }
.chrono-content .piege-item { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); } .chrono-content .piege-icon { color: var(--danger); }
.chrono-content .qcm-reponse, .chrono-content .qcm-distracteur, .chrono-content .qcm-rep, .chrono-content .qcm-dist { border-radius: var(--r-micro); padding: 8px 12px; margin-bottom: 6px; }
.chrono-content .cc-scenario { border: 1px solid var(--accent-soft); border-radius: var(--r-micro); padding: 8px 12px; margin-bottom: 8px; font-style: italic; }
.chrono-content .note { font-size: var(--t-1); color: var(--ink-3); margin-top: 8px; } .chrono-content .table-wrap { overflow-x: auto; }
.chrono-content .box-graves, .chrono-content .box-meds, .chrono-content .box-pieges { border-radius: var(--r-ctrl); padding: 12px 14px; margin-top: 10px; }

/* --- corrections LCA (LCA Pro) */
.qcm-rich .lca-correction .lca-prop { padding: .6rem .8rem; border-radius: var(--r-ctrl); border: 1px solid var(--line-2); margin: .5rem 0; background: var(--card); }
.qcm-rich .lca-correction .lca-prop-true { border-color: var(--ok); }
.qcm-rich .lca-correction .lca-prop-false { border-color: var(--danger); }
.qcm-rich .lca-prop-head { font-weight: 600; margin-bottom: .35rem; }
.qcm-rich .lca-verdict { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: var(--r-micro); font-size: var(--t-1); font-weight: 700; letter-spacing: .05em; vertical-align: middle; }
.qcm-rich .lca-prop-true .lca-verdict { background: var(--ok-soft); color: var(--ok-text); }
.qcm-rich .lca-prop-false .lca-verdict { background: var(--danger-soft); color: var(--danger-text); }
.qcm-rich .lca-correction p { margin: .3rem 0; }
.qcm-rich .lca-correction ul, .qcm-rich .lca-correction ol { margin: .3rem 0 .3rem 1.25rem; }
.qcm-rich .lca-correction ul { list-style: disc; } .qcm-rich .lca-correction ol { list-style: decimal; }
.qcm-rich .lca-correction blockquote { margin: .4rem 0; padding: .2rem .75rem; border-left: 1px solid var(--line-2); color: var(--ink-2); font-style: italic; }
.qcm-rich .lca-correction h4, .qcm-rich .lca-correction h5, .qcm-rich .lca-correction h6 { font-weight: 600; margin: .5rem 0 .2rem; }
.qcm-rich .lca-callout { margin: .5rem 0; padding: .5rem .75rem; border-radius: var(--r-ctrl); border: 1px solid; }
.qcm-rich .lca-callout-title { font-size: var(--t-1); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; }
.qcm-rich .lca-callout-tip { background: var(--ok-soft); border-color: var(--ok); }
.qcm-rich .lca-callout-note { background: var(--accent-soft); border-color: var(--accent); }
.qcm-rich .lca-callout-warning { background: var(--warn-soft); border-color: var(--warn); }
.qcm-rich .lca-citations { margin-top: .4rem; font-size: var(--t-1); color: var(--ink-2); }
.qcm-rich .lca-citations-title { font-size: var(--t-1); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-3); margin: .2rem 0; }
.qcm-rich .lca-citations ul { list-style: none; margin-left: 0; } .qcm-rich .lca-citations li { font-style: italic; margin: .15rem 0; }
.qcm-rich .lca-cite-page { font-style: normal; font-weight: 700; color: var(--accent-text); margin-right: .25rem; }
.qcm-rich .lca-pdf-note, .qcm-rich .lca-article-ref { font-size: var(--t-1); color: var(--ink-3); margin-top: .4rem; }
/* ============================================================================================================
   Page Aujourd'hui : la liste du jour et son tableau de bord. À gauche la liste (le retard à part, puis les séances
   du jour groupées par spécialité), à droite la colonne fixe « Ta journée ». Sous 1024 px, une seule colonne : la
   carte « Ta journée » devient une bande de résumé en haut, la liste suit, les podcasts ferment la page. L'ordre de
   ces blocs est celui du document, que src/ui/pages/aujourdhui.js écrit pour chaque mise en page : aucun `order`
   ici, pour que le clavier et le lecteur d'écran suivent ce qu'on voit.
   Ce fichier porte aussi la ligne de séance (.seance), partagée avec le Calendrier et l'Accueil : ce qui n'est qu'à
   Aujourd'hui passe par .seance--ouvrir et par les classes .jour-*.
   ============================================================================================================ */
.jour { display: flex; flex-direction: column; gap: var(--s-5); }
/* L'en-tête de page (.jour-entete, .jour-date, .jour-resume) sert aussi à Méthode, LCA, Calendrier, Abonnement… */
.jour-entete { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-6); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.jour-entete-texte { flex: 1 1 260px; min-width: 0; }
.jour-date { font-size: var(--t-6); font-weight: 600; margin: 0; }
.jour-resume { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: var(--t-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.jour-flamme { color: var(--warn); }
/* Ici l'en-tête ne porte que la date : les chiffres vivent dans « Ta journée », sans filet sous le titre. */
.jour > .jour-entete { padding-bottom: 0; border-bottom: 0; }

/* --- les deux colonnes. Au téléphone et à la tablette, pas de colonne : le document pose « Ta journée », la liste,
   puis le suivi (partiels, découpages, podcasts), l'un sous l'autre. À partir de 1024 px, il pose la liste, puis la
   colonne (.jour-cote) qui porte les deux blocs. */
.jour-listes { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.jour-suivi, .jour-cote { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
@media (min-width: 1024px) {
    .jour { display: grid; grid-template-columns: minmax(0, 1fr) 352px; grid-template-rows: auto 1fr; column-gap: var(--s-6); row-gap: var(--s-5); align-items: start; }
    .jour > .jour-entete { grid-column: 1; grid-row: 1; }
    .jour-listes { grid-column: 1; grid-row: 2; }
    /* La colonne reste sous les deux rails pendant qu'on descend la liste. */
    .jour-cote { grid-column: 2; grid-row: 1 / 3; position: sticky; top: calc(var(--nav-h) + var(--outils-h) + var(--s-5)); }
}

/* --- sections de la liste : un titre de 20 px, son compte, puis la liste en registre dans une seule carte */
.jour-section { display: flex; flex-direction: column; gap: var(--s-3); }
.jour-section-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.jour-section-entete h2 { margin: 0; font-size: var(--t-4); }
.jour-section-compte { color: var(--ink-3); font-size: var(--t-1); }
.jour-section-aide { flex-basis: 100%; margin: 0; color: var(--ink-3); font-size: var(--t-1); }
/* Le retard se dit par son compte en orange, le liseré de ses lignes et « prévue jeu. 17 » ; le titre reste à
   l'encre, sur le même bord gauche qu'« Aujourd'hui ». */
.jour-section--retard .jour-section-compte { color: var(--warn-text); font-weight: 500; }
/* La colonne de séances d'une journée (Calendrier, Accueil, démonstration de la connexion) : des aimants empilés. */
.jour-liste { display: flex; flex-direction: column; gap: var(--s-2); }
/* Le registre d'Aujourd'hui : une carte, une ligne par séance fermée par un filet. */
.jour-registre { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden; }
.jour-registre .seance + .seance { border-top: 1px solid var(--line); }
.jour-section--faites .jour-registre { background: var(--card-2); }

/* --- groupes du jour : un en-tête par spécialité, teinté par la famille de la matière. La formule de .mat : fond à
   12 % sur la carte, filet à 30 % sur le filet, texte à l'encre. Le nom est toujours écrit ; le repère de 4 px ne fait
   que le précéder. --mat-trait est le seul trait plein d'une famille (repère, segment fait) : la teinte mêlée à 75 %
   à l'encre 2 du moment, plus sombre le jour, plus claire la nuit. Sans famille connue, l'encre 3, neutre. */
.jour-groupe, .jour-seg, .jour-legende li, .seance-matiere { --mat-trait: color-mix(in srgb, var(--mat, var(--ink-3)) 75%, var(--ink-2)); }
.jour-groupe-tete { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-3); row-gap: 2px; min-height: 48px;
    padding: 6px var(--s-4) 6px 17px; background: color-mix(in srgb, var(--mat, var(--ink-3)) 12%, var(--card));
    border-bottom: 1px solid color-mix(in srgb, var(--mat, var(--ink-3)) 30%, var(--line)); }
.jour-groupe + .jour-groupe .jour-groupe-tete { border-top: 1px solid color-mix(in srgb, var(--mat, var(--ink-3)) 30%, var(--line)); }
.jour-groupe-nom { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: var(--t-2); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.jour-groupe-nom::before { content: ""; width: 4px; height: 20px; border-radius: 2px; flex: none; background: var(--mat-trait); }
.jour-groupe-compte { font-size: var(--t-1); color: var(--ink-2); white-space: nowrap; }
/* Le partiel s'accroche à l'en-tête de sa matière : « Partiel » (qui ouvre la gestion des partiels), J-n, avancement. */
.jour-groupe-partiel { margin: 0 0 0 auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); font-size: var(--t-1); color: var(--ink-2); }
.jour-partiel-nom { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.jour-partiel-nom .ico { color: var(--ink-2); }
.jour-partiel-lien { font-weight: 500; text-underline-offset: 3px; white-space: nowrap; border-radius: var(--r-micro); }
.jour-partiel-lien::after { inset: -14px -4px; }
.jour-partiel-j { height: 22px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--card); display: inline-grid; place-items: center; font-weight: 600; color: var(--ink); }
.jour-partiel-j--proche { color: var(--warn-text); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.jour-partiel-avance { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.jour-partiel-avance .jauge-piste { width: 64px; height: 6px; }
.jour-partiel-avance .num { color: var(--ink); font-weight: 600; }
@media (max-width: 639px) {
    /* Le repère de 4 px tombe sur le bord gauche des cases à cocher ; le partiel passe sous le nom, aligné sur lui. */
    .jour-groupe-tete { padding: 8px var(--s-3) 8px 13px; }
    .jour-groupe-partiel { margin-left: 0; flex-basis: 100%; padding-left: 14px; }
}

/* --- l'aimant */
.seance { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: var(--s-2) var(--s-2); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-2);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); transition: background var(--d-2) var(--ease-doux), border-color var(--d-2) var(--ease-doux), opacity var(--d-3) var(--ease-doux); }
.seance--retard { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.seance--faite .seance-titre, .seance--faite .seance-meta, .seance--faite .seance-j { color: var(--ink-3); }
.seance--faite .seance-titre { text-decoration: line-through; text-decoration-color: var(--ink-3); text-decoration-thickness: 1px; }
.seance--squelette { pointer-events: none; }
.squelette-coche { width: 24px; height: 24px; border-radius: var(--r-micro); }
.seance-corps { min-width: 0; padding-top: 10px; }
.seance-ligne1 { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
.seance-j { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 22px; padding: 0 6px; border-radius: var(--r-micro); font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; background: var(--card-2); color: var(--ink-2); border: 1px solid var(--line); }
.seance-j--j0 { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.seance-j--loop { background: var(--card-2); color: var(--ink-3); }
.seance-titre { margin: 0; font-size: var(--t-2); font-weight: 500; line-height: var(--lh-ui); text-wrap: pretty; }
.seance-num { color: var(--ink-3); font-weight: 400; margin-right: 6px; }
.seance-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; color: var(--ink-3); font-size: var(--t-1); }
.seance-meta .puce { height: 24px; }
/* La vignette « quoi faire » : l'exercice du J, en carte creusée, son icône en encre 3. */
.seance-conseil { background: var(--card-2); border-color: transparent; color: var(--ink-2); gap: 5px; }
.seance-conseil .ico { color: var(--ink-3); }
.seance-duree { white-space: nowrap; }
.seance-retard { color: var(--warn-text); }
.seance-chrono { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); font-weight: 500; }
.seance-chrono .ico { animation: pulse-doux 1.6s var(--ease-doux) infinite; }
.seance-chrono--pause { color: var(--ink-3); } .seance-chrono--pause .ico { animation: none; }
.seance-actions { display: flex; align-items: center; gap: var(--s-1); flex-shrink: 0; }
.seance-actions .btn-sm .ico { width: 16px; height: 16px; }
/* « Pas acquis » : l'alternative à la coche, donc en retrait des deux actions de contenu (Fiche, QCM). */
.seance-nonacquis { color: var(--ink-2); }
.seance-nonacquis .ico { color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .seance-nonacquis:hover { color: var(--ink); border-color: var(--ink-3); } }
@media (max-width: 639px) {
    .seance { grid-template-columns: 44px minmax(0, 1fr); }
    .seance-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
    /* Le libellé sort de l'écran mais reste dans le nom accessible : display:none le retirerait, et le bouton
       ne serait plus nommé que par son title — invisible au lecteur d'écran comme à la commande vocale. */
    .seance-action-texte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .seance-actions .btn-sm { width: 44px; padding: 0; height: 44px; }
}

/* --- la ligne d'Aujourd'hui (opts.ouvrir) : une ligne de registre, pas un aimant posé. Plus de carte par séance —
   la carte est la liste —, le titre à 17 px, le contexte en texte séparé par des points, et une seule action,
   « Ouvrir », avant le menu. En retard, un liseré de 2 px à gauche (jamais une bordure épaisse). */
.seance.seance--ouvrir { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: 0; align-items: center;
    padding: var(--s-3) var(--s-2) var(--s-4); background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.seance--ouvrir.seance--retard { box-shadow: inset 2px 0 0 var(--warn); }
.seance--ouvrir .seance-corps { padding-top: 0; }
/* La pastille J entre dans la première ligne du titre, qui coule dessous quand il se coupe (maquette D) : un intitulé
   EDN long garde toute la largeur du corps au lieu de repartir, à chaque ligne, après la pastille. La ligne prend la
   taille du titre, pour que la pastille n'y ajoute pas de hauteur. */
.seance--ouvrir .seance-ligne1 { display: block; font-size: var(--t-3); line-height: 1.3; text-wrap: pretty; }
.seance--ouvrir .seance-j { margin-right: 8px; vertical-align: 1px; }
.seance--ouvrir .seance-titre { display: inline; font-size: var(--t-3); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; overflow-wrap: anywhere; }
.seance--ouvrir .seance-num { font-weight: 500; }
/* Contexte : des éléments insécables séparés par un point, posé AVANT chaque élément dans l'écart de 12 px ; celui
   d'un élément qui ouvre une ligne tombe hors de la boîte et est rogné : jamais de point pendu. */
.seance-meta--texte { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; overflow: hidden; color: var(--ink-2); font-size: var(--t-1); line-height: 1.55; }
.seance-meta--texte > * { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.seance-meta--texte > * + * { margin-left: -12px; }
.seance-meta--texte > * + *::before { content: "·"; width: 12px; margin-right: -5px; text-align: center; color: var(--ink-3); flex: none; }
.seance-meta--texte .seance-conseil { background: none; }
.seance-meta--texte .puce { height: 22px; }
.seance-meta--texte .ico { color: var(--ink-3); }
.seance-meta--texte .seance-retard { font-weight: 500; }
.seance-meta--texte .seance-chrono .ico { color: currentColor; }
/* Hors d'un groupe (retard, faites), la ligne garde sa matière : le repère de famille de 4 px devant le nom écrit. */
.seance-matiere::before { content: ""; width: 4px; height: 14px; border-radius: 2px; flex: none; margin-right: 2px; background: var(--mat-trait); }
.seance-ouvrir { padding: 0 var(--s-3) 0 14px; }
.seance-ouvrir.btn-secondaire .ico { color: var(--ink-2); }
/* Sur le bouton plein, l'anneau commun se noie dans le cobalt : un anneau à écart. */
.seance-ouvrir.btn-primaire:focus-visible { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
@media (max-width: 639px) {
    .seance.seance--ouvrir { grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: var(--s-2); align-items: start; padding: var(--s-3) var(--s-1) var(--s-4); }
    /* La première ligne du titre reste centrée sur la coche de 44 px. */
    .seance--ouvrir .seance-corps { padding-top: 11px; }
    /* Ouvrir au-dessus du menu, dans une colonne de 44 px : la flèche seule, le mot reste le nom accessible. */
    .seance--ouvrir .seance-actions { grid-column: 3; flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .seance-ouvrir.btn-sm::after { inset: 0; }
    .seance-ouvrir.btn-secondaire .ico { color: var(--ink); }
    /* Le ⋯ se dessine sur 32 px pour ne pas fixer la hauteur de la ligne ; sa cible reste de 44 px, étendue vers le
       bas (jamais sur « Ouvrir » au-dessus). */
    .seance--ouvrir .seance-menu { height: 32px; }
    .seance--ouvrir .seance-menu::after { content: ""; position: absolute; inset: 0 0 -12px 0; }
    /* Au téléphone la ligne se coupe souvent : un simple écart de 12 px, plus de point. */
    .seance-meta--texte > * + * { margin-left: 0; }
    .seance-meta--texte > * + *::before { content: none; }
}

/* --- la coche : une case de 24 px dans une zone de 44, le trait se dessine, l'aimant se retourne */
.seance-coche { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--r-ctrl); color: var(--on-ok); }
.seance-coche-svg { width: 24px; height: 24px; border-radius: var(--r-micro); border: 1.5px solid var(--ink-3); background: var(--card); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    transition: background var(--d-2) var(--ease-doux), border-color var(--d-2) var(--ease-doux), transform var(--d-2) var(--ease-net); }
.seance-coche-svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--d-3) var(--ease-net) 40ms; }
.seance-coche[aria-checked="true"] .seance-coche-svg { background: var(--ok); border-color: var(--ok); }
.seance-coche[aria-checked="true"] .seance-coche-svg path { stroke-dashoffset: 0; }
.seance--vient .seance-coche-svg { transform: scale(1.08); }
.seance-coche:focus-visible { box-shadow: var(--anneau-focus); }
.seance-coche:active .seance-coche-svg { transform: scale(.92); }
.seance-coche[disabled] { cursor: default; opacity: .45; }
@media (hover: hover) and (pointer: fine) { .seance-coche:hover .seance-coche-svg { border-color: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .seance-coche-svg path { transition: none; } .seance--vient .seance-coche-svg { transform: none; } }

/* ---------------------------------------------------------------- bandeaux (partiels, découpages, podcasts) */
.bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.bandeau-corps { flex: 1 1 260px; min-width: 0; }
.bandeau-corps--grille { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.bandeau-titre { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-2); font-weight: 600; }
.bandeau-titre .ico { color: var(--ink-3); }
.bandeau-compte { font-weight: 400; color: var(--ink-3); }
.bandeau-aide { margin: 2px 0 0; font-size: var(--t-1); color: var(--ink-3); }
.bandeau-erreur { color: var(--danger-text); } .bandeau-ok { color: var(--ok-text); }
.bandeau-progres { margin-top: var(--s-2); }
.bandeau-jauge { height: 4px; margin-top: 4px; }
.bandeau-pleine-largeur { flex-basis: 100%; }

.partiel { min-width: 200px; }
.partiel-ligne1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.partiel-nom { font-size: var(--t-2); font-weight: 500; }
.partiel-compte { font-size: var(--t-1); color: var(--ink-3); }
.barre-matiere { display: flex; align-items: center; gap: var(--s-2); margin-top: 6px; font-size: var(--t-1); color: var(--ink-3); }
.barre-matiere-nom { flex: 0 0 auto; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-matiere--compacte .barre-matiere-nom { max-width: 6.5rem; }
.barre-matiere-piste { flex: 1 1 60px; height: 4px; }
.barre-matiere-compte { flex: 0 0 auto; white-space: nowrap; }

/* Bilan du soir : une invitation en fin de journée, pas une alerte — ton posé, deux actions côte à côte. */
.jour-soir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--s-3); margin-top: var(--s-6); padding: var(--s-4);
    border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card-2); }
.jour-soir-texte { flex: 1 1 280px; }
.jour-soir h2 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-1);
    font-size: var(--t-3); font-weight: 600; }
.jour-soir h2 .ico { color: var(--ink-3); }
.jour-soir p { margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.jour-soir-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 560px) { .jour-soir-actions { width: 100%; } .jour-soir-actions .btn { flex: 1 1 0; } }

/* ---------------------------------------------------------------- colonne « Ta journée » */
.jour-carte { padding: var(--s-5); }
.jour-carte-titre { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-3); font-weight: 600; line-height: var(--lh-serre); letter-spacing: -.02em; }
.jour-carte-detail { margin: 2px 0 0; font-size: var(--t-1); color: var(--ink-3); }
/* Dans la colonne, les bandeaux gardés tels quels (partiels hors du jour, découpages) prennent la mise des cartes. */
.jour-suivi .bandeau { padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-1); }
@media (max-width: 639px) { .jour-suivi .bandeau { padding: var(--s-4); } }

/* La barre de temps : un segment par séance, large de ses minutes estimées. Deux zones séparées, le retard d'abord
   (comme la liste), hachuré ; le jour rangé comme ses groupes, un jour plus large entre deux spécialités. Un segment
   fait se remplit du trait de sa famille. Aucun chiffre dedans : c'est un dessin (role="img") qui récite ses données,
   et les séances s'ouvrent depuis la liste. Seule exception à la teinte de donnée unique (DESIGN.md) : la couleur y
   dit la famille de la séance, jamais un verdict, et la légende nomme chacune. */
.jour-budget { margin-top: var(--s-4); }
.jour-barre, .jour-reperes { display: flex; gap: var(--s-3); }
.jour-barre { height: 18px; }
/* Zones et repères partagent la même règle de largeur : leurs bords restent alignés, et une zone courte garde de
   quoi écrire son repère. */
.jour-zone, .jour-repere { flex: var(--min) 1 0; min-width: 28%; }
.jour-zone { display: flex; gap: 1px; }
.jour-seg { flex: var(--min) 1 0; min-width: 2px; background-color: color-mix(in srgb, var(--mat, var(--ink-3)) 40%, var(--card));
    transition: background-color var(--d-3) var(--ease-doux); }
.jour-zone .jour-seg:first-child { border-radius: 4px 0 0 4px; }
.jour-zone .jour-seg:last-child { border-radius: 0 4px 4px 0; }
.jour-zone .jour-seg:only-child { border-radius: 4px; }
.jour-seg--groupe { margin-left: 5px; }
.jour-zone--retard .jour-seg { background-color: color-mix(in srgb, var(--mat, var(--ink-3)) 18%, var(--card));
    background-image: repeating-linear-gradient(-45deg, transparent 0 4px, color-mix(in srgb, var(--mat-trait) 55%, transparent) 4px 6px); }
/* Après la règle du retard, à spécificité égale : l'état « fait » l'emporte aussi dans le retard. */
.jour-seg.jour-seg--faite { background-color: var(--mat-trait); background-image: none; }
.jour-reperes { margin-top: var(--s-2); font-size: var(--t-1); line-height: 1.4; }
/* Le nom de la zone, puis ses chiffres dessous : dans une colonne de 352 px, une zone courte n'a pas la place des deux
   sur une ligne, et les deux repères se lisent alors de la même façon. */
.jour-repere { margin: 0; display: flex; flex-direction: column; padding-top: 6px; border-top: 2px solid var(--line-2); color: var(--ink-2); }
.jour-repere b { font-weight: 600; color: var(--ink); }
.jour-repere--retard { border-top-color: var(--warn); }
.jour-repere--retard b { color: var(--warn-text); }

.jour-chiffres { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-5); margin: var(--s-4) 0 0; }
.jour-chiffre { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.jour-chiffre strong { font-size: var(--t-5); font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.jour-serie { align-self: center; align-items: center; }
.jour-serie strong { font-size: var(--t-2); letter-spacing: 0; }

/* Légende : une pastille par famille présente, nommée par ses matières du jour. */
.jour-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-4); margin: var(--s-4) 0 0; padding: var(--s-3) 0 0; list-style: none;
    border-top: 1px solid var(--line); font-size: var(--t-1); color: var(--ink-2); }
.jour-legende li { display: inline-flex; align-items: center; gap: 8px; }
.jour-pastille { width: 12px; height: 12px; border-radius: 3px; flex: none; background: color-mix(in srgb, var(--mat, var(--ink-3)) 40%, var(--card)); }
.jour-repartir { margin-top: var(--s-5); }
.jour-repartir-n { color: var(--ink-3); font-weight: 500; }

/* Podcasts du jour, en une ligne : écouter le premier prêt, l'état, « Produire ». */
.jour-podcasts { padding: var(--s-4) var(--s-5); }
.jour-podcasts-ligne { display: flex; align-items: center; gap: var(--s-3); }
.jour-podcasts-lire { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line-2);
    background: var(--card-2); color: var(--ink); cursor: pointer; transition: background var(--d-2) var(--ease-doux), transform var(--d-1) var(--ease-doux); }
.jour-podcasts-lire .ico { margin-left: 2px; }
.jour-podcasts-lire:focus-visible { border-radius: 50%; }
.jour-podcasts-lire:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .jour-podcasts-lire:hover { background: var(--track); } }
.jour-podcasts-texte { flex: 1 1 auto; min-width: 0; }
.jour-podcasts .jour-carte-titre { font-size: var(--t-2); flex-wrap: wrap; }
.jour-podcasts-produire { flex: none; }
.jour-podcasts-produire .ico { color: var(--ink-2); }
.jour-podcasts-progres, .jour-podcasts .lots-devis, .jour-podcasts-file, .jour-podcasts > .jour-carte-detail { margin-top: var(--s-3); }

@media (max-width: 639px) {
    .jour-carte, .jour-podcasts { padding: var(--s-4); }
    /* La bande de résumé : la barre pleine largeur, puis les chiffres clés ; le titre reste pour le lecteur d'écran. */
    .jour-journee .jour-carte-titre { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .jour-journee .jour-budget { margin-top: 0; }
    .jour-chiffres { margin-top: var(--s-3); }
    .jour-legende { margin-top: var(--s-3); gap: 4px var(--s-3); }
    .jour-repartir { margin-top: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) { .jour-seg { transition: none; } }
/* ============================================================================================================
   Page Calendrier : les colonnes suivantes du tableau de service. Un jour = une section fermée par un filet,
   en-tête collant sous les rails, séances-aimants (la même ligne qu'Aujourd'hui). Glissement, sélection, panneau.
   ============================================================================================================ */
.cal { display: flex; flex-direction: column; gap: var(--s-5); }
.cal--selection { padding-bottom: 80px; }
.cal-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.cal-actions .btn[aria-pressed="true"], .cal-actions .btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.cal-note { margin: 0; font-size: var(--t-1); color: var(--ink-2); }

/* --- une colonne du tableau */
.cal-jour { display: flex; flex-direction: column; gap: var(--s-2); padding: 0 4px var(--s-2); margin: 0 -4px; border-top: 1px solid var(--line); border-radius: var(--r-ctrl);
    outline: 2px dashed transparent; outline-offset: 2px;   /* le décalage sous les rails vient de scroll-padding-top sur html */
    transition: background var(--d-2) var(--ease-doux), outline-color var(--d-2) var(--ease-doux); }
.cal-jour--survol { outline-color: var(--accent-text); background: var(--accent-soft); }
.cal-jour--survol .cal-jour-charge { color: var(--ink-2); }
.cal-jour--survol .cal-jour-entete { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.cal-jour-entete { position: sticky; top: calc(var(--nav-h) + var(--outils-h)); z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); min-height: 52px; padding: var(--s-1) 0; background: var(--bg); }
.cal-jour-titre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); min-width: 0; }
.cal-jour-date { margin: 0; font-size: var(--t-4); font-weight: 600; }
.cal-jour-date:focus-visible, .cal-panneau:focus-visible { outline: none; box-shadow: var(--anneau-focus); border-radius: var(--r-micro); }
.cal-jour--auj .cal-jour-date { color: var(--accent-text); }
.cal-jour--passe .cal-jour-date { color: var(--ink-3); font-weight: 500; }
.cal-jour-charge { color: var(--ink-3); font-size: var(--t-1); }
.cal-jour .seance--faite { background: var(--card-2); }
.cal-jour-liste:empty { min-height: 44px; }

/* --- glisser une séance d'une colonne à l'autre */
.seance[draggable="true"] { cursor: grab; }
.seance[draggable="true"]:active { cursor: grabbing; }
.seance--tiree { opacity: .45; }
.seance--fantome { position: fixed; top: -9999px; left: -9999px; z-index: var(--z-toast); pointer-events: none; box-shadow: var(--shadow-2); transform: scale(.98); opacity: 1; }
.seance--part { opacity: 0; transform: translateY(-4px); transition: opacity var(--d-2) var(--ease-sortie), transform var(--d-2) var(--ease-sortie); }
.seance--posee { animation: cal-pose var(--d-3) var(--ease-doux) var(--pose-delai, 0ms) backwards; }
@keyframes cal-pose { from { opacity: 0; transform: translateY(-6px); } }

/* --- sélection multiple : la coche devient une case cobalt, la barre d'action se pose au-dessus de la barre basse */
.seance--selectionnee { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.seance-coche--selection .seance-coche-svg { border-radius: var(--r-micro); }
.seance-coche--selection[aria-checked="true"] .seance-coche-svg { background: var(--accent); border-color: var(--accent); }
.cal-selection { position: fixed; left: var(--s-3); right: var(--s-3); bottom: calc(var(--barre-basse-h) + env(safe-area-inset-bottom) + var(--s-3)); z-index: var(--z-menu);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-2); }
.cal-selection .btn { flex: 1 1 auto; }
@media (min-width: 768px) { .cal-selection { left: 50%; right: auto; transform: translateX(-50%); bottom: var(--s-5); max-width: 92vw; justify-content: center; } .cal-selection .btn { flex: 0 0 auto; } }
@media (max-width: 767px) { .cal--selection { padding-bottom: 140px; } }
/* Un toast pendant une sélection (pause depuis le menu d'un jour) monte au-dessus de la barre, il ne la couvre pas. */
body:has(.cal-selection) .toasts { bottom: calc(var(--barre-basse-h) + env(safe-area-inset-bottom) + var(--s-3) + 96px); }
@media (min-width: 768px) { body:has(.cal-selection) .toasts { bottom: calc(var(--s-5) + 64px); } }
.cal-selection-compte { font-size: var(--t-2); font-weight: 500; padding: 0 var(--s-2); }

/* --- la suite du tableau */
.cal-suite { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); padding: var(--s-3) 0 var(--s-2); border-top: 1px solid var(--line); }

/* --- panneau « Ajuster le planning » : chaque réglage expliqué en une phrase, aucun n'est une fenêtre */
.cal-panneau { padding: var(--s-4); }
@media (min-width: 768px) { .cal-panneau { padding: var(--s-5); } }
.cal-panneau-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5) var(--s-6); }
.cal-reglage { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.cal-reglage h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--t-3); font-weight: 600; }
.cal-reglage h2 .ico { color: var(--ink-3); }
.cal-reglage p { margin: 0; color: var(--ink-2); font-size: var(--t-1); line-height: var(--lh-lecture); }
.cal-reglage .btn { align-self: flex-start; }
.cal-reglage .lien-bouton { align-self: flex-start; font-size: var(--t-1); }
.cal-palier { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-1); color: var(--ink-2); }
.cal-palier .saisie { width: auto; }
.cal-palier input[type="number"] { width: 76px; text-align: center; }
.cal-palier input[type="date"] { flex: 1 1 150px; }
.cal-reglage .champ { max-width: 320px; }
.cal-panneau input[type="date"]::-webkit-calendar-picker-indicator { opacity: .75; cursor: pointer; }
.menu-form input[type="date"]::-webkit-calendar-picker-indicator { opacity: .75; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .seance--posee { animation: none; } .seance--part { transition: none; } }
/* Révisions en bloc décalées : la liste des items concernés, dans la section Sous-parties du panneau. */
.cal-blocs { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.cal-blocs p { margin: 0; }
.cal-blocs-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-1); color: var(--ink-2); line-height: var(--lh-ui); }
.cal-blocs-titre { color: var(--ink); }
.cal-blocs-ou { color: var(--ink-3); }
/* ============================================================================================================
   Page Catalogue : le registre du tableau de service. En-tête plat, barre d'outils collante (recherche, rang,
   compte), 367 lignes à deux niveaux fermées par des filets, dépliables sur place (fiche de registre en retrait).
   ============================================================================================================ */
.cat { display: flex; flex-direction: column; gap: var(--s-4); }
.cat-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-1); color: var(--ink-2); }

/* --- l'outil de fouille, collé sous les rails : la recherche reste sous la main tout le long du registre */
.cat-outils { position: sticky; top: calc(var(--nav-h) + var(--outils-h)); z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "recherche recherche" "rang compte";
    gap: var(--s-2) var(--s-3); align-items: center; padding: var(--s-2) 0 var(--s-3); background: var(--bg); border-bottom: 1px solid var(--line); }
.cat-recherche { grid-area: recherche; position: relative; }
.cat-recherche > .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.cat-recherche .saisie { padding-left: 40px; padding-right: 44px; }
.cat-effacer { position: absolute; right: 0; top: 0; }
.cat-effacer[hidden] { display: none; }
.cat-rang { grid-area: rang; min-width: 0; }
.cat-rang .select-enveloppe, .cat-rang .select { width: 100%; }
.cat-compte { grid-area: compte; margin: 0; font-size: var(--t-1); color: var(--ink-3); white-space: nowrap; }
@media (min-width: 768px) {
    .cat-outils { grid-template-columns: minmax(240px, 480px) 200px minmax(0, 1fr); grid-template-areas: "recherche rang compte"; }
    .cat-compte { justify-self: end; }
}

/* --- le registre : une ligne par item, filets, deux niveaux (titre, aimants), actions à droite */
/* Le registre n'ouvre pas sur un filet : la barre d'outils se ferme déjà par le sien, deux traits parallèles à
   20 px d'écart se lisaient comme un défaut. Chaque ligne se ferme par le sien, le dernier ferme la liste. */
.cat-liste { display: flex; flex-direction: column; }
.cat-liste > .vide { padding-top: var(--s-7); }
.cat-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titre actions" "meta actions" "detail detail"; column-gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.cat-item-toggle { grid-area: titre; display: flex; align-items: flex-start; gap: var(--s-2); min-height: 44px; margin: 0 calc(-1 * var(--s-1)); padding: 10px var(--s-1); border: 0; border-radius: var(--r-ctrl); background: none; color: var(--ink); text-align: left; cursor: pointer;
    transition: background var(--d-2) var(--ease-doux); }
.cat-caret { flex-shrink: 0; margin-top: 3px; color: var(--ink-3); transition: transform var(--d-2) var(--ease-doux); }
.cat-item--ouvert .cat-caret { transform: rotate(90deg); }
/* Les numéros sont alignés à droite : dans un registre, les unités font colonne (1, 9, 10, 367 sur le même axe). */
.cat-item-num { flex-shrink: 0; min-width: 34px; text-align: right; color: var(--ink-3); font-size: var(--t-2); }
.cat-item-titre { font-size: var(--t-2); font-weight: 500; line-height: var(--lh-ui); text-wrap: pretty; min-width: 0; }
@media (hover: hover) and (pointer: fine) { .cat-item-toggle:hover { background: var(--card-2); } .cat-item-toggle:hover .cat-caret { color: var(--ink); } }
.cat-item-toggle:active { background: var(--track); }
.cat-item-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 var(--s-1) 66px; }
.cat-item-meta .puce, .cat-partie .puce { height: 24px; }
.cat-item-meta .puce.mat, .cat-item-meta .puce.rang, .cat-item-meta .puce.densite { border-width: 1px; }
/* Le cobalt ne sert qu'à deux choses dans la liste, et l'ordre compte : « Planifié » est plein (c'est un état du
   tableau, il doit se voir en balayant la colonne), le rang or reste adouci (c'est un classement). */
.cat .puce.cat-planifie { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 600; }
.cat .puce.cat-planifie::before { background: var(--on-accent); }
/* La longueur de la fiche n'est pas l'axe de tri de la page : elle sort de la rampe pleine et se rend en contour,
   pour que la puce la plus lourde d'une ligne reste toujours celle du rang (l'axe du filtre). */
.cat-item-meta .puce.densite { background: transparent; border-color: var(--line-2); color: var(--ink-3); font-weight: 400; }
.cat-mat-sec { color: var(--ink-3); }
.cat-mat-plus { display: none; }   /* sur téléphone, les collèges secondaires se replient en « +N collèges » */
.cat-item-actions { grid-area: actions; display: flex; align-items: center; gap: var(--s-1); height: 44px; align-self: start; }
.cat-item-actions .btn-sm .ico { width: 16px; height: 16px; }
.cat-j0 { min-width: 64px; }
/* L'aimant « Planifié » qui vient de se poser (mise au planning) : entrée courte, reprise par délai négatif. */
.cat-planifie--posee { animation: cat-pose var(--d-3) var(--ease-doux) var(--pose-delai, 0ms) backwards; }
@keyframes cat-pose { from { opacity: 0; transform: translateY(-6px); } }

/* --- la fiche de registre : dépliée sur place, en retrait (fond de tableau creusé), jamais une carte dans une carte */
.cat-item-detail { grid-area: detail; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-2) var(--ease-doux); }
.cat-item--ouvert .cat-item-detail { grid-template-rows: 1fr; }
.cat-item-fiche { overflow: hidden; min-height: 0; margin: 0 0 0 66px; border-radius: var(--r-card); background: var(--bg-2); border: 1px solid transparent; transition: border-color var(--d-2) var(--ease-doux); }
.cat-item--ouvert .cat-item-fiche { margin: var(--s-1) 0 var(--s-1) 66px; border-color: var(--line); }
.cat-parties { list-style: none; margin: 0; padding: 0 var(--s-4); }
.cat-partie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.cat-partie-nom { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-2); font-weight: 500; }
.cat-partie-nom .ico { color: var(--ink-3); flex-shrink: 0; }
.cat-partie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.cat-fiche { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: 0; padding: var(--s-3) var(--s-4); font-size: var(--t-1); line-height: var(--lh-lecture); }
.cat-fiche dt { color: var(--ink-3); font-weight: 500; }
.cat-fiche dd { margin: 0; color: var(--ink-2); }
.cat-retard { color: var(--warn-text); font-weight: 500; }

/* --- squelettes : la forme des lignes, le temps de la première peinture */
.cat-item--squelette { pointer-events: none; }
.cat-item--squelette .cat-item-toggle { width: 100%; }
.cat-item--squelette .squelette-ligne { height: 16px; margin: 0; }

/* --- téléphone et écran étroit : les actions passent sous le titre, Fiche et QCM en icône seule (44 px) */
@media (max-width: 639px) {
    .cat-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "meta" "actions" "detail"; }
    .cat-item-meta { padding-left: 24px; }
    .cat-item-num { min-width: 24px; }
    .cat-mat-sec { display: none; } .cat-mat-plus { display: inline-flex; }
    .cat-item-actions { height: auto; padding: var(--s-1) 0 var(--s-1) 24px; flex-wrap: wrap; }
    /* Le libellé sort du dessin, pas de l'arbre d'accessibilité : « Fiche » et « QCM » gardent leur nom accessible
       (display:none le supprimerait et il ne resterait que le title, dont le rendu dépend des réglages). */
    .cat-action-texte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .cat-item-actions .btn-sm { position: relative; height: 44px; }
    .cat-item-actions .btn-sm:not(.cat-j0) { width: 44px; padding: 0; }
    .cat-item-fiche, .cat-item--ouvert .cat-item-fiche { margin-left: 0; }
    .cat-parties { padding: 0 var(--s-3); }
    .cat-partie-actions { width: 100%; }
    .cat-partie-actions .btn-sm { height: 44px; flex: 1 1 auto; }
    .cat-fiche { grid-template-columns: 1fr; gap: 2px var(--s-3); padding: var(--s-3); }
    .cat-fiche dd { margin-bottom: var(--s-1); }
}
@media (prefers-reduced-motion: reduce) { .cat-planifie--posee { animation: none; } .cat-item-detail, .cat-item-fiche, .cat-caret { transition: none; } }
/* ============================================================================================================
   Page Statistiques : les relevés du tableau de service. Un bandeau de lectures à chiffres tabulaires (30 px, libellé
   13 px), puis des sections plates fermées par un filet haut : partiels en rangées à verdict (anneau, aimants,
   phrase, marge), matières en barres sur piste, rythme en courbes à période, temps en donut. Jetons seulement.
   ============================================================================================================ */
.stats { display: flex; flex-direction: column; gap: var(--s-6); }
.stats-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.stats-actions .compteur { margin-left: 2px; }

/* --- le bandeau de relevés : quatre lectures séparées par un filet, jamais quatre cartes à icône */
.stats-releves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.stats-releve { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); min-width: 0; }
@media (min-width: 768px) { .stats-releve { padding: var(--s-4) var(--s-5); } }
.stats-releve + .stats-releve { border-left: 1px solid var(--line); }
.stats-releve dt { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.stats-releve dd { margin: 0; }
.stats-releve-val { font-size: var(--t-6); font-weight: 600; line-height: var(--lh-serre); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.stats-releve-sur { font-size: var(--t-3); font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.stats-releve-aide { font-size: var(--t-1); color: var(--ink-3); line-height: var(--lh-ui); }
.stats-jauge { height: 6px; margin-top: var(--s-1); }
@media (max-width: 767px) {
    .stats-releves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-releve:nth-child(2n+1) { border-left: 0; }
    .stats-releve:nth-child(n+3) { border-top: 1px solid var(--line); }
}
/* La rangée de l'entraînement : les mêmes lectures, à plat sur le fond de tableau. */
.stats-releves--plat { background: none; border: 0; box-shadow: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-releves--plat .stats-releve { padding: var(--s-2) var(--s-4) var(--s-2) 0; }
.stats-releves--plat .stats-releve + .stats-releve { padding-left: var(--s-4); }
@media (max-width: 479px) {
    .stats-releves--plat { grid-template-columns: 1fr; }
    .stats-releves--plat .stats-releve { padding: var(--s-3) 0; }
    .stats-releves--plat .stats-releve + .stats-releve { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}

/* --- sections : un filet haut, un titre 20 px, une aide 13 px ; jamais une carte dans une carte */
.stats-section { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.stats-section-entete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2) var(--s-4); }
.stats-section-entete h2 { margin: 0; font-size: var(--t-4); }
.stats-section-aide { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: var(--t-1); line-height: var(--lh-lecture); max-width: 78ch; }
.stats-note { margin: 0; color: var(--ink-2); font-size: var(--t-2); line-height: var(--lh-lecture); max-width: 60ch; }
.stats-vide { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }

/* --- un partiel : anneau, nom, aimants (J-N, verdict), phrase, marge, dernier J0 par matière */
.stats-partiels { display: flex; flex-direction: column; }
.stats-partiel { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-3) var(--s-4); padding: var(--s-4) 0; }
.stats-partiel + .stats-partiel { border-top: 1px solid var(--line); }
.stats-partiel:first-child { padding-top: 0; }
.stats-partiel-corps { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.stats-partiel-ligne1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-height: 26px; }
.stats-partiel-ligne1 h3 { margin: 0; font-size: var(--t-3); }
.stats-partiel-compte { font-size: var(--t-1); color: var(--ink-3); }
/* Le verdict : un mot sur son aimant (ok / warn / danger, jamais la couleur seule), plus SA phrase en 15 px — une
   seule. Ce qui vient ensuite (le planning, le rythme réel) est un détail, et descend en liste 13 px : la rangée se
   lit d'un coup d'œil au lieu de porter un pavé de prose grise. */
.stats-verdict-puce { font-weight: 600; }
.stats-verdict-bloc { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.stats-verdict { margin: 0; font-size: var(--t-2); color: var(--ink-2); line-height: var(--lh-lecture); max-width: 78ch; }
.stats-verdict strong { color: var(--ink); font-weight: 600; }
.stats-verdict-detail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-1); color: var(--ink-3); line-height: var(--lh-lecture); max-width: 78ch; }
.stats-verdict-detail li { position: relative; padding-left: var(--s-3); }
.stats-verdict-detail li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
.stats-verdict-detail strong { color: var(--ink-2); font-weight: 600; }
.stats-marge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-1); color: var(--ink-2); }
.stats-marge label { font-weight: 500; }
.stats-marge .saisie { width: 88px; text-align: center; -moz-appearance: textfield; }
.stats-marge .saisie::-webkit-outer-spin-button, .stats-marge .saisie::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stats-marge .saisie[disabled] { opacity: .5; cursor: not-allowed; }
.stats-marge .erreur { flex-basis: 100%; font-size: var(--t-1); color: var(--danger-text); }
.stats-marge[data-invalide] .saisie { border-color: var(--danger); }
.stats-marge[data-invalide] .saisie:focus-visible { box-shadow: 0 0 0 3px var(--danger-soft), 0 0 0 1.5px var(--danger); }
.stats-j0 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-1); color: var(--ink-2); }
.stats-j0 li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.stats-j0 .puce { height: 24px; }
.stats-j0-matiere { font-weight: 600; color: var(--ink); }
.stats-j0-quoi { display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-j0-quoi .puce { vertical-align: middle; margin-left: 2px; }
.stats-j0-num { color: var(--ink-3); }
.stats-j0-date { color: var(--accent-text); font-weight: 500; white-space: nowrap; }
/* Sur téléphone la colonne utile ne fait que ~278 px : mieux vaut deux lignes qu'une ellipse dont le texte entier
   ne serait plus atteignable que par un title, qui ne s'ouvre ni au doigt ni au clavier. */
@media (max-width: 479px) {
    .stats-j0-quoi { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* --- l'anneau : piste en --track, trait en --jauge dans tous les cas (le verdict est porté par son aimant, pas par
   la teinte du trait), rempli une fois à l'arrivée sur la page, 600 ms */
.stats-anneau { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--taille, 64px); height: var(--taille, 64px); flex-shrink: 0; }
.stats-anneau svg { display: block; transform: rotate(-90deg); }
.stats-anneau .anneau-piste { stroke: var(--track); }
.stats-anneau .anneau-val { stroke: var(--jauge); stroke-linecap: round; transition: stroke-dashoffset var(--d-donnee) var(--ease-doux); }
.stats-anneau-centre { position: absolute; font-size: var(--t-1); font-weight: 600; color: var(--ink); line-height: 1; white-space: nowrap; }
.stats-anneau-pct { color: var(--ink-3); font-weight: 500; }

/* --- barres par matière : une liste, chaque ligne se lit (nom, part), la barre n'est qu'un dessin sur piste */
.stats-barres { list-style: none; margin: 0 calc(-1 * var(--s-2)); padding: 0; display: flex; flex-direction: column; gap: 2px; }
.stats-barre { display: grid; grid-template-columns: minmax(96px, 11rem) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-height: 32px; padding: 4px var(--s-2); border-radius: var(--r-ctrl); font-size: var(--t-1); transition: background var(--d-2) var(--ease-doux); }
@media (hover: hover) and (pointer: fine) { .stats-barre:hover { background: var(--card-2); } }
.stats-barre-nom { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-barre-piste { height: 6px; }
.stats-barre-val { color: var(--ink); font-weight: 500; white-space: nowrap; text-align: right; }
.stats-barre-detail { color: var(--ink-3); font-weight: 400; }
@media (max-width: 479px) {
    .stats-barre { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
    .stats-barre-nom { grid-row: 1; grid-column: 1; }
    .stats-barre-val { grid-row: 1; grid-column: 2; }
    .stats-barre-piste { grid-row: 2; grid-column: 1 / -1; }
}
/* Le tableau derrière un « Voir en tableau » : un lien-bouton de 44 px, le chevron tourne quand il s'ouvre. */
.stats-details summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s-1); margin-left: calc(-1 * var(--s-1)); cursor: pointer; list-style: none; font-size: var(--t-1); font-weight: 500; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; border-radius: var(--r-ctrl); }
.stats-details summary::-webkit-details-marker { display: none; }
.stats-details summary .ico { color: var(--ink-3); transition: transform var(--d-2) var(--ease-doux); }
.stats-details[open] summary .ico { transform: rotate(90deg); }
.stats-details summary:focus-visible { box-shadow: var(--anneau-focus); }
@media (hover: hover) and (pointer: fine) { .stats-details summary:hover { color: var(--accent-strong); } }
.stats-table-enveloppe { overflow-x: auto; margin-top: var(--s-2); }
.stats-table { width: 100%; border-collapse: collapse; font-size: var(--t-1); }
.stats-table th, .stats-table td { padding: var(--s-2) var(--s-2); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.stats-table thead th { font-weight: 500; color: var(--ink-3); }
.stats-table tbody th { font-weight: 500; color: var(--ink); white-space: normal; }
.stats-table td { color: var(--ink-2); }
.stats-table th.num, .stats-table td.num { text-align: right; }
.stats-table td.stats-table-fort { color: var(--ink); font-weight: 500; }
/* Trois colonnes seulement (le rythme jour par jour) : bornées, elles se lisent ensemble au lieu de s'écarter
   aux deux bords de la page. */
.stats-table--etroit { max-width: 34rem; }

/* --- le rythme : période en onglets segmentés (zone pointable 44 px), deux courbes côte à côte sur desktop */
.stats-periodes [role=tab] { position: relative; }
.stats-periodes [role=tab]::after { content: ""; position: absolute; inset: -6px 0; }
.stats-periodes [role=tab]:focus-visible { box-shadow: var(--anneau-focus); border-radius: var(--r-micro); }
@media (hover: hover) and (pointer: fine) { .stats-periodes [role=tab]:not([aria-selected="true"]):hover { color: var(--ink); background: color-mix(in srgb, var(--card) 55%, transparent); } }
.stats-periodes [role=tab]:active { transform: scale(.97); }
.stats-rythme { display: flex; flex-direction: column; gap: var(--s-4); }
.stats-rythme:focus-visible { outline: none; box-shadow: var(--anneau-focus); border-radius: var(--r-card); }
.stats-rythme-resume { margin: 0; font-size: var(--t-2); color: var(--ink-2); line-height: var(--lh-lecture); max-width: 78ch; }
.stats-rythme-resume strong { color: var(--ink); font-weight: 600; }
.stats-courbes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5) var(--s-6); }
.stats-courbe { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 4px var(--s-2); min-width: 0; }
.stats-courbe-titre { grid-column: 1 / -1; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.stats-courbe-axe { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: var(--t-1); color: var(--ink-3); padding: 2px 0; min-width: 1.5rem; }
.stats-courbe-trace { grid-column: 2; grid-row: 2; position: relative; min-width: 0; }
/* Même rapport que le viewBox (420 × 120) : la mise à l'échelle reste uniforme, donc la pente d'une série est la
   même sur laptop et sur téléphone. La hauteur suit la largeur, elle n'est plus figée à 120 px. */
.stats-courbe-svg { display: block; width: 100%; height: auto; aspect-ratio: 420 / 120; }
.stats-grille { stroke: var(--track); stroke-width: 1; }
.stats-aire { fill: var(--jauge); fill-opacity: .12; }
.stats-trait { fill: none; stroke: var(--jauge); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.stats-courbe-point { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--jauge); box-shadow: 0 0 0 2px var(--bg); }
.stats-courbe-pied { grid-column: 2; grid-row: 3; display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-1); color: var(--ink-3); }
.stats-courbe-fin strong { color: var(--ink); font-weight: 600; }

/* --- le donut du temps : trois parts en jetons, la légende collée à ses valeurs, jamais à l'autre bout de la carte */
.stats-donut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.stats-donut-svg { display: block; transform: rotate(-90deg); flex-shrink: 0; }
.stats-donut-part { transition: opacity var(--d-2) var(--ease-doux); }
@media (hover: hover) and (pointer: fine) { .stats-donut-svg:hover .stats-donut-part { opacity: .45; } .stats-donut-svg .stats-donut-part:hover { opacity: 1; } }
.stats-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; flex: 1 1 220px; max-width: 360px; }
.stats-legende li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-1); min-height: 24px; }
.stats-legende-point { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.stats-legende-nom { color: var(--ink-2); flex: 1 1 auto; }
.stats-legende-val { color: var(--ink); font-weight: 500; white-space: nowrap; }
.stats-legende-pct { color: var(--ink-3); font-weight: 400; }

@media (prefers-reduced-motion: reduce) { .stats-anneau .anneau-val, .stats-jauge-val, .stats-details summary .ico { transition: none; } }
/* ============================================================================================================
   Page Accueil (connecté) : la porte du tableau de service. En-tête plat (phrase d'état, résumé, une action
   pleine), séances-aimants à faire maintenant, la suite réelle d'un item, puis le rythme (série, prochain partiel).
   La séquence J (.seqj) est partagée avec l'écran de connexion (src/ui/components/accueil-sequence.js).
   ============================================================================================================ */
.acc { display: flex; flex-direction: column; gap: var(--s-6); }
.acc-entete { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4) var(--s-6); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.acc-entete-texte { flex: 1 1 320px; min-width: 0; }
.acc-etat { margin: 0; font-size: var(--t-6); font-weight: 600; max-width: 22ch; }
.acc-resume { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--t-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.acc-retard { color: var(--warn-text); font-weight: 500; }
.acc-flamme { color: var(--warn); }
.acc-action { flex: 0 0 auto; }
@media (max-width: 639px) { .acc-action { flex-basis: 100%; width: 100%; } }
/* Le focus sur un bouton déjà cobalt : l'anneau commun (voile doux + trait cobalt) se noie dans le plein. Un anneau
   à écart — deux pixels de la surface qui porte le bouton, puis le cobalt — le détache quel que soit le fond. */
.acc-action:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.acc-vide-actions .btn-primaire:focus-visible { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }

/* --- sections */
.acc-section { display: flex; flex-direction: column; gap: var(--s-3); }
.acc-section > h2, .acc-section-entete h2 { margin: 0; font-size: var(--t-4); }
.acc-section-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.acc-section-compte { color: var(--ink-3); font-size: var(--t-1); }
.acc-section-lien { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-1); font-weight: 500; color: var(--accent-text); text-decoration: none; }
.acc-section-lien::after { content: ""; position: absolute; inset: -12px 0; }
@media (hover: hover) and (pointer: fine) { .acc-section-lien:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* Les vides de l'accueil ont tous la même matière (carte à filet) : celui de la section prend la place des lignes
   de séance, qui sont elles-mêmes des cartes. Resserré, pour ne pas ouvrir un trou sous un titre. */
.acc-section .vide { padding: var(--s-4); }
.acc-section .vide h3 { font-size: var(--t-3); color: var(--ink); margin: 0; }
.acc-vide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-2); }
/* Dans un bouton plein, l'icône suit la couleur du bouton : la règle générale des vides la met en encre 3. */
.acc-vide-actions .btn .ico { color: inherit; }
.acc--vide .vide .btn { margin-top: 0; }

/* --- la suite réelle d'un item lu aujourd'hui */
.acc-suite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-2) 0 0; font-size: var(--t-1); color: var(--ink-2); }
.acc-suite-mot b { font-weight: 600; color: var(--ink); }

/* --- le rythme : deux blocs sur un filet, jamais deux cartes égales */
.acc-rythme { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5) var(--s-7); }
@media (min-width: 768px) { .acc-rythme { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acc-bloc { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); min-width: 0; }
.acc-bloc-titre { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--t-3); }
.acc-bloc-titre .ico { color: var(--ink-3); }
.acc-bloc-mot { margin: 0; font-size: var(--t-2); color: var(--ink-2); line-height: var(--lh-lecture); }
.acc-bloc-mot b { font-weight: 600; color: var(--ink); }
.acc-verdict--ok { color: var(--ok-text); }
.acc-verdict--warn { color: var(--warn-text); }
.acc-bloc .lien-bouton { font-size: var(--t-1); }

/* La série : sept jours, chacun sa lettre et son point ; le mot est à côté et dans le titre. */
.acc-serie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1); max-width: 320px; }
.acc-jour { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; padding: 4px 0; border-radius: var(--r-ctrl); }
.acc-jour-lettre { font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }
.acc-jour--auj .acc-jour-lettre { color: var(--accent-text); font-weight: 600; }
.acc-jour-point { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: transparent; }
.acc-jour--fait .acc-jour-point { background: var(--ok); border-color: var(--ok); }
.acc-jour--manque .acc-jour-point { background: var(--warn); border-color: var(--warn); }
.acc-jour--en-cours .acc-jour-point { border-color: var(--accent); background: var(--accent-soft); }
.acc-jour--vide .acc-jour-point { border-color: var(--line-2); }

/* Le prochain partiel : nom, aimant J-n, date, jauge fine, verdict en une phrase. */
.acc-partiel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; }
.acc-partiel-nom { font-size: var(--t-2); font-weight: 600; }
.acc-partiel-date { font-size: var(--t-1); color: var(--ink-3); }
.acc-jauge { display: flex; align-items: center; gap: var(--s-3); }
.acc-jauge-piste { flex: 1 1 120px; height: 6px; max-width: 320px; }
.acc-jauge-texte { font-size: var(--t-1); color: var(--ink-2); white-space: nowrap; }

/* ---------------------------------------------------------------- la séquence J (connexion et accueil) */
.seqj { list-style: none; margin: 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-3) var(--s-2); }
@media (min-width: 768px) { .seqj { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.seqj-pas { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
/* Sur téléphone, un pas par ligne (J, date, exercice alignés en colonnes) : la séquence se lit de haut en bas, sans pas orphelin. */
@media (max-width: 639px) {
    .seqj:not(.seqj--compacte) { display: flex; flex-direction: column; gap: var(--s-2); }
    .seqj:not(.seqj--compacte) .seqj-pas { flex-direction: row; align-items: center; gap: var(--s-3); }
    .seqj:not(.seqj--compacte) .seance-j { min-width: 40px; }
    .seqj:not(.seqj--compacte) .seqj-date { flex: 0 0 100px; }
    .seqj:not(.seqj--compacte) .seqj-quoi { flex: 1 1 auto; min-width: 0; }
}
.seqj-date { font-size: var(--t-1); font-weight: 500; color: var(--ink); white-space: nowrap; }
.seqj-quoi { font-size: var(--t-1); color: var(--ink-3); line-height: var(--lh-ui); }
.seqj-pas--faite .seance-j { color: var(--ink-3); }
.seqj-pas--faite .seqj-date { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.seqj--compacte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); padding: 0; border: 0; }
.seqj--compacte .seqj-pas { flex-direction: row; align-items: center; gap: 6px; }
.seqj--compacte .seance-j { min-width: 30px; height: 20px; }
/* ============================================================================================================
   Écran de connexion : la porte du tableau de service, sans les outils de la coquille. Peu d'éléments, beaucoup
   d'air : le titre et une phrase, la carte de connexion, la suite des J en une bande, six fonctions en une ligne.
   Ordinateur : texte à gauche, connexion à droite. Téléphone : titre, connexion, puis le reste. Jetons seulement.
   ============================================================================================================ */
.cx { min-height: 100dvh; display: flex; flex-direction: column; }
.cx-main { flex: 1 0 auto; width: 100%; max-width: 1080px; margin: var(--s-6) auto 0; padding: 0 var(--s-4); box-sizing: border-box;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-content: start; }
@media (min-width: 768px) { .cx-main { margin-top: var(--s-8); padding: 0 var(--s-5); } }
@media (min-width: 1024px) {
    .cx-main { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "intro carte" "plus carte"; column-gap: var(--s-8); row-gap: var(--s-7); align-items: start; }
    .cx-intro { grid-area: intro; } .cx-carte { grid-area: carte; } .cx-plus { grid-area: plus; }
}

/* --- le titre et sa phrase */
.cx-intro { display: flex; flex-direction: column; gap: var(--s-4); }
.cx-titre { margin: 0; font-size: var(--t-6); line-height: var(--lh-serre); letter-spacing: -.03em; text-wrap: balance; max-width: 14ch; }
@media (min-width: 768px) { .cx-titre { font-size: var(--t-7); } }
.cx-these { margin: 0; font-size: var(--t-3); line-height: var(--lh-lecture); color: var(--ink-2); max-width: 42ch; text-wrap: pretty; }

/* --- la suite des J : sept pastilles sur un trait, celle d'aujourd'hui en cobalt */
.cx-plus { display: flex; flex-direction: column; gap: var(--s-6); }
.cx-js { position: relative; list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: var(--s-1); max-width: 520px; }
.cx-js::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; height: 2px; margin-top: -1px; background: var(--line-2); transform-origin: left center; }
.cx-js .seance-j { position: relative; min-width: 40px; height: 28px; justify-content: center; font-size: var(--t-1); background: var(--card); }
.cx-js .seance-j--j0 { background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
@media (prefers-reduced-motion: no-preference) {
    .cx-js::before { animation: cx-piste 560ms var(--ease-doux) both; }
    .cx-js .seance-j { animation: cx-pas 320ms var(--ease-doux) both; }
    .cx-js .seance-j:nth-child(1) { animation-delay: 60ms; } .cx-js .seance-j:nth-child(2) { animation-delay: 120ms; }
    .cx-js .seance-j:nth-child(3) { animation-delay: 180ms; } .cx-js .seance-j:nth-child(4) { animation-delay: 240ms; }
    .cx-js .seance-j:nth-child(5) { animation-delay: 300ms; } .cx-js .seance-j:nth-child(6) { animation-delay: 360ms; }
    .cx-js .seance-j:nth-child(7) { animation-delay: 420ms; }
}
@keyframes cx-piste { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cx-pas { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --- six fonctions, une ligne chacune, en une seule colonne : deux colonnes étroites coupaient chaque phrase */
.cx-fonctions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); max-width: 60ch; }
.cx-fonctions li { display: flex; align-items: flex-start; gap: var(--s-3); }
.cx-fonctions .ico { flex-shrink: 0; margin-top: 2px; color: var(--ink-3); }
.cx-fonctions p { margin: 0; font-size: var(--t-2); line-height: var(--lh-lecture); color: var(--ink-2); text-wrap: pretty; }
.cx-fonctions strong { font-weight: 600; color: var(--ink); }

/* --- la carte de connexion */
.cx-carte { padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); box-shadow: var(--shadow-2); }
@media (min-width: 768px) { .cx-carte { padding: var(--s-5); } }
.cx-form { display: flex; flex-direction: column; gap: var(--s-4); }
.cx-form h2 { margin: 0; font-size: var(--t-4); }
.cx-form .champ .erreur { display: flex; align-items: flex-start; gap: 6px; margin: 0; line-height: var(--lh-ui); }
.cx-form .champ .erreur .ico { flex-shrink: 0; margin-top: 2px; }
.cx-form .champ .aide { margin: 0; }
.cx-form .btn-pleine { margin-top: var(--s-1); }
/* L'adresse retenue sur cet appareil, et la porte pour l'oublier (un ordinateur partagé). */
.cx-retenue { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: var(--t-1); color: var(--ink-3); }
.cx-retenue .lien-bouton { font-size: inherit; }
/* Majuscules verrouillées : sous le mot de passe, une icône et le mot, en orange de mise en garde. */
.cx-maj { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-1); font-weight: 500; color: var(--warn-text); }
/* Vide, elle reste rendue (une région annoncée qu'on masque en display: none n'est souvent pas relue en se
   remplissant) mais ne prend aucune place. */
.cx-maj:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Le focus sur le bouton plein : l'anneau commun (voile doux + trait cobalt) se noie dans le cobalt du bouton.
   Un anneau à écart — deux pixels de la carte, puis le cobalt — le détache. */
.cx-form .btn-primaire:focus-visible { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
/* Pendant l'envoi, le bouton garde son nom : l'anneau d'attente passe à gauche (blanc sur cobalt) au lieu de
   recouvrir un libellé rendu transparent — un contrôle nomme son action, y compris en chargement. */
.cx-form .btn-primaire[aria-busy="true"] { color: var(--on-accent); }
.cx-form .btn-primaire[aria-busy="true"]::after { color: var(--on-accent); left: var(--s-4); top: calc(50% - 8px); }
/* L'erreur qui ne vise aucun champ (serveur injoignable) : en tête du formulaire, icône et mot, jamais la couleur seule. */
.cx-alerte { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-3); border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: var(--r-ctrl); background: var(--danger-soft); color: var(--danger-text); font-size: var(--t-1); font-weight: 500; line-height: var(--lh-ui); }
.cx-alerte .ico { flex-shrink: 0; }
/* Le mot de passe : le bouton afficher/masquer vit dans le champ, à 44 px, le texte ne passe pas dessous. */
.cx-mdp { position: relative; }
.cx-mdp input { padding-right: 48px; }
.cx-oeil { position: absolute; right: 0; top: 0; color: var(--ink-3); }
.cx-oeil[aria-pressed="true"] { color: var(--ink); }
.cx-liens { margin: 0; font-size: var(--t-1); }
.cx-liens a, .cx-alt a, .cx-consentement a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.cx-alt { margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-2); color: var(--ink-2); }
.cx-alt .lien-bouton { font-size: inherit; }
.cx-consentement { margin: 0; font-size: var(--t-1); color: var(--ink-3); line-height: var(--lh-lecture); }
@media (hover: hover) and (pointer: fine) { .cx-liens a:hover, .cx-alt a:hover, .cx-consentement a:hover, .cx-alt .lien-bouton:hover, .cx-retenue .lien-bouton:hover { color: var(--accent-strong); } }

/* --- le pied, sans coquille */
.cx-pied { margin-top: var(--s-7); }
/* Au téléphone, la mention suit les liens à gauche au lieu de pendre à droite (la règle partagée du pied l'y pousse). */
@media (max-width: 639px) { .cx-pied .droite { margin-left: 0; flex-basis: 100%; } }
/* ============================================================================================================
   Page LCA (lot B9) : l'établi de la lecture critique. Une barre de quatre postes collée sous les rails, puis,
   selon le poste, un registre de sujets en lignes denses, la colonne de lecture du cours, ou les treize chapitres.
   Aucune couleur figée : jetons du système seulement, et un seul cobalt (onglet actif, action pleine, focus).
   ============================================================================================================ */
.lca { display: flex; flex-direction: column; gap: var(--s-4); }
.lca-panneau { display: flex; flex-direction: column; gap: var(--s-4); }
.lca-panneau:focus { outline: none; }

/* --- la barre des quatre postes : la grammaire de l'onglet du rail, une marche plus bas.
   Le composant partagé `.onglet` est cloué à la hauteur du rail (--nav-h) et ne se réemploie pas ici ; cette
   classe de page en reprend le dessin exactement (encre 2 au repos, encre + trait cobalt de 2 px à l'actif). */
.lca-onglets { position: sticky; top: calc(var(--nav-h) + var(--outils-h)); z-index: 2; display: flex; gap: var(--s-1);
    margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4); background: var(--bg); border-bottom: 1px solid var(--line);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.lca-onglets::-webkit-scrollbar { display: none; }
.lca-onglet { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 44px; padding: 0 var(--s-3);
    border: 0; background: none; color: var(--ink-2); font-size: var(--t-2); font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: color var(--d-2) var(--ease-doux); }
/* Le rayon de 2 px du trait actif n'est pas de l'échelle des formes : c'est celui de `.onglet::after` du rail,
   recopié tel quel pour que les deux traits soient le même objet (le détecteur le signale en avis, c'est voulu). */
.lca-onglet::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -1px; height: 2px; border-radius: 2px 2px 0 0;
    background: var(--accent); transform: scaleX(0); transition: transform var(--d-2) var(--ease-doux); }
.lca-onglet[aria-selected="true"] { color: var(--ink); }
.lca-onglet[aria-selected="true"]::after { transform: scaleX(1); }
.lca-onglet:focus-visible { box-shadow: inset var(--anneau-focus); border-radius: var(--r-ctrl); }
.lca-onglet-compte { color: var(--ink-3); font-size: var(--t-1); font-weight: 400; }
.lca-onglet[aria-selected="true"] .lca-onglet-compte { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .lca-onglet:hover { color: var(--ink); } }

/* Les deux actions de la page, au bas de l'en-tête : elles valent depuis les quatre postes. */
.lca-entete-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* --- la marche à suivre : quatre étapes numérotées, parce que l'ordre est l'information */
.lca-marche { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.lca-marche-titre { margin: 0; font-size: var(--t-1); font-weight: 600; color: var(--ink); }
.lca-marche-etapes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; list-style: none; }
.lca-marche-etape { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-1); color: var(--ink-2); }
.lca-marche-rang { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--r-micro);
    background: var(--card-2); border: 1px solid var(--line); color: var(--ink-3); font-size: var(--t-1); font-weight: 600; flex-shrink: 0; }

/* --- le panneau du livre : déplié en place, jamais une fenêtre. Largeur de feuille de réglages, pas de registre. */
.lca-livre { max-width: 720px; }
.lca-livre[hidden] { display: none; }
.lca-livre .carte-corps { display: flex; flex-direction: column; gap: var(--s-3); }
.lca-livre-titre { margin: 0; font-size: var(--t-4); }
.lca-livre-aide, .lca-bloc-aide { margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); max-width: 68ch; }
.lca-livre-groupe { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; border: 0; }
.lca-livre-groupe legend { padding: 0 0 var(--s-1); font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.lca-option { display: flex; align-items: flex-start; gap: var(--s-3); min-height: 44px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-2);
    border-radius: var(--r-ctrl); background: var(--card); cursor: pointer; transition: background var(--d-2) var(--ease-doux), border-color var(--d-2) var(--ease-doux); }
.lca-option input { margin: 3px 0 0; width: 18px; height: 18px; flex-shrink: 0; }
.lca-option--on { border-color: var(--accent); background: var(--accent-soft); }
.lca-option:has(input:focus-visible) { box-shadow: var(--anneau-focus); }
.lca-option-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lca-option-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); font-size: var(--t-2); font-weight: 500; color: var(--ink); }
.lca-option-compte { font-size: var(--t-1); font-weight: 400; color: var(--ink-3); }
.lca-option-detail { font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .lca-option:hover { background: var(--card-2); } .lca-option--on:hover { background: var(--accent-soft); } }
.lca-livre-densite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.lca-champ-label { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.lca-livre-pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.lca-livre-resume { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.lca-livre-actions { display: flex; gap: var(--s-2); margin-left: auto; }

/* --- l'outil de fouille */
.lca-outils { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--s-3); align-items: center; }
.lca-recherche { position: relative; }
.lca-recherche > .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
/* Le champ est celui du système (.saisie : fond carte, filet appuyé, encre) — il se lit dans les deux modes. */
.lca-recherche .saisie { padding-left: 40px; padding-right: 44px; }
.lca-effacer { position: absolute; right: 0; top: 0; }
.lca-effacer[hidden] { display: none; }
.lca-compte { margin: 0; font-size: var(--t-1); color: var(--ink-3); white-space: nowrap; }
@media (min-width: 768px) {
    .lca-outils { grid-template-columns: minmax(240px, 480px) minmax(0, 1fr); }
    .lca-compte { justify-self: end; }
}

/* --- le registre des sujets : une ligne par sujet, filets, deux niveaux, actions à droite */
.lca-liste { display: flex; flex-direction: column; }
.lca-rangs { display: flex; flex-direction: column; }
.lca-sujet { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tete actions" "meta actions";
    column-gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.lca-sujet-tete { grid-area: tete; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); min-width: 0; }
.lca-sujet-num { flex-shrink: 0; min-width: 40px; color: var(--ink-3); font-size: var(--t-2); }
.lca-sujet-nom { font-size: var(--t-2); font-weight: 500; line-height: var(--lh-ui); min-width: 0; }
.lca-sujet-auteurs { flex: 1 1 100%; padding-left: 48px; font-size: var(--t-1); color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lca-sujet-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: var(--s-2) 0 0 48px; }
.lca-sujet-meta .puce { height: 24px; }
/* Le genre est l'axe de lecture de la colonne : il porte le seul aplat un peu appuyé de la ligne. */
.lca-genre { background-color: color-mix(in srgb, var(--ink-3) 14%, var(--card)); color: var(--ink); }
.lca-theme, .lca-revue { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.lca-sujet-actions { grid-area: actions; display: flex; align-items: center; gap: var(--s-1); align-self: start; }
.lca-sujet-actions .btn-sm .ico { width: 16px; height: 16px; }
.lca-faire { white-space: nowrap; }
.lca-pied { margin: var(--s-3) 0 0; font-size: var(--t-1); color: var(--ink-3); }
.lca-sujet--squelette { pointer-events: none; }
.lca-sujet--squelette .squelette-ligne { height: 16px; margin: 0; }
/* La manœuvre de dépôt est un aparté pour l'administrateur : elle se range dans un encart aligné à gauche, pour
   ne pas se lire comme la suite du message adressé à l'étudiant (et pour que les chemins restent lisibles). */
.vide .lca-vide-admin, .lca-vide-admin { max-width: 72ch; margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--bg-2);
    font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-3); text-align: left; }
.lca-vide-admin code { font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-2); }

/* --- les blocs du cours */
.lca-bloc .carte-corps { display: flex; flex-direction: column; gap: var(--s-3); }
.lca-bloc h2 { margin: 0; font-size: var(--t-4); }
.lca-bloc-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.lca-bloc-note { padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--bg-2); max-width: none; }
/* L'adresse du dépôt, dans une note déjà encadrée : un bloc séparé par un filet, sans second cadre. En <span>
   dans la même phrase, sa marge et son cadre ne poussaient pas la ligne — le texte de l'étudiant et celui de
   l'administrateur se superposaient (vu au contrôle des captures, quatre fois sur quatre). */
.lca-note-admin { max-width: 72ch; margin: var(--s-2) 0 0; padding: var(--s-2) 0 0; border-top: 1px solid var(--line);
    font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-3); }
.lca-note-admin code { font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-2); }
.lca-bloc-pied { margin: 0; padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-3); max-width: 68ch; }
.lca-erreur { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; font-size: var(--t-2); line-height: var(--lh-lecture); color: var(--danger-text); }
.lca-erreur .ico { flex-shrink: 0; margin-top: 2px; color: var(--danger); }
.lca-erreur-texte { color: var(--danger-text); }

.lca-docs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lca-doc { max-width: 100%; }
.lca-doc-poids { color: var(--ink-3); font-weight: 400; }

/* --- la colonne de lecture : sommaire à gauche, visionneuse à droite */
.lca-lecture { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
@media (min-width: 1024px) { .lca-lecture--sommaire { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--s-4); } }
.lca-vue { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.lca-vue-cadre { width: 100%; height: min(78vh, 900px); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.lca-vue-image { width: 100%; border: 1px solid var(--line); border-radius: var(--r-card); }
.lca-vue-pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-1); color: var(--ink-3); }
.lca-plein-ecran { margin-left: auto; }

.lca-sommaire { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-2); padding: var(--s-3); }
@media (min-width: 1024px) { .lca-sommaire { position: sticky; top: calc(var(--nav-h) + var(--outils-h) + 56px); max-height: 72vh; overflow-y: auto; } }
.lca-sommaire-titre { margin: 0 0 var(--s-2); font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.lca-sommaire-liste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.lca-sommaire-ligne { display: flex; align-items: flex-start; gap: var(--s-1); }
.lca-sommaire-lien { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: var(--s-2); min-height: 32px; padding: 6px var(--s-2);
    border: 0; border-radius: var(--r-ctrl); background: none; color: var(--ink-2); font-size: var(--t-1); text-align: left; cursor: pointer;
    transition: background var(--d-2) var(--ease-doux), color var(--d-2) var(--ease-doux); }
.lca-sommaire-texte { flex: 1 1 auto; min-width: 0; }
.lca-sommaire-page { flex-shrink: 0; color: var(--ink-3); }
.lca-niveau-1 { margin-top: var(--s-2); }
.lca-niveau-1 .lca-sommaire-lien { color: var(--ink); font-weight: 600; }
.lca-niveau-2 .lca-sommaire-lien { color: var(--ink); font-weight: 500; padding-left: var(--s-3); }
.lca-niveau-3 .lca-sommaire-lien { padding-left: var(--s-5); }
.lca-sommaire-plier { width: 32px; height: 32px; margin-top: 2px; flex-shrink: 0; }
.lca-sommaire-plier .ico { width: 16px; height: 16px; }
/* Le bouton de repli est visuellement à 32 px : sa zone pointable reste de 44 px. */
.lca-sommaire-plier::after { content: ""; position: absolute; inset: -6px; }
.lca-sommaire-plier { position: relative; }
@media (hover: hover) and (pointer: fine) { .lca-sommaire-lien:hover { background: var(--card); color: var(--ink); } }
.lca-sommaire-lien:active { background: var(--track); }

/* --- le cours de LCA Pro */
.lca-groupe { display: flex; flex-direction: column; gap: var(--s-2); }
.lca-groupe-titre { display: flex; align-items: baseline; gap: var(--s-2); margin: 0; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.lca-groupe-titre .num { color: var(--ink-3); font-weight: 400; }
.lca-groupe-liens { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lca-groupe-liens .btn { max-width: 100%; }
.lca-lien-rang { color: var(--ink-3); }
.lca-lien-detail { color: var(--ink-3); font-weight: 400; }

/* --- le mémo : cinq blocs dépliables sur place */
.lca-memo-blocs { display: flex; flex-direction: column; gap: var(--s-2); }
.lca-memo-bloc { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); overflow: hidden; }
.lca-memo-tete { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 56px; padding: var(--s-2) var(--s-3);
    border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: background var(--d-2) var(--ease-doux); }
.lca-memo-ico { color: var(--ink-3); flex-shrink: 0; }
.lca-memo-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lca-memo-nom { font-size: var(--t-2); font-weight: 500; }
.lca-memo-resume { font-size: var(--t-1); color: var(--ink-3); line-height: var(--lh-ui); }
.lca-memo-caret { color: var(--ink-3); flex-shrink: 0; transition: transform var(--d-2) var(--ease-doux); }
.lca-memo-bloc--ouvert .lca-memo-caret { transform: rotate(90deg); }
.lca-memo-bloc--ouvert .lca-memo-ico { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .lca-memo-tete:hover { background: var(--card-2); } }
.lca-memo-tete:active { background: var(--track); }
.lca-memo-corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-2) var(--ease-doux); }
.lca-memo-bloc--ouvert .lca-memo-corps { grid-template-rows: 1fr; }
.lca-memo-liste { overflow: hidden; min-height: 0; margin: 0; }
.lca-memo-bloc--ouvert .lca-memo-liste { padding: 0 var(--s-3) var(--s-3) 47px; }
.lca-memo-liste dt { font-size: var(--t-1); font-weight: 600; color: var(--ink); }
.lca-memo-liste dd { margin: 2px 0 var(--s-3); font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); max-width: 68ch; }
.lca-memo-liste dd:last-child { margin-bottom: 0; }

/* --- les treize chapitres */
.lca-chapitres { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.lca-chapitre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-1) 0; border-bottom: 1px solid var(--line); }
.lca-chapitre:last-child { border-bottom: 0; }
.lca-chapitre-nom { flex: 1 1 260px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); min-height: 44px;
    margin: 0 calc(-1 * var(--s-2)); padding: var(--s-2); border: 0; border-radius: var(--r-ctrl); background: none; color: var(--ink); text-align: left; cursor: pointer;
    transition: background var(--d-2) var(--ease-doux); }
.lca-chapitre-nom[disabled] { cursor: default; opacity: .7; }
.lca-chapitre-section { flex-shrink: 0; min-width: 28px; color: var(--ink-3); font-size: var(--t-1); font-weight: 500; }
.lca-chapitre-titre { font-size: var(--t-2); font-weight: 500; }
.lca-chapitre-detail { font-size: var(--t-1); color: var(--ink-3); }
.lca-chapitre-action { flex-shrink: 0; }
.lca-chapitre-min { color: var(--ink-3); font-weight: 400; }
/* L'absence d'épisode n'est pas un état à signaler douze fois : c'est du texte calme, pas un aimant. */
.lca-chapitre-absent { flex-shrink: 0; padding: 0 var(--s-2); font-size: var(--t-1); color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .lca-chapitre-nom:not([disabled]):hover { background: var(--card-2); } }

/* --- téléphone et écran étroit : les actions passent sous les aimants, les libellés d'icône sortent du dessin */
@media (max-width: 767px) {
    /* Les quatre postes tiennent dans 390 px au pas du libellé : sinon « Podcasts » se coupe au bord. */
    .lca-onglet { font-size: var(--t-1); padding: 0 var(--s-2); }
    .lca-onglet::after { left: var(--s-2); right: var(--s-2); }
    .lca-entete-actions { width: 100%; }
    .lca-entete-actions .btn { flex: 1 1 auto; height: 44px; }
    /* Une étape par ligne, sous son titre : la liste ordonnée se lit comme telle au lieu de se replier en escalier. */
    .lca-marche { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
    .lca-marche-etapes { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
    .lca-livre-actions { margin-left: 0; width: 100%; }
    .lca-livre-actions .btn { flex: 1 1 auto; height: 44px; }
    .lca-sujet { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "meta" "actions"; }
    .lca-sujet-num { min-width: 0; }
    .lca-sujet-auteurs, .lca-sujet-meta { padding-left: 0; }
    .lca-sujet-actions { padding-top: var(--s-2); flex-wrap: wrap; }
    /* Le libellé sort du dessin, pas de l'arbre d'accessibilité : « L'article » et « Corrections » gardent leur nom. */
    .lca-action-texte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .lca-sujet-actions .btn-sm { position: relative; height: 44px; }
    .lca-sujet-actions .btn-sm:not(.lca-faire) { width: 44px; padding: 0; }
    .lca-vue-cadre { height: min(70vh, 640px); }
    /* Le sommaire passe au-dessus de la visionneuse : borné, sinon dix-sept entrées repoussent le document. */
    .lca-sommaire { max-height: 42vh; overflow-y: auto; }
    .lca-memo-bloc--ouvert .lca-memo-liste { padding-left: var(--s-3); }
    .lca-chapitre-action { width: 100%; height: 44px; }
    .lca-chapitre-absent { width: 100%; justify-content: center; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .lca-memo-corps, .lca-memo-caret, .lca-onglet, .lca-onglet::after { transition: none; }
}
/* ============================================================================================================
   Page Mon compte (lot B10) — et le registre (.reg), matière commune aux trois surfaces du lot (Compte,
   Abonnement, pages publiques) : une colonne de lignes fermées par un filet, libellé à gauche, valeur à droite.
   Il est défini ici parce que compte.css est la première des trois feuilles concaténées (voir Makefile, $(STYLES)).
   Jetons de src/styles/tokens.css seulement.
   ============================================================================================================ */

/* ---------------------------------------------------------------- le registre, partagé par le lot */
.reg { margin: 0; padding: 0; display: flex; flex-direction: column; }
.reg-ligne { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1) var(--s-5); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.reg-ligne:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .reg-ligne { grid-template-columns: 184px minmax(0, 1fr); padding: var(--s-4) 0; } }
.reg-serre .reg-ligne { padding: var(--s-3) 0; }
.reg-ligne > dt { margin: 0; font-size: var(--t-1); font-weight: 500; color: var(--ink-3); line-height: var(--lh-ui); }
.reg-ligne > dd { margin: 0; min-width: 0; font-size: var(--t-2); color: var(--ink); line-height: var(--lh-ui); }
@media (min-width: 640px) { .reg-ligne > dt { padding-top: 2px; } }

/* La valeur composée : un aimant, un chiffre, une note, un lien — sur une ligne qui se replie. */
.reg-valeur { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); min-width: 0; }
.reg-valeur > .ico { color: var(--ink-3); }
.reg-fort { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.reg-note { font-size: var(--t-1); color: var(--ink-3); }
/* La prose d'une ligne : elle explique, elle ne se compare pas — largeur de lecture, encre 2. */
.reg-texte { display: block; flex: 1 0 100%; font-size: var(--t-1); color: var(--ink-2); line-height: var(--lh-lecture); max-width: 68ch; }
/* Le mono ne descend pas sous le plancher : .92em d'un parent à 13 px faisait 12 px. La compensation
   optique du monospace est laissée au jeton --font-mono, pas au corps. */
.reg-texte code, .reg code { font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink); background: var(--card-2); border-radius: var(--r-micro); padding: 1px 5px; }
.reg-lien { position: relative; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; border-radius: var(--r-micro); }
/* Une zone pointable de 44 px autour d'un lien de 21 px, sans changer la mise en page (comme .lien-bouton). */
.reg-lien::after { content: ""; position: absolute; inset: -12px -4px; }
.reg-lien:focus-visible { box-shadow: var(--anneau-focus); }
.reg-lien:active { opacity: .7; }
@media (hover: hover) and (pointer: fine) { .reg-lien:hover { text-decoration-thickness: 2px; } }

/* Une liste d'items : l'icône tient la première colonne, le titre et sa phrase la seconde. */
.reg-liste { list-style: none; }
.reg-ligne--item { grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: var(--s-1) var(--s-3); }
@media (min-width: 640px) { .reg-ligne--item { grid-template-columns: 28px minmax(0, 1fr); } }
.reg-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); padding-top: 1px; }
.reg-item-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reg-item-corps .reg-texte { flex: none; }

/* L'erreur qui ne vise aucun champ, et le succès : icône et mot, jamais la couleur seule. */
.reg-alerte, .reg-succes { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-3);
    border-radius: var(--r-ctrl); font-size: var(--t-1); font-weight: 500; line-height: var(--lh-ui); }
.reg-alerte { border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); background: var(--danger-soft); color: var(--danger-text); }
.reg-succes { border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line)); background: var(--ok-soft); color: var(--ok-text); }
.reg-alerte .ico, .reg-succes .ico { flex-shrink: 0; margin-top: 1px; }

/* ---------------------------------------------------------------- la page */
.cpt { display: flex; flex-direction: column; gap: var(--s-6); }
.cpt-resume { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--t-3); line-height: var(--lh-lecture); max-width: 60ch; }
.cpt-section { display: flex; flex-direction: column; gap: var(--s-3); }
.cpt-section h2 { margin: 0; font-size: var(--t-5); }

.cpt-carte { display: flex; flex-direction: column; gap: var(--s-4); }
.cpt-carte-tete { display: flex; flex-direction: column; gap: var(--s-2); }
.cpt-carte h2 { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-4); }
.cpt-carte h2 .ico { color: var(--ink-3); }
.cpt-aide { margin: 0; font-size: var(--t-1); color: var(--ink-3); line-height: var(--lh-lecture); max-width: 60ch; }

.cpt-form { display: flex; flex-direction: column; gap: var(--s-4); max-width: 420px; }
.cpt-form .champ .erreur { display: flex; align-items: flex-start; gap: 6px; margin: 0; line-height: var(--lh-ui); }
.cpt-form .champ .erreur .ico { flex-shrink: 0; margin-top: 2px; }
.cpt-form .champ .aide { margin: 0; }
/* Champ fautif et au focus : l'anneau reste rouge. L'anneau cobalt commun repeindrait le filet du champ et
   effacerait le seul signal non textuel de l'erreur au moment précis où l'on revient corriger. */
.cpt-form .champ[data-invalide] input:focus-visible { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft), 0 0 0 1.5px var(--danger); }
.cpt-envoyer { align-self: flex-start; margin-top: var(--s-1); }
@media (max-width: 479px) { .cpt-envoyer { width: 100%; } }
/* Le focus sur une action pleine : l'anneau commun se noierait dans le cobalt (ou le rouge) du bouton ; un anneau
   à écart — deux pixels de la carte, puis la couleur — le détache. */
.cpt-form .btn-primaire:focus-visible { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
.cpt-form .btn-danger:focus-visible { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--danger); }
/* Pendant l'envoi, le bouton garde son nom : l'anneau d'attente passe à gauche au lieu de recouvrir un libellé
   rendu transparent — un contrôle nomme son action, y compris en chargement. */
.cpt-form .btn[aria-busy="true"] { color: var(--on-accent); }
.cpt-form .btn-danger[aria-busy="true"] { color: var(--on-danger); }
.cpt-form .btn[aria-busy="true"]::after { color: currentColor; left: var(--s-4); top: calc(50% - 8px); }
.cpt-form .btn[aria-busy="true"] .ico { visibility: hidden; }

/* La fin : la seule carte du lot fermée par un filet rouge, de 1 px comme toutes les autres. */
.cpt-fin { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.cpt-fin h2 .ico { color: var(--danger-text); }
.cpt-fin .reg-ligne > dt { color: var(--ink-3); }
.cpt-form-fin { max-width: 420px; }
/* ============================================================================================================
   Page Abonnement (lot B10) : l'état du compte en tête, puis ce que l'abonnement ouvre et ce qui reste gratuit,
   en lignes de registre (.reg, défini dans compte.css). Aucun héros, aucune grille de cartes de prix.
   Jetons de src/styles/tokens.css seulement.
   ============================================================================================================ */
.abo { display: flex; flex-direction: column; gap: var(--s-6); }
.abo-resume { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--t-3); line-height: var(--lh-lecture); max-width: 62ch; }

/* --- le retour de Stripe : un bandeau en ligne, au-dessus de tout, jamais une fenêtre */
.abo-retour { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1);
    font-size: var(--t-2); color: var(--ink); line-height: var(--lh-ui); }
.abo-retour .ico { flex-shrink: 0; margin-top: 1px; color: var(--ink-3); }
.abo-retour--ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.abo-retour--ok .ico { color: var(--ok); }
.abo-retour--attente { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.abo-retour--attente .ico { color: var(--warn); }
.abo-tourne { animation: tourne 1s linear infinite; }

/* --- la carte d'état : aimant, titre, phrase, l'action à droite, puis les faits en registre */
.abo-etat { display: flex; flex-direction: column; gap: var(--s-4); }
.abo-etat-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.abo-etat-texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); flex: 1 1 260px; min-width: 0; }
.abo-etat-texte h2 { margin: 0; font-size: var(--t-4); }
.abo-etat-phrase { margin: 0; font-size: var(--t-2); color: var(--ink-2); line-height: var(--lh-lecture); max-width: 60ch; }
/* L'erreur d'action vit dans la carte, sous la phrase, à portée du bouton qui a échoué : elle prend toute la
   colonne de texte (la carte est un flex column aligné à gauche, sinon elle se réduirait à la longueur du mot). */
.abo-etat-texte .reg-alerte { align-self: stretch; max-width: 60ch; }
.abo-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 639px) { .abo-etat-tete > .btn, .abo-actions { width: 100%; } .abo-actions .btn { flex: 1 1 auto; } }

/* --- l'usage IA du mois : deux chiffres tabulaires, la jauge du système, une phrase */
.abo-usage { display: flex; flex-direction: column; gap: var(--s-2); }
.abo-usage-chiffres { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.abo-jauge { display: block; height: 6px; width: 100%; max-width: 420px; }

/* --- les deux listes d'avantages */
.abo-section { display: flex; flex-direction: column; gap: var(--s-3); }
.abo-section h2 { margin: 0; font-size: var(--t-5); }
.abo-section-phrase { margin: 0; font-size: var(--t-2); color: var(--ink-2); line-height: var(--lh-lecture); max-width: 62ch; }
.abo-vide { margin: 0; font-size: var(--t-2); color: var(--ink-3); }

/* --- administration : les comptes et leur consommation. Cinq colonnes ne tiennent pas dans 390 px : le cadre
   défile horizontalement, et le dit. Le signal est dessiné par le fond lui-même : deux voiles d'encre aux bords
   (couche `scroll`, fixée au cadre) que deux caches couleur carte (couche `local`, qui défile avec le contenu)
   découvrent seulement du côté où il reste à lire. Rien à écouter, rien à mesurer en JS, et sur un écran large
   où la table tient entière les deux caches restent posés sur les deux voiles : aucun bord ne s'assombrit. */
.abo-table-cadre { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1);
    background:
        linear-gradient(to right, var(--card) 40%, transparent) left / 28px 100% no-repeat local,
        linear-gradient(to left,  var(--card) 40%, transparent) right / 28px 100% no-repeat local,
        linear-gradient(to right, color-mix(in srgb, var(--ink) 14%, transparent), transparent) left / 14px 100% no-repeat scroll,
        linear-gradient(to left,  color-mix(in srgb, var(--ink) 14%, transparent), transparent) right / 14px 100% no-repeat scroll,
        var(--card); }
.abo-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--t-1); }
.abo-table th, .abo-table td { padding: var(--s-3); text-align: left; vertical-align: top; }
.abo-table thead th { font-weight: 500; color: var(--ink-3); white-space: nowrap; border-bottom: 1px solid var(--line); }
.abo-table tbody tr + tr th, .abo-table tbody tr + tr td { border-top: 1px solid var(--line); }
.abo-table tbody th { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.abo-table tbody td { color: var(--ink-2); }
.abo-td-num { text-align: right; white-space: nowrap; }

/* --- la note de paiement : petite, honnête, sous tout le reste. Le filet appartient au bloc (toute la largeur),
   la mesure au paragraphe : porté par le <p>, il s'arrêtait à 72 caractères, au milieu de la page. */
.abo-pied { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.abo-note { margin: 0; font-size: var(--t-1); color: var(--ink-3); line-height: var(--lh-lecture); max-width: 72ch; }
.abo-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; border-radius: var(--r-micro); }
.abo-note a:focus-visible { box-shadow: var(--anneau-focus); }
@media (hover: hover) and (pointer: fine) { .abo-note a:hover { text-decoration-thickness: 2px; } }

@media (prefers-reduced-motion: reduce) { .abo-tourne { animation: none; } }
/* ============================================================================================================
   Pages publiques (lot B10) : mot de passe oublié, réinitialisation, mentions légales, confidentialité, CGU/CGV,
   page introuvable. Coquille réduite — le rail du haut du système, une colonne, le pied — sans rail d'outils ni
   barre basse. Jetons de src/styles/tokens.css seulement.
   ============================================================================================================ */
.pub { min-height: 100dvh; display: flex; flex-direction: column; }
/* Le seul rail collant ici fait 56 px : une ancre de section ne doit pas se glisser dessous. */
html:has(.pub) { scroll-padding-top: calc(var(--nav-h) + var(--s-4)); }
.pub-main { flex: 1 0 auto; width: 100%; max-width: var(--largeur); margin: var(--s-5) auto 0; padding: 0 var(--s-4); box-sizing: border-box; }
@media (min-width: 768px) { .pub-main { margin-top: var(--s-7); padding: 0 var(--s-5); } }
.pub .pied { margin-top: var(--s-7); }
/* Le bouton d'entrée du rail : l'icône seule sous 480 px, la zone de 44 px conservée par .btn-sm. */
.pub-entrer { gap: 6px; }
@media (max-width: 479px) { .pub-entrer-texte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .pub-entrer { padding: 0 var(--s-3); } }

/* ---------------------------------------------------------------- formulaires et 404 : une colonne étroite */
.pub-colonne { width: 100%; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-4); }
.pub-colonne h1 { margin: 0; font-size: var(--t-6); }
.pub-intro { margin: 0; font-size: var(--t-2); color: var(--ink-2); line-height: var(--lh-lecture); }
.pub-carte { display: flex; flex-direction: column; gap: var(--s-4); }
.pub-texte { margin: 0; font-size: var(--t-2); color: var(--ink-2); line-height: var(--lh-lecture); }
.pub-form { display: flex; flex-direction: column; gap: var(--s-4); }
.pub-form .champ .erreur { display: flex; align-items: flex-start; gap: 6px; margin: 0; line-height: var(--lh-ui); }
.pub-form .champ .erreur .ico { flex-shrink: 0; margin-top: 2px; }
.pub-form .champ .aide { margin: 0; }
.pub-form .champ[data-invalide] input:focus-visible { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft), 0 0 0 1.5px var(--danger); }
.pub-form .btn-primaire { margin-top: var(--s-1); }
.pub-form .btn-primaire:focus-visible { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
.pub-form .btn[aria-busy="true"] { color: var(--on-accent); }
.pub-form .btn[aria-busy="true"]::after { color: currentColor; left: var(--s-4); top: calc(50% - 8px); }
.pub-sous { margin: 0; text-align: center; font-size: var(--t-1); }
.pub-sous a, .pub-texte a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; border-radius: var(--r-micro); }
.pub-sous a:focus-visible, .pub-texte a:focus-visible { box-shadow: var(--anneau-focus); }
@media (hover: hover) and (pointer: fine) { .pub-sous a:hover, .pub-texte a:hover { text-decoration-thickness: 2px; } }

/* La 404 : les portes du site en aimants-liens, une action pleine pour rentrer. */
.pub-404 { max-width: 560px; padding-top: var(--s-5); }
.pub-portes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pub-porte { position: relative; height: 34px; padding: 0 12px; color: var(--ink); text-decoration: none; cursor: pointer;
    transition: border-color var(--d-2) var(--ease-doux), color var(--d-2) var(--ease-doux), background var(--d-2) var(--ease-doux); }
.pub-porte .ico { color: var(--ink-3); }
/* 34 px de haut, 44 px de zone pointable. */
.pub-porte::after { content: ""; position: absolute; inset: -5px 0; }
.pub-porte:focus-visible { box-shadow: var(--anneau-focus); }
.pub-porte:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pub-porte:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent-text); background: var(--card-2); } .pub-porte:hover .ico { color: var(--accent-text); } }
.pub-404-btn { align-self: flex-start; margin-top: var(--s-2); }
@media (max-width: 479px) { .pub-404-btn { width: 100%; } }

/* ---------------------------------------------------------------- pages légales : une colonne de lecture */
.pub-legal { display: flex; flex-direction: column; gap: var(--s-5); max-width: 760px; }
.pub-legal-entete { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.pub-legal-entete h1 { margin: 0; font-size: var(--t-6); }
.pub-maj { margin: 0; font-size: var(--t-1); color: var(--ink-3); }

/* Le sommaire : des liens d'ancre en rangée, jamais un défilement caché. */
.pub-sommaire ol { list-style: none; margin: 0 calc(-1 * var(--s-2)); padding: 0; display: flex; flex-wrap: wrap; gap: 2px; counter-reset: none; }
.pub-sommaire a { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-2); border-radius: var(--r-ctrl);
    color: var(--ink-2); font-size: var(--t-1); font-weight: 500; text-decoration: none;
    transition: color var(--d-2) var(--ease-doux), background var(--d-2) var(--ease-doux); }
.pub-sommaire a::after { content: ""; position: absolute; inset: -2px 0; }
.pub-sommaire a:focus-visible { box-shadow: var(--anneau-focus); }
.pub-sommaire a:active { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .pub-sommaire a:hover { color: var(--ink); background: var(--card-2); } }

.pub-articles { display: flex; flex-direction: column; }
.pub-article { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) var(--s-2); margin: 0 calc(-1 * var(--s-2));
    border-top: 1px solid var(--line); border-radius: var(--r-ctrl); outline: none; }
.pub-article:last-child { border-bottom: 1px solid var(--line); }
.pub-article:focus-visible { box-shadow: var(--anneau-focus); }
/* Une section visée par le sommaire ou par l'adresse s'allume d'un voile cobalt et s'éteint. */
.pub-article:target { animation: pub-visee var(--d-donnee) var(--ease-sortie) both; }
@keyframes pub-visee { 0%, 35% { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); } 100% { background: transparent; box-shadow: none; } }
.pub-article h2 { margin: 0; font-size: var(--t-4); }
.pub-article p { margin: 0; font-size: var(--t-3); line-height: var(--lh-lecture); max-width: 68ch; color: var(--ink); }
.pub-article a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; border-radius: var(--r-micro); }
.pub-article a:focus-visible { box-shadow: var(--anneau-focus); }
@media (hover: hover) and (pointer: fine) { .pub-article a:hover { text-decoration-thickness: 2px; } }
.pub-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); max-width: 68ch; }
.pub-liste li { position: relative; padding-left: var(--s-4); font-size: var(--t-3); line-height: var(--lh-lecture); color: var(--ink); }
/* La puce de liste : un point de 5 px en encre 3, aligné sur la première ligne. */
.pub-liste li::before { content: ""; position: absolute; left: 2px; top: calc(.5 * var(--lh-lecture) * 1em - 2px); width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.pub-liste strong, .pub-article strong { font-weight: 600; }

/* La note de chantier : les champs « REMPLACE… » de site.js, visible de l'administrateur seulement. */
.pub-chantier { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-3);
    border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line)); border-radius: var(--r-ctrl);
    background: var(--warn-soft); color: var(--warn-text); font-size: var(--t-1); font-weight: 500; line-height: var(--lh-ui); }
.pub-chantier .ico { flex-shrink: 0; margin-top: 1px; }
.pub-chantier code { font-family: var(--font-mono); font-size: var(--t-1); }

@media (prefers-reduced-motion: reduce) { .pub-article:target { animation: none; } }
/* ============================================================================================================
   Page Méthode : la notice du tableau de service (mode Read). En-tête plat, sommaire collant à gauche sur desktop,
   colonne de lecture à 68 ch, sections fermées par un filet ; les J sont les pastilles de la ligne de séance, les
   exercices ses vignettes « quoi faire ». Une seule carte : la réglette, calculée depuis les réglages.
   ============================================================================================================ */
.met { display: flex; flex-direction: column; gap: var(--s-6); }
/* Les sauts du sommaire et de la réglette sont des navigations de fragment : sur cette page, elles glissent. */
html:has(.met) { scroll-behavior: smooth; }
.met-resume { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--t-3); line-height: var(--lh-lecture); max-width: 60ch; }

/* --- sommaire + lecture : une colonne sous 1024 px, le sommaire collé à gauche au-dessus */
.met-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.met-sommaire ol { list-style: none; margin: 0 calc(-1 * var(--s-3)); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.met-sommaire a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-ctrl); color: var(--ink-2); font-size: var(--t-2); font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: color var(--d-2) var(--ease-doux), background var(--d-2) var(--ease-doux); }
/* La section courante : encre et le trait cobalt des onglets (24 × 2 px), sous le lien en rangée, à sa gauche en colonne. */
.met-sommaire a::before { content: ""; position: absolute; left: 50%; bottom: 4px; width: 24px; height: 2px; margin-left: -12px; background: var(--accent); transform: scaleX(0); transition: transform var(--d-2) var(--ease-doux); }
.met-sommaire a[aria-current="true"] { color: var(--ink); }
.met-sommaire a[aria-current="true"]::before { transform: scaleX(1); }
.met-sommaire a:focus-visible { box-shadow: var(--anneau-focus); }
.met-sommaire a:active { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .met-sommaire a:hover { color: var(--ink); background: var(--card-2); } }
@media (min-width: 1024px) {
    .met-corps { grid-template-columns: 208px minmax(0, 1fr); gap: var(--s-7); }
    .met-sommaire { position: sticky; top: calc(var(--nav-h) + var(--outils-h) + var(--s-5)); }
    .met-sommaire ol { flex-direction: column; margin: 0; }
    .met-sommaire a { width: 100%; white-space: normal; padding-left: var(--s-4); }
    .met-sommaire a::before { left: 4px; top: 50%; bottom: auto; width: 2px; height: 18px; margin: -9px 0 0; transform: scaleY(0); }
    .met-sommaire a[aria-current="true"]::before { transform: scaleY(1); }
}
.met-lecture { display: flex; flex-direction: column; gap: var(--s-7); min-width: 0; }

/* --- une section : titre 24 px, prose en marche Reading (.lecture : 17 px, 1,55, 68 ch) */
.met-section { display: flex; flex-direction: column; gap: var(--s-4); }
.met-section:focus-visible { box-shadow: none; }
.met-section h2 { margin: 0; font-size: var(--t-5); }
.met-section h3 { margin: var(--s-2) 0 0; font-size: var(--t-3); }
.met-section p { margin: 0; }
.met-lien { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; border-radius: var(--r-micro); }
.met-lien:focus-visible { box-shadow: var(--anneau-focus); }
.met-lien:active { opacity: .7; }
@media (hover: hover) and (pointer: fine) { .met-lien:hover { text-decoration-thickness: 2px; } }
.met-section .lien-bouton { font: inherit; }

/* --- la réglette : une carte posée, une ligne par rang (ou une seule, liste commune), les J reliés par un filet */
.met-reglette { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); margin-top: var(--s-2);
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
@media (min-width: 768px) { .met-reglette { padding: var(--s-5); } }
.met-reglette h3 { margin: 0; }
.met-reglette-ligne { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1) var(--s-3); align-items: center; }
/* À partir de 640 px les rangs sont sur une seule ligne chacun : 12 px les sépareraient, soit 10 px de moins que
   les deux demi-zones de 11 px. On porte l'écart à 22 px, comme entre deux lignes repliées. */
@media (min-width: 640px) { .met-reglette-ligne { grid-template-columns: 132px minmax(0, 1fr); } .met-reglette-ligne + .met-reglette-ligne { margin-top: 10px; } }
.met-reglette-nom { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
/* L'interligne vaut la hauteur d'une pastille : les zones pointables de 44 px se touchent sans se recouvrir,
   sinon le tiers bas d'un J de la première ligne appartenait déjà au J de la ligne repliée en dessous. */
.met-reglette-js { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 0; }
.met-reglette-js li { display: flex; align-items: center; }
.met-reglette-js li + li::before { content: ""; width: 14px; height: 1px; margin: 0 3px; background: var(--line-2); flex-shrink: 0; }
/* La pastille J (celle de la ligne de séance), en lien : 44 px de zone pointable autour de ses 22 px. */
a.met-j { position: relative; text-decoration: none; cursor: pointer; transition: border-color var(--d-2) var(--ease-doux), color var(--d-2) var(--ease-doux), background var(--d-2) var(--ease-doux); }
a.met-j::after { content: ""; position: absolute; inset: -11px -5px; }
/* Au doigt, le survol n'existe pas : le filet plus marqué dit en permanence que ces J-là sont des liens
   (dans les lignes de tranche, la même pastille est un <span> inerte). */
a.met-j { border-color: var(--line-2); }
a.met-j.seance-j--j0 { border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
a.met-j:focus-visible { box-shadow: var(--anneau-focus); border-radius: var(--r-micro); }
a.met-j:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { a.met-j:hover { border-color: var(--accent); color: var(--accent-text); } a.met-j.seance-j--j0:hover { background: var(--accent-soft); } }
.met-reglette-note { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: var(--t-1); color: var(--ink-3); line-height: var(--lh-lecture); }
.met-reglette-note .lien-bouton { font-size: var(--t-1); }
.met-reglette-note .lien-bouton::after { inset: -12px -4px; }

/* --- séance par séance : chaque tranche est une ligne du tableau fermée par un filet, jamais une carte */
.met-tranches { display: flex; flex-direction: column; margin-top: var(--s-2); }
.met-tranche { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-5); padding: var(--s-4) var(--s-2); margin: 0 calc(-1 * var(--s-2)); border-top: 1px solid var(--line); border-radius: var(--r-ctrl); outline: none; }
.met-tranche:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .met-tranche { grid-template-columns: 184px minmax(0, 1fr); padding: var(--s-5) var(--s-2); } }
.met-tranche:focus-visible { box-shadow: var(--anneau-focus); }
/* Une tranche visée (réglette, sommaire, adresse) s'allume d'un voile cobalt et s'éteint. */
.met-tranche:target { animation: met-visee var(--d-donnee) var(--ease-sortie) both; }
@keyframes met-visee { 0%, 35% { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); } 100% { background: transparent; box-shadow: none; } }
.met-tranche-gauche { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: var(--s-2); }
@media (min-width: 640px) { .met-tranche-gauche { flex-direction: column; align-items: flex-start; padding-top: 2px; } }
.met-tranche-gauche .met-j { height: 24px; min-width: 40px; padding: 0 8px; font-size: var(--t-1); }
/* La vignette de la séance, posée ici sur le fond de tableau et non sur une carte : fond carte et filet, sinon
   elle se fond dans la page le jour (carte creusée = fond de tableau). */
.met-vignette { height: 26px; background: var(--card); border-color: var(--line); }
.met-tranche-corps { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.met-tranche-corps h3 { margin: 0; }
.met-tranche-si { margin: 0; font-size: var(--t-1); color: var(--ink-3); line-height: var(--lh-lecture); }
.met-tranche-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
.met-duree { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.met-duree::after { content: "·"; margin-left: var(--s-2); color: var(--ink-3); }
/* La liste d'outils coule dans la même ligne que la durée (display: contents ; role list/listitem gardent la sémantique). */
.met-outils { list-style: none; margin: 0; padding: 0; display: contents; }
.met-outils li { display: inline-flex; }
/* Un outil : l'aimant, en lien vers sa page (44 px de zone), icône en encre 3, survol cobalt. */
.met-outil { position: relative; height: 28px; padding: 0 10px; color: var(--ink); text-decoration: none; cursor: pointer; font: inherit; font-size: var(--t-1); font-weight: 500;
    transition: border-color var(--d-2) var(--ease-doux), color var(--d-2) var(--ease-doux), background var(--d-2) var(--ease-doux); }
.met-outil .ico { color: var(--ink-3); }
.met-outil::after { content: ""; position: absolute; inset: -8px 0; }
.met-outil:focus-visible { box-shadow: var(--anneau-focus); }
.met-outil:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .met-outil:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent-text); background: var(--card-2); } .met-outil:hover .ico { color: var(--accent-text); } }

/* --- le rituel : un horaire de service, le moment à gauche, le geste à droite */
.met-horaire { display: flex; flex-direction: column; margin: var(--s-2) 0 0; }
.met-moment { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1) var(--s-5); padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.met-moment:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .met-moment { grid-template-columns: 184px minmax(0, 1fr); padding: var(--s-5) 0; } }
.met-moment dt { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--t-2); font-weight: 600; line-height: var(--lh-ui); }
.met-moment dt .ico { color: var(--ink-3); }
.met-moment dd { margin: 0; min-width: 0; }
@media (min-width: 640px) { .met-moment dt { padding-top: 2px; align-items: flex-start; } .met-moment dt .ico { margin-top: 2px; } }

/* --- à ne pas faire : des paires « à éviter / à faire », sans rouge, la règle du mot suffit */
.met-paires { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; }
.met-paire { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-5); padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.met-paire:last-child { border-bottom: 1px solid var(--line); }
.met-paire-entete { display: none; }
@media (min-width: 768px) {
    .met-paire { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: var(--s-5) 0; }
    /* Les deux libellés servent d'en-têtes de colonne ; répétés sur chaque paire ils posaient huit petites
       lignes grises au-dessus du texte utile. Empilés (sous 768 px), ils restent sur chaque paire. */
    .met-paire-entete { display: grid; padding: 0 0 var(--s-2); border-top: 0; }
    /* Elles sortent de l'œil, pas du lecteur d'écran : l'en-tête, lui, est aria-hidden (il répète ces mots). */
    .met-paire:not(.met-paire-entete) .met-paire-cle { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
.met-paire-non, .met-paire-oui { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.met-paire-cle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }
.met-paire-non p { margin: 0; font-size: var(--t-3); font-weight: 500; color: var(--ink-2); line-height: var(--lh-ui); text-wrap: pretty; }

/* --- la fin : deux liens vers le tableau, aucune action primaire */
.met-fin { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--line); }
@media (max-width: 479px) { .met-fin .btn { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .met-tranche:target { animation: none; } .met-sommaire a::before { transition: none; } }
/* ============================================================================================================
   Lot B12 — l'arrière-boutique du tableau de service : page Gestion, fenêtre des Lots, fenêtre Podcast.
   Tout est aux jetons de src/styles/tokens.css. Trois familles de préfixes :
     .gst-  page Gestion (documents, voix, couverture)
     .lots- / .pod-  ce qui n'appartient qu'à une des deux fenêtres
   Le chrome commun des fenêtres (.adm-) est parti au lot de clôture (B14) dans src/styles/modales.css, où il
   sert aussi les fenêtres du planning : c'est la fusion que ce brief annonçait. Les noms de classe n'ont pas
   bougé — rien à changer dans src/ui/modals/lots.js ni podcast.js.
   ============================================================================================================ */

/* ---------------------------------------------------------------- page Gestion */
.gst { display: flex; flex-direction: column; gap: var(--s-5); }
.gst-resume { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--t-2); line-height: var(--lh-lecture); max-width: 68ch; }
.gst-resume code, .gst code { font-family: var(--font-mono); font-size: .92em; background: var(--card-2); border-radius: var(--r-micro); padding: 1px 5px; }
.gst-onglets { display: flex; }
.gst-onglets .segments { flex-wrap: wrap; }

/* Bandeaux d'état : un aimant, une phrase, parfois des actions. Jamais une couleur seule. */
.gst-bandeau { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2) var(--s-3);
    padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.gst-bandeau > .puce { flex: none; }
.gst-bandeau-corps { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.gst-bandeau-titre { margin: 0; font-size: var(--t-2); font-weight: 600; }
.gst-bandeau p { margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.gst-bandeau-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gst-bandeau--danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: var(--danger-soft); }
.gst-bandeau--danger p { color: var(--danger-text); }
.gst-bandeau--ok { border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); background: var(--ok-soft); }
.gst-bandeau--warn { border-color: color-mix(in srgb, var(--warn) 32%, var(--line)); background: var(--warn-soft); }

/* Rangée de mesures : une ligne de chiffres, pas quatre cartes égales. */
.gst-mesures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) 0;
    border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1); padding: var(--s-4); }
.gst-mesure { padding: 0 var(--s-4); min-width: 0; }
.gst-mesure + .gst-mesure { border-left: 1px solid var(--line); }
.gst-mesure:nth-child(odd) { border-left: 0; padding-left: 0; }
.gst-mesure-val { display: block; font-size: var(--t-5); font-weight: 600; line-height: var(--lh-serre); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gst-mesure-lib { display: block; margin-top: var(--s-1); font-size: var(--t-1); color: var(--ink-2); }
@media (min-width: 640px) {
    .gst-mesures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .gst-mesure:nth-child(odd) { border-left: 1px solid var(--line); padding-left: var(--s-4); }
    .gst-mesure:first-child { border-left: 0; padding-left: 0; }
}

/* Carte de section : titre, mention à droite, phrase, action en propre bloc, puis les lignes. */
.gst-carte { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-1); padding: var(--s-4); }
@media (min-width: 768px) { .gst-carte { padding: var(--s-5); } }
.gst-carte-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.gst-carte-tete h2 { margin: 0; font-size: var(--t-3); font-weight: 600; letter-spacing: -.02em; }
.gst-carte-mention { font-size: var(--t-1); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gst-carte p { margin: var(--s-2) 0 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.gst-carte-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.gst-carte-note { margin-top: var(--s-2); font-size: var(--t-1); color: var(--ink-3); line-height: var(--lh-lecture); }

/* La ligne de tableau administrative : identité à gauche, mesure dessous, aimant et action à droite. */
.gst-liste { margin-top: var(--s-3); }
.gst-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); min-height: 44px; }
.gst-ligne:first-child { border-top: 0; }
.gst-ligne-corps { flex: 1 1 200px; min-width: 0; }
.gst-ligne-nom { font-size: var(--t-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gst-ligne-sous { margin-top: 2px; font-size: var(--t-1); color: var(--ink-2); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.gst-ligne-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; margin-left: auto; }
.gst-ligne-cle { font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-3); }
.gst-vide { margin: var(--s-4) 0; font-size: var(--t-2); color: var(--ink-3); }

/* Jauge courte posée dans une ligne (pages lues / pages totales). */
.gst-jauge { display: inline-block; vertical-align: middle; width: 96px; height: 6px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
/* Même mécanique que .jauge-val du système : une échelle, jamais une largeur (pas de recalcul de mise en page). */
.gst-jauge > span { display: block; width: 100%; height: 100%; border-radius: var(--r-pill); background: var(--accent);
    transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform var(--d-donnee) var(--ease-doux); }

/* Colonnes de la base de données, erreurs PHP : de la donnée technique, en mono, jamais en terminal noir. */
.gst-mono { font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-2); }
.gst-journal { margin-top: var(--s-2); max-height: 224px; overflow: auto; padding: var(--s-3); border-radius: var(--r-ctrl);
    background: var(--bg-2); border: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--t-1); line-height: 1.5;
    color: var(--danger-text); white-space: pre-wrap; word-break: break-word; }

/* Onglet Voix et onglet Couverture. */
.gst-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-3); }
@media (min-width: 768px) { .gst-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gst-fichier { display: block; }
.gst-couv .champ.gst-fichier { margin-top: var(--s-3); }
.champ.gst-fichier input[type="file"] { display: block; width: 100%; height: auto; padding: 0; border: 0; background: none;
    font: inherit; font-size: var(--t-1); color: var(--ink-2); margin-top: var(--s-1); }
.champ.gst-fichier input[type="file"]::file-selector-button, .gst-fichier input[type="file"]::file-selector-button { font: inherit; font-size: var(--t-1); font-weight: 500; margin-right: var(--s-2);
    min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-ctrl); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .champ.gst-fichier input[type="file"]::file-selector-button:hover { background: var(--card-2); } }
.gst-couvs { display: flex; flex-wrap: wrap; gap: var(--s-4); }
/* Une couverture est une vignette de livre, pas un panneau : le gabarit 2/3 se cadre, il ne s'étire pas. */
.gst-couv { flex: 0 1 240px; max-width: 260px; }
.gst-couv-titre { font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.gst-couv-apercu { display: block; width: 100%; margin-top: var(--s-2); border-radius: var(--r-ctrl); border: 1px solid var(--line); }
.gst-couv-vide { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; aspect-ratio: 2 / 3; margin-top: var(--s-2);
    border-radius: var(--r-ctrl); border: 1px dashed var(--line-2); color: var(--ink-3); font-size: var(--t-1); padding: 0 var(--s-3); }
.gst-diag { margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); }
.gst-diag-bloc { padding: var(--s-3); border-radius: var(--r-ctrl); background: var(--bg-2); border: 1px solid var(--line); }
.gst-diag-bloc pre { margin: var(--s-2) 0 0; font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-2); white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; }

/* ---------------------------------------------------------------- fenêtre des Lots */
.lots-onglets { display: flex; }
.lots-onglets .segments { flex-wrap: wrap; }
.lots-choix { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.lots-choix-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.lots-choix-gauche { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.lots-compteur { font-size: var(--t-1); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lots-compteur b { color: var(--ink); font-weight: 600; }
.lots-compteur .lots-filtres { color: var(--accent-text); }
.lots-liste { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-ctrl); }
.lots-item { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 44px; padding: var(--s-1) var(--s-2); border: 0; background: none;
    font: inherit; font-size: var(--t-1); color: var(--ink); text-align: left; cursor: pointer; border-radius: var(--r-micro); }
.lots-item .ico { color: var(--ink-3); flex: none; }
.lots-item[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.lots-item[aria-pressed="true"] .ico { color: var(--accent); }
.lots-item:focus-visible { outline: 0; box-shadow: var(--anneau-focus); }
@media (hover: hover) and (pointer: fine) { .lots-item:hover { background: var(--card-2); } .lots-item[aria-pressed="true"]:hover { background: var(--accent-soft); } }
.lots-item-id { font-family: var(--font-mono); color: var(--ink-3); flex: none; min-width: 40px; }
.lots-item-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lots-liste-vide { margin: 0; padding: var(--s-3); font-size: var(--t-1); color: var(--ink-3); }
.lots-reglages { display: flex; flex-direction: column; gap: var(--s-2); }
.lots-reglages .champ { max-width: 320px; }
.lots-envoi { display: flex; flex-direction: column; gap: var(--s-2); }
.lots-devis { border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--line)); border-radius: var(--r-card); background: var(--ok-soft); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.lots-devis-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.lots-devis-total { font-size: var(--t-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.lots-devis-total span { font-weight: 400; color: var(--ink-2); }
.lots-devis-table { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); font-size: var(--t-1); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lots-devis-table b { color: var(--ink); text-align: right; font-weight: 600; }
.lots-devis p { margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.lots-envois { display: flex; flex-direction: column; }
.lots-envoi-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); min-height: 44px; }
.lots-envoi-ligne:first-child { border-top: 0; }
.lots-envoi-corps { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.lots-envoi-nom { font-size: var(--t-1); font-weight: 600; display: flex; align-items: center; gap: var(--s-2); }
.lots-envoi-nom .ico { color: var(--ink-3); flex: none; }
.lots-envoi-etats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-1); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lots-envoi-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; flex: none; }
.lots-resultat { border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: var(--s-2) var(--s-3); display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2); }
.lots-resultat--applique { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, var(--line)); }
.lots-resultat-corps { flex: 1 1 200px; min-width: 0; font-size: var(--t-1); color: var(--ink-2); }
.lots-resultat-nom { font-weight: 600; color: var(--ink); }
.lots-resultat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-left: auto; }
.lots-conflit { margin-top: var(--s-1); padding: var(--s-2); border-radius: var(--r-micro); background: var(--warn-soft); color: var(--warn-text); }
.lots-parts { margin: var(--s-1) 0 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }
.lots-parts b { color: var(--ink); }
/* « ≈ 640 mots » est une mesure : elle ne se coupe pas entre le signe et le nombre. */
.lots-parts .adm-h { white-space: nowrap; }
.lots-diag-lot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-1); }
.lots-diag-lot .adm-h { font-family: var(--font-mono); }

/* ---------------------------------------------------------------- fenêtre Podcast */
.pod-case { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-ctrl); cursor: pointer; }
.pod-case input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.pod-case--on { border-color: var(--accent); background: var(--accent-soft); }

/* Le seuil de l'onglet Flashcards : « Moins de [15] cartes dans le paquet », sur une seule ligne. */
/* Le seuil appartient à la case du dessus : il s'y rattache par un retrait et un filet, pour qu'on ne le
   confonde pas avec « Combien par item », l'autre champ chiffré du bloc. */
.lots-seuil { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s-2);
    margin-left: var(--s-3); padding-left: var(--s-3); border-left: 1px solid var(--line); }
.lots-seuil label { margin: 0; }
.lots-seuil-mot { font-size: var(--t-1); color: var(--ink-3); }
.lots-seuil .saisie[disabled] { opacity: .5; cursor: not-allowed; }
/* Le compte de cartes déjà dans le paquet, à droite de la ligne : il dit pourquoi elle est là. */
.lots-item-cartes { margin-left: auto; flex: none; min-width: 30px; padding: 0 8px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-3); font-size: var(--t-1); font-weight: 500; }
.lots-item[aria-pressed="true"] .lots-item-cartes { background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--accent-text); }
.pod-case-texte { min-width: 0; font-size: var(--t-1); line-height: var(--lh-lecture); }
.pod-case-titre { font-weight: 600; font-size: var(--t-2); color: var(--ink); }
.pod-case-texte p { margin: var(--s-1) 0 0; color: var(--ink-2); }
.pod-college { display: block; margin-top: var(--s-1); color: var(--ink-2); }
.pod-college--ok { color: var(--ok-text); }
.pod-college--warn { color: var(--warn-text); }
.pod-college--danger { color: var(--danger-text); }
.pod-etat { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.pod-etat--travail { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
.pod-etat--pret { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, var(--line)); }
.pod-etat-titre { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-2); font-weight: 600; }
.pod-etat-titre .ico { flex: none; color: var(--ink-2); }
.pod-etat p { margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.pod-etat-mesures { font-size: var(--t-1); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pod-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pod-actions .pod-fin { margin-left: auto; }
.pod-jauge { margin-top: var(--s-1); }
.pod-fiche { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.pod-fiche--vide { border-style: dashed; }
.pod-fiche-corps { max-height: 50vh; overflow-y: auto; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--bg-2); }
.pod-script { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.pod-script-lignes { max-height: 288px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--t-1); line-height: var(--lh-lecture); }
.pod-replique { display: flex; gap: var(--s-2); }
.pod-replique-qui { flex: none; width: 44px; font-weight: 600; color: var(--ink-3); }
.pod-replique-texte { color: var(--ink-2); }
.pod-voix { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-3); }
.pod-voix > summary { cursor: pointer; font-size: var(--t-2); font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: var(--s-2); }
.pod-voix > summary::-webkit-details-marker { display: none; }
.pod-voix > summary .ico { flex: none; color: var(--ink-2); transition: transform var(--d-2) var(--ease-doux); }
.pod-voix[open] > summary .ico { transform: rotate(90deg); }
.pod-voix > summary:focus-visible { outline: 0; border-radius: var(--r-ctrl); box-shadow: var(--anneau-focus); }
.pod-voix[open] > summary { margin-bottom: var(--s-2); }
.pod-voix p { margin: var(--s-2) 0 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.pod-voix .champ { max-width: 360px; margin-top: var(--s-2); }
.pod-explicatif { font-size: var(--t-1); }

/* ---------------------------------------------------------------- la fiche à suivre, rendue
   Les sélecteurs restent plats : podcastFichePrint recopie le contenu de #podcast-fiche SANS son enveloppe
   dans une page d'impression qui charge app.css. Une règle descendante de .pod-f n'y prendrait pas. */
.pod-f { display: flex; flex-direction: column; gap: var(--s-4); }
.pod-f-tete h3 { margin: 0; font-size: var(--t-3); font-weight: 600; letter-spacing: -.02em; }
.pod-f-tete .adm-note { margin: var(--s-1) 0 0; }
.pod-f-sect { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.pod-f-sect h4 { margin: 0 0 var(--s-2); display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--t-2); font-weight: 600; }
/* Le numéro de section est un compteur du système : pastille cobalt, chiffre tabulaire. */
.pod-f-n { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: var(--t-1); font-weight: 600; }
.pod-f-sect ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.pod-f-sect li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink); }
/* Une case à cocher au crayon, sur l'iPad : elle est dessinée, jamais un caractère. */
/* Même gabarit que la case du système (.pod-case input, 18 px) : elle se coche au crayon sur l'iPad. */
.pod-f-case { flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--line-2); border-radius: var(--r-micro); background: var(--card); }
.pod-f-retenir, .pod-f-piege { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-ctrl);
    font-size: var(--t-1); line-height: var(--lh-lecture); }
.pod-f-retenir { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, var(--line)); color: var(--ok-text); }
.pod-f-piege { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); color: var(--warn-text); }
.pod-f-retenir b, .pod-f-piege b { font-weight: 600; }
.pod-f-recap { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.pod-f-recap table { width: 100%; border-collapse: collapse; font-size: var(--t-1); }
.pod-f-recap td { padding: var(--s-2) 0; border-top: 1px solid var(--line); color: var(--ink-2); line-height: var(--lh-lecture); }
.pod-f-recap tr:first-child td { border-top: 0; }
.pod-f-recap td + td { text-align: right; color: var(--ink); white-space: nowrap; padding-left: var(--s-3); }

/* --- Comptes utilisateurs : une fiche par personne, dépliable sur ses plannings. */
.cmp-resume { margin: 0 0 var(--s-4); color: var(--ink-2); font-size: var(--t-1); }
.cmp-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.cmp { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
/* L'accès révoqué se lit au mot (la puce « accès révoqué »), la teinte ne fait que confirmer. */
.cmp--suspendu { border-color: var(--danger); background: var(--danger-soft); }
.cmp-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.cmp-qui { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0;
    border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cmp-qui:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-controle); }
.cmp-email { font-weight: 500; }
.cmp-puces { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cmp-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s-2) var(--s-4); margin: var(--s-3) 0 0; }
.cmp-faits div { min-width: 0; }
.cmp-faits dt { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.cmp-faits dd { margin: 0; font-size: var(--t-2); color: var(--ink); }
.cmp-approx { color: var(--ink-3); font-size: var(--t-1); }
.cmp-detail { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.cmp-vide { margin: 0; color: var(--ink-2); font-size: var(--t-1); }
.cmp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.cmp-note { color: var(--ink-3); font-size: var(--t-1); }
.cmp-lien { margin-bottom: var(--s-4); padding: var(--s-4); border: 1px solid var(--warn);
    border-radius: var(--r-card); background: var(--warn-soft); }
.cmp-lien p { margin: 0 0 var(--s-2); font-size: var(--t-1); line-height: var(--lh-lecture); }
.cmp-lien-url { display: block; padding: var(--s-2); border-radius: var(--r-controle);
    background: var(--card); font-size: var(--t-1); word-break: break-all; }
.cmp-lien-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
@media (max-width: 560px) { .cmp-actions .btn, .cmp-lien-actions .btn { flex: 1 1 0; } }
/* ============================================================================================================
   Onglet QCM, flashcards et active recall (lots B4 + B5) : la salle d'examen du tableau de service.
   Un seul accent, cobalt ; les quatre couleurs sémantiques ne parlent jamais sans un mot. Tout est sur les
   jetons de src/styles/tokens.css, donc les deux modes suivent sans une seule valeur de nuit écrite ici.
   Le contenu riche venu du serveur (.qcm-rich, .chrono-content) reste habillé par src/styles/qcm.css.
   ============================================================================================================ */
.qcm { display: flex; flex-direction: column; gap: var(--s-4); }
/* Ce que le module cache par l'attribut hidden (la rangée « Valider » après la correction, la liste des
   questions repliée, les deux rangées de la carte) : un display de mise en page écrase sinon hidden. */
.qcm [hidden] { display: none; }

/* --- en-têtes de page et de vue ------------------------------------------------------------------------- */
.qcm-entete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.qcm-entete-texte { min-width: 0; flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--s-1); }
.qcm-entete h1 { margin: 0; font-size: var(--t-6); font-weight: 600; line-height: var(--lh-serre); letter-spacing: -.02em; display: flex; align-items: center; gap: var(--s-2); text-wrap: pretty; }
/* Sur un titre qui passe à la ligne, l'icône et le numéro restent sur la première ligne : centrés, ils
   flottaient au milieu d'un titre de trois lignes. */
.qcm-entete h1 .ico { color: var(--ink-3); flex-shrink: 0; align-self: flex-start; margin-top: .2em; }
.qcm-entete h1 .num { color: var(--ink-3); font-weight: 500; }
.qcm-resume { margin: 0; font-size: var(--t-2); color: var(--ink-2); }
.qcm-entete--item h1, .qcm-entete--exo h1 { font-size: var(--t-5); }
.qcm-entete--item h1, .qcm-entete--exo h1 { align-items: baseline; }
.qcm-retour { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-left: calc(-1 * var(--s-2)); padding: 0 var(--s-2);
    border: 0; border-radius: var(--r-ctrl); background: none; color: var(--accent-text); font: inherit; font-size: var(--t-1); font-weight: 500; cursor: pointer; }
/* le lien de retour se lit à 36 px mais se touche à 44 : la zone déborde sans déplacer le texte */
.qcm-retour::after { content: ""; position: absolute; inset: -4px -6px; }
@media (hover: hover) and (pointer: fine) { .qcm-retour:hover { background: var(--card-2); } }
.qcm-item-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: var(--s-1); }
.qcm-item-puces .puce { height: 24px; }
.qcm-intro { margin: 0; max-width: 72ch; font-size: var(--t-2); line-height: var(--lh-lecture); color: var(--ink-2); }

.qcm-segments { align-self: flex-start; max-width: 100%; overflow-x: auto; }
.qcm-segments [role="tab"] { white-space: nowrap; }
.qcm-segments .ico { color: currentColor; }

/* --- messages : notice de page, alerte, rappel d'abonnement --------------------------------------------- */
.qcm-notice { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
    border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.qcm-notice p { flex: 1 1 auto; margin: 0; padding-top: 3px; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.qcm-notice .puce { flex-shrink: 0; }
.qcm-notice .ico-btn { flex-shrink: 0; width: 36px; height: 36px; }
.qcm-notice--error { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.qcm-notice--warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }

.qcm-alerte { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
    border-radius: var(--r-card); background: var(--warn-soft); color: var(--warn-text); }
.qcm-alerte > .ico { flex-shrink: 0; margin-top: 2px; }
.qcm-alerte p { margin: 0; font-size: var(--t-2); line-height: var(--lh-lecture); }
.qcm-alerte-aide { margin-top: var(--s-1) !important; font-size: var(--t-1) !important; color: var(--ink-2); }
.qcm-alerte code { font-family: var(--font-mono); font-size: .92em; }

.qcm-abo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line); border-radius: var(--r-card); background: var(--accent-soft); }
.qcm-abo > .ico { color: var(--accent-text); flex-shrink: 0; }
.qcm-abo p { flex: 1 1 240px; margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink); }

/* --- la maîtrise, partout la même ----------------------------------------------------------------------- */
.qcm-maitrise { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.qcm-maitrise-piste { width: 72px; height: 6px; flex-shrink: 0; border: 1px solid var(--line); }
.qcm-maitrise .jauge-val { background: var(--accent-text); }
.qcm-maitrise-val { font-size: var(--t-1); font-weight: 600; color: var(--ink); min-width: 42px; text-align: right; }
.qcm-maitrise-mot { font-size: var(--t-1); color: var(--ink-3); }
.qcm-m-vide .jauge-val { background: var(--ink-3); }
.qcm-m-vide .qcm-maitrise-val { color: var(--ink-3); font-weight: 400; }
.qcm-maitrise-large .qcm-maitrise-piste { width: 140px; height: 8px; }
.qcm-maitrise-large .qcm-maitrise-val { font-size: var(--t-4); font-weight: 600; min-width: 64px; }

/* --- barre d'outils du registre, collée sous les rails ---------------------------------------------------- */
.qcm-outils { position: sticky; top: calc(var(--nav-h) + var(--outils-h)); z-index: 2;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-2) 0 var(--s-3);
    background: var(--bg); border-bottom: 1px solid var(--line); }
.qcm-recherche { position: relative; }
.qcm-recherche > .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.qcm-recherche .saisie { padding-left: 40px; }
.qcm-select, .qcm-select .select { width: 100%; }
.qcm-coche { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); cursor: pointer; }
.qcm-coche input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.qcm-compte { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
/* Téléphone : les deux sélecteurs partagent une rangée, la case et le compte la suivante — la première ligne
   du registre reste au-dessus de la ligne de flottaison. */
@media (max-width: 767px) {
    .qcm-outils { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-2); }
    .qcm-recherche { grid-column: 1 / -1; }
    .qcm-coche { grid-column: 1 / 2; }
    .qcm-compte { grid-column: 2 / 3; justify-self: end; align-self: center; text-align: right; }
    .qcm-outils--simple { grid-template-columns: minmax(0, 1fr); }
    .qcm-outils--simple .qcm-compte { grid-column: 1 / -1; justify-self: start; text-align: left; }
}
@media (min-width: 768px) {
    .qcm-outils { grid-template-columns: minmax(220px, 1fr) 190px 190px auto; align-items: center; column-gap: var(--s-3); }
    .qcm-compte { grid-column: 1 / -1; }
    .qcm-outils--simple { grid-template-columns: minmax(240px, 1fr) auto; }
    .qcm-outils--simple .qcm-compte { grid-column: auto; justify-self: end; white-space: nowrap; }
}
@media (min-width: 1024px) {
    .qcm-outils { grid-template-columns: minmax(240px, 1fr) 200px 200px auto auto; }
    .qcm-compte { grid-column: auto; justify-self: end; white-space: nowrap; }
}

/* --- le registre : une ligne par item ou par quiz --------------------------------------------------------- */
.qcm-liste { display: flex; flex-direction: column; }
.qcm-liste > .vide { padding-top: var(--s-7); }
/* pied de liste : combien de lignes sont montées, et de quoi en monter une tranche de plus */
.qcm-pied:not(:empty) { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-5) 0 var(--s-2); }
.qcm-pied-note { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.qcm-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titre maitrise" "meta meta" "actions actions";
    column-gap: var(--s-3); align-items: center; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.qcm-ligne-ouvrir { grid-area: titre; display: flex; align-items: flex-start; gap: var(--s-2); min-height: 44px; margin: 0 calc(-1 * var(--s-1));
    padding: 10px var(--s-1); border: 0; border-radius: var(--r-ctrl); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
    transition: background var(--d-2) var(--ease-doux); }
@media (hover: hover) and (pointer: fine) { .qcm-ligne-ouvrir:hover { background: var(--card-2); } }
.qcm-ligne-ouvrir:active { background: var(--track); }
.qcm-ligne-num { flex-shrink: 0; min-width: 34px; text-align: right; color: var(--ink-3); font-size: var(--t-2); }
.qcm-ligne-titre { min-width: 0; font-size: var(--t-2); font-weight: 500; line-height: var(--lh-ui); text-wrap: pretty; }
.qcm-ligne--sans .qcm-ligne-titre { color: var(--ink-3); }
.qcm-ligne-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 var(--s-1) 46px; }
.qcm-ligne-meta .puce { height: 24px; }
.qcm-ligne-maitrise { grid-area: maitrise; justify-self: end; }
.qcm-ligne-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); padding-left: 46px; }
.qcm-ligne--squelette { pointer-events: none; }
.qcm-ligne--squelette .squelette-ligne { display: block; height: 16px; margin: 0; }
@media (min-width: 900px) {
    .qcm-ligne { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "titre maitrise actions" "meta maitrise actions"; align-items: start; }
    .qcm-ligne-maitrise { align-self: center; }
    .qcm-ligne-actions { padding-left: 0; align-self: center; flex-wrap: nowrap; }
}
@media (max-width: 639px) {
    .qcm-action-texte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .qcm-ligne-actions .btn-sm { position: relative; width: 44px; height: 44px; padding: 0; }
    .qcm-ligne-meta, .qcm-ligne-actions { padding-left: 0; }
}

/* --- blocs de section (statistiques, notions, questions) -------------------------------------------------- */
.qcm-bloc { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) 0 0; border-top: 1px solid var(--line); }
.qcm-bloc h2 { margin: 0; font-size: var(--t-3); font-weight: 600; line-height: var(--lh-serre); letter-spacing: -.02em; }
.qcm-bloc-note { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.qcm-bloc-vide { margin: 0; font-size: var(--t-2); color: var(--ink-3); line-height: var(--lh-lecture); }
.qcm-stats { display: grid; gap: var(--s-5); }
.qcm-stats-colonne { display: flex; flex-direction: column; gap: var(--s-5); }
@media (min-width: 1024px) { .qcm-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.qcm-stats-outils { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3); }
.qcm-stats-outils .qcm-select { width: auto; min-width: 200px; }
.qcm-stats-methode { flex: 1 1 320px; margin: 0; max-width: 72ch; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.qcm-stat-liste { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.qcm-stat-ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 44px; padding: var(--s-1) var(--s-1);
    margin: 0 calc(-1 * var(--s-1)); border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-ctrl); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.qcm-stat-ligne--inerte { cursor: default; }
@media (hover: hover) and (pointer: fine) { .qcm-stat-ligne:not(.qcm-stat-ligne--inerte):hover { background: var(--card-2); } }
.qcm-stat-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-2); }
.qcm-stat-texte { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.qcm-stat-apres { font-size: var(--t-1); color: var(--ink-3); font-weight: 400; }

@media (max-width: 767px) {
    .qcm-notion, .qcm-stat-ligne { flex-direction: column; align-items: flex-start; gap: var(--s-1); padding: var(--s-2) var(--s-1); }
    .qcm-notion-nom, .qcm-stat-nom { width: 100%; }
    .qcm-notion-titre, .qcm-stat-texte { white-space: normal; max-width: none; }
}

/* --- le registre des exercices d'un item ------------------------------------------------------------------ */
.qcm-item { display: flex; flex-direction: column; gap: var(--s-4); }
.qcm-item-maitrise { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); flex-shrink: 0; }
.qcm-item-maitrise-label { margin: 0; font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }
.qcm-item-maitrise-note { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.qcm-parties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
/* Le choix de la partie : des boutons qui passent à la ligne. Aucun défilement caché, aucun libellé coupé,
   44 px de haut, et le compte de questions porté par le libellé lui-même. */
.qcm-choix { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.qcm-choix-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--s-3);
    border-radius: var(--r-ctrl); border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2);
    font-size: var(--t-2); font-weight: 500; line-height: var(--lh-ui); text-align: left; cursor: pointer;
    transition: background var(--d-2) var(--ease-doux), border-color var(--d-2) var(--ease-doux), color var(--d-2) var(--ease-doux); }
.qcm-choix-btn:active { transform: scale(.98); }
.qcm-choix-btn:focus-visible { box-shadow: var(--anneau-focus); }
.qcm-choix-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.qcm-choix-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px;
    border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-3); font-size: var(--t-1); font-weight: 500; }
.qcm-choix-btn[aria-pressed="true"] .qcm-choix-n { background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) {
    .qcm-choix-btn:hover { background: var(--card-2); border-color: var(--ink-3); color: var(--ink); }
    .qcm-choix-btn[aria-pressed="true"]:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
}
.qcm-parties-note { font-size: var(--t-1); color: var(--ink-3); }
/* Plusieurs sous-parties à la fois : la bascule dit son état par la couleur d'accent, pas seulement par
   aria-pressed ; la phrase qui explique la réunion prend toute la largeur, sous le groupe. */
.qcm-reunir[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.qcm-parties-reunion { flex-basis: 100%; margin: 0; line-height: var(--lh-lecture); max-width: 80ch; }
.qcm-choix-btn .ico { flex: none; }
.qcm-exos-note { display: flex; align-items: center; gap: 6px; margin: 0; padding: var(--s-3) 0; font-size: var(--t-1); color: var(--ink-3); border-bottom: 1px solid var(--line); }
.qcm-flash-reunion .ico { color: var(--accent-text); }
.qcm-parties-avert { flex-basis: 100%; display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-1); color: var(--warn-text); }
.qcm-angle { display: flex; align-items: center; gap: var(--s-2); }
.qcm-angle-label { font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }

.qcm-exos { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.qcm-exo { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "ico texte" "actions actions"; gap: var(--s-2) var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.qcm-exo-ico { grid-area: ico; display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; color: var(--ink-3); }
.qcm-exo-texte { grid-area: texte; min-width: 0; }
.qcm-exo-texte h3 { margin: 0; font-size: var(--t-3); font-weight: 600; line-height: var(--lh-serre); letter-spacing: -.02em; }
.qcm-exo-texte p { margin: 2px 0 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); max-width: 72ch; }
.qcm-exo-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-left: calc(36px + var(--s-3)); }
.qcm-exo-attente { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-1); color: var(--ink-3); }
@media (min-width: 900px) {
    .qcm-exo { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ico texte actions"; align-items: center; }
    .qcm-exo-actions { padding-left: 0; justify-content: flex-end; }
}

.qcm-lacunes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.qcm-lacune { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); padding: var(--s-1) 0; font-size: var(--t-2); line-height: var(--lh-lecture); }
.qcm-lacune .puce { align-self: center; }
.qcm-lacune-texte { flex: 1 1 260px; min-width: 0; color: var(--ink-2); }
.qcm-lacune-texte strong { color: var(--ink); font-weight: 600; }
.qcm-lacune-date { font-size: var(--t-1); color: var(--ink-3); }
.qcm-lacune--erreur { padding: var(--s-2); border-radius: var(--r-ctrl); background: var(--danger-soft); }

.qcm-notions { display: grid; gap: 2px; }
@media (min-width: 900px) { .qcm-notions { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); } }
.qcm-notion { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 44px; padding: var(--s-1);
    margin: 0 calc(-1 * var(--s-1)); border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-ctrl); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.qcm-notion--inerte { cursor: default; }
@media (hover: hover) and (pointer: fine) { .qcm-notion:not(.qcm-notion--inerte):hover { background: var(--card-2); } }
.qcm-notion-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-2); }
.qcm-notion-titre { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38ch; }
.qcm-notion-nb { font-size: var(--t-1); color: var(--ink-3); }
.qcm-jamais { margin-top: var(--s-2); }
.qcm-jamais summary { min-height: 44px; display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-1); font-weight: 500; color: var(--ink-2); cursor: pointer; list-style: none; }
.qcm-jamais summary::-webkit-details-marker { display: none; }
.qcm-jamais summary .ico { color: var(--ink-3); transition: transform var(--d-2) var(--ease-doux); }
.qcm-jamais[open] summary .ico { transform: rotate(90deg); }
/* les rangées s'écartent de 10 px : la zone de touche de chaque puce déborde de 4 px sans mordre sur sa voisine */
.qcm-jamais-liste { display: flex; flex-wrap: wrap; gap: 10px 6px; padding-top: var(--s-1); }
.qcm-notion-puce { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-2); border: 1px solid var(--line-2); border-radius: var(--r-ctrl);
    background: var(--card); color: var(--ink-2); font: inherit; font-size: var(--t-1); cursor: pointer; }
.qcm-notion-puce::after { content: ""; position: absolute; inset: -4px -3px; }
.qcm-notion-puce .num { color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .qcm-notion-puce:hover { background: var(--card-2); color: var(--ink); } }

/* --- la liste des questions d'un item ---------------------------------------------------------------------- */
.qcm-questions-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.qcm-questions-tete h2 { flex: 0 0 auto; }
.qcm-questions-modes { margin-left: auto; }
.qcm-deplier { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; margin-left: calc(-1 * var(--s-2)); padding: 0 var(--s-2);
    border: 0; border-radius: var(--r-ctrl); background: none; color: inherit; font: inherit; cursor: pointer; }
.qcm-caret { color: var(--ink-3); transition: transform var(--d-2) var(--ease-doux); }
.qcm-deplier[aria-expanded="true"] .qcm-caret { transform: rotate(90deg); }
.qcm-filtre { gap: 2px; padding-right: 2px; }
.qcm-filtre-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: var(--r-pill); background: none; color: inherit; cursor: pointer; }
.qcm-qlignes { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.qcm-qligne { display: flex; align-items: flex-start; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-1); border: 0; border-bottom: 1px solid var(--line);
    border-radius: var(--r-ctrl); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .qcm-qligne:hover { background: var(--card-2); } }
.qcm-qligne-score { flex-shrink: 0; width: 76px; text-align: right; font-size: var(--t-1); font-weight: 600; color: var(--ink); padding-top: 2px; }
.qcm-qligne-neuve { color: var(--ink-3); font-weight: 400; }
.qcm-qligne-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qcm-qligne-texte { font-size: var(--t-2); line-height: var(--lh-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qcm-qligne-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.qcm-qligne-meta .puce { height: 22px; font-size: var(--t-1); }
.qcm-qligne-notion { font-size: var(--t-1); color: var(--ink-3); }
.qcm-qligne-chevron { flex-shrink: 0; color: var(--ink-3); margin-top: 4px; }

/* --- la séance : en-tête, jauge, compteur ------------------------------------------------------------------ */
.qcm-seance { display: flex; flex-direction: column; gap: var(--s-4); }
.qcm-seance-tete { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "qui quitter" "etat etat"; gap: var(--s-2) var(--s-3); align-items: center;
    padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.qcm-seance-qui { grid-area: qui; min-width: 0; }
.qcm-seance-mode { margin: 0; font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }
.qcm-seance-tete h1 { margin: 2px 0 0; font-size: var(--t-4); font-weight: 600; line-height: var(--lh-serre); letter-spacing: -.02em; text-wrap: pretty; }
.qcm-seance-etat { grid-area: etat; min-width: 0; }
.qcm-seance-tete > .ico-btn { grid-area: quitter; justify-self: end; align-self: start; }
@media (min-width: 768px) {
    .qcm-seance-tete { grid-template-columns: minmax(0, 1fr) 260px 44px; grid-template-areas: "qui etat quitter"; }
}
.qcm-progres { display: flex; flex-direction: column; gap: var(--s-1); }
.qcm-progres-piste { height: 4px; }
.qcm-progres .jauge-val { background: var(--accent); }
.qcm-progres-compte { margin: 0; font-size: var(--t-1); color: var(--ink-2); }

/* --- la carte d'une question -------------------------------------------------------------------------------- */
.qcm-q { overflow: hidden; }
.qcm-q-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: var(--s-2) var(--s-4); background: var(--card-2); border-bottom: 1px solid var(--line); }
.qcm-q-bandeau .puce { height: 24px; background: var(--card); }
.qcm-q-national { margin-left: auto; font-size: var(--t-1); color: var(--ink-3); white-space: nowrap; }
.qcm-q-corps { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
@media (min-width: 768px) { .qcm-q-corps { padding: var(--s-5); } }
.qcm-enonce { font-size: var(--t-3); line-height: var(--lh-lecture); color: var(--ink); max-width: 74ch; }
.qcm-q-consigne { margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); max-width: 72ch; }
.qcm-images { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.qcm-image { display: block; border-radius: var(--r-ctrl); }
.qcm-image img { max-height: 280px; width: auto; max-width: 100%; border-radius: var(--r-ctrl); border: 1px solid var(--line); display: block; }
.qcm-img-absente { margin: 0; padding: var(--s-3); border: 1px dashed var(--line-2); border-radius: var(--r-ctrl); font-size: var(--t-1); color: var(--ink-3); }
.qcm-pj { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qcm-pj a { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: var(--t-1); color: var(--accent-text); }
.qcm-pj a::after { content: ""; position: absolute; inset: -4px -6px; }
.qcm-pj .ico { color: var(--ink-3); }

/* propositions : une ligne à cocher de 44 px, cobalt quand elle est choisie */
.qcm-props { display: flex; flex-direction: column; gap: var(--s-2); }
.qcm-prop { position: relative; display: flex; align-items: flex-start; gap: var(--s-3); width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3); text-align: left;
    border: 1px solid var(--line-2); border-radius: var(--r-ctrl); background: var(--card); color: var(--ink); font: inherit; font-size: var(--t-2);
    transition: border-color var(--d-2) var(--ease-doux), background var(--d-2) var(--ease-doux); }
.qcm-prop--vive { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .qcm-prop--vive:hover { border-color: var(--accent); background: var(--accent-soft); } }
.qcm-prop--vive:active { transform: scale(.995); }
/* La case native porte le clavier et l'annonce ; le carré dessiné porte le style. L'anneau de focus passe donc
   de l'input à son étiquette, et la case radio garde son rayon rond. */
.qcm-prop-controle { position: absolute; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.qcm-prop--vive:focus-within { border-color: var(--accent); box-shadow: var(--anneau-focus); }
.qcm-prop-case { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px;
    border: 1.5px solid var(--ink-3); border-radius: var(--r-micro); background: var(--card); color: var(--on-accent); }
.qcm-prop-case .ico { opacity: 0; transition: opacity var(--d-1) var(--ease-doux); }
.qcm-prop--choisie .qcm-prop-case .ico, .qcm-prop--juste .qcm-prop-case .ico, .qcm-prop--faux .qcm-prop-case .ico { opacity: 1; }
.qcm-props--unique .qcm-prop-case, .qcm-props--unique .qcm-prop-controle { border-radius: var(--r-pill); }
.qcm-prop--choisie .qcm-prop-case { background: var(--accent); border-color: var(--accent); }
.qcm-prop--choisie { border-color: var(--accent); background: var(--accent-soft); }
/* Le vocabulaire médical fabrique des mots plus larges que la colonne : sans cela, « Échocardiographie »
   débordait sur le pourcentage de cochage au lieu de se couper. */
.qcm-prop-texte { flex: 1 1 auto; min-width: 0; line-height: var(--lh-ui); overflow-wrap: break-word; }
.qcm-prop-fin { flex-shrink: 0; display: flex; align-items: center; gap: var(--s-2); }
.qcm-prop-stat { font-size: var(--t-1); color: var(--ink-3); white-space: nowrap; }
.qcm-prop-verdict { font-size: var(--t-1); font-weight: 600; white-space: nowrap; }
/* après validation : la teinte ET le mot, jamais la teinte seule */
.qcm-prop--juste { border-color: var(--ok); background: var(--ok-soft); }
.qcm-prop--juste .qcm-prop-verdict { color: var(--ok-text); }
.qcm-prop--juste .qcm-prop-case { background: var(--ok); border-color: var(--ok); }
.qcm-prop--manquee { border-color: var(--warn); background: var(--warn-soft); }
.qcm-prop--manquee .qcm-prop-verdict { color: var(--warn-text); }
.qcm-prop--faux { border-color: var(--danger); background: var(--danger-soft); }
.qcm-prop--faux .qcm-prop-verdict { color: var(--danger-text); }
/* Une inacceptable qu'on a bien laissée : le mot reste, pour apprendre la règle, mais sans alerte. */
.qcm-prop--neutre .qcm-prop-verdict { color: var(--ink-3); font-weight: 500; }
.qcm-prop--faux .qcm-prop-case { background: var(--danger-fill); border-color: var(--danger-fill); color: var(--on-danger); }
.qcm-prop--partiel { border-color: var(--warn); }
.qcm-prop--partiel .qcm-prop-verdict { color: var(--warn-text); }
.qcm-prop--neutre { border-color: var(--line); color: var(--ink-2); }
.qcm-prop--neutre .qcm-prop-case { border-color: var(--line-2); }

/* Téléphone : le pourcentage de cochage et le verdict passent sous la proposition ; côte à côte, ils ne
   laissaient plus assez de colonne au texte. */
@media (max-width: 639px) {
    .qcm-prop { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "case texte" "vide fin"; gap: var(--s-1) var(--s-3); }
    .qcm-prop-case { grid-area: case; }
    .qcm-prop-texte { grid-area: texte; }
    .qcm-prop-fin { grid-area: fin; justify-content: flex-start; }
    .qcm-prop-fin:empty { display: none; }
}

.qcm-saisie { max-width: 420px; }
.qcm-q-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.qcm-bareme { margin: 0 0 0 auto; font-size: var(--t-1); color: var(--ink-3); }

/* zone à pointer */
.qcm-zone { display: flex; flex-direction: column; gap: var(--s-2); }
.qcm-zone-legende { margin: 0; font-size: var(--t-1); color: var(--ink-2); }
.qcm-zone-cadre { position: relative; display: inline-block; max-width: 100%; align-self: flex-start; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--card-2); }
.qcm-zone-img { display: block; max-width: 100%; height: auto; cursor: crosshair; }
.qcm-zone-calque { position: absolute; inset: 0; pointer-events: none; }
.qcm-zone-marque { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid var(--on-accent); background: var(--accent); box-shadow: var(--shadow-1); }
.qcm-zone-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.qcm-zone-svg polygon { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 3; }

/* --- la correction ----------------------------------------------------------------------------------------- */
.qcm-correction { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + var(--outils-h) + var(--s-3)); }
/* Le bloc de correction reçoit le focus pour qu'on y arrive au clavier après « Valider », mais il n'est pas
   une commande et Tab ne l'atteint jamais : l'anneau cobalt autour de tout le bloc se lisait comme une sélection. */
.qcm-correction:focus, .qcm-correction:focus-visible { outline: none; box-shadow: none; }
.qcm-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.qcm-score { font-weight: 600; }
.qcm-verdict-detail { font-size: var(--t-1); color: var(--ink-3); }
.qcm-attendu { margin: 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--card-2); font-size: var(--t-2); line-height: var(--lh-lecture); }
.qcm-corr-texte { padding: var(--s-4); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--line)); border-radius: var(--r-card); background: var(--ok-soft); }
.qcm-corr-texte h3 { margin: 0 0 var(--s-2); font-size: var(--t-1); font-weight: 600; color: var(--ok-text); }
.qcm-corr-texte .qcm-rich { font-size: var(--t-2); line-height: var(--lh-lecture); color: var(--ink); max-width: 74ch; }
.qcm-corr-vide { color: var(--ink-3); }
.qcm-corr-message { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-1); font-weight: 500; color: var(--ok-text); }
.qcm-annales { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.qcm-notions-q h4 { margin: 0 0 var(--s-2); font-size: var(--t-1); font-weight: 600; color: var(--ink-3); }
.qcm-notions-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.qcm-notion-lien { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-2); border: 1px solid var(--line-2); border-radius: var(--r-ctrl);
    background: var(--card); color: var(--ink); font: inherit; font-size: var(--t-1); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .qcm-notion-lien:hover { background: var(--card-2); } }
.qcm-notion-pct { color: var(--ink-3); }
.qcm-suite { display: flex; justify-content: flex-end; }

/* corriger la question (overrides serveur) */
.qcm-edit { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--card-2); }
.qcm-edit h4 { margin: 0; font-size: var(--t-3); font-weight: 600; }
.qcm-edit-portee, .qcm-edit-aide { margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.qcm-edit-erreur { display: flex; align-items: center; gap: 6px; margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-ctrl); background: var(--danger-soft); color: var(--danger-text); font-size: var(--t-1); font-weight: 500; }
.qcm-edit-props { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.qcm-edit-prop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--card); }
.qcm-edit-prop--change { border-color: var(--accent); }
.qcm-edit-prop .saisie { flex: 1 1 200px; min-width: 0; }
.qcm-edit-coche { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-size: var(--t-1); font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.qcm-edit-coche input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.qcm-edit-masquer { white-space: normal; }
.qcm-edit-marque { font-size: var(--t-1); font-weight: 600; color: var(--accent-text); }
.qcm-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.qcm-edit-reset { margin-left: auto; color: var(--danger-text); }

/* --- fin de séance ------------------------------------------------------------------------------------------ */
.qcm-fin { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-5) 0 0; border-top: 1px solid var(--line); }
.qcm-fin-score { display: flex; flex-direction: column; gap: 2px; }
.qcm-fin-chiffre { margin: 0; font-size: var(--t-6); font-weight: 600; line-height: var(--lh-serre); letter-spacing: -.02em; }
.qcm-fin-mot { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-3); font-weight: 500; color: var(--ink-2); }
.qcm-fin-mot .ico { color: var(--ok); }
.qcm-fin-note, .qcm-fin-ia { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.qcm-fin-notions h2 { margin: 0 0 var(--s-2); font-size: var(--t-3); font-weight: 600; }
.qcm-fin-suite { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* seconde ligne : reprendre autrement et sortir. Séparées des deux portes par un filet, en retrait de graisse. */
.qcm-fin-sortie { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: calc(-1 * var(--s-3)); padding-top: var(--s-3); border-top: 1px solid var(--line); }
@media (min-width: 900px) {
    .qcm-fin { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-5) var(--s-6); align-items: start; }
    /* La revue d'une annale en fait partie : dans la colonne du score (200 px), ses propositions passaient lettre par lettre. */
    .qcm-fin-suite, .qcm-fin-sortie, .qcm-fin-points, .qcm-analyse, .qcm-bloc--faibles, .ann-revue { grid-column: 1 / -1; }
}

/* --- flashcards : le carton qui se retourne ------------------------------------------------------------------ */
.qcm-flash { display: flex; flex-direction: column; gap: var(--s-4); }
/* supprimer le paquet : l'objet est le paquet, pas la carte du moment — d'où le mot, et la corbeille en danger */
.qcm-vider { align-self: flex-start; color: var(--ink-2); }
.qcm-vider .ico { color: var(--danger-text); }
@media (hover: hover) and (pointer: fine) { .qcm-vider:hover { background: var(--danger-soft); color: var(--danger-text); } }
.qcm-gen { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.qcm-gen-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.qcm-gen-label { font-size: var(--t-1); font-weight: 500; color: var(--ink-2); }
.qcm-gen-nb { width: auto; min-width: 140px; }
.qcm-gen-nb .select { width: 100%; }
.qcm-gen-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.qcm-gen-note .ico { flex-shrink: 0; margin-top: 2px; }
.qcm-gen-note--ok { color: var(--ok-text); }
.qcm-gen-note--neuf { color: var(--warn-text); }
.qcm-gen-source { margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-3); max-width: 80ch; }
.qcm-gen-source .ico { vertical-align: -3px; margin-right: 4px; }
.qcm-gen-points { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.qcm-gen-puces { display: flex; flex-wrap: wrap; gap: 6px; }

.qcm-carte-etat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--t-1); color: var(--ink-3); }
.qcm-carte-etat-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qcm-carte-notion { font-weight: 500; color: var(--ink-2); }
.qcm-carte-section, .qcm-carte-rythme { color: var(--ink-3); }
/* Les trois renseignements de la carte (notion, section, rythme) se lisaient en un seul bloc de mots. */
.qcm-carte-section::before, .qcm-carte-rythme::before { content: "·"; margin-right: 6px; color: var(--ink-3); }

.qcm-flip { perspective: 1200px; }
.qcm-flip-btn { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
.qcm-flip-btn:focus-visible { outline: none; }
.qcm-flip-btn:focus-visible .qcm-flip-carton { box-shadow: var(--anneau-focus), var(--shadow-1); }
.qcm-flip-carton { display: grid; transform-style: preserve-3d; transition: transform var(--d-4) var(--ease-doux); border-radius: var(--r-card); }
.qcm-flip-btn[aria-pressed="true"] .qcm-flip-carton { transform: rotateY(180deg); }
.qcm-face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3);
    min-height: 240px; padding: var(--s-5) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card);
    box-shadow: var(--shadow-1); text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.qcm-face-verso { transform: rotateY(180deg); background: var(--card-2); }
.qcm-face-role { font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }
.qcm-face-texte { font-size: var(--t-4); font-weight: 500; line-height: var(--lh-ui); color: var(--ink); white-space: pre-wrap; max-width: 52ch; }
.qcm-face-note { padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--card); font-size: var(--t-2); line-height: var(--lh-lecture); color: var(--ink-2); max-width: 60ch; }
.qcm-face-cible, .qcm-face-pied { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-1); color: var(--ink-3); }
.qcm-flash-voir { display: flex; justify-content: center; }
.qcm-flash-pied { display: flex; justify-content: flex-end; }

.qcm-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (min-width: 640px) { .qcm-notes { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.qcm-note { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; padding: var(--s-2);
    border: 1px solid var(--line-2); border-radius: var(--r-ctrl); background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
    transition: background var(--d-2) var(--ease-doux), border-color var(--d-2) var(--ease-doux); }
.qcm-note-mot { font-size: var(--t-2); font-weight: 600; }
.qcm-note-quand { font-size: var(--t-1); color: var(--ink-3); }
.qcm-note:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .qcm-note:hover { background: var(--card-2); } }
.qcm-note-again { border-color: color-mix(in srgb, var(--danger) 45%, var(--line-2)); } .qcm-note-again .qcm-note-mot { color: var(--danger-text); }
.qcm-note-hard { border-color: color-mix(in srgb, var(--warn) 45%, var(--line-2)); } .qcm-note-hard .qcm-note-mot { color: var(--warn-text); }
.qcm-note-good { border-color: color-mix(in srgb, var(--ok) 45%, var(--line-2)); } .qcm-note-good .qcm-note-mot { color: var(--ok-text); }
.qcm-note-easy { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); } .qcm-note-easy .qcm-note-mot { color: var(--accent-text); }

/* --- active recall --------------------------------------------------------------------------------------- */
.qcm-recall, .qcm-cours { display: flex; flex-direction: column; gap: var(--s-4); }
.qcm-recall-etat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.qcm-recall-etat .qcm-progres { flex: 1 1 240px; }
.qcm-plan { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.qcm-plan-pas { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px;
    border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: var(--t-1); font-weight: 500; color: var(--ink-3); background: var(--card); }
.qcm-plan-pas--encours { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 600; }
.qcm-plan-pas--ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line-2)); background: var(--ok-soft); color: var(--ok-text); }
.qcm-plan-pas--partiel { border-color: color-mix(in srgb, var(--warn) 45%, var(--line-2)); background: var(--warn-soft); color: var(--warn-text); }
.qcm-plan-pas--rate { border-color: color-mix(in srgb, var(--danger) 45%, var(--line-2)); background: var(--danger-soft); color: var(--danger-text); }

.qcm-point .carte-corps { display: flex; flex-direction: column; gap: var(--s-3); }
.qcm-point-sur { margin: 0; font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }
.qcm-point h2 { margin: 0; font-size: var(--t-5); font-weight: 600; line-height: var(--lh-serre); letter-spacing: -.02em; text-wrap: pretty; }
.qcm-consigne { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card-2); }
.qcm-consigne-tete { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s-1); font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.qcm-consigne p { margin: 0; font-size: var(--t-2); line-height: var(--lh-lecture); color: var(--ink); max-width: 74ch; }
.qcm-consigne-nb { margin-top: var(--s-2) !important; font-size: var(--t-1) !important; color: var(--ink-3) !important; }

.qcm-dictee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.qcm-dictee-etat { font-size: var(--t-1); color: var(--ink-3); }
.qcm-dictee-interim { flex: 1 1 140px; min-width: 0; font-size: var(--t-1); color: var(--ink-3); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qcm-dictee-erreur { flex-basis: 100%; display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-1); font-weight: 500; color: var(--danger-text); }
.qcm-ecoute { animation: qcm-pouls 1.6s var(--ease-doux) infinite; }
@keyframes qcm-pouls { 50% { opacity: .68; } }
.qcm-notes-champ textarea { font-size: var(--t-2); }

.qcm-point-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.qcm-tes-notes { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--card-2); }
.qcm-tes-notes-tete { margin: 0 0 var(--s-1); font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }
.qcm-tes-notes p:last-child { margin: 0; font-size: var(--t-2); line-height: var(--lh-lecture); color: var(--ink-2); white-space: pre-wrap; }
.qcm-la-fiche { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card-2); }
.qcm-la-fiche-tete { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s-2); font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.qcm-fiche { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.qcm-fiche-pt { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-2); line-height: var(--lh-lecture); color: var(--ink); }
.qcm-fiche-puce { flex-shrink: 0; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%; background: var(--ink-3); }
.qcm-fiche-etat { flex-shrink: 0; margin-top: 3px; display: inline-flex; }
.qcm-fiche-pt--ok .qcm-fiche-etat { color: var(--ok); }
.qcm-fiche-pt--partiel { color: var(--warn-text); } .qcm-fiche-pt--partiel .qcm-fiche-etat { color: var(--warn); }
.qcm-fiche-pt--manque { color: var(--danger-text); } .qcm-fiche-pt--manque .qcm-fiche-etat { color: var(--danger); }
.qcm-fiche-retenir, .qcm-fiche-piege { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-ctrl); font-size: var(--t-1); line-height: var(--lh-lecture); }
.qcm-fiche-retenir { background: var(--ok-soft); color: var(--ok-text); }
.qcm-fiche-piege { background: var(--danger-soft); color: var(--danger-text); }
.qcm-autoeval { display: flex; flex-direction: column; gap: var(--s-2); }
.qcm-autoeval-tete { margin: 0; font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }

.qcm-erreurs { padding: var(--s-4); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); border-radius: var(--r-card); background: var(--danger-soft); }
.qcm-erreurs h2 { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-3); font-weight: 600; color: var(--danger-text); }
.qcm-erreurs-note { margin: var(--s-1) 0 var(--s-3); font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.qcm-erreurs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.qcm-erreur { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--card); }
.qcm-erreur p { margin: 0; font-size: var(--t-2); line-height: var(--lh-lecture); }
.qcm-erreur-point { font-size: var(--t-1) !important; font-weight: 600; color: var(--ink-3); }
.qcm-erreur-ecrit { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--danger); }
.qcm-erreur-vrai { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; color: var(--ok-text); }
.qcm-erreur-pourquoi { font-size: var(--t-1) !important; color: var(--ink-2); }

.qcm-fin-points { display: flex; flex-direction: column; gap: var(--s-2); }
.qcm-fin-point { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.qcm-fin-point--erreur { padding: var(--s-3); border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); border-radius: var(--r-ctrl); background: var(--danger-soft); }
.qcm-fin-point-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.qcm-fin-point-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-2); font-weight: 500; }
.qcm-fin-point-rien { font-weight: 400; color: var(--ink-3); font-size: var(--t-1); }
.qcm-fin-point-scores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qcm-fin-point-cnt, .qcm-fin-point-ia { font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.qcm-fin-point-bilan { display: grid; gap: var(--s-2); font-size: var(--t-1); line-height: var(--lh-lecture); }
@media (min-width: 768px) { .qcm-fin-point-bilan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qcm-acquis { margin: 0; color: var(--ok-text); }
.qcm-manques { color: var(--danger-text); }
.qcm-manques p { margin: 0; } .qcm-manques ul { margin: 2px 0 0 1.1rem; padding: 0; }
.qcm-analyse { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card-2); }
.qcm-analyse p { flex: 1 1 260px; margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.qcm-analyse .ico { vertical-align: -3px; margin-right: 4px; color: var(--ink-3); }
/* La correction locale passe à la ligne, sous l'offre IA : c'est une seconde porte, pas une variante. */
.qcm-analyse-locale { flex: 1 1 100%; border-top: 1px solid var(--line); padding-top: var(--s-3); }
.qcm-fin-ia-src { color: var(--ink-3); font-size: 0.9em; }
.qcm-vide-fiche p { max-width: 62ch; }

/* --- mini-cours ------------------------------------------------------------------------------------------- */
.qcm-cours-source { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-1); color: var(--ink-2); }
.qcm-cours-source .ico { flex-shrink: 0; color: var(--ink-3); }
.qcm-cours-texte .carte-corps { display: flex; flex-direction: column; gap: var(--s-5); }
.qcm-cours-tete h2 { margin: var(--s-1) 0 0; font-size: var(--t-6); font-weight: 600; line-height: var(--lh-serre); letter-spacing: -.02em; }
.qcm-cours-quand { margin: 0; font-size: var(--t-1); color: var(--ink-3); }
.qcm-cours-intro { margin: var(--s-2) 0 0; font-size: var(--t-3); line-height: var(--lh-lecture); color: var(--ink-2); max-width: 70ch; }
.qcm-cours-section { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.qcm-cours-section h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-4); font-weight: 600; line-height: var(--lh-serre); letter-spacing: -.02em; }
.qcm-cours-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--r-micro); background: var(--accent-soft); color: var(--accent-text); font-size: var(--t-1); font-weight: 600; }
.qcm-cours-cible { display: flex; align-items: center; gap: 6px; margin: var(--s-2) 0 0; font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }
.qcm-cours-contenu { margin: var(--s-2) 0 0; font-size: var(--t-3); line-height: var(--lh-lecture); color: var(--ink); white-space: pre-wrap; max-width: 70ch; }
.qcm-cours-retenir { margin-top: var(--s-3); padding: var(--s-3); border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--line)); border-radius: var(--r-ctrl); background: var(--ok-soft); }
.qcm-cours-retenir p { margin: 0 0 var(--s-1); font-size: var(--t-1); font-weight: 600; color: var(--ok-text); }
.qcm-cours-retenir ul { margin: 0 0 0 1.1rem; padding: 0; font-size: var(--t-2); line-height: var(--lh-lecture); color: var(--ink); }
.qcm-cours-piege { margin: var(--s-2) 0 0; padding: var(--s-3); border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); border-radius: var(--r-ctrl); background: var(--danger-soft); font-size: var(--t-2); line-height: var(--lh-lecture); color: var(--danger-text); }
.qcm-cours-fin { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.qcm-cours-fin p { margin: 0; font-size: var(--t-3); line-height: var(--lh-lecture); color: var(--ink-2); max-width: 70ch; }

/* --- « Extraire en PDF » : la fenêtre, cadre compris ------------------------------------------------------ */
/* Posée dans #modal-root, pas par <dialog> : le voile, la boîte et le titre sont écrits ici, sur les mêmes
   jetons que .dlg, pour que la fenêtre ne détonne pas avec celles du système. */
.qcm-fenetre { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--s-4);
    background: var(--voile); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.qcm-fenetre-boite { width: 100%; max-width: min(92vw, 560px); max-height: calc(100dvh - 2 * var(--s-4)); overflow-y: auto; padding: var(--s-5);
    border-radius: var(--r-card); background: var(--card); color: var(--ink); box-shadow: var(--shadow-2); }
.qcm-fenetre-boite:focus-visible { outline: none; }
.qcm-fenetre-titre { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); font-size: var(--t-4); font-weight: 600; line-height: var(--lh-serre); color: var(--ink); }
.qcm-fenetre-titre .ico { color: var(--ink-3); flex-shrink: 0; }
@media (max-width: 560px) {
    .qcm-fenetre { padding: 0; align-items: flex-end; }
    .qcm-fenetre-boite { max-width: none; max-height: 92dvh; border-radius: var(--r-card) var(--r-card) 0 0; padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
}
.qcm-livre { display: flex; flex-direction: column; gap: var(--s-3); }
.qcm-livre-intro { margin: 0; font-size: var(--t-2); line-height: var(--lh-lecture); color: var(--ink-2); }
.qcm-livre-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.qcm-livre-tete p { margin: 0; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.qcm-livre-tout { display: flex; gap: var(--s-1); }
.qcm-livre-liste { max-height: 34vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-ctrl); }
.qcm-livre-col { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-3); border-bottom: 1px solid var(--line); cursor: pointer; }
.qcm-livre-col:last-child { border-bottom: 0; }
.qcm-livre-col input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.qcm-livre-nom { flex: 1 1 auto; min-width: 0; font-size: var(--t-2); font-weight: 500; }
.qcm-livre-nb { font-size: var(--t-1); color: var(--ink-3); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .qcm-livre-col:hover { background: var(--card-2); } }
.qcm-livre-mep { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.qcm-livre-mep p { margin: 0; font-size: var(--t-1); font-weight: 600; color: var(--ink-2); }
.qcm-livre-poids { margin: 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--card-2); font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.qcm-livre-poids--lourd { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: var(--warn-soft); color: var(--warn-text); }
.qcm-livre-actions { display: flex; justify-content: flex-end; gap: var(--s-2); }

/* --- liens-boutons et divers ------------------------------------------------------------------------------- */
.qcm-lien { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: var(--t-1); font-weight: 500;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qcm-lien--sobre { color: var(--ink-3); align-self: flex-start; }
.qcm-lien--danger { color: var(--danger-text); }
/* la zone pointable atteint 44 px sans déplacer le texte */
.qcm-lien { position: relative; } .qcm-lien::after { content: ""; position: absolute; inset: -14px -6px; }
.qcm-tourne { animation: tourne .9s linear infinite; }
.qcm-article { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.qcm-article > .ico { color: var(--ink-3); flex-shrink: 0; }
.qcm-article-titre { flex: 1 1 200px; min-width: 0; font-size: var(--t-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qcm-article-revue { font-size: var(--t-1); color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
    .qcm-flip-carton, .qcm-caret, .qcm-prop, .qcm-note, .qcm-ligne-ouvrir { transition: none; }
    .qcm-ecoute, .qcm-tourne { animation: none; }
}

/* Bandeau du bilan du soir : toujours visible au-dessus de l'exercice, il dit le chapitre et le compte. */
.qcm-soir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--s-3); margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card-2); }
.qcm-soir-qui { flex: 1 1 260px; min-width: 0; }
.qcm-soir-mode { display: flex; align-items: center; gap: 6px; margin: 0;
    font-size: var(--t-1); color: var(--ink-3); }
.qcm-soir-item { margin: 2px 0 0; font-size: var(--t-2); font-weight: 500; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qcm-soir-partie { color: var(--ink-2); font-weight: 400; }
.qcm-soir-compte { margin: 0; font-size: var(--t-1); color: var(--ink-2); }
.qcm-soir-actions { display: flex; gap: var(--s-2); }
@media (max-width: 560px) {
    .qcm-soir-actions { width: 100%; } .qcm-soir-actions .btn { flex: 1 1 0; }
    .qcm-soir-item { white-space: normal; }
}

/* --- Training : les sujets d'EDN.fr (privés). Chaque type d'épreuve a sa teinte (--ep-*, tokens.css), posée par
   .ep-<type> sur --ep. Elle colore un point, se mélange à un fond ou à un filet d'un pixel, jamais un texte ni un
   bouton : le nom du type est toujours écrit, et l'accent reste aux actions. */
.ep-annals { --ep: var(--ep-annals); } .ep-ecni-blank { --ep: var(--ep-ecni-blank); } .ep-contest { --ep: var(--ep-contest); }
.ep-quizz { --ep: var(--ep-quizz); } .ep-conftube { --ep: var(--ep-conftube); } .ep-masterclass { --ep: var(--ep-masterclass); }
.ep-lca { --ep: var(--ep-lca); } .ep-imaging { --ep: var(--ep-imaging); } .ep-easy-dp { --ep: var(--ep-easy-dp); }
.ep-mini-dp { --ep: var(--ep-mini-dp); } .ep-kfp { --ep: var(--ep-kfp); } .ep-tcs { --ep: var(--ep-tcs); }
.trn-point { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ep, var(--ink-3)); }
.trn-point--tout { background: conic-gradient(var(--ep-annals) 0 25%, var(--ep-kfp) 0 50%, var(--ep-imaging) 0 75%, var(--ep-masterclass) 0); }
.trn-puce { background: color-mix(in srgb, var(--ep) 14%, var(--card)); border-color: color-mix(in srgb, var(--ep) 38%, var(--line)); color: var(--ink-2); }
.trn-puce::before { display: none; }
.trn-aide { margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-3); }

.trn-entete { align-items: center; }
.trn-prive { flex: none; color: var(--ink-2); }
.trn-prive .ico { color: var(--ink-3); }

/* Deux colonnes sur grand écran : les sections à gauche, collées ; la section choisie à droite. */
.trn { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-4); }
.trn-corps { min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.trn-nav ul { list-style: none; margin: 0; padding: 0; }
.trn-nav-entree { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 44px; padding: 0 var(--s-3);
    border: 1px solid transparent; border-radius: var(--r-ctrl); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-2);
    text-align: left; cursor: pointer; transition: background-color var(--d-1) var(--ease-doux), border-color var(--d-1) var(--ease-doux); }
.trn-nav-nom { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trn-nav-compte { flex: none; font-size: var(--t-1); color: var(--ink-3); }
.trn-nav-faits { color: var(--ok-text); }
.trn-nav-entree--vide .trn-nav-nom { color: var(--ink-3); }
.trn-nav-entree--vide .trn-point { opacity: .45; }
@media (hover: hover) and (pointer: fine) { .trn-nav-entree:hover { background: var(--card-2); } }
.trn-nav-entree[aria-current] { background: color-mix(in srgb, var(--ep, var(--ink-3)) 13%, var(--card)); border-color: color-mix(in srgb, var(--ep, var(--ink-3)) 34%, var(--line));
    color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); }
.trn-nav-entree[aria-current] .trn-nav-compte { color: var(--ink-2); }
/* Téléphone et tablette : une bande de pilules qui défile, sans barre de défilement. */
@media (max-width: 1023px) {
    .trn-nav { margin: 0 calc(-1 * var(--s-4)); }
    .trn-nav ul { display: flex; gap: 6px; overflow-x: auto; padding: 2px var(--s-4) var(--s-1); scrollbar-width: none; scroll-snap-type: x proximity; }
    .trn-nav ul::-webkit-scrollbar { display: none; }
    .trn-nav li { flex: none; scroll-snap-align: start; }
    .trn-nav li:last-child { padding-right: var(--s-4); } /* le retrait droit d'un flex qui défile n'est pas compté */
    .trn-nav-entree { width: auto; border-color: var(--line); border-radius: var(--r-pill); background: var(--card); font-size: var(--t-1); }
    .trn-nav-nom { overflow: visible; }
}
@media (min-width: 1024px) {
    .trn { grid-template-columns: 228px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
    .trn-nav { position: sticky; top: calc(var(--nav-h) + var(--outils-h) + var(--s-4)); }
    .trn-nav ul { display: flex; flex-direction: column; gap: 2px; }
    .trn-nav li:first-child { margin-bottom: var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
}

/* Le bandeau de la section : sa teinte en fond léger, ce qu'on y trouve, l'avancement. « Tout » reste neutre. */
.trn-bandeau { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5);
    padding: var(--s-5); border: 1px solid color-mix(in srgb, var(--ep, var(--ink-3)) 26%, var(--line)); border-radius: var(--r-card);
    background: color-mix(in srgb, var(--ep, var(--ink-3)) 8%, var(--card)); }
.trn-bandeau-texte { flex: 1 1 280px; min-width: 0; }
.trn-bandeau h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s-1); font-size: var(--t-5); font-weight: 600; line-height: var(--lh-serre); letter-spacing: -.015em; }
.trn-bandeau h2 .trn-point { width: 12px; height: 12px; }
.trn-bandeau p { margin: 0; color: var(--ink-2); max-width: 60ch; }
.trn-bandeau-chiffres { flex: 0 1 260px; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-1); color: var(--ink-2); }
.trn-bandeau-chiffres p { margin: 0; }
.trn-bandeau-chiffres strong { font-size: var(--t-4); font-weight: 600; color: var(--ink); }
.trn-bandeau-avance { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.trn-jauge { flex: 1 1 120px; height: 8px; }
.trn-jauge .jauge-val { transition: transform var(--d-donnee, 600ms) var(--ease-doux); }

/* Les filtres, sur une ligne, collés sous les rails pendant qu'on parcourt la liste. */
.trn-outils { position: sticky; top: calc(var(--nav-h) + var(--outils-h)); z-index: 2; display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s-2) var(--s-3); padding: var(--s-2) 0; background: var(--bg); border-bottom: 1px solid var(--line); }
/* Au doigt, les segments du système (32 px) montent à 44 px : ils changent toute la liste, on ne doit pas les manquer. */
.trn-classer button { height: 32px; padding: 0 var(--s-3); border-radius: var(--r-micro); border: 0; background: transparent; color: var(--ink-2);
    font: inherit; font-size: var(--t-1); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; }
.trn-classer button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
@media (hover: hover) and (pointer: fine) { .trn-classer button:not([aria-pressed="true"]):hover { color: var(--ink); } }
@media (pointer: coarse), (max-width: 560px) { .trn-classer button { height: 44px; } }
.trn-matiere, .trn-matiere .select { width: auto; min-width: 13rem; }
.trn-item .saisie { width: 8.5rem; }
.trn-nb { margin-left: auto; font-size: var(--t-1); color: var(--ink-2); }
@media (max-width: 560px) {
    .trn-classer { width: 100%; } .trn-classer button { flex: 1 1 0; justify-content: center; }
    .trn-outils { position: static; }
    .trn-matiere { flex: 1 1 0; min-width: 0; } .trn-matiere .select { width: 100%; min-width: 0; }
    .trn-item .saisie { width: 7rem; }
    .trn-nb { width: 100%; margin-left: 0; }
}

/* La liste : un registre, des lignes séparées d'un filet, dans une seule surface. */
.trn-registre { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.trn-registre > li + li { border-top: 1px solid var(--line); }
.trn-ligne { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); width: 100%; min-height: 60px;
    padding: var(--s-3) var(--s-4); border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
    transition: background-color var(--d-1) var(--ease-doux); }
.trn-ligne > .trn-point { align-self: start; margin-top: 8px; }
@media (hover: hover) and (pointer: fine) { .trn-ligne:hover { background: color-mix(in srgb, var(--ep, var(--ink-3)) 6%, var(--card)); } }
/* Le registre rogne ce qui dépasse : l'anneau du système est reporté à l'intérieur de la ligne. */
.trn-ligne:focus-visible { box-shadow: inset 0 0 0 1.5px var(--accent), inset 0 0 0 4px var(--accent-soft); border-radius: 0; }
.trn-ligne-corps { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trn-ligne-titre { font-size: var(--t-2); font-weight: 600; color: var(--ink); line-height: 1.35; }
.trn-ligne-theme { font-weight: 400; color: var(--ink-2); }
.trn-ligne-meta { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--t-1); color: var(--ink-3); }
/* Le point de séparation suit le fragment qu'il clôt : au retour à la ligne, il reste en fin de ligne. */
.trn-ligne-meta > span:not(:last-child)::after { content: "·"; margin: 0 6px; }
.trn-ligne-type { color: var(--ink-2); font-weight: 500; }
.trn-ligne-video { display: inline-flex; align-items: center; gap: 3px; }
.trn-ligne-fin { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-3); }
@media (max-width: 560px) { .trn-ligne { padding: var(--s-3); gap: var(--s-2) var(--s-3); } .trn-ligne-fin .puce { height: 24px; padding: 0 8px; } }
.trn-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--t-1); color: var(--ink-3); }

/* Rangée par matière ou par item : des groupes repliables, qui disent leur contenu fermés. */
.trn-groupes { display: flex; flex-direction: column; }
.trn-groupe + .trn-groupe { border-top: 1px solid var(--line); }
.trn-groupe-tete { margin: 0; font-size: var(--t-2); font-weight: 600; }
.trn-groupe-bouton { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 52px; padding: var(--s-2) var(--s-1);
    border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-ctrl); }
@media (hover: hover) and (pointer: fine) { .trn-groupe-bouton:hover { background: var(--card-2); } }
.trn-groupe-caret { flex: none; color: var(--ink-3); transition: transform var(--d-2, 180ms) var(--ease-doux); }
.trn-groupe-bouton[aria-expanded="true"] .trn-groupe-caret { transform: rotate(90deg); }
.trn-groupe-titre { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s-2); }
.trn-groupe-num { flex: none; min-width: 3ch; }
.trn-groupe-nom { min-width: 0; font-weight: 400; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trn-groupe-mat { font-weight: 500; }
.trn-groupe-compte { flex: none; font-size: var(--t-1); font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.trn-groupe-faits { color: var(--ok-text); }
.trn-groupe--ouvert .trn-registre { margin: 0 0 var(--s-4); }

.trn-vide, .trn-vide-section { margin: 0; padding: var(--s-5); border: 1px dashed var(--line-2, var(--line)); border-radius: var(--r-card); color: var(--ink-2); }
.trn-vide-section p { margin: 0 0 var(--s-1); }

/* La fiche d'un sujet : le bandeau teinté, l'action, puis ce que le sujet couvre et ses dossiers. */
.qcm-annale { display: flex; flex-direction: column; gap: var(--s-5); max-width: 920px; }
.trn-sujet-tete { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-5);
    border: 1px solid color-mix(in srgb, var(--ep, var(--ink-3)) 26%, var(--line)); border-radius: var(--r-card);
    background: color-mix(in srgb, var(--ep, var(--ink-3)) 8%, var(--card)); }
.trn-sujet-tete h1 { margin: var(--s-1) 0 0; font-size: var(--t-6); font-weight: 600; line-height: var(--lh-serre); letter-spacing: -.02em; text-wrap: balance; }
.trn-sujet-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0; font-size: var(--t-1); color: var(--ink-2); }
.trn-sujet-theme { margin: 0; max-width: 68ch; color: var(--ink-2); line-height: var(--lh-lecture); }
.trn-sujet-lancer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); width: 100%; }
.trn-sujet-lancer .trn-aide { flex: 1 1 240px; }
@media (max-width: 560px) { .trn-sujet-tete { padding: var(--s-4); } .trn-sujet-tete h1 { font-size: var(--t-5); } .trn-sujet-lancer .btn-primaire { width: 100%; } }
.trn-section h2 { margin: 0 0 var(--s-3); font-size: var(--t-4); font-weight: 600; }
.trn-section > .trn-aide { margin-top: var(--s-2); }
.trn-videos { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.trn-seance-video { margin-top: var(--s-1); }
.trn-revue-videos { margin-bottom: var(--s-4); }
.trn-matieres { display: flex; flex-wrap: wrap; gap: 6px; }
.trn-matieres-plus summary { display: list-item; padding: 12px 0; width: fit-content; cursor: pointer; font-weight: 500; color: var(--ink-2); }
.trn-matieres-plus[open] summary { margin-bottom: var(--s-2); }
.trn-items { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px var(--s-4); }
/* 36 px + 10 px d'écart : la zone de touche s'étend de 4 px, sans chevaucher sa voisine. */
.trn-item-lien { min-height: 36px; text-align: left; }
.trn-item-lien::after { inset: -4px -6px; }
.trn-items-plus { margin-top: var(--s-3); }
.trn-items-plus summary { display: list-item; padding: 12px 0; width: fit-content; cursor: pointer; font-weight: 500; color: var(--ink-2); }
.trn-dossiers { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.trn-dossier { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.trn-dossier + .trn-dossier { border-top: 1px solid var(--line); }
.trn-dossier-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: var(--t-1); font-weight: 600; color: var(--ink-2);
    background: color-mix(in srgb, var(--ep, var(--ink-3)) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--ep, var(--ink-3)) 34%, var(--line)); }
.trn-dossier-corps { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trn-dossier-titre { font-weight: 500; }
.trn-dossier-meta { font-size: var(--t-1); color: var(--ink-3); }
@media (max-width: 560px) { .trn-dossier { grid-template-columns: 32px minmax(0, 1fr); } .trn-dossier .btn { grid-column: 2; justify-self: start; } }

/* En épreuve : le cas du dossier, sur un fond à peine teinté du type, relu au-dessus de chaque question. */
.trn-cas { margin-bottom: var(--s-4); padding: var(--s-2) var(--s-4) var(--s-3); border: 1px solid color-mix(in srgb, var(--ep, var(--ink-3)) 26%, var(--line));
    border-radius: var(--r-card); background: color-mix(in srgb, var(--ep, var(--ink-3)) 6%, var(--card)); }
.trn-cas summary { display: list-item; padding: 12px 0; cursor: pointer; font-weight: 600; line-height: var(--lh-ui); }
.trn-cas-q { font-weight: 400; color: var(--ink-3); }
.trn-cas-texte { margin-top: var(--s-1); }
/* Les énoncés d'EDN.fr arrivent justifiés en style en ligne : des rivières au téléphone. */
.trn-cas-texte, .trn-cas-texte [style*="justify"] { text-align: left !important; }
/* Les questions déjà passées du dossier : sous le cas, séparées de lui par un filet ; chaque énoncé à sa place,
   les propositions repliées pour ne pas allonger la relecture. */
.trn-precedentes { margin-top: var(--s-3); padding-top: var(--s-1); border-top: 1px solid color-mix(in srgb, var(--ep, var(--ink-3)) 22%, var(--line)); }
.trn-cas .trn-precedentes > summary { padding: 10px 0; }
.trn-prec-ol { list-style: none; margin: 0; padding: 0; }
.trn-prec { padding: var(--s-2) 0; border-top: 1px dashed var(--line); }
.trn-prec:first-child { border-top: 0; }
.trn-prec-rang { margin: 0 0 4px; font-size: var(--t-1); font-weight: 600; color: var(--ink-3); }
.trn-prec .qcm-enonce, .trn-prec .qcm-enonce [style*="justify"] { text-align: left !important; }
.trn-cas .trn-prec-props > summary { padding: 6px 0; font-weight: 500; font-size: var(--t-1); color: var(--ink-2); }
.trn-prec-liste { margin: 4px 0 0; padding-left: 0; list-style: none; }
.trn-prec-liste li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0 4px 22px; position: relative; color: var(--ink-2); }
.trn-prec-cochee { color: var(--ink) !important; font-weight: 500; }
.trn-prec-marque { position: absolute; left: 0; top: 6px; color: var(--accent-text); }
.qcm-seance-mode .trn-point { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.ann-revue h2 { margin: var(--s-6) 0 var(--s-3); }
.trn-revue-dossier { margin: var(--s-5) 0 var(--s-2); font-size: var(--t-3); }
.ann-revue .trn-cas { margin-bottom: var(--s-3); }

.qcm-q--revue { margin-bottom: var(--s-3); }
.qcm-q--rate { border-left: 3px solid var(--danger); }
.qcm-revue-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4) 0; }
.qcm-revue-rang { font-weight: 600; }
.qcm-revue-donnee { margin: var(--s-2) 0; }
/* QRP : les cases au-delà du nombre annoncé sont hors jeu, et le disent. */
.qcm-prop--bloquee { opacity: .5; cursor: not-allowed; }
/* ============================================================================================================
   Ce qui se pose AU-DESSUS du tableau : les fenêtres refaites (src/ui/modals/*) et la barre du lecteur. Tout
   est sur les jetons de src/styles/tokens.css. Quatre familles de préfixes :
     .adm-      chrome commun des fenêtres à listes (Lots, Podcast, et les quatre fenêtres du planning)
     .pl-       ce qui n'appartient qu'aux fenêtres du planning (B14)
     .ap-       l'écran « Planifier » (B3)
     .lecteur-  la barre du lecteur de podcast (B14), en bas de page

   Écran « Planifier » (lot B3, préfixe .ap-) : composer un planning n'est pas une alerte, c'est un travail. Un
   écran entier — rail haut, corps défilant en colonne, rail bas qui porte le résumé et l'unique action pleine —
   et une feuille pleine hauteur montant du bas sous 768 px. Les sections sont les colonnes du calendrier
   retournées à l'horizontale : un filet haut, un titre, des groupes de réglage expliqués en une phrase.

   Deux jetons locaux, préfixés, qui ne sont PAS des jetons du système (voir le brief de la surface) :
   --ap-rail-h (hauteur des deux rails) et --ap-colonne (largeur de lecture des réglages).
   ============================================================================================================ */
/* ============================================================================================================
   Chrome commun des fenêtres à listes (.adm-) — Lots, Podcast (B12) et les fenêtres du planning (B14).
   Écrit au lot B12 dans src/styles/pages/gestion.css, remonté ici au lot de clôture comme ce brief l'annonçait :
   une fenêtre à listes n'appartient pas à une page. Voile d'encre flouté, boîte fermée par un filet et l'ombre
   flottante, tête à filet bas, corps défilant, et un pied qui porte l'action que l'on est venu faire — elle ne
   descend jamais avec le corps. Sous 768 px, feuille collée en bas : elle monte, elle ne se réduit pas.
   ============================================================================================================ */
.adm-voile { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--voile); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: var(--s-4); animation: adm-voile-entree var(--d-2) var(--ease-doux); }
@keyframes adm-voile-entree { from { opacity: 0; } }
.adm-fen { display: flex; flex-direction: column; width: 100%; max-height: min(92vh, 900px); border-radius: var(--r-card);
    background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-2); overflow: hidden;
    animation: adm-fen-entree var(--d-3) var(--ease-doux); }
@keyframes adm-fen-entree { from { opacity: 0; transform: scale(.96) translateY(8px); } }
.adm-fen--lots { max-width: 680px; }
.adm-fen--podcast { max-width: 760px; }
.adm-fen--partiels { max-width: 680px; }
.adm-fen--sommaire { max-width: 640px; }
.adm-fen--fiche { max-width: 860px; }
.adm-fen--scinder { max-width: 680px; }
.adm-tete { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--line); }
.adm-tete-texte { flex: 1; min-width: 0; }
.adm-tete h2 { margin: 0; font-size: var(--t-4); font-weight: 600; letter-spacing: -.02em; }
.adm-tete-sous { margin: 2px 0 0; font-size: var(--t-1); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-corps { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
/* Colonne de fenêtre : rien ne se tasse, tout garde sa hauteur propre (sinon les onglets repliés débordent). */
.adm-corps > * { flex: 0 0 auto; }
.adm-intro { margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
/* Le pied porte l'action que l'on est venu faire : elle ne descend jamais avec le corps défilant. C'est le
   devis, et lui seul, qui défile dans le pied : les deux boutons restent entiers, même sur un écran de 844 px. */
.adm-pied { flex: none; min-height: 0; max-height: 60vh; display: flex; flex-wrap: wrap; justify-content: flex-end;
    gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); background: var(--bg); }
.adm-pied > .lots-envoi { flex: 0 0 100%; }
.adm-pied > .lots-devis { flex: 1 1 100%; min-height: 0; max-height: 32vh; overflow-y: auto; }
.adm-bloc { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.adm-bloc h3 { margin: 0; font-size: var(--t-2); font-weight: 600; }
.adm-bloc p { margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-2); }
.adm-note { margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--ink-3); }
.adm-erreur { margin: 0; font-size: var(--t-1); line-height: var(--lh-lecture); color: var(--danger-text); }
.adm-sect-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.adm-sect-tete h3 { margin: 0; font-size: var(--t-2); font-weight: 600; }
.adm-sect-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
@media (max-width: 767px) {
    .adm-voile { padding: 0; align-items: flex-end; }
    /* Feuille collée en bas : elle monte, elle ne se réduit pas — une échelle rognerait sa largeur pleine. */
    .adm-fen { max-width: none; max-height: 94vh; border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom); animation-name: adm-feuille-entree; }
}
@keyframes adm-feuille-entree { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .adm-voile, .adm-fen { animation: none; } }

/* Journal clair : la console des lots et l'avancement du podcast, en mono sur le fond creusé. */
.adm-console { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-2); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.adm-console-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.adm-console-tete h3 { margin: 0; font-size: var(--t-1); font-weight: 600; display: flex; align-items: center; gap: var(--s-2); }
.adm-lignes { max-height: 240px; overflow-y: auto; font-family: var(--font-mono); font-size: var(--t-1); line-height: 1.55; display: flex; flex-direction: column; gap: 2px; }
.adm-lignes > div { color: var(--ink-2); word-break: break-word; }
/* L'heure d'une ligne de journal, un identifiant de lot, un nombre de mots : de la mention, pas du texte. */
.adm-h { color: var(--ink-3); }
.adm-lignes .adm-n-ok { color: var(--ok-text); }
.adm-lignes .adm-n-erreur { color: var(--danger-text); }
.adm-lignes .adm-n-info { color: var(--accent-text); }
.adm-lignes .adm-vide { color: var(--ink-3); font-style: italic; }

/* La réglette de file : un segment par paquet, large au prorata, doublée de sa liste nommée. */
.adm-file { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.adm-file-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.adm-file-titre { font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.adm-file-types { margin: 2px 0 0; font-size: var(--t-1); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.adm-reglette { display: flex; gap: 1px; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--track); border: 1px solid var(--line); }
/* Les segments se partagent la largeur au prorata : aucune transition, la file se redessine d'un bloc. */
.adm-reglette > span { display: block; height: 100%; background: var(--track); }
.adm-reglette > span.est-ended { background: var(--ok); }
.adm-reglette > span.est-in_progress { background: var(--warn); }
.adm-reglette > span.est-canceling { background: var(--ink-3); }
.adm-file-lignes { display: flex; flex-direction: column; }
.adm-file-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-1) 0; border-top: 1px solid var(--line); font-size: var(--t-1); min-height: 44px; }
.adm-file-ligne:first-child { border-top: 0; }
.adm-file-rang { font-family: var(--font-mono); color: var(--ink-3); min-width: 48px; }
.adm-file-type { color: var(--ink); min-width: 104px; }
.adm-file-n { color: var(--ink-2); min-width: 92px; font-variant-numeric: tabular-nums; }
.adm-file-ligne .ico-btn { margin-left: auto; }


.ap-ecran {
    --ap-rail-h: 56px;
    --ap-colonne: 860px;
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--bg); color: var(--ink);
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
    animation: ap-entre var(--d-3) var(--ease-doux);
}
@keyframes ap-entre { from { opacity: 0; transform: scale(.99) translateY(6px); } }
body.ap-verrou { overflow: hidden; }

/* --- rail haut : le cadre du tableau, la même grammaire que la coquille */
.ap-rail { display: flex; align-items: center; gap: var(--s-2); min-height: var(--ap-rail-h); padding: var(--s-1) var(--s-3);
    background: var(--card); border-bottom: 1px solid var(--line); }
.ap-titre { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--t-4); font-weight: 600; letter-spacing: -.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le nom de la configuration en cours, quand il y en a une : une mention, pas un contrôle. */
.ap-rail-preset { flex: 0 1 auto; min-width: 0; color: var(--ink-3); font-size: var(--t-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) { .ap-rail { padding: var(--s-1) var(--s-5); gap: var(--s-3); } }

/* --- corps : une seule colonne de lecture, les réglages en sections fermées par un filet */
.ap-corps { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ap-colonne { max-width: var(--ap-colonne); margin: 0 auto; padding: var(--s-4) var(--s-4) var(--s-7); }
@media (min-width: 768px) { .ap-colonne { padding: var(--s-5) var(--s-5) var(--s-8); } }

.ap-section { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.ap-section > h2 { margin: 0; font-size: var(--t-4); font-weight: 600; letter-spacing: -.02em; }
.ap-section-phrase { margin: var(--s-1) 0 0; max-width: 62ch; color: var(--ink-2); font-size: var(--t-2); line-height: var(--lh-lecture); }
.ap-reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; gap: var(--s-6); margin-top: var(--s-5); }
.ap-reglage { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.ap-reglage--large { grid-column: 1 / -1; }
.ap-reglage > h3 { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-3); font-weight: 600; letter-spacing: -.02em; }
.ap-reglage > h3 .ico { flex-shrink: 0; color: var(--ink-3); }
.ap-reglage > p { margin: 0; max-width: 68ch; color: var(--ink-2); font-size: var(--t-1); line-height: var(--lh-lecture); }
.ap-reglage .btn { align-self: flex-start; }
.ap-note { margin: 0; max-width: 68ch; color: var(--ink-3); font-size: var(--t-1); line-height: var(--lh-lecture); }
.ap-vide-ligne { margin: 0; color: var(--ink-3); font-size: var(--t-1); }
.ap-champ-court { max-width: 260px; }
.ap-champ-nombre { max-width: 104px; text-align: center; }
.ap-reglage input[type="date"]::-webkit-calendar-picker-indicator { opacity: .75; cursor: pointer; }

/* --- carte « Laisser l'IA régler » : repliée par défaut, elle ne dispute pas la première question */
.ap-ia { overflow: hidden; }
.ap-ia-tete { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 56px; padding: var(--s-2) var(--s-4);
    background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer; }
.ap-ia-tete > .ico { flex-shrink: 0; color: var(--ink-3); }
.ap-ia-titre { font-size: var(--t-2); font-weight: 600; }
.ap-ia-aide { flex: 1 1 auto; min-width: 0; color: var(--ink-3); font-size: var(--t-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-ia-chevron { flex-shrink: 0; color: var(--ink-3); }
.ap-ia-corps { display: flex; flex-direction: column; gap: var(--s-3); padding: 0 var(--s-4) var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.ap-ia-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.ap-ia-modele { flex: 1 1 auto; color: var(--ink-3); font-size: var(--t-1); }
.ap-ia-erreur { margin: 0; color: var(--danger-text); font-size: var(--t-1); line-height: var(--lh-lecture); }
.ap-ia-retour { padding: var(--s-3); border-radius: var(--r-ctrl); background: var(--card-2); color: var(--ink-2); font-size: var(--t-1); line-height: var(--lh-lecture); }
.ap-ia-retour p { margin: 0; }
.ap-ia-retour b { color: var(--ink); font-weight: 600; }
/* Les avertissements de l'IA sont une liste : la remise à zéro de Tailwind leur retire leur puce, on la rend. */
.ap-ia-retour ul { margin: var(--s-2) 0 0; padding-left: 1.2em; list-style: disc; color: var(--warn-text); }
@media (max-width: 639px) { .ap-ia-aide { display: none; } }

/* --- la grille des matières : une case de 44 px, son repère de famille, son nom, son compte d'items */
.ap-matieres-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4); font-size: var(--t-1); }
.ap-matieres-compte { color: var(--ink-3); }
.ap-matieres { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 2px; }
.ap-matiere { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-2);
    border-radius: var(--r-ctrl); color: var(--ink-3); font-size: var(--t-2); cursor: pointer;
    transition: background var(--d-2) var(--ease-doux), color var(--d-2) var(--ease-doux); }
.ap-matiere input { width: 18px; height: 18px; flex-shrink: 0; margin: 0; cursor: pointer; }
.ap-matiere-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le compte d'items : un chiffre aligne a droite, en chiffres tabulaires. */
.ap-matiere-n { flex-shrink: 0; min-width: 3ch; text-align: right; color: var(--ink-3); font-size: var(--t-1); }
/* Le repere de famille : les six teintes de la charte reduites a une barre de 4 px, devant le nom. Elle ne porte
   aucun sens seule (le nom est ecrit juste apres, la barre est aria-hidden) ; elle donne a une grille de 38 lignes
   en encre 3 la respiration du monde. La teinte vient de --mat, pose par .mat-<famille> (composants.css). */
.ap-matiere .ap-fam, .ap-ordre-ligne .ap-fam { flex-shrink: 0; width: 4px; height: 20px; border: 0; border-radius: 2px;
    background-color: color-mix(in srgb, var(--mat, var(--ink-3)) 75%, transparent); }
.ap-matiere:not(.ap-matiere--on) .ap-fam { background-color: color-mix(in srgb, var(--mat, var(--ink-3)) 35%, transparent); }
.ap-matiere--on { color: var(--ink); }
.ap-matiere--on .ap-matiere-n { color: var(--ink-2); }
.ap-matiere:focus-within { background: var(--card-2); }
.ap-matiere:has(input:focus-visible) { box-shadow: var(--anneau-focus); }
@media (hover: hover) and (pointer: fine) { .ap-matiere:hover { background: var(--card-2); color: var(--ink); } }

/* --- l'ordre de priorité : un rang saisissable, deux chevrons */
.ap-ordre { list-style: none; margin: 0; padding: 0; }
.ap-ordre-ligne { display: grid; grid-template-columns: 60px 4px minmax(0, 1fr) auto; align-items: center; gap: var(--s-2);
    min-height: 44px; border-bottom: 1px solid var(--line); }
.ap-ordre-ligne:last-child { border-bottom: 0; }
.ap-ordre-rang { width: 60px; padding: 0 4px; text-align: center; font-size: var(--t-1); }
.ap-ordre-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-2); }
.ap-ordre-fleches { display: flex; gap: 2px; }
.ico-btn-sm { position: relative; width: 36px; height: 36px; }
.ico-btn-sm::after { content: ""; position: absolute; inset: -4px; }
.ico-btn-sm .ico { width: 16px; height: 16px; }

/* --- interrupteurs, choix, plafonds */
.ap-bascule { display: flex; align-items: flex-start; gap: var(--s-2); min-height: 44px; padding: var(--s-2) 0;
    font-size: var(--t-2); color: var(--ink); cursor: pointer; }
.ap-bascule input { width: 18px; height: 18px; flex-shrink: 0; margin: 3px 0 0; cursor: pointer; }
.ap-bascule:has(input:focus-visible) { box-shadow: var(--anneau-focus); border-radius: var(--r-ctrl); }
.ap-plafonds { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s-3); max-width: 420px; }
.ap-plafonds .saisie { max-width: none; }
.ap-lot2 { display: flex; flex-direction: column; gap: var(--s-3); padding-left: var(--s-4); border-left: 1px solid var(--line); }

.ap-choix { display: flex; flex-direction: column; gap: var(--s-2); }
.ap-choix-ligne { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line-2);
    border-radius: var(--r-ctrl); background: var(--card); cursor: pointer;
    transition: border-color var(--d-2) var(--ease-doux), background var(--d-2) var(--ease-doux); }
.ap-choix-ligne input { width: 18px; height: 18px; flex-shrink: 0; margin: 2px 0 0; cursor: pointer; }
.ap-choix-ligne > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--t-2); }
.ap-choix-ligne b { font-weight: 600; }
.ap-choix-aide { color: var(--ink-2); font-size: var(--t-1); line-height: var(--lh-lecture); }
.ap-choix-ligne--on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.ap-choix-ligne:has(input:focus-visible) { box-shadow: var(--anneau-focus); }
@media (hover: hover) and (pointer: fine) { .ap-choix-ligne:hover { border-color: var(--ink-3); } }

/* --- partiels et regroupement */
.ap-partiels { list-style: none; margin: 0; padding: 0; }
.ap-partiel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2);
    min-height: 44px; padding: var(--s-1) 0; border-bottom: 1px solid var(--line); }
.ap-partiel:last-child { border-bottom: 0; }
.ap-partiel label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); min-width: 0; font-size: var(--t-2); cursor: pointer; }
.ap-partiel-nom { overflow: hidden; text-overflow: ellipsis; }
.ap-partiel-date { color: var(--ink-3); font-size: var(--t-1); }
.ap-partiel .select { font-size: var(--t-1); }

.ap-regroup { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.ap-regroup-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-1); color: var(--ink-2); cursor: pointer; }
.ap-regroup-ligne .saisie { width: 104px; }
.ap-regroup-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ap-regroup-actions .btn { align-self: auto; }

/* --- rail bas : le résumé recompté, puis l'unique action pleine */
.ap-bas { background: var(--card); border-top: 1px solid var(--line); box-shadow: var(--shadow-2);
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); }
.ap-bas-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3) var(--s-4);
    max-width: var(--ap-colonne); margin: 0 auto; }
.ap-resume { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin: 0; min-width: 0; min-height: 26px; }
.ap-resume-chiffres { font-size: var(--t-2); font-weight: 600; color: var(--ink); }
.ap-resume-aide { color: var(--ink-3); font-size: var(--t-1); line-height: var(--lh-ui); }
/* L'aimant et sa phrase : côte à côte tant qu'elles tiennent, la phrase passe dessous sinon. Sans la base de
   24ch, la phrase se pliait en cinq lignes dans le reste de la ligne au téléphone. */
.ap-resume-alerte { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); min-width: 0; }
.ap-resume-alerte .ap-resume-aide { flex: 1 1 24ch; min-width: 0; }
.ap-resume-alerte .lien-bouton { font-size: var(--t-1); }
.ap-resume-etat { color: var(--ink-3); font-size: var(--t-1); }
.ap-bas-actions { display: flex; align-items: center; gap: var(--s-2); }
@media (min-width: 768px) { .ap-bas { padding: var(--s-3) var(--s-5); } }

/* --- au doigt : une feuille pleine hauteur, le rail bas empilé, les actions en pleine largeur */
@media (max-width: 767px) {
    .ap-ecran { animation-name: ap-monte; }
    .ap-bas-inner { grid-template-columns: minmax(0, 1fr); }
    .ap-bas-actions .btn { flex: 1 1 auto; }
    .ap-reglages { gap: var(--s-5); }
    .ap-matieres { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .ap-lot2 { padding-left: var(--s-3); }
}
@keyframes ap-monte { from { opacity: .6; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .ap-ecran { animation: none; } .ap-matiere, .ap-choix-ligne { transition: none; } }

/* --- menus et formulaires ancrés ouverts DEPUIS l'écran : le plan des menus (30) passe sous celui des fenêtres
   (40), donc le menu des configurations et le formulaire « Enregistrer ces réglages » disparaissaient derrière
   l'écran. Tant qu'il est ouvert (body.ap-verrou), ils montent d'un cran au-dessus de lui. */
body.ap-verrou .menu { z-index: calc(var(--z-modal) + 2); }
body.ap-verrou .voile-menu { z-index: calc(var(--z-modal) + 1); }

/* ============================================================================================================
   Fenêtres du planning (lot B14, préfixe .pl-) : partiels, sommaire NotebookLM, fiche de séance, scindage.
   Elles n'inventent pas de cadre — c'est le chrome .adm- ci-dessus — et pas de matière : le registre, la section
   à filet haut, l'aimant et la jauge du système. Ce fichier ne porte que ce qui leur appartient en propre.
   ============================================================================================================ */
/* Le focus entre sur la fenêtre pour que le lecteur d'écran lise son titre. Elle n'est pas un contrôle : pas
   d'anneau. Tout ce qui se manipule à l'intérieur garde le sien (:focus-visible), qui n'est pas touché ici. */
.pl-fen:focus { outline: none; }
.pl-pied { align-items: center; }
/* Le pied de la fiche : la note prend la place restante, les deux boutons ne se séparent jamais. */
.pl-pied-note { flex: 1 1 14ch; min-width: 0; }

/* --- sections d'une fenêtre : la même découpe que partout, un filet haut et un titre 17 px */
.pl-sect { display: flex; flex-direction: column; gap: var(--s-3); }
.pl-sect--filet { margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.pl-sect > h3 { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-3); font-weight: 600; letter-spacing: -.02em; }
.pl-sect > h3 .ico { flex-shrink: 0; color: var(--ink-3); }
.pl-vide { padding: var(--s-5) var(--s-3); }
/* Un lien-bouton est une action, pas un bloc : dans une colonne flex il s'étirait et son texte se centrait. */
.pl-sect > .lien-bouton { align-self: flex-start; }

/* --- le registre des partiels : une ligne par partiel, deux niveaux, la suppression à droite */
.pl-registre { display: flex; flex-direction: column; }
.pl-exam { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.pl-exam:first-child { border-top: 0; }
.pl-exam-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pl-exam-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); min-width: 0; }
.pl-exam-nom { font-size: var(--t-2); font-weight: 600; }
.pl-exam-date { color: var(--ink-2); font-size: var(--t-1); }
.pl-exam-mats { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-exam-mats .puce { height: 24px; }
.pl-exam-barres:empty { display: none; }
/* Un partiel passé s'éteint, comme un jour passé du calendrier : il se lit encore, il ne se dispute plus. */
.pl-exam--passe .pl-exam-nom { color: var(--ink-2); font-weight: 500; }
.pl-exam--passe .pl-exam-mats { opacity: .7; }
.pl-exam .ico-btn { flex-shrink: 0; }

/* --- le formulaire d'ajout : deux champs, puis les matières en aimants pressables */
.pl-ajout-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: var(--s-3); }
.pl-ajout-champs input[type="date"]::-webkit-calendar-picker-indicator { opacity: .75; cursor: pointer; }
.pl-mats { display: flex; flex-wrap: wrap; gap: var(--s-1); }
/* Un aimant de matière qui se presse : 36 px de haut, zone pointable portée à 44 px par le pseudo-élément. */
.pl-mat { position: relative; height: 36px; cursor: pointer; transition: border-color var(--d-2) var(--ease-doux), background-color var(--d-2) var(--ease-doux); }
.pl-mat::after { content: ""; position: absolute; inset: -4px; }
.pl-mat .ico { flex-shrink: 0; margin-left: -2px; color: var(--accent); }
.pl-mat[aria-pressed="true"] { border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 8%, var(--card)); color: var(--ink); font-weight: 600; }
.pl-mat:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pl-mat:hover { border-color: var(--ink-3); } .pl-mat[aria-pressed="true"]:hover { border-color: var(--accent-strong); } }

/* --- les deux textes du sommaire, et le bouton qui dit ce qu'il a fait */
.pl-bloc { gap: var(--s-2); }
.pl-bloc-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.pl-bloc .btn { align-self: flex-start; }
.pl-compte { font-size: var(--t-1); font-weight: 500; color: var(--ink-3); }
.pl-compte--trop { color: var(--danger-text); }
.pl-mono { font-family: var(--font-mono); }
.pl-ia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2);
    padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card-2); }
.pl-ia-etat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; min-width: 0; font-size: var(--t-1); }
/* Deux libellés dans un même bouton : « Copier … » au repos, « Copié » pendant 1,6 s. Rien ne se redessine,
   donc rien ne saute ; la largeur est retenue par le plus long des deux. */
.pl-copier { position: relative; }
.pl-copier-fait, .pl-copier[data-copie] .pl-copier-repos { position: absolute; opacity: 0; pointer-events: none; }
.pl-copier[data-copie] .pl-copier-fait { position: static; opacity: 1; }
.pl-copier-repos, .pl-copier-fait { display: inline-flex; align-items: center; gap: var(--s-2); }
.pl-copier[data-copie] { border-color: var(--ok); color: var(--ok-text); }
.pl-copier[data-copie].btn-primaire { background: var(--ok); color: var(--on-ok); border-color: transparent; }

/* --- le scindage : la consigne, l'historique des propositions, la liste des parties */
.pl-consigne { color: var(--ink-2); font-size: var(--t-2); white-space: pre-line; }
.pl-ia-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); }
.pl-ia-nb { flex: 0 0 auto; width: 168px; }
.pl-ia-nb .select { height: 36px; font-size: var(--t-1); }
.pl-hist { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-1); }
.pl-hist-item { display: inline-flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: var(--r-ctrl); overflow: hidden; }
.pl-hist-voir, .pl-hist-oubli { border: 0; background: none; color: var(--ink-2); font: inherit; cursor: pointer; }
.pl-hist-voir { padding: 0 var(--s-2); min-height: 36px; font-weight: 500; }
.pl-hist-voir[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.pl-hist-oubli { display: inline-flex; align-items: center; padding: 0 6px; border-left: 1px solid var(--line); color: var(--ink-3); }
.pl-hist-item:focus-within { box-shadow: var(--anneau-focus); }
@media (hover: hover) and (pointer: fine) {
    .pl-hist-voir:hover { background: var(--card-2); color: var(--ink); }
    .pl-hist-oubli:hover { background: var(--danger-soft); color: var(--danger-text); }
}
.pl-reprise { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2);
    padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--card-2);
    font-size: var(--t-1); color: var(--ink-2); }
.pl-reprise > span { flex: 1 1 22ch; min-width: 0; }
.pl-parties { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pl-partie { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--t-1); }
.pl-partie:first-child { border-top: 0; }
.pl-partie-rang { flex: 0 0 2ch; text-align: right; color: var(--ink-3); }
.pl-partie-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-partie-nom { color: var(--ink); font-size: var(--t-2); font-weight: 500; }
.pl-partie-nom .puce { height: 22px; margin-left: var(--s-1); }
.pl-partie-sections { color: var(--ink-2); line-height: var(--lh-lecture); }
.pl-partie-raison { color: var(--ink-3); line-height: var(--lh-lecture); }

/* --- la fiche de séance. Le corps vient du serveur, habillé par .fiche-planner (src/styles/legacy.css, hors
   périmètre de ce lot et partagé avec la page imprimable de api.php). DANS LA FENÊTRE, et là seulement, ses
   trois défauts hérités passent sur le système : le corps remonte du 14 px hors échelle au corps de 15 px, et
   le titre de section cesse d'être un sur-titre de 11 px en capitales espacées et graisse 800 sur aplat cobalt
   — c'est un titre de 17 px sur filet haut, comme dans toutes les autres surfaces. La page imprimable, elle,
   garde son dessin : rien n'est modifié dans legacy.css. */
.adm-fen--fiche .fiche-planner { max-width: 68ch; font-size: var(--t-2); line-height: var(--lh-lecture); }
.adm-fen--fiche .fiche-planner h2 { margin: var(--s-5) 0 var(--s-2); padding: var(--s-3) 0 0; border-radius: 0;
    border-top: 1px solid var(--line); background: none; color: var(--ink);
    font-size: var(--t-3); font-weight: 600; letter-spacing: -.02em; text-transform: none; }
.adm-fen--fiche .fiche-planner > h2:first-child,
.adm-fen--fiche .fiche-planner .sec:first-child h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.adm-fen--fiche .fiche-planner table { font-size: var(--t-1); }
.adm-fen--fiche .fiche-planner th { background: var(--card-2); font-weight: 600; }
.adm-fen--fiche .fiche-planner code { background: var(--card-2); }

@media (max-width: 639px) {
    /* La corbeille reste sur la ligne de son partiel : en la laissant passer à la ligne, elle se retrouvait
       seule à gauche sous les aimants, orpheline de l'objet qu'elle supprime. Le corps se rétrécit, elle non. */
    .pl-ia-nb { width: 100%; }
    .pl-pied-note { flex-basis: 100%; }
    .pl-pied .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .pl-mat { transition: none; } }

/* ============================================================================================================
   La barre du lecteur (lot B14, src/ui/components/lecteur.js). Elle vit ici parce qu'elle est, avec les
   fenêtres, l'autre chose qui se pose au-dessus du tableau. Une barre carte fermée par un filet haut, sur le
   plan --z-player, au-dessus de la barre basse au téléphone.

   --lecteur-h est un jeton LOCAL, pas un jeton du système : la barre y écrit sa hauteur mesurée, et le bas de
   page la lit pour réserver la place. C'est ce qui remplace document.body.style.paddingBottom, que l'ancienne
   barre écrivait en JavaScript à partir de window.innerWidth — donc faux après une rotation.
   ============================================================================================================ */
:root { --lecteur-h: 0px; }
/* La place est réservée D'UN COUP, au moment où la barre part du bas, et rendue une fois qu'elle est sortie
   (lecteur.js tient les deux instants). Elle n'est pas animée : une transition sur padding-bottom ferait
   recalculer la mise en page du document à chaque image pendant 240 ms, pour une hauteur que personne ne
   regarde — c'est la barre qui glisse, en transform, et c'est elle qu'on suit. Rien n'est jamais recouvert. */
body { padding-bottom: var(--lecteur-h); }

.lecteur { position: fixed; left: 0; right: 0; z-index: var(--z-player);
    bottom: calc(var(--barre-basse-h) + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--line); box-shadow: var(--shadow-2);
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
    transition: transform var(--d-3) var(--ease-doux); }
@media (min-width: 768px) { .lecteur { bottom: 0; padding-bottom: env(safe-area-inset-bottom); } }
/* Elle glisse depuis le bas, et repart par le bas. Deux classes, posées le temps du mouvement. */
.lecteur--entre, .lecteur--sort { transform: translateY(100%); }

.lecteur-colonne { display: flex; flex-direction: column; gap: var(--s-2); max-width: var(--largeur); margin: 0 auto;
    padding: var(--s-2) var(--s-3) var(--s-3); }
@media (min-width: 768px) { .lecteur-colonne { padding: var(--s-2) var(--s-5) var(--s-3); } }
.lecteur-haut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
/* Au-delà de 768 px, le transport est au milieu de la barre et y reste, quelle que soit la longueur du titre :
   trois colonnes, dont les deux latérales se partagent également le reste. */
@media (min-width: 768px) {
    .lecteur-haut { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .lecteur-droite { justify-content: flex-end; }
}

.lecteur-titre { flex: 1 1 200px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); min-width: 0; }
@media (min-width: 768px) { .lecteur-titre { flex-wrap: nowrap; } .lecteur-titre .puce { flex-shrink: 0; } }
.lecteur-nom { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--t-2); font-weight: 500; overflow: hidden; }
.lecteur-nom-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lecteur-nom .ico { flex-shrink: 0; color: var(--ink-3); }
.lecteur-erreur { margin: 0; font-size: var(--t-1); color: var(--danger-text); line-height: var(--lh-ui); }

/* Les commandes : l'unique action pleine de la barre au centre, les deux sauts en fantôme réduit de part et
   d'autre. Les sept vitesses de l'ancienne barre tenaient dans des boutons de 20 px : elles sont parties dans
   le menu du système, derrière un bouton qui dit la vitesse en cours. */
.lecteur-commandes { display: flex; align-items: center; justify-content: center; gap: var(--s-2); }
.lecteur-saut { flex-shrink: 0; gap: 4px; }
.lecteur-jouer { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 48px; height: 48px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
    cursor: pointer; transition: background var(--d-2) var(--ease-doux), transform var(--d-1) var(--ease-doux); }
.lecteur-jouer:active { transform: scale(.97); }
/* L'anneau commun se noierait dans un bouton déjà cobalt : celui-ci se pose à distance, comme sur l'accueil. */
.lecteur-jouer:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
@media (hover: hover) and (pointer: fine) { .lecteur-jouer:hover { background: var(--accent-strong); } }

.lecteur-droite { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.lecteur-vitesse { min-width: 58px; }

/* La position : deux temps en mono tabulaire encadrant la réglette, qui prend tout le reste. */
.lecteur-position { display: flex; align-items: center; gap: var(--s-2); }
.lecteur-temps { flex-shrink: 0; min-width: 5ch; font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-3); }
.lecteur-temps:last-child { text-align: right; }
.lecteur-reglette { flex: 1 1 auto; min-width: 0; height: 24px; margin: 0; padding: 0; background: none;
    accent-color: var(--jauge); cursor: pointer; }
.lecteur-reglette:disabled { cursor: default; opacity: .5; }
.lecteur-reglette:focus-visible { outline: 0; box-shadow: var(--anneau-focus); border-radius: var(--r-ctrl); }

/* Le toast monte au-dessus du lecteur : composants.css le cloue à la barre basse, et ce lot ne modifie pas ce
   fichier — la hauteur mesurée du lecteur s'ajoute donc ici, à la même formule. */
.toasts { bottom: calc(var(--barre-basse-h) + env(safe-area-inset-bottom) + var(--s-3) + var(--lecteur-h)); }
@media (min-width: 768px) { .toasts { bottom: calc(var(--s-5) + var(--lecteur-h)); } }

@media (max-width: 639px) {
    .lecteur-titre { flex: 1 1 100%; }
    .lecteur-commandes { flex: 1 1 auto; justify-content: flex-start; }
    .lecteur-saut { padding: 0 var(--s-2); }
}
@media (prefers-reduced-motion: reduce) {
    body, .lecteur, .lecteur-jouer { transition: none; }
    .lecteur--entre { transform: none; }
}