/* =========================================================================
   Empire de la Basse Chesnaie — Système visuel 6A, « Les Trois Encres »
   Feuille de style unique du site. La charte est documentée dans
   /styleguide/index.html, qui se rend depuis ce même fichier.

   01. Encres et jetons
   02. Réinitialisation et base
   03. Typographie
   04. Gabarits et rythme
   05. Barre de navigation, fil d'Ariane, pied de page
   06. Étiquettes, filet d'armes, actions
   07. Champs de formulaire, progression, refus
   08. Rails
   09. Listes de registre et fiches
   10. Tuiles
   11. Images
   12. Blocs particuliers (entrée, panneau d'apparat, rubrique vide…)
   13. Texte courant des pages non refondues
   14. L'administration
   15. Mobile
   16. Impression
   ========================================================================= */


/* =========================================================================
   01. ENCRES ET JETONS
   ========================================================================= */

:root {
  /* Les quatre encres principales */
  --paper: #FCFCFB;
  --ink: #17303F;
  --blue: #0A5D8E;
  --green: #0E6A4C;
  --gold: #D9A53A;

  /* L'or lisible : l'or brut ne porte jamais de texte */
  --gold-text: #9A6F14;

  /* Le vert clair ne sert qu'à la jambe courte du filet d'armes */
  --green-bright: #2E9C74;

  /* Teintes de fond */
  --tint-blue: #E4EDF3;
  --tint-green: #E3EFE8;
  --tint-gold: #F7ECD4;

  /* Teintes au survol : une marche plus sombre */
  --tint-blue-hover: #D5E4EE;
  --tint-green-hover: #D3E6DB;
  --tint-gold-hover: #F1E0BD;

  /* Opacités du texte sur le papier */
  --ink-86: rgba(23, 48, 63, 0.86);
  --ink-80: rgba(23, 48, 63, 0.80);
  --ink-75: rgba(23, 48, 63, 0.75);
  --ink-72: rgba(23, 48, 63, 0.72);
  --ink-68: rgba(23, 48, 63, 0.68);
  --ink-66: rgba(23, 48, 63, 0.66);
  --ink-62: rgba(23, 48, 63, 0.62);
  --ink-60: rgba(23, 48, 63, 0.60);
  --ink-50: rgba(23, 48, 63, 0.50);
  --ink-45: rgba(23, 48, 63, 0.45);
  --ink-40: rgba(23, 48, 63, 0.40);

  /* Filets */
  --hairline: rgba(23, 48, 63, 0.12);
  --hairline-14: rgba(23, 48, 63, 0.14);
  --hairline-16: rgba(23, 48, 63, 0.16);
  --border-field: rgba(23, 48, 63, 0.22);
  --border-search: rgba(23, 48, 63, 0.30);
  --rail-hover: rgba(10, 93, 142, 0.35);

  /* Papier sur encre (pied de page, panneaux) */
  --paper-86: rgba(252, 252, 251, 0.86);
  --paper-78: rgba(252, 252, 251, 0.78);
  --paper-60: rgba(248, 245, 238, 0.60);

  /* Familles */
  --font-title: 'Newsreader', Georgia, 'Times New Roman', serif;
  --inter: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;

  /* Gabarit */
  --frame: 1600px;
  --marge: 120px;

  /* Rythme vertical */
  --rythme-section: 80px;
  --rythme-interne: 40px;
  --rythme-element: 22px;
}


/* =========================================================================
   02. RÉINITIALISATION ET BASE
   ========================================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.7 var(--inter);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

img { max-width: 100%; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--green); }

/* Tout ce qui se clique porte la main : liens, boutons, commandes de formulaire. */
a[href],
button,
summary,
select,
[role="button"],
[role="tab"],
[onclick],
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="image"],
input[type="file"],
input[type="checkbox"],
input[type="radio"],
input[type="checkbox"] + label,
input[type="radio"] + label {
  cursor: pointer;
}

/* Isolé : un navigateur sans :has() invaliderait toute la liste ci-dessus. */
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
  cursor: pointer;
}

/* Une commande hors service ne promet pas de clic. */
a[href][aria-disabled="true"],
button:disabled,
select:disabled,
input:disabled,
input:disabled + label {
  cursor: not-allowed;
}

label:has(input:disabled) {
  cursor: not-allowed;
}

/* Le focus clavier est explicite partout, jamais laissé au navigateur. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Aucun angle arrondi, aucune ombre portée : les blocs sont des aplats francs. */
input, button, select, textarea {
  font: inherit;
  color: inherit;
  border-radius: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--rythme-interne) 0;
}

::selection { background: var(--tint-gold); color: var(--ink); }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  font: 600 12px/1 var(--inter);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 24px;
  z-index: 10;
}
.saut-contenu:focus {
  left: 0;
  color: var(--ink);
}

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


/* =========================================================================
   03. TYPOGRAPHIE
   Newsreader porte tout ce qui se lit d'un coup d'œil.
   Inter Tight porte tout ce qui se lit vraiment.

   Newsreader est une romaine de presse à axe optique : l'axe reste libre
   (font-optical-sizing: auto), c'est lui qui tient les déliés aux grandes
   tailles. Deux réglages, commandés par la seule taille :

     40 px et plus  →  graisse 500, interlettrage −0.02em
     en dessous     →  graisse 400, aucun interlettrage
     italique       →  graisse 400 (signatures d'actes et visas)
   ========================================================================= */

.titre-entree,
.titre-page,
.titre-une,
.titre-section,
.titre-liste,
.titre-encart,
.titre-qualite,
.chiffre {
  font-family: var(--font-title);
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
  letter-spacing: 0;
}

/* Le réglage d'affichage : tout titre de 40 px et plus. C'est le seul
   endroit où la graisse 500 est employée ; en dessous de 40 px, les déliés
   tiennent à 400 et la graisse 500 alourdirait la page. */
.titre-entree,
.titre-page,
.titre-page--large,
.titre-page--tres-large,
.titre-une,
.titre-une--article,
.titre-section--charte,
.titre-section--grand,
.une-album__titre,
.panneau-apparat__titre,
.tuile-chiffre__nombre,
.personne__initiales,
.charte-couverture__titre,
.corps--texte h1,
.prose h1 {
  font-weight: 500;
  letter-spacing: -0.02em;
}

.titre-entree {
  font-size: 106px;
  line-height: 0.92;
  max-width: 820px;
}

.titre-page {
  font-size: 60px;
  line-height: 1.0;
}
.titre-page--large { font-size: 66px; line-height: 0.98; }
.titre-page--tres-large { font-size: 70px; line-height: 0.98; }

.titre-une {
  font-size: 48px;
  line-height: 1.02;
  color: var(--ink);
}
a.titre-une:hover { color: var(--blue); }
.titre-une--article { font-size: 56px; line-height: 1.0; }
.titre-une--acte { font-size: 46px; line-height: 1.04; }

.titre-formulaire {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.05;
  margin: 0;
}

/* Le titre de section, sur son filet bleu de 2 px : le seul filet
   qui sépare, avec le trait de la barre de nav et ceux des listes. */
.titre-section {
  font-size: 30px;
  line-height: 1.15;
}
.bandeau-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 2px solid var(--blue);
  padding-bottom: 12px;
}
.bandeau-section > .titre-section { flex: 1; }

.titre-section--charte { font-size: 44px; line-height: 1; }
/* Le seul titre de section porté à la taille d'affichage : l'état de
   l'Empire, en tête d'accueil, tient la page à lui seul. */
.titre-section--grand { font-size: 44px; line-height: 1; }
.titre-section--appui { font-size: 26px; }
.titre-section--petit { font-size: 24px; }

.titre-liste { font-size: 22px; line-height: 1.25; }
.titre-liste--grand { font-size: 26px; line-height: 1.2; }
.titre-encart { font-size: 25px; line-height: 1.2; }

/* La qualité d'une personne, posée sous son nom : « Empereur de la Basse
   Chesnaie, Roi des Glénan ». Ce n'est pas un chapeau — elle nomme, elle
   ne résume pas — d'où sa graisse pleine et sa mesure libre. */
.titre-qualite {
  font-size: 28px;
  line-height: 1.28;
  color: var(--ink-86);
}

.chapeau {
  font-size: 21px;
  line-height: 1.6;
  color: var(--ink-86);
}
/* Le chapeau de l'accueil : la description de l'État se lit d'un coup
   d'œil, donc en romaine et à pleine encre. */
.chapeau--une {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-size: 26px;
  line-height: 1.42;
  color: var(--ink);
  max-width: 640px;
}
/* L'ouverture et la chute d'un texte suivi : le premier paragraphe et le
   dernier passent en romaine, à la mesure du texte. Ce seul écart de casse
   donne au texte une entrée et une sortie, sans un mot de plus. */
.chapeau--ouverture { font-size: 24px; line-height: 1.5; max-width: none; }
.chapeau--chute { font-size: 22px; line-height: 1.5; max-width: none; }

.texte {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-86);
  max-width: 720px;
}
.texte--serre { font-size: 17px; line-height: 1.7; }
.texte > p, .chapeau > p { margin: 0 0 18px; }
.texte > p:last-child, .chapeau > p:last-child { margin-bottom: 0; }
.texte ul, .texte ol { margin: 0 0 18px; padding-left: 22px; }
.texte a { border-bottom: 1px solid var(--gold); }
.texte a:hover { border-bottom-color: var(--green); }
.texte em { font-style: italic; }
.texte strong { font-weight: 600; }
.texte--secondaire { font-size: 16px; line-height: 1.68; color: var(--ink-72); }
.mention { font-size: 14px; line-height: 1.6; color: var(--ink-60); }
.mention--claire { color: var(--ink-68); }

/* Mesure de lecture : 600 à 720 px. */
.mesure { max-width: 720px; }
.mesure--courte { max-width: 640px; }
/* La colonne de lecture d'une fiche de personne. */
.mesure--fiche { max-width: 620px; }

/* Étiquette capitale : jamais en dessous de 10 px, jamais sans interlettrage. */
.surtitre {
  font: 600 11px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
}
.surtitre--vert { color: var(--green); }
.surtitre--or { color: var(--gold-text); }
.surtitre--muet { color: var(--ink-60); }

/* L'italique de Newsreader est réservée aux signatures d'actes et aux visas :
   toujours à 400, jamais à la graisse d'affichage. */
.signature {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 22px;
  margin-top: 14px;
  border-top: 1px solid var(--hairline-16);
}
.signature__nom {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0;
}
.signature__qualite {
  font-size: 15px;
  font-style: italic;
  color: var(--ink-72);
}
/* Deux signatures côte à côte : le texte est contresigné. Le filet est
   porté par le bloc, non par chacune des signatures. */
.signatures {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  padding-top: 22px;
  margin-top: 14px;
  border-top: 1px solid var(--hairline-16);
}

/* Dans un bloc d'apparat, la signature clôt le bloc : elle n'a pas
   besoin du filet qui la sépare d'un corps d'acte. */
.signature--nue {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

/* Le considérant d'un acte, cité sous son titre : c'est l'endroit où
   l'acte dit ce qu'il fait. */
.considerant {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-80);
  max-width: 620px;
}


/* =========================================================================
   04. GABARITS ET RYTHME
   Les sections sont séparées par du blanc, jamais par un filet.
   ========================================================================= */

.page {
  max-width: var(--frame);
  margin: 0 auto;
  background: var(--paper);
}

.zone {
  padding-left: var(--marge);
  padding-right: var(--marge);
}

/* Corps par défaut. Les pages refondues posent leur propre gabarit. */
.corps { display: block; }
.corps--texte {
  padding: 60px var(--marge) var(--rythme-section);
}
.zone--haute { padding-top: 90px; }
.zone--moyenne { padding-top: 70px; }
.zone--basse { padding-top: 40px; }
.zone--fin { padding-bottom: 100px; }

.pile {
  display: flex;
  flex-direction: column;
  gap: var(--rythme-element);
}
.pile--titre { gap: 24px; }
.pile--bloc { gap: 34px; }
.pile--colonne { gap: 30px; }
.pile--colonne-large { gap: 44px; }
.pile--section { gap: var(--rythme-interne); }
.pile--appui { gap: 46px; }
.pile--large { gap: var(--rythme-section); }
.pile--serree { gap: 14px; }
/* Le rythme de l'accueil : 54 px entre les blocs de la colonne de
   lecture, 18 px entre les éléments d'un même bloc. */
.pile--accueil { gap: 54px; }
.pile--une { gap: 18px; }

.entete-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 70px;
}
.entete-page--haute { padding-top: 90px; }

/* Titre de page et outil (recherche, chiffre) sur la même ligne de base. */
.entete-duo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
  padding-top: 70px;
}
.entete-duo__outil { width: 420px; flex: none; }

/* Toutes les colonnes partent du haut. Les modificateurs ne changent
   que les colonnes et la gouttière. */
.gabarit-accueil,
.gabarit-rubrique,
.gabarit-rubrique--appui-etroit,
.gabarit-acte,
.gabarit-acte--appui-large,
.gabarit-acte--appui-court,
.gabarit-formulaire,
.gabarit-espace,
.gabarit-registre,
.gabarit-fiche,
.gabarit-fiche--charge {
  display: grid;
  align-items: start;
}

/* Gabarit d'accueil : 1.5fr / 440, gouttière 100 */
.gabarit-accueil {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 440px);
  gap: 100px;
}

/* Gabarit de rubrique : 300 / 1fr / 340, gouttière 80 */
.gabarit-rubrique,
.gabarit-rubrique--appui-etroit {
  grid-template-columns: 300px minmax(0, 1fr) 340px;
  gap: 80px;
}
.gabarit-rubrique--appui-etroit { grid-template-columns: 300px minmax(0, 1fr) 320px; }

/* Gabarit de lecture d'acte : 1fr / 380, gouttière 100, texte 720 */
.gabarit-acte,
.gabarit-acte--appui-large,
.gabarit-acte--appui-court {
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 100px;
}
.gabarit-acte--appui-large { grid-template-columns: minmax(0, 1fr) 420px; gap: 90px; }
.gabarit-acte--appui-court { grid-template-columns: minmax(0, 1fr) 360px; gap: 70px; }

/* Gabarit de formulaire : 340 / 1fr, la colonne des étapes à gauche.
   Elle porte le rail, la mention légale et, à la dernière étape, ce qui
   suit l'envoi ; le formulaire prend tout le reste. */
.gabarit-formulaire {
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 80px;
}
.colonne-etapes {
  display: flex;
  flex-direction: column;
  gap: var(--rythme-interne);
}

/* Gabarit de connexion : 1fr / 620, panneau d'apparat à droite */
.gabarit-connexion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 620px;
  align-items: stretch;
}

.gabarit-espace {
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 80px;
}

/* Gabarit des photos : rail d'albums / album ouvert, gouttière 70.
   Le rail est plus étroit que celui des rubriques : il ne porte que des
   noms d'albums et leur compte. */
