/* ─────────────────────────────────────────────────────────────
Le vocabulaire commun à toutes les pages : « la marge », en
polycopié bleu et jaune (choix du porteur, 6 octobre 2026). Ce
fichier est la seule source des couleurs et des polices — qu'elles
ne dérivent jamais d'un écran à l'autre.
La feuille blanche que le prof distribue, imprimée en deux encres : un bleu
de risographie pour ce qui est imprimé et pour agir, le jaune du
surligneur pour ce qu'il faut regarder. Il n'y a de rouge nulle
part, et le jaune ne dit jamais qu'une ligne est fausse. Clair par
défaut, en toute circonstance ; le sombre se demande par le bouton,
jamais par le réglage du système (décision du porteur, 15 septembre
2026).
Les polices se chargent dans chaque page :
Archivo élargie pour les titres, l'Atkinson Hyperlegible Next pour
le texte — dessinée pour que 1, l, I et 0, O ne se confondent
jamais —, et sa version à chasse fixe pour les étiquettes, comme
tapées à la machine.
───────────────────────────────────────────────────────────── */
:root{
--papier:#FFFFFF; --craie:#FFFFFF;
--encre:#1C1D27; --encre-2:#4C4E5E; --encre-3:#62646F;
--reglure:#D6D9E0; --filet:#D6D9E0; --grille:#EEF0F4;
--bleu:#2747B0; --bleu-f:#E3E8F8; --sur-bleu:#FFFFFF;
/* un aplat d'encre bleue, sous un texte blanc : reprendre, le bloc d'une série */
--aplat:#2747B0; --sur-aplat:#FFFFFF;
--fluo:#FFE83D; --sur-fluo:#1C1D27;
--posee:#2E6E4E; --tout-bon:#1E7748; --tout-bon-f:#E3F1E8;
--manque:#A94F0A; --manque-f:#FDEBD6;
--attente:#CDD0D8;
--bloc:#1C1D27; --bloc-texte:#FFFFFF; --bloc-doux:#B5B7C4;
/* les statistiques de l'accueil : ce qui tient, ce qui casse, ce qui n'est pas tranché */
--tient:#1E7748; --casse:#1C1D27; --nontranche:#CDD0D8;
/* le quadrillage d'un repère, celui du cahier */
--quadrillage:#CDD0D8;
/* le troisième encrage, réservé aux dessins des cours : ce qui vient du second terme, du second nombre, du second côté */
--rose:#C2185B;
--police-titre:"Archivo",ui-sans-serif,system-ui,sans-serif;
--police-texte:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",ui-sans-serif,system-ui,-apple-system,sans-serif;
--police-machine:"Atkinson Hyperlegible Mono",ui-monospace,Menlo,monospace;
/* la trame de points des aplats d'encre */
--trame:radial-gradient(rgba(255,255,255,.17) 1.15px,transparent 1.3px) 0 0/6px 6px;
}
:root[data-theme="sombre"]{
color-scheme:dark;
--papier:#14151D; --craie:#1C1E28;
--encre:#ECEBE4; --encre-2:#B3B4BE; --encre-3:#9A9BA6;
--reglure:#30323F; --filet:#30323F; --grille:#262833;
--bleu:#8FA6FF; --bleu-f:#1E2645; --sur-bleu:#14151D;
--aplat:#25367D; --sur-aplat:#FFFFFF;
--fluo:#FFE83D; --sur-fluo:#14151D;
--posee:#6BA88A; --tout-bon:#4FC48A; --tout-bon-f:#10251B;
--manque:#F0954A; --manque-f:#2A1A0B;
--attente:#3A3C4A;
--bloc:#262838; --bloc-texte:#F2F2F4; --bloc-doux:#A9ABB8;
--tient:#4FC48A; --casse:#ECEBE4; --nontranche:#3A3C4A;
--quadrillage:#353848;
--rose:#FF7FB6;
--trame:radial-gradient(rgba(255,255,255,.07) 1.15px,transparent 1.3px) 0 0/6px 6px;
}
*{box-sizing:border-box}
/* la place de la barre de défilement est gardée sur toutes les pages : une page
courte et une page longue ont la marge au même endroit */
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
/* le grain de la photocopie, à peine */
body{margin:0;background-color:var(--papier);color:var(--encre);font-size:17px;line-height:1.55;
font-family:var(--police-texte);-webkit-font-smoothing:antialiased;
background-image:url("data:image/svg+xml;utf8,")}
/* les titres : Archivo élargie, avec le léger décalage de deux encres mal calées */
h1,h2,h3,.titrage{font-family:var(--police-titre);font-weight:800;letter-spacing:-.01em;
font-variation-settings:"wdth" 118;font-stretch:118%;text-wrap:balance}
a{color:var(--bleu)}
:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.katex{font-size:1em}
[hidden]{display:none!important}
.invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* le surligneur : ce qu'il faut regarder, comme l'élève le surligne */
.surligne{background:linear-gradient(transparent 52%,var(--fluo) 52%,var(--fluo) 88%,transparent 88%);
padding:0 .12em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
:root[data-theme="sombre"] .surligne{color:var(--sur-fluo);background:linear-gradient(transparent 8%,var(--fluo) 8%,var(--fluo) 92%,transparent 92%)}
/* une étiquette tapée à la machine */
.machine{font-family:var(--police-machine);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
/* le QCM d'une partie de cours (règle 5, révisée le 8 octobre 2026) : la même
question sur la page du cours et dans le dépliant de l'écran de rédaction */
.qcm-cours{margin-top:16px;padding:12px 14px 14px;box-shadow:inset 0 0 0 2px var(--encre);background:var(--bleu-f)}
.qcm-cours .qcm-titre{margin:0 0 6px;font-family:var(--police-machine);font-size:12.5px;text-transform:uppercase;
letter-spacing:.04em;color:var(--encre-2)}
.qcm-cours .qcm-question{margin:0 0 10px;font-weight:700;line-height:1.45}
.qcm-cours .qcm-choix{display:grid;gap:8px}
.qcm-cours .qcm-choix button{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:inherit;font-size:16px;text-align:left;
background:var(--craie);color:var(--encre);border:0;box-shadow:inset 0 0 0 2px var(--filet);border-radius:2px;
padding:11px 14px;min-height:46px;cursor:pointer}
.qcm-cours .qcm-choix button:hover:not([aria-disabled="true"]){box-shadow:inset 0 0 0 2px var(--bleu)}
/* B104 : une réponse donnée se grise par aria-disabled, jamais disabled : le bouton garde le focus */
.qcm-cours .qcm-choix button[aria-disabled="true"]{cursor:default}
/* B105 : juste et faux, sans la couleur seule. Juste : un cadre d'encre de 2 px, la coche à main levée,
« juste » au bout ; faux : la proposition barrée d'un trait d'encre, « faux » au bout, et l'explication
dans un petit bloc noir, « Faux. » au surligneur, comme « Ça casse ici. ». Plus d'opacité réduite. */
.qcm-cours .qcm-choix button.juste{box-shadow:inset 0 0 0 2px var(--encre)}
.qcm-cours .qcm-choix .coche-p{flex:none;width:24px;height:24px;color:var(--tout-bon)}
.qcm-cours .qcm-choix .trait-c{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* B105 (relecture) : la proposition prend la place qui reste ; à 320 px, quand la coche, la formule et le mot
ne tiennent pas sur une ligne, le mot passe dessous au lieu de pousser le bouton hors de son cadre */
.qcm-cours .qcm-choix .prop{flex:1 1 0;min-width:min-content}
/* le trait, ligne par ligne : celui du navigateur sur un texte ; sur une formule composée (dont les morceaux ne
le portent pas), un trait d'encre tiré à mi-hauteur de chacune de ses lignes — une formule coupée en deux
lignes ne doit pas se lire comme une fraction */
.qcm-cours .qcm-choix button.faux .prop{text-decoration:line-through 2px var(--encre)}
.qcm-cours .qcm-choix button.faux .prop .katex-html{background:linear-gradient(var(--encre),var(--encre))
0 calc(50% - 3px)/100% 2px no-repeat}
.qcm-cours .qcm-choix .etat-p{margin-left:auto;padding-left:8px;color:var(--encre-2)}
.qcm-cours .qcm-retour{margin:10px 0 0;line-height:1.5}
/* B105 (relecture) : l'explication, même en petit bloc noir, garde son écart avec la question suivante */
.qcm-cours .qcm-retour p{margin:0 0 12px}
.qcm-cours .qcm-retour b{margin-right:6px}
.qcm-cours .qcm-retour .faux{padding:10px 14px;background:var(--bloc);background-image:var(--trame);color:var(--bloc-texte)}
.qcm-cours .qcm-retour .faux b{color:var(--fluo)}
.qcm-cours .qcm-deja{margin-left:8px;font-family:var(--police-machine);font-size:12px;font-weight:400;
text-transform:uppercase;letter-spacing:.04em;color:var(--tout-bon)}
/* la progression dans un cours : un point par partie, un pour le QCM de fin de
cours ; elle sert aussi de sommaire (décisions du porteur, 8 octobre 2026) */
.progression-c{max-width:70ch;margin:4px 0 8px;padding:12px 14px 6px;background:var(--craie);box-shadow:inset 0 0 0 2px var(--encre)}
.progression-c .prog-tete{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--encre-2)}
.progression-c .prog-compte{font-weight:700;color:var(--encre)}
.progression-c .prog-barre{display:flex;gap:4px;margin:8px 0 6px}
.progression-c .prog-barre span{flex:1;height:8px;border-radius:0;background:var(--grille);box-shadow:inset 0 0 0 1px var(--filet)}
.progression-c .prog-barre span.fait{background:var(--bleu);box-shadow:none}
.progression-c .prog-etapes{list-style:none;margin:0;padding:0}
.progression-c .prog-etapes a{display:flex;align-items:center;gap:10px;min-height:40px;color:var(--encre);text-decoration:none}
.progression-c .prog-etapes a:hover .nom{text-decoration:underline}
.progression-c .point{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
border-radius:0;box-shadow:inset 0 0 0 2px var(--bleu);font-size:12px;font-weight:700;color:transparent}
.progression-c li.fait .point{background:var(--bleu);color:var(--sur-bleu)}
.progression-c li.fait .nom{color:var(--encre-2)}
/* sur grand écran, la progression passe à droite du cours et le suit : elle remplit
le vide à côté de la colonne de lecture (demande du porteur, 8 octobre 2026) */
@media (min-width:1100px){
.cours-mise{display:grid;grid-template-columns:minmax(0,70ch) minmax(240px,300px);column-gap:48px;align-items:start}
.cours-mise > *{grid-column:1}
.cours-mise > .progression-c{grid-column:2;grid-row:1 / span 40;position:sticky;top:24px;margin-top:20px}
}
/* ── les verdicts d'une ligne : le bloc plein à fond perdu, l'encadré orange, le tireté ──
Les mêmes pour l'écran de rédaction (app/index.html) et l'essai des pages publiques
(service/publiques.py). --m et --g (marge et retrait) sont posés par le conteneur. */
/* le verdict : bloc plein, à fond perdu, par-dessus la marge */
.bloc{position:relative;z-index:1;background:var(--bloc);background-image:var(--trame);color:var(--bloc-texte);
padding:18px 18px 18px calc(var(--m) + var(--g))}
.bloc .gros{margin:0;color:var(--fluo);font-family:var(--police-titre);font-variation-settings:"wdth" 112;font-stretch:112%;font-size:24px;
line-height:1.1;font-weight:800;letter-spacing:-.03em}
.bloc p{margin:9px 0 0;font-size:16px;line-height:1.5;color:var(--bloc-doux);max-width:60ch}
.bloc .calme{margin-top:12px;font-size:13.5px;color:var(--bloc-doux);
border-top:1px solid rgba(255,255,255,.14);padding-top:10px}
.bloc .puce{margin-top:15px;font:inherit;font-size:15px;font-weight:700;background:var(--fluo);
color:var(--sur-fluo);border:0;padding:11px 18px;border-radius:2px;cursor:pointer;min-height:44px}
.bloc .puce.creuse{background:none;color:var(--bloc-texte);text-decoration:underline;
text-underline-offset:4px;padding-left:4px;padding-right:4px;margin-left:10px}
.bloc .puce[disabled]{opacity:.55;cursor:default}
.bloc :focus-visible{outline-color:var(--bloc-texte)}
/* juste, mais pas fini : l'orange de la charpente, celui du « il te manque
encore ». Surtout pas le bloc plein — rien n'est faux ici. */
.reste{margin:0 16px 14px calc(var(--m) + var(--g));padding:15px 16px 16px;border-radius:0;
background:var(--manque-f);box-shadow:inset 0 0 0 2px var(--manque)}
.reste .gros{margin:0;font-family:var(--police-titre);font-variation-settings:"wdth" 112;font-stretch:112%;font-size:20px;
line-height:1.14;font-weight:800;letter-spacing:-.03em;color:var(--manque)}
.reste p{margin:7px 0 0;font-size:16px;line-height:1.5;color:var(--encre-2)}
.reste .puce,.tirete .puce{margin-top:13px;font:inherit;font-size:15px;font-weight:700;
background:var(--bleu);color:var(--sur-bleu);border:0;padding:11px 18px;
border-radius:2px;cursor:pointer;min-height:44px}
/* je ne sais pas : le tireté n'accuse pas, jamais à fond perdu */
.tirete{margin:0 16px 14px calc(var(--m) + var(--g));padding:15px 16px 16px;border:2px dashed var(--encre);
border-radius:2px;background:var(--papier)}
.tirete .gros{margin:0;font-family:var(--police-titre);font-variation-settings:"wdth" 112;font-stretch:112%;font-size:20px;
line-height:1.12;font-weight:800;letter-spacing:-.03em}
.tirete p{margin:7px 0 0;font-size:16px;line-height:1.5;color:var(--encre-2)}
/* ── les astuces des cours et leurs dessins (demande du porteur, 25 octobre 2026) ──
Le dessin est écrit par le serveur dans son état FINAL (outils/animations.py) ; app/cours-anim.js ne fait
que rejouer ses apparitions. Tailles et ancrage par défaut : des attributs du