/* =========================================================================
   La Constitution belge — identité visuelle : l'encre et la patine.
   Encre chaude sur papier ; un vert-de-gris (la patine du bronze où l'on
   grave les textes de loi) pour tout ce qui marque le temps : versions,
   dates, liens vers d'autres époques.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Polices, hébergées ici (public/assets/polices/, licence SIL OFL jointe).
   Rien n'est chargé depuis fonts.googleapis.com : cela transmettrait
   l'adresse IP de chaque visiteur à un tiers.

   Seules les graisses réellement utilisées sont présentes : Bodoni Moda 700
   pour le titrage, Literata 400/600 (romain, un seul fichier variable
   couvrant les deux) et Literata 400 italique pour la lecture. Chaque
   graisse existe en deux fichiers (latin, latin-ext) : la réunion des deux
   couvre les diacritiques du français, du néerlandais et de l'allemand.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/polices/bodoni-moda-700.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/polices/bodoni-moda-700.latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/polices/literata-400-600.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/polices/literata-400-600.latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/polices/literata-400italic.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/polices/literata-400italic.latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   Palette. Trois états : clair par défaut, sombre par préférence système,
   sombre forcé par [data-theme="dark"] si un sélecteur existe un jour.
   Chaque jeton a sa seule définition dans un bloc conditionnel — jamais
   les deux à la fois — pour qu'aucune couleur n'oublie l'un des trois états.
   ------------------------------------------------------------------------- */
:root {
  --encre: #24201A;
  --papier: #EBE8DF;
  --patine: #265042;
  --trait: #847D6D;
  --sourdine: #6E675C;
  /* Le fond des zones de service — en-tête, frise, citation — et le creux des
     champs à remplir. Le texte de loi, lui, reste sur le papier nu : c'est la
     seule surface sans cadre, et la plus claire de la page. */
  --fond-zone: #E1DDD2;
  --fond-champ: #F7F5F0;
  /* Le bronze avant qu'il ne se patine : les versions du texte coordonné,
     à partir du 17 février 1994. Plus clair que la patine, pas seulement
     d'une autre teinte — la césure reste lisible sans distinguer les couleurs. */
  --bronze: #8C5A2B;

  --police-titrage: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --police-lecture: 'Literata', Georgia, 'Times New Roman', serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --encre: #E8E3DA;
    --papier: #191712;
    --patine: #8FB3A6;
    --trait: #6B6459;
    --sourdine: #948C81;
    --fond-zone: #211E18;
    --fond-champ: #100E0A;
    --bronze: #BE8752;
  }
}

:root[data-theme="dark"] {
  --encre: #E8E3DA;
  --papier: #191712;
  --patine: #8FB3A6;
  --trait: #6B6459;
  --sourdine: #948C81;
  --fond-zone: #211E18;
  --fond-champ: #100E0A;
  --bronze: #BE8752;
}

/* -------------------------------------------------------------------------
   Base.

   RÈGLE DE GABARIT (révisée le 9 septembre 2026 — elle disait l'inverse).
   Chaque zone de la page est encadrée et posée sur un fond distinct :
   l'en-tête, le texte, le bloc de citation. Le premier parti — « pas de fond
   coloré, pas d'ombre, pas de carte » — venait d'un moment où le fond comptait
   plus que la forme ; à l'usage, rien ne séparait les zones, et le seul trait
   dont on disposait était à 1,40:1 sur le papier, c'est-à-dire invisible.

   Ce qui tient encore de l'ancien parti : aucune ombre, aucun angle arrondi,
   aucun dégradé. Un cadre est un trait, pas un relief. Et le texte de loi
   reste la surface la plus claire de la page — c'est ce qui le désigne comme
   l'endroit où l'on lit.

   La frise fait exception : seul élément graphique du site, elle n'est pas
   encadrée et flotte sur le papier.
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police-lecture);
  font-size: 1.0625rem;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Aucune animation : sur un texte que l'on cite, le mouvement est une
   nuisance. Respecté par principe, pas seulement pour qui l'a demandé. */
*, *::before, *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

a {
  color: var(--patine);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--patine);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   En-tête, présent sur toutes les pages : titre, sous-titre, révisions,
   les deux champs de navigation (« aller à »), sélecteur de langue.
   ------------------------------------------------------------------------- */
header, main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