.gabarit-rubrique--photos {
  display: grid;
  align-items: start;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 70px;
}

/* Gabarit de registre : 1fr / 340, gouttière 80.
   Une table affame la colonne de 560 px du gabarit de rubrique : la page
   qui en porte une abandonne le rail plutôt que de resserrer la table. */
.gabarit-registre {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 80px;
}

/* Gabarit de fiche de personne : portrait / lecture / appui.
   Une fiche d'apparat donne 420 px au portrait et 300 à l'appui ;
   une fiche de charge rend 60 px au portrait pour les donner à l'appui,
   qui porte l'acte de nomination. */
.gabarit-fiche,
.gabarit-fiche--charge {
  grid-template-columns: 420px minmax(0, 1fr) 300px;
  gap: 70px;
}
.gabarit-fiche--charge { grid-template-columns: 360px minmax(0, 1fr) 340px; }

/* Un champ court et un champ libre, côte à côte. */
.grille-champs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; }
.apercu-portrait { width: 180px; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.duo--serre { gap: 18px; }
.duo--large { gap: 40px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 40px; }


/* =========================================================================
   05. BARRE DE NAVIGATION, FIL D'ARIANE, PIED DE PAGE
   ========================================================================= */

.barre-nav {
  padding: 28px var(--marge);
  display: flex;
  align-items: center;
  gap: 16px 40px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hairline-14);
}

.barre-nav__etat {
  font: 500 19px/1.3 var(--font-title);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
a.barre-nav__etat:hover { color: var(--blue); }

/* Les rubriques, alignées à droite ; quand elles ne tiennent pas sur une
   ligne, elles passent à la suivante sous elles-mêmes, non sous le nom. */
.barre-nav__liens {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-left: auto;
}

.barre-nav__lien {
  font: 500 14px/1 var(--inter);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-72);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.barre-nav__lien:hover { color: var(--blue); }
.barre-nav__lien--courant {
  font-weight: 600;
  color: var(--blue);
  border-bottom-color: var(--gold);
}

/* En-tête mobile : nom de l'État sur deux lignes + bouton de menu 46×46 */
.barre-mobile { display: none; }
.barre-mobile__etat {
  font: 500 12px/1.35 var(--font-title);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.barre-mobile__menu {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--blue);
  flex: none;
}
.barre-mobile__menu:hover { background: var(--tint-blue); }
.barre-mobile__barres {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.barre-mobile__barres span {
  height: 2px;
  background: currentColor;
}

/* Le menu mobile est un <details> : aucun JavaScript sur le site public. */
.menu-mobile { display: none; }
.menu-mobile > summary {
  list-style: none;
  cursor: pointer;
}
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile__volet {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--hairline-14);
  background: var(--tint-blue);
}
.menu-mobile__lien {
  font: 500 12px/1 var(--inter);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-80);
  padding: 16px 20px;
  border-top: 1px solid rgba(23, 48, 63, 0.08);
}
.menu-mobile__lien:first-child { border-top: 0; }
.menu-mobile__lien--courant { color: var(--blue); font-weight: 600; }

/* Le fil d'Ariane vient sous la barre, jamais dans le titre. */
.fil {
  padding-top: 70px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-72);
}
.fil--serre { padding-top: 34px; }
.fil--specimen { padding: 20px 40px; }
.fil a { color: var(--blue); }
.fil a:hover { color: var(--green); }
.fil__separateur { color: var(--ink-50); }

.pied {
  background: var(--ink);
  color: var(--paper);
  padding: 44px var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: var(--rythme-section);
}
.pied__copyright {
  font: 500 12px/1.6 var(--inter);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-60);
}
.pied__liens {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.pied__lien {
  font: 500 12px/1 var(--inter);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
}
.pied__lien:hover { color: var(--gold); }
.pied--sans-marge { margin-top: 0; }
/* Le pied présenté en spécimen : plus étroit, empilé. */
.pied--specimen {
  margin-top: 0;
  padding: 30px 26px;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.pied__devise {
  font: 500 12px/1 var(--inter);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}


/* =========================================================================
   06. ÉTIQUETTES, FILET D'ARMES, ACTIONS
   ========================================================================= */

/* Une seule étiquette par titre, placée au-dessus, jamais en fin de ligne.
   Vert = le sujet, bleu = la nature du document, or = la distinction. */
.etiquette {
  display: inline-block;
  align-self: flex-start;
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 9px 14px;
  color: var(--green);
  background: var(--tint-green);
}
.etiquette--bleue { color: var(--blue); background: var(--tint-blue); }
.etiquette--or { color: var(--gold-text); background: var(--tint-gold); }
.etiquette--nue { padding: 0; background: none; }

/* Badge de tâche en attente : blanc sur vert plein. */
.badge {
  display: inline-block;
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--green);
  padding: 6px 9px;
}

/* Jetons de parcours : mêmes couleurs, cliquables. */
.jetons { display: flex; flex-wrap: wrap; gap: 10px; }
.jeton {
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 14px;
  color: var(--blue);
  background: var(--tint-blue);
}
/* Seul un jeton cliquable réagit au survol : dans une fiche ou une ligne
   de registre, le jeton énonce une charge, il ne mène nulle part. */
a.jeton:hover { color: var(--ink); }
.jeton--vert { color: var(--green); background: var(--tint-green); }
.jeton--or { color: var(--gold-text); background: var(--tint-gold); }
/* Le jeton d'une ligne de registre : plusieurs par ligne, donc plus court. */
.jeton--petit { letter-spacing: 0.14em; padding: 7px 10px; }

/* Deux tiers d'or, un tiers de vert. Signe les pages d'apparat.
   Jamais plus d'un par écran. */
.filet-armes {
  display: flex;
  gap: 4px;
  width: 220px;
  height: 4px;
}
.filet-armes span:first-child { flex: 2; background: var(--gold); }
.filet-armes span:last-child { flex: 1; background: var(--green-bright); }
.filet-armes--court { width: 180px; }

/* Actions. Une seule action or par écran.
   Survol : l'or passe à l'encre, le bleu passe au vert. */
.action {
  display: inline-block;
  font: 600 12px/1 var(--inter);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  border: 0;
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear;
}
.action--principale {
  color: var(--ink);
  background: var(--gold);
  padding: 19px 40px;
}
.action--principale:hover { background: var(--ink); color: var(--paper); }

.action--service {
  color: var(--paper);
  background: var(--blue);
  padding: 19px 34px;
}
.action--service:hover { background: var(--green); color: var(--paper); }

.action--validation {
  color: var(--paper);
  background: var(--green);
  padding: 20px 40px;
}
.action--validation:hover { background: var(--ink); color: var(--paper); }

.action--lecture {
  align-self: flex-start;
  color: var(--blue);
  background: none;
  border-bottom: 2px solid var(--gold);
  padding: 0 0 5px;
}
.action--lecture:hover { color: var(--green); }

.action--secondaire {
  color: var(--ink-72);
  background: none;
  padding: 19px 4px;
}
.action--secondaire:hover { color: var(--blue); }

.action--retour {
  color: var(--blue);
  background: none;
  padding: 19px 4px;
}
.action--retour:hover { color: var(--green); }

.action--pagination {
  font-size: 11px;
  color: var(--blue);
  background: var(--tint-blue);
  padding: 13px 20px;
}
.action--pagination:hover { background: var(--tint-blue-hover); color: var(--blue); }
.action--pagination-active {
  color: var(--paper);
  background: var(--blue);
}
.action--pagination-active:hover { background: var(--green); color: var(--paper); }

/* Une rangée d'actions s'aligne sur la ligne de base de ses libellés, non
   sur le milieu de ses boîtes : le rembourrage d'une action or, d'une
   action cerclée et d'un lien souligné n'est pas le même, et centrer les
   boîtes décalait les mots les uns par rapport aux autres. C'est le mot
   que l'œil suit, pas le cadre. */
.actions {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
/* Plusieurs actions se collent en haut — le lien souligné, le bouton de
   la zone dangereuse : leur align-self ne sert qu'à les empêcher de
   s'étirer dans une pile en colonne. Dans une rangée, il les décrochait
   de leurs voisines ; la rangée le reprend à son compte. */
.actions > .action { align-self: auto; }

/* Une rangée qui mêle des commandes à des champs — deux versions à
   comparer, et le bouton qui les compare — se centre : la ligne de base
   d'un <select> ne tombe pas où tombe celle d'un mot. */
.actions--controles { align-items: center; }

/* Lien de texte souligné d'or, dans un paragraphe. */
.lien-or {
  align-self: flex-start;
  color: var(--blue);
  border-bottom: 1px solid var(--gold);
}
.lien-or:hover { color: var(--green); }


/* =========================================================================
   07. CHAMPS DE FORMULAIRE, PROGRESSION, REFUS
   Définis au tour 7, repris au tour 12.
   ========================================================================= */

.champ {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.champ__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.champ__obligatoire {
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
}

.champ__controle,
.champ input[type="text"],
.champ input[type="email"],
.champ input[type="password"],
.champ input[type="tel"],
.champ input[type="url"],
.champ input[type="number"],
.champ input[type="search"],
.champ input[type="date"],
.champ select,
.champ textarea {
  font: 400 16px/1.35 var(--inter);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-field);
  padding: 15px 14px;
  width: 100%;
  box-sizing: border-box;
}
.champ textarea { line-height: 1.6; min-height: 160px; resize: vertical; }
.champ input[type="file"] {
  font: 400 15px/1.4 var(--inter);
  padding: 12px 0;
}

.champ__aide {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-50);
}

/* Une commande posée hors d'un champ — les deux versions à comparer, sur
   la ligne du titre de section — garde le filet du système sans prendre
   toute la largeur. */
.champ__controle--auto { width: auto; }

.champ__unite {
  display: flex;
  align-items: center;
  gap: 10px;
}
.champ__unite .champ__controle,
.champ__unite input { width: 110px; }
.champ__suffixe { font-size: 15px; color: var(--ink-60); }

/* Champ hors de portée : le nom et la taille, portés sur la carte
   d'identité, ne se corrigent pas depuis la fiche du citoyen. Le champ
   garde sa place et sa valeur, mais se lit sur le papier, sans le fond
   blanc qui promettrait une saisie. */
.champ input:disabled,
.champ select:disabled,
.champ textarea:disabled,
.champ-date input:disabled {
  background: transparent;
  border-color: var(--hairline-14);
  color: var(--ink-62);
}
/* Le choix figé garde sa sélection, en encre grise, sans le bleu qui
   inviterait à changer. */
.choix__option:has(input:disabled) {
  border-color: var(--hairline-14);
  color: var(--ink-62);
}
.choix__option:has(input:disabled:checked) {
  background: transparent;
  border-color: var(--ink-40);
  color: var(--ink-62);
}
.choix__option input:disabled:checked ~ .choix__pastille { border-color: var(--ink-40); }
.choix__option input:disabled:checked ~ .choix__pastille::after { background: var(--ink-62); }

/* Champ fautif après un refus : bordure ocre. */
.champ--refuse .champ__controle,
.champ--refuse input,
.champ--refuse select,
.champ--refuse textarea { border-color: var(--gold-text); }

/* Choix : le sélectionné prend la teinte bleue et son filet. */
.choix { display: flex; gap: 12px; flex-wrap: wrap; }
.choix__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid var(--border-field);
  font-size: 16px;
  color: var(--ink-75);
  cursor: pointer;
}
.choix__option:hover { color: var(--blue); }
.choix__pastille {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(23, 48, 63, 0.3);
  display: grid;
  place-items: center;
  flex: none;
}
.choix__option input[type="radio"],
.choix__option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.choix__option input:checked ~ .choix__pastille { border-color: var(--blue); }
.choix__option input:checked ~ .choix__pastille::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}
.choix__option:has(input:checked) {
  border-color: var(--blue);
  background: var(--tint-blue);
  color: var(--blue);
}
.choix__option:focus-within {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Date éclatée : trois boîtes séparées d'une barre oblique. */
.champ-date {
  display: flex;
  align-items: center;
  gap: 8px;
}
.champ-date input {
  width: 74px;
  text-align: center;
  font: 400 16px/1.35 var(--inter);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-field);
  padding: 15px 8px;
}
.champ-date input:last-of-type { width: 104px; }
.champ-date__separateur { color: var(--ink-40); }

/* Recherche : la saisie est collée à son bouton. */
.recherche {
  display: flex;
  align-items: stretch;
}
.recherche__saisie {
  flex: 1;
  min-width: 0;
  font: 400 16px/1.35 var(--inter);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border-search);
  border-right: none;
  padding: 17px 16px;
}
.recherche__bouton {
  font: 600 11px/1 var(--inter);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--blue);
  border: 0;
  padding: 17px 26px;
  cursor: pointer;
}
.recherche__bouton:hover { background: var(--green); }
.recherche--or .recherche__bouton { color: var(--ink); background: var(--gold); }
.recherche--or .recherche__bouton:hover { background: var(--ink); color: var(--paper); }

/* Progression : franchi en vert, en cours en or, à venir en gris. */
.progression {
  display: flex;
  gap: 4px;
  height: 4px;
}
.progression span { flex: 1; background: var(--hairline-14); }
.progression--specimen { width: 320px; }
.progression .progression--fait { background: var(--green); }
.progression .progression--courant { background: var(--gold); }

/* Message de refus : teinte or, filet gauche ocre. */
.refus {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--tint-gold);
  border-left: 3px solid var(--gold-text);
  padding: 20px 22px;
}
.refus__label {
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  padding-top: 3px;
  flex: none;
}
.refus__texte { font-size: 16px; line-height: 1.6; }

/* Engagement sur l'honneur */
.engagement {
  background: var(--tint-gold);
  padding: 26px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.6;
  cursor: pointer;
}
.engagement__case {
  width: 22px;
  height: 22px;
  border: 1px solid var(--gold-text);
  background: var(--paper);
  display: grid;
  place-items: center;
  font: 600 12px/1 var(--inter);
  flex: none;
  margin-top: 2px;
  color: transparent;
}
.engagement input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.engagement input:checked ~ .engagement__case {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--tint-gold);
}
.engagement:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }


/* =========================================================================
   08. RAILS
   ========================================================================= */

/* Rail de rubrique : le rail porte la rubrique et la page courante. */
.rail {
  display: flex;
  flex-direction: column;
  background: var(--tint-blue);
  padding: 24px 0;
}

/* Un rail suit la lecture : posé en colonne d'un gabarit, il s'arrête en
   haut de l'écran quand la page défile, et le sommaire reste sous la
   main jusqu'à la fin de la rubrique, où il repart avec la page. Plus
   haut que l'écran, il s'arrête par le bas plutôt que par le haut, pour
   que sa dernière entrée reste atteignable : include/js/rail.js pose
   alors la hauteur d'arrêt. Empilé sous le texte, sur un écran étroit,
   il redevient une simple fin de page. */
