/* print.css — la fiche A4.  Split out of app.css by S0. TOKENS ONLY.
   MUST load last: the @media print block re-declares `body` at the same specificity as base.css,
   so source order is what makes the paper win on paper.
   Owner after Wave 0: S8 (le QR sur la fiche). */

/* ── print · la fiche A4, from the same data ───────────────────────────── */
.sheet-a4 { display: none; }
@media print {
  body { background: var(--paper); color: var(--paper-ink); font: 12.5px/1.5 var(--serif); }
  .shell, .veil, .nav { display: none !important; }
  .sheet-a4 { display: block; padding: 10mm 14mm; color: var(--paper-ink); }
  .pa-kick { font: 600 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-muted); }
  .pa-h { font: 400 26px/1.15 var(--serif); margin: 4mm 0 2mm; }
  .pa-sub { font: italic 400 13px/1.4 var(--serif); color: var(--paper-muted); margin-bottom: 5mm; }
  .pa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm 8mm; border-top: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule); padding: 3mm 0; margin-bottom: 5mm; }
  .pa-grid div b { font-family: var(--font); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-muted); display: block; }
  .pa-steps { margin: 0 0 5mm 5mm; }
  .pa-steps li { margin-bottom: 2mm; }
  .pa-role { border-left: 3px solid var(--paper-accent); padding: 2mm 4mm; background: var(--paper-wash); margin-bottom: 5mm; font-style: italic; }
  .pa-frames { display: flex; gap: 4mm; margin-bottom: 5mm; }
  .pa-frames figure { flex: 1; text-align: center; }
  .pa-frames svg { width: 100%; height: auto; border: 1px solid var(--paper-hair); border-radius: 3mm; }
  .pa-frames figcaption { font: 600 9px/1.3 var(--font); color: var(--paper-muted); margin-top: 1.5mm; }
  .pa-score table { width: 100%; border-collapse: collapse; font-family: var(--font); font-size: 11px; }
  .pa-score th, .pa-score td { border: 1px solid var(--paper-hair); padding: 2.5mm; text-align: left; }
  .pa-score th { background: var(--paper-band); font-weight: 600; }
  .pa-foot { font: italic 400 10.5px/1.4 var(--serif); color: var(--paper-muted); margin-top: 5mm; }
  /* « Le plan » (2026-09-11) — la leçon d'une séance : le détail d'une ligne, sous sa phrase courte. */
  .pa-grid div p { margin: 1mm 0 0; }
  .pa-plan-long { color: var(--paper-muted); }
  /* U0.4 — la fiche d'une SÉQUENCE : de quoi écrire, puis le corrigé sur sa propre page. */
  .pa-work li { margin-bottom: 4mm; break-inside: avoid; }
  /* ── §3.2 · L'ÉNONCÉ SUR LE PAPIER — les listes, et LA LEÇON DU 2026-09-07 ─────────────────
     Essayé ce jour-là : `white-space: pre-line` sur `.pa-en`, annulé le jour même — le livret
     CM2 passait de 42 à 53 pages alors que le bouton en annonçait 42 (verify-u44 l'a attrapé).
     La cause n'était pas la hauteur en soi : `bkLignes` (print.js) calculait les RÉGLURES d'après
     les caractères pendant que le papier rendait des LIGNES — les énoncés grandissaient, les
     réglures ne rétrécissaient pas. Mesuré le 2026-09-08 sur les 150 escales : 10 escales de CM2
     débordaient exactement ainsi ; avec des réglures comptées en lignes, aucune ne dépasse le
     budget (max 214 mm sur 235). Le correctif est dans l'ESTIMATEUR (print.js bkLignesEnonce) ;
     ces règles ne font que peindre ce qu'il compte, avec le peintre de l'écran (apprendre.js) :
     · un énoncé garde ses sauts de ligne (pre-line) ;
     · un item de liste = une rangée, sa marque dans 8 mm de gouttière (l'écran : 2,2 em) ;
     · les items COURTS (≤ 28 caractères, enonce.js `colonnesPapier`) se rangent sur TROIS
       colonnes — le papier a la largeur que le téléphone n'a pas, et six items font deux rangées.
     Le nombre de pages reste jugé au PDF sur les cinq cahiers (verify-u44 : annoncé = imprimé),
     et celui des fiches de séquence est MESURÉ, pas promis (mesure-fiches-pdf.js). */
  .pa-en { white-space: pre-line; }
  .pa-en > * + * { margin-top: 0.8mm; }
  .pa-en-p { margin: 0; }
  .pa-en-l { list-style: none; margin: 0; padding: 0; }
  .pa-en-i { display: grid; grid-template-columns: 8mm minmax(0, 1fr); column-gap: 1mm; align-items: baseline; }
  /* ⚠ Un item de liste est un <li> DANS un <li> d'exercice : sans cette ligne il hérite de
     `.pa-work li { margin-bottom: 4mm }` et `.pa-steps li { margin-bottom: 2mm }`, et chaque
     rangée coûte ~9 mm au lieu de ~5. Vu sur la capture A4 du 2026-09-08, et mesuré par
     verify-u44 : CM2 42 pages annoncées, 46 IMPRIMÉES — l'estimateur comptait des lignes que
     le papier gonflait en silence. La spécificité (0,2,0) l'emporte sur (0,1,1). */
  .pa-work .pa-en-i, .pa-steps .pa-en-i { margin-bottom: 0; }
  .pa-en-k { font-weight: 600; }
  .pa-en-t { min-width: 0; overflow-wrap: anywhere; }
  .pa-en-l-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3mm; }
  /* La grille d'un énoncé, à remplir au crayon : cases de 9 mm (l'estimateur compte deux lignes par
     rangée), filets fins, la tête en 600. */
  .pa-en-table { border-collapse: collapse; width: 100%; font: 400 10.5px/1.3 var(--font); white-space: normal; margin: 1mm 0; }
  .pa-en-table th, .pa-en-table td { border: 0.3mm solid var(--paper-rule); padding: 1.5mm 2mm; height: 9mm; text-align: left; vertical-align: top; }
  .pa-en-table th { font-weight: 600; }
  .pa-choix { font: 400 11px/1.4 var(--font); color: var(--paper-muted); margin: 1mm 0 1.5mm; }
  .pa-line { border-bottom: 1px solid var(--paper-rule); height: 7mm; }
  .pa-page2 { break-before: page; page-break-before: always; padding-top: 10mm; }
  /* ── U2.1 · LE SCHÉMA DE « RELIE » ────────────────────────────────────────────────────
     La règle D6 de Steven : « le papier rend le GESTE, pas seulement la consigne ». Trois
     colonnes de grille — les items de gauche, RIEN, les items de droite — et le RIEN est tout
     l'exercice : c'est là que l'enfant trace ses traits.

     ⚠ LES DEUX COLONNES SONT FLUIDES (1fr … 1fr) ET LE COULOIR EST LA SEULE MESURE FIXE.
       C'est ce qui rend un débordement d'A4 impossible par construction, quelle que soit la
       longueur des étiquettes : la seule largeur imposée est 22 mm sur les ~177 mm de la liste,
       le reste se partage. Mesuré sur les 480 schémas du corpus (colonnes de 2 à 5 items).
     ⚠ AUCUNE .pa-line NE SUIT UN SCHÉMA. C'est écrit dans print.js (corpsExo rend l'un OU
       l'autre), et c'est le défaut que toute cette unité existe pour retirer.
     ⚠ CHAQUE MILLIMÈTRE DE HAUTEUR EST PAYÉ EN PAPIER, et les valeurs ci-dessous ont été
       RÉGLÉES SUR LA MESURE, pas choisies : un schéma de quatre rangées coûtait 111 px sur une
       page qui en compte 1 123, et faisait passer les fiches les plus chargées de deux à trois
       feuilles. Interligne 1,25 au lieu de 1,35, gouttière 1,4 mm au lieu de 2,5, marges
       resserrées — 74 px au lieu de 111, sans que l'étiquette devienne illisible (11 px de
       serif, la taille d'un corps de livre). Le compte exact, avant et après, est dans le
       rapport de la lane E. */
  .pa-relie { display: grid; grid-template-columns: 1fr 22mm 1fr; row-gap: 1.4mm;
    margin: 1.5mm 0 0.5mm; break-inside: avoid; }
  .pa-relie-g, .pa-relie-d { display: flex; align-items: baseline; gap: 2mm;
    font: 400 11px/1.25 var(--serif); }
  .pa-relie-g { justify-content: space-between; }   /* l'ancre part au bord du couloir */
  .pa-relie-n { flex: none; font-family: var(--mono); font-size: 9.5px; color: var(--paper-muted); }
  .pa-relie-t { flex: 1 1 auto; }
  /* Le point d'ancrage. Un cercle DESSINÉ, jamais le caractère « ○ » : sur une imprimante, un
     glyphe absent de la police devient un rectangle vide — et là il faut un point rond, à la
     même place sur les deux colonnes, sur lequel un crayon puisse arriver. Centré sur la
     hauteur de sa ligne pour qu'une étiquette sur deux lignes ne le laisse pas flotter en haut. */
  .pa-anc { flex: none; align-self: center; width: 2.4mm; height: 2.4mm; border-radius: 50%;
    border: .35mm solid var(--paper-ink); }

  /* ── U2.3 · UNE ABSENCE SE DIT ─────────────────────────────────────────────────────────
     La ligne qui remplace ce qui ne pouvait pas s'imprimer. Discrète — elle n'est pas une
     alerte — mais présente : « un trou silencieux est un mensonge, et un parent croira
     l'impression cassée » (PLAN §3, invariant 4). Même filet que .pa-role, en plus léger,
     pour qu'on la lise comme une note de l'app et pas comme une consigne de l'exercice. */
  .pa-absence { font: italic 400 10.5px/1.4 var(--serif); color: var(--paper-muted);
    border-left: 1px solid var(--paper-rule); padding-left: 3mm; margin: 1mm 0 4mm;
    break-inside: avoid; }

  /* U0.4 — le storyboard d'un GESTE : deux colonnes, trois rangées, sur une page. */
  /* 205 mm de vignettes + le QR débordaient d’1 mm sur une 2e page (mesuré : measure-u04.js).
     Les trois valeurs ci-dessous rendent 8 mm — la fiche d’un geste tient sur UNE page. */
  .pa-board { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 5mm; margin-bottom: 5mm; }
  .pa-board figure { margin: 0; break-inside: avoid; }
  .pa-board svg { width: 100%; height: auto; border: 1px solid var(--paper-hair); border-radius: 3mm; }
  .pa-board figcaption { font: 400 10px/1.35 var(--font); color: var(--paper-ink); margin-top: 1mm; }

  /* ── U4.4 · LE LIVRET DU CAHIER ────────────────────────────────────────────────────────
     Aucun mécanisme nouveau : chaque page du livret est une `.pa-page2` (la règle ci-dessus),
     et les exercices d'une escale sont des `.pa-work` (celles de la fiche de séquence). Ne
     restent que les quatre choses qu'une fiche d'UNE page n'avait pas besoin de savoir. */

  /* 1. Une marge BASSE. Sur une fiche d'une ou deux pages, `.sheet-a4` donne le bas ; sur
        trente-sept, chaque page est une section, et sans cette marge le texte courrait jusqu'au
        bord du papier — que la plupart des imprimantes ne peuvent pas atteindre. */
  .pa-esc, .pa-corr { padding-bottom: 14mm; }

  /* 2. Le titre d'une page INTÉRIEURE n'est pas celui d'une couverture : 26 px répétés trente
        fois écrasent le livret. Le pictogramme de l'île est calé sur la première ligne du texte,
        comme sur la carte du voyage (cahier.css), pour qu'un titre sur deux lignes ne le laisse
        pas flotter au milieu. */
  .pa-esc .pa-h { font: 400 20px/1.2 var(--serif); margin: 3mm 0 1.5mm; display: flex; align-items: baseline; gap: 3mm; }
  .pa-escsc { font-size: 16px; line-height: 1; flex: none; }

  /* 3. Le sommaire de la couverture : trente escales sur trois colonnes. Sur un paquet de
        feuilles volantes, c'est ce qui permet d'en retrouver une sans les feuilleter toutes. */
  .pa-somm { column-count: 3; column-gap: 6mm; margin: 5mm 0; font: 400 10.5px/1.5 var(--font); }
  .pa-somm div { break-inside: avoid; }
  .pa-somm b { font-family: var(--mono); color: var(--paper-muted); }

  /* 4. Le corrigé est un BLOC dense que l'adulte lit, pas une feuille de travail : une escale
        par entrée, jamais coupée en deux (la pagination est calculée en JS — printBooklet — et
        `break-inside: avoid` est ce qui fait dire la même chose au navigateur). La marge nulle
        des `li` n'est pas un détail : le calcul du nombre de pages compte des lignes de texte,
        et un interligne caché ici le ferait dériver page après page. */
  .pa-corrbloc { break-inside: avoid; margin-bottom: 4mm; }
  .pa-corrbloc > b { display: block; font: 600 12px/1.35 var(--font); color: var(--paper-ink);
    border-bottom: 1px solid var(--paper-rule); padding-bottom: 1mm; margin-bottom: 1.5mm; }
  .pa-corrbloc .pa-steps { margin: 0 0 0 5mm; }
  .pa-corrbloc .pa-steps li { margin-bottom: 0; }
  @page { size: A4; margin: 0; }
  /* ── row 0.9 (PARITY-PLAN-2026-09-17.md, seam lane) — paper follows the CHILD's jurisdiction,
     not the UI language: OECS (Anguilla) and FBE (Sint Maarten/Saba/Statia) print on US Letter,
     fr stays A4 (the default above, untouched — no class means no change, byte-identical).
     CSS Paged Media named pages (`@page <ident>` + the `page` property) is the only standard
     mechanism that can vary page SIZE by an element's class — `@page` itself is not selector-
     scoped, so this can't be done with a plain nested rule. Support is Chromium-only today
     (this PWA's real audience); anywhere `page` isn't recognised, the sheet still prints — on
     the @page block above's A4, the same degrade this file already leans on everywhere else.
     Whoever renders `.sheet-a4` for a non-fr child adds `.paper-letter` to it; nothing here
     assumes who that is, or when. */
  @page letter { size: Letter; margin: 0; }
  .sheet-a4.paper-letter { page: letter; }
}