/* ==========================================================================
   Constitution RDC — feuille de style.

   Direction : publication institutionnelle. Le modèle mental n'est pas le
   site vitrine mais le Journal Officiel relié — papier crème, encre chaude,
   un bleu sceau réservé à la structure, de l'or réservé aux marques
   cérémonielles (le sceau, les états provisoires). Rien ne doit évoquer un
   produit SaaS : pas de dégradés, pas de cartes flottantes à ombre douce,
   des angles nets, une typographie qui assume la lecture longue.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,380;9..144,480;9..144,560;9..144,640&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --papier: #faf6ec;
  --papier-ombre: #f0e9d8;
  --papier-vif: #fffdf8;
  --encre: #211d17;
  --encre-douce: #5a5346;
  --encre-fantome: #948b78;
  --sceau: #1b3350;
  --sceau-clair: #2c4a6e;
  --sceau-fond: #eef2f6;
  --or: #a97c2e;
  --or-vif: #c89a4e;
  --or-fond: #f7ecd6;
  --lie-de-vin: #7a2e2e;
  --lie-de-vin-fond: #f6e9e5;
  --ligne: #ded2b3;
  --ligne-vive: #c9b98a;
  --ombre-encre: rgba(33, 29, 23, 0.08);

  /* Filet institutionnel du bandeau : les couleurs exactes du drapeau
     congolais (bleu ciel, rouge, jaune) — volontairement fixe, pas
     ajusté entre clair et sombre, un repère de teinte constant. */
  --filet-bleu: #007fff;
  --filet-rouge: #ce1021;
  --filet-or: #f7d618;

  --police-affichage: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --police-lecture: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --police-mecanique: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --mesure: 40em;
  --rythme: 1.6rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #15171b;
    --papier-ombre: #1c1f24;
    --papier-vif: #1a1c21;
    --encre: #ece4d2;
    --encre-douce: #b6ad98;
    --encre-fantome: #736c5c;
    --sceau: #7fa3ce;
    --sceau-clair: #9dbcdf;
    --sceau-fond: #1c2733;
    --or: #d6a84c;
    --or-vif: #e6c179;
    --or-fond: #2b2416;
    --lie-de-vin: #c98a8a;
    --lie-de-vin-fond: #2c1c1c;
    --ligne: #34383f;
    --ligne-vive: #454a52;
    --ombre-encre: rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --papier: #15171b;
  --papier-ombre: #1c1f24;
  --papier-vif: #1a1c21;
  --encre: #ece4d2;
  --encre-douce: #b6ad98;
  --encre-fantome: #736c5c;
  --sceau: #7fa3ce;
  --sceau-clair: #9dbcdf;
  --sceau-fond: #1c2733;
  --or: #d6a84c;
  --or-vif: #e6c179;
  --or-fond: #2b2416;
  --lie-de-vin: #c98a8a;
  --lie-de-vin-fond: #2c1c1c;
  --ligne: #34383f;
  --ligne-vive: #454a52;
  --ombre-encre: rgba(0, 0, 0, 0.35);
}

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

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light dark;
  text-size-adjust: 100%;
}

html, body {
  /* Garde-fou : la page ne doit jamais défiler horizontalement. Le seul
     défilement latéral voulu est interne à nav.rayon (overflow-x: auto,
     ci-dessous), qui reste un contexte de défilement indépendant. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police-lecture);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Grain de papier très discret, en superposition fixe */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { opacity: 0.35; mix-blend-mode: screen; }
}
:root[data-theme="dark"] body::before { opacity: 0.35; mix-blend-mode: screen; }

a { color: var(--sceau); text-decoration: none; }
a:hover { color: var(--or); }

::selection { background: var(--or-fond); color: var(--encre); }

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

h1, h2, h3, h4 {
  font-family: var(--police-affichage);
  font-weight: 560;
  line-height: 1.15;
  color: var(--encre);
  margin: 0;
}

p { margin: 0 0 var(--rythme); }
p:last-child { margin-bottom: 0; }

.mono {
  font-family: var(--police-mecanique);
  letter-spacing: 0.02em;
}