main {
  background: var(--papier);
  margin-top: 0.5rem;
  padding-top: 1.75rem;
  padding-bottom: 2.25rem;
}

/* Un cadre par article. Encadrer la zone de lecture entière ne marchait pas :
   haute de soixante mille pixels, la boîte ne se refermait jamais sous l'œil et
   ne se lisait plus que comme deux traits filant hors de l'écran. Un article
   tient sur un écran ou deux — son cadre se ferme, donc il cadre. */
.colonne-marge .article {
  border: 1px solid var(--trait);
  padding: 1.1rem 1.25rem 1.25rem;
  margin: 0 0 1rem;
}

.colonne-marge .article > p:last-child { margin-bottom: 0; }

header {
  position: relative;
  background: var(--fond-zone);
  border: 1px solid var(--trait);
  margin-top: 1.25rem;
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
}

header > a {
  font-family: var(--police-titrage);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--encre);
  text-decoration: none;
  letter-spacing: 0.01em;
}

header em {
  display: block;
  font-style: italic;
  color: var(--sourdine);
  margin-top: 0.2rem;
  font-size: 0.95rem;
}

/* Trois colonnes : « Les révisions » seule à gauche, les trois champs empilés
   au centre, le coin des réglages à droite. Empilés, les champs se lisent comme
   trois entrées d'un même formulaire plutôt que comme une barre indistincte. */
header nav {
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.8rem 2rem;
}

.recherches {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}

/* Une largeur d'étiquette commune aux trois : sans elle, « Par mot » et
   « Par article » décaleraient leurs champs l'un par rapport à l'autre. */
.recherches label { width: 5.5rem; }

/* Même affichage et même gouttière pour les trois : c'est ce qui met les
   boutons sur une seule verticale. Deux pixels d'écart suffisaient à casser
   l'alignement — 0,45 rem d'un côté, 0,5 de l'autre. */
.recherches > form {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.coin {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* La bascule de thème : le soleil, une piste, la lune. Les icônes sont hors de
   la piste — dedans, le curseur leur passerait dessus. Angles droits, comme tout
   le reste : c'est un interrupteur mécanique, pas une pastille. */
.bascule-theme {
  position: absolute;
  top: 1.15rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem;
  border: none;
  background: none;
  cursor: pointer;
}

.bascule-theme svg { width: 0.95rem; height: 0.95rem; flex: 0 0 auto; }

/* L'icône du thème en cours s'allume, l'autre reste au trait. */
.bascule-theme .soleil { color: var(--bronze); }
.bascule-theme .lune   { color: var(--trait); }
.bascule-theme[aria-checked="true"] .soleil { color: var(--trait); }
.bascule-theme[aria-checked="true"] .lune   { color: var(--patine); }

.bascule-theme .piste {
  position: relative;
  width: 2.4rem;
  height: 1.05rem;
  border: 1px solid var(--trait);
  background: var(--fond-champ);
}

.bascule-theme .piste::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.85rem;
  height: calc(100% - 4px);
  background: var(--patine);
  transition: transform 160ms ease;
}

.bascule-theme[aria-checked="true"] .piste::before {
  transform: translateX(calc(2.4rem - 0.85rem - 6px));
}

.bascule-theme:hover .piste { border-color: var(--patine); }
.bascule-theme:focus-visible { outline: 2px solid var(--patine); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .bascule-theme .piste::before { transition: none; }
}

/* Une accolade orpheline, ici, faisait ignorer la règle qui suit depuis le
   9 septembre : sur téléphone, l'en-tête gardait ses trois colonnes et
   coupait les boutons au bord de l'écran. */
@media (max-width: 40rem) {
  header nav { grid-template-columns: 1fr; }
  .coin { justify-content: flex-start; }
}

header nav > a.revisions,
header nav > a:first-child {
  font-family: var(--police-lecture);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--patine);
  text-decoration: none;
}
header nav > a:first-child:hover { text-decoration: underline; }