[class*="gabarit-"] > .rail,
[class*="gabarit-"] > .rail-etapes,
[class*="gabarit-"] > .rail-albums {
  position: sticky;
  top: 24px;
}
.rail__titre {
  font: 600 11px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 0 20px 16px;
}
.rail__intertitre {
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-50);
  padding: 18px 20px 8px;
}

/* Un groupe repliable du rail : un <details>, sans JavaScript. L'intertitre
   en est la commande, et porte un chevron qui dit son état. */
.rail__groupe { display: block; }
.rail__groupe > .rail__lien { display: block; }
.rail__groupe > summary.rail__intertitre {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rail__groupe > summary.rail__intertitre::-webkit-details-marker { display: none; }
.rail__groupe > summary.rail__intertitre::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex: none;
}
.rail__groupe[open] > summary.rail__intertitre::after { transform: rotate(45deg); }
.rail__groupe > summary.rail__intertitre:hover,
.rail__groupe[open] > summary.rail__intertitre { color: var(--blue); }
.rail__lien {
  font-size: 15px;
  line-height: 1.4;
  padding: 11px 20px;
  color: rgba(23, 48, 63, 0.85);
  border-left: 3px solid transparent;
}
.rail__lien:hover {
  color: var(--blue);
  border-left-color: var(--rail-hover);
}
.rail__lien--courant {
  color: var(--blue);
  font-weight: 600;
  border-left-color: var(--gold);
}
.rail__lien--sous { padding-left: 34px; font-size: 14px; }
/* Second retrait : les onze titres de la Constitution, dans la page. */
.rail__lien--ancre { padding-left: 48px; font-size: 14px; }
.rail__lien--large { font-size: 16px; padding: 13px 20px; }

/* Rail d'étapes : reprend le code de la barre de progression. */
.rail-etapes {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hairline);
}
.rail-etapes__entete {
  padding: 20px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--hairline);
}
.rail-etapes__compte {
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
}
.rail-etapes__etape {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-left: 3px solid transparent;
  color: var(--ink);
}
.rail-etapes__pastille {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 12px/1 var(--inter);
  flex: none;
  border: 1px solid rgba(23, 48, 63, 0.25);
  color: var(--ink-45);
}
.rail-etapes__rang {
  font: 600 9px/1 var(--inter);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.rail-etapes__nom {
  font-family: var(--font-title);
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink-50);
}
.rail-etapes__libelle {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rail-etapes__etape--faite { border-left-color: var(--green); }
.rail-etapes__etape--faite:hover { background: var(--tint-green); }
.rail-etapes__etape--faite .rail-etapes__pastille {
  background: var(--green);
  border-color: var(--green);
  color: var(--paper);
}
.rail-etapes__etape--faite .rail-etapes__rang { color: var(--ink-50); }
.rail-etapes__etape--faite .rail-etapes__nom { color: var(--ink); }

.rail-etapes__etape--courante {
  background: var(--tint-blue);
  border-left-color: var(--gold);
}
.rail-etapes__etape--courante .rail-etapes__pastille {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--paper);
}
.rail-etapes__etape--courante .rail-etapes__rang { color: var(--blue); }
.rail-etapes__etape--courante .rail-etapes__nom { color: var(--blue); }

/* Étapes numérotées d'un mode d'emploi */
.marches { display: flex; flex-direction: column; gap: 16px; }
.marche { display: flex; gap: 14px; align-items: flex-start; }
.marche__rang {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tint-blue);
  color: var(--blue);
  display: grid;
  place-items: center;
  font: 600 11px/1 var(--inter);
  flex: none;
  margin-top: 2px;
}
.marche--verte .marche__rang { background: var(--tint-green); color: var(--green); }
.marche__texte { font-size: 15px; line-height: 1.6; }


/* =========================================================================
   09. LISTES DE REGISTRE ET FICHES
   ========================================================================= */

.registre { display: flex; flex-direction: column; }

.registre__entete {
  display: grid;
  grid-template-columns: 140px 170px minmax(0, 1fr);
  gap: 24px;
  padding: 13px 0;
  border-bottom: 2px solid var(--blue);
  font: 600 11px/1 var(--inter);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

.registre__ligne {
  display: grid;
  grid-template-columns: 140px 170px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}
/* Une ligne sans fiche à ouvrir ne s'allume pas : le registre porte aussi
   des citoyens qui ne tiennent aucune charge. */
a.registre__ligne:hover { color: var(--blue); }
a.registre__ligne:hover .registre__cle,
a.registre__ligne:hover .registre__objet { color: var(--blue); }

.registre__cle {
  font-family: var(--font-title);
  font-size: 21px;
  line-height: 1.2;
}
.registre__nature {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}
.registre__nature--ministeriel { color: var(--gold-text); }
.registre__nature--bleue { color: var(--blue); }
.registre__nature--muet { color: var(--ink-60); }
.registre__objet { font-size: 16px; line-height: 1.5; }

/* Registre à deux colonnes (dignité / titulaires) */
.registre--duo .registre__entete,
.registre--duo .registre__ligne {
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 20px;
}
.registre--duo .registre__entete > :last-child,
.registre--duo .registre__ligne > :last-child { text-align: right; }
.registre--duo .registre__ligne { padding: 15px 0; }

/* Registre des citoyens : le nom en Newsreader, puis ses charges en
   jetons, chacun à l'encre de l'entité qui la confère. */
.registre--citoyens .registre__entete,
.registre--citoyens .registre__ligne {
  grid-template-columns: 300px minmax(0, 1fr);
}
.registre--citoyens .registre__ligne { padding: 18px 0; }

/* Table des charges : le titulaire, sa charge, l'année de sa prise de
   fonction. Les deux premières colonnes sont fractionnaires — une colonne
   de nom fixe affamerait « Secrétariat d'État aux Affaires Étrangères ». */
.registre--charges .registre__entete,
.registre--charges .registre__ligne {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) 84px;
}
/* L'en-tête ne paraît qu'une fois, en tête du premier rang ; les rangs
   suivants ouvrent sur un filet, sans répéter les intitulés. */
.registre__entete--sourd { border-bottom-color: rgba(10, 93, 142, 0.25); }
.registre--sans-entete .registre__ligne:first-child {
  border-top: 1px solid var(--hairline);
}
.registre__depuis { font-size: 14px; color: var(--ink-60); }

/* L'index alphabétique du registre. Il ne porte que les initiales que le
   registre porte vraiment, et tient le haut de l'écran pendant qu'on le
   parcourt : sur trois cents noms, l'index est le seul repère. */
.alphabet {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 16px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline-14);
}
.alphabet__lettre {
  min-width: 34px;
  padding: 10px 6px;
  text-align: center;
  font: 600 12px/1 var(--inter);
  letter-spacing: 0.1em;
  color: var(--blue);
  background: var(--tint-blue);
}
.alphabet__lettre:hover { background: var(--tint-blue-hover); color: var(--ink); }

/* L'initiale, en tête de sa tranche de registre. Le retrait au-dessus de
   la ligne d'ancrage laisse passer l'index, qui la couvrirait sinon. */
.registre__lettre {
  padding: 30px 0 10px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-title);
  font-size: 26px;
  line-height: 1.2;
  color: var(--blue);
  scroll-margin-top: 76px;
}
.registre__lettre:first-child { padding-top: 4px; }

/* Inventaire numéroté : le chiffre romain à gauche, la pièce à droite.
   Une liste à puces ne compte pas ; un inventaire, si. */
.registre--inventaire .registre__entete,
.registre--inventaire .registre__ligne {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 20px;
}
.registre--inventaire .registre__cle { color: var(--blue); }
.registre--inventaire .registre__objet { font-size: 17px; line-height: 1.6; }

/* Fiche : deux colonnes clé / valeur, même rythme de filets. */
.fiche { display: flex; flex-direction: column; }
.fiche__ligne {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--hairline-14);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.fiche__ligne:last-child { border-bottom: 1px solid var(--hairline-14); }
a.fiche__ligne:hover { color: var(--blue); }
.fiche__cle { color: var(--ink-66); }
.fiche__valeur { text-align: right; }
.fiche__valeur--vert { color: var(--green); }
.fiche__valeur--or { color: var(--gold-text); }

/* L'état de l'Empire : six relevés datés, l'intitulé à gauche, la valeur
   à droite, sur deux colonnes. Chaque valeur vient de sa source ; une
   source muette laisse un tiret plutôt qu'une valeur périmée. */
.bilan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 40px;
}
.bilan__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline);
}
.bilan__cle {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.bilan__valeur {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-size: 21px;
  line-height: 1.2;
  text-align: right;
}
.bilan__valeur--bleue { color: var(--blue); }
.bilan__valeur--absente { color: var(--ink-45); }

/* Récapitulatif : étiquette capitale à gauche, valeur à droite. */
.recap__ligne {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid rgba(23, 48, 63, 0.1);
}
.recap__cle {
  font: 600 10px/1.4 var(--inter);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  width: 190px;
  flex: none;
}
.recap__valeur { font-size: 16px; line-height: 1.5; }

/* Liste d'entrées : étiquette au-dessus, titre en Newsreader. */
.liste-entrees { display: flex; flex-direction: column; }
.entree-liste {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline-14);
  color: var(--ink);
}
.entree-liste:last-child { border-bottom: 1px solid var(--hairline-14); }
.entree-liste:hover { color: var(--blue); }
.entree-liste__qualite {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.entree-liste__nature {
  font: 600 9px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
}
.entree-liste__nature--or { color: var(--gold-text); }
.entree-liste__nature--bleue { color: var(--blue); }
.entree-liste__date { font-size: 13px; color: var(--ink-68); }
.entree-liste__titre {
  font-family: var(--font-title);
  font-size: 22px;
  line-height: 1.25;
}

/* Fiche de personne : portrait 4/5 en encre grise, nom, fief, grade. */
.grille-personnes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 34px;
}
.personne {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ink);
}
a.personne:hover { color: var(--blue); }
.personne__identite {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.personne__nom {
  font-family: var(--font-title);
  font-size: 24px;
  line-height: 1.15;
}
.personne__fief {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-80);
}
.personne__grade {
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--tint-green);
  padding: 7px 11px;
  margin-top: 4px;
}
/* La bande de la famille impériale : trois colonnes serrées, le nom puis
   la qualité en capitales vertes. Trois, non cinq : à cinq, les portraits
   tombent à 94 px et les qualités se coupent. */
.grille-personnes--serree { gap: 26px 22px; }
.personne--serree { gap: 10px; }
.personne--serree .personne__nom { font-size: 21px; line-height: 1.2; }
.personne__role {
  font: 400 12px/1.2 var(--inter);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}

/* Sans portrait : les initiales, en Newsreader, sur teinte bleue. */
.personne__initiales {
  aspect-ratio: 4 / 5;
  background: var(--tint-blue);
  display: grid;
  place-items: center;
  font-family: var(--font-title);
  font-size: 46px;
  color: rgba(10, 93, 142, 0.45);
}

/* Précédent / suivant en bas d'un acte */
.voisins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-top: 26px;
}
.voisin {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 0;
  border-top: 1px solid var(--hairline-16);
  color: var(--ink);
}
.voisin:hover { color: var(--blue); }
.voisin--suivant { text-align: right; }
.voisin__sens {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.voisin__titre {
  font-family: var(--font-title);
  font-size: 21px;
  line-height: 1.25;
}


/* =========================================================================
   10. TUILES
   ========================================================================= */

/* Tuile de chiffre : le chiffre en Newsreader, dans l'encre de la teinte. */
.tuile-chiffre {
  background: var(--tint-blue);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tuile-chiffre__nombre {
  font-family: var(--font-title);
  font-size: 46px;
  line-height: 1;
  color: var(--blue);
}
.tuile-chiffre__label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-68);
}
.tuile-chiffre--verte { background: var(--tint-green); }
.tuile-chiffre--verte .tuile-chiffre__nombre { color: var(--green); }
.tuile-chiffre--or { background: var(--tint-gold); }
.tuile-chiffre--or .tuile-chiffre__nombre { color: var(--gold-text); }
.tuile-chiffre--petite { padding: 22px 18px; }
.tuile-chiffre--petite .tuile-chiffre__nombre { font-size: 38px; font-weight: 400; letter-spacing: 0; }
.tuile-chiffre--petite .tuile-chiffre__label { font-size: 11px; }

/* Tuile de rubrique : une étiquette, un titre, une ligne d'explication.
   Le survol descend la teinte d'une marche. */
.tuile {
  background: var(--tint-blue);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink);
}
a.tuile:hover { background: var(--tint-blue-hover); color: var(--ink); }
.tuile__label {
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
}
.tuile__titre {
  font-family: var(--font-title);
  font-size: 25px;
  line-height: 1.2;
}
.tuile__titre--grand { font-size: 34px; line-height: 1.05; }
.tuile__ligne {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(23, 48, 63, 0.78);
}
.tuile__entete {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Le nom du registre et son volume, sur la même ligne de base, aux deux
   bouts de la tuile. Le volume prend l'encre de la teinte. */
.tuile__entete--volume {
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.tuile__volume {
  font-family: var(--font-title);
  font-size: 25px;
  line-height: 1.2;
  color: var(--blue);
  flex: none;
}
.tuile--verte .tuile__volume { color: var(--green); }
.tuile--or .tuile__volume { color: var(--gold-text); }

.tuile--verte { background: var(--tint-green); }
a.tuile--verte:hover { background: var(--tint-green-hover); }
.tuile--verte .tuile__label { color: var(--green); }

.tuile--or { background: var(--tint-gold); }
a.tuile--or:hover { background: var(--tint-gold-hover); }
.tuile--or .tuile__label { color: var(--gold-text); }

/* Tuile d'appui : la même tuile, resserrée pour une colonne latérale.
   Elle porte un acte — sa mention datée au-dessus, sa date au-dessous. */
.tuile--appui { padding: 20px; gap: 7px; }
.tuile__titre--appui { font-size: 22px; line-height: 1.2; }
.tuile__titre--petit { font-size: 20px; line-height: 1.25; }
.tuile__mention {
  font: 400 13px/1.3 var(--inter);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}
.tuile__ligne--date { font-size: 14px; line-height: 1.5; color: var(--ink-72); }

/* Tuile à vignette : une image de 150 px et son texte, sur toute la
   largeur de sa rangée. Réservée à la rubrique qui a une image à montrer. */
.tuile--vignette {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 22px 24px;
  grid-column: 1 / -1;
}
.tuile__corps { display: flex; flex-direction: column; gap: 8px; }

/* Puces de millésime : quatre colonnes, l'année et son compte. */
.millesimes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.millesime {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 12px;
  background: var(--tint-blue);
  color: var(--ink);
}
.millesime:hover { background: var(--tint-blue-hover); color: var(--ink); }
.millesime__an {
  font-family: var(--font-title);
  font-size: 20px;
  line-height: 1;
}
.millesime__compte {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-62);
}
.millesime--courant { background: var(--blue); color: var(--paper); }
.millesime--courant:hover { background: var(--blue); color: var(--paper); }
.millesime--courant .millesime__compte { color: rgba(252, 252, 251, 0.8); }
/* Une année exceptionnellement fournie se signale à l'or. */
.millesime--dense { background: var(--tint-gold); }
.millesime--dense:hover { background: var(--tint-gold-hover); }
.millesime--dense .millesime__compte { color: var(--gold-text); }


/* =========================================================================
   11. IMAGES
   Toute image de page court en niveaux de gris, fondue au papier.
   ========================================================================= */

.image-encre {
  display: block;
  width: 100%;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.06);
}
/* La même image, gardée en couleur : les insignes et rubans d'un ordre se
   reconnaissent à leurs teintes. */