.enveloppe {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.mesure {
  max-width: var(--mesure);
}

/* --------------------------------------------------------------------- */
/* Sceau (marque graphique)                                               */
/* --------------------------------------------------------------------- */

.sceau-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}
/* Variante abstraite (anneau + étoile), en currentColor — le rendu
   par défaut. La variante « armoiries » (tête de léopard aux couleurs
   du drapeau, voir _sceau.html) porte ses propres couleurs fixes dans
   le balisage et ne doit surtout pas hériter de ces règles. */
.sceau-mark:not(.sceau-mark--armoiries) circle,
.sceau-mark:not(.sceau-mark--armoiries) path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}
.sceau-mark:not(.sceau-mark--armoiries) .etoile { fill: currentColor; stroke: none; }

/* --------------------------------------------------------------------- */
/* Ossature / bandeau (masthead)                                          */
/* --------------------------------------------------------------------- */

.bandeau {
  border-bottom: 1px solid var(--ligne);
  background: var(--papier-vif);
}

/* Filet institutionnel : trois teintes plutôt que le drapeau lui-même -
   une évocation, pas un fac-similé. */
.bandeau__filet {
  height: 4px;
  background: linear-gradient(
    to right,
    var(--filet-bleu) 0 33.33%,
    var(--filet-rouge) 33.33% 66.66%,
    var(--filet-or) 66.66% 100%
  );
}

.bandeau__interieur {
  padding-block: 1.5rem 0;
}

.bandeau__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--police-mecanique);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-fantome);
  margin-bottom: 1.1rem;
}

.bandeau__eyebrow a { color: inherit; }
.bandeau__eyebrow a:hover { color: var(--or); }
.bandeau__eyebrow-droite { display: flex; align-items: center; gap: 1.2rem; }

.bandeau__marque {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding-bottom: 1.4rem;
}

.bandeau__marque .sceau-mark {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--sceau);
  flex: none;
  transform: translateY(0.32rem);
}

.bandeau__titre {
  /* Marque du site, balisée <p> et non <h1> (le <h1> revient au contenu
     de chaque page) : les propriétés que la règle h1..h4 apportait sont
     donc reprises ici explicitement. */
  font-family: var(--police-affichage);
  font-weight: 560;
  line-height: 1.15;
  color: var(--encre);
  margin: 0;
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
  letter-spacing: -0.01em;
}

.bandeau__titre a { color: var(--encre); }
.bandeau__titre a:hover { color: var(--sceau); }

.bandeau__soustitre {
  font-family: var(--police-lecture);
  font-style: italic;
  color: var(--encre-douce);
  font-size: 0.95rem;
  margin-top: 0.15rem;
}

nav.rayon {
  display: flex;
  gap: 1.75rem;
  border-top: 1px solid var(--ligne);
  padding-block: 0.85rem;
  font-family: var(--police-mecanique);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-x: auto;
}
nav.rayon a {
  color: var(--encre-douce);
  white-space: nowrap;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
}
nav.rayon a:hover,
nav.rayon a[aria-current="page"] {
  color: var(--encre);
  border-bottom-color: var(--or);
}

/* --------------------------------------------------------------------- */
/* Pied de page                                                           */
/* --------------------------------------------------------------------- */

footer.pied {
  border-top: 1px solid var(--ligne);
  margin-top: 5rem;
  padding-block: 2.5rem;
  color: var(--encre-fantome);
  font-size: 0.85rem;
}
footer.pied .enveloppe {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: baseline;
}
footer.pied a { color: var(--encre-douce); }
footer.pied a:hover { color: var(--or); }
footer.pied p { margin: 0; }

/* --------------------------------------------------------------------- */
/* Bandeau de statut (brouillon / méthodologie)                           */
/* --------------------------------------------------------------------- */

.avis {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border: 1px solid var(--ligne-vive);
  background: var(--papier-ombre);
  padding: 1.1rem 1.3rem;
  margin-block: 2rem;
}
.avis__sceau {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border: 1.5px dashed var(--or);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--or);
  transform: rotate(-8deg);
}
.avis__sceau .sceau-mark { width: 1.3rem; height: 1.3rem; }
.avis__corps { font-size: 0.92rem; color: var(--encre-douce); }
.avis__corps strong {
  display: block;
  font-family: var(--police-mecanique);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--or);
  margin-bottom: 0.35rem;
}
.avis--methode {
  border-style: dashed;
  background: transparent;
}

/* --------------------------------------------------------------------- */
/* Accueil                                                                */
/* --------------------------------------------------------------------- */

.hero {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem);
  position: relative;
}

.hero__eyebrow {
  font-family: var(--police-mecanique);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}
.hero__eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--or);
}

.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  max-width: 20ch;
  letter-spacing: -0.015em;
}

.hero__lede {
  font-family: var(--police-lecture);
  font-size: 1.2rem;
  color: var(--encre-douce);
  max-width: 42ch;
  margin-top: 1.4rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.4rem;
}

.bouton {
  font-family: var(--police-mecanique);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--encre);
  color: var(--encre);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bouton:hover { background: var(--encre); color: var(--papier); }

.bouton--plein {
  background: var(--sceau);
  border-color: var(--sceau);
  color: var(--papier-vif);
}
.bouton--plein:hover {
  background: var(--or);
  border-color: var(--or);
  color: var(--encre);
}

.recherche-vedette {
  margin-top: 2.6rem;
  max-width: 34rem;
}

.champ-recherche {
  display: flex;
  border: 1px solid var(--encre);
  background: var(--papier-vif);
}
.champ-recherche input {
  flex: 1;
  /* Sans ça, un <input> flexible refuse de rétrécir sous sa largeur
     intrinsèque par défaut (~170-200px) : sur un petit écran, il pousse
     le bouton « Chercher » hors du cadre plutôt que de céder la place. */
  min-width: 0;
  border: none;
  background: none;
  padding: 1rem 1.1rem;
  font-family: var(--police-lecture);
  font-size: 1.05rem;
  color: var(--encre);
}
.champ-recherche input:focus { outline: none; }
.champ-recherche input::placeholder { color: var(--encre-fantome); font-style: italic; }
.champ-recherche button {
  border: none;
  border-left: 1px solid var(--encre);
  background: var(--encre);
  color: var(--papier);
  padding: 0 1.3rem;
  font-family: var(--police-mecanique);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.champ-recherche button:hover { background: var(--or); color: var(--encre); }

.hero__meta {
  margin-top: 1rem;
  font-family: var(--police-mecanique);
  font-size: 0.78rem;
  color: var(--encre-fantome);
}

/* Grille des corpus */

.section-corpus { padding-block: 3rem; border-top: 1px solid var(--ligne); }

.section-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
}
.section-titre h2 { font-size: 1.5rem; }
.section-titre .compte {
  font-family: var(--police-mecanique);
  font-size: 0.78rem;
  color: var(--encre-fantome);
}

.grille-corpus {
  display: grid;
  /* auto-fit, pas auto-fill : avec un seul corpus (le cas courant tant que
     le second n'est pas importé), auto-fill aurait conservé les colonnes
     vides du gabarit et laissé une grande case grise à côté de la carte. */
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
}

.carte-corpus {
  background: var(--papier-vif);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: background 0.15s ease;
}
.carte-corpus:hover { background: var(--papier-ombre); }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--police-mecanique);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  width: fit-content;
  border: 1px solid currentColor;
}
.etiquette--en_vigueur { color: #2f6b3d; }
.etiquette--abroge { color: var(--lie-de-vin); }
.etiquette--projet { color: var(--sceau); }
.etiquette--brouillon { color: var(--or); }

.carte-corpus h3 {
  font-size: 1.2rem;
  line-height: 1.3;
}
.carte-corpus h3 a { color: inherit; }
.carte-corpus h3 a:hover { color: var(--sceau); }

.carte-corpus__meta {
  font-family: var(--police-mecanique);
  font-size: 0.78rem;
  color: var(--encre-fantome);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Bloc méthode */

.methode {
  padding-block: 3.5rem;
  border-top: 1px solid var(--ligne);
}
.methode__grille {
  display: grid;
  grid-template-columns: minmax(0, 22rem) 1fr;
  gap: 3rem;
}
.methode h2 { font-size: 1.6rem; max-width: 14ch; }
.methode__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
}
.methode__liste li {
  padding-left: 2.6rem;
  position: relative;
}
.methode__liste .num {
  position: absolute;
  left: 0;
  top: -0.1rem;
  font-family: var(--police-affichage);
  font-size: 1.4rem;
  color: var(--or);
}
.methode__liste h4 {
  font-size: 1.02rem;
  margin-bottom: 0.3rem;
}
.methode__liste p {
  color: var(--encre-douce);
  font-size: 0.96rem;
}

@media (max-width: 56rem) {
  .methode__grille { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* --------------------------------------------------------------------- */
/* Fil d'ariane                                                           */
/* --------------------------------------------------------------------- */

.fil {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-family: var(--police-mecanique);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--encre-fantome);
  padding-block: 1.6rem;
  text-transform: uppercase;
}
.fil a { color: var(--encre-douce); }
.fil a:hover { color: var(--or); }
.fil__sep { color: var(--ligne-vive); }
.fil__ici { color: var(--encre); }

/* --------------------------------------------------------------------- */
/* Sommaire (arbre des divisions)                                         */
/* --------------------------------------------------------------------- */

.entete-corpus { padding-block: 1.5rem 3rem; }
.entete-corpus__label {
  font-family: var(--police-mecanique);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.8rem;
}
.entete-corpus h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); max-width: 26ch; }
.entete-corpus__source {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--encre-douce);
  max-width: 46ch;
}

.sommaire { padding-bottom: 5rem; }

.sommaire__preambule {
  display: block;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--ligne);
  margin-bottom: 2rem;
  font-family: var(--police-affichage);
  font-size: 1.15rem;
  color: var(--encre);
}
.sommaire__preambule:hover { border-color: var(--or); color: var(--encre); background: var(--papier-vif); }
.sommaire__preambule small {
  display: block;
  font-family: var(--police-mecanique);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-fantome);
  margin-bottom: 0.3rem;
}

.arbre { list-style: none; margin: 0; padding: 0; }
.arbre .arbre { margin-top: 0.6rem; margin-left: 1.5rem; padding-left: 1.3rem; border-left: 1px solid var(--ligne); }

.noeud { margin-bottom: 0.6rem; }
.noeud__entete {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding-block: 0.35rem;
}
.noeud__numero {
  font-family: var(--police-mecanique);
  font-size: 0.78rem;
  color: var(--or);
  flex: none;
}
.noeud__intitule {
  font-family: var(--police-affichage);
  font-weight: 560;
}
.noeud--titre > .noeud__entete .noeud__intitule { font-size: 1.25rem; }
.noeud--chapitre > .noeud__entete .noeud__intitule { font-size: 1.05rem; color: var(--encre-douce); }
.noeud--section > .noeud__entete .noeud__intitule { font-size: 0.96rem; color: var(--encre-douce); font-style: italic; }
.noeud--paragraphe > .noeud__entete .noeud__intitule { font-size: 0.9rem; color: var(--encre-fantome); }

.liste-articles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.7rem 0 0.3rem;
  padding: 0;
  list-style: none;
}
.puce-article {
  font-family: var(--police-mecanique);
  font-size: 0.85rem;
  border: 1px solid var(--ligne);
  padding: 0.3rem 0.65rem;
  color: var(--encre);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.puce-article:hover { border-color: var(--sceau); color: var(--sceau); background: var(--sceau-fond); }
.puce-article[data-statut="modifie"] { border-color: var(--or); }
.puce-article[data-statut="modifie"]::after { content: " *"; color: var(--or); }

/* --------------------------------------------------------------------- */
/* Article                                                                */
/* --------------------------------------------------------------------- */

.article-page { padding-bottom: 5rem; }

.article-entete { padding-block: 2rem 2.5rem; border-bottom: 1px solid var(--ligne); margin-bottom: 3rem; }
.article-entete__contexte {
  font-family: var(--police-mecanique);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-fantome);
  margin-bottom: 1rem;
}
/* Le titre de niveau 1 de la page d'article. Dans le HTML, il se lit
   « Article 8 » — l'ordre naturel, celui que restitue un lecteur d'écran
   et qu'indexe un moteur de recherche. À l'écran, le chiffre reprend sa
   place de première lettrine grâce à `order` : deux étiquettes de texte
   statiques, rien de focusable, donc aucun décalage de tabulation. */
.article-entete__nombre {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.article-entete__nombre .chiffre {
  order: 1;
  font-family: var(--police-affichage);
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  font-weight: 560;
  color: var(--sceau);
  line-height: 1;
}
.article-entete__nombre .mot {
  order: 2;
  font-family: var(--police-mecanique);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-fantome);
}

.badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.badge {
  font-family: var(--police-mecanique);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  border: 1px solid currentColor;
}
.badge--or { color: var(--or); }
.badge--sceau { color: var(--sceau); }
.badge--sourdine { color: var(--encre-fantome); }

.article-entete__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.4rem;
}
.bouton-discret {
  font-family: var(--police-mecanique);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--sceau);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.1rem;
}
.bouton-discret:hover { color: var(--or); border-bottom-color: var(--or); }

/* --------------------------------------------------------------------- */
/* Menu « Partager »                                                      */
/* --------------------------------------------------------------------- */
.partage { position: relative; }
.partage__declencheur {
  /* Action principale de l'en-tête d'article : pleine, pas discrète
     comme les liens « Comparer avec » — c'est elle qu'on doit voir
     en premier. */
  background: var(--sceau);
  border: 1px solid var(--sceau);
  color: var(--papier-vif);
  font-family: var(--police-mecanique);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.75rem 1.3rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.partage__declencheur:hover,
.partage__declencheur:focus-visible {
  background: var(--or);
  border-color: var(--or);
  color: var(--encre);
}
.partage__declencheur svg { flex: none; width: 1.05rem; height: 1.05rem; }
.partage__declencheur::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.35em solid currentColor;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.partage__declencheur[aria-expanded="true"]::after { transform: rotate(180deg); }

.partage__panneau {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.7rem);
  left: 0;
  min-width: 15.5rem;
  background: var(--papier-vif);
  border: 1px solid var(--ligne-vive);
  box-shadow: 0 0.9rem 2.2rem var(--ombre-encre);
  padding: 0.5rem 0;
  animation: partage-apparait 0.14s ease-out;
}
.partage__panneau::before {
  /* Petite flèche pointant vers le déclencheur, dans l'esprit d'un
     cachet plutôt que d'un menu logiciel générique. */
  content: "";
  position: absolute;
  top: -0.4rem;
  left: 1.1rem;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--papier-vif);
  border-left: 1px solid var(--ligne-vive);
  border-top: 1px solid var(--ligne-vive);
  transform: rotate(45deg);
}
@keyframes partage-apparait {
  from { opacity: 0; transform: translateY(-0.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

.partage__categorie {
  font-family: var(--police-mecanique);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--encre-fantome);
  padding: 0.6rem 1.1rem 0.35rem;
  margin: 0;
}
.partage__panneau .partage__categorie:not(:first-child) {
  margin-top: 0.3rem;
  border-top: 1px solid var(--ligne);
  padding-top: 0.7rem;
}

.partage__option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 1.1rem;
  font-family: var(--police-lecture);
  font-size: 0.9rem;
  color: var(--encre);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.partage__option:hover,
.partage__option:focus-visible {
  background: var(--papier-ombre);
  color: var(--sceau);
}
.partage__icone {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--encre-fantome);
}
.partage__icone svg { width: 1.1rem; height: 1.1rem; }
.partage__option:hover .partage__icone,
.partage__option:focus-visible .partage__icone { color: var(--or); }

.texte-article {
  font-family: var(--police-lecture);
  font-size: 1.15rem;
  line-height: 1.75;
  max-width: var(--mesure);
}

.alinea {
  display: flex;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
  align-items: baseline;
}
.alinea__numero {
  font-family: var(--police-mecanique);
  font-size: 0.75rem;
  color: var(--encre-fantome);
  flex: none;
  width: 1.6rem;
  text-align: right;
  transform: translateY(0.1em);
}
.alinea__texte { flex: 1; }

/* Point numéroté ou lettré d'une énumération (1., 2., a)...) : fait
   partie de l'alinéa qui le précède, pas un alinéa en soi — pas de
   numéro propre, et un resserrement pour lire l'énumération comme un
   bloc plutôt que comme une suite de paragraphes distincts. */
.alinea--suite { margin-bottom: 0.7rem; }
.alinea--suite .alinea__numero { visibility: hidden; }

.bloc-annexe {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ligne);
  display: grid;
  gap: 2.2rem;
  max-width: var(--mesure);
}
.bloc-annexe h2 {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--police-mecanique);
  color: var(--encre-fantome);
  margin-bottom: 0.8rem;
}
.bloc-annexe p { font-size: 0.95rem; color: var(--encre-douce); }

.puce-reference {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--police-mecanique);
  font-size: 0.82rem;
  border: 1px solid var(--ligne);
  padding: 0.25rem 0.55rem;
  margin: 0 0.4rem 0.4rem 0;
  color: var(--sceau);
}
.puce-reference:hover { border-color: var(--sceau); background: var(--sceau-fond); }

.explication {
  border-left: 2px solid var(--or);
  padding-left: 1.2rem;
}
.explication__entete {
  font-family: var(--police-mecanique);
  font-size: 0.75rem;
  color: var(--or);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.pagination-article {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ligne);
}
.pagination-article a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 45%;
  color: var(--encre);
}
.pagination-article a:hover .chiffre-nav { color: var(--or); }
.pagination-article .direction {
  font-family: var(--police-mecanique);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-fantome);
}
.pagination-article .chiffre-nav {
  font-family: var(--police-affichage);
  font-size: 1.3rem;
  color: var(--sceau);
  transition: color 0.15s ease;
}
.pagination-article .suivant { text-align: right; align-items: flex-end; margin-left: auto; }

/* --------------------------------------------------------------------- */
/* Recherche                                                              */
/* --------------------------------------------------------------------- */

.page-recherche { padding-block: 2.5rem 5rem; }
.page-recherche h1 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: 1.6rem; }

.champ-recherche--large input { font-size: 1.2rem; padding: 1.2rem 1.3rem; }

.resultats-meta {
  font-family: var(--police-mecanique);
  font-size: 0.8rem;
  color: var(--encre-fantome);
  margin: 1.6rem 0 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--ligne);
}
.resultats-meta strong { color: var(--encre); }

.liste-resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.resultat {
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--ligne);
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
}
.resultat__num {
  font-family: var(--police-affichage);
  font-size: 1.8rem;
  color: var(--sceau);
  line-height: 1;
}
.resultat__corps h2 {
  font-size: 1.05rem;
  font-family: var(--police-lecture);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.resultat__corps h2 a { color: var(--encre); }
.resultat__corps h2 a:hover { color: var(--sceau); }
.resultat__fil {
  font-family: var(--police-mecanique);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--encre-fantome);
  margin-bottom: 0.6rem;
}
.resultat__extrait {
  font-size: 0.98rem;
  color: var(--encre-douce);
  line-height: 1.6;
}
.resultat__extrait mark {
  background: var(--or-fond);
  color: var(--encre);
  padding: 0 0.15em;
  font-weight: 600;
}

.etat-vide {
  padding: 3.5rem 0;
  text-align: center;
  color: var(--encre-douce);
}
.etat-vide .sceau-mark { width: 2.4rem; height: 2.4rem; color: var(--ligne-vive); margin-bottom: 1.2rem; }
.etat-vide p { max-width: 34ch; margin-inline: auto; }

/* --------------------------------------------------------------------- */
/* Animation d'entrée                                                     */
/* --------------------------------------------------------------------- */

@keyframes leve {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.leve {
  animation: leve 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.leve-1 { animation-delay: 0.04s; }
.leve-2 { animation-delay: 0.1s; }
.leve-3 { animation-delay: 0.16s; }
.leve-4 { animation-delay: 0.22s; }

@media (prefers-reduced-motion: reduce) {
  .leve { animation: none; }
}

/* --------------------------------------------------------------------- */
/* Impression                                                             */
/* --------------------------------------------------------------------- */

@media print {
  body::before { display: none; }
  nav.rayon, .hero__actions, .recherche-vedette, footer.pied, .avis,
  .bandeau__filet, .bascule-theme, .article-entete__actions { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
}

/* --------------------------------------------------------------------- */
/* Bascule de thème                                                       */
/* --------------------------------------------------------------------- */

.bascule-theme {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid var(--ligne-vive);
  color: var(--encre-douce);
  font-family: var(--police-mecanique);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.bascule-theme:hover { border-color: var(--or); color: var(--or); }
/* Taille verrouillée en CSS ET en attributs HTML (voir base.html) :
   un <svg> sans les deux ne prend pas forcément sa taille de viewBox
   selon le navigateur, et peut s'afficher à sa taille par défaut
   (jusqu'à 300×150px) — exactement le bouton disproportionné rapporté
   une fois. Son contenu (quelle icône) est écrit par script, pas géré
   par une combinaison de sélecteurs CSS empilés. */
.bascule-theme svg { width: 0.85rem; height: 0.85rem; flex: none; display: block; }

/* --------------------------------------------------------------------- */
/* Comparaison entre versions                                             */
/* --------------------------------------------------------------------- */

.comparaison-entete { padding-block: 2rem 1.5rem; }
.comparaison-entete h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-top: 0.6rem; }
.comparaison-entete__resume { margin-top: 0.8rem; color: var(--encre-douce); }
.comparaison-entete__resume strong { color: var(--or); font-family: var(--police-affichage); }

.comparaison-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
  margin-bottom: 0.5rem;
}
.comparaison-colonne {
  background: var(--papier-vif);
  padding: 1.2rem 1.5rem;
}
.comparaison-colonne__label {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.4rem;
}
.comparaison-colonne h2 { font-size: 1.05rem; line-height: 1.3; }
.comparaison-colonne__date { margin-top: 0.4rem; font-size: 0.85rem; color: var(--encre-fantome); }

.comparaison-corps { border: 1px solid var(--ligne); border-top: none; }
.comparaison-ligne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ligne);
  border-bottom: 1px solid var(--ligne);
}
.comparaison-ligne:last-child { border-bottom: none; }
.comparaison-ligne > p {
  background: var(--papier-vif);
  padding: 1rem 1.5rem;
  font-family: var(--police-lecture);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0;
}
.comparaison-ligne--identique > p { color: var(--encre-douce); }
.comparaison-ligne--diff > p { background: var(--papier); }
.comparaison-ligne--diff del {
  background: var(--lie-de-vin-fond);
  color: var(--lie-de-vin);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.comparaison-ligne--diff ins {
  background: var(--or-fond);
  color: var(--encre);
  text-decoration: none;
  font-weight: 600;
}

.comparaison-avis {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--encre-fantome);
  font-style: italic;
}

/* --------------------------------------------------------------------- */
/* Responsive                                                             */
/* --------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .resultat { grid-template-columns: 1fr; gap: 0.4rem; }
  .resultat__num { font-size: 1.3rem; }
  .pagination-article { flex-direction: column; }
  .pagination-article a { max-width: 100%; }
  .pagination-article .suivant { text-align: left; align-items: flex-start; }
  /* align-items: stretch, pas flex-start : sans ça, en colonne, chaque
     enfant garde sa largeur de contenu (shrink-to-fit) au lieu de remplir
     la ligne, et son texte n'a alors nulle part où se replier — il
     déborde du cadre au lieu de passer à la ligne suivante. */
  .bandeau__eyebrow { flex-direction: column; align-items: stretch; gap: 0.3rem; }
  .comparaison-colonnes, .comparaison-ligne { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------- */
/* Téléchargement du fac-similé officiel                                  */
/* --------------------------------------------------------------------- */

/* Traité comme une pièce à conviction plutôt que comme un bouton d'action :
   encadré, sobre, posé sous la mention de source dont il est la preuve. */
.telecharger-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.4rem;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--ligne-vive);
  background: var(--papier-vif);
  color: var(--encre);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.telecharger-pdf:hover {
  border-color: var(--sceau);
  background: var(--sceau-fond);
}
.telecharger-pdf svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--sceau);
}
.telecharger-pdf span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.telecharger-pdf strong {
  font-family: var(--police-lecture);
  font-size: 1rem;
  font-weight: 600;
}
.telecharger-pdf small {
  font-family: var(--police-mecanique);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--encre-fantome);
}

@media print {
  .telecharger-pdf { display: none; }
}