/* =========================================================
   LE LIVRE, PRÊT À IMPRIMER

   Chaque page est une boîte au format exact du livre, remplie par le
   metteur en pages. À l'impression, une boîte = une feuille : ce que
   l'on voit à l'écran est ce qui sort de l'imprimante, au millimètre.

   Les marges intérieure et extérieure changent de côté d'une page à
   l'autre : la reliure est à droite sur une page paire, à gauche sur une
   impaire. C'est ce qui distingue un livre d'une liasse de feuilles.
   ========================================================= */

/* ---------- La charte de la maison ----------

   Reprise du kit de marque, à la lettre. Le vermillon est l'accent
   unique : filets, surtitres, chiffres. Rien d'autre ne prend de
   couleur, sans quoi il n'y a plus d'accent.

   Deux polices, pas trois : Poppins pour ce qui se compte et se
   repère, Lora pour ce qui se lit. */

:root {
  --encre:       #14110E;   /* noir chaud : titres, texte */
  --vermillon:   #D1402A;   /* l'accent unique */
  --vermillon-f: #AB3120;   /* le vermillon en petit corps */
  --creme:       #F7F5F2;   /* les pages qui respirent */
  --filet:       #E6E1D9;   /* traits et contours discrets */
  --gris-chaud:  #6D655A;   /* légendes, mentions, folios */
}

/* ── Le format de la feuille de papier ──

   `size` ne se laisse PAS écrire avec une variable. `@page` n'est
   attaché à aucun élément : `var(--pl)` n'y désigne rien, et le
   navigateur retombe sur son format par défaut — A4 chez nous, Letter
   ailleurs. Le livre était alors dessiné à ses mesures SUR une feuille
   d'une autre taille : les marges du PDF n'étaient plus celles qu'on
   avait choisies, et le fond perdu tombait n'importe où.

   Rien ne le signalait : la règle est valide, elle se parse, elle
   s'affiche dans l'inspecteur. Elle ne s'applique simplement pas.

   Chaque page qui imprime un livre pose donc son `size` EN CLAIR, en
   millimètres. La marge à zéro, elle, vaut pour toutes. */
@page { margin: 0; }

body.impression {
  margin: 0;
  background: var(--filet);
  font-family: var(--police-texte);
  color: #14110e;
}