.image-couleur {
  display: block;
  width: 100%;
}

/* La carte de l'Empire est un dessin en couleurs, avec une légende : on
   la pose sur le papier sans la passer à l'encre grise. */
.carte {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.cadre {
  display: block;
  overflow: hidden;
  background: var(--tint-blue);
}
.cadre > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cadre--4-3 { aspect-ratio: 4 / 3; }
.cadre--4-5 { aspect-ratio: 4 / 5; }
.cadre--3-2 { aspect-ratio: 3 / 2; }
.cadre--1-1 { aspect-ratio: 1 / 1; }

/* Les planches de grades sont montrées à leur taille de numérisation :
   579 et 710 px. Étirées à la colonne de 940, elles seraient agrandies
   1,62 et 1,32 fois et les aigles se brouilleraient, inégalement. Le vrai
   correctif est un scan plus large ; ceci n'en est que le repli honnête.
   Elles restent en couleur : la règle de l'encre grise excepte les armes
   et les insignes, qui relèvent de l'héraldique. */
.planche { display: block; max-width: 100%; height: auto; }
.planche--i { width: 579px; }
.planche--ii { width: 710px; }

/* Le drapeau : l'autre exception, gardé en couleur et en SVG. */
.drapeau {
  display: block;
  width: 100%;
  height: auto;
}

/* L'exception : la photo ouverte est la seule image en couleur du site. */
.monture {
  background: var(--ink);
  display: grid;
  place-items: center;
  padding: 34px;
}
.monture > img {
  display: block;
  max-width: 100%;
  max-height: 640px;
  width: auto;
}

/* Un document PDF présenté dans la page, monté sur l'encre. */
.monture-document {
  background: var(--ink);
  padding: 24px;
  display: block;
}
.monture-document > embed,
.monture-document > object,
.monture-document > iframe {
  display: block;
  width: 100%;
  height: 840px;
  border: 0;
}

/* Armoiries et insignes : conservés en couleur, centrés sur teinte. */
.insigne {
  background: var(--tint-blue);
  display: grid;
  place-items: center;
  padding: 26px;
}
.insigne > img { display: block; max-width: 60%; }
.insigne--verte { background: var(--tint-green); }
.insigne--or { background: var(--tint-gold); }
.insigne > img[src$="-chevalier.png"],
.insigne > img[src$="-officier.png"],
.insigne > img[src$="-grand-commandant.png"] { max-width: 45%; }
/* Le F d'argent est livré en 480×480 (@2x) et se rend en 240×240. */
.insigne > img[src$="F_argent.png"] { width: 240px; height: auto; }

/* Les insignes d'un ordre à plusieurs grades, côte à côte, chacun nommé. */
.insignes-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.insignes-trio__insigne {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}
.insignes-trio__insigne > .insigne { width: 100%; aspect-ratio: 1; min-height: 0; overflow: hidden; }
.insignes-trio__insigne > .insigne > img { max-width: 60%; max-height: 72%; object-fit: contain; }
/* Deux pièces côte à côte : plus larges, elles prennent la place. */
.insignes-trio--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.insignes-trio--duo > .insigne { aspect-ratio: 1; min-height: 0; overflow: hidden; padding: 18px; }
.insignes-trio--duo > .insigne > img { max-width: 70%; max-height: 76%; object-fit: contain; }
.insignes-trio--duo .insignes-trio__insigne > .insigne { aspect-ratio: 4 / 3; }
.insignes-trio--duo .insignes-trio__insigne > .insigne > img { max-width: 78%; max-height: 80%; }

/* Pellicule : huit vues, la vue active garde sa couleur et prend l'or. */
.pellicule {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}
.pellicule__vue {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.pellicule__vue > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.06);
}
.pellicule__vue--active {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}
.pellicule__vue--active > img {
  mix-blend-mode: normal;
  filter: none;
}

/* Situation dans le monde : le globe et son crédit. */
.globe {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.globe > img { display: block; width: 100%; }

/* Un titre en Newsreader rendu cliquable. */
.lien-titre { font-family: var(--font-title); color: var(--ink); }
.lien-titre:hover { color: var(--blue); }

/* Une courte suite de liens serrés dans une tuile. */
.liens-serres {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  font-size: 14px;
}

/* Un bloc entier rendu cliquable : le survol passe le texte au bleu. */
.lien-bloc { color: var(--ink); display: flex; }
.lien-bloc:hover { color: var(--blue); }

.legende {
  font-family: var(--font-title);
  font-size: 25px;
  line-height: 1.35;
  max-width: 720px;
}
.legende--vide,
.empty_legend { color: var(--ink-45); }

/* La légende et le rang du cliché, sur la même ligne de base. */
.legende-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 30px;
}
.legende-ligne .surtitre { white-space: nowrap; }

/* La barre de lecture d'un cliché : rang à gauche, précédent/suivant à droite. */
.barre-cliche {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.actions--pagination { gap: 8px; }


/* =========================================================================
   12. BLOCS PARTICULIERS
   ========================================================================= */

/* Page d'entrée : pleine page bleue, un seul bouton or. */
.entree {
  min-height: 100vh;
  background: var(--blue);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 90px var(--marge);
}
.entree__armes {
  position: absolute;
  right: 130px;
  top: 50%;
  transform: translateY(-50%);
  width: 470px;
  max-width: 40vw;
  opacity: 0.92;
}
.entree__ligne {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font: 500 11px/1.6 var(--inter);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper);
}
.entree__corps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 820px;
}
/* L'italique d'un titre d'apparat suit la graisse de son titre : à 106 px,
   une italique à 400 rendrait exactement les déliés que ce changement corrige. */
.entree__corps .titre-entree em {
  font-style: italic;
  font-weight: inherit;
  color: var(--gold);
}
.entree__texte {
  font-size: 19px;
  line-height: 1.68;
  max-width: 480px;
  color: rgba(248, 245, 238, 0.82);
}
.entree .action--principale { align-self: flex-start; padding: 19px 44px; letter-spacing: 0.18em; }
.entree .action--principale:hover { background: var(--paper); color: var(--ink); }

/* La colonne de saisie, face au panneau d'apparat. */
.panneau-connexion {
  padding-top: 90px;
  padding-bottom: 100px;
  max-width: 620px;
}
.champ--etroit { max-width: 420px; }

/* Panneau d'apparat : le bleu, les armes, le filet. */
.panneau-apparat {
  background: var(--blue);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 70px 70px 60px;
}
.panneau-apparat__armes {
  position: absolute;
  right: -110px;
  top: 50%;
  transform: translateY(-50%);
  width: 460px;
  opacity: 0.4;
}
.panneau-apparat__devise {
  position: relative;
  font: 500 11px/1 var(--inter);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-78);
}
.panneau-apparat__corps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 380px;
}
.panneau-apparat__titre {
  font-family: var(--font-title);
  font-size: 40px;
  line-height: 1.04;
}
.panneau-apparat__texte {
  font-size: 16px;
  line-height: 1.7;
  color: var(--paper-86);
}

/* Encart vert : l'appel à la nationalité. */
.encart-vert {
  background: var(--green);
  color: var(--paper);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.encart-vert__titre {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
}
.encart-vert__texte {
  font-size: 16px;
  line-height: 1.62;
  color: var(--paper-86);
}
.encart-vert .action--principale {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 15px 28px;
  margin-top: 4px;
}
.encart-vert .action--principale:hover { background: var(--paper); color: var(--ink); }

/* Rubrique vide : le vide s'énonce en Newsreader, suivi de la voie à suivre. */
.rubrique-vide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 44px 40px;
  background: var(--tint-blue);
  max-width: 680px;
}
.rubrique-vide__enonce {
  font-family: var(--font-title);
  font-size: 34px;
  line-height: 1.15;
}
.rubrique-vide__suite {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(23, 48, 63, 0.78);
}
.rubrique-vide--verte { background: var(--tint-green); }
.rubrique-vide--or { background: var(--tint-gold); }

/* Visas d'un acte : teinte bleue, italique. */
.visas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 28px;
  background: var(--tint-blue);
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(23, 48, 63, 0.9);
}

/* Articles numérotés d'un acte */
.acte { display: flex; flex-direction: column; gap: 26px; max-width: 720px; }
.acte__article { display: flex; flex-direction: column; gap: 8px; }
.acte__numero {
  font: 600 11px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
}
.acte__texte { font-size: 18px; line-height: 1.72; }
.acte__texte p { margin: 0 0 16px; }
.acte__texte p:last-child { margin-bottom: 0; }
.acte__texte ul, .acte__texte ol { margin: 0 0 16px; padding-left: 22px; }
.acte__texte li { margin-bottom: 6px; }
.acte__texte em, .acte__texte i { font-style: italic; }
.acte__texte a { border-bottom: 1px solid var(--gold); }
.acte__qualite {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.acte__reference { font-size: 14px; color: var(--ink-72); }

/* Corps d'article rédactionnel */
.article-corps { font-size: 17px; line-height: 1.75; }
.article-corps p { margin: 0 0 20px; }
.article-corps p:last-child { margin-bottom: 0; }
.article-corps h2 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  margin: 34px 0 14px;
}
.article-corps h3 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  margin: 28px 0 12px;
}
.article-corps ul, .article-corps ol { margin: 0 0 20px; padding-left: 22px; }
.article-corps li { margin-bottom: 8px; }
.article-corps img { display: block; height: auto; margin: 26px 0; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.06); }
.article-corps a { border-bottom: 1px solid var(--gold); }
.article-corps a:hover { border-bottom-color: var(--green); }
.article-corps em, .article-corps i { font-style: italic; }
.article-corps strong, .article-corps b { font-weight: 600; }
.article-corps blockquote {
  margin: 26px 0;
  padding: 20px 24px;
  background: var(--tint-blue);
  font-size: 17px;
  line-height: 1.68;
}

/* Album à la une */
.une-album {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
  color: var(--ink);
}
.une-album:hover { color: var(--blue); }
.une-album__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.une-album__titre {
  font-family: var(--font-title);
  font-size: 52px;
  line-height: 1.0;
}
.une-album__pied {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-62);
}
.une-album__pied span:last-child { color: var(--blue); }

.compte {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

/* L'article à la une de l'accueil : l'image à gauche, le texte à
   droite, le tout cliquable d'un bloc. */
.une-article {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  color: var(--ink);
}
.une-article:hover { color: var(--blue); }
/* Un article sans illustration garde son texte sur toute la largeur. */
.une-article--sans-image { grid-template-columns: minmax(0, 1fr); }
.une-article__corps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.une-article__nature {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}
.une-article__titre {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-size: 30px;
  line-height: 1.2;
}
.une-article__chapeau {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(23, 48, 63, 0.78);
}

/* L'acte de constitution du 2 décembre 1996, en pied d'accueil : le bloc
   d'apparat de la page, et le seul endroit où paraît le filet d'armes. */
.acte-fondateur {
  background: var(--tint-blue);
  padding: 50px 48px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.acte-fondateur__enonce {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.acte-fondateur__situation {
  font-size: 16px;
  line-height: 1.7;
  max-width: 560px;
  color: var(--ink-80);
}
.acte-fondateur__pied {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

/* Album : couverture + titre + compte */
.album {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ink);
}
.album:hover { color: var(--blue); }
.album__titre {
  font-family: var(--font-title);
  font-size: 26px;
  line-height: 1.2;
}


/* =========================================================================
   13. TEXTE COURANT DES PAGES NON REFONDUES
   Les pages hors des tours 6 à 16 (profil, écrire…) héritent de la
   chrome et de ce style de texte.
   ========================================================================= */

.corps--texte h1,
.prose h1 {
  font-family: var(--font-title);
  /* La graisse vient de la règle d'affichage (60 px ≥ 40 px) : ne pas la
     redéclarer ici, elle repasserait à 400. */
  font-size: 60px;
  line-height: 1.0;
  margin: 0 0 var(--rythme-interne);
}
.corps--texte h2,
.prose h2 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  margin: 50px 0 18px;
  border-bottom: 2px solid var(--blue);
  padding-bottom: 12px;
}
.corps--texte h3,
.prose h3 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  margin: 34px 0 12px;
}
.corps--texte h4,
.prose h4 {
  font: 600 11px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 28px 0 10px;
}
.corps--texte p,
.prose p {
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-86);
  max-width: 720px;
  margin: 0 0 18px;
}
.corps--texte ul,
.corps--texte ol,
.prose ul,
.prose ol {
  max-width: 720px;
  margin: 0 0 18px;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.7;
}
.corps--texte li,
.prose li { margin-bottom: 8px; }
.corps--texte a,
.prose a { border-bottom: 1px solid var(--gold); }
.corps--texte a:hover,
.prose a:hover { border-bottom-color: var(--green); }
.corps--texte em, .prose em { font-style: italic; }
.corps--texte strong, .prose strong { font-weight: 600; }
.corps--texte img, .prose img { height: auto; }
.corps--texte small, .prose small { font-size: 14px; color: var(--ink-60); }

.corps--texte table,
.prose table,
table.search_results {
  border-collapse: collapse;
  width: 100%;
  max-width: 900px;
  margin: 0 0 24px;
  font-size: 16px;
}
.corps--texte th,
.prose th,
table.search_results th {
  text-align: left;
  font: 600 11px/1 var(--inter);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
  padding: 13px 20px 13px 0;
}
.corps--texte td,
.prose td,
table.search_results td {
  border-bottom: 1px solid var(--hairline);
  padding: 15px 20px 15px 0;
  vertical-align: baseline;
}

/* Le vieux balisage des listes de citoyens, repris dans le système. */
ul.citoyens_list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  padding: 0;
  margin: 0 0 var(--rythme-interne);
  max-width: none;
}
ul.citoyens_list li {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-80);
}
ul.citoyens_list li strong {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
}
ul.citoyens_list li em {
  font-style: normal;
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
}
ul.citoyens_list li br { display: none; }
ul.citoyens_list .list_img { display: block; }
ul.citoyens_list .list_img img,
ul.citoyens_list img.photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--tint-blue);
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.06);
}
ul.citoyens_list li p { margin: 0; font-size: 15px; }

.alerte {
  background: var(--tint-gold);
  border-left: 3px solid var(--gold-text);
  padding: 18px 22px;
  font-size: 16px;
  line-height: 1.6;
  max-width: 720px;
}

.centre, .alcenter, .text-center, #centre { text-align: center; }
.text-right, .alright { text-align: right; }

.buttons, .boutons { margin: 26px 0 0; }
.buttons input[type="submit"],
.boutons input[type="submit"],
.corps--texte input[type="submit"],
.prose input[type="submit"] {
  font: 600 12px/1 var(--inter);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border: 0;
  padding: 19px 40px;
  cursor: pointer;
}
.buttons input[type="submit"]:hover,
.boutons input[type="submit"]:hover,
.corps--texte input[type="submit"]:hover,
.prose input[type="submit"]:hover { background: var(--ink); color: var(--paper); }

.corps--texte input[type="text"],
.corps--texte input[type="email"],
.corps--texte input[type="password"],
.corps--texte input[type="search"],
.corps--texte select,
.corps--texte textarea,
.prose input[type="text"],
.prose input[type="email"],
.prose input[type="password"],
.prose input[type="search"],
.prose select,
.prose textarea {
  font: 400 16px/1.35 var(--inter);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-field);
  padding: 13px 12px;
}
.corps--texte label,
.prose label {
  font: 600 10px/1.6 var(--inter);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 8px;
}


/* =========================================================================
   14. L'ADMINISTRATION
   L'administration n'est pas une autre peau : c'est le même système, aux
   mêmes encres, avec un composant de plus — la barre d'administration.
   Tout le reste (registres, champs, jetons, tuiles, zones) est repris
   des sections précédentes, modifié quand la table l'exige.
   ========================================================================= */

/* La barre est sur l'encre, non sur le papier : c'est le seul signe qui
   dit, sans un mot, qu'on n'est plus sur le site mais derrière. */
.barre-admin {
  background: var(--ink);
  color: var(--paper);
  padding: 0 var(--marge);
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.barre-admin__etat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  margin-right: 40px;
}
.barre-admin__nom {
  font: 500 14px/1 var(--font-title);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
/* L'habilitation se lit en toutes lettres : elle commande ce que la
   barre porte, elle ne peut pas rester implicite. */
.barre-admin__niveau {
  font: 600 9px/1 var(--inter);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 6px 8px;
}

.barre-admin__lien {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 16px;
  font: 500 12px/1 var(--inter);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-60);
  border-bottom: 3px solid transparent;
}
.barre-admin__lien:hover {
  color: var(--paper);
  border-bottom-color: rgba(217, 165, 58, 0.45);
}
.barre-admin__lien--courant,
.barre-admin__lien--courant:hover {
  font-weight: 600;
  color: var(--paper);
  border-bottom-color: var(--gold);
}
/* Le compte de tâches en attente, porté par l'onglet qui les traite. */
.barre-admin__badge {
  font: 600 9px/1 var(--inter);
  letter-spacing: 0;
  color: var(--paper);
  background: var(--green);
  padding: 5px 7px;
}

.barre-admin__droite {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  padding: 18px 0;
}
.barre-admin__compte {
  font: 500 12px/1 var(--inter);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-60);
}
.barre-admin__compte:hover { color: var(--gold); }

/* En dessous de 1080 px, la barre se resserre : l'habilitation tombe à
   son seul chiffre et les onglets passent derrière un <details>. */
.barre-admin-mobile { display: none; background: var(--ink); color: var(--paper); }
.barre-admin-mobile > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.barre-admin-mobile > summary::-webkit-details-marker { display: none; }
.barre-admin-mobile__etat { display: flex; align-items: center; gap: 10px; }
.barre-admin-mobile__nom {
  font: 500 12px/1 var(--font-title);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.barre-admin-mobile__niveau {
  font: 600 9px/1 var(--inter);
  letter-spacing: 0.14em;
  color: var(--ink);
  background: var(--gold);
  padding: 5px 7px;
}
/* Sur un écran de détail, le retour au parent prend la place de gauche. */
.barre-admin-mobile__retour {
  font: 500 11px/1 var(--inter);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-86);
}
.barre-admin-mobile__menu {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: none;
}
.barre-admin-mobile__barres { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.barre-admin-mobile__barres span { height: 2px; background: var(--paper); }
.barre-admin-mobile__volet { display: flex; flex-direction: column; padding: 0 20px 18px; }
.barre-admin-mobile__lien {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font: 500 12px/1 var(--inter);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-60);
  border-top: 1px solid rgba(252, 252, 251, 0.14);
}
.barre-admin-mobile__lien--courant { color: var(--paper); }


/* -------------------------------------------------------------------------
   L'en-tête d'une demande de nationalité : le nom à gauche, la photographie
   déposée à droite, au format 4/5 du portrait de la carte. À défaut de
   dépôt, le cadre reste et dit ce qui manque — la décision se prend sur un
   visage, et son absence doit se voir avant qu'on tranche.

   Le portrait d'identité ne porte pas « image-encre » : la photographie
   déposée se juge en couleur, comme elle a été prise. Le noir et blanc
   reste la règle des images de page, pas celle des pièces d'un dossier.
   ------------------------------------------------------------------------- */

.entete-demande {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 152px;
  align-items: start;
  gap: 44px;
}
.entete-demande__portrait { grid-column: 2; }
.entete-demande__manque {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: 0 14px;
  text-align: center;
  background: var(--tint-gold);
  font: 500 11px/1.5 var(--inter);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
}


/* -------------------------------------------------------------------------
   Le bandeau d'un registre : les filtres à gauche, la recherche à droite,
   sur le filet bleu qui ouvre la table.
   ------------------------------------------------------------------------- */

.bandeau-registre {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--blue);
}
/* La saisie tient 280–300 px, plus son bouton. */
.bandeau-registre .recherche { width: 400px; flex: none; }

/* Filtres. Chacun porte son compte, et la somme des comptes fait celui
   de « Tous » : un filtre que la table ne peut pas produire ne paraît pas.
   La teinte dit ce que le filtre qualifie, l'aplat bleu dit lequel court. */
.filtres { display: flex; gap: 10px; flex-wrap: wrap; }
.filtre {
  display: inline-block;
  font: 600 11px/1 var(--inter);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 18px;
  color: var(--blue);
  background: var(--tint-blue);
}
.filtre:hover { background: var(--tint-blue-hover); color: var(--blue); }
.filtre--vert { color: var(--green); background: var(--tint-green); }
.filtre--vert:hover { background: var(--tint-green-hover); color: var(--green); }
.filtre--or { color: var(--gold-text); background: var(--tint-gold); }
.filtre--or:hover { background: var(--tint-gold-hover); color: var(--gold-text); }
.filtre--courant,
.filtre--courant:hover { color: var(--paper); background: var(--blue); }


/* -------------------------------------------------------------------------
   Les registres de l'administration. Cinq tables, une par section, toutes
   bâties sur le registre du site : seules les colonnes changent.
   ------------------------------------------------------------------------- */

.registre--articles .registre__entete,
.registre--articles .registre__ligne {
  grid-template-columns: 120px minmax(0, 1fr) 150px 200px 150px;
}
.registre--actes .registre__entete,
.registre--actes .registre__ligne {
  grid-template-columns: 130px 130px minmax(0, 1fr) 210px 170px;
}
.registre--fiches .registre__entete,
.registre--fiches .registre__ligne {
  grid-template-columns: 66px minmax(0, 1.2fr) minmax(0, 1.3fr) 130px 120px 150px;
}
.registre--versions .registre__entete,
.registre--versions .registre__ligne {
  grid-template-columns: 110px 150px minmax(0, 1fr) 200px 130px;
}
.registre--charges .registre__entete--admin,
.registre--charges .registre__ligne--admin {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 120px 130px;
}
/* Le tableau de bord : une étiquette de section, la tâche, sa date.
   La troisième colonne est une colonne de date — elle ne porte jamais
   autre chose qu'une date ou un tiret. */
.registre--taches .registre__entete,
.registre--taches .registre__ligne {
  grid-template-columns: 150px minmax(0, 1fr) 120px;
}

/* L'en-tête d'un registre d'administration marque la colonne ordonnée :
   « Date ↓ ». Les registres se lisent du plus récent au plus ancien. */
.registre__entete--admin { border-bottom-color: rgba(10, 93, 142, 0.25); }
.registre--admin .registre__ligne { padding: 14px 0; }
/* Une ligne à vignette s'aligne au centre : une ligne de base ne veut
   plus rien dire quand la ligne porte une image de 48 px. */
.registre__ligne--vignette { align-items: center; }

/* Les actions tiennent le bout de la ligne, en toutes lettres : jamais
   une icône seule. L'action principale est bleue, les autres sourdes. */
.registre__actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}
.action--ligne {
  font: 600 11px/1 var(--inter);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: none;
  padding: 0;
}
.action--ligne:hover { color: var(--green); }
.action--ligne-muette { color: var(--ink-60); }
.action--ligne-muette:hover { color: var(--blue); }

/* Le libellé d'une ligne de registre, quand il ouvre une fiche. */
.registre__cle-lien { color: var(--ink); }
.registre__cle-lien:hover { color: var(--blue); }

/* Le petit texte d'une ligne : la date, l'auteur, l'identifiant. */
.registre__mention { font-size: 14px; color: var(--ink-72); }
.registre__mention--muette { color: var(--ink-60); }
.registre__jetons { display: flex; gap: 8px; flex-wrap: wrap; }
.registre__portrait {
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: var(--tint-blue);
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--ink-45);
}
.registre__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.06);
}

/* Une charge sans titulaire ne se cache pas : elle prend la teinte or et
   son propre groupe, avec l'action qui la pourvoit. */
.registre__ligne--vacante {
  background: var(--tint-gold);
  padding-left: 12px;
  padding-right: 12px;
}
.registre__vacant { font-size: 16px; color: var(--gold-text); }

/* Pagination d'un registre : la suite à gauche, le compte à droite. */
.barre-pages {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
}


/* -------------------------------------------------------------------------
   Les éditeurs. Un titre et un état, des sections séparées de filets
   bleus, une rangée d'actions, et la zone dangereuse au pied.
   ------------------------------------------------------------------------- */

/* Le mot d'état, à droite du titre : « Enregistré le … », « En poste ». */
.entete-editeur {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.editeur__etat {
  font: 500 12px/1.7 var(--inter);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
  text-align: right;
}
.editeur__etat--vert { color: var(--green); }
.editeur__etat--or { color: var(--gold-text); }

/* Le titre d'un article, le numéro d'un acte : ce qui paraîtra en
   romaine se saisit en romaine. */
.champ--romain input[type="text"],
.champ--romain input[type="search"],
.champ--romain .champ__controle {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-size: 24px;
  line-height: 1.3;
}
.champ--romain-court input[type="text"] { font-size: 22px; }

/* Le compte de caractères d'un champ borné par la table. */
.champ__compte { font-size: 12px; line-height: 1.5; color: var(--ink-50); }
.champ__compte--alerte { color: var(--gold-text); }

/* L'aperçu d'un libellé composé de plusieurs champs : on voit ce qu'on
   écrit avant de l'enregistrer. */
.apercu {
  display: flex;
  align-items: baseline;
  gap: 20px;
  background: var(--tint-blue);
  padding: 20px 24px;
}
.apercu__label {
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  flex: none;
}
.apercu__valeur {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-size: 24px;
  line-height: 1.25;
}

/* Le titulaire d'une charge, et l'acte qui l'a nommé : un bloc de teinte
   bleue où la saisie tient la place du texte. On voit qui tient la charge
   sans quitter le champ qui le change. */
.attribution {
  /* Repère de la liste d'autocomplétion, qui tombe de son bord bas. */
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  background: var(--tint-blue);
  border: 1px solid var(--blue);
  padding: 10px 14px;
}
.attribution--vide { background: var(--tint-gold); border-color: var(--gold-text); }
.attribution__portrait {
  width: 40px;
  height: 50px;
  flex: none;
  overflow: hidden;
  background: var(--paper);
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--ink-45);
}
.attribution__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.06);
}
.attribution input.attribution__saisie,
.attribution__saisie {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  width: 100%;
}
.attribution input.attribution__saisie:focus { border-bottom-color: var(--blue); outline: none; }
.attribution__saisie::placeholder { color: var(--ink-45); font-style: italic; }
.attribution__mention {
  font: 600 10px/1.4 var(--inter);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  text-align: right;
  flex: none;
}
.attribution--vide .attribution__mention { color: var(--gold-text); }

/* Le champ que découvre une case cochée : le rôle de rattachement ne
   paraît que si l'on a dit que la charge en dépend. La règle vise la case
   par son nom — le groupe en porte deux, et l'autre ne découvre rien. */
.champ-lie { display: none; }
.choix--colonne:has(input[name="rattache"]:checked) + .champ-lie { display: flex; }

/* Choix en colonne : quatre natures d'acte, trois types d'article.
   Une rangée de jetons ne suffit plus dès que le libellé est une phrase. */
.choix--colonne { flex-direction: column; gap: 8px; }
.choix--colonne .choix__option { width: 100%; }

/* Case à cocher : la même rangée que le choix, avec une marque carrée.
   Cochée, elle prend le vert — elle publie, elle ne sélectionne pas. */
.choix__case {
  width: 18px;
  height: 18px;
  flex: none;
  border: 1px solid rgba(23, 48, 63, 0.3);
  display: grid;
  place-items: center;
  font: 600 11px/1 var(--inter);
  color: transparent;
}
.choix__option input:checked ~ .choix__case {
  background: var(--green);
  border-color: var(--green);
  color: var(--paper);
}
.choix__option--verte:has(input:checked) {
  border-color: var(--green);
  background: var(--tint-green);
  color: var(--ink);
}

/* La rangée d'actions d'un éditeur : une seule or, l'annulation à droite. */
.actions--editeur { gap: 18px; padding-top: 6px; }
.actions--editeur .action--annuler { margin-left: auto; }
.action--annuler {
  color: var(--ink-72);
  background: none;
  padding: 19px 4px;
}
.action--annuler:hover { color: var(--blue); }
/* Action secondaire cerclée : l'aperçu, l'export, le second choix. */
.action--cerclee {
  color: var(--blue);
  background: none;
  border: 1px solid var(--blue);
  padding: 17px 24px;
}
.action--cerclee:hover { background: var(--tint-blue); color: var(--blue); }

/* La zone dangereuse. Elle dit ce qui est perdu, et nomme l'issue plus
   douce quand il y en a une : décocher plutôt que supprimer. */
.zone-dangereuse {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--tint-gold);
  border-left: 3px solid var(--gold-text);
  padding: 20px 22px;
}
.zone-dangereuse__label {
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  padding-top: 3px;
  white-space: nowrap;
  flex: none;
}
.zone-dangereuse__corps { display: flex; flex-direction: column; gap: 10px; }
.zone-dangereuse__texte { font-size: 16px; line-height: 1.6; }
.action--danger {
  align-self: flex-start;
  font-size: 11px;
  color: var(--gold-text);
  background: none;
  border: 1px solid var(--gold-text);
  padding: 12px 18px;
}
.action--danger:hover { background: var(--gold-text); color: var(--paper); }

/* Le champ riche : TinyMCE reste l'éditeur, avec sa barre d'outils et sa
   configuration. On ne lui reprend que le cadre — filet du système, angles
   francs, bande de teinte bleue sous la barre — pour qu'il ne soit pas la
   seule pièce arrondie de l'écran. */
.champ-riche .tox.tox-tinymce {
  border: 1px solid var(--border-field);
  border-radius: 0;
}
.champ-riche .tox .tox-editor-header,
.champ-riche .tox .tox-toolbar-overlord,
.champ-riche .tox .tox-toolbar__primary,
.champ-riche .tox .tox-toolbar {
  background: var(--tint-blue);
  box-shadow: none;
}
.champ-riche .tox .tox-editor-header { border-bottom: 1px solid var(--hairline-14); }
.champ-riche .tox .tox-statusbar { background: var(--paper); border-top: 1px solid var(--hairline-14); }


/* -------------------------------------------------------------------------
   Le comparateur de la Constitution. Le vert ajoute, l'ocre retire :
   les deux encres du système, à la place du rouge et du vert d'origine.
   Le moteur de différence rend une table de quatre colonnes — une marque
   et un texte par version ; la feuille ne fait que l'habiller.
   ------------------------------------------------------------------------- */

.diff {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px;
  background: var(--hairline);
}
/* La colonne de marque : le signe est redondant avec la teinte, elle ne
   garde qu'une gouttière. */
.diff__marque {
  width: 6px;
  padding: 0;
  background: var(--paper);
  font-size: 0;
  color: transparent;
}
.diff__entete {
  background: var(--paper);
  padding: 14px 18px;
  text-align: left;
  font-weight: 400;
  display: table-cell;
}
.diff__version {
  display: block;
  font: 600 10px/1.4 var(--inter);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.diff__version--courante { color: var(--green); }
.diff__date { font-size: 13px; color: var(--ink-60); }

.diff__cellule {
  background: var(--paper);
  padding: 16px 18px;
  vertical-align: top;
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-size: 18px;
  line-height: 1.6;
}
.diff__cellule--ajout {
  background: var(--tint-green);
  border-left: 3px solid var(--green);
}
.diff__cellule--retrait {
  background: var(--tint-gold);
  border-left: 3px solid var(--gold-text);
}
/* Le saut entre deux passages comparés : la comparaison ne montre que ce
   qui change et une ligne autour, et dit où elle a sauté. */
.diff__cellule--saut {
  font-family: var(--inter);
  font-size: 16px;
  letter-spacing: 0.3em;
  color: var(--ink-40);
  padding: 8px 18px;
}
.diff__cellule--vide {
  font-family: var(--inter);
  font-size: 14px;
  color: var(--ink-45);
}
/* Le mot changé, non la ligne entière : le comparateur descend au mot. */
.diff__cellule ins { background: #C6E3D3; text-decoration: none; }
.diff__cellule del {
  text-decoration: line-through;
  text-decoration-color: rgba(154, 111, 20, 0.6);
}

/* La version en vigueur, dans l'historique : la seule ligne teintée. */
.registre__ligne--vigueur { background: var(--tint-green); }
.registre__ligne--vigueur .registre__cle { color: var(--green); }


/* -------------------------------------------------------------------------
   Les photos. Un rail d'albums, une zone de dépôt, une ligne par cliché.
   ------------------------------------------------------------------------- */

.rail-albums {
  display: flex;
  flex-direction: column;
  background: var(--tint-blue);
  padding: 24px 0;
}
.rail-albums__titre {
  font: 600 11px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 0 20px 16px;
}
.rail-albums__lien {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  padding: 11px 20px;
  color: var(--ink-86);
  border-left: 3px solid transparent;
}
.rail-albums__lien:hover { color: var(--blue); border-left-color: var(--rail-hover); }
.rail-albums__lien--courant,
.rail-albums__lien--courant:hover {
  color: var(--blue);
  font-weight: 600;
  border-left-color: var(--gold);
}
.rail-albums__compte { font-size: 13px; color: var(--ink-50); }
.rail-albums__lien--courant .rail-albums__compte { color: var(--ink-60); }
.rail-albums__ajout {
  font: 600 11px/1 var(--inter);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 18px 20px 6px;
  color: var(--blue);
}
.rail-albums__ajout:hover { color: var(--green); }
.rail-albums__ajout--courant,
.rail-albums__ajout--courant:hover { color: var(--green); }

/* Le nom de l'album s'édite sur place, à la taille où il paraît. */
.champ-titre-album {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-size: 40px;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--paper);
  border: none;
  border-bottom: 2px solid var(--border-field);
  padding: 4px 0 10px;
  width: 560px;
  max-width: 100%;
}
.champ-titre-album:focus { border-bottom-color: var(--blue); }
/* Le dossier ne suit pas le nom : renommer l'album ne déplace pas les
   fichiers. Le chemin se lit donc sous le champ, tel qu'il reste. */
.chemin-album { font-size: 13px; color: var(--ink-60); }
.chemin-album code {
  font-family: var(--font-title);
  font-size: 15px;
}

.depose {
  border: 1px dashed rgba(10, 93, 142, 0.45);
  background: var(--tint-blue);
  padding: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.depose__texte { display: flex; flex-direction: column; gap: 6px; }
.depose__titre { font-family: var(--font-title); font-size: 24px; line-height: 1.2; }
.depose__aide { font-size: 14px; color: var(--ink-72); }
.depose--appui {
  padding: 18px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.cliches { display: flex; flex-direction: column; }
.cliche {
  display: grid;
  grid-template-columns: 40px 120px minmax(0, 1fr) 130px;
  gap: 20px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.cliche__poignee {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: rgba(23, 48, 63, 0.35);
  cursor: grab;
}
.cliche__poignee span { width: 16px; height: 2px; background: currentColor; }
/* L'exception à la règle du gris : un éditeur doit voir la photographie
   telle qu'elle est, non telle que la page la fondra. */
.cliche__vue { width: 120px; height: 80px; overflow: hidden; }
.cliche__vue img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cliche__legende {
  font: 400 16px/1.35 var(--inter);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-field);
  padding: 14px 12px;
  width: 100%;
}
.cliche__legende--enregistre { border-color: var(--blue); }
.cliche__fin { display: flex; gap: 14px; justify-content: flex-end; align-items: center; }
/* Un enregistrement par AJAX se dit sur place, jamais en silence. */
.cliche__etat {
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}
/* Un enregistrement qui n'a pas eu lieu se dit aussi. */
.cliche__etat--refus { color: var(--gold-text); }
.action--retirer { font-size: 11px; color: var(--ink-60); background: none; padding: 0; }
.action--retirer:hover { color: var(--gold-text); }


/* -------------------------------------------------------------------------
   La carte d'identité, en aperçu. Sans image de fond : les deux encres,
   le filet d'armes et la photographie suffisent.
   ------------------------------------------------------------------------- */

/* La carte et son mode d'emploi, côte à côte : la pièce à gauche, à sa
   taille, ce qu'elle engage à droite. */
.carte-duo {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.carte {
  border: 1px solid var(--border-field);
  background: var(--paper);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.carte__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hairline-14);
  padding-bottom: 10px;
}
.carte__etat {
  font: 500 9px/1 var(--font-title);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.carte__mention {
  font: 600 8px/1 var(--inter);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.carte__corps { display: flex; gap: 16px; }
.carte__portrait {
  width: 74px;
  height: 94px;
  flex: none;
  overflow: hidden;
  background: var(--tint-blue);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6px;
}
.carte__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.06);
}
.carte__identite { display: flex; flex-direction: column; gap: 7px; }
.carte__pied {
  display: flex;
  gap: 22px;
  border-top: 1px solid var(--hairline-14);
  padding-top: 10px;
}
.carte__champ { display: flex; flex-direction: column; }
.carte__label {
  font: 600 7px/1 var(--inter);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(23, 48, 63, 0.55);
}
.carte__valeur { font-family: var(--font-title); font-size: 15px; line-height: 1.3; }
.carte__valeur--petite { font-family: var(--inter); font-size: 12px; line-height: 1.3; }
.carte__armes { display: flex; gap: 3px; align-items: flex-end; margin-left: auto; }
.carte__armes span:first-child { width: 26px; height: 4px; background: var(--gold); }
.carte__armes span:last-child { width: 13px; height: 4px; background: var(--green-bright); }

/* Un bloc d'explication posé dans une colonne : ce que la publication
   déclenche, ce qu'un amendement ne fait pas, ce qu'un refus n'envoie pas. */
.note {
  background: var(--tint-blue);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.note__label {
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.note__texte { font-size: 15px; line-height: 1.7; color: var(--ink-86); }
.note--verte { background: var(--tint-green); }
.note--verte .note__label { color: var(--green); }
.note--or { background: var(--tint-gold); }
.note--or .note__label { color: var(--gold-text); }

/* Le renvoi vers la file d'attente, en tête du registre des citoyens :
   une file de demandes n'est pas un chiffre dans un menu. */
.bandeau-attente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  background: var(--tint-green);
  border-left: 3px solid var(--green);
  padding: 24px 26px;
}
.bandeau-attente__texte { display: flex; flex-direction: column; gap: 6px; }

/* La barre de pied d'un amendement : le motif y est obligatoire, et
   l'enregistrement se tient à côté de lui. On ne peut pas enregistrer
   sans dire ce qui change. */
.barre-motif {
  background: var(--tint-blue);
  padding: 30px var(--marge);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
}
.barre-motif__actions { display: flex; align-items: center; gap: 16px; }


/* =========================================================================
   15. MOBILE
   Une colonne, tuiles à deux, registres empilés, cibles de 44 px.
   ========================================================================= */

@media (max-width: 1400px) {
  :root { --marge: 64px; }
  .gabarit-accueil { gap: 70px; }
  .gabarit-rubrique,
  .gabarit-rubrique--appui-etroit { grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 50px; }
  .gabarit-acte,
  .gabarit-acte--appui-large,
  .gabarit-acte--appui-court { gap: 60px; }
  .gabarit-formulaire { grid-template-columns: 300px minmax(0, 1fr); gap: 50px; }
  .gabarit-registre { gap: 56px; }
  .gabarit-rubrique--photos { grid-template-columns: 260px minmax(0, 1fr); gap: 50px; }
  .gabarit-fiche { grid-template-columns: 340px minmax(0, 1fr) 280px; gap: 50px; }
  .gabarit-fiche--charge { grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 50px; }
  .gabarit-connexion { grid-template-columns: minmax(0, 1fr) 480px; }
  .gabarit-espace { grid-template-columns: 300px minmax(0, 1fr); gap: 50px; }
  .titre-entree { font-size: 84px; }
  .titre-page--tres-large { font-size: 60px; }
  .titre-page--large { font-size: 58px; }
  .entree__armes { right: 40px; }
}

@media (max-width: 1080px) {
  :root { --marge: 40px; --rythme-section: 60px; }

  /* Les trois colonnes s'empilent : titre, lecture, appui, rail en fin de page. */
  .gabarit-rubrique,
  .gabarit-rubrique--appui-etroit,
  .gabarit-formulaire {
    grid-template-columns: minmax(0, 1fr);
    gap: 50px;
  }
  .gabarit-rubrique > .rail,
  .gabarit-rubrique--appui-etroit > .rail { order: 3; }
  .gabarit-formulaire > .rail-etapes,
  .gabarit-formulaire > .colonne-etapes { order: 3; }
  [class*="gabarit-"] > .rail,
  [class*="gabarit-"] > .rail-etapes,
  [class*="gabarit-"] > .rail-albums { position: static; }

  .gabarit-accueil,
  .gabarit-acte,
  .gabarit-acte--appui-large,
  .gabarit-acte--appui-court,
  .gabarit-connexion,
  .gabarit-espace,
  .gabarit-registre,
  .gabarit-rubrique--photos,
  .gabarit-fiche,
  .gabarit-fiche--charge {
    grid-template-columns: minmax(0, 1fr);
    gap: 50px;
  }
  /* Empilé, le rail des albums passe sous l'album ouvert : neuf noms en
     tête de page repousseraient les clichés hors de l'écran. */
  .gabarit-rubrique--photos > .rail-albums { order: 3; }

  /* Une fiche empilée ouvre sur le portrait, qui ne prend plus la page. */
  .gabarit-fiche > .portrait-fiche,
  .gabarit-fiche--charge > .portrait-fiche { max-width: 420px; }

  .entete-duo { gap: 34px; }
  .entete-duo__outil { width: 100%; }

  .pile--accueil { gap: 44px; }

  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; }
  .tuile--vignette { grid-template-columns: 120px minmax(0, 1fr); }
  .grille-personnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  .grille-personnes--serree { gap: 26px 22px; }
  .une-album { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .globe { grid-template-columns: 240px minmax(0, 1fr); gap: 30px; }
  .pellicule { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .panneau-apparat { padding: 50px 40px; }
  .panneau-connexion { padding-top: 50px; padding-bottom: 50px; max-width: none; }

  .zone--haute { padding-top: 60px; }
  .zone--fin { padding-bottom: 70px; }

  .titre-entree { font-size: 64px; }
  .titre-page, .titre-page--large, .titre-page--tres-large { font-size: 48px; }
  .titre-une, .titre-une--article { font-size: 40px; }
  .une-album__titre { font-size: 40px; }
}

@media (max-width: 720px) {
  :root {
    --marge: 20px;
    --rythme-section: 44px;
    --rythme-interne: 30px;
  }

  body { font-size: 16px; }

  /* La barre desktop cède la place à l'en-tête mobile. */
  .barre-nav { display: none; }
  .barre-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px var(--marge);
    border-bottom: 1px solid var(--hairline-14);
  }
  .menu-mobile { display: block; }

  .fil { padding-top: 26px; font-size: 12px; }
  .fil--serre { padding-top: 22px; }

  .entete-page,
  .entete-page--haute { padding-top: 30px; gap: 14px; }
  .entete-duo { padding-top: 30px; gap: 24px; }
  .entete-duo__outil { width: 100%; }

  .zone--haute { padding-top: 32px; }
  .zone--moyenne { padding-top: 30px; }
  .zone--basse { padding-top: 26px; }
  .zone--fin { padding-bottom: 40px; }

  .titre-entree { font-size: 52px; line-height: 0.94; }

  /* Sous 40 px : graisse 400 et plus d'interlettrage négatif. */
  .titre-page,
  .titre-page--large,
  .titre-page--tres-large,
  .titre-une,
  .titre-une--article,
  .une-album__titre,
  .panneau-apparat__titre,
  .tuile-chiffre__nombre,
  .personne__initiales,
  .corps--texte h1,
  .prose h1 {
    font-weight: 400;
    letter-spacing: 0;
  }

  .titre-page,
  .titre-page--large,
  .titre-page--tres-large { font-size: 38px; line-height: 1.0; }
  .titre-une, .titre-une--article { font-size: 34px; line-height: 1.04; }
  .titre-formulaire { font-size: 34px; }
  .titre-section { font-size: 22px; }
  .titre-section--grand { font-size: 24px; }
  .titre-une--acte { font-size: 28px; line-height: 1.15; }
  .titre-liste--grand { font-size: 24px; }
  .une-album__titre { font-size: 32px; }
  .chapeau { font-size: 18px; }
  .chapeau--une { font-size: 21px; }
  .considerant { font-size: 16px; }
  .texte, .texte--serre { font-size: 16px; line-height: 1.68; }
  .legende { font-size: 20px; }
  .rubrique-vide__enonce { font-size: 26px; }
  .panneau-apparat__titre { font-size: 30px; }
  .encart-vert__titre { font-size: 28px; }

  .etiquette { padding: 8px 12px; }

  /* L'accueil : les blocs se resserrent, l'état de l'Empire s'empile. */
  .pile--accueil { gap: 34px; }
  .pile--une { gap: 14px; }

  .bilan { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bilan__ligne { padding: 13px 0; }
  .bilan__cle { font-size: 11px; }
  .bilan__valeur { font-size: 18px; }

  /* L'article à la une passe l'image au-dessus de son texte. */
  .une-article,
  .une-article--sans-image { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .une-article__nature { font-size: 10px; }
  .une-article__titre { font-size: 22px; }
  .une-article__chapeau { font-size: 15px; }

  /* L'acte de constitution : le pied passe la signature au-dessus du lien. */
  .acte-fondateur { padding: 28px 24px; gap: 16px; }
  .acte-fondateur__enonce { font-size: 25px; }
  .acte-fondateur__situation { font-size: 15px; }
  .acte-fondateur__pied {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .acte-fondateur .signature__nom { font-size: 21px; }
  .acte-fondateur .filet-armes--court { width: 150px; }

  /* Les tuiles passent à deux. */
  .duo, .duo--large { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* L'éphéméride ne porte qu'une carte : elle prend toute la colonne
     plutôt que de tenir une demi-colonne de 165 px. */
  .duo--ephemeride { grid-template-columns: minmax(0, 1fr); }
  /* Deux tuiles à titre long, ou deux portraits légendés, ne tiennent pas
     de front sur un téléphone : celles-là s'empilent. */
  .duo--empile { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* Deux champs de saisie côte à côte deviennent illisibles : ils s'empilent. */
  .duo--champs { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .grille-champs { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .trio { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tuile-chiffre { padding: 18px 16px; }
  .tuile-chiffre__nombre { font-size: 34px; }
  .tuile-chiffre__label { font-size: 10px; }
  .tuile { padding: 20px 18px; }
  .tuile__titre { font-size: 21px; }
  .tuile__titre--grand { font-size: 24px; }
  .millesimes { gap: 6px; }
  .millesime { padding: 12px 10px; }
  .millesime__an { font-size: 18px; }

  /* Les listes de registre deviennent des lignes empilées :
     l'étiquette au-dessus du titre. */
  .registre__entete { display: none; }
  .registre__ligne {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 16px 0;
    border-bottom: 1px solid var(--hairline-16);
  }
  .registre__cle {
    font-family: var(--inter);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green);
    order: 1;
  }
  .registre__nature { font-size: 10px; order: 2; }
  .registre__objet {
    font-family: var(--font-title);
    font-size: 20px;
    line-height: 1.25;
    order: 3;
  }
  .registre--duo .registre__entete { display: flex; justify-content: space-between; }
  .registre--duo .registre__ligne {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 16px 0;
  }
  .registre--duo .registre__cle {
    font-family: var(--font-title);
    font-size: 19px;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
  }
  /* Le registre à deux colonnes garde son ordre : la clé, puis le compte. */
  .registre--duo .registre__ligne > * { order: 0; }
  .registre--duo .registre__ligne > :last-child { text-align: right; }

  /* L'index alphabétique : vingt-six pastilles empilées mangeraient le
     tiers de l'écran. Il tient une seule ligne, qui défile latéralement. */
  .alphabet {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding: 12px 0;
    -webkit-overflow-scrolling: touch;
  }
  .alphabet__lettre { flex: none; min-width: 40px; padding: 13px 8px; }
  .registre__lettre { padding: 24px 0 8px; font-size: 24px; scroll-margin-top: 68px; }

  /* L'inventaire garde ses deux colonnes : le numéro compte, il ne peut
     pas passer au-dessus de la ligne comme une étiquette. */
  .registre--inventaire .registre__ligne {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
    padding: 15px 0;
  }
  .registre--inventaire .registre__cle {
    font-family: var(--font-title);
    font-size: 18px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--blue);
    order: 0;
  }
  .registre--inventaire .registre__objet {
    font-family: var(--inter);
    font-size: 16px;
    line-height: 1.6;
    order: 0;
  }

  /* Deux signatures ne tiennent pas côte à côte : elles s'empilent. */
  .signatures { flex-direction: column; gap: 20px; padding-top: 18px; }

  /* La tuile à vignette garde sa vignette, réduite à celle d'une ligne. */
  .tuile--vignette { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 18px 16px; }

  /* Le registre des citoyens : le nom, puis ses jetons dessous. */
  .registre--citoyens .registre__entete { display: none; }
  .registre--citoyens .registre__ligne {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 16px 0;
  }
  .registre--citoyens .registre__cle {
    font-family: var(--font-title);
    font-size: 20px;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
    order: 0;
  }

  /* La table des charges : le titulaire, puis « charge · année ». */
  .registre--charges .registre__entete { display: none; }
  /* La ligne passe en flux : le nom tient sa ligne, la charge et l'année
     se lisent au-dessous d'un trait, « Ministre de l'Information · 2026 ». */
  .registre--charges .registre__ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    padding: 16px 0;
  }
  .registre--charges .registre__cle {
    flex: 1 0 100%;
    order: 0;
    font-family: var(--font-title);
    font-size: 20px;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
  }
  .registre--charges .registre__objet { order: 1; font-size: 14px; color: var(--ink-60); }
  .registre--charges .registre__depuis { order: 2; }
  .registre--charges .registre__depuis::before { content: '\00b7\00a0'; }
  /* Sans année, rien à dire : le tiret du tableau n'a plus de colonne
     à tenir, il disparaît avec le point qui l'annonçait. */
  .registre--charges .registre__depuis--vide { display: none; }

  /* La bande de la famille passe en lignes, comme les autres personnes. */
  .grille-personnes--serree { display: flex; flex-direction: column; gap: 0; }
  .personne--serree { gap: 16px; }
  .personne--serree .personne__nom { font-size: 20px; }
  .personne__role { font-size: 11px; }

  /* Une fiche de personne ouvre sur un cadrage 4/3 du portrait. */
  .portrait-fiche { max-width: none; }
  .portrait-fiche .cadre--4-5 { aspect-ratio: 4 / 3; }
  .portrait-fiche .cadre--4-5 > img { object-position: 50% 25%; }

  .titre-qualite { font-size: 21px; line-height: 1.25; }
  .tuile--appui { padding: 18px 16px; }
  .tuile__titre--appui, .tuile__titre--petit { font-size: 20px; }
  .jeton--petit { padding: 7px 9px; }

  /* Fiche de personne : vignette de 64 px, en ligne. */
  .grille-personnes { display: flex; flex-direction: column; gap: 0; }
  .personne {
    flex-direction: row;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .personne > .cadre,
  .personne > .personne__initiales { width: 64px; flex: none; }
  .personne__initiales { font-size: 26px; }
  .personne__nom { font-size: 20px; }
  .personne__fief { font-size: 14px; }
  .personne__grade {
    background: none;
    padding: 0;
    margin-top: 2px;
    font-size: 9px;
  }

  ul.citoyens_list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }

  .globe { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .pellicule { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .monture { padding: 18px; }
  .monture-document { padding: 12px; }
  .monture-document > embed,
  .monture-document > object,
  .monture-document > iframe { height: 60vh; }
  .monture > img { max-height: none; }

  .voisins { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 18px; }
  .voisin--suivant { text-align: left; }

  .recap__ligne { flex-direction: column; gap: 4px; }
  .recap__cle { width: auto; }

  /* Cibles tactiles de 44 px minimum. */
  .action { padding: 19px 24px; width: 100%; }
  .action--lecture { width: auto; padding: 12px 0 5px; }
  .action--secondaire,
  .action--retour { padding: 17px 24px; }
  .action--pagination { width: auto; flex: 1; padding: 17px 12px; }
  .actions { gap: 10px; }
  .actions--empilees { flex-direction: column; align-items: stretch; }

  .champ-date input { width: auto; flex: 1; }
  .champ-date input:last-of-type { width: auto; flex: 1.4; }
  .choix { gap: 10px; }
  .choix__option { flex: 1; padding: 15px 16px; }

  .rail { padding: 18px 0; }
  .refus { flex-direction: column; gap: 8px; }

  .entree { padding: 44px 28px 40px; min-height: 100svh; }
  .entree__armes { right: -80px; top: 130px; transform: none; width: 330px; max-width: 85vw; opacity: 0.45; }
  .entree__ligne { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 10px; }
  .entree__corps { gap: 24px; }
  .entree .action--principale { align-self: stretch; }

  .panneau-connexion { padding-top: 30px; padding-bottom: 40px; }
  .champ--etroit { max-width: none; }

  .panneau-apparat { padding: 28px var(--marge); gap: 12px; }
  .panneau-apparat__armes { right: -70px; width: 210px; opacity: 0.42; }
  .panneau-apparat__corps { max-width: none; }

  .rubrique-vide { padding: 26px 22px; }
  .visas { padding: 20px 18px; font-size: 15px; }
  .acte__texte { font-size: 16px; }
  .article-corps { font-size: 16px; }

  /* Le pied empile ses liens. */
  .pied {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 26px var(--marge);
  }
  .pied__liens { flex-direction: column; gap: 0; }
  .pied__lien { padding: 8px 0; }

  .corps--texte { padding: 30px var(--marge) var(--rythme-section); }
  .corps--texte h1, .prose h1 { font-size: 38px; }
  .corps--texte h2, .prose h2 { font-size: 24px; }
  .corps--texte p, .prose p,
  .corps--texte ul, .prose ul,
  .corps--texte ol, .prose ol { font-size: 16px; }
  .corps--texte table, .prose table, table.search_results { font-size: 15px; }
}


/* L'administration. La barre se resserre avant les gabarits : sept
   onglets ne tiennent plus dès que la marge tombe à 40 px. */
@media (max-width: 1400px) {
  .barre-admin { padding: 0 var(--marge); }
  .barre-admin__etat { margin-right: 24px; }
  .barre-admin__lien { padding: 18px 12px; }
  .bandeau-registre .recherche { width: 340px; }
  .champ-titre-album { width: 100%; }
}

@media (max-width: 1080px) {
  .barre-admin { display: none; }
  .barre-admin-mobile { display: block; }

  /* Les filtres et la recherche s'empilent : une saisie qui ne peut pas
     rétrécir déborderait la page. */
  .bandeau-registre { flex-direction: column; align-items: stretch; gap: 20px; }
  .bandeau-registre .recherche { width: 100%; flex: 1 1 auto; }
  .bandeau-registre .recherche__saisie { min-width: 0; }

  .barre-motif {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 26px var(--marge);
  }

  /* Le comparateur passe en pile : chaque version prend la largeur. */
  .carte-duo { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .diff, .diff thead, .diff tbody, .diff tr { display: block; }
  .diff__marque { display: none; }
  .diff__entete, .diff__cellule { display: block; width: auto; }
  .cliche { grid-template-columns: 40px 100px minmax(0, 1fr) 110px; gap: 14px; }

  /* Les registres d'administration gardent leurs colonnes jusqu'à 720 px,
     mais resserrées : la somme des colonnes fixes et des gouttières ne
     doit jamais dépasser la page. */
  .registre--admin .registre__entete,
  .registre--admin .registre__ligne { gap: 16px; }
  .registre--articles .registre__entete,
  .registre--articles .registre__ligne { grid-template-columns: 96px minmax(0, 1fr) 110px 140px 120px; }
  .registre--actes .registre__entete,
  .registre--actes .registre__ligne { grid-template-columns: 104px 96px minmax(0, 1fr) 150px 120px; }
  .registre--fiches .registre__entete,
  .registre--fiches .registre__ligne { grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 1.3fr) 100px 64px 120px; }
  .registre--versions .registre__entete,
  .registre--versions .registre__ligne { grid-template-columns: 80px 104px minmax(0, 1fr) 140px 110px; }
  .registre--charges .registre__entete--admin,
  .registre--charges .registre__ligne--admin { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) 96px 110px; }
}

@media (max-width: 720px) {
  /* L'en-tête d'une demande passe en pile : la photographie garde sa
     largeur de vignette, sous le nom. */
  .entete-demande { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .entete-demande__portrait { grid-column: 1; width: 132px; }

  /* Le registre d'administration s'empile autrement que celui du site :
     la clé et la date tiennent une ligne, l'objet vient dessous, la
     nature ferme la ligne. Les actions gardent leurs 44 px. */
  .registre--admin .registre__ligne {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    padding: 16px 0;
  }
  .registre--admin .registre__cle {
    font-family: var(--font-title);
    font-size: 20px;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
    order: 0;
  }
  .registre--admin .registre__objet {
    font-family: var(--inter);
    font-size: 15px;
    line-height: 1.5;
    grid-column: 1 / -1;
    order: 2;
  }
  .registre--admin .registre__mention {
    text-align: right;
    font-size: 12px;
    order: 1;
  }
  .registre--admin .registre__jetons,
  .registre--admin .jeton {
    grid-column: 1 / -1;
    order: 3;
  }
  .registre--admin .registre__actions {
    grid-column: 1 / -1;
    order: 4;
    justify-content: flex-start;
    gap: 22px;
  }
  .registre--admin .action--ligne,
  .registre--admin .action--ligne-muette {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .registre--admin .registre__portrait { display: none; }

  .barre-pages { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Une ligne de cliché tient sur deux rangs : la vignette et son
     retrait, puis la légende sur toute la largeur. */
  .cliche {
    grid-template-columns: 34px 100px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 0;
  }
  .cliche__legende { grid-column: 1 / -1; }
  .cliche__fin { min-height: 44px; }

  .depose { padding: 24px; flex-direction: column; align-items: flex-start; }
  .carte-duo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .champ-titre-album { font-size: 30px; }

  .zone-dangereuse { flex-direction: column; gap: 12px; }

  .apercu { flex-direction: column; gap: 8px; }
  .apercu__valeur { font-size: 20px; }

  .actions--editeur { flex-direction: column; align-items: stretch; }
  .actions--editeur .action { min-height: 44px; }
  .actions--editeur .action--annuler { margin-left: 0; }

  .rail-albums { padding: 18px 0; }
  .rail-albums__lien { min-height: 44px; align-items: center; }
}


/* =========================================================================
   17. LA CHARTE GRAPHIQUE
   La page /styleguide/ se rend depuis cette même feuille : chaque
   spécimen y est un élément réel, portant ses classes réelles.
   ========================================================================= */

.charte-couverture {
  background: var(--blue);
  color: var(--paper);
  padding: 90px var(--marge);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.charte-couverture__armes {
  position: absolute;
  right: 90px;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  max-width: 34vw;
  opacity: 0.38;
}
.charte-couverture__ligne {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font: 500 11px/1 var(--inter);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.charte-couverture__corps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 900px;
}
.charte-couverture__titre {
  font-family: var(--font-title);
  font-size: 96px;
  line-height: 0.94;
}
.charte-couverture__titre em {
  font-style: italic;
  font-weight: inherit;
  color: var(--gold);
}
.charte-couverture__texte {
  font-size: 20px;
  line-height: 1.68;
  max-width: 620px;
  color: var(--paper-86);
}

.charte-sommaire {
  padding: 60px var(--marge);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  border-bottom: 1px solid var(--hairline-14);
}
.charte-sommaire__tuile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  background: var(--tint-blue);
  color: var(--ink);
}
.charte-sommaire__tuile:hover { background: var(--tint-blue-hover); color: var(--ink); }
.charte-sommaire__tuile--verte { background: var(--tint-green); }
.charte-sommaire__tuile--verte:hover { background: var(--tint-green-hover); }
.charte-sommaire__tuile--or { background: var(--tint-gold); }
.charte-sommaire__tuile--or:hover { background: var(--tint-gold-hover); }
.charte-sommaire__rang {
  font: 600 10px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
}
.charte-sommaire__tuile--verte .charte-sommaire__rang { color: var(--green); }
.charte-sommaire__tuile--or .charte-sommaire__rang { color: var(--gold-text); }
.charte-sommaire__nom { font-family: var(--font-title); font-size: 26px; line-height: 1.15; }

.charte-section {
  padding: 90px var(--marge) 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.charte-section--composants { gap: 46px; }
.charte-section--fin { padding-bottom: 100px; }

/* Les quatre encres principales, en aplats de 190 px. */
.charte-encres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.charte-encre { display: flex; flex-direction: column; }
.charte-encre__aplat { height: 190px; }
.charte-encre__aplat--bleu  { background: var(--blue); }
.charte-encre__aplat--vert  { background: var(--green); }
.charte-encre__aplat--or    { background: var(--gold); }
.charte-encre__aplat--encre { background: var(--ink); }
.charte-encre__legende {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.charte-encre__nom { font-family: var(--font-title); font-size: 24px; line-height: 1.15; }
.charte-encre__hex { font: 500 13px/1.6 var(--inter); letter-spacing: 0.06em; }
.charte-encre__role { font-size: 14px; line-height: 1.6; color: var(--ink-72); }

/* Le papier, les trois teintes et l'or lisible, en aplats de 96 px. */
.charte-teintes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.charte-teinte { display: flex; flex-direction: column; }
.charte-teinte__aplat { height: 96px; }
.charte-teinte__aplat--papier {
  background: var(--paper);
  border: 1px solid rgba(23, 48, 63, 0.16);
}
.charte-teinte__aplat--bleue { background: var(--tint-blue); }
.charte-teinte__aplat--verte { background: var(--tint-green); }
.charte-teinte__aplat--or    { background: var(--tint-gold); }
.charte-teinte__aplat--or-lisible { background: var(--gold-text); }
.charte-teinte__nom {
  padding-top: 12px;
  font: 500 13px/1.6 var(--inter);
  letter-spacing: 0.06em;
}

/* Un bloc de règle, sur teinte. */
.charte-regle {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  background: var(--tint-green);
}
.charte-regle--interdit { background: var(--tint-gold); }
.charte-regle__texte { font-size: 16px; line-height: 1.7; }

/* L'échelle typographique : la valeur à gauche, le spécimen à droite. */
.charte-echelle { display: flex; flex-direction: column; }
.charte-echelle__ligne {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--hairline-14);
}
.charte-echelle__ligne:last-child { border-bottom: 1px solid var(--hairline-14); }
.charte-echelle__valeur {
  width: 150px;
  flex: none;
  font: 600 10px/1.4 var(--inter);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.charte-echelle__specimen { min-width: 0; }
/* Le 106 px de la page d'entrée, ramené à la largeur de la colonne. */
.charte-echelle__specimen--entree { font-size: 64px; line-height: 0.95; }

/* Le diagramme du gabarit de rubrique, aux proportions réelles. */
.charte-diagramme {
  display: grid;
  grid-template-columns: 300fr 1000fr 340fr;
  gap: 12px;
  height: 260px;
}
.charte-diagramme__colonne {
  background: var(--tint-blue);
  display: flex;
  align-items: flex-end;
  padding: 12px;
  font: 600 10px/1.4 var(--inter);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.charte-diagramme__colonne--lecture {
  background: rgba(23, 48, 63, 0.08);
  color: var(--ink-60);
}
.charte-diagramme__colonne--appui { background: var(--tint-green); color: var(--green); }

/* Un spécimen et sa règle. */
.charte-specimen { display: flex; flex-direction: column; gap: 14px; }
.charte-specimen__titre {
  font: 600 11px/1 var(--inter);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
}
.charte-specimen__note { font-size: 15px; line-height: 1.7; color: var(--ink-72); }
.charte-specimen__cadre { border: 1px solid var(--hairline-14); }
.charte-specimen__rangee { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.charte-specimen__rangee--large { gap: 22px; }
.charte-specimen__champs { max-width: 520px; }
.charte-specimen__images { gap: 30px; }
.charte-specimen .monture,
.charte-specimen .insigne { aspect-ratio: 4 / 3; }
.charte-specimen .monture { padding: 18px; }
.charte-specimen .monture > img { max-height: 100%; }

.charte-duo,
.charte-duo--type,
.charte-duo--egal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 60px;
  align-items: start;
}
.charte-duo--type { grid-template-columns: minmax(0, 1fr) 380px; gap: 80px; }
.charte-duo--egal { grid-template-columns: 1fr 1fr; gap: 40px; }

.charte-interdits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.charte-interdit { font-size: 17px; line-height: 1.7; color: var(--ink-86); }

/* Le tableau des tours : la même liste de registre, en trois colonnes. */
.charte-tours .registre__entete,
.charte-tours .registre__ligne {
  grid-template-columns: 110px 300px minmax(0, 1fr);
  gap: 24px;
}
.charte-tours .registre__ligne { padding: 16px 0; }
.charte-tours .registre__cle { font-size: 20px; }

@media (max-width: 1080px) {
  .charte-couverture__titre { font-size: 64px; }
  .charte-couverture__armes { right: 20px; opacity: 0.25; }
  .charte-sommaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charte-encres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charte-teintes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .charte-duo,
  .charte-duo--type,
  .charte-duo--egal { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .charte-interdits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Repassé sous 40 px : retour à la graisse de texte. */
  .titre-section--charte { font-size: 34px; font-weight: 400; letter-spacing: 0; }
}

@media (max-width: 720px) {
  .charte-couverture { padding: 44px var(--marge); }
  .charte-couverture__titre { font-size: 44px; }
  .charte-couverture__texte { font-size: 17px; }
  .charte-couverture__armes { display: none; }
  .charte-sommaire { padding: 30px var(--marge); grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .charte-section { padding-top: 50px; gap: 26px; }
  .charte-section--fin { padding-bottom: 50px; }
  .charte-encres,
  .charte-teintes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .charte-encre__aplat { height: 120px; }
  .charte-duo--egal { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .charte-echelle__ligne { flex-direction: column; align-items: flex-start; gap: 10px; }
  .charte-echelle__valeur { width: auto; }
  .charte-diagramme { height: 160px; gap: 8px; }
  .charte-interdits { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .titre-section--charte { font-size: 28px; }
  .charte-tours .registre__entete { display: none; }
  .charte-tours .registre__ligne { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}


/* =========================================================================
   16. IMPRESSION
   La page s'imprime sur papier blanc, les aplats conservés.
   ========================================================================= */

@media print {
  :root { --marge: 0; }

  body { background: #fff; font-size: 12pt; }

  .barre-nav,
  .barre-mobile,
  .menu-mobile,
  .barre-admin,
  .barre-admin-mobile,
  .fil,
  .rail,
  .rail-albums,
  .rail-etapes,
  .actions,
  .voisins,
  .pellicule,
  .saut-contenu { display: none !important; }

  .page { max-width: none; }

  .gabarit-accueil,
  .gabarit-rubrique,
  .gabarit-rubrique--appui-etroit,
  .gabarit-acte,
  .gabarit-acte--appui-large,
  .gabarit-acte--appui-court,
  .gabarit-formulaire,
  .gabarit-connexion,
  .gabarit-espace {
    display: block;
  }

  a { color: var(--ink); }
  .article-corps a,
  .corps--texte a,
  .prose a { border-bottom: 0; }

  /* Les aplats et les swatches restent imprimés. */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .image-encre,
  .cadre > img,
  .pellicule__vue > img { mix-blend-mode: normal; }

  .titre-entree { font-size: 48pt; }
  .titre-page, .titre-page--large, .titre-page--tres-large { font-size: 30pt; }

  /* Le texte ne touche jamais le bord d'un aplat de couleur. */
  .charte-couverture { padding: 40px 30px; }
  /* Sans la hauteur d'écran, il faut un blanc explicite entre la ligne de
     tête et le titre : « space-between » n'a plus de place à répartir. */
  .entree { padding: 60px 30px; min-height: 0; gap: 70px; }
  .charte-couverture__armes { display: none; }
  .charte-section { padding: 40px 0 0; break-before: page; }
  .charte-duo, .charte-duo--type, .charte-duo--egal { display: block; }
  .charte-encre, .charte-teinte, .charte-regle, .charte-specimen { break-inside: avoid; }

  .pied { background: none; color: var(--ink); border-top: 1px solid var(--hairline); }
  .pied__copyright, .pied__lien { color: var(--ink); }

  h1, h2, h3, .titre-section, .bandeau-section { break-after: avoid; }
  .acte__article, .personne, .tuile, .registre__ligne { break-inside: avoid; }
}

/* =========================================================================
   LE COURS DU FRANC CHESNOIS
   Trois chiffres de tête, une courbe en SVG servie par le serveur, un
   convertisseur qui se soumet en GET : rien n'y demande de JavaScript.
   ========================================================================= */

.cours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cours .tuile-chiffre__nombre { font-size: 28px; white-space: nowrap; }

.graphique { display: block; width: 100%; height: auto; }
.graphique__grille { stroke: var(--hairline); stroke-width: 1; }
.graphique__axe {
  font: 400 14px var(--inter);
  fill: var(--ink-60);
}
.graphique__courbe {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.graphique__point { fill: var(--blue); stroke: var(--paper); stroke-width: 2; }
.graphique__cible { fill: transparent; }
.graphique__cible:hover { fill: rgba(10, 93, 142, 0.18); }

.convertisseur { display: flex; flex-direction: column; gap: 22px; max-width: 480px; }
.convertisseur__resultat { margin-top: 8px; }

@media (max-width: 720px) {
  .cours { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   LA CARTE EN GRAND
   Le rail à gauche, la carte seule à droite : elle prend toute la colonne
   et se borne à la hauteur de l'écran, sans jamais passer à l'encre grise.
   ========================================================================= */

.gabarit-carte {
  display: grid;
  align-items: start;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 70px;
}
.carte--pleine {
  max-height: calc(100vh - 220px);
  min-height: 420px;
  object-fit: contain;
  object-position: left top;
  /* Opaque : le filigrane ne doit pas transparaître sous la carte. */
  background: var(--paper);
  mix-blend-mode: normal;
}

@media (max-width: 1280px) {
  .gabarit-carte { grid-template-columns: 260px minmax(0, 1fr); gap: 50px; }
}
@media (max-width: 1080px) {
  .gabarit-carte { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .gabarit-carte > .rail { order: 3; }
  .carte--pleine { max-height: none; min-height: 0; }
}

/* L'aigle en filigrane : ancré en bas à droite de l'écran, il reste en
   place quand la page défile et s'efface derrière le pied de page. La
   page cède son fond au papier du corps pour qu'il paraisse au travers. */
.page--aigle { background: transparent; }
.page--aigle::after {
  content: '';
  position: fixed;
  right: -30px;
  bottom: -20px;
  width: min(640px, 70vw);
  aspect-ratio: 769 / 739;
  background: url(../images/aigle.png) no-repeat right bottom / contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}
@media print {
  .page--aigle::after { display: none; }
}

/* Le temps qu'il fait : trois chiffres de tête, puis un jour par tuile. */
.meteo-actuel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.meteo-actuel .tuile-chiffre__nombre { font-size: 34px; white-space: nowrap; }
/* Le relevé principal prend la rangée, l'icône à sa droite. */
.meteo-actuel > .tuile-chiffre--meteo { grid-column: 1 / -1; }
.meteo-actuel > .tuile-chiffre--meteo .tuile-chiffre__nombre { font-size: 46px; }
.meteo-jours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 720px) {
  .meteo-actuel, .meteo-jours { grid-template-columns: minmax(0, 1fr); }
}
/* L'icône du ciel se pose dans l'angle haut droit de sa tuile. */
.meteo-icone { display: block; flex: none; }
.tuile--meteo,
.tuile-chiffre--meteo { position: relative; }
.tuile--meteo { padding-right: 72px; }
.tuile-chiffre--meteo { padding-right: 110px; }
.tuile--meteo > .meteo-icone { position: absolute; top: 16px; right: 14px; }
.tuile-chiffre--meteo > .meteo-icone { position: absolute; top: 50%; right: 22px; transform: translateY(-50%); }

/* Le radar : les images empilées, une seule visible à la fois (l'animation
   est dans la page, elle dépend du nombre d'images). Le survol l'arrête. */
.radar {
  position: relative;
  width: 100%;
  max-width: calc(100vh - 220px);
  aspect-ratio: 1 / 1;
  background: var(--tint-blue);
}
.radar__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.radar__heures {
  position: absolute;
  left: 14px;
  bottom: 14px;
  height: 28px;
}
.radar__heure {
  position: absolute;
  left: 0;
  bottom: 0;
  white-space: nowrap;
  font: 600 11px/1 var(--inter);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-86);
  padding: 8px 12px;
}
.radar:hover .radar__image,
.radar:hover .radar__heure { animation-play-state: paused; }
.radar__vignette { display: block; width: 100%; height: auto; }
a.lien-bloc:hover .radar__vignette { outline: 2px solid var(--blue); }