/*
THESIS: réviser un entretien, c'est répéter un ORAL — pas relire une fiche. La surface est la
  table du jury : on tire un sujet numéroté, le chronomètre tourne, puis la grille du jury juge.
  Refuse la carte centrée qui se retourne et l'anneau de progression des applis de flashcards.
OWN-WORLD: tapis vert du jury (fond drapé, ~60 % de la surface), tickets de sujet en carton
  crème à souche perforée et texte machine à écrire (Courier Prime), tampon vermillon pour
  l'unique action principale et les verdicts, chronomètre en chiffres condensés (Oswald),
  grille du jury réglée à la ligne. Aucune carte-icône-titre-texte, aucun anneau, aucun badge.
STORY: Fabio voit combien de sujets sont dus, tire, parle à voix haute, se juge contre la grille,
  est replanifié, et repart en connaissant ses sujets faibles.
FIRST VIEWPORT: à gauche la table avec l'éventail des sujets dus et le tampon TIRER UN SUJET ;
  à droite la grille du jury, 17 sujets sur 3 domaines avec leur trait de maîtrise.
  Mobile : empilé, le tampon d'abord.
FORM: le tirage d'un oral d'examen, candidat 3 sur 7, seed 11f3f040.
FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review,
  the verdict, and DESIGN.md
*/
:root {
  --baize: #12402f;
  --baize-deep: #0a2a1f;
  --baize-hi: #1a5540;
  --baize-line: rgba(233, 228, 212, .16);
  --fg: #e9e4d4;
  --fg-dim: #a6b8ab;
  --fg-faint: #6e8a7c;
  --card: #f4efe3;
  --card-2: #ebe4d3;
  --card-edge: #d9d0ba;
  --ink: #1d1a15;
  --ink-dim: #6b6455;
  --ink-faint: #a49c8c;
  --stamp: #c8321e;
  --stamp-deep: #9c2415;
  --ok: #2f7d4f;
  --amber: #d08a1e;
  --sel: rgba(200, 50, 30, .22);
  --disp: 'Oswald', 'Arial Narrow', sans-serif;
  --type: 'Courier Prime', 'Courier New', monospace;
  --sans: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow-ticket: 0 10px 24px -8px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .25);
  /* Jetons ajoutés pour le thème sombre (02/10). Deux rôles que `--card` confondait sont séparés :
     - `--card` reste LE PAPIER (tickets, feuilles, éditeur) et s'assombrit en thème sombre ;
     - `--cream` est la CRÈME POSÉE SUR LE TAPIS (filet de l'onglet actif, trait de maîtrise, cases de consolidation,
       pastilles, texte sur un tampon vermillon) : elle reste claire dans les deux thèmes, le tapis restant sombre ;
     - `--on-cream` : l'encre sur une pastille crème (toujours sombre).
     Le reste nomme ce qui était codé en dur sur le papier. */
  --cream: #f4efe3;
  --on-cream: #1d1a15;
  --card-in: #fbf8f0;        /* le papier plus clair des champs, du code et de l'éditeur */
  --card-gut: #f1ecdf;       /* la gouttière de l'éditeur maison */
  --card-sel: #efe5cc;       /* le fichier ouvert dans l'arborescence */
  --card-hi: rgba(255, 255, 255, .4);   /* survol d'un onglet de l'espace de travail */
  --card-rgb: 251, 248, 240;
  --card-ai: #e8e6df;        /* la réponse de l'IA d'atelier : papier gris bleuté */
  --card-ai-in: #f4f2ec;
  --field: #fff;             /* champs de saisie de l'espace de travail */
  --ink-rgb: 29, 26, 21;     /* rgba(var(--ink-rgb), .06) : les teintes d'encre sur le papier */
  --ink-deep: #000;
  --amber-deep: #a0651a;     /* ambre lisible sur le papier */
  --code-k: #8a2a12; --code-s: #2f6b3a; --code-a: #6a4c9e; --code-t: #1f4f8f; --code-n: #9b5a00;   /* pre.code : mot-clé, chaîne, annotation, type, nombre */
  --term: #17140f;           /* la console (sortie du programme) */
}
/* Thème sombre (02/10, demande Fabio). La scène ne change pas : c'est le même tapis, un peu plus profond (il fait
   nuit), et ce sont les CARTONS qui s'assombrissent — ardoise chaude, encre crème — parce que ce sont eux (leçons,
   éditeur, tickets) qui éclairaient l'écran. Le vermillon, le vert et l'ambre s'éclaircissent d'un cran pour rester
   lisibles sur l'ardoise. Posé par `data-theme="dark"` sur <html> (theme.js), jamais par préférence système seule :
   « auto » est un choix de l'élève, résolu par le script. */