form.aller {
  display: flex;
  align-items: baseline;
  /* La même gouttière que .recherche-form : 0,05 rem d'écart décalait le
     bouton « Rechercher » de deux pixels sur ceux des deux « Aller ». */
  gap: 0.5rem;
}
form.aller label {
  font-family: var(--police-lecture);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sourdine);
  white-space: nowrap;
}
form.aller input {
  font-family: var(--police-lecture);
  font-size: 0.85rem;
  border: 1px solid var(--trait);
  border-radius: 0;
  background: var(--fond-champ);
  color: var(--encre);
  padding: 0.3rem 0.5rem;
  width: 11rem;
  max-width: 40vw;
}
form.aller input::placeholder { color: var(--sourdine); opacity: 0.7; }
form.aller input:focus-visible { outline: 2px solid var(--patine); outline-offset: 2px; }
form.aller button {
  font-family: var(--police-lecture);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--patine);
  background: transparent;
  color: var(--patine);
  padding: 0.3rem 0.65rem;
  cursor: pointer;
}
form.aller button:hover { background: var(--patine); color: var(--papier); }

.langues {
  display: flex;
  gap: 0.7rem;
}
.langues a {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  text-decoration: none;
}
.langues a:hover { text-decoration: underline; }

.aller-erreur {
  color: var(--patine);
  border-left: 2px solid var(--patine);
  padding-left: 0.9rem;
  font-size: 0.95rem;
}

/* -------------------------------------------------------------------------
   Titrage. Bodoni Moda, employé avec parcimonie : grandes tailles
   uniquement — jamais en petit corps, où un didone devient grêle.
   ------------------------------------------------------------------------- */
h1 {
  font-family: var(--police-titrage);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.2;
  margin: 2.2rem 0 1.4rem;
  color: var(--encre);
}

p.date {
  font-family: var(--police-lecture);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--patine);
  margin: -0.6rem 0 1.6rem;
}

main p { margin: 0 0 1.1rem; max-width: 65ch; }

/* -------------------------------------------------------------------------
   La colonne de marge — la signature du gabarit. Dans un code imprimé, le
   numéro d'article n'est pas dans le texte : il est dans la marge, pour que
   l'œil parcoure la page sans la lire. Repliée au-dessus du texte sur écran
   étroit ; en colonne à partir de la largeur où les deux tiennent l'une à
   côté de l'autre.
   ------------------------------------------------------------------------- */
.colonne-marge h2 {
  font-family: var(--police-lecture);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 0.6rem;
  color: var(--sourdine);
}
.colonne-marge h2 a { color: inherit; text-decoration: underline; text-decoration-color: var(--trait); text-underline-offset: 0.25em; }
.colonne-marge h2 a:hover { color: var(--patine); }

.colonne-marge p[data-paragraphe],
.colonne-marge p[data-alinea] { position: relative; }

@media (min-width: 62rem) {
  header, main { max-width: 60rem; }

  main { position: relative; }

  .colonne-marge {
    --marge: 8rem;
    --entrefer: 2rem;
  }

  /* La colonne de marge est creusée dans l'article, non dans le conteneur :
     le numéro se pose ainsi à l'intérieur du cadre, et non à côté de lui. */
  .colonne-marge .article {
    position: relative;
    padding-left: calc(var(--marge) + var(--entrefer));
  }

  .colonne-marge h1 { margin-left: calc(-1 * (var(--marge) + var(--entrefer))); }

  .colonne-marge h2 {
    position: absolute;
    left: 0;
    width: var(--marge);
    margin: 0;
    padding: 0;
    border-top: none;
    text-align: right;
    line-height: 1.3;
  }

  .colonne-marge p[data-paragraphe]::before,
  .colonne-marge p[data-alinea]::after {
    position: absolute;
    left: calc(-1 * (var(--marge) + var(--entrefer)));
    width: var(--marge);
    text-align: right;
    font-family: var(--police-lecture);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--sourdine);
  }
  .colonne-marge p[data-paragraphe]::before { content: "§ " attr(data-paragraphe); top: 0; }
  .colonne-marge p[data-alinea]::after { content: attr(data-alinea); top: 1.35em; text-transform: uppercase; }
}

/* -------------------------------------------------------------------------
   Article isolé (/{langue}/article/{numero}) et trajectoire.
   ------------------------------------------------------------------------- */
p.transitoire {
  border-left: 2px solid var(--trait);
  padding-left: 1rem;
  font-style: italic;
}
p.transitoire strong {
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: var(--sourdine);
}

ol.trajectoire { list-style: none; padding: 0; margin: 0; }
ol.trajectoire li {
  border-left: 2px solid var(--trait);
  padding: 0 0 0 1.4rem;
  margin-bottom: 2.5rem;
}
/* h3 dès qu'une page porte plusieurs lignées : le titre de version passe alors
   sous celui de la lignée, sans changer d'aspect. */