/* La barre d'aide, qui ne s'imprime pas */
.imp-barre {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 12px 18px; background: #14110e; color: #fff;
  font-family: 'Poppins', system-ui, sans-serif; font-size: .85rem;
}
.imp-barre a { color: #f5b921; }
.imp-barre strong { color: #fff; }
.imp-consigne { opacity: .8; }

.imp-atelier { padding: 22px 0 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ---------- Une page ---------- */
.feuille {
  position: relative;
  width: var(--pl);
  height: var(--ph);
  background: #fff;
  box-sizing: border-box;
  /* ── Les caractères du livre, portés par la page ──

     Ils venaient de `body.impression`, une classe que seule la vue
     d'impression de l'atelier pose. Partout ailleurs — la fabrique
     ouverte, et toute page qui montrerait une planche — la feuille
     héritait des caractères du SITE : un roman en Lora se composait
     en Poppins, et le panneau annonçait tranquillement « Lora ».

     La police appartient à la page, pas au document qui l'accueille.
     C'est ici qu'elle se pose. Dans l'atelier la valeur est la même,
     rien n'y change. */
  font-family: var(--police-texte, var(--serif));
  color: #14110e;
  /* La bande de marge est rendue au bloc de texte, qui la reprend en
     remplissage. Sans cela elle tomberait hors de `.feuille-corps`, dont
     le débordement est masqué, et tout ce qu'on y poserait disparaîtrait
     — un blanc de 22 mm, et rien dedans. */
  padding: var(--mt) calc(var(--me) - var(--laterale, 0mm)) var(--mp) var(--mi);
  box-shadow: 0 3px 14px rgba(20, 17, 14, .2);
  overflow: hidden;
}
/* Page paire : la reliure passe à droite */
.feuille.est-paire {
  padding-left: calc(var(--me) - var(--laterale, 0mm));
  padding-right: var(--mi);
}

.feuille-corps {
  /* En `content-box`, la descente d'une ouverture de chapitre
     s'ajoutait à la hauteur au lieu d'y être prise : le texte
     débordait alors dans la marge de pied, invisiblement. Le bloc doit
     comprendre sa marge intérieure. */
  box-sizing: border-box;
  position: relative;
  height: calc(var(--ph) - var(--mt) - var(--mp));
  /* Le remplissage rend au texte sa largeur exacte : la colonne de
     marge est dans la boîte, mais hors du texte. Le débordement masqué
     rogne la boîte de remplissage, pas son intérieur — ce qui vit dans
     la bande reste donc visible. */
  padding-right: var(--laterale, 0mm);
  overflow: hidden;
  font-size: var(--corps);
  line-height: var(--interligne);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Titre courant et folio, aux extrémités de la justification */
.feuille-entete {
  position: absolute; top: calc(var(--mt) / 2.4);
  left: var(--mi); right: var(--me);
  font-size: calc(var(--corps) * .72);
  letter-spacing: .06em; color: var(--gris-chaud);
  text-transform: uppercase;
}
.feuille.est-paire .feuille-entete { left: var(--me); right: var(--mi); text-align: left; }
.feuille.est-impaire .feuille-entete { text-align: right; }

.feuille-folio {
  position: absolute; bottom: calc(var(--mp) / 2.6);
  left: var(--mi); right: var(--me);
  font-size: calc(var(--corps) * .78); color: var(--gris-chaud);
  text-align: center;
}
.feuille.est-paire .feuille-folio { left: var(--me); right: var(--mi); }

/* Page paire : la bande passe du côté du pouce, c'est-à-dire à gauche. */
.feuille.est-paire .feuille-corps {
  padding-right: 0; padding-left: var(--laterale, 0mm);
}

/* ---------- La colonne de marge ----------

   Un mot-clé, un chiffre, un renvoi : ce qui aide à retrouver une page
   sans la lire. Elle est posée en absolu mais sans `top` : le navigateur
   la laisse alors à sa place dans le flux, à hauteur du paragraphe
   qu'elle commente, et elle ne prend aucune hauteur au texte.

   Les pourcentages se comptent sur la boîte de remplissage du bloc :
   `100% - la bande` tombe donc exactement au début de la bande. */
/* `en-marge` est le nom generique : la note de marge le porte, et tout
   style qui doit aller dans la bande le porte aussi. Sans lui, chaque
   nouveau cas aurait sa propre regle de positionnement, et l'une
   finirait par diverger des autres. */
.marge,
.en-marge {
  position: absolute;
  /* Le remplissage est compris dans la largeur : sinon la boite mesure
     plus large que la bande, et sur une bande etroite elle finirait par
     mordre sur le texte ou depasser la coupe. */
  box-sizing: border-box;
  left: calc(100% - var(--laterale, 0mm) + 2.5mm);
  width: calc(var(--laterale, 0mm) - 4mm);
  margin: 0;
  font-size: calc(var(--corps) * .74);
  line-height: 1.35;
  text-align: left;
  text-indent: 0;
  /* Une colonne etroite coupe les mots ou elle deborde. On lui donne le
     droit de couper — et, en dernier recours, de rompre un mot qui ne
     tiendrait toujours pas : mieux vaut une coupure laide qu'un mot qui
     passe par-dessus le texte. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  color: var(--gris-chaud);
}
.feuille.est-paire .marge,
.feuille.est-paire .en-marge { left: 1.5mm; }
.marge strong,
.en-marge strong { display: block; color: var(--encre); font-weight: 600; }

/* Sans bande réservée, une note de marge n'a pas où aller : elle
   rentre dans le texte, adossée à un filet, plutôt que d'aller se
   perdre dans la reliure. Un auteur qui change son livre de genre ne
   doit pas y perdre ses notes. */
body:not(.edition-sciences):not(.edition-documentaire):not(.edition-pratique):not(.edition-cuisine):not(.edition-manuel):not(.edition-guide_voyage) .marge,
body:not(.edition-sciences):not(.edition-documentaire):not(.edition-pratique):not(.edition-cuisine):not(.edition-manuel):not(.edition-guide_voyage) .en-marge {
  position: static; width: auto; margin: var(--interligne) 0;
  padding-left: 3mm; border-left: 2px solid var(--filet);
}

/* La page de titre et l'ouverture d'un chapitre ne portent pas de furniture */
.feuille.est-nue .feuille-entete,
.feuille.est-nue .feuille-folio,
.feuille.ouvre-chapitre .feuille-entete { visibility: hidden; }

/* ---------- Le texte ---------- */
/* L'alinéa dit au lecteur qu'un paragraphe commence. Un paragraphe
   coupé par la page reprend donc sans alinéa — il ne commence pas, il
   continue — mais un paragraphe neuf qui tombe en haut de page garde
   le sien. Les confondre, c'est ôter au lecteur le seul signe qui les
   distingue : c'est pourquoi `p:first-child` n'a rien à faire ici. */
.feuille-corps p { margin: 0; text-indent: 1.2em; }
.feuille-corps p.suite,
.feuille-corps h1 + p, .feuille-corps h2 + p, .feuille-corps h3 + p,
.feuille-corps .rang + p { text-indent: 0; }

.feuille-corps h1, .feuille-corps h2, .feuille-corps h3 {
  font-family: var(--police-titre); line-height: 1.2;
}
.feuille-corps h2 {
  font-size: calc(var(--corps) * 1.7);
  margin: 0 0 calc(var(--interligne) * 1.4);
}
.feuille-corps h3 {
  font-size: calc(var(--corps) * 1.12);
  margin: calc(var(--interligne) * 1.2) 0 calc(var(--interligne) * .4);
}
.feuille-corps blockquote { margin: var(--interligne) 8%; font-style: italic; }
.feuille-corps img { display: block; max-width: 100%; height: auto; margin: var(--interligne) auto; }
.feuille-corps figcaption {
  font-size: calc(var(--corps) * .8); text-align: center; color: var(--gris-chaud);
}
.feuille-corps ul, .feuille-corps ol { margin: 0 0 var(--interligne); padding-left: 1.4em; }
.feuille-corps hr { border: 0; text-align: center; margin: var(--interligne) 0; }
.feuille-corps hr::before { content: '❧'; color: var(--vermillon); }

.rang {
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * .75);
  letter-spacing: .12em; text-transform: uppercase; color: var(--vermillon);
  text-indent: 0; margin: 0 0 calc(var(--interligne) * .5);
}


/* ---------- Les blocs propres au livre ---------- */

/* La lettrine : la premiere lettre descend de trois lignes, le texte
   l'epouse. C'est ce qui ouvre un chapitre depuis cinq siecles. */
.feuille-corps .a-lettrine { text-indent: 0; }
.feuille-corps .lettrine {
  float: left;
  font-family: var(--police-titre);
  font-size: 3.1em;
  line-height: .8;
  padding: .04em .08em 0 0;
  color: var(--vermillon);
}

/* Un dialogue ne se renfonce pas : le tiret cadratin fait l'entree */
.feuille-corps .dialogue { text-indent: 0; }

/* La rupture de scene : trois signes et du blanc, rien d'autre */
.feuille-corps .asterisme {
  text-indent: 0; text-align: center; letter-spacing: .5em;
  color: var(--vermillon);
  margin: var(--interligne) 0;
}

.feuille-corps .exergue {
  margin: calc(var(--interligne) * 1.4) 10%;
  font-style: italic; text-align: center;
}
.feuille-corps .exergue p { text-indent: 0; }

/* L'encadre sort du recit : il a son fond et son filet */
.feuille-corps .encadre {
  margin: calc(var(--interligne) * 1.2) 0;
  padding: calc(var(--interligne) * .8) calc(var(--interligne) * 1);
  background: var(--creme);
  border-left: 3px solid var(--vermillon);
  break-inside: avoid;
}
.feuille-corps .encadre p { text-indent: 0; }
.feuille-corps .encadre-titre {
  margin: 0 0 calc(var(--interligne) * .3);
  font-family: var(--police-titre);
  font-size: .9em; letter-spacing: .08em; text-transform: uppercase; color: var(--vermillon);
}

/* L'illustration pleine page prend la feuille entiere */
/* ── La largeur d'une illustration ──
   Quatre crans, choisis dans la fabrique et portés par une classe.
   Une image centrée qui ne prend pas toute la justification a besoin
   d'un centrage : sans lui elle se collerait à la marge intérieure. */
.feuille-corps .illustration img { max-width: 100%; height: auto; }
.feuille-corps .illustration.ill-75 img,
.feuille-corps .illustration.ill-50 img,
.feuille-corps .illustration.ill-33 img { display: block; margin: 0 auto; }
.feuille-corps .illustration.ill-75 img { width: 75%; }
.feuille-corps .illustration.ill-50 img { width: 50%; }
.feuille-corps .illustration.ill-33 img { width: 33%; }

.feuille-corps .illustration.pleine-page { margin: 0; text-align: center; }
.feuille-corps .illustration.pleine-page img { max-height: 80%; width: auto; margin: 0 auto; }
.feuille-corps .illustration-vide {
  border: 2px dashed var(--filet); border-radius: 8px;
  padding: 2em 1em; color: #8a8175; font-style: italic; text-indent: 0;
}

.feuille-corps hr.saut-page { display: none; }

/* Une page d'illustration ne porte ni titre courant ni folio */
.feuille.est-illustration .feuille-entete,
.feuille.est-illustration .feuille-folio { visibility: hidden; }
.feuille.est-illustration .feuille-corps { display: flex; flex-direction: column; justify-content: center; }

/* La page de titre */
.titre-livre { text-align: center; padding-top: 18%; }
.titre-livre h1 {
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * 2.6); line-height: 1.15; margin: 0;
}
.titre-livre .soustitre { font-style: italic; text-indent: 0; margin: calc(var(--interligne) * .8) 0 0; }
.titre-livre .auteur { text-indent: 0; margin: calc(var(--interligne) * 2) 0 0; }
.titre-livre .marque {
  text-indent: 0; margin: calc(var(--interligne) * 4) 0 0;
  font-family: var(--police-titre); font-size: calc(var(--corps) * .7);
  letter-spacing: .18em; text-transform: uppercase;
}

/* Le texte source, qui sert de réservoir et ne se montre jamais */
[data-source] { position: absolute; left: -99999px; top: 0; width: 100mm; }

/* ---------- L'impression ---------- */
@media print {
  .imp-barre { display: none; }
  body.impression { background: #fff; }
  .imp-atelier { padding: 0; gap: 0; }
  .feuille {
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }

  /* ── Quelle feuille ne pousse PAS une page ──

     `.feuille:last-child` désigne la dernière feuille DE SA PLANCHE,
     pas celle du livre. Or une planche porte une double page : sa
     seconde feuille annulait donc son saut, et deux pages du livre
     partaient sur une seule feuille de papier — la seconde débordant
     hors du format, coupée net.

     Un livre de deux cents pages sortait ainsi en cent feuilles, une
     page sur deux tronquée. Rien ne le signalait : la mise en pages
     était juste, c'est l'impression qui pliait en deux.

     Une seule feuille au monde ne pousse pas de page : la dernière de
     la dernière planche. */
  .imp-atelier > *:last-child .feuille:last-child,
  .planche:last-child .feuille:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}


/* =========================================================
   LES LIMINAIRES

   Les pages d'avant le texte. Elles ne portent ni titre courant ni
   folio — c'est l'usage — mais comptent dans la pagination : le
   premier chapitre s'ouvre rarement à la page 1.

   Chacune a sa place réglée, et beaucoup de blanc. Un faux-titre chargé
   n'est pas un faux-titre.
   ========================================================= */

/* ---- Le faux-titre : le titre seul, haut de page ---- */

.feuille.est-fauxtitre .feuille-corps {
  display: flex;
  align-items: flex-start;
  padding-top: 22%;
}

.fx-titre {
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * 1.5);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre);
}

/* ---- La page de titre ---- */

.feuille.est-pagetitre .feuille-corps {
  display: flex;
  align-items: center;
}

.feuille.est-pagetitre .titre-livre { width: 100%; }

/* ---- Les mentions légales ----
   En bas de page, en petit : c'est la place qu'elles tiennent dans un
   livre, et le lecteur n'y va que s'il les cherche. */

.feuille.est-ours .feuille-corps {
  display: flex;
  align-items: flex-end;
}

.ours {
  width: 100%;
  font-size: calc(var(--corps) * .72);
  line-height: 1.55;
  color: var(--encre);
  text-align: left;
  hyphens: none;
}
.ours p { margin: 0 0 .35em; }
.ours-manque { color: #b03a2b; }

/* ---- Le sommaire ---- */

.feuille.est-sommaire .feuille-corps { text-align: left; hyphens: none; }

.som-tete {
  margin: 0 0 1.6em;
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * 1.15);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Les points de conduite tirent l'œil du titre jusqu'à sa page : c'est
   à cela qu'un sommaire se reconnaît. */
.som-ligne {
  display: flex;
  align-items: baseline;
  gap: .4em;
  margin: 0 0 .55em;
  text-indent: 0;
}

.som-nom { flex: 0 1 auto; }

.som-points {
  flex: 1 1 auto;
  border-bottom: 1px dotted #a49a89;
  transform: translateY(-.22em);
  min-width: 1.5em;
}

.som-page {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}

/* Le sous-titre d'un chapitre, sous son titre d'ouverture */
.rang-soustitre {
  margin: -.3em 0 1.4em;
  text-align: center;
  font-style: italic;
  color: var(--gris-chaud);
  text-indent: 0;
}


/* =========================================================
   L'ATELIER : LES PLANCHES EN VIS-À-VIS

   Un livre ouvert montre deux pages à la fois. On les juge ensemble ou
   pas du tout : le blanc d'une marge intérieure ne se voit que face à
   son vis-à-vis, et une illustration qui tombe en face d'un titre ne se
   découvre pas autrement.

   Tout ceci est de l'atelier : à l'impression, chaque page redevient
   une feuille et les repères disparaissent.
   ========================================================= */

:root { --zoom: 100%; }

.planche {
  display: flex;
  gap: 0;
  align-items: flex-start;
  box-shadow: 0 4px 20px rgba(20, 17, 14, .22);
  zoom: var(--zoom);
}

/* La première page est une belle page : elle n'a pas de vis-à-vis, et
   se décale d'une largeur pour rester du bon côté de la reliure. */
.planche.est-seule { margin-left: var(--pl); }

.planche .feuille { box-shadow: none; }

/* La pliure : un trait très léger, là où les deux pages se touchent. */
.planche .feuille.est-paire { border-right: 1px solid rgba(20, 17, 14, .1); }

.imp-atelier { gap: 26px; }

/* ---- Pages seules : on défait l'appariement ---- */

body.vue-seules .planche {
  display: block;
  box-shadow: none;
  margin-left: 0;
}
body.vue-seules .planche .feuille {
  box-shadow: 0 3px 14px rgba(20, 17, 14, .2);
  margin-bottom: 26px;
  border-right: 0;
}

/* ---- Les repères de marge ----

   Le rectangle de la justification, en trait fin. Il montre où le texte
   a le droit d'aller, et se déplace avec la reliure d'une page à
   l'autre — c'est le meilleur moyen de voir qu'une marge est fausse. */

.feuille::after {
  content: '';
  position: absolute;
  inset: var(--mt) var(--me) var(--mp) var(--mi);
  border: 1px dashed rgba(27, 110, 194, .5);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.feuille.est-paire::after { inset: var(--mt) var(--mi) var(--mp) var(--me); }

body.vue-reperes .feuille::after { opacity: 1; }

/* ---- Les commodités, dans la barre ---- */

.imp-outils {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.imp-outils button {
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .8rem;
  cursor: pointer;
}
.imp-outils button.est-actif {
  background: #f5b921;
  border-color: #f5b921;
  color: #14110e;
  font-weight: 600;
}
.imp-echelle { display: flex; align-items: center; gap: 7px; font-size: .78rem; }
.imp-echelle input { width: 96px; }

/* Rien de tout cela ne s'imprime. */
@media print {
  .planche { display: block; box-shadow: none; margin-left: 0; zoom: 1; }
  .planche .feuille { border-right: 0; }
  .feuille::after { display: none; }
  .imp-outils { display: none; }
}


/* =========================================================
   CE QUE CHAQUE GENRE CHANGE À L’ŒIL

   Le metteur en pages décide de ce qui s’imprime ; la feuille de style
   décide de la façon. Les deux tiennent le même raisonnement : ce n’est
   pas du goût, ce sont des usages de métier.
   ========================================================= */

/* Un folio de roman se glisse en pied et ne se remarque pas. Celui d’un
   cahier se lit de loin : on s’y donne rendez-vous à voix haute. */
.feuille-folio.est-appuye {
  font-size: calc(var(--corps) * 1.15);
  font-weight: 600;
  color: #14110e;
  font-family: var(--police-titre);
}

.feuille-folio.est-aucun { display: none; }

/* Un album, un imagier, un cahier : le texte y est court, et l’alinéa
   n’y sépare rien. C’est le blanc entre les paragraphes qui travaille. */
body.sans-alinea .feuille-corps p { text-indent: 0; }
body.sans-alinea .feuille-corps p + p { margin-top: var(--interligne); }

/* Un recueil pose un texte par page : il respire par le haut. */
body.edition-comptines .feuille-corps {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.edition-comptines .feuille-corps p { text-align: left; }

/* Un imagier n’a qu’un mot par page : il se pose au milieu, en grand. */
body.edition-imagier .feuille-corps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
body.edition-imagier .feuille-corps p {
  font-size: calc(var(--corps) * 1.6);
  text-align: center;
}


/* =========================================================
   LA BEAUTÉ DE LA PAGE

   Ce qui précède compose juste. Ce qui suit compose bien — et la
   différence tient à trois choses :

   le blanc, qu'un livre dépense sans compter aux endroits qui comptent ;
   l'échelle, qui doit se sentir sans se mesurer ;
   le détail, qu'on ne remarque que s'il manque.

   Toutes les hauteurs restent des multiples de l'interligne. Une seule
   valeur libre suffirait à décaler la trame du verso, et tout le
   travail de la grille serait perdu.
   ========================================================= */

/* ---------- L'ouverture de chapitre ----------

   Le titre ne se colle pas en haut de la feuille : il descend. Ce
   blanc-là s'appelle la descente, il fait environ le tiers de la page,
   et c'est lui qui donne à un chapitre son air de commencement. Sans
   lui, on a une page de texte avec un titre dessus. */

.feuille.ouvre-chapitre .feuille-corps {
  padding-top: calc(var(--interligne) * 6);
}

.feuille.ouvre-chapitre .rang {
  margin-bottom: calc(var(--interligne) * .75);
}

/* Le numéro du chapitre, en petites capitales espacées, séparé du titre
   par un filet court : deux signes discrets qui disent « on entre ». */
.feuille.ouvre-chapitre .rang::after {
  content: '';
  display: block;
  width: calc(var(--corps) * 2.4);
  height: 1px;
  margin-top: calc(var(--interligne) * .5);
  background: currentColor;
  opacity: .55;
}

.feuille.ouvre-chapitre h2 {
  font-size: calc(var(--corps) * 2.3);
  line-height: 1.08;
  margin: 0 0 calc(var(--interligne) * 2);
  max-width: 88%;
  text-wrap: balance;
}

.feuille.ouvre-chapitre .rang-soustitre {
  margin: calc(var(--interligne) * -1.5) 0 calc(var(--interligne) * 2);
  text-align: left;
  font-size: calc(var(--corps) * 1.02);
}

/* La première ligne d'un chapitre se donne en petites capitales : c'est
   l'usage des belles éditions, et cela fait entrer dans le texte plus
   doucement qu'un simple alinéa. */
/* Les styles nommes s'exceptent : une etape, une nomenclature ou une
   legende ne sont pas la premiere phrase du chapitre, meme quand elles
   se trouvent en etre le premier paragraphe. Sans cette reserve, le
   premier geste d'une marche a suivre s'imprimait en petites capitales,
   ce qui le faisait passer pour un chapeau. */
.feuille.ouvre-chapitre .feuille-corps > p:first-of-type:not(.etape):not(.nomenclature):not(.legende-longue)::first-line,
.feuille.ouvre-chapitre .rang + p:not(.etape):not(.nomenclature):not(.legende-longue)::first-line,
.feuille.ouvre-chapitre .a-lettrine::first-line {
  font-variant-caps: small-caps;
  letter-spacing: .02em;
}

/* ---------- La lettrine ----------

   Trois lignes exactement, et la lettre s'assoit sur la troisième. Une
   lettrine qui flotte entre deux lignes se voit tout de suite. */

.feuille-corps .lettrine {
  font-size: calc(var(--interligne) * 3);
  line-height: .78;
  padding: 0 .07em 0 0;
  margin-top: .04em;
}

/* ---------- Le titre courant et le folio ----------

   Ils doivent se lire quand on les cherche et disparaître quand on lit.
   Plus petits, plus espacés, plus pâles que ce qu'on croit. */

.feuille-entete {
  font-size: calc(var(--corps) * .62);
  letter-spacing: .16em;
  color: var(--gris-chaud);
  font-family: var(--police-titre);
  font-weight: 500;
}

.feuille-folio.est-discret {
  font-size: calc(var(--corps) * .72);
  color: var(--gris-chaud);
  font-family: var(--police-titre);
  letter-spacing: .06em;
}

/* Le folio d'un cahier s'annonce : on le cerne, il se voit de loin. */
.feuille-folio.est-appuye::before,
.feuille-folio.est-appuye::after {
  content: '·';
  margin: 0 .7em;
  opacity: .45;
}

/* ---------- Les liminaires ----------

   Ce sont les premières pages qu'on voit. Elles doivent être calmes et
   sûres d'elles : peu de signes, beaucoup de blanc, rien de centré au
   hasard. */

.fx-titre {
  font-size: calc(var(--corps) * 1.05);
  letter-spacing: .3em;
  font-weight: 500;
  color: var(--gris-chaud);
  text-indent: .3em;   /* l'interlettrage décale le mot vers la gauche */
}

.feuille.est-pagetitre .titre-livre h1 {
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * 2.6);
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

.feuille.est-pagetitre .titre-livre {
  text-align: center;
}

.feuille.est-pagetitre .soustitre {
  font-size: calc(var(--corps) * 1.05);
  color: var(--gris-chaud);
}

.feuille.est-pagetitre .auteur {
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * 1.05);
  letter-spacing: .06em;
}

.feuille.est-pagetitre .marque {
  font-size: calc(var(--corps) * .68);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gris-chaud);
}

/* Un filet fin sous le titre : il tient la page sans la charger. */
.feuille.est-pagetitre .titre-livre h1::after {
  content: '';
  display: block;
  width: calc(var(--corps) * 4);
  height: 1px;
  margin: calc(var(--interligne) * 1.5) auto 0;
  background: var(--vermillon);
}

/* ---------- Le sommaire ----------

   Il se lit en diagonale : les titres alignés à gauche, les folios
   alignés à droite sur leurs chiffres, et rien entre les deux qu'un
   pointillé discret. */

.som-tete {
  font-size: calc(var(--corps) * 1.05);
  letter-spacing: .22em;
  color: var(--gris-chaud);
  font-weight: 500;
  margin-bottom: calc(var(--interligne) * 2);
}

.som-ligne { margin-bottom: calc(var(--interligne) * .85); }
.som-points { border-bottom-color: var(--filet); }
.som-page { font-size: calc(var(--corps) * .9); color: var(--gris-chaud); }

/* ---------- L'encadré, l'exergue, l'astérisme ---------- */

/* Un encadré n'a pas besoin d'un fond ET d'un filet ET d'un titre en
   couleur : c'est le blanc autour qui le détache. On retire le fond,
   on garde le filet. */
.feuille-corps .encadre {
  background: transparent;
  border-left-width: 2px;
  padding: calc(var(--interligne) * .5) 0 calc(var(--interligne) * .5)
           calc(var(--interligne) * 1.1);
  margin: calc(var(--interligne) * 1.5) 0;
}

.feuille-corps .encadre-titre {
  font-size: calc(var(--corps) * .7);
  letter-spacing: .14em;
  margin-bottom: calc(var(--interligne) * .5);
}

/* L'exergue respire largement et se met en retrait, pas au centre :
   un texte italique centré sur trois lignes fait carte de vœux. */
.feuille-corps .exergue {
  margin: calc(var(--interligne) * 1.5) 0 calc(var(--interligne) * 1.5) 12%;
  text-align: left;
  font-size: calc(var(--corps) * .96);
  color: var(--encre);
  border: 0;
}

.feuille-corps .asterisme {
  margin: calc(var(--interligne) * 1.5) 0;
  font-size: calc(var(--corps) * .9);
  opacity: .7;
}

/* ---------- Le gris de la page ----------

   Une page bien composée a un gris régulier : ni rivières de blanc, ni
   pâtés. La coupure des mots y contribue plus que tout le reste, et il
   faut lui donner ses limites — deux lettres avant, trois après. */

.feuille-corps {
  hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  hyphenate-limit-lines: 2;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}


/* ---------- Les colonnes ----------

   Une encyclopédie se compose en deux colonnes. Ce n'est pas une
   coquetterie : à ce corps-là, une ligne pleine largeur ferait cent
   signes, et l'œil se perdrait en revenant à la ligne suivante.

   `column-fill: auto` remplit la première colonne avant d'entamer la
   seconde — c'est ce qui permet au metteur en pages de savoir que la
   feuille est pleine. */

.feuille-corps {
  column-count: var(--colonnes, 1);
  column-gap: var(--gouttiere-colonnes, 6mm);
  column-fill: auto;
}

/* Un titre de chapitre traverse toutes les colonnes, sinon la page se
   lit de travers : le titre coifferait la premiere colonne et non la
   page. Cela vaut partout ou il y a plus d une colonne, et non pour la
   seule encyclopedie. */
body.edition-encyclopedie .feuille-corps h2,
body.edition-encyclopedie .feuille-corps .rang,
body.edition-encyclopedie .feuille-corps .rang-soustitre,
body.edition-dictionnaire .feuille-corps h2,
body.edition-dictionnaire .feuille-corps .rang,
body.edition-dictionnaire .feuille-corps .rang-soustitre,
body.edition-catalogue .feuille-corps h2,
body.edition-catalogue .feuille-corps .rang,
body.edition-catalogue .feuille-corps .rang-soustitre {
  column-span: all;
}

/* Un intertitre d'encyclopédie ne se sépare pas de ce qu'il annonce. */
body.edition-encyclopedie .feuille-corps h3 {
  break-after: avoid;
  font-size: calc(var(--corps) * 1.05);
  margin-top: calc(var(--interligne) * 1.2);
}

/* Une entrée d'encyclopédie ne se coupe pas au milieu si elle est
   courte : elle passe entière à la colonne suivante. */
body.edition-encyclopedie .feuille-corps .encadre,
body.edition-encyclopedie .feuille-corps figure { break-inside: avoid; }

/* À ce corps-là, l'ouverture de chapitre n'a pas besoin de descendre :
   le papier est trop cher pour six lignes de blanc sur mille entrées. */
body.edition-encyclopedie .feuille.ouvre-chapitre .feuille-corps {
  padding-top: 0;
}
body.edition-encyclopedie .feuille.ouvre-chapitre h2 {
  font-size: calc(var(--corps) * 1.8);
  margin-bottom: calc(var(--interligne) * 1);
}

/* ---------- Le livre de sciences ----------

   Dense, mais pas serré : ses encadrés et ses schémas font respirer la
   page, et c'est à eux qu'on donne le blanc plutôt qu'aux marges. */

body.edition-sciences .feuille-corps h3 {
  break-after: avoid;
  color: var(--vermillon);
}
body.edition-sciences .feuille-corps .encadre { break-inside: avoid; }


/* ---------- Ce qui ne se justifie pas ----------

   Le bloc de texte est justifié ; ce qui n’est pas du texte courant ne
   doit pas l’être. Un titre justifié creuse des trous entre ses mots —
   quatre mots sur une ligne, et l’on obtient une grille au lieu d’un
   titre. Il ne se coupe pas non plus : un titre à césure est une faute
   que personne ne pardonne.

   Même chose pour tout ce qui se lit d’un coup d’œil plutôt qu’en
   suivant : légendes, folios, sommaires, mentions. */

.feuille-corps h1,
.feuille-corps h2,
.feuille-corps h3,
.feuille-corps .rang,
.feuille-corps .rang-soustitre,
.feuille-corps .encadre-titre,
.feuille-corps figcaption,
.feuille-corps .som-ligne,
.feuille-corps .som-tete,
.feuille-corps .dialogue,
.titre-livre,
.ours,
.fx-titre {
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}

.titre-livre, .fx-titre, .som-tete { text-align: center; }
.feuille.est-pagetitre .titre-livre { text-align: center; }
.som-ligne { text-align: left; }

/* Un dialogue se compose au fil : le justifier sur une réplique de
   trois mots donne le même désastre qu’un titre. */
.feuille-corps .dialogue { text-align: left; }


/* ---------- L'échelle du kit de marque ----------

   Les valeurs viennent de la charte : surtitre en Poppins SemiBold
   capitales interlettrées de +200, folio en Poppins SemiBold capitales
   de +140. On les transpose au corps du livre plutôt qu'en pixels : la
   charte a été écrite pour une page de 1200 px, le livre se compose en
   millimètres, et c'est le rapport qui doit tenir, pas la valeur. */

.rang, .fx-titre, .som-tete, .encadre-titre, .feuille-entete {
  font-family: var(--police-titre);
  font-weight: 600;
}

/* Le surtitre : vermillon, capitales, très interlettré. */
.rang {
  color: var(--vermillon);
  letter-spacing: .2em;
}
.feuille.ouvre-chapitre .rang::after { background: var(--vermillon); opacity: .7; }

/* Le folio : capitales interlettrées, gris chaud. */
.feuille-folio {
  font-family: var(--police-titre);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--gris-chaud);
}
.feuille-folio.est-appuye { color: var(--encre); }

.feuille-entete { color: var(--gris-chaud); }
.feuille-corps figcaption { color: var(--gris-chaud); }

/* En petit corps, le vermillon clair perd sa lisibilité : la charte
   prévoit sa variante foncée pour ces cas-là. */
.encadre-titre, .feuille-corps .lettrine { color: var(--vermillon-f); }
.feuille-corps .encadre { border-left-color: var(--vermillon); }
.feuille-corps .asterisme { color: var(--vermillon); }

/* ---------- La marque ----------

   Le logo ferme la page de titre et signe les mentions légales. Il ne
   paraît nulle part ailleurs : une marque qu'on voit à chaque page
   cesse d'être une signature. */

.marque-nora {
  display: block;
  width: calc(var(--interligne) * 2.6);
  height: auto;
  margin: calc(var(--interligne) * 2) auto 0;
}

.feuille.est-ours .marque-nora {
  width: calc(var(--interligne) * 1.8);
  margin: calc(var(--interligne) * 1.2) 0 0;
}


/* La règle « rien ne se justifie » aligne les titres à gauche, ce qui
   est juste dans le corps du livre. La page de titre est le seul
   endroit où l’axe central a un sens : c’est une page d’apparat, pas
   une page de lecture. Elle le reprend donc explicitement. */
.feuille.est-pagetitre .titre-livre h1,
.feuille.est-pagetitre .titre-livre p,
.feuille.est-fauxtitre .fx-titre,
.feuille.est-sommaire .som-tete {
  text-align: center;
}


/* =========================================================
   LES BLOCS DU LIVRE DE SCIENCES

   Ils existent en deux registres, parce qu'ils s'adressent à deux
   lecteurs. Chez l'enfant, un bloc doit s'attraper de loin : il a sa
   couleur, ses angles arrondis, son étiquette. Chez l'adulte, le même
   bloc se contente d'un filet — il sait déjà ce qu'il cherche.

   La forme commune est ici ; les deux registres suivent.
   ========================================================= */

.feuille-corps .sc-chiffre,
.feuille-corps .sc-experience,
.feuille-corps .sc-vocabulaire,
.feuille-corps .sc-frise,
.feuille-corps .sc-question,
.feuille-corps .sc-schema {
  break-inside: avoid;
  margin: calc(var(--interligne) * 1.5) 0;
  text-indent: 0;
}

.feuille-corps .sc-chiffre p,
.feuille-corps .sc-experience p,
.feuille-corps .sc-vocabulaire p,
.feuille-corps .sc-frise p,
.feuille-corps .sc-question p { text-indent: 0; }

.feuille-corps .sc-titre,
.feuille-corps .sc-etiquette {
  font-family: var(--police-titre);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: calc(var(--corps) * .68);
  color: var(--vermillon-f);
  margin: 0 0 calc(var(--interligne) * .4);
}
.feuille-corps .sc-etiquette {
  margin-top: calc(var(--interligne) * .7);
  color: var(--gris-chaud);
}
.feuille-corps .sc-sous {
  font-style: italic;
  color: var(--gris-chaud);
  margin: 0 0 calc(var(--interligne) * .5);
}

/* ---- Le chiffre-clé ----
   Le nombre est le sujet : il occupe la place, l'unité le suit en
   petit, et la phrase explique. Trois tailles très différentes, sinon
   l'œil ne sait pas par où entrer. */

.feuille-corps .sc-chiffre { text-align: center; }
.feuille-corps .sc-chiffre-nombre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * 3);
  line-height: 1;
  color: var(--vermillon);
  margin: 0;
}
.feuille-corps .sc-chiffre-unite {
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * .8);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-chaud);
  margin: calc(var(--interligne) * .2) 0 calc(var(--interligne) * .5);
}
.feuille-corps .sc-chiffre-quoi { margin: 0; }

/* ---- Le schéma légendé ----
   Les repères numérotés reprennent les numéros posés sur l'image :
   c'est ce qui fait qu'un schéma s'explique tout seul. */

.feuille-corps .sc-schema { margin-inline: 0; }
.feuille-corps .sc-fig {
  font-family: var(--police-titre);
  font-weight: 600;
  color: var(--vermillon);
  margin-right: .4em;
}
.feuille-corps .sc-reperes {
  list-style: none;
  counter-reset: repere;
  padding: 0;
  margin: calc(var(--interligne) * .6) 0 0;
  font-size: calc(var(--corps) * .84);
  text-align: left;
}
.feuille-corps .sc-reperes li {
  counter-increment: repere;
  padding-left: 1.9em;
  position: relative;
  margin-bottom: calc(var(--interligne) * .2);
}
.feuille-corps .sc-reperes li::before {
  content: counter(repere);
  position: absolute;
  left: 0;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: var(--vermillon);
  color: #fff;
  font-family: var(--police-titre);
  font-size: .78em;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ---- L'expérience ---- */

.feuille-corps .sc-experience ul,
.feuille-corps .sc-experience ol {
  margin: 0 0 calc(var(--interligne) * .3);
  padding-left: 1.3em;
}
.feuille-corps .sc-experience li { margin-bottom: calc(var(--interligne) * .15); }

/* ---- Le vocabulaire ---- */

.feuille-corps .sc-mot {
  font-family: var(--police-titre);
  font-weight: 600;
  margin: calc(var(--interligne) * .5) 0 0;
}
.feuille-corps .sc-sens {
  margin: 0;
  font-size: calc(var(--corps) * .92);
  color: var(--encre);
}

/* ---- La comparaison ---- */

.feuille-corps .sc-comparaison {
  width: 100%;
  border-collapse: collapse;
  margin: calc(var(--interligne) * 1.2) 0;
  font-size: calc(var(--corps) * .88);
  break-inside: avoid;
  text-align: left;
  hyphens: none;
}
.feuille-corps .sc-comparaison th {
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * .72);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-chaud);
  border-bottom: 1.5px solid var(--encre);
  padding: calc(var(--interligne) * .25) .5em;
}
.feuille-corps .sc-comparaison td {
  border-bottom: 1px solid var(--filet);
  padding: calc(var(--interligne) * .25) .5em;
  vertical-align: top;
}
.feuille-corps .sc-comparaison td:first-child { color: var(--gris-chaud); }

/* ---- La frise ---- */

.feuille-corps .sc-jalon {
  margin: 0 0 calc(var(--interligne) * .3);
  padding-left: 5.5em;
  text-indent: -5.5em;
}
.feuille-corps .sc-date {
  display: inline-block;
  width: 5em;
  font-family: var(--police-titre);
  font-weight: 700;
  color: var(--vermillon);
  font-variant-numeric: tabular-nums;
}

/* ---- La question ---- */

.feuille-corps .sc-demande {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: calc(var(--corps) * 1.05);
  color: var(--encre);
  margin: 0 0 calc(var(--interligne) * .3);
}
.feuille-corps .sc-demande::before {
  content: '?';
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: .5em;
  border-radius: 50%;
  background: var(--vermillon);
  color: #fff;
  font-size: .85em;
  vertical-align: -.28em;
}

/* =========================================================
   LE REGISTRE DE LA JEUNESSE

   Un enfant n'a pas la patience de chercher où commence un bloc. Il
   lui faut une couleur, un bord franc, un titre qu'on lit de loin. Le
   crème de la charte sert de fond ; le vermillon marque l'entrée.
   ========================================================= */

body.edition-sciences .feuille-corps .sc-chiffre,
body.edition-sciences .feuille-corps .sc-experience,
body.edition-sciences .feuille-corps .sc-vocabulaire,
body.edition-sciences .feuille-corps .sc-frise,
body.edition-sciences .feuille-corps .sc-question {
  background: var(--creme);
  border-radius: 4mm;
  padding: calc(var(--interligne) * .9) calc(var(--interligne) * 1.1);
  border: 0;
}

body.edition-sciences .feuille-corps .sc-experience {
  background: transparent;
  border: 1.5px solid var(--vermillon);
  border-radius: 4mm;
}

body.edition-sciences .feuille-corps .sc-chiffre {
  background: var(--vermillon);
}
body.edition-sciences .feuille-corps .sc-chiffre-nombre { color: #fff; }
body.edition-sciences .feuille-corps .sc-chiffre-unite { color: rgba(255,255,255,.78); }
body.edition-sciences .feuille-corps .sc-chiffre-quoi { color: #fff; }

/* L'encadré « le savais-tu » reprend le même ton que les autres blocs :
   dans un livre d'enfant, le filet seul ne suffit pas à le détacher. */
body.edition-sciences .feuille-corps .encadre {
  background: var(--creme);
  border-left: 0;
  border-radius: 4mm;
  padding: calc(var(--interligne) * .8) calc(var(--interligne) * 1.1);
}

/* Les intertitres portent la couleur : ils servent de repères de
   lecture autant que de titres. */
body.edition-sciences .feuille-corps h3 {
  color: var(--vermillon);
  font-size: calc(var(--corps) * 1.15);
}

/* =========================================================
   LE REGISTRE DE L'ADULTE

   Les mêmes blocs, sans fond ni rondeur : un filet, du blanc, et
   l'accent seulement sur ce qui se compte.
   ========================================================= */

body.edition-documentaire .feuille-corps .sc-chiffre,
body.edition-encyclopedie .feuille-corps .sc-chiffre,
body.edition-documentaire .feuille-corps .sc-experience,
body.edition-encyclopedie .feuille-corps .sc-experience,
body.edition-documentaire .feuille-corps .sc-vocabulaire,
body.edition-encyclopedie .feuille-corps .sc-vocabulaire,
body.edition-documentaire .feuille-corps .sc-frise,
body.edition-encyclopedie .feuille-corps .sc-frise,
body.edition-documentaire .feuille-corps .sc-question,
body.edition-encyclopedie .feuille-corps .sc-question {
  background: transparent;
  border-left: 2px solid var(--filet);
  border-radius: 0;
  padding: calc(var(--interligne) * .3) 0 calc(var(--interligne) * .3)
           calc(var(--interligne) * 1);
}

body.edition-encyclopedie .feuille-corps .sc-chiffre { text-align: left; }
body.edition-encyclopedie .feuille-corps .sc-chiffre-nombre {
  font-size: calc(var(--corps) * 1.9);
}


/* =========================================================
   LES BLOCS LUDIQUES

   Ceux-ci ne servent pas à expliquer mais à retenir : ils arrêtent
   l'œil qui balaie la page. C'est pourquoi ils sont plus dessinés que
   les autres — une fiche qui ressemble à un paragraphe ne serait pas
   une fiche.
   ========================================================= */

.feuille-corps .sc-fiche,
.feuille-corps .sc-vraifaux,
.feuille-corps .sc-defi,
.feuille-corps .sc-echelle,
.feuille-corps .sc-guide {
  break-inside: avoid;
  margin: calc(var(--interligne) * 1.5) 0;
  text-indent: 0;
}
.feuille-corps .sc-fiche p, .feuille-corps .sc-vraifaux p,
.feuille-corps .sc-defi p, .feuille-corps .sc-echelle p,
.feuille-corps .sc-guide p { text-indent: 0; }

/* ---- La fiche d'identité ----
   Une carte : le portrait, le nom, puis les mesures en deux colonnes.
   C'est la forme des guides d'observation, et un enfant la reconnaît
   d'un livre à l'autre. */

.feuille-corps .sc-fiche-vue,
.feuille-corps .sc-fiche img {
  display: block;
  width: 100%;
  max-height: calc(var(--interligne) * 8);
  object-fit: contain;
  margin: 0 0 calc(var(--interligne) * .5);
}

.feuille-corps .sc-fiche-nom {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * 1.25);
  margin: 0;
  line-height: 1.15;
}
.feuille-corps .sc-fiche-latin {
  font-style: italic;
  color: var(--gris-chaud);
  font-size: calc(var(--corps) * .88);
  margin: 0 0 calc(var(--interligne) * .5);
}

.feuille-corps .sc-fiche-liste {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .8em;
  row-gap: calc(var(--interligne) * .15);
  font-size: calc(var(--corps) * .92);
}
.feuille-corps .sc-fiche-liste dt {
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * .68);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-chaud);
  align-self: baseline;
}
.feuille-corps .sc-fiche-liste dd { margin: 0; }

/* ---- Le vrai ou faux ---- */

.feuille-corps .sc-affirmation {
  font-family: var(--police-titre);
  font-weight: 500;
  margin: calc(var(--interligne) * .5) 0 calc(var(--interligne) * .1);
}
.feuille-corps .sc-verdict {
  margin: 0;
  font-size: calc(var(--corps) * .92);
}
.feuille-corps .sc-vrai,
.feuille-corps .sc-faux {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * .72);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .12em .6em;
  border-radius: 999px;
  margin-right: .5em;
  color: #fff;
}
.feuille-corps .sc-vrai { background: #3F9C53; }
.feuille-corps .sc-faux { background: var(--vermillon); }

/* ---- Le défi ----
   Une étoile en marge, et rien d'autre : c'est un appel, pas un
   encadré de plus. */

.feuille-corps .sc-defi { position: relative; padding-left: calc(var(--interligne) * 2); }
.feuille-corps .sc-defi::before {
  content: '★';
  position: absolute;
  left: 0;
  top: 0;
  font-size: calc(var(--corps) * 1.4);
  color: var(--vermillon);
  line-height: 1;
}

/* ---- L'échelle ----
   Une mesure ne dit rien à un enfant ; une comparaison, si. La chose
   mesurée en petit, la comparaison en grand : c'est elle qu'on retient. */

.feuille-corps .sc-echelle { text-align: center; }
.feuille-corps .sc-echelle-quoi {
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * .68);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-chaud);
  margin: 0;
}
.feuille-corps .sc-echelle-comme {
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * 1.3);
  line-height: 1.2;
  margin: calc(var(--interligne) * .2) 0 0;
}
.feuille-corps .sc-echelle-comme strong { color: var(--vermillon); }

/* ---- La mascotte ----
   Elle parle depuis la marge, sa vignette à gauche et sa phrase à
   droite. Une bulle pointée serait de trop dans un livre imprimé :
   c'est le décalage qui fait la voix. */

.feuille-corps .sc-guide {
  display: grid;
  grid-template-columns: calc(var(--interligne) * 4) 1fr;
  column-gap: calc(var(--interligne) * .8);
  align-items: start;
}
.feuille-corps .sc-guide-vue,
.feuille-corps .sc-guide img {
  grid-row: 1 / span 2;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 50%;
}
.feuille-corps .sc-guide-qui {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * .72);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin: 0;
}
.feuille-corps .sc-guide-dit { margin: 0; font-style: italic; }

/* ---- L'emplacement d'image vide ----
   Il se voit dans l'atelier et à l'écran, jamais sur le papier : le
   contrôle avant envoi refuse un livre qui en porte encore. */

.feuille-corps .illustration-vide {
  display: grid;
  place-items: center;
  min-height: calc(var(--interligne) * 4);
  border: 1.5px dashed var(--filet);
  border-radius: 3mm;
  color: var(--gris-chaud);
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * .72);
  font-style: normal;
  text-align: center;
  padding: calc(var(--interligne) * .5);
}

/* ---- Le registre de la jeunesse ---- */

body.edition-sciences .feuille-corps .sc-fiche,
body.edition-sciences .feuille-corps .sc-vraifaux {
  background: var(--creme);
  border-radius: 4mm;
  padding: calc(var(--interligne) * .9) calc(var(--interligne) * 1.1);
}
body.edition-sciences .feuille-corps .sc-echelle {
  background: var(--creme);
  border-radius: 4mm;
  padding: calc(var(--interligne) * .7) calc(var(--interligne) * 1);
}
body.edition-sciences .feuille-corps .sc-defi {
  border-left: 2px solid var(--vermillon);
  padding-left: calc(var(--interligne) * 2.4);
}
body.edition-sciences .feuille-corps .sc-defi::before {
  left: calc(var(--interligne) * .5);
}

/* ---- Le registre de l'adulte ---- */

body.edition-documentaire .feuille-corps .sc-fiche,
body.edition-encyclopedie .feuille-corps .sc-fiche,
body.edition-documentaire .feuille-corps .sc-vraifaux,
body.edition-encyclopedie .feuille-corps .sc-vraifaux,
body.edition-documentaire .feuille-corps .sc-echelle,
body.edition-encyclopedie .feuille-corps .sc-echelle {
  background: transparent;
  border-left: 2px solid var(--filet);
  border-radius: 0;
  padding: calc(var(--interligne) * .3) 0 calc(var(--interligne) * .3)
           calc(var(--interligne) * 1);
}


/* ---------- Les onglets de tranche ----------

   Une bande de couleur mordant sur le bord extérieur, à la hauteur du
   chapitre. Elle change de côté avec la reliure : à droite sur une
   belle page, à gauche sur une fausse — sinon elle disparaîtrait dans
   le fond de cahier, où personne ne la verrait jamais.

   Elle déborde jusqu'au bord de la feuille : c'est ce qui la rend
   visible sur la tranche du livre fermé. */

.feuille-onglet {
  position: absolute;
  width: calc(var(--interligne) * 1.1);
  right: 0;
  border-radius: 2mm 0 0 2mm;
  opacity: .9;
}
.feuille.est-paire .feuille-onglet {
  right: auto;
  left: 0;
  border-radius: 0 2mm 2mm 0;
}

/* Sur la belle page d'ouverture, l'onglet est plein et porte le
   chapitre : c'est là qu'on l'apprend. */
.feuille.ouvre-chapitre .feuille-onglet {
  width: calc(var(--interligne) * 1.6);
  opacity: 1;
}

/* Ici dormait une regle `body.a-onglets` que personne ne posait : le
   document imprime porte `a-cadre`, `a-reglure` et `a-numero-coupe`,
   jamais celle-la. Son commentaire annoncait de surcroit l'inverse de
   ce qu'elle faisait — il promettait au titre la couleur de l'onglet,
   la declaration la lui retirait.

   Retiree plutot qu'activee : l'activer changerait l'allure des neuf
   editions a onglets, et ce n'est pas une decision de nettoyage. Si la
   maison veut que le rang perde sa couleur sur la page d'ouverture,
   c'est un choix a prendre en le regardant. */


/* =========================================================
   LE REGISTRE MAXIMALISTE

   C'est celui du documentaire jeunesse : on n'y cherche pas le calme,
   on y cherche l'abondance. Une page doit porter beaucoup et donner
   envie d'y revenir — mais l'abondance n'est pas le désordre, et c'est
   la couleur du chapitre qui tient l'ensemble.

   Une seule variable, `--couleur-chapitre`, posée par le metteur en
   pages. Tout ce qui prend de la couleur la prend d'elle : les
   intertitres, les chiffres, les onglets, les pastilles. Changer la
   couleur d'un chapitre change sa partie entière, d'un coup.

   Le vermillon reste l'accent de la maison sur les liminaires et le
   texte courant ; à l'intérieur d'un chapitre, c'est la couleur du
   chapitre qui parle.
   ========================================================= */

body.edition-sciences .feuille {
  --accent-vif: var(--couleur-chapitre, var(--vermillon));
}

/* ---- Ce qui prend la couleur du chapitre ---- */

body.edition-sciences .feuille .rang,
body.edition-sciences .feuille .feuille-corps h3,
body.edition-sciences .feuille .sc-fig,
body.edition-sciences .feuille .sc-date,
body.edition-sciences .feuille .sc-echelle-comme strong,
body.edition-sciences .feuille .sc-guide-qui,
body.edition-sciences .feuille .encadre-titre,
body.edition-sciences .feuille .sc-titre {
  color: var(--accent-vif);
}

body.edition-sciences .feuille .sc-chiffre,
body.edition-sciences .feuille .sc-reperes li::before,
body.edition-sciences .feuille .sc-demande::before,
body.edition-sciences .feuille .sc-faux {
  background: var(--accent-vif);
}

body.edition-sciences .feuille .sc-experience,
body.edition-sciences .feuille .sc-defi {
  border-color: var(--accent-vif);
}

body.edition-sciences .feuille.ouvre-chapitre .rang::after {
  background: var(--accent-vif);
}

/* ---- L'ouverture de chapitre : un aplat plein ----

   La page d'ouverture porte la couleur en grand. C'est la seule page
   du chapitre où elle occupe le fond : partout ailleurs elle se
   contente d'accents, sinon le texte deviendrait illisible. */

body.edition-sciences .feuille.ouvre-chapitre {
  background: var(--accent-vif);
}
body.edition-sciences .feuille.ouvre-chapitre .feuille-corps {
  color: #fff;
  padding-top: calc(var(--interligne) * 7);
}
body.edition-sciences .feuille.ouvre-chapitre .rang,
body.edition-sciences .feuille.ouvre-chapitre h2,
body.edition-sciences .feuille.ouvre-chapitre .rang-soustitre {
  color: #fff;
}
body.edition-sciences .feuille.ouvre-chapitre .rang::after {
  background: #fff;
  opacity: .8;
}
body.edition-sciences .feuille.ouvre-chapitre .feuille-folio { color: #fff; }
body.edition-sciences .feuille.ouvre-chapitre .feuille-onglet { background: #fff; }

/* Le premier paragraphe du chapitre passe sur l'aplat : il sert
   d'accroche et se compose plus grand. */
body.edition-sciences .feuille.ouvre-chapitre .feuille-corps > p {
  font-size: calc(var(--corps) * 1.15);
  color: rgba(255, 255, 255, .92);
}
body.edition-sciences .feuille.ouvre-chapitre .a-lettrine .lettrine { color: #fff; }

/* ---- La densité d'information ----

   Une illustration au fil du texte ne prend pas toute la largeur : le
   texte l'épouse. C'est ce qui permet de poser trois fois plus de
   choses sur une page sans qu'elle paraisse tassée. */

body.edition-sciences .feuille-corps figure.illustration {
  float: right;
  width: 42%;
  margin: 0 0 calc(var(--interligne) * .6) calc(var(--interligne) * 1);
  break-inside: avoid;
}
body.edition-sciences .feuille.est-paire .feuille-corps figure.illustration {
  float: left;
  margin: 0 calc(var(--interligne) * 1) calc(var(--interligne) * .6) 0;
}
body.edition-sciences .feuille-corps figure.illustration img {
  width: 100%;
  height: auto;
  margin: 0;
}
body.edition-sciences .feuille-corps figure.illustration figcaption {
  text-align: left;
  font-size: calc(var(--corps) * .74);
  margin-top: calc(var(--interligne) * .2);
}

/* Une pleine page reste pleine page : elle ne flotte pas. */
body.edition-sciences .feuille-corps figure.illustration.pleine-page {
  float: none;
  width: 100%;
  margin: 0;
}

/* Les blocs se serrent : dans un livre abondant, un blanc de deux
   interlignes entre chaque encadré mangerait la moitié de la page. */
body.edition-sciences .feuille-corps .sc-chiffre,
body.edition-sciences .feuille-corps .sc-experience,
body.edition-sciences .feuille-corps .sc-vocabulaire,
body.edition-sciences .feuille-corps .sc-frise,
body.edition-sciences .feuille-corps .sc-question,
body.edition-sciences .feuille-corps .sc-fiche,
body.edition-sciences .feuille-corps .sc-vraifaux,
body.edition-sciences .feuille-corps .sc-echelle,
body.edition-sciences .feuille-corps .sc-defi,
body.edition-sciences .feuille-corps .encadre {
  margin-block: calc(var(--interligne) * .9);
}

/* La fiche et le chiffre se posent en marge quand la place le permet :
   le texte continue à côté, et la page porte deux fois plus. */
body.edition-sciences .feuille-corps .sc-fiche,
body.edition-sciences .feuille-corps .sc-chiffre {
  float: right;
  width: 44%;
  margin-left: calc(var(--interligne) * 1);
  clear: right;
}
body.edition-sciences .feuille.est-paire .feuille-corps .sc-fiche,
body.edition-sciences .feuille.est-paire .feuille-corps .sc-chiffre {
  float: left;
  margin-left: 0;
  margin-right: calc(var(--interligne) * 1);
  clear: left;
}

/* Ce qui a besoin de la largeur entière la garde. */
body.edition-sciences .feuille-corps .sc-experience,
body.edition-sciences .feuille-corps .sc-comparaison,
body.edition-sciences .feuille-corps .sc-schema { clear: both; }


/* ---------- La page d'ouverture en aplat ----------

   Elle ne porte que le titre et son accroche : le texte commence à la
   page suivante. Le titre descend plus bas que sur une ouverture
   ordinaire — sur un aplat, le blanc du haut est de la couleur, et il
   en faut davantage pour que le titre ne paraisse pas collé. */

body.edition-sciences .feuille.ouvre-chapitre h2 {
  font-size: calc(var(--corps) * 3);
  max-width: 100%;
}

body.edition-sciences .feuille.ouvre-chapitre .rang-soustitre {
  font-size: calc(var(--corps) * 1.2);
  color: rgba(255, 255, 255, .85);
}

/* L'onglet de la page d'ouverture court sur toute la hauteur : c'est
   la seule page où il annonce le chapitre plutôt que de le repérer. */
body.edition-sciences .feuille.ouvre-chapitre .feuille-onglet {
  top: 0 !important;
  height: 100% !important;
  border-radius: 0;
}


/* =========================================================
   L'ENCYCLOPÉDIE JEUNESSE — CE QUI LA SÉPARE D'UN CAHIER

   Le registre précédent empilait des cases à étiquettes en capitales.
   C'est la grammaire du cahier d'exercices : un formulaire à remplir,
   rangé, sage, et parfaitement ennuyeux.

   Une encyclopédie pour enfants fonctionne à l'inverse :

     — l'image mène. Elle est grande, détourée, posée sans cadre, et
       c'est le texte qui s'arrange autour d'elle ;

     — rien n'est enfermé. Un fait n'a pas besoin d'une boîte grise
       pour exister : sa place et sa taille suffisent à le distinguer ;

     — les repères sont sur l'image, pas dessous. Une pastille numérotée
       posée sur le dessin, c'est ce qui fait qu'on lit un schéma sans
       aller-retour ;

     — on ne crie pas. « LES MOTS À RETENIR » en capitales espacées est
       une consigne de maître. Un mot en couleur suffit ;

     — les tailles varient beaucoup. Une page où tout fait la même
       hauteur est une page de formulaire.

   Ce qui suit défait donc ce que le registre « cahier » avait posé.
   ========================================================= */

/* ---------- On enlève les cases ---------- */

body.edition-sciences .feuille-corps .sc-chiffre,
body.edition-sciences .feuille-corps .sc-vocabulaire,
body.edition-sciences .feuille-corps .sc-frise,
body.edition-sciences .feuille-corps .sc-question,
body.edition-sciences .feuille-corps .sc-fiche,
body.edition-sciences .feuille-corps .sc-vraifaux,
body.edition-sciences .feuille-corps .sc-echelle,
body.edition-sciences .feuille-corps .encadre {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* ---------- On arrête de crier ----------

   L'étiquette en capitales très espacées devient un mot en couleur,
   posé dans le texte. C'est le seul changement qui, à lui seul, fait
   passer la page du cahier au livre. */

body.edition-sciences .feuille-corps .sc-titre,
body.edition-sciences .feuille-corps .encadre-titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * 1.05);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-vif);
  margin: 0 0 calc(var(--interligne) * .2);
}

body.edition-sciences .feuille-corps .sc-etiquette {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: calc(var(--corps) * .92);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-vif);
  margin-top: calc(var(--interligne) * .5);
}

/* ---------- L'image mène ----------

   Grande, sans cadre, et débordant dans la marge extérieure. Ce débord
   est ce qui distingue une page d'encyclopédie d'une page de manuel :
   l'image n'est pas rangée dans la justification, elle en sort. */

body.edition-sciences .feuille-corps figure.illustration {
  width: 56%;
  margin-right: calc(var(--me) * -0.6);
  margin-bottom: calc(var(--interligne) * .8);
  margin-left: calc(var(--interligne) * 1.2);
}
body.edition-sciences .feuille.est-paire .feuille-corps figure.illustration {
  margin-left: calc(var(--me) * -0.6);
  margin-right: calc(var(--interligne) * 1.2);
}

body.edition-sciences .feuille-corps figure.illustration figcaption {
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * .76);
  line-height: 1.35;
  color: var(--encre);
  border-left: 2px solid var(--accent-vif);
  padding-left: .6em;
  margin-top: calc(var(--interligne) * .3);
}

/* ---------- Le chiffre-clé, libre ----------

   Plus de rectangle rouge. Le nombre est énorme, il porte la couleur
   du chapitre, et le texte passe à côté. C'est sa taille qui l'annonce,
   pas son fond. */

body.edition-sciences .feuille-corps .sc-chiffre {
  width: 38%;
  text-align: left;
  margin-bottom: calc(var(--interligne) * .8);
}
body.edition-sciences .feuille-corps .sc-chiffre-nombre {
  font-size: calc(var(--corps) * 4.2);
  line-height: .88;
  color: var(--accent-vif);
  letter-spacing: -.02em;
}
body.edition-sciences .feuille-corps .sc-chiffre-unite {
  font-size: calc(var(--corps) * .9);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-vif);
  margin: 0;
}
body.edition-sciences .feuille-corps .sc-chiffre-quoi {
  color: var(--encre);
  font-size: calc(var(--corps) * .88);
  margin-top: calc(var(--interligne) * .2);
}

/* ---------- Les repères sur le schéma ----------

   La pastille se pose sur le dessin. Comme on ne sait pas où tombera
   l'image, on aligne les repères le long de son bord : ils restent
   attachés à elle, et l'œil fait le lien. */

body.edition-sciences .feuille-corps .sc-schema {
  width: 100%;
  margin: calc(var(--interligne) * 1.2) 0;
}
body.edition-sciences .feuille-corps .sc-reperes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--interligne) * 1.2);
  font-size: calc(var(--corps) * .8);
}
body.edition-sciences .feuille-corps .sc-reperes li::before {
  background: var(--accent-vif);
}

/* ---------- La fiche : une étiquette de spécimen ----------

   Pas une carte grise. Le portrait détouré, le nom en grand dessous,
   le nom latin en italique, et les mesures en petites lignes — comme
   sous une planche de naturaliste. */

body.edition-sciences .feuille-corps .sc-fiche {
  width: 40%;
  border-left: 2px solid var(--accent-vif);
  padding-left: calc(var(--interligne) * .8);
}
body.edition-sciences .feuille-corps .sc-fiche-nom {
  font-size: calc(var(--corps) * 1.5);
  color: var(--accent-vif);
}
body.edition-sciences .feuille-corps .sc-fiche-liste dt {
  letter-spacing: 0;
  text-transform: none;
  font-size: calc(var(--corps) * .78);
}

/* ---------- Le vrai ou faux, la question, le défi ----------

   Ils gardent leur signe — pastille, étoile, point d'interrogation —
   et perdent leur fond. Le signe suffit à les annoncer. */

body.edition-sciences .feuille-corps .sc-vraifaux,
body.edition-sciences .feuille-corps .sc-question,
body.edition-sciences .feuille-corps .sc-defi,
body.edition-sciences .feuille-corps .sc-experience,
body.edition-sciences .feuille-corps .sc-vocabulaire,
body.edition-sciences .feuille-corps .encadre {
  border-left: 2px solid var(--accent-vif);
  padding-left: calc(var(--interligne) * .9);
  margin-block: calc(var(--interligne) * 1);
}

body.edition-sciences .feuille-corps .sc-experience {
  border-left-width: 3px;
}

body.edition-sciences .feuille-corps .sc-defi::before {
  left: calc(var(--interligne) * .9 * -1 + 2px);
  background: #fff;
}

/* ---------- L'échelle, en toutes lettres ---------- */

body.edition-sciences .feuille-corps .sc-echelle {
  text-align: left;
  border-left: 2px solid var(--accent-vif);
  padding-left: calc(var(--interligne) * .9);
}
body.edition-sciences .feuille-corps .sc-echelle-quoi {
  letter-spacing: 0;
  text-transform: none;
  font-size: calc(var(--corps) * .85);
}
body.edition-sciences .feuille-corps .sc-echelle-comme {
  font-size: calc(var(--corps) * 1.6);
  line-height: 1.1;
}

/* ---------- La mascotte, sans cadre ---------- */

body.edition-sciences .feuille-corps .sc-guide-qui {
  letter-spacing: 0;
  text-transform: none;
  font-size: calc(var(--corps) * .9);
}
body.edition-sciences .feuille-corps .sc-guide-dit {
  font-size: calc(var(--corps) * .95);
}

/* ---------- Les mots à retenir ----------

   En fin de chapitre, en deux colonnes, sans fond : c'est un lexique,
   pas un exercice de vocabulaire. */

body.edition-sciences .feuille-corps .sc-vocabulaire {
  columns: 2;
  column-gap: calc(var(--interligne) * 1.2);
}
body.edition-sciences .feuille-corps .sc-vocabulaire .sc-titre {
  column-span: all;
}
body.edition-sciences .feuille-corps .sc-mot {
  color: var(--accent-vif);
  break-after: avoid;
}
body.edition-sciences .feuille-corps .sc-sens {
  font-size: calc(var(--corps) * .85);
  break-inside: avoid;
}

/* ---------- La frise, en ligne ---------- */

body.edition-sciences .feuille-corps .sc-frise {
  border-left: 2px solid var(--accent-vif);
  padding-left: calc(var(--interligne) * .9);
}
body.edition-sciences .feuille-corps .sc-date { color: var(--accent-vif); }


/* =========================================================
   LE ROMAN JEUNESSE

   Le numéro de chapitre en très grand, seul au-dessus du titre. C'est
   le repère de cet âge — « j'en suis au douze » — et il vaut mieux
   qu'un mot « CHAPITRE » répété vingt fois.

   Pas de titre courant : la page ne porte que le texte et son folio.
   ========================================================= */

.rang-geant {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * 5);
  line-height: .85;
  color: var(--vermillon);
  text-indent: 0;
  text-align: left;
  margin: 0 0 calc(var(--interligne) * .6);
  font-variant-numeric: lining-nums;
}

/* Le titre du chapitre passe après le numéro, et plus discrètement :
   c'est le numéro qui ouvre, le titre qui précise. */
body.edition-recits .feuille.ouvre-chapitre h2 {
  font-size: calc(var(--corps) * 1.6);
  font-weight: 600;
  margin-bottom: calc(var(--interligne) * 2.5);
  max-width: 80%;
}

/* La descente est plus courte que dans un roman d'adulte : à cet âge,
   une page d'ouverture aux trois quarts vide donne le sentiment qu'on
   perd son temps. */
body.edition-recits .feuille.ouvre-chapitre .feuille-corps {
  padding-top: calc(var(--interligne) * 4);
}

/* Un filet fin sous le numéro, de la largeur du chiffre. */
.rang-geant::after {
  content: '';
  display: block;
  width: calc(var(--corps) * 3);
  height: 2px;
  margin-top: calc(var(--interligne) * .3);
  background: var(--vermillon);
}


/* ---------- Les notes de bas de page ----------

   Un filet court, du petit corps, et le rang en exposant. La zone
   s’appuie sur le bas du bloc de texte, jamais sur le folio : entre
   les deux il faut du blanc, sinon la note paraît être un titre
   courant de pied.

   La hauteur est prise au texte, pas ajoutée à la page : c’est le
   metteur en pages qui s’en charge, et c’est ce qui garantit qu’une
   note ne recouvre jamais la dernière ligne. */

.feuille-notes {
  position: absolute;
  left: var(--mi);
  right: var(--me);
  bottom: calc(var(--mp) + var(--interligne) * .5);
  padding-top: calc(var(--interligne) * .4);
  font-size: calc(var(--corps) * .78);
  line-height: calc(var(--interligne) * .82);
  color: var(--encre);
  text-align: left;
  hyphens: none;
}
.feuille.est-paire .feuille-notes { left: var(--me); right: var(--mi); }

/* Le filet ne traverse pas la page : un tiers de la justification
   suffit à dire « ce qui suit n’est plus le texte ». */
.feuille-notes::before {
  content: '';
  display: block;
  width: 32%;
  height: 1px;
  background: var(--filet);
  margin-bottom: calc(var(--interligne) * .35);
}

.note-ligne {
  margin: 0 0 calc(var(--interligne) * .18);
  text-indent: 0;
  padding-left: 1.4em;
  text-indent: -1.4em;
}

.note-rang {
  color: var(--vermillon);
  font-weight: 600;
  margin-right: .25em;
}

/* L’appel dans le texte : petit, en couleur, et sans espace avant —
   il se colle au mot qu’il commente. */
.note-appel {
  font-size: .68em;
  vertical-align: .38em;
  color: var(--vermillon);
  font-weight: 600;
  line-height: 0;
}

/* Dans l’atelier d’écriture, la note se voit en clair : on doit
   pouvoir la relire sans ouvrir la vue à imprimer. */


/* ---------- L'index alphabétique ----------

   Deux colonnes, les entrées alignées à gauche, les pages au fil.
   L'initiale sépare les groupes : sans elle, on ne peut pas viser une
   lettre du pouce, et c'est pourtant ainsi qu'un index se consulte.

   Rien n'est justifié ici : une entrée d'index fait trois mots, et la
   justifier creuserait des trous. */

.feuille.est-index .feuille-corps {
  column-count: 2;
  column-gap: calc(var(--interligne) * 1.4);
  text-align: left;
  hyphens: none;
}

.idx-tete {
  column-span: all;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: calc(var(--corps) * 1.05);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris-chaud);
  margin: 0 0 calc(var(--interligne) * 1.5);
  text-indent: 0;
}

.idx-lettre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * .95);
  color: var(--vermillon);
  margin: calc(var(--interligne) * .9) 0 calc(var(--interligne) * .25);
  text-indent: 0;
  break-after: avoid;
}
.idx-lettre:first-child { margin-top: 0; }

.idx-entree {
  margin: 0 0 calc(var(--interligne) * .12);
  font-size: calc(var(--corps) * .88);
  text-indent: -1em;
  padding-left: 1em;
  break-inside: avoid;
}

.idx-pages {
  color: var(--gris-chaud);
  font-variant-numeric: tabular-nums;
}
.idx-pages::before { content: '  '; }

.idx-vide {
  column-span: all;
  font-style: italic;
  color: var(--gris-chaud);
  text-indent: 0;
}

/* Le mot marqué ne se voit pas dans le livre : il n'est qu'une
   étiquette. C'est dans l'atelier qu'il doit se reconnaître. */
.index-marque { font: inherit; color: inherit; }

/* =========================================================
   LES RÉGLAGES DE MÉTIER

   Ils ne se voient pas en écrivant et décident de tout sur le papier.
   Chacun est une classe, jamais un style en ligne : le nettoyeur du
   serveur n'admet que quatre propriétés de style, et une valeur qui
   vit dans la feuille se corrige pour le livre entier.
   ========================================================= */

/* L'approche : l'espace entre les lettres. Des capitales serrées
   deviennent illisibles ; un mot déjà large qu'on espace encore se
   défait en lettres séparées. Trois crans, ceux qu'un livre demande. */
.approche-serree { letter-spacing: -.012em; }
.approche-large  { letter-spacing: .09em; }

/* Les chiffres elzéviriens ont des jambages — le 3 et le 9 descendent,
   le 6 et le 8 montent — et se fondent dans la ligne au lieu d'y faire
   des bâtons. C'est ce qu'on veut d'une date dans une phrase, et
   exactement ce qu'on ne veut pas dans un tableau. */
.chiffres-anciens { font-variant-numeric: oldstyle-nums; }

/* Un tableau aligne ses chiffres en colonnes : ils doivent tous avoir
   la même chasse, sans quoi les unités ne tombent pas l'une sous
   l'autre. C'est le contraire du réglage précédent, et c'est pour cela
   qu'on ne peut pas en faire un choix unique pour le livre. */
.feuille-corps .tab-livre td,
.feuille-corps .tab-livre th { font-variant-numeric: tabular-nums lining-nums; }

/* Un paragraphe qu'on ne coupe pas entre deux pages. Le metteur en
   pages le sait aussi : la règle ci-dessous ne sert qu'à l'impression
   directe du navigateur, quand il repagine lui-même. */
.ne-pas-couper { break-inside: avoid; page-break-inside: avoid; }

/* Il reste avec ce qui suit : un intertitre ne s'imprime jamais seul
   au bas d'une page. */
.tenir-ensemble { break-after: avoid; page-break-after: avoid; }

/* Des noms propres, des adresses, des mots étrangers : ce qu'une
   césure française couperait au mauvais endroit. */
.sans-cesure { hyphens: none; -webkit-hyphens: none; }

/* Un paragraphe qui continue, ou qui suit un blanc : l'alinéa dirait
   qu'il commence, et ce serait faux. */
.feuille-corps p.sans-alinea { text-indent: 0; }

/* =========================================================
   LES STYLES NOMMÉS

   Chacun est un nom, et c'est ici qu'il prend une forme. Les changer
   ici les change partout : c'est tout l'intérêt de les avoir nommés.
   ========================================================= */

/* Le vers ne se justifie pas : sa longueur est celle que le poète lui
   a donnée, et l'étirer jusqu'à la marge la lui retire. */
.feuille-corps p.vers {
  text-align: left;
  text-indent: 0;
  margin: 0;
}

/* La légende : petit corps, un cran de gris, et jamais séparée de ce
   qu'elle légende. */
.feuille-corps p.legende {
  font-size: calc(var(--corps) * .82);
  line-height: calc(var(--interligne) * .78);
  color: var(--gris-chaud);
  text-align: left;
  margin: calc(var(--interligne) * .3) 0 var(--interligne);
}

/* Une adresse se lit ligne à ligne : elle ne se justifie pas non plus,
   sans quoi le navigateur écarterait les mots d'une rue. */
.feuille-corps p.adresse {
  text-align: left;
  margin: calc(var(--interligne) * .5) 0;
}

/* La consigne : ce qu'on demande de faire, lisible d'un coup d'œil. */
.feuille-corps p.consigne {
  font-family: var(--police-titre);
  font-weight: 600;
  text-align: left;
  margin: var(--interligne) 0 calc(var(--interligne) * .5);
}

/* La note de l'auteur : en retrait, en plus petit, adossée à un filet.
   Elle sort du récit sans le rompre. */
.feuille-corps p.note-auteur {
  font-size: calc(var(--corps) * .88);
  margin: var(--interligne) 0 var(--interligne) 6%;
  padding-left: 3mm;
  border-left: 1px solid var(--filet);
  text-align: left;
}

/* ── Le théâtre ──

   `Scène — le plan` pose depuis toujours `personnage` et `didascalie`,
   et RIEN ne les mettait en forme : une pièce se composait à plat, le
   nom du personnage dans le même gris que sa réplique, avec un alinéa.
   Les classes étaient déclarées, posées, et lues par personne.

   Les deux usages du théâtre imprimé : le nom détaché au-dessus de ce
   qu'il dit, la didascalie en italique et en retrait — elle n'est pas
   prononcée. */
.feuille-corps p.personnage {
  text-indent: 0;
  text-align: left;
  font-variant-caps: small-caps;
  letter-spacing: .06em;
  margin: var(--interligne) 0 0;
}

.feuille-corps p.didascalie {
  text-indent: 0;
  text-align: left;
  font-style: italic;
  color: var(--gris-chaud);
  margin-left: 6%;
}

/* Une réplique suit son personnage : elle ne s'en sépare pas d'un
   alinéa, qui la ferait passer pour un nouveau paragraphe de récit. */
.feuille-corps p.personnage + p,
.feuille-corps p.didascalie + p { text-indent: 0; }

/* La signature, la date, le lieu : à droite, à la fin. */
.feuille-corps p.signature {
  text-align: right;
  font-style: italic;
  margin: var(--interligne) 0 0;
}

/* =========================================================
   LES CINQ DESSINS DE TABLEAU

   Ce ne sont pas des goûts. Un tableau de chiffres se lit en colonne,
   et les filets verticaux y aident ; un tableau de phrases se lit en
   ligne, et les mêmes filets le hachent. Un tableau long se suit à la
   rayure ; un tableau de trois lignes n'en a pas besoin, et la rayure
   n'y fait que du bruit.

   Chaque dessin porte un nom, et c'est ici qu'il prend une forme : un
   livre entier se change ainsi d'un seul endroit.
   ========================================================= */

/* Les chiffres d'un tableau doivent tomber les uns sous les autres :
   même chasse pour tous, et pas de jambages. C'est le contraire de ce
   qu'on demande à une date au milieu d'une phrase. */
.feuille-corps .tab-livre td,
.feuille-corps .tab-livre th {
  font-variant-numeric: tabular-nums lining-nums;
  vertical-align: top;
}

/* L'alignement se pose sur la colonne entière. */
.feuille-corps .tab-livre .col-droite { text-align: right; }
.feuille-corps .tab-livre .col-centre { text-align: center; }

/* La première colonne porte le nom de la ligne : elle se lit comme un
   en-tête, et se comporte comme lui. */
.feuille-corps .tab-livre.a-tete-colonne td:first-child,
.feuille-corps .tab-livre.a-tete-colonne th:first-child {
  font-weight: 600;
  text-align: left;
}

/* --- Lignes alternées : pour un tableau long, où l'œil saute d'une
   ligne à la suivante et se perd. La teinte reste très pâle — à
   l'impression, un gris trop marqué mange le texte. */
.feuille-corps .tab-livre.est-raye tbody tr:nth-child(even) { background: rgba(20, 17, 14, .035); }
.feuille-corps .tab-livre.est-raye td { border-bottom: 0; }

/* --- Grille complète : des filets dans les deux sens, pour des
   chiffres qui se lisent en colonne autant qu'en ligne. */
.feuille-corps .tab-livre.est-grille td,
.feuille-corps .tab-livre.est-grille th {
  border: 1px solid var(--filet, #e6e1d9);
}

/* --- Sans filet : rien que du blanc entre les colonnes. Le plus léger
   des cinq, et le meilleur pour trois lignes — un tableau court n'a pas
   besoin qu'on lui dessine ses limites. */
.feuille-corps .tab-livre.est-nu td,
.feuille-corps .tab-livre.est-nu th { border: 0; }
.feuille-corps .tab-livre.est-nu thead th { border-bottom: 1px solid var(--encre, #14110e); }

/* --- Encadré : un cadre autour du tout, comme un tableau de synthèse
   qu'on veut détacher de la page. */
.feuille-corps .tab-livre.est-encadre {
  border: 1.5px solid var(--encre, #14110e);
}
.feuille-corps .tab-livre.est-encadre td,
.feuille-corps .tab-livre.est-encadre th { border-bottom: 1px solid var(--filet, #e6e1d9); }
.feuille-corps .tab-livre.est-encadre tr:last-child td { border-bottom: 0; }


/* ---------- Un tableau qu'on remplit à la main ----------

   Les cinq dessins ci-dessus supposent un tableau qui PORTE des
   chiffres. Une fiche à photocopier est l'inverse : ses cellules sont
   vides, et c'est la place qu'elles laissent qui fait tout le travail.

   Sans hauteur imposée, une ligne vide se compose en deux pixels : la
   grille de dix-huit lignes du registre de caisse s'imprimait en un
   trait de 96 px, où personne n'aurait pu écrire. Mesuré sur la fiche 1
   avant cette règle.

   Une ligne vaut donc une interligne et demie — la hauteur d'un chiffre
   écrit à la main, sans être serré. */
.feuille-corps .tab-livre.a-remplir td {
  /* Une ligne et demie d'interligne semblait la bonne hauteur pour une
     ecriture a la main. Mesure : une grille de dix-neuf lignes demandait
     alors 626 px sur les 691 de la page, et avec son titre, son intro et
     sa legende elle depassait — neuf grilles sur douze se faisaient
     rogner, le metteur en pages ne sachant pas couper un tableau.
     A un et un cinquieme, la meme grille tient sur sa page. */
  height: calc(var(--interligne) * 1.2);
}
/* Un en-tête de section à l'intérieur de la grille : il coupe le
   tableau en parties, et se pose sur un aplat très pâle pour qu'on le
   distingue d'une ligne à remplir. */
.feuille-corps .tab-livre.a-remplir tbody th {
  height: auto;
  background: rgba(20, 17, 14, .05);
  text-align: left;
  font-size: calc(var(--corps) * .82);
  letter-spacing: .04em;
}
/* La grille ne se coupe pas n'importe où : une fiche coupée en deux
   perd son en-tête, et une colonne sans son titre ne se remplit pas. */
.feuille-corps .tab-livre.a-remplir { break-inside: avoid; }


/* ---------- Le crédit d'une image ----------

   Il n'est ni la légende ni le texte de remplacement. La légende
   commente, le texte de remplacement s'entend, le crédit se cite : il
   nomme l'auteur et la licence, et une photographie sous Creative
   Commons BY ne se publie qu'à la condition qu'il reste visible.

   Il se compose donc plus petit et plus pâle que la légende — on ne le
   lit pas, on le vérifie — mais jamais en dessous du seuil où il
   cesserait d'être lisible : un crédit qu'on ne peut pas lire ne
   remplit pas la condition. */
.feuille-corps figcaption .credit {
  display: block;
  margin-top: .15em;
  /* La taille se prend sur le corps du livre, jamais en em : la légende
     est déjà réduite à .8, et un .84 par-dessus tombait à moins de sept
     points sur un livre composé en dix. Un crédit qu'on ne peut pas
     lire ne remplit pas la condition de la licence — il fallait donc un
     plancher, et un plafond pour qu'un livre d'enfant composé en
     quatorze ne lui donne pas plus de place qu'à la légende. */
  font-size: clamp(7pt, calc(var(--corps) * .7), 9pt);
  color: var(--gris-chaud);
}


/* =========================================================
   TROIS DISPOSITIFS VUS DANS DE VRAIS LIVRES

   Ils viennent des photographies envoyées par la maison : un livre de
   jardinage dont chaque geste porte sa pastille, une planche dont la
   nomenclature répond aux repères du dessin, une histoire culturelle
   dont les légendes font quatre lignes.

   Une règle les gouverne tous les trois : ils restent sur la grille.
   Un livre se compose sur une trame de lignes, et un bloc qui mesure
   une ligne et demie décale tout ce qui le suit — sur la page d'en
   face, les lignes ne se répondent plus. Ils prennent donc l'interligne
   du livre, même quand leur corps est plus petit.
   ========================================================= */

/* ---- L'étape numérotée ----

   Le numéro n'est pas dans le texte de l'auteur : il est posé par le
   metteur en pages, avant la coulée, et lu ici. Un compteur CSS ne
   pouvait pas faire ce travail — sa portée s'arrête aux frères
   suivants, et après pagination une étape n'est plus la sœur du titre
   qui l'ouvrait. Mis à l'épreuve, il redonnait « 1 » en tête de chaque
   page.

   La pastille est en position absolue : elle n'ajoute pas de hauteur,
   donc elle ne décale pas la grille. */
.feuille-corps p.etape {
  position: relative;
  padding-left: 2.4em;
  margin: 0 0 var(--interligne);
  text-indent: 0;
  /* Au fer à gauche, et non justifié. Un bloc de trois lignes justifié
     contre une pastille creuse des rivières de blanc : il n'y a pas
     assez de mots dans la ligne pour les répartir. Les livres pratiques
     ragent leurs étapes, et c'est pour cette raison. */
  text-align: left;
}
.feuille-corps p.etape::before {
  content: attr(data-numero);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.55em;
  height: 1.55em;
  line-height: 1.55em;
  text-align: center;
  border-radius: 50%;
  background: var(--accent-vif, var(--vermillon));
  color: #fff;
  font-family: var(--police-titre);
  font-size: .82em;
  font-variant-numeric: tabular-nums;
}
/* J'avais d'abord resserré les étapes de trente-cinq centièmes
   d'interligne, en écrivant dans ce commentaire que la grille tenait.
   Elle ne tenait pas : trente-cinq centièmes de ligne ne sont pas une
   ligne, et dix étapes décalaient le bas de la page de trois lignes et
   demie. Sur la page d'en face, les lignes ne se répondaient plus.

   Un blanc entre deux étapes vaut donc une ligne pleine, ou rien. Une
   ligne pleine : la pastille marque déjà chaque étape, et l'air aide à
   suivre une marche pas à pas les mains occupées. */
.feuille-corps p.etape + p.etape { margin-top: 0; }

/* ---- La nomenclature ----

   Ici le numéro EST du texte, et c'est la différence avec l'étape : il
   doit répondre à un repère tracé dans le dessin. L'illustratrice a
   écrit « 3 » sur la planche ; le logiciel n'a pas à en décider. Il
   compose seulement la liste, en alinéa suspendu pour que les numéros
   s'alignent et que l'œil descende la colonne. */
.feuille-corps p.nomenclature {
  margin: 0;
  padding-left: 1.6em;
  text-indent: -1.6em;
  font-size: calc(var(--corps) * .86);
  line-height: var(--interligne);
  color: var(--gris-chaud);
  /* Ce qui s'aligne ici, ce sont les NUMEROS, au fer a gauche : c'est
     par eux que l'oeil descend la colonne pour retrouver le « 7 » du
     dessin. Le texte qui suit un nombre a deux chiffres part un peu
     plus loin — c'est la limite d'un alinea suspendu, et les planches
     de botanique s'en accommodent depuis deux siecles. Les chiffres
     tabulaires font au moins que « 1 » et « 2 » occupent la meme
     largeur. */
  font-variant-numeric: tabular-nums;
}
/* `:first-of-type` aurait designe le premier <p> du conteneur, pas la
   premiere entree de la liste : apres pagination, une nomenclature
   arrivant en tete de page l'aurait emporte par accident. On demande
   donc ce qu'on veut vraiment — celle qui ne suit pas une autre. */
.feuille-corps :not(.nomenclature) + p.nomenclature { margin-top: var(--interligne); }
.feuille-corps p.nomenclature + :not(.nomenclature) { margin-top: var(--interligne); }

/* ---- La légende longue ----

   Celle qui raconte au lieu de nommer. Elle ne se centre pas sous
   l'image — quatre lignes centrées ne se lisent pas — mais tient une
   justification réduite, au fer à gauche, sous un filet.

   Elle n'occupe pas la bande latérale, bien que ce fût sa place dans un
   beau livre : cinq des sept genres qui l'emploient n'ont pas de bande,
   et un dispositif qui ne marche que deux fois sur sept n'est pas un
   dispositif. */
.feuille-corps p.legende-longue {
  max-width: 72%;
  margin: var(--interligne) 0;
  /* Le blanc entre le filet et le texte vaut une ligne PLEINE, moins
     l'epaisseur du filet lui-meme. Mesure faite : a trente-cinq
     centiemes de ligne le bloc tombait a 6,393 interlignes et decalait
     tout ce qui suivait. Un filet n'est pas une decoration, il occupe
     de la place, et cette place se compte. */
  padding-top: calc(var(--interligne) - .4pt);
  border-top: .4pt solid var(--gris-chaud);
  font-size: calc(var(--corps) * .82);
  line-height: var(--interligne);
  text-align: left;
  text-indent: 0;
  color: var(--gris-chaud);
}
/* Sous une image, elle se colle à elle : c'est sa légende, pas un
   paragraphe qui suit. Le blanc supprimé est une ligne entière — le
   filet et son blanc suffisent à séparer — et la grille tient. */
.feuille-corps figure + p.legende-longue { margin-top: 0; }


/* =========================================================
   CE QUI CHANGE QUAND LE LECTEUR EST UN ENFANT

   La feuille de style ne connaissait que le GENRE du livre. Un
   documentaire pour enfants se composait donc exactement comme un
   essai : encadrés sans fond, titres en noir, filets gris. À huit ans,
   un encadré « le savais-tu ? » qui ne se distingue pas du texte n'est
   pas un encadré — c'est un paragraphe de plus.

   Le corps du document porte maintenant l'âge, et ces règles s'y
   accrochent. Elles ne touchent à AUCUNE hauteur : un fond, une
   couleur, un rayon d'angle ne décalent rien. La grille de base tient,
   et c'est ce qui permet de rendre un livre gai sans le déranger.

   La couleur est celle du chapitre quand le livre en a une — les
   onglets la posent — et l'accent de la maison sinon. Un seul endroit
   à changer, et tout le chapitre suit.
   ========================================================= */

body.est-jeune {
  --couleur-jeune: var(--couleur-chapitre, var(--vermillon));
}

/* ---- L'encadré redevient un encadré ----

   Le fond avait été retiré à dessein : « c'est le blanc autour qui le
   détache ». C'est vrai dans un livre d'adulte, où l'œil a le temps.
   Ça ne l'est pas dans un livre d'enfant, où l'encadré doit se voir
   avant d'être lu. */
body.est-jeune .feuille-corps .encadre {
  background: color-mix(in srgb, var(--couleur-jeune) 7%, transparent);
  border-left-width: 3px;
  border-radius: 0 3mm 3mm 0;
  padding-right: calc(var(--interligne) * .9);
}
body.est-jeune .feuille-corps .encadre-titre {
  color: var(--couleur-jeune);
  font-weight: 700;
}

/* ---- Les titres prennent la couleur du chapitre ---- */
body.est-jeune .feuille-corps h2,
body.est-jeune .feuille-corps h3,
body.est-jeune .feuille .rang,
body.est-jeune .feuille-corps .consigne,
body.est-jeune .feuille-corps .legende { color: var(--couleur-jeune); }

/* ---- Le grand numéro de chapitre ---- */
body.est-jeune .feuille .rang-geant { color: var(--couleur-jeune); opacity: 1; }

/* ---- Les images ont les angles arrondis ----

   Un angle vif est une convention d'adulte. Trois millimètres suffisent
   à changer le ton d'une page sans qu'on sache dire pourquoi. */
body.est-jeune .feuille-corps figure img,
body.est-jeune .feuille-corps .illustration-vide { border-radius: 3mm; }

/* ---- La définition devient une pastille ---- */
body.est-jeune .feuille-corps .definition {
  background: color-mix(in srgb, var(--couleur-jeune) 9%, transparent);
  border: 0;
  border-radius: 3mm;
}

/* ---- Chez les tout-petits, la couleur va jusqu'au filet ---- */
body.est-tout-petit .feuille-corps hr::before { color: var(--couleur-jeune); }
body.est-tout-petit .feuille-corps .etape::before {
  background: var(--couleur-jeune);
}


/* =========================================================
   QUATRE DISPOSITIFS DE PLUS

   Dix éditions sur vingt-six n'en portaient aucun : le théâtre,
   l'essai, le récit de vie, le beau livre, le catalogue, le roman.
   Elles se composaient donc toutes de la même façon — un bloc de
   texte sur une page — et rien ne les distinguait qu'un corps et une
   marge.
   ========================================================= */

/* ---- Le filet de tête ----

   Un trait fin sous le titre courant. Il sépare la page de son
   en-tête, et c'est ce qui permet de porter un titre courant sans
   qu'il se lise dans le texte. Sur une page nue ou de raccord, il n'y
   a pas d'en-tête : pas de filet non plus, sinon il barrerait du
   blanc. */
body.a-filet-tete .feuille:not(.est-nue):not(.est-raccord):not(.ouvre-chapitre)
  .feuille-entete {
  border-bottom: .4pt solid var(--filet);
  padding-bottom: calc(var(--interligne) * .3);
}

/* ---- Le cul-de-lampe ----

   Un fleuron à la fin du chapitre. Il dit que le chapitre est fini et
   non coupé — la différence se voit quand la dernière page est courte,
   et l'on se demande sinon s'il manque une feuille.

   Sa hauteur vaut deux interlignes pleins : la grille tient. */
.feuille-corps .cul-de-lampe {
  text-align: center;
  text-indent: 0;
  margin: var(--interligne) 0;
  height: var(--interligne);
  line-height: var(--interligne);
  font-size: calc(var(--corps) * 1.1);
  color: var(--vermillon);
  break-before: avoid;
}

/* ---- Le numéro de vers ----

   De cinq en cinq, dans la marge extérieure. On numérote les VERS et
   non les lignes typographiques : « acte II, scène 3, vers 412 »
   désigne le quatre cent douzième vers, quelle que soit la page où il
   tombe.

   Il est en position absolue : il n'ajoute donc aucune hauteur, et la
   grille de base ne bouge pas. */
body.a-numero-ligne .feuille-corps p.vers { position: relative; }
body.a-numero-ligne .feuille-corps p.vers[data-vers]::after {
  content: attr(data-vers);
  position: absolute;
  right: calc(var(--laterale, 0mm) * -1 - 6mm);
  top: 0;
  width: 6mm;
  text-align: right;
  font-size: calc(var(--corps) * .68);
  font-variant-numeric: tabular-nums;
  color: var(--gris-chaud);
  /* Un numéro de vers ne se lit pas à voix haute : il ne doit pas se
     retrouver dans une copie collée. */
  user-select: none;
}
/* Au verso, la marge extérieure est à gauche. */
body.a-numero-ligne .feuille.est-paire .feuille-corps p.vers[data-vers]::after {
  right: auto;
  left: calc(var(--laterale, 0mm) * -1 - 6mm);
  text-align: left;
}

/* ---------- La collection L'Algérie Pratique ----------

   Ce bloc n'est pas une interprétation : c'est la transcription des
   styles du moteur de la collection, `01-gabarit/build_book.py` et
   `assemble.py`, un à un. Chaque taille, chaque interligne et chaque
   blanc y est repris tel qu'il est déclaré là-bas.

       st_body      Lora 9,5 / 14      justifié, 8 pt après
       st_h2        Poppins-Md 11,5 / 15,5   17 avant, 6 après
       st_part      Poppins-Bd 17 / 21,5
       st_plabel    Poppins-Bd 8,5 / 11      gris foncé, 26 avant
       st_psub      Lora italique 10 / 14    gris, 15 après
       st_sectitle  Poppins-Bd 12,5 / 16
       st_ctitle    Poppins-Bd 8 / 10        blanc sur l'accent
       st_cbody     Lora 9,2 / 13,5          sur le crème
       st_fill      Lora 9,5 / 14            7 après
       st_note      Lora italique 8,3 / 12,5 gris
       st_term      Poppins-Md 9,5 / 13
       st_tblh      Poppins-Bd 7,5 / 9,5
       st_tblc      Lora 8,8 / 10,8
       st_schemat   Poppins-Bd 6,8 / 10      accent

   Les tailles s'expriment en fraction du corps, et non en points fixes :
   le corps se règle dans la fabrique, et tout doit suivre quand il
   change. Le rapport est celui du moteur — un intertitre vaut 11,5 sur
   un corps de 9,5, soit 1,2105 fois le corps, quel que soit le corps. */

/* Le texte courant : justifié, séparé par du blanc, SANS alinéa.
   Mesuré sur l'imprimé : les trente-quatre lignes d'une page commencent
   toutes à 46,8 pt. La collection ne rentre pas ses paragraphes — elle
   les espace. */
body.edition-pratique .feuille-corps p,
body.edition-pratique .feuille-corps li {
  text-indent: 0;
  margin: 0 0 calc(var(--corps) * 0.842);
}

body.edition-pratique .feuille-corps h2 {
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: calc(var(--corps) * 1.2105);
  line-height: 1.348;
  text-align: left;
  margin: calc(var(--corps) * 1.789) 0 calc(var(--corps) * 0.632);
}
body.edition-pratique .feuille-corps h2 .n { color: var(--coll-accent, var(--vermillon)); }

.feuille-corps .ap-partlabel {
  text-indent: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * 0.8947);
  line-height: 1.294;
  letter-spacing: .06em;
  color: var(--coll-gris-fonce, #4A4A4A);
  margin: calc(var(--corps) * 2.737) 0 calc(var(--corps) * 0.842);
  break-after: avoid;
}
.feuille-corps .ap-partlabel:first-child { margin-top: 0; }

.feuille-corps .ap-parttitle {
  text-indent: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * 1.7895);
  line-height: 1.2647;
  margin: calc(var(--corps) * 0.632) 0 calc(var(--corps) * 0.526);
  break-after: avoid;
}
.feuille-corps .ap-sectitle {
  text-indent: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * 1.3158);
  line-height: 1.28;
  margin: calc(var(--corps) * 1.684) 0 calc(var(--corps) * 0.632);
  break-after: avoid;
}
.feuille-corps .ap-partsub {
  text-indent: 0;
  font-style: italic;
  font-size: calc(var(--corps) * 1.0526);
  line-height: 1.4;
  color: var(--coll-gris, var(--gris-chaud));
  margin: 0 0 calc(var(--corps) * 1.579);
}

/* L'encadré : le titre sur un bandeau plein de l'accent, en blanc, et le
   corps sur le crème. Les retraits viennent du `borderPadding` du
   moteur : 2,5 pt en haut et en bas, 10 pt de chaque côté. */
.feuille-corps .ap-callout-titre,
.feuille-corps .ap-callout {
  text-indent: 0;
  margin: 0;
  break-inside: avoid;
}
.feuille-corps .ap-callout-titre {
  background: var(--coll-accent, var(--vermillon));
  color: #ffffff;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * 0.8421);
  line-height: 1.25;
  letter-spacing: .05em;
  padding: calc(var(--corps) * 0.7) calc(var(--corps) * 1.053);
  margin-top: calc(var(--corps) * 1.2);
  break-after: avoid;
}
.feuille-corps .ap-callout {
  background: var(--coll-creme, var(--creme));
  font-size: calc(var(--corps) * 0.9684);
  line-height: 1.467;
  text-align: left;
  padding: 0 calc(var(--corps) * 1.053);
}
.feuille-corps .ap-callout-titre + .ap-callout { padding-top: calc(var(--corps) * 0.6); }
.feuille-corps .ap-callout + .ap-callout { padding-top: calc(var(--corps) * 0.632); }
.feuille-corps .ap-callout:last-child { padding-bottom: calc(var(--corps) * 0.6); }

/* Le renvoi de fin de chapitre. */
.feuille-corps .ap-note {
  text-indent: 0;
  font-style: italic;
  font-size: calc(var(--corps) * 0.8737);
  line-height: 1.506;
  color: var(--coll-gris, var(--gris-chaud));
  margin: 0 0 calc(var(--corps) * 0.632);
}

/* Les pages à remplir.

   Une ligne à compléter PORTE SA LIGNE : le texte de la source finit par
   une suite de traits bas — « Mois : ______ ». Je lui ajoutais en plus un
   filet, un rembourrage et une grosse marge : trente pixels de mobilier
   par ligne, sur une vingtaine de lignes. Mesure : la fiche 18, une page
   dans le livre imprimé, en prenait HUIT — de 220 à 227.

   Le moteur de la collection compose ces lignes en Lora 9 sur 17,2, un
   point après, et rien d'autre. C'est ce qu'on fait ici. */
.feuille-corps .ap-fill {
  text-indent: 0;
  font-size: calc(var(--corps) * 0.9474);
  line-height: 1.911;
  color: var(--coll-encre, var(--encre));
  margin: 0 0 calc(var(--corps) * 0.105);
  break-inside: avoid;
  /* Une ligne à remplir est une suite de traits bas SANS ESPACE — «
     Mois : ______ » en compte soixante-seize d'affilée. Pour le
     navigateur c'est un seul mot, et un seul mot ne se coupe pas : il
     mesurait 665 px dans un bloc de 432, débordait, et le metteur en
     pages déclarait la page pleine. Sa coupure travaille sur les mots ;
     avec un mot unique elle renonce et renvoie le bloc à la page
     suivante, où il déborde encore. Sept pages remplies à trois pour
     cent, une ligne chacune.

     On autorise la coupure n'importe où : un trait bas coupé au milieu
     reste un trait bas. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Une ligne à remplir VIDE n'a pas de traits bas à porter : il lui faut
   donc une vraie ligne, et de la hauteur pour écrire dessus. Le moteur
   lui donne un interligne de 24 points. */
.feuille-corps .ap-fill:empty,
.feuille-corps .ap-fill.est-vide {
  min-height: calc(var(--corps) * 2.526);
  border-bottom: .5pt solid var(--filet);
  margin-bottom: calc(var(--corps) * 0.6);
}
/* La ligne en capitales qui coiffe une page à remplir : accent, petite,
   en Poppins gras — c'est le `st_perso` du moteur. */
.feuille-corps .ap-hplain {
  text-indent: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * 0.7158);
  line-height: 1.47;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--coll-accent, var(--vermillon));
  margin: calc(var(--corps) * 0.632) 0 calc(var(--corps) * 0.842);
  break-after: avoid;
}
.feuille-corps .ap-hplain:first-child { margin-top: 0; }
.feuille-corps .ap-hital {
  text-indent: 0; font-style: italic;
  margin: 0 0 calc(var(--corps) * 0.42);
}

/* La check-list : la case se dessine. */
.feuille-corps .ap-check {
  text-indent: 0;
  margin: 0 0 calc(var(--corps) * 0.37);
  padding-left: 1.6em;
  position: relative;
  break-inside: avoid;
}
.feuille-corps .ap-check::before {
  content: "";
  position: absolute; left: 0; top: .22em;
  width: .82em; height: .82em;
  border: .5pt solid var(--coll-gris, var(--gris-chaud));
}

/* L'entrée de lexique ou de répertoire. */
.feuille-corps .ap-hterm {
  text-indent: 0;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: calc(var(--corps) * 1);
  line-height: 1.368;
  margin: calc(var(--corps) * 1.158) 0 calc(var(--corps) * 0.421);
  break-after: avoid;
}

/* Les tableaux de la collection : en-têtes en Poppins gras 7,5, cellules
   en Lora 8,8. */
body.edition-pratique .feuille-corps .tab-livre th {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * 0.7895);
  line-height: 1.267;
  letter-spacing: .04em;
}
body.edition-pratique .feuille-corps .tab-livre td {
  font-size: calc(var(--corps) * 0.9263);
  line-height: 1.227;
}

/* La légende d'un schéma : petite, en accent, au-dessus du dessin dans
   le livre imprimé — ici en dessous, parce que l'atelier ne sait
   reprendre une légende qu'en dernier enfant. */
body.edition-pratique .feuille-corps figure.illustration figcaption {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * 0.7158);
  line-height: 1.47;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--coll-accent, var(--vermillon));
  text-align: left;
}

/* ---------- La page d'ouverture pleine ----------

   Le titre d'un chapitre occupe la page, et le texte commence à la
   suivante. C'est le parti pris d'une collection, pas d'un genre : il se
   règle dans la fabrique, sur la collection, et non ici.

   Le dessin vient du moteur de L'Algérie Pratique : l'étiquette en tête
   sous un filet, le titre au tiers, le sous-titre en italique, puis tout
   le blanc, et au pied le numéro en très grand avec le nom de la
   collection. Le grand chiffre se repère en feuilletant sans lire. */
/* Le pied de la page d'ouverture est POSE, pas enchaine.

   Il l'etait, en boite flexible avec une marge automatique. Le metteur
   en pages mesurait alors un debordement — la marge automatique pousse
   le dernier bloc jusqu'au bas, et ce qui le suit tombe au-dela — et
   renvoyait le chiffre geant a la page suivante : mesure, page 11
   gardait le titre, page 12 recevait un « 2 » de neuf centimetres tout
   seul. Hors du flux, il ne deborde de rien. */
.feuille.est-ouverture-pleine .feuille-corps { position: relative; }
.feuille.est-ouverture-pleine .rang {
  margin: 0 0 calc(var(--interligne) * 2.4);
  padding-bottom: calc(var(--interligne) * .4);
  border-bottom: .6pt solid var(--coll-accent, var(--vermillon));
  color: var(--coll-accent, var(--vermillon));
  font-family: var(--police-titre);
  font-size: .8em; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
/* Rien ne les separait : le mot et le chiffre sont dans deux `span`
   colles, expres — un gabarit qui grossit le numero ne doit pas
   grossir le mot avec lui, et le CSS ne sait pas couper une phrase en
   deux.

   Mais l'espace entre eux n'existait QUE pour l'ouverture pleine. Tout
   chapitre compose autrement s'annoncait « CHAPITRE3 ». On le donne a
   tous : c'est une regle de lecture, pas un effet d'ouverture. */
.rang .rang-nb::before { content: " "; }
.feuille.est-ouverture-pleine h2 {
  margin: 0; font-size: 2.32em; line-height: 1.22;
  font-family: var(--police-titre); font-weight: 700;
  color: var(--coll-encre, var(--encre));
}
.feuille.est-ouverture-pleine .rang-soustitre {
  margin: calc(var(--interligne) * .8) 0 0;
  font-style: italic; font-size: 1.16em; line-height: 1.36;
  color: var(--coll-gris, var(--gris-chaud));
}
/* Le blanc entre le titre et le pied : c'est lui qui fait la page. */
.feuille.est-ouverture-pleine .rang-geant {
  position: absolute; left: 0; bottom: calc(var(--interligne) * 1.6);
  margin: 0;
  font-family: var(--police-titre); font-weight: 700;
  font-size: 9.5em; line-height: .9;
  color: #CCCCCC;
}
.feuille.est-ouverture-pleine .rang-collection {
  position: absolute; left: 0; bottom: 0;
  margin: 0;
  font-family: var(--police-titre);
  font-size: .78em; letter-spacing: .1em; text-transform: uppercase;
  color: var(--coll-gris, var(--gris-chaud));
}

/* ---------- L'encadré : bandeau ou filet ----------

   Le bandeau plein est un parti pris de collection. Sans lui, l'encadré
   garde le dessin de la maison : un filet sur le côté, un fond discret.
   Les deux existent, et c'est un réglage qui tranche — pas une opinion
   écrite dans cette feuille. */
body:not(.a-encadre-bandeau) .feuille-corps .ap-callout-titre {
  background: transparent;
  color: var(--coll-accent, var(--vermillon));
  border-left: 3px solid var(--coll-accent, var(--vermillon));
  padding-left: calc(var(--interligne) * .7);
}
body:not(.a-encadre-bandeau) .feuille-corps .ap-callout {
  background: transparent;
  border-left: 3px solid var(--coll-accent, var(--vermillon));
}

/* La page tournée pour les fiches : le dessin est écrit et la classe
   existe, mais la grille y débordait — la section réclamait 2118 px
   dans une page tournée qui en offre 691. Retiré tant que ce n'est pas
   compris : une fiche par page, en portrait, se lit ; une fiche coupée
   en deux ne se lit pas. */

/* ---------- La fiche tournée d'un quart de tour ----------

   Mesuré sur la page 191 du livre imprimé : le papier reste portrait —
   432 × 648 pt — et c'est la fiche qui pivote. Ses dix-neuf séparateurs
   de lignes courent le long de la largeur de la page, espacés de
   13,75 pt ; ses six séparateurs de colonnes courent le long de la
   hauteur, de 121,4 à 600 pt. La fiche occupe donc le bloc de texte,
   tourné : 522 pt de large sur 324 de haut.

   ── Pourquoi la première tentative échouait ──

   Le bloc de texte est une boîte à colonnes — `column-count: 1`,
   `column-fill: auto`. Avec une hauteur définie, ce qui déborde ne se
   fait pas rogner : il part dans une COLONNE SUIVANTE, à côté. Mesure :
   la section réclamait 2118 px, soit trois colonnes de 691, et les deux
   dernières tombaient hors du papier. Ce n'était pas la rotation qui
   échouait, c'était le débordement qui se déguisait en largeur.

   `column-fill: balance` remet le contenu dans une seule colonne. */
.feuille.est-paysage .feuille-corps {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--ph) - var(--mt) - var(--mp));
  height: calc(var(--pl) - var(--mi) - var(--me));
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
}
/* La fiche sort du flux de colonnes.

   `column-fill: balance` ne suffisait pas : la boite a colonnes cree une
   colonne de plus des que son contenu depasse sa hauteur, et la largeur
   de la section montait a 2118 px — trois colonnes de 691 — dont deux
   hors du papier. Posee en absolu, la fiche n'appartient plus au flux
   des colonnes, et la question ne se pose plus. */
.feuille.est-paysage .fiche {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Le titre, l'intro, la grille, la legende — et la grille prend tout
     ce qui reste. Les fiches n'ont pas toutes le meme nombre de lignes :
     dix-huit pour le registre de caisse, vingt-six pour le suivi annuel.
     A pas fixe, les trois plus longues debordaient de la page. En
     laissant la grille occuper la hauteur libre, ses lignes se
     repartissent et tiennent toujours — c'est d'ailleurs ce que fait
     l'imprime, ou la grille court d'un bord a l'autre du bloc. */
  display: flex;
  flex-direction: column;
}
.feuille.est-paysage .fiche > table { flex: 1 1 auto; }
/* Ni titre courant ni onglet en travers d'une page tournée. Le folio
   reste : on cherche une fiche par son numéro. */
.feuille.est-paysage .feuille-entete,
.feuille.est-paysage .feuille-rail,
.feuille.est-paysage .feuille-tab { display: none; }

/* Le titre de la fiche et son intro, avant la grille. */
.feuille.est-paysage .fiche h2 {
  margin: 0 0 calc(var(--corps) * 0.3);
  font-size: calc(var(--corps) * 1.1);
  line-height: 1.25;
}
.feuille.est-paysage .fiche > p { text-indent: 0; }
.feuille.est-paysage .fiche > p:first-of-type {
  margin-bottom: calc(var(--corps) * 0.5);
}
/* Le pas des lignes, relevé au trait sur l'imprimé : 13,75 pt pour un
   corps de 9,5, soit 1,447 fois le corps. */
/* La grille prend toute la largeur du bloc tourne. Posee en absolu, la
   fiche ne donne plus de largeur de reference a son tableau : il se
   ramassait a 336 px dans une boite qui en offre 691. */
.feuille.est-paysage .tab-livre { margin: 0; width: 100%; }
/* Le pas des lignes. Sur l'imprime, la grille tient 249,5 pt sur les 324
   du bloc tourne, soit 332 px pour vingt lignes : 16,6 px chacune, un
   peu moins que le pas mesure au trait parce que le tableau porte aussi
   son en-tete. */
.feuille.est-paysage .tab-livre.a-remplir td,
.feuille.est-paysage .tab-livre.a-remplir th {
  /* Le rembourrage des cellules ordinaires — .35em en haut et en bas —
     s'ajoutait a la hauteur demandee : vingt lignes reclamaient 415 px
     la ou l'imprime en tient 332. Sur une grille tournee, la hauteur est
     donnee, et rien ne s'y ajoute. */
  padding: 0 .4em;
  line-height: 1.2;
}
/* Un plancher, pas une hauteur : au-dessous, on n'ecrit plus a la main. */
.feuille.est-paysage .tab-livre.a-remplir td { height: auto; }
/* La legende d'une fiche n'est pas le renvoi d'un chapitre : le moteur
   lui donne `st_fnote`, 7 sur 9,6, plus petit et gris fonce. Aux 8,3 du
   renvoi, deux fiches sur douze depassaient la page. */
.feuille.est-paysage .ap-note {
  margin-top: calc(var(--corps) * 0.5);
  font-size: calc(var(--corps) * 0.7368);
  line-height: 1.371;
  color: var(--coll-gris-fonce, #4A4A4A);
}
/* L'intro suit le meme regime : elle annonce, elle ne developpe pas. */
.feuille.est-paysage .fiche > p:first-of-type {
  font-size: calc(var(--corps) * 0.8421);
  line-height: 1.35;
}

/* Une grille de plus de huit colonnes : on resserre, sinon les libellés
   s'enroulent et la fiche déborde de sa page. */
.feuille-corps .tab-livre.a-remplir.est-dense th {
  font-size: calc(var(--corps) * 0.6316);
  letter-spacing: .02em;
}
.feuille-corps .tab-livre.a-remplir.est-dense td {
  font-size: calc(var(--corps) * 0.7368);
  line-height: 1.15;
}

/* ---------- Les sortes que seule la source portait ----------

   L'EPUB les avait toutes aplaties en paragraphes ordinaires ; en
   important `book.json` elles reviennent, et il leur faut leur dessin.
   Valeurs reprises une à une du moteur de la collection. */

/* st_pq — Lora 9,3 / 13,5 : la ligne d'invite d'une page à remplir.

   Elle PORTE SA LIGNE D'ÉCRITURE. Le moteur de la collection les garde
   ensemble — `KeepTogether([Paragraph, PQRule])`.

   J'ai essayé de faire pareil : donner à chaque invite son filet. Le
   livre est passé de 250 à 256 pages — la hauteur ajoutée coûtait plus
   que le désordre qu'elle corrigeait. Ici les lignes d'écriture sont des
   blocs à part, posés par la source (« persofill »), et l'invite reste
   nue. */
.feuille-corps .ap-pq {
  text-indent: 0;
  font-size: calc(var(--corps) * 0.9789);
  line-height: 1.4516;
  margin: calc(var(--corps) * 0.842) 0 calc(var(--corps) * 0.21);
}
/* st_g8 — Lora 8 / 11,2 : le paragraphe serré, ouvert par un terme. */
.feuille-corps .ap-g8 {
  text-indent: 0;
  font-size: calc(var(--corps) * 0.8421);
  line-height: 1.4;
  margin: calc(var(--corps) * 0.21) 0 calc(var(--corps) * 0.21);
}
/* st_lex — Lora 7,6 / 10,6, justifié : une entrée de lexique. */
.feuille-corps .ap-lex {
  text-indent: 0;
  text-align: justify;
  font-size: calc(var(--corps) * 0.8);
  line-height: 1.3947;
  margin: 0 0 calc(var(--corps) * 0.526);
}
/* st_formule — sur le crème, encadrée de blanc. */
.feuille-corps .ap-formule {
  text-indent: 0;
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * 0.8);
  line-height: 1.447;
  background: var(--coll-creme, var(--creme));
  padding: calc(var(--corps) * 0.526) calc(var(--corps) * 0.842);
  margin: calc(var(--corps) * 0.842) 0;
  break-inside: avoid;
}
/* st_ctr et st_ctrhead — le commentaire d'un schéma et son chapeau. */
.feuille-corps .ap-ctr {
  text-indent: 0; font-style: italic;
  font-family: var(--police-titre);
  font-size: calc(var(--corps) * 0.9053);
  line-height: 1.5116;
  color: var(--coll-gris-fonce, #4A4A4A);
  margin: 0 0 calc(var(--corps) * 0.737);
}
.feuille-corps .ap-ctrhead {
  text-indent: 0;
  font-family: var(--police-titre); font-weight: 500;
  font-size: calc(var(--corps) * 0.9474);
  line-height: 1.4444;
  color: var(--coll-accent, var(--vermillon));
  margin: calc(var(--corps) * 0.632) 0 calc(var(--corps) * 0.842);
  break-after: avoid;
}
/* La dédicace : à droite, en italique, dans le haut de la page. */
.feuille-corps .ap-dedicace {
  text-indent: 0;
  text-align: right;
  font-style: italic;
  font-size: calc(var(--corps) * 1.1579);
  line-height: 1.5455;
  color: var(--coll-gris-fonce, #4A4A4A);
  margin: 0;
}

/* La dédicace : à droite, en italique, dans le haut de la page. Reprise
   du moteur — Lora italique 11 sur 17, gris foncé, alignée à droite. */
.feuille.est-dedicace .feuille-corps { padding-top: calc(var(--interligne) * 8); }
.feuille.est-dedicace .ap-dedicace {
  text-align: right;
  font-style: italic;
  font-size: calc(var(--corps) * 1.1579);
  line-height: 1.5455;
  color: var(--coll-gris-fonce, #4A4A4A);
  margin: 0;
  text-indent: 0;
}

/* Le sous-titre d'un chapitre au sommaire : sous sa ligne, plus petit et
   en italique. C'est ce qui dit ce qu'on trouvera dedans. */
.feuille-corps .som-sous {
  margin: 0 0 calc(var(--interligne) * .5);
  padding-right: calc(var(--interligne) * 2.2);
  font-style: italic;
  font-size: calc(var(--corps) * .905);
  line-height: 1.4;
  color: var(--coll-gris, var(--gris-chaud));
  text-indent: 0;
  break-before: avoid;
}
.feuille-corps .som-ligne { break-after: avoid; }

/* Le numéro d'une entrée de sommaire, devant son titre. Il se compose en
   caractères de titre, plus petit, et sur une chasse fixe pour que les
   titres s'alignent quel que soit le numéro. */
.feuille-corps .som-nb {
  display: inline-block;
  min-width: 2.4em;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * .84);
  letter-spacing: .04em;
  color: var(--coll-accent, var(--vermillon));
  font-variant-numeric: tabular-nums lining-nums;
}
/* La ligne d'une grande partie : au-dessus du lot, avec de l'air. */
.feuille-corps .som-ligne.est-partie {
  margin-top: calc(var(--interligne) * 1.4);
  font-family: var(--police-titre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: calc(var(--corps) * .9);
}
.feuille-corps .som-ligne.est-partie .som-nb { min-width: 5.2em; }

/* ---------- Les corps des liminaires et des ouvertures ----------

   Relevés sur le livre imprimé, page par page. La police était juste —
   Poppins vient du fichier de configuration de la collection — mais les
   corps ne l'étaient pas : le faux-titre sortait à dix points au lieu de
   vingt, le titre d'ouverture à dix-neuf demi-gras au lieu de vingt-deux
   gras, et les deux sous-titres avaient perdu leur italique.

     faux-titre   20 pt Poppins gras
     page titre   25 pt Poppins gras · sous-titre 12 pt Lora italique
     ouverture     8,5 pt étiquette · 22 pt titre · 11 pt sous-titre it.

   Exprimés en fraction du corps, pour suivre si la collection le change. */
body.edition-pratique .feuille.est-fauxtitre .fx-titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * 2.105);
  line-height: 1.25;
}
body.edition-pratique .feuille.est-pagetitre h1 {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: calc(var(--corps) * 2.632);
  line-height: 1.28;
}
body.edition-pratique .feuille.est-pagetitre .soustitre {
  font-style: italic;
  font-size: calc(var(--corps) * 1.263);
  line-height: 1.42;
}
body.edition-pratique .feuille.est-ouverture-pleine .rang {
  font-size: calc(var(--corps) * 0.895);
  font-weight: 700;
}
/* Une regle voisine — celle de l ouverture de chapitre du genre — a la
   meme force et vient plus tard : elle gagnait, et le titre sortait a
   dix-neuf points demi-gras. On ajoute la classe qui les distingue. */
body.edition-pratique .feuille.ouvre-chapitre.est-ouverture-pleine h2 {
  font-weight: 700;
  font-size: calc(var(--corps) * 2.316);
  line-height: 1.23;
}
body.edition-pratique .feuille.est-ouverture-pleine .rang-soustitre {
  font-style: italic;
  font-size: calc(var(--corps) * 1.158);
  line-height: 1.36;
}

/* ---------- La page de titre d'une collection ----------

   Relevée au point près sur l'imprimé, en distances depuis le haut du
   bloc de texte :

     collection   54,5 pt   8,5 Poppins gras, accent, capitales
     filet        71,0 pt   0,6 pt, sur toute la largeur
     titre       113,8 pt   25 Poppins gras, capitales
     sous-titre  163,3 pt   12 Lora italique, gris
     auteur      226,6 pt   13 Poppins moyen
     édition     483,1 pt   7,5 Poppins moyen, gris

   Ni logo ni nom de maison : ils sont à l'ours et sur la jaquette. */
/* Le bloc est POSE, pas enchaine. A cent pour cent de hauteur il
   debordait d un cheveu — la hauteur du bloc plus son interligne — et le
   metteur en pages le renvoyait a la page suivante : la page de titre
   sortait blanche, et son contenu tombait sur l ours. */
.feuille.est-pagetitre.est-collection .titre-livre,
.feuille.est-pagetitre.est-collection .titre-livre > * {
  /* Le titre est au FER A GAUCHE, comme sur l imprime : toutes ses
     lignes commencent a 61,2 pt. La regle de la maison centre la page de
     titre, et elle gagnait. */
  text-align: left;
}
.feuille.est-pagetitre.est-collection .titre-livre {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
.feuille.est-pagetitre.est-collection .pt-collection {
  position: absolute; left: 0; right: 0; top: calc(var(--corps) * 5.74);
  margin: 0;
  font-family: var(--police-titre); font-weight: 700;
  font-size: calc(var(--corps) * 0.895);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--coll-accent, var(--vermillon));
}
.feuille.est-pagetitre.est-collection .feuille-corps { position: relative; }
.feuille.est-pagetitre.est-collection .titre-livre::after {
  content: ''; position: absolute; left: 0; right: 0;
  top: calc(var(--corps) * 7.47); height: .6pt;
  background: var(--coll-accent, var(--vermillon));
}
.feuille.est-pagetitre.est-collection h1 {
  position: absolute; left: 0; right: 0; top: calc(var(--corps) * 11.98);
  margin: 0;
  font-family: var(--police-titre); font-weight: 700;
  font-size: calc(var(--corps) * 2.632); line-height: 1.28;
  text-transform: uppercase;
  color: var(--coll-encre, var(--encre));
}
.feuille.est-pagetitre.est-collection .soustitre {
  position: absolute; left: 0; right: 0; top: calc(var(--corps) * 17.19);
  margin: 0;
  font-style: italic; font-weight: 400;
  font-size: calc(var(--corps) * 1.263); line-height: 1.42;
  color: var(--coll-gris, var(--gris-chaud));
}
.feuille.est-pagetitre.est-collection .auteur {
  position: absolute; left: 0; right: 0; top: calc(var(--corps) * 23.85);
  margin: 0;
  font-family: var(--police-titre); font-weight: 500;
  font-size: calc(var(--corps) * 1.368);
  color: var(--coll-encre, var(--encre));
}
.feuille.est-pagetitre.est-collection .pt-edition {
  position: absolute; left: 0; right: 0; top: calc(var(--corps) * 50.85);
  margin: 0;
  font-family: var(--police-titre); font-weight: 500;
  font-size: calc(var(--corps) * 0.789);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--coll-gris, var(--gris-chaud));
}