:root[data-theme="dark"] {
  --baize: #0e3426;
  --baize-deep: #07211a;
  --baize-hi: #16483a;
  --baize-line: rgba(233, 228, 212, .14);
  --card: #262320;
  --card-2: #1f1d19;
  --card-edge: #3d382f;
  --card-in: #1b1916;
  --card-gut: #1f1d19;
  --card-sel: #363129;
  --card-hi: rgba(255, 255, 255, .06);
  --card-rgb: 38, 35, 32;
  --card-ai: #25272c;
  --card-ai-in: #1c1e22;
  --field: #15130f;
  --ink: #e9e4d4;
  --ink-dim: #a8a090;
  --ink-faint: #6f685c;
  --ink-rgb: 233, 228, 212;
  --ink-deep: #fff;
  --cream: #e9e4d4;
  --stamp: #e4553c;
  --stamp-deep: #f0917a;
  --ok: #5cbc82;
  --amber: #e0a23a;
  --amber-deep: #e8b65a;
  --code-k: #f0907a; --code-s: #93d4a2; --code-a: #c9aef2; --code-t: #8fbbf2; --code-n: #e8b65a;
  --term: #0d0c0a;
  --shadow-ticket: 0 10px 24px -8px rgba(0, 0, 0, .7), 0 2px 4px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--fg);
  background: var(--baize);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(0,0,0,.35), transparent 60%);
  min-height: 100vh;
}
::selection { background: var(--stamp); color: var(--cream); }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--baize-hi); border-radius: 6px; border: 2px solid var(--baize); }
* { scrollbar-color: var(--baize-hi) var(--baize); scrollbar-width: thin; }

/* ---------------------------------------------------------------- shell */
.top {
  display: flex; align-items: baseline; gap: 22px; padding: 22px 28px 0;
  max-width: 1360px; margin: 0 auto;
}
.brand { font-family: var(--disp); font-weight: 600; font-size: 22px; letter-spacing: .14em; text-transform: uppercase; }
.brand small { display: block; font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fg-dim); margin-top: -2px; }
nav.tabs { display: flex; gap: 2px; margin-left: auto; }
nav.tabs .ic { display: none; }          /* l'icône ne sert qu'à la barre mobile (voir @media) */
nav.tabs button {
  font-family: var(--disp); font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 14px; color: var(--fg-dim); border-bottom: 2px solid transparent; transition: color .2s;
}
nav.tabs button:hover { color: var(--fg); }
nav.tabs button.on { color: var(--fg); border-bottom-color: var(--cream); }
nav.tabs button b { font-family: var(--sans); font-weight: 600; font-size: 12px; margin-left: 6px; color: var(--on-cream);
  background: var(--cream); border-radius: 3px; padding: 1px 6px; vertical-align: 2px; letter-spacing: 0; }
main { max-width: 1360px; margin: 0 auto; padding: 26px 28px 80px; }
.rule { height: 1px; background: var(--baize-line); margin: 18px 0 0; }

h1 { font-family: var(--disp); font-weight: 500; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: .02em; line-height: 1.1; text-wrap: balance; }
h2 { font-family: var(--disp); font-weight: 500; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); }
h3 { font-family: var(--disp); font-weight: 500; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
p.lead { color: var(--fg-dim); max-width: 60ch; }
.dim { color: var(--fg-dim); }
.mono { font-family: var(--type); }