ol.trajectoire h2,
ol.trajectoire h3 {
  font-family: var(--police-lecture);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.6rem;
  color: var(--patine);
}

.autre-numero {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--sourdine);
}

/* L'arbre de la trajectoire : une branche par version, repliée sauf celle en
   vigueur. Le titre de version est le libellé de la branche ; une branche
   fermée ne garde que lui, d'où l'écart resserré. */
ol.trajectoire summary { cursor: pointer; }
ol.trajectoire summary > h2,
ol.trajectoire summary > h3 { display: inline; }
ol.trajectoire details[open] > summary { margin-bottom: 0.6rem; }
ol.trajectoire > li:has(> details:not([open])) { padding-bottom: 0.4rem; margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Mentions discrètes mais explicites : traduction manquante (repli sur le
   français) et abrogation. Jamais confondues avec le texte constitutionnel
   lui-même — d'où l'italique et la couleur sourdine, jamais la seule couleur
   rouge (spec §8 : l'abrogation n'est plus signalée par la seule couleur).
   ------------------------------------------------------------------------- */
.note-traduction {
  display: inline-block;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--sourdine);
}

p.abroge {
  border-left: 2px solid var(--patine);
  padding-left: 1rem;
  font-style: italic;
  color: var(--sourdine);
}

/* -------------------------------------------------------------------------
   Le marqueur de provenance — la version dont l'article tient sa forme
   actuelle. Il n'appartient pas au texte de loi : il s'efface derrière lui.
   Le lien « Comparer » est assez visible pour être trouvé, mais pas pour
   concourir avec le numéro d'article.
   ------------------------------------------------------------------------- */
.provenance {
  margin: 0 0 0.5rem;
  font-family: var(--police-lecture);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.provenance a {
  color: var(--patine);
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
}

.provenance a:hover,
.provenance a:focus-visible {
  color: var(--patine);
  border-bottom-color: var(--patine);
}

.provenance a.comparer::before {
  content: "↔";
  margin-right: 0.3em;
  font-size: 0.9em;
  opacity: 0.7;
}

.provenance-detail {
  opacity: 0.8;
}

/* -------------------------------------------------------------------------
   La frise des révisions — soixante jalons, un par version. Sur une page
   d'article, les versions où il n'existe pas sont inertes : la frise donne
   à voir la durée de vie de la disposition.

   La marge haute n'est pas décorative : le nom de la version s'y affiche au
   survol. Un conteneur qui défile horizontalement rogne aussi le haut (une
   seule valeur `visible` ne survit pas à côté d'un `auto`), l'étiquette doit
   donc tenir à l'intérieur du cadre défilant.
   ------------------------------------------------------------------------- */
.frise {
  max-width: 60rem;
  margin: 1.75rem auto 0;
  /* Le pixel de plus compense la bordure que les zones encadrées ont et que la
     frise n'a pas : sans lui, le premier jalon tombe un pixel avant le titre. */
  padding: 1.1rem calc(1.25rem + 1px) 0.9rem;
  overflow-x: auto;
}

.frise ol {
  list-style: none;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin: 0;
  padding: 0;
}

.frise li { position: relative; flex: 0 0 auto; }

.frise a,
.frise li > span {
  display: block;
  width: 4px;
  height: 18px;
  background: var(--patine);
}

/* À partir de la coordination du 17 février 1994, le texte est celui dont les
   numéros ont cours aujourd'hui : les jalons passent au bronze. La règle vient
   avant « inerte » et « courante », qui doivent l'emporter sur elle. */
.frise .coordonnee a,
.frise .coordonnee > span { background: var(--bronze); }

/* Un jalon inerte : l'article n'existe pas à cette date. Plus court et sourd,
   il se lit comme une absence sans jamais inviter au clic. */
.frise .inerte > span { height: 7px; background: var(--trait); }

.frise .courante a { width: 6px; height: 26px; background: var(--encre); }

.frise a:hover { background: var(--encre); }
.frise a:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

/* Le nom reste dans le HTML pour les lecteurs d'écran ; seule la mise en page
   le retire de la vue jusqu'au survol ou au focus. */
.frise .nom {
  position: absolute;
  bottom: 100%;
  /* Ancrée à droite du repère plutôt que centrée sur lui : centrée, l'étiquette
     des trois premiers jalons sortait du cadre défilant, qui la rognait. */
  left: 0;
  margin-bottom: 0.35rem;
  white-space: nowrap;
  font-family: var(--police-lecture);
  font-size: 0.7rem;
  color: var(--sourdine);
  background: var(--papier);
  padding: 0 0.3rem;
  clip-path: inset(50%);
}

.frise a:hover .nom,
.frise a:focus-visible .nom,
.frise li:hover > span .nom { clip-path: none; }

/* -------------------------------------------------------------------------
   Le bloc de citation — ce qu'on recopie en note de bas de page.

   La référence se sélectionne d'un seul geste grâce à `user-select: all`,
   sans JavaScript. Le site en compte désormais vingt lignes, et vingt
   seulement : l'interrupteur de thème, qui ne peut retenir un choix sans
   elles. Rien d'autre n'en dépend, et rien d'autre ne doit en dépendre —
   chaque page se lit entièrement script désactivé.
   ------------------------------------------------------------------------- */
.citation {
  max-width: 60rem;
  margin: 3rem auto 2.5rem;
  padding: 1.2rem 1.25rem 1.4rem;
  background: var(--fond-zone);
  border: 1px solid var(--trait);
}

.citation h2 {
  font-family: var(--police-lecture);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--patine);
  margin: 0 0 0.6rem;
  border: none;
  padding: 0;
}

.citation .reference {
  user-select: all;
  -webkit-user-select: all;
  font-family: var(--police-lecture);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--encre);
  margin: 0 0 0.4rem;
  max-width: 60ch;
}

.citation .adresse { margin: 0; font-size: 0.78rem; }
.citation .adresse a { color: var(--patine); text-decoration: underline; text-underline-offset: 0.2em; }
.citation .adresse a:hover,
.citation .adresse a:focus-visible { color: var(--patine); text-decoration: underline; }

/* -------------------------------------------------------------------------
   La trajectoire — l'histoire d'un article, du plus ancien au plus récent.
   Le filet vertical n'est pas décoratif : il porte la continuité de
   l'article d'une version à l'autre, et chaque version en est un jalon.
   ------------------------------------------------------------------------- */
.trajectoire {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trajectoire > li {
  position: relative;
  padding: 0 0 2rem 1.75rem;
  border-left: 1px solid var(--trait);
}

.trajectoire > li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.55rem;
  width: 7px;
  height: 7px;
  background: var(--patine);
  border-radius: 50%;
}

/* Le dernier jalon ferme la ligne : le filet ne doit pas se prolonger dans le vide. */
.trajectoire > li:last-child { border-left-color: transparent; }

.trajectoire h2 {
  font-family: var(--police-lecture);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sourdine);
  margin: 0 0 0.5rem;
  border: none;
  padding: 0;
}

.evenement {
  font-family: var(--police-lecture);
  font-size: 0.85rem;
  color: var(--patine);
  margin: 0 0 0.7rem;
}

.autre-numero {
  font-size: 0.82rem;
  color: var(--sourdine);
  margin: 0 0 0.6rem;
}

/* -------------------------------------------------------------------------
   La comparaison. L'ajout et la suppression ne se distinguent pas par la
   seule couleur : le soulignement, la rature et une étiquette lue par les
   lecteurs d'écran portent la même information. Une comparaison imprimée
   en noir et blanc reste donc lisible.
   ------------------------------------------------------------------------- */
.comparaison { margin: 1.5rem 0; }
.comparaison p { max-width: 65ch; }

.comparaison ins {
  text-decoration: none;
  border-bottom: 2px solid var(--patine);
  background: color-mix(in srgb, var(--patine) 12%, transparent);
}

.comparaison del {
  text-decoration: line-through;
  color: var(--sourdine);
}

/* L'étiquette n'est pas affichée mais reste lisible par un lecteur d'écran. */
.comparaison .etiquette {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.deux-colonnes { display: grid; gap: 2rem; }
.deux-colonnes .colonne h2 {
  font-family: var(--police-lecture);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sourdine);
  margin: 0 0 0.6rem;
  border: none;
  padding: 0;
}

@media (min-width: 62rem) {
  .deux-colonnes { grid-template-columns: 1fr 1fr; }
}

.dispositions { display: flex; gap: 1rem; margin: 0 0 1.2rem; }
.dispositions a { font-size: 0.85rem; color: var(--patine); text-decoration: underline; text-underline-offset: 0.2em; }
.dispositions a[aria-current] { color: var(--encre); border-bottom: 1px solid var(--patine); }

.bornes {
  font-family: var(--police-lecture);
  font-size: 0.85rem;
  color: var(--sourdine);
  margin: -0.6rem 0 1.2rem;
}

.aucun-changement {
  font-size: 0.9rem;
  color: var(--sourdine);
  border-left: 2px solid var(--trait);
  padding-left: 1rem;
  margin: 0 0 1.2rem;
}

/* -------------------------------------------------------------------------
   Recherche
   Le surlignage n'emprunte pas le jaune fluo d'usage : sur ce papier, une
   teinte de patine très diluée suffit à faire ressortir le mot sans crier.
   Le champ du nav reprend le dessin des formulaires « aller à ».
   ------------------------------------------------------------------------- */
mark {
  background: color-mix(in srgb, var(--patine) 22%, transparent);
  color: inherit;
  padding: 0 0.12em;
  border-radius: 2px;
}

.recherche-form {
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
  flex-wrap: wrap;
}

/* Même étiquette visible que « Par date » et « Par article » : trois champs
   voisins, trois étiquettes — un repère de saisie seul disparaît dès qu'on
   tape, et ne dit plus ce que le champ attendait. */
.recherche-form label {
  font-family: var(--police-lecture);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sourdine);
  white-space: nowrap;
}
.recherche-form input[type="text"] {
  font-family: var(--police-lecture);
  font-size: 0.85rem;
  border: 1px solid var(--trait);
  border-radius: 0;
  background: var(--fond-champ);
  color: var(--encre);
  padding: 0.3rem 0.5rem;
  width: 11rem;
  max-width: 40vw;
}
.recherche-form input[type="text"]::placeholder { color: var(--sourdine); opacity: 0.7; }
.recherche-form input[type="text"]:focus-visible {
  outline: 2px solid var(--patine);
  outline-offset: 2px;
}
.recherche-form button {
  font-family: var(--police-lecture);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--patine);
  background: transparent;
  color: var(--patine);
  padding: 0.3rem 0.65rem;
  cursor: pointer;
}
.recherche-form button:hover { background: var(--patine); color: var(--papier); }
.recherche-form .toutes {
  font-size: 0.78rem;
  color: var(--sourdine);
  white-space: nowrap;
}

.recherche-invite,
.recherche-vide {
  color: var(--sourdine);
  font-size: 0.95rem;
}

.resultats {
  list-style: none;
  padding: 0;
}
.resultats li {
  margin: 0 0 1.4rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--trait);
}
.resultats .versions {
  color: var(--sourdine);
  font-size: 0.8rem;
  margin-left: 0.5rem;
}
.resultats .extrait { margin: 0.3rem 0 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Bilingue FR|NL
   Deux colonnes tant que la page est large ; en dessous, elles s'empilent —
   deux textes juxtaposés sur un téléphone ne se lisent ni l'un ni l'autre.
   ------------------------------------------------------------------------- */
.bilingue {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 62rem) {
  .bilingue { grid-template-columns: 1fr; }
}

/* La colonne de marge (numéro d'article, § et alinéas) est calée sur le bord
   gauche de `main` : en bilingue, les repères de la colonne néerlandaise
   venaient donc se poser sur le texte français. Chaque colonne devient son
   propre référentiel — elle porte la marge, plus étroite, et sert d'ancre aux
   éléments positionnés — et la page rend au texte la marge qu'elle réservait. */
@media (min-width: 62rem) {
  /* Plus rien à neutraliser ici : le conteneur n'a plus de marge à lui. */

  .bilingue {
    --marge: 4.5rem;
    --entrefer: 1rem;
    gap: 2rem;
  }

  .bilingue > div { position: static; }
}
.bilingue-bascule {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* -------------------------------------------------------------------------
   Lignées d'un même numéro
   Un numéro qui a désigné deux articles sans lien : chaque histoire à part,
   sous le titre des numéros qu'elle a portés.
   ------------------------------------------------------------------------- */
.lignees-avertissement {
  color: var(--sourdine);
  font-size: 0.9rem;
  border-left: 2px solid var(--trait);
  padding-left: 1rem;
  margin: 0 0 1.6rem;
}
h2.lignee {
  font-family: var(--police-titrage);
  font-size: 1.15rem;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 0.3rem;
  margin: 2.2rem 0 0.8rem;
}