/* ============================================================
   IMPRESSION — la feuille, et rien d'autre.

   CHARGÉE APRÈS style.css. C'est ce qui permet de ne rien retirer là-bas :
   à spécificité égale, la dernière déclaration gagne. Le bloc @media print
   de style.css reste en place et garde ce qu'il a appris (le pied officiel
   qui doit rester, les tableaux, l'aplatissement du code couleur) ; ce
   fichier-ci ajoute ce qui manquait et corrige ce qui était faux.

   Vérifié au banc, pas à l'œil : `node verif/banc-impression.mjs`.
   ============================================================ */

/* ---------- Les sections écartées, à l'écran ---------- */

/* Une section décochée dans le panneau d'impression RESTE AFFICHÉE, en
   retrait. Elle n'est ni retirée du DOM ni masquée : la vérification
   d'intégrité relit le texte affiché, et un bloc absent la ferait passer
   en alerte. C'est la contrainte qui a dicté toute la mécanique.

   `opacity` et non `color` : le texte garde sa forme, ses filets et ses
   annotations, il recule d'un plan. Un texte de loi grisé en changeant
   l'encre perdrait ses repères en même temps que son contraste.

   LA VALEUR EST MESURÉE, PAS CHOISIE À L'ŒIL. Une opacité ne se voit pas
   dans la couleur calculée : `getComputedStyle().color` rend toujours
   l'encre pleine, et le banc d'accessibilité passait à côté. Il calcule
   donc le mélange lui-même, encre et fond, à cette opacité, dans les
   trois thèmes.

   Relevé, sur le texte écarté :

     opacité .42  →  clair 2,6:1   sepia 2,3:1   sombre 3,3:1   sous le seuil
     opacité .62  →  clair 5,0:1   sepia 4,3:1   sombre 6,6:1   sépia encore court
     opacité .66  →  clair 5,7:1   sepia 4,9:1   sombre 7,4:1   les trois passent

   C'est le SÉPIA qui commande : son encre est plus claire et son fond
   plus sombre que le thème clair, donc il atteint le seuil en dernier.
   Le texte gardé, lui, est entre 14 et 18:1 : l'écart reste de dix points,
   les deux états ne se confondent pas.

       node verif/banc-accessibilite.mjs   → « PASSAGES ÉCARTÉS » */
[data-ecarte] {
  opacity: .66;
}

/* Il redevient pleinement lisible au survol et dès qu'un mot y est
   sélectionné : on doit pouvoir relire avant de trancher. */
[data-ecarte]:hover,
[data-ecarte]:focus-within {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  [data-ecarte] { transition: opacity .18s var(--ease); }
}

/* ---------- Ce qui n'existe que pour le papier ---------- */

/* La légende des marques et le sommaire mis en forme. Tous deux sont
   rouverts par le bloc @media print plus bas.

   Le sommaire vit DANS `#texteMisEnForme`, après la page de garde : c'est
   le seul endroit du DOM qui donne l'ordre attendu, garde puis sommaire
   puis texte. Il porte `data-ajout="1"`, comme la note d'article, donc
   `Rendu.verifier()` le retire avant de comparer. Il ne se voit jamais à
   l'écran, où le sommaire a déjà son panneau. */
.legende-impression,
.sommaire-impression,
.cahier-notes { display: none; }

/* ============================================================
   LE PANNEAU « AVANT D'IMPRIMER »

   La forme du panneau (cadre, en-tête, corps qui défile, actions, croix)
   vient de `.panneau` dans style.css. Ici, seulement ce qui lui est
   propre : la liste à cocher.
   ============================================================ */

.impression__bilan {
  margin: 0 0 14px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.impression__bloc { margin: 0 0 20px; }
.impression__bloc[hidden] { display: none; }

.impression__entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 0 0 8px;
}

.impression__titre {
  margin: 0;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-faint);
  font-weight: 700;
}

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

/* Une entrée est un <li> qui peut contenir une sous-liste : c'est la ligne
   qui porte la mise en rang, pas l'item. */
.impression__item { min-inline-size: 0; }

/* La case et son libellé forment UNE cible de 44 px, pas deux petites.
   Le `<label for>` couvre tout le libellé : on coche en cliquant sur le
   nom de l'article, pas sur un carré de 13 px. */
.impression__ligne {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  min-inline-size: 0;
}

.impression__case {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 13px 0 0;
  accent-color: var(--accent);
}

/* ---------- Le pli ----------

   Même vocabulaire que le sommaire : un bouton qui porte `aria-expanded`,
   la liste qu'il commande qui porte l'id. Le bouton vit à CÔTÉ de
   l'étiquette : cliquer sur le titre coche, cliquer sur le chevron replie.

   44 px et non 40 comme dans le sommaire : ici la cible n'est pas doublée
   par une entrée du texte à côté, c'est la seule façon de déplier. */
.impression__pli {
  flex: 0 0 auto;
  width: 40px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--ink-faint); cursor: pointer;
}
.impression__pli:hover { background: var(--surface-2); color: var(--ink); }

.impression__chevron {
  width: 0; height: 0;
  border-top: 5px solid currentColor;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  transition: transform .15s var(--ease);
}
.impression__pli[aria-expanded="false"] .impression__chevron { transform: rotate(-90deg); }

/* Les sous-niveaux se décalent d'un cran, sans empiler les paddings :
   un rapport descend à cinq niveaux, et cinq retraits cumulés ne
   laisseraient plus de place au libellé en 390 px. */
.impression__sous { list-style: none; margin: 0; padding: 0 0 0 14px; }
.impression__sous .impression__sous { padding-left: 10px; }

/* LE COMPTE DES ÉCARTÉS D'UNE BRANCHE REPLIÉE. Sans lui, un titre replié
   avec une case indéterminée dit qu'il manque quelque chose sans dire
   combien, et il faut déplier pour savoir. Le mot « écarté » est écrit :
   un nombre seul se confondrait avec le compte d'occurrences du sommaire,
   qui vit à la même place et ne dit pas la même chose. */
.impression__compte {
  flex: 0 0 auto;
  align-self: center;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink-faint);
  border: 1px solid var(--line-fort);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
  white-space: nowrap;
}
.impression__compte[hidden] { display: none; }

.impression__label {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 12px 0;
  cursor: pointer;
  font-size: .88rem;
}

.impression__libelle {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: break-word;
}

.impression__intitule {
  font-size: .8rem;
  color: var(--ink-faint);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Une case décochée : le libellé recule, comme le passage dans le texte.
   Le même signe pour la même idée, aux deux endroits. Une case
   INDÉTERMINÉE garde son libellé plein : la branche part en partie, elle
   n'est pas mise de côté. */
.impression__case:not(:checked):not(:indeterminate) + .impression__label .impression__libelle {
  color: var(--ink-faint);
  font-weight: 400;
}

.impression__note {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* La note qui dit d'où vient la liste des familles. Elle se lit avant la
   liste, pas après : la question « pourquoi celle-là » se pose en voyant
   la liste, pas une fois qu'on l'a parcourue. */
.impression__source {
  margin: 0 0 10px;
  font-size: .82rem;
}

/* ============================================================
   LA FEUILLE
   ============================================================ */

@media print {

  /* ---------- Le format de la page ----------
     Il n'y en avait aucun : le format et les marges sortaient de la boîte
     du navigateur, donc de son dernier réglage, donc de rien de connu.
     Chrome et Firefox honorent cette règle, Safari partiellement. */
  @page {
    size: A4;
    margin: 18mm 20mm;
  }

  /* ---------- LE FOND EST TOUJOURS BLANC, L'ENCRE GARDE SES COULEURS ----------

     LE FOND, D'ABORD. Le thème sombre sortait en encre #F2EEEA sur du
     papier blanc : le fond n'est pas imprimé, l'encre l'était. Illisible,
     mesuré au banc. La feuille part donc toujours sur fond blanc, quel que
     soit le thème d'écran.

     Les trois sélecteurs sont écrits, et dans cet ordre : `:root` seul ne
     bat pas `:root[data-theme="sombre"]`, qui a une classe de spécificité
     de plus. C'est le seul endroit de l'app où un thème est ignoré.

     LES COULEURS DU TEXTE, ELLES, RESTENT, et c'est le comportement par
     défaut. Le rouge dit ce que la règle impose, le violet dit quand,
     combien, à quelle condition. Deux canaux valent mieux qu'un, et la
     forme du trait porte déjà l'information seule (WCAG 1.4.1) : la
     couleur s'ajoute, elle ne remplace rien.

     ET C'EST LE DÉFAUT PARCE QU'IL LAISSE LE CHOIX. La boîte d'impression
     de chaque navigateur propose « couleur » ou « noir et blanc » : sortir
     en couleur laisse le choix entier, sortir en noir le retire. */
  :root,
  :root[data-theme="sepia"],
  :root[data-theme="sombre"] {
    --bg:            #FFFFFF;
    --surface:       #FFFFFF;
    --surface-2:     #FFFFFF;
    --card:          #FFFFFF;

    --ink:           #1A1715;
    --ink-soft:      #55504B;
    --ink-faint:     #6B655F;

    --line:          #D8D3CE;
    --line-fort:     #9A948E;

    --accent:        #C1121F;
    --accent-fonce:  #8E0D17;
    --accent-pale:   #FFFFFF;
    --sur-accent:    #FFFFFF;

    /* Un fond ne s'imprime pas sans « graphiques d'arrière-plan » : le
       surlignage garde son trait, pas sa bande. */
    --surligne:       transparent;
    --surligne-trait: #C1121F;
    --repere-regle:   #8E0D17;
    --repere-borne:   #6D28A8;

    --shadow:      none;
    --shadow-soft: none;

    color-scheme: light;
  }

  /* ---------- L'AUTRE MODE : TOUT EN NOIR ----------
     Pour économiser l'encre, ou pour une photocopieuse qui convertit mal.
     Notre aplatissement vaut mieux que celui d'un pilote : il met les
     traits en NOIR PUR, là où une désaturation rendrait le rouge et le
     violet en deux gris voisins.

     Même spécificité que `:root[data-theme="sombre"]`, et déclaré après :
     il gagne. Les variantes combinées sont écrites pour ne pas dépendre
     de l'ordre seul. */
  :root[data-impression="noir"],
  :root[data-theme="sepia"][data-impression="noir"],
  :root[data-theme="sombre"][data-impression="noir"] {
    --ink:           #000000;
    --ink-soft:      #2B2B2B;
    --ink-faint:     #4A4A4A;

    --line:          #C7C7C7;
    --line-fort:     #8A8A8A;

    --accent:        #000000;
    --accent-fonce:  #000000;

    --surligne-trait: #000000;
    --repere-regle:   #000000;
    --repere-borne:   #000000;
  }

  /* Le fond du document lui-même : `printBackground` est à faux dans les
     boîtes d'impression, mais le corps peut porter une couleur d'encre
     héritée du thème. On la repose. */
  body {
    background: #FFFFFF;
    color: var(--ink);
  }

  /* ---------- RENDRE LEURS TEINTES AUX MARQUES ----------
     Le bloc @media print de style.css les aplatit en `currentColor`, du
     temps où la feuille sortait forcément en noir. Ces règles-ci passent
     après et leur rendent leur jeton ; le mode noir les ramène au noir en
     changeant le jeton, pas la règle. */
  .surlignage--obligation,
  .surlignage--faculte,
  .surlignage--negation { text-decoration-color: var(--repere-regle); }

  .surlignage--condition,
  .surlignage--duree,
  .surlignage--montant { text-decoration-color: var(--repere-borne); }

  .surlignage--exergue { outline-color: var(--accent); }

  /* L'étiquette d'opération : le fond plein de la suppression ne
     s'imprime pas, elle devient un cadre. Le mot et le cadre suffisent. */
  .op { border-color: var(--line-fort); color: var(--ink-faint); }
  .op--suppression,
  .op--nav-retire { background: transparent; border-color: var(--accent); color: var(--accent-fonce); }

  /* ---------- UN PASSAGE NOTÉ NE S'IMPRIMAIT PAS DU TOUT ----------
     Sa bande est un `box-shadow: inset` et un fond. Les deux sont des
     « graphiques d'arrière-plan », que toutes les boîtes d'impression
     suppriment par défaut : le passage sortait comme du texte ordinaire,
     alors que la case du panneau et la légende le promettaient. Mesuré :
     `text-decoration: none`, `border: 0`, `outline: none`.

     La bande devient deux VRAIS filets. `style.css` explique pourquoi
     c'est un `box-shadow` à l'écran : un border ajouterait une boîte dans
     le flux et pousserait le texte pendant qu'on tape. Sur la feuille plus
     rien ne bouge, donc la raison tombe — c'est déjà le raisonnement tenu
     là-bas pour la marge négative, retirée à l'impression.

     Deux filets et non un soulignement : un trait unique se confondrait
     avec les repères lexicaux, qui en ont cinq formes. */
  .surlignage--passage,
  .ref .surlignage--passage {
    background: transparent;
    box-shadow: none;
    border-top: 1pt solid var(--surligne-trait);
    border-bottom: 1pt solid var(--surligne-trait);
  }

  /* La marque décochée dans le panneau ne laisse rien. */
  .texte[data-sans~="passage"] .surlignage--passage,
  .texte[data-sans~="passage"] .ref .surlignage--passage {
    border-top: 0;
    border-bottom: 0;
  }

  /* ---------- CE QUI NE S'IMPRIME PAS ----------
     Les deux premiers sont en `position: fixed`. Chromium repose un
     élément fixe sur CHAQUE feuille : relevé sur la 3106, le toast
     apparaissait sur les 103 pages du PDF. La jauge est décorative et le
     bouton de retrait d'un passage est une commande. */
  #toast,
  #btnRetourHaut,
  #avancement,
  .retirer-passage {
    display: none !important;
  }

  /* ---------- Le corps du texte ----------
     DÉCISION : la police et l'interligne suivent les réglages de lecture,
     la taille et la largeur restent celles du papier. Deux personnes qui
     impriment le même texte obtiennent la même feuille, quel que soit
     leur confort de lecture à l'écran. La police et l'interligne, eux,
     viennent de `var(--font-lecture)` et `var(--interligne)` déjà posés
     sur `.texte` par style.css : rien à réécrire ici. */
  .texte {
    max-width: none;
    font-size: 11pt;
  }

  /* ---------- LES COUPES DE PAGE ----------
     Rien ne les tenait en dehors des tableaux. Sur la 3106, ça donnait
     des titres d'article seuls en bas de feuille et des alinéas coupés
     en deux au milieu d'une phrase.

     `break-*` ET `page-break-*` : la propriété moderne n'est pas encore
     honorée partout, l'ancienne l'est. Les deux coûtent une ligne. */

  /* Un titre ne reste jamais seul en bas d'une page. */
  .division,
  .division-suite,
  .article,
  .titre-rapport,
  .garde__titre,
  .garde__nature,
  .encart__titre,
  .tableau__titre {
    break-after: avoid;
    page-break-after: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Un alinéa court ne se coupe pas. Un alinéa plus haut qu'une page se
     coupe quand même : le navigateur passe outre plutôt que de laisser un
     blanc, c'est le comportement voulu. */
  .para,
  .note-modif,
  .garde__renvoi,
  .pagination {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Le filet de sécurité, pour ce qui se coupe malgré tout : jamais moins
     de deux lignes d'un côté ou de l'autre d'une coupure. */
  .texte,
  .para {
    orphans: 3;
    widows: 3;
  }

  /* Un encart peut faire plusieurs pages : lui interdire de se couper le
     pousserait en entier sur la feuille suivante et creuserait un blanc.
     Il garde son filet, il accepte la coupure. */
  .encart {
    break-inside: auto;
    page-break-inside: auto;
  }

  /* La page de garde se termine par une coupure : le texte commence en
     tête de feuille, comme dans la publication officielle. */
  .garde {
    break-after: page;
    page-break-after: always;
  }

  /* ---------- LES SECTIONS ÉCARTÉES ----------
     Le point qui tient toute la fonctionnalité : `display: none` retire
     de la FEUILLE sans retirer du DOM. `Rendu.verifier()` relit
     `textContent`, que `display` ne touche pas : l'intégrité reste verte.
     Vérifié au banc, essai « l'intégrité reste verte avec des sections
     écartées ». */
  [data-ecarte] {
    display: none !important;
  }

  /* ---------- LES ANNOTATIONS, UNE FAMILLE À LA FOIS ----------
     `data-sans` liste sur `.texte` les familles qui NE partent PAS sur la
     feuille. Un attribut plutôt qu'une classe par famille : le sélecteur
     `~=` lit une liste séparée par des espaces, et l'attribut se réécrit
     d'un coup à chaque changement de case.

     On retire le SIGNE, jamais la balise : le texte marqué reste du
     texte, aux mêmes caractères près. */

  /* Obligation et faculté : le trait, et la graisse de l'obligation. */
  .texte[data-sans~="modalite"] .surlignage--obligation,
  .texte[data-sans~="modalite"] .surlignage--faculte {
    text-decoration-line: none;
    font-weight: inherit;
  }

  .texte[data-sans~="condition"] .surlignage--condition {
    text-decoration-line: none;
  }

  .texte[data-sans~="quantite"] .surlignage--duree,
  .texte[data-sans~="quantite"] .surlignage--montant {
    text-decoration-line: none;
  }

  .texte[data-sans~="negation"] .surlignage--negation {
    text-decoration-line: none;
  }

  /* Les mots-clés posés à la main : c'est un cadre, il s'efface. */
  .texte[data-sans~="exergue"] .surlignage--exergue {
    outline: none;
  }

  /* Un passage noté : deux filets, dessus et dessous. */
  .texte[data-sans~="passage"] .surlignage--passage,
  .texte[data-sans~="passage"] .ref .surlignage--passage {
    background: transparent;
    box-shadow: none;
  }

  /* Les sigles repérés : la marque est la GRAISSE. Sa couleur d'accent
     est déjà aplatie plus haut, il ne reste qu'elle à retirer. */
  .texte[data-sans~="sigles"] .sigle-marque {
    font-weight: inherit;
    text-decoration-line: none;
  }

  /* ---------- LA LÉGENDE ----------
     Elle ne s'affiche qu'à l'impression, et seulement quand au moins une
     famille d'annotations part sur la feuille. Elle vit HORS de
     `#texteMisEnForme` : posée dedans, il faudrait la marquer
     `data-ajout` et compter sur ce marquage ; dehors, la question ne se
     pose pas.

     EN TÊTE, avant le texte : on sait ce que veulent dire les signes
     avant de commencer à lire, au lieu d'aller chercher à la dernière
     page ce qu'on a rencontré page trois. */
  #legendeImpression {
    display: block;
    margin: 0 0 24pt;
    padding: 10pt 12pt;
    border: 1px solid var(--line-fort);
    font-family: var(--font-ui);
    font-size: 9pt;
    line-height: 1.5;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  #legendeImpression[hidden] {
    display: none !important;
  }

  .legende__titre {
    margin: 0 0 6pt;
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-soft);
  }

  .legende__liste {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3pt 16pt;
  }

  .legende__ligne {
    margin: 0;
    break-inside: avoid;
  }

  /* L'exemple porte le VRAI signe, la même règle qu'à l'écran : la
     légende se lit en comparant, pas en croyant sur parole. */
  .legende__signe {
    font-family: var(--font-lecture);
  }

  .legende__mot {
    color: var(--ink-soft);
  }

  /* Ce que les deux teintes veulent dire. N'apparaît qu'en mode couleur :
     en noir, la phrase serait fausse. */
  .legende__cle {
    margin: 7pt 0 0;
    padding-top: 5pt;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
  }

  /* ---------- LA TABLE DES MATIÈRES DU DOCUMENT ----------
     Masquée SUR LA FEUILLE quand le sommaire de l'outil la remplace :
     sinon un rapport sort avec deux sommaires, l'un derrière l'autre, sur
     des pages entières. Relevé sur le rapport 2993.

     `display: none` et non un retrait du DOM, comme pour une section
     écartée, et pour la même raison : `Rendu.verifier()` relit le texte
     affiché. Les lignes restent là, mot pour mot, à l'écran. */
  [data-sommaire-source] {
    display: none !important;
  }

  /* ---------- LE SOMMAIRE MIS EN FORME ----------
     Celui de l'outil, reconstruit depuis le plan. Pas la table des
     matières que le document porte parfois lui-même : celle-là est du
     texte source, elle s'imprime à sa place et on n'y touche pas.

     Il commence une page et le texte en commence une autre : un sommaire
     qui finit au milieu d'une feuille et se fait suivre du premier article
     se lit mal, et une page de sommaire se retrouve à part dans une pile
     de feuilles. */
  #sommaireImpression {
    display: block;
    break-before: page;
    page-break-before: always;
    break-after: page;
    page-break-after: always;
    font-family: var(--font-ui);
    font-size: 9.5pt;
    line-height: 1.45;
  }

  .sommaire-impression__titre {
    margin: 0 0 10pt;
    padding-bottom: 5pt;
    border-bottom: 1px solid var(--line-fort);
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ink-soft);
  }

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

  /* Une entrée ne se coupe jamais entre deux feuilles : un intitulé de
     division tient sur deux lignes et se retrouverait à cheval. */
  .sommaire-impression__item {
    margin: 0 0 2.5pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Le retrait dit la hiérarchie, faute de numéros de page : le navigateur
     ne les donne pas au CSS, et rien ne permet de les calculer. */
  .sommaire-impression__item--n2 { padding-left: 14pt; }
  .sommaire-impression__item--n3 { padding-left: 28pt; }
  .sommaire-impression__item--n4 { padding-left: 42pt; }

  /* LA HIÉRARCHIE SE VOIT, comme à l'écran. Sur un sommaire de quatre-vingt-
     dix entrées, le seul retrait ne suffit pas à retrouver un titre : l'œil
     n'a rien à quoi s'accrocher. Le rouge de la charte fait les divisions,
     l'encre fait les articles, et en mode noir les mêmes règles rendent du
     noir parce que ce sont les JETONS qui changent, pas les règles.

     C'est le même partage qu'à l'écran : `.division__nature` prend l'accent,
     `.division__intitule` prend l'encre. Une personne qui a lu le texte
     retrouve ses repères sur la feuille. */
  .sommaire-impression__libelle {
    display: inline;
    color: var(--ink);
  }

  /* LE GENRE COMMANDE LA COULEUR, PAS LE NIVEAU. Un article posé
     directement sous un titre est au niveau 2, comme un chapitre : coloré
     par le niveau seul, il sortait en rouge gras au milieu des articles en
     encre. Le genre est lu dans le document rendu, voir `genreDe()`. */

  /* Une division de premier rang : elle respire, prend la couleur d'accent,
     et un filet la sépare de la précédente. */
  .sommaire-impression__item--division.sommaire-impression__item--n1,
  .sommaire-impression__item--rapport.sommaire-impression__item--n1 {
    margin-top: 9pt;
    padding-top: 4pt;
    border-top: 1px solid var(--line);
  }
  .sommaire-impression__item:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .sommaire-impression__item--division > .sommaire-impression__libelle,
  .sommaire-impression__item--rapport.sommaire-impression__item--n1
    > .sommaire-impression__libelle {
    color: var(--accent);
    font-weight: 800;
  }

  /* Une division de rang plus profond, un chapitre : même famille, un cran
     plus discret. */
  .sommaire-impression__item--division.sommaire-impression__item--n2
    > .sommaire-impression__libelle,
  .sommaire-impression__item--division.sommaire-impression__item--n3
    > .sommaire-impression__libelle,
  .sommaire-impression__item--rapport.sommaire-impression__item--n2
    > .sommaire-impression__libelle {
    color: var(--accent-fonce);
    font-weight: 700;
  }

  /* L'intitulé d'une division reste en encre : deux teintes de rouge sur la
     même ligne se confondraient, et c'est le NUMÉRO qu'on cherche. */
  .sommaire-impression__item--division > .sommaire-impression__intitule,
  .sommaire-impression__item--rapport > .sommaire-impression__intitule {
    color: var(--ink);
    font-weight: 600;
  }

  /* Un article : en encre, sans graisse. C'est le gros de la liste, et
     quatre-vingts lignes en gras noircissent la page. */
  .sommaire-impression__item--article > .sommaire-impression__libelle {
    color: var(--ink);
    font-weight: 400;
  }

  /* L'intitulé passe à la ligne sous son libellé : « TITRE II » puis
     « Dispositions relatives à la police judiciaire… » sur la même ligne
     donnait des lignes de quatre-vingts signes en corps 9,5. */
  .sommaire-impression__intitule {
    display: block;
    font-weight: 400;
    color: var(--ink-soft);
  }

  /* SAUF QUAND LE LIBELLÉ N'EST QU'UN MARQUEUR. Sur un rapport, « I. »,
     « A. », « 1. » sont le libellé, et le titre vient après : séparés,
     une ligne sur deux ne portait qu'un chiffre suivi d'un point. */
  .sommaire-impression__item--prefixe .sommaire-impression__intitule {
    display: inline;
  }

  /* ---------- LE CAHIER DE NOTES ----------
     Ce qu'on a écrit soi-même : la note libre du texte, et les passages
     notés avec leur citation et l'article où ils se trouvent.

     Il commence une page : un cahier de notes qui démarre au milieu de la
     dernière feuille du texte se lit comme la suite de la loi. */
  #cahierNotes {
    display: block;
    break-before: page;
    page-break-before: always;
    font-family: var(--font-ui);
    font-size: 9.5pt;
    line-height: 1.5;
  }

  .cahier-notes__titre {
    margin: 0 0 10pt;
    padding-bottom: 5pt;
    border-bottom: 1px solid var(--line-fort);
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--ink-soft);
  }

  .cahier-notes__libre {
    margin: 0 0 14pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .cahier-notes__etiquette {
    margin: 0 0 3pt;
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--accent);
  }

  /* La note libre garde ses retours à la ligne : on l'a écrite en
     plusieurs points, elle se relit en plusieurs points. */
  .cahier-notes__mot {
    margin: 0;
    white-space: pre-wrap;
    color: var(--ink);
  }

  .cahier-notes__liste {
    margin: 0;
    padding: 0 0 0 18pt;
  }

  .cahier-notes__item {
    margin: 0 0 10pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* L'article où le passage se trouve. Sans lui, une citation oblige à
     chercher dans cent pages. */
  .cahier-notes__ou {
    margin: 0 0 2pt;
    font-size: 8.5pt;
    font-weight: 700;
    color: var(--accent-fonce);
  }

  /* La citation prend la police de lecture et les deux filets du passage
     noté : c'est la même marque qu'on retrouve dans le texte. */
  .cahier-notes__citation {
    margin: 0;
    padding: 3pt 0;
    border-top: 1pt solid var(--surligne-trait);
    border-bottom: 1pt solid var(--surligne-trait);
    font-family: var(--font-lecture);
    font-size: 10pt;
    color: var(--ink);
  }

  /* L'avertissement vit SOUS LA NOTE, dans son bloc : il ne parle que
     d'elle. Les citations qui suivent sont du texte de loi. */
  .cahier-notes__avis {
    margin: 4pt 0 0;
    font-size: 8.5pt;
    font-style: italic;
    color: var(--ink-soft);
    break-inside: avoid;
  }

  /* L'étiquette qui ouvre la liste des passages : elle sépare les deux
     parties du cahier, ce que j'ai écrit et ce que j'ai cité. */
  .cahier-notes__etiquette--liste {
    margin-top: 14pt;
    padding-top: 6pt;
    border-top: 1px solid var(--line);
  }

  /* ---------- La mention de provenance ----------
     style.css la fait apparaître et lui donne sa forme. Ici on s'assure
     seulement qu'elle ne se coupe pas en deux entre deux feuilles : une
     moitié de mention ne dit plus ce qu'elle a à dire. */
  .mention-impression {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}