/* ============================================================================
   book.css — la page du livre. Partagée par le web ET le PDF imprimeur.
   ----------------------------------------------------------------------------
   Principe : toutes les dimensions s'expriment en multiples de --u, qui vaut
   1 mm de la page finale. En impression --u = 1mm ; à l'écran --u se déduit de
   la taille disponible. Une seule feuille, donc une page qui ne peut pas dériver
   entre ce qu'Ichai valide à l'écran et ce que l'imprimeur reçoit.

   Spec appliquée (research/WIDE-PRINT.md) :
   page 210 × 210 mm · bleed 3 mm · marges 15 haut / 15 ext. / 18 bas /
   18 gouttière · corps 14 pt · colonne ≤ 145 mm.
   ========================================================================== */

:root {
  /* ---- Couleurs. Papier crème, jamais blanc pur : c'est ce qui fait « livre ».
         Light mode par défaut et sans alternative : c'est un objet imprimé. ---- */
  --papier:        #FAF4E8;
  --papier-creuse: #F3E8D4;
  --encre:         #2B2117;
  --encre-douce:   #5A4A38;
  --indigo:        #2E4372;
  --indigo-clair:  #4B6797;
  --indigo-nuit:   #16233F;
  --ocre:          #D69B3C;
  --ocre-clair:    #E8CFA0;
  --terre:         #A34823;
  --olive:         #5A6739;
  --sable:         #E8CFA0;

  --trait: 0.35;  /* épaisseur des filets, en mm */
}

/* ---- Polices : fichiers LOCAUX obligatoires. Un @font-face vers un CDN peut
       échouer en silence dans Chromium et faire retomber tout le livre sur une
       police système — la pagination du PDF serait alors fausse sans alerte. ---- */

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

* { box-sizing: border-box; }

/* ============================================================ LA PAGE ===== */

.page {
  --u: calc(var(--page-size) / 210);

  position: relative;
  /* Colonne : le contenu prend la place disponible, le folio se pose en bas.
     Le folio a d'abord été posé en `position: absolute` — Vivliostyle le
     renvoyait alors sur la page suivante (pages fantômes). Il a ensuite été tiré
     des marges @page — mais avec `margin: 0` ces boîtes tombent DANS le fond
     perdu : mesuré à 4,5 mm SOUS la ligne de coupe, donc massicoté. En flux,
     il est dans la zone utile et il ne fragmente rien. */
  display: flex;
  flex-direction: column;
  width: calc(210 * var(--u));
  height: calc(210 * var(--u));
  overflow: hidden;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--font-texte, Georgia, 'Times New Roman', serif);
  font-size: calc(4.94 * var(--u));      /* 14 pt */
  line-height: 1.55;

  /* Page de DROITE (impaire) : la gouttière est à gauche. */
  padding: calc(15 * var(--u)) calc(15 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
}

.page.left {
  /* Page de GAUCHE (paire) : la gouttière passe à droite. */
  padding: calc(15 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)) calc(15 * var(--u));
}

/* Illustration en fond perdu : elle déborde de 3 mm sur les quatre côtés.
   ⚠️ Jamais de z-index négatif ici — l'image passerait derrière le fond de sa
   propre section et ne subsisterait que dans le débord (piège vérifié au POC). */
.bleed {
  position: absolute;
  top: calc(-3 * var(--u));
  left: calc(-3 * var(--u));
  width: calc(216 * var(--u));
  height: calc(216 * var(--u));
  object-fit: cover;
  display: block;
}

.page__contenu { position: relative; flex: 1 1 auto; min-height: 0; }

/* Sur une page illustrée en pleine page, le texte est posé sur un cartouche
   translucide : lisible sans masquer l'illustration. */
.page--illustree .page__contenu {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.page--illustree .encadre {
  background: color-mix(in srgb, var(--papier) 94%, transparent);
  backdrop-filter: blur(calc(0.4 * var(--u)));
}
.page--illustree .encadre--rachi { border-left-color: var(--indigo); }
.page--illustree .encadre--midrash { border-left-color: var(--ocre); }
.page--illustree .encadre--activite { border-left-color: var(--olive); }

.page--illustree .recit {
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  padding: calc(7 * var(--u)) calc(8 * var(--u));
  border-radius: calc(1.5 * var(--u));
  max-width: calc(145 * var(--u));
}

.illus {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(1 * var(--u));
  margin-bottom: calc(6 * var(--u));
}

/* Le colophon porte une vignette, pas une image de page : le manuscrit demande
   « une toute petite tente sur une ligne d'horizon vide, beaucoup de blanc
   autour ». En pleine largeur elle mangeait toute la page. */
.page--colophon .illus {
  width: calc(46 * var(--u));
  margin: 0 auto calc(6 * var(--u));
  border-radius: calc(1 * var(--u));
}

.illus-manquante {
  display: grid;
  place-items: center;
  min-height: calc(60 * var(--u));
  border: calc(0.5 * var(--u)) dashed var(--terre);
  color: var(--terre);
  font-size: calc(3.5 * var(--u));
  text-align: center;
  padding: calc(4 * var(--u));
}

.folio {
  font-family: var(--font-lisible, sans-serif);
  flex: 0 0 auto;
  align-self: flex-end;
  padding-top: calc(3 * var(--u));
  font-size: calc(3.4 * var(--u));
  color: var(--encre-douce);
  letter-spacing: 0.06em;
  font-variant-numeric: oldstyle-figures;
}
/* Folio en marge extérieure, comme dans un livre relié. */
.page.left .folio { align-self: flex-start; }

/* ==================================================== TEXTE COURANT ======= */

.recit { max-width: calc(145 * var(--u)); }   /* ~60 signes : la limite de lisibilité */

.recit p { margin: 0 0 calc(3.6 * var(--u)); }
.recit p:last-child { margin-bottom: 0; }

/* Lettrine sur le premier paragraphe d'un chapitre : repère de lecture pour un
   enfant, et signal « on entre dans l'histoire ». */
.page--recit-illustration .recit > p:first-child::first-letter,
.page--recit-encadres .recit > p:first-child::first-letter {
  float: left;
  font-family: var(--font-titre, Georgia, serif);
  font-size: calc(17 * var(--u));
  line-height: 0.82;
  padding: calc(1.2 * var(--u)) calc(1.8 * var(--u)) 0 0;
  color: var(--terre);
}

.page__chapitre {
  margin: 0 0 calc(2 * var(--u));
  font-size: calc(3.3 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ocre);
}

.page__titre {
  font-family: var(--font-titre, Georgia, serif);
  font-size: calc(11 * var(--u));
  line-height: 1.1;
  margin: 0 0 calc(5 * var(--u));
  color: var(--indigo);
  font-weight: 600;
}

.bloc-titre {
  font-family: var(--font-titre, Georgia, serif);
  font-size: calc(7.5 * var(--u));
  color: var(--indigo);
  margin: calc(4 * var(--u)) 0 calc(2.5 * var(--u));
  font-weight: 600;
}

.exergue {
  margin: calc(4 * var(--u)) 0;
  padding-left: calc(5 * var(--u));
  border-left: calc(var(--trait) * 3 * var(--u)) solid var(--ocre-clair);
  font-style: italic;
  color: var(--encre-douce);
}

.legende {
  font-family: var(--font-lisible, sans-serif);
  font-size: calc(3.6 * var(--u));
  color: var(--encre-douce);
  font-style: italic;
  margin: calc(2 * var(--u)) 0 0;
}

/* ======================================================== ENCADRÉS ======== */

.encadre {
  margin: calc(4 * var(--u)) 0 0;
  padding: calc(5 * var(--u)) calc(5.5 * var(--u));
  border-radius: calc(1.5 * var(--u));
  font-size: calc(4.59 * var(--u));    /* 13 pt — plancher fixé par DESIGN.md */
  line-height: 1.5;
  break-inside: avoid;
}

.encadre__kicker {
  margin: 0 0 calc(1.5 * var(--u));
  font-size: calc(3.1 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.encadre__titre {
  font-family: var(--font-titre, Georgia, serif);
  font-size: calc(5.6 * var(--u));
  margin: 0 0 calc(2 * var(--u));
  font-weight: 600;
  line-height: 1.2;
}

.encadre__corps p { margin: 0 0 calc(2.4 * var(--u)); }
.encadre__corps p:last-child { margin-bottom: 0; }

/* La source est VISIBLE et lisible par l'enfant : c'est la promesse du livre.
   Elle n'est jamais reléguée en microscopique note de bas de page. */
.encadre__source {
  margin: calc(2.6 * var(--u)) 0 0;
  padding-top: calc(2 * var(--u));
  border-top: calc(var(--trait) * var(--u)) solid currentColor;
  font-size: calc(3.3 * var(--u));
  opacity: 0.85;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.encadre--rachi {
  background: color-mix(in srgb, var(--indigo) 8%, var(--papier));
  color: var(--indigo);
  border-left: calc(1.2 * var(--u)) solid var(--indigo);
}
.encadre--rachi .encadre__corps { color: var(--encre); }

.encadre--midrash {
  background: color-mix(in srgb, var(--ocre) 12%, var(--papier));
  color: var(--terre);
  border-left: calc(1.2 * var(--u)) solid var(--ocre);
}
.encadre--midrash .encadre__corps { color: var(--encre); }

.encadre--activite {
  background: color-mix(in srgb, var(--olive) 12%, var(--papier));
  color: var(--olive);
  border-left: calc(1.2 * var(--u)) solid var(--olive);
}
.encadre--activite .encadre__corps { color: var(--encre); font-family: var(--font-lisible, sans-serif); }

/* ---- Hébreu : ponctuel, dans les encadrés seulement (le livre n'a pas de
       pages hébreu/français en regard). Police dédiée gérant le nikoud. ---- */
.mot-hebreu {
  display: flex;
  align-items: baseline;
  gap: calc(3 * var(--u));
  margin: 0 0 calc(2.5 * var(--u));
}
/* Tout hébreu du livre : police dédiée, direction et respiration sous la ligne.
   La TAILLE, elle, dépend du contexte — un mot mis en vedette dans un encadré et
   un mot cité au fil d'une consigne de jeu n'ont pas le même corps. Une taille
   unique de 8 mm faisait déborder le glossaire. */
[lang='he'] {
  font-family: var(--font-hebreu, 'Frank Ruhl Libre', serif);
  /* Plancher absolu de 18 pt (6,35 mm) : sous ce corps, le nikoud se referme à
     l'encre et devient illisible sur le papier. Règle 3 de la checklist du
     DESIGN.md. Au-dessus, l'hébreu suit le corps de son bloc. */
  font-size: max(1.35em, calc(6.35 * var(--u)));
  line-height: 1.8;
  direction: rtl;
  unicode-bidi: isolate;
}

/* Le mot-vedette d'un encadré « pourquoi ce mot ? » est posé en grand. */
.mot-hebreu [lang='he'] { font-size: calc(8 * var(--u)); }

/* Pas de cumul : quand le conteneur compose déjà en hébreu (clé de glossaire), le
   span interne ne doit pas remultiplier la taille — sinon 7 mm devenaient 9,5 mm
   et le glossaire débordait de la page. */
.entree__cle [lang='he'],
[lang='he'] [lang='he'],
.glossaire__he [lang='he'] { font-size: 1em; }
.translit {
  font-style: italic;
  color: var(--encre-douce);
  font-size: calc(4 * var(--u));
}

/* ==================================================== PAGES SPÉCIALES ===== */

.page--titre { display: grid; place-items: center; text-align: center; }
.page--titre .page__contenu { display: grid; place-content: center; gap: calc(4 * var(--u)); }
.page--titre .page__titre {
  font-size: calc(20 * var(--u));
  color: var(--papier);
  text-shadow: 0 calc(0.6 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.45);
  margin: 0;
}

.frise { list-style: none; margin: 0; padding: 0; }
.frise__item {
  display: grid;
  grid-template-columns: calc(26 * var(--u)) 1fr auto;
  gap: calc(3 * var(--u));
  align-items: baseline;
  padding: calc(2.6 * var(--u)) 0;
  border-bottom: calc(var(--trait) * var(--u)) solid var(--sable);
  font-size: calc(4 * var(--u));
}
.frise__age { font-weight: 700; color: var(--terre); }
.frise__ref { font-size: calc(3.2 * var(--u)); color: var(--encre-douce); white-space: nowrap; }

.glossaire { list-style: none; margin: 0; padding: 0; }
.glossaire__item {
  display: grid;
  grid-template-columns: calc(34 * var(--u)) calc(34 * var(--u)) 1fr;
  gap: calc(3 * var(--u));
  align-items: baseline;
  padding: calc(2.4 * var(--u)) 0;
  border-bottom: calc(var(--trait) * var(--u)) solid var(--sable);
  font-size: calc(3.9 * var(--u));
}
.glossaire__he { font-size: calc(7 * var(--u)); }
.glossaire__translit { font-style: italic; color: var(--indigo); }

.sources { list-style: none; margin: 0; padding: 0; column-count: 1; }
.source__item {
  padding: calc(1.7 * var(--u)) 0;
  border-bottom: calc(var(--trait) * var(--u)) solid var(--sable);
  font-size: calc(3.5 * var(--u));
  line-height: 1.4;
}
.source__ref { font-weight: 600; }
.source__usage { color: var(--encre-douce); }
.source__usage::before { content: ' — '; }

.liste { margin: calc(2 * var(--u)) 0; padding-left: calc(6 * var(--u)); }
.liste li { margin-bottom: calc(2 * var(--u)); }

.page--colophon { display: grid; place-items: center; text-align: center; }
.page--colophon .page__contenu { display: grid; place-content: center; gap: calc(3 * var(--u)); }

.bloc-inconnu {
  border: calc(0.5 * var(--u)) dashed var(--terre);
  padding: calc(3 * var(--u));
  color: var(--terre);
}

/* ============================== PAGES DENSES ET PAGE D'INTRODUCTION ======= */

/* Les encadrés s'empilent simplement, pleine largeur : c'est la passe de
   composition (src/fit.mjs) qui garantit qu'une page n'en reçoit pas plus
   qu'elle ne peut en tenir. Une tentative de flux à deux colonnes a été essayée
   et MESURÉE : elle aggrave le débordement (les encadrés deviennent plus étroits
   donc plus hauts, et le calage des colonnes ne se rattrape pas). */

/* La page « Avant de commencer » porte un long texte de cadrage : deux colonnes
   et le corps à 13 pt (plancher autorisé par DESIGN.md) lui rendent son registre
   documentaire sans descendre sous la limite de lisibilité. */
.page--intro .recit {
  column-count: 2;
  column-gap: calc(8 * var(--u));
  max-width: none;
  font-size: calc(4.59 * var(--u));
}
.page--intro .recit > p:first-child::first-letter {
  float: none; font-size: inherit; padding: 0; color: inherit;
}
.page--intro.page--illustree .recit { column-count: 1; max-width: calc(120 * var(--u)); }
.page--illustree .recit { padding: calc(5 * var(--u)) calc(6 * var(--u)); }

/* ============================================ COUVERTURE ET COLOPHON ====== */

.couverture {
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  height: 100%;
  gap: calc(3 * var(--u));
}

.couverture__titre {
  font-family: var(--font-titre, Georgia, serif);
  font-size: calc(26 * var(--u));
  line-height: 1;
  margin: 0;
  color: var(--papier);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 calc(0.8 * var(--u)) calc(3 * var(--u)) rgba(20, 14, 8, 0.55);
}

.couverture__soustitre {
  margin: 0;
  font-size: calc(6 * var(--u));
  color: var(--papier);
  font-style: italic;
  text-shadow: 0 calc(0.5 * var(--u)) calc(2 * var(--u)) rgba(20, 14, 8, 0.6);
}

.couverture__mention {
  margin: 0;
  font-size: calc(3.8 * var(--u));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--papier) 88%, var(--ocre-clair));
  text-shadow: 0 calc(0.4 * var(--u)) calc(1.6 * var(--u)) rgba(20, 14, 8, 0.6);
}

.colophon {
  display: grid;
  align-content: center;
  gap: calc(2.6 * var(--u));
  height: 100%;
  text-align: center;
  font-size: calc(3.7 * var(--u));
  line-height: 1.5;
  color: var(--encre-douce);
  max-width: calc(155 * var(--u));
  margin: 0 auto;
}
.colophon p:first-child,
.colophon p:nth-child(2) {
  color: var(--encre);
  font-size: calc(4.3 * var(--u));
  letter-spacing: 0.02em;
}

/* ======================================= LISTES DES PAGES SPÉCIALES ======= */

.chapeau {
  margin: 0 0 calc(5 * var(--u));
  font-size: calc(4.4 * var(--u));
  line-height: 1.5;
  color: var(--encre);
  font-style: italic;
  max-width: calc(150 * var(--u));
}

.entrees { list-style: none; margin: 0; padding: 0; }

.entrees li {
  font-family: var(--font-lisible, sans-serif);
  padding: calc(2.3 * var(--u)) 0;
  border-bottom: calc(var(--trait) * var(--u)) solid color-mix(in srgb, var(--encre) 18%, transparent);
  font-size: calc(3.9 * var(--u));
  line-height: 1.45;
}
.entrees li:last-child { border-bottom: none; }

.entree__cle {
  font-weight: 700;
  color: var(--terre);
  letter-spacing: 0.02em;
}
.entree__cle::after { content: ' — '; color: var(--encre-douce); font-weight: 400; }

/* Le glossaire mêle hébreu et latin : on laisse l'hébreu à sa taille propre. */
/* Le glossaire est une LISTE de références, pas du texte courant : on peut y
   resserrer l'espacement vertical sans toucher au corps de lecture du livre. */
.entrees--glossaire li {
  font-size: calc(4.1 * var(--u));
  padding: calc(1.1 * var(--u)) 0;
  line-height: 1.3;
}
/* Le chapeau du glossaire n'a pas besoin de la même respiration qu'un chapeau de
   récit : c'est une phrase de mode d'emploi. */
.page--glossaire .chapeau { margin-bottom: calc(3 * var(--u)); font-size: calc(4 * var(--u)); }
.entrees--glossaire .entree__cle {
  font-family: var(--font-hebreu, serif);
  font-size: calc(7 * var(--u));
  color: var(--indigo);
}

.entrees--sources li { font-size: calc(3.5 * var(--u)); }
.entrees--sources .entree__cle { color: var(--indigo); }

.entrees--frise .entree__cle { color: var(--indigo); }

/* Sur carte et frise, le texte est posé sur l'illustration : cartouche papier
   translucide, sinon rien n'est lisible. */
.page--carte .page__contenu,
.page--frise .page__contenu {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page--illustree .page__titre {
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  display: inline-block;
  padding: calc(2 * var(--u)) calc(4 * var(--u));
  border-radius: calc(1.5 * var(--u));
}
.page--carte .chapeau,
.page--carte .entrees,
.page--carte .encadre,
.page--frise .chapeau,
.page--frise .entrees,
.page--frise .encadre {
  background: color-mix(in srgb, var(--papier) 93%, transparent);
  border-radius: calc(1.5 * var(--u));
  padding: calc(4 * var(--u)) calc(5 * var(--u));
  backdrop-filter: blur(calc(0.5 * var(--u)));
}
.page--carte .chapeau,
.page--frise .chapeau { margin-bottom: calc(2.5 * var(--u)); }

.page--carte .entrees li,
.page--frise .entrees li { font-size: calc(3.5 * var(--u)); padding: calc(1.5 * var(--u)) 0; }

/* ========================================================= IMPRESSION ===== */

/* Les retours à la ligne entre deux <section> sont des nœuds de texte : dans le
   flux de <body>, ils fabriquent des lignes invisibles de la hauteur d'un
   interligne. Chaque page était donc poussée au-delà des 210 mm et Vivliostyle
   la fragmentait — d'où des pages fantômes ne portant que leur folio.
   `font-size: 0` sur le corps annule ces lignes ; chaque .page rétablit ensuite
   sa propre taille. Symptôme observé : 79 pages de PDF pour 76 pages de livre. */
body.print { margin: 0; background: var(--papier); font-size: 0; line-height: 0; }
body.print .page {
  --page-size: 210mm;
  /* La section est volontairement 1 mm plus courte que la zone de page. Sans ce
     jeu, la moindre différence d'arrondi entre le moteur de Vivliostyle et la
     boîte de 210 mm refragmente la section, ce qui produit une page fantôme ne
     portant que son folio. Le millimètre perdu ne se voit pas : le fond crème du
     document remplit la page entière, et les illustrations en fond perdu sont
     positionnées à -3 mm sur 216 mm, donc elles couvrent toujours la coupe. */
  height: 209mm;
  break-after: page;
  /* Une page du livre est une page imprimée, jamais deux. Sans `break-inside`,
     Vivliostyle refragmente une section dès que quelque chose la dépasse d'un
     pixel — et le fond perdu la dépasse de 3 mm PAR CONSTRUCTION. On obtenait
     82 pages pour 76. `overflow: clip` empêche en plus le débord de compter. */
  break-inside: avoid;
  overflow: hidden;
  margin: 0;
}
body.print .page:last-child { break-after: auto; }

/* ============================================== PAGE DES SOLUTIONS ======== */

/* Les réponses des jeux sont IMPRIMÉES, pas promises. Elles tenaient autrefois
   dans une phrase qui disait « imprimées ci-dessous » sans rien en dessous —
   une consigne au maquettiste restée dans le livre. Deux colonnes serrées, corps
   à 12 pt (plancher de la spec print pour les notes), et la référence « PAGE n »
   en tête de ligne, en ocre, pour retrouver son jeu d'un coup d'œil. */
.page--solutions .entrees {
  column-count: 2;
  column-gap: calc(6 * var(--u));
}
.page--solutions .entrees li {
  break-inside: avoid;
  font-size: calc(4.24 * var(--u));   /* 12 pt */
  line-height: 1.24;
  padding: 0 0 calc(2.2 * var(--u));
  border-bottom: none;
  text-align: left;
}
.page--solutions .entree__cle {
  color: var(--ocre);
  font-weight: 700;
  font-size: calc(3.4 * var(--u));
  letter-spacing: 0.08em;
}
.page--solutions .entree__cle::after { content: ' '; }
.page--solutions .chapeau {
  font-size: calc(3.9 * var(--u));
  line-height: 1.35;
  margin-bottom: calc(3 * var(--u));
}
.page--solutions .page__titre { font-size: calc(8 * var(--u)); margin-bottom: calc(3 * var(--u)); }

/* Cartouche remonté : pour les illustrations dont le sujet occupe la moitié
   basse. Sans ça, le cartouche de la page 18 se posait exactement sur le coffre
   du poste de douane — et le jeu de la page 19, qui demande d'y compter les
   cercles de cuivre et de repérer la main du garde, devenait impossible. */
.page--texte-haut .page__contenu { justify-content: flex-start; }