/* =====================================================================
   BLACKLAND CHRONOLOGY — feuille unique, aucune requete externe.
   Squelette impose : « chronologie » (fuseau vertical date, annee > mois >
   entree), rhabille en « The Field Dispatch » : un pupitre de depouillement
   ou chaque fait arrive avec sa cote de document, son degre de certitude et
   la mention de ce que le registre ne dit pas.
   Prefixe de classes : fd- (field dispatch). Vocabulaire du releve de terrain
   (releve, strate, couche, consigne, borne, cote, decennie, cadastre, fiche).
   Matiere : argile seche, papier journal chaud, rouille de la place du
   tribunal, laiton des plaques commemoratives.
   ===================================================================== */

/* REGLE NEGATIVE 1 : la rouille (--rouille) n'existe que sur les bornes d'axe,
   le filet gauche des cotes et les liens. Jamais dans un titre, jamais en fond
   d'une zone de texte, jamais en aplat large. */
/* REGLE NEGATIVE 2 : le laiton (--laiton) ne touche que la photographie, les
   plaques commemoratives et le focus. Un fait tire d'un acte ou d'un
   recensement n'est jamais laiton. */
/* REGLE NEGATIVE 3 : aucun blanc pur (#fff) et aucun noir pur (#000) dans la
   feuille : tout vient des dix matieres nommees ci-dessous. */

:root {
  color-scheme: light only;

  /* ---------- LES DIX MATIERES (jetons nommes par la matiere) ---------- */
  --papier:         #F3EFE7;  /* papier journal chaud, non blanchi : fond general */
  --argile:         #E4D7C7;  /* argile cuite du sol de la prairie : blocs et pied */
  --argile-voile:   #EFE6DA;  /* argile delavee a l'eau : etiquettes, encart, tableaux */
  --encre:          #2A2622;  /* encre d'impression grasse : texte et titres */
  --encre-attenuee: #5E564D;  /* encre passee au soleil : resumes, legendes, mentions */
  --rouille:        #8A5F46;  /* ferrure rouillee de la place : bornes, filets de cote, liens */
  --laiton:         #9A7B3F;  /* laiton d'une plaque : photographie, plaque, focus */
  --filet:          #C4B09B;  /* fil de reliure de registre : axe, bordures, separateurs */
  --filet-fort:     #A08A72;  /* tranche de carton d'un dossier : filets marques */
  --calcaire:       #FBF9F5;  /* calcaire clair des fondations : section retournee */

  /* ---------- TYPOGRAPHIE (trois piles systeme, aucun fichier de police) ---------- */
  --titre-police:   Optima, Candara, "Gill Sans Nova", "Gill Sans MT", "Trebuchet MS", sans-serif;
  --texte-police:   "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --chiffre-police: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", sans-serif;

  --corps-taille:   clamp(1.02rem, 0.96rem + 0.28vw, 1.12rem);
  --interligne:     1.66;
  --mesure:         68ch;

  /* ---------- MESURES ET RYTHME ---------- */
  --emprise:        76rem;
  --rail-largeur:   13.5rem;
  --pas:            clamp(1.05rem, 0.6rem + 1.7vw, 2.1rem);
  --gouttiere:      clamp(1rem, 0.5rem + 2vw, 2.75rem);
  --rayon:          0;
  --trait:          1px;
  --trait-fort:     2px;
  --debord:         clamp(0.6rem, 2.4vw, 2.6rem);

  /* ---------- GEOMETRIE DU RELEVE (les trois variables bougent ensemble) ---------- */
  --axe-retrait:    5.9rem;   /* retrait de la colonne des consignes */
  --axe-position:   4.5rem;   /* distance du filet vertical au bord gauche */
  --borne-taille:   9px;      /* cote du carre tourne a 45 degres */
  --hauteur-collee: 0.4rem;

  /* ---------- RATIOS D'IMAGE (trois cadrages nommes) ---------- */
  --ratio-consigne: 3 / 2;    /* la scene moyenne, entree du releve et article */
  --ratio-cadastre: 21 / 9;   /* la scene large, section retournee et ouverture */
  --ratio-piece:    4 / 5;    /* le document ou l'objet isole, en marge d'article */
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Garde-fou anti debordement. « clip » et non « hidden » : « hidden »
     creerait un conteneur de defilement et casserait les elements colles
     (annee de decennie, rail des periodes). */
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body.fd-page {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte-police);
  font-size: var(--corps-taille);
  line-height: var(--interligne);
  overflow-x: clip;
}

img, svg, table { max-width: 100%; }
img { height: auto; display: block; }
/* L'image est cadree par le CSS : aucune geometrie n'est recalculee ici. */
.fd-image img { width: 100%; height: 100%; object-fit: cover; }
.fd-image { display: block; }

h1, h2, h3, h4 {
  font-family: var(--titre-police);
  margin: 0;
  text-wrap: balance;
}
h1 { font-weight: 700; font-size: clamp(1.85rem, 1.2rem + 2.1vw, 2.6rem); letter-spacing: -0.012em; line-height: 1.12; }
h2 { font-weight: 700; font-size: 1.45rem; letter-spacing: 0.005em; line-height: 1.18; }
h3 { font-weight: 600; font-size: 1.12rem; letter-spacing: 0.04em; line-height: 1.24; }
h4 { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }

p, ul, ol, dl, figure, blockquote, table { margin: 0; }

/* Le troisieme role typographique (condensee) porte EXCLUSIVEMENT les dates du
   releve, les grands nombres de decennie, les libelles fd-cote et les colonnes
   chiffrees des tableaux. Jamais un titre, jamais un paragraphe. */
.fd-consigne__date, .fd-cote, .fd-mesures__valeur, .fd-mesures__intitule,
.fd-strate__annee, .fd-strate__mesure, .fd-rail__periode, .fd-rail__compte,
.fd-couche__compte, .fd-tableau, .fd-tableau__legende, .fd-consigne__duree,
.fd-chapeau__date, .fd-chapeau__duree, .fd-rail-cote__date, .fd-suite__annee,
.fd-legende__periode, .fd-voisinage__annee, .fd-pied__mention {
  font-family: var(--chiffre-police);
  font-variant-numeric: tabular-lining;
}

a { color: inherit; text-decoration: none; }
.fd-texte a, .fd-cadastre a, .fd-fiche-de-cote a, .fd-suite a, .fd-periode__resume a {
  color: var(--encre);
  border-bottom: var(--trait) solid var(--rouille);
}
.fd-texte a:hover, .fd-cadastre a:hover, .fd-fiche-de-cote a:hover, .fd-suite a:hover {
  color: var(--rouille);
  border-bottom-color: var(--encre);
}

:focus-visible {
  outline: var(--trait-fort) solid var(--laiton);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   STRUCTURE GENERALE
   --------------------------------------------------------------------- */
.fd-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 30;
  background: var(--encre);
  color: var(--papier);
  padding: 0.6rem 1rem;
  font-family: var(--titre-police);
}
.fd-evitement:focus { left: 0.5rem; top: 0.5rem; }

.fd-emprise {
  width: 100%;
  max-width: var(--emprise);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* Grille du corps : rail des decennies + releve. */
.fd-champ {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pas);
  align-items: start;
  padding-bottom: calc(var(--pas) * 2.4);
}
@media (min-width: 62rem) {
  .fd-champ {
    grid-template-columns: var(--rail-largeur) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}
.fd-champ--piece { padding-top: var(--pas); }

/* ---------------------------------------------------------------------
   1. ENSEIGNE (fd-enseigne) : dire ou on est, une ligne, aucun bouton
   --------------------------------------------------------------------- */
.fd-enseigne {
  background-color: var(--papier);
  /* La trame de registre monte jusqu'a l'entete : le papier regle d'un livre
     de comptes de comte passe sous le titre et sous la navigation, puis se
     retrouve au fond du bloc de chaque periode. Ces deux fonds sont les seuls
     que la trame touche. */
  background-image: repeating-linear-gradient(
    to bottom, rgba(196, 176, 155, 0) 0 6px, rgba(196, 176, 155, 0.22) 6px 7px);
}
.fd-enseigne__inter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem var(--pas);
  padding-block: calc(var(--pas) * 0.8) calc(var(--pas) * 0.6);
}
.fd-enseigne__marque {
  display: block;
  font-family: var(--titre-police);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.02rem + 1.1vw, 1.72rem);
  letter-spacing: -0.01em;
  color: var(--encre);
}
.fd-enseigne__marque:hover { color: var(--rouille); }
.fd-enseigne__mention {
  display: block;
  margin-top: 0.18rem;
  font-family: var(--chiffre-police);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
}
.fd-enseigne__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.3rem;
  list-style: none;
  padding: 0;
  font-family: var(--titre-police);
  font-size: 0.97rem;
}
.fd-enseigne__liste a {
  color: var(--encre);
  padding-bottom: 0.12rem;
  border-bottom: var(--trait-fort) solid transparent;
}
.fd-enseigne__liste a:hover,
.fd-enseigne__liste a[aria-current="page"] {
  color: var(--rouille);
  border-bottom-color: var(--rouille);
}
/* Deux etats de navigation, sans JS : case a cocher, jamais <details>. */
.fd-menu-case { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fd-menu-declencheur {
  display: none;
  font-family: var(--titre-police);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--encre);
  border: var(--trait) solid var(--filet-fort);
  background: var(--argile-voile);
  padding: 0.32rem 0.7rem;
  cursor: pointer;
}
@media (max-width: 61.999rem) {
  .fd-menu-declencheur { display: inline-block; }
  .fd-enseigne__acces { position: relative; }
  .fd-enseigne__liste {
    display: none;
    position: absolute;
    right: 0;
    z-index: 12;
    min-width: 15rem;
    flex-direction: column;
    gap: 0;
    background: var(--argile-voile);
    border: var(--trait) solid var(--filet-fort);
    border-top: var(--trait-fort) solid var(--encre);
    padding: 0.4rem 0.8rem 0.7rem;
  }
  .fd-menu-case:checked ~ .fd-enseigne__liste { display: flex; }
  .fd-enseigne__liste li { padding-block: 0.35rem; border-bottom: var(--trait) solid var(--filet); }
  .fd-enseigne__liste li:last-child { border-bottom: 0; }
}
.fd-enseigne__filet {
  display: block;
  height: var(--trait-fort);
  background: var(--encre);
}

/* ---------------------------------------------------------------------
   2. PREAMBULE (fd-preambule) : h1 date, trois phrases, lettrine
   --------------------------------------------------------------------- */
.fd-preambule {
  max-width: var(--mesure);
  padding-block: calc(var(--pas) * 2.2) var(--pas);
}
.fd-preambule__sur {
  font-family: var(--chiffre-police);
  font-size: 0.76rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
  margin-bottom: 0.7rem;
}
.fd-preambule__titre { max-width: 34ch; }
.fd-preambule__texte {
  margin-top: 1rem;
  font-size: 1.04em;
  color: var(--encre-attenuee);
}
.fd-preambule__texte + .fd-preambule__texte { margin-top: 0.9rem; }
/* La lettrine : Iowan Old Style sur trois lignes, filet de rouille a gauche. */
.fd-lettrine::first-letter {
  float: left;
  font-family: var(--texte-police);
  font-size: 3.55em;
  line-height: 0.82;
  font-weight: 400;
  color: var(--encre);
  padding: 0.06em 0.14em 0 0;
  margin-right: 0.06em;
  border-left: var(--trait-fort) solid var(--rouille);
  padding-left: 0.12em;
  margin-top: 0.06em;
}
/* Le meme geste de lettrine ouvre les articles de service. */
.fd-texte > p:first-of-type::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.84;
  padding: 0.04em 0.12em 0 0;
}

/* ---------------------------------------------------------------------
   3. MESURES (fd-mesures) : trois chiffres verifiables, dense
   --------------------------------------------------------------------- */
.fd-mesures {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.4rem, 4vw, 3.2rem);
  margin-top: calc(var(--pas) * 1.3);
  padding-top: 0.9rem;
  border-top: var(--trait) solid var(--filet);
}
.fd-mesures__mesure { padding-block: 0.35rem; }
.fd-mesures__mesure + .fd-mesures__mesure { border-left: var(--trait) solid var(--filet); padding-left: clamp(1.4rem, 4vw, 3.2rem); }
.fd-mesures__intitule {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
}
.fd-mesures__valeur {
  margin-top: 0.1rem;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------
   4. RAIL DES PERIODES (fd-rail) : une ligne par decennie remplie
   --------------------------------------------------------------------- */
.fd-rail { border-top: var(--trait-fort) solid var(--encre); padding-top: 0.7rem; }
.fd-rail__titre {
  font-family: var(--chiffre-police);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
  margin-bottom: 0.5rem;
}
.fd-rail__liste {
  list-style: none;
  padding: 0 0 0.4rem;
  margin: 0;
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.fd-rail__periode {
  display: inline-flex;
  flex-direction: column;
  white-space: nowrap;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.34rem 0.62rem;
  border: var(--trait) solid var(--filet);
  color: var(--encre);
}
.fd-rail__periode:hover { border-color: var(--rouille); color: var(--rouille); }
.fd-rail__periode--active { background: var(--argile); border-color: var(--filet-fort); }
.fd-rail__compte { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.05em; color: var(--encre-attenuee); }
@media (min-width: 62rem) {
  .fd-rail { position: sticky; top: var(--hauteur-collee); padding-top: 1.1rem; }
  .fd-rail__liste { flex-direction: column; gap: 0; overflow: visible; }
  .fd-rail__periode {
    border: 0;
    border-left: var(--trait-fort) solid var(--filet);
    padding: 0.42rem 0.7rem;
    font-size: 1.16rem;
  }
  .fd-rail__periode:hover { border-left-color: var(--rouille); }
  .fd-rail__periode--active { background: none; border-left: 5px solid var(--rouille); padding-left: calc(0.7rem - 3px); }
}

/* ---------------------------------------------------------------------
   5. LE RELEVE (fd-releve) : decennie (fd-strate) > periode (fd-couche)
      > consigne (fd-consigne). C'est le coeur de l'accueil.
   --------------------------------------------------------------------- */
.fd-releve { min-width: 0; }
.fd-releve__sur {
  font-family: var(--chiffre-police);
  font-size: 0.76rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
}
.fd-releve__titre { margin-bottom: 0.7rem; padding-bottom: 0.4rem; border-bottom: var(--trait-fort) solid var(--encre); }
.fd-releve--interne { margin-top: calc(var(--pas) * 1.8); }

.fd-strate { margin-top: calc(var(--pas) * 1.5); scroll-margin-top: 3.2rem; }
.fd-strate:first-of-type { margin-top: var(--pas); }

/* SIGNATURE C : la rupture de decennie. Filet d'encre de 2 px, grand nombre
   en condensee 3,1 rem a moitie sorti de la colonne, mesure de la periode a
   droite. Element colle en haut de l'ecran pendant le defilement. */
.fd-decennie, .fd-strate__socle {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 1rem;
  background: var(--papier);
  border-top: var(--trait-fort) solid var(--encre);
  padding: 0.5rem 0 0.42rem;
  margin-left: calc(-1 * (var(--gouttiere) + var(--debord)));
  padding-left: calc(var(--gouttiere) + var(--debord));
}
.fd-strate__annee {
  font-size: 3.1rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--encre);
}
.fd-strate__mesure {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
}
/* Version reduite de la meme rupture : voisinage d'article. */
.fd-voisinage__annee {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--encre);
}

.fd-couche {
  margin-top: calc(var(--pas) * 1.1);
  scroll-margin-top: 4.2rem;
  /* La trame de registre : de tres fines lignes horizontales tous les 7 px,
     pour le papier regle d'un livre de comptes de comte. Elle touche deux
     fonds : celui de l'entete (fd-enseigne) et celui du bloc de chaque
     periode, jamais un troisieme. */
  background-image: repeating-linear-gradient(
    to bottom, rgba(196, 176, 155, 0) 0 6px, rgba(196, 176, 155, 0.22) 6px 7px);
}
.fd-couche__seuil {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
  padding: 0.7rem 0 0.45rem;
  border-bottom: var(--trait) solid var(--filet);
}
.fd-couche__compte { font-size: 0.74rem; letter-spacing: 0.08em; }

/* La colonne des consignes porte l'axe vertical continu. */
.fd-consignes {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0 0 var(--axe-retrait);
  position: relative;
}
.fd-consignes::before {
  content: "";
  position: absolute;
  left: var(--axe-position);
  top: 0;
  bottom: 0;
  width: var(--trait-fort);
  transform: translateX(-50%);
  background: var(--filet);
}
.fd-consignes--serre { padding-top: 0.5rem; }

.fd-consigne {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem 1.1rem;
  padding-bottom: calc(var(--pas) * 1.05);
}
.fd-consigne:last-child { padding-bottom: 0.4rem; }

/* SIGNATURE A : la borne d'arpentage. Un carre de 9 px tourne a 45 degres,
   borde de 2 px de brun de rouille, centre sur l'axe du releve. Plein sur la
   premiere consigne de chaque periode, creux partout ailleurs. Reemploi :
   consigne du releve, ligne du rail de cote, nature du Record Ledger,
   voisinage d'article. */
.fd-consigne::before,
.fd-rail-cote__ligne::before,
.fd-fiche-de-cote__nature::before,
.fd-voisinage__lien::before {
  content: "";
  position: absolute;
  width: var(--borne-taille);
  height: var(--borne-taille);
  transform: translateX(-50%) rotate(45deg);
  background: var(--papier);
  border: var(--trait-fort) solid var(--rouille);
}
.fd-consigne::before { left: calc(var(--axe-position) - var(--axe-retrait)); top: 0.62rem; }
.fd-consigne:first-child::before { background: var(--rouille); }
.fd-rail-cote__ligne::before { left: calc(-1 * var(--borne-taille)); top: 0.4rem; transform: rotate(45deg); }
.fd-fiche-de-cote__nature::before { left: 0; top: 0.55rem; transform: rotate(45deg); }
.fd-voisinage__lien::before { left: calc(var(--gouttiere) * 0.55); top: calc(var(--gouttiere) * 0.6); transform: rotate(45deg); }

/* SIGNATURE B : la consigne a deux temps. La date en condensee a gauche,
   une phrase forte, puis un paragraphe de contexte. */
.fd-consigne__date {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--encre);
}
.fd-consigne__titre { max-width: var(--mesure); }
.fd-consigne__titre a { color: var(--encre); border-bottom: var(--trait) solid var(--filet-fort); }
.fd-consigne__titre a:hover { color: var(--rouille); border-bottom-color: var(--rouille); }
.fd-consigne__eclat { max-width: var(--mesure); color: var(--encre-attenuee); }
.fd-consigne__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; }
.fd-consigne__duree { font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--encre-attenuee); }
@media (min-width: 44rem) {
  .fd-consigne { grid-template-columns: 5.4rem minmax(0, 1fr); }
  .fd-consigne__date { grid-column: 1; padding-top: 0.12rem; }
  .fd-consigne__titre, .fd-consigne__eclat, .fd-consigne__pied, .fd-figure { grid-column: 2; }
  .fd-consigne__eclat { margin-top: 0.35rem; }
  .fd-consigne__pied { margin-top: 0.55rem; }
}

/* SIGNATURE B (suite) : l'etiquette de cote de document. Condensee,
   capitales espacees, fond d'argile claire, filet de 3 px de rouille a
   gauche. Elle remplace le « jalon » du squelette. */
.fd-cote {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.28em 0.6em 0.24em;
  background: var(--argile-voile);
  border-left: 3px solid var(--rouille);
  color: var(--encre-attenuee);
}
.fd-cote--photographie, .fd-cote--photograph { border-left-color: var(--laiton); }
.fd-cote--landscape, .fd-cote--street { border-left-color: var(--filet-fort); }
.fd-cote--object, .fd-cote--document { border-left-color: var(--rouille); }

/* La borne decoratives des legendes : meme dessin, jamais cliquable. */
.fd-borne {
  display: inline-block;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border: var(--trait-fort) solid var(--rouille);
  background: transparent;
  vertical-align: 0.05em;
}

/* ---------------------------------------------------------------------
   6. LE CADASTRE (fd-cadastre) : la seule section retournee, en calcaire,
      qui deborde des marges de la page, avec l'image 21/9.
   --------------------------------------------------------------------- */
.fd-cadastre {
  background: var(--calcaire);
  border-block: var(--trait) solid var(--filet);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-block: 5.4rem;
}
.fd-cadastre__inter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pas);
  align-items: end;
  padding-inline: 0;
  max-width: var(--emprise);
  margin-inline: auto;
}
@media (min-width: 56rem) {
  .fd-cadastre__inter { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 2.6vw, 2.4rem); }
  .fd-cadastre__texte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 0 clamp(1.6rem, 3.4vw, 3.4rem);
    align-items: start;
  }
  .fd-cadastre__titre, .fd-cadastre__chapo { grid-column: 1; }
  .fd-cadastre__suite { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
.fd-cadastre__titre { font-size: 1.45rem; }
.fd-cadastre__chapo { margin-top: 0.5rem; font-family: var(--titre-police); font-size: 1.02rem; color: var(--encre-attenuee); }
.fd-cadastre__suite { margin-top: 0.85rem; max-width: var(--mesure); }
.fd-cadastre__lien { font-family: var(--chiffre-police); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.fd-cadastre .fd-legende { border-left-color: var(--laiton); }

/* ---------------------------------------------------------------------
   7. LA FICHE DE COTE (fd-fiche-de-cote) : l'idee inattendue.
      Huit natures de registre, trois lignes chacune, dont la ligne centrale
      dit ce que la piece NE prouve PAS.
   --------------------------------------------------------------------- */
.fd-fiche-de-cote {
  margin-top: calc(var(--pas) * 2.2);
  border-top: var(--trait) solid var(--laiton);
  padding-top: calc(var(--pas) * 1.1);
}
.fd-fiche-de-cote__titre { max-width: 46ch; }
.fd-fiche-de-cote__intro { margin-top: 0.6rem; max-width: var(--mesure); color: var(--encre-attenuee); }
.fd-fiche-de-cote__fin { margin-top: var(--pas); max-width: var(--mesure); color: var(--encre-attenuee); font-size: 0.96em; }
.fd-fiche-de-cote__liste {
  margin-top: calc(var(--pas) * 1.1);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
@media (min-width: 56rem) {
  .fd-fiche-de-cote__liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); }
}
.fd-fiche-de-cote__nature {
  position: relative;
  padding: 0.9rem 0 1.05rem 1.5rem;
  border-top: var(--trait) solid var(--filet);
}
.fd-fiche-de-cote__nom { margin: 0; }
.fd-fiche-de-cote__corps { margin: 0.55rem 0 0; }
.fd-fiche-de-cote--extrait { margin-top: calc(var(--pas) * 1.8); }

/* Le <dl> a trois entrees : ce que la piece prouve, ce qu'elle ne prouve pas,
   ou elle est conservee. Le troisieme role typographique ne touche pas ces
   termes : ils restent en Optima. */
.fd-lecture { margin: 0; }
.fd-lecture__terme {
  font-family: var(--titre-police);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre);
}
.fd-lecture__terme + .fd-lecture__definition { margin-top: 0.2rem; }
.fd-lecture__definition + .fd-lecture__terme { margin-top: 0.6rem; }
.fd-lecture__definition { color: var(--encre-attenuee); font-size: 0.98em; }
.fd-lecture-bloc { margin-top: calc(var(--pas) * 1.8); border-top: var(--trait-fort) solid var(--encre); padding-top: 0.9rem; max-width: var(--mesure); }
.fd-lecture-bloc__titre { margin-bottom: 0.7rem; }
.fd-lecture-bloc__renvoi { margin-top: 0.9rem; font-size: 0.95em; color: var(--encre-attenuee); }

/* ---------------------------------------------------------------------
   8. ANCIENNES (fd-anciennes) : l'acces aux periodes plus anciennes
   --------------------------------------------------------------------- */
.fd-anciennes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: baseline;
  justify-content: space-between;
  margin-top: calc(var(--pas) * 1.8);
  padding-top: 0.85rem;
  border-top: var(--trait) solid var(--filet-fort);
}
.fd-anciennes a {
  font-family: var(--titre-police);
  font-size: 0.98rem;
  border-bottom: var(--trait-fort) solid var(--argile);
}
.fd-anciennes a:hover { border-bottom-color: var(--rouille); }

/* ---------------------------------------------------------------------
   9. LE PIED QUI PROUVE (fd-pied)
   --------------------------------------------------------------------- */
.fd-pied {
  background: var(--argile);
  border-top: var(--trait) solid var(--laiton);
  margin-top: calc(var(--pas) * 2);
  padding-block: calc(var(--pas) * 1.6) var(--pas);
}
.fd-pied__inter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pas);
  align-items: start;
}
@media (min-width: 48rem) {
  .fd-pied__inter { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2.4rem); }
}
.fd-pied__titre {
  font-family: var(--chiffre-police);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
  padding-bottom: 0.45rem;
  border-bottom: var(--trait) solid var(--filet-fort);
  margin-bottom: 0.7rem;
}
.fd-pied__texte { font-size: 0.94rem; color: var(--encre); }
.fd-pied__texte strong { font-weight: 700; }
.fd-pied__cote { margin-top: 0.8rem; }
.fd-pied__liens {
  list-style: none;
  padding: 0;
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  font-family: var(--titre-police);
  font-size: 0.97rem;
}
.fd-pied__liens a { border-bottom: var(--trait) solid var(--filet-fort); }
.fd-pied__liens a:hover { color: var(--rouille); border-bottom-color: var(--rouille); }
.fd-pied__pied {
  margin-top: calc(var(--pas) * 1.2);
  padding-top: 0.8rem;
  border-top: var(--trait) solid var(--filet-fort);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  align-items: baseline;
  justify-content: space-between;
}
.fd-pied__mention { font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--encre-attenuee); }
.fd-pied__mention a { border-bottom: var(--trait) solid var(--filet-fort); }
.fd-pied__decennies { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.95rem; font-family: var(--titre-police); }
.fd-pied__decennies a { border-bottom: var(--trait) solid var(--filet-fort); }

/* ---------------------------------------------------------------------
   PAGE DE PERIODE (hub de rubrique) et PAGE DE FOND (article)
   --------------------------------------------------------------------- */
.fd-corps { min-width: 0; }
.fd-piece { display: block; }

.fd-fil { margin-bottom: var(--pas); }
.fd-fil__liste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  font-family: var(--chiffre-police);
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
}
.fd-fil__liste li + li::before { content: "/"; margin-right: 0.5rem; color: var(--filet-fort); }
.fd-fil__liste a { color: var(--encre-attenuee); }
.fd-fil__liste a:hover { color: var(--rouille); }

.fd-periode { padding-bottom: var(--pas); border-bottom: var(--trait-fort) solid var(--encre); }
.fd-periode__situation {
  font-family: var(--chiffre-police);
  font-size: 0.78rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
}
.fd-periode__annee { margin-top: 0.35rem; max-width: 30ch; }
.fd-periode__resume { margin-top: 0.85rem; max-width: var(--mesure); color: var(--encre-attenuee); }
.fd-sauts { margin-top: var(--pas); }
.fd-sauts__liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fd-sauts__liste a {
  display: inline-block;
  font-family: var(--chiffre-police);
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--encre);
  background: var(--argile-voile);
  border: var(--trait) solid var(--filet);
  padding: 0.28rem 0.6rem;
}
.fd-sauts__liste a:hover { color: var(--rouille); border-color: var(--rouille); }

.fd-chapeau { padding-bottom: var(--pas); border-bottom: var(--trait-fort) solid var(--encre); max-width: var(--mesure); }
.fd-chapeau__cote { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 0.7rem; }
.fd-chapeau__record { font-family: var(--chiffre-police); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-attenuee); }
.fd-chapeau__titre { margin-top: 0.35rem; }
.fd-chapeau__accroche { margin-top: 0.75rem; font-size: 1.08em; color: var(--encre-attenuee); }
.fd-chapeau__jalons { margin-top: 0.95rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; }
.fd-chapeau__date, .fd-chapeau__duree { font-size: 0.78rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--encre-attenuee); }
.fd-chapeau__auteur { font-family: var(--titre-police); font-size: 0.95rem; color: var(--encre); }

/* La ligne de reserve : italique serif, emplacement fixe juste apres le
   chapeau. C'est le SEUL usage de l'italique du texte serif sur ce site :
   jamais pour de l'emphase ordinaire, jamais pour un titre d'ouvrage. */
.fd-reserve {
  margin-top: calc(var(--pas) * 1.1);
  max-width: var(--mesure);
  font-style: italic;
  font-size: 1.02em;
  color: var(--encre);
  border-left: 3px solid var(--rouille);
  padding-left: 1rem;
}
.fd-reserve--ledger { margin-top: 0; margin-bottom: calc(var(--pas) * 1.1); }

/* Le rail de cote : colonne de 15 rem collee a droite de la lecture au-dessus
   de 1040 px ; sous 1040 px il se replie en bloc horizontal avant le corps. */
.fd-rail-cote {
  margin-top: calc(var(--pas) * 1.6);
  border-top: var(--trait-fort) solid var(--encre);
  padding-top: 0.7rem;
  order: 3;
}
.fd-rail-cote__titre {
  font-family: var(--chiffre-police);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
  margin-bottom: 0.6rem;
}
.fd-rail-cote__liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.fd-rail-cote__ligne { position: relative; padding-left: 0.9rem; max-width: 26rem; }
.fd-rail-cote__date { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; color: var(--encre); }
.fd-rail-cote__ligne a { font-family: var(--titre-police); font-size: 0.95rem; border-bottom: var(--trait) solid var(--filet-fort); }
/* Le rail de cote tient la colonne de droite de l'article lui-meme. Le seuil
   est plus haut que les 1040 px prevus au brief : le rail des decennies occupe
   deja la gauche, et sous 77rem la colonne de lecture passerait sous la mesure
   de 68ch. Au-dessus, la colonne de 15rem est reellement occupee ; en dessous,
   le rail redevient un bloc horizontal. */
@media (min-width: 77rem) {
  .fd-piece {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    column-gap: clamp(1.6rem, 3vw, 3rem);
    align-items: start;
  }
  .fd-piece > * { grid-column: 1; }
  .fd-piece > .fd-rail-cote {
    grid-column: 2;
    grid-row: 1 / span 8;
    margin-top: 0;
    position: sticky;
    top: 1rem;
  }
  .fd-rail-cote__liste { flex-direction: column; gap: 0.7rem; }
  .fd-corps > .fd-voisinage, .fd-corps > .fd-suite {
    max-width: calc(100% - 15rem - clamp(1.6rem, 3vw, 3rem));
  }
}

/* Corps redactionnel */
.fd-texte, .fd-long { max-width: var(--mesure); }
.fd-texte { padding-top: calc(var(--pas) * 0.9); }
.fd-texte > * + * { margin-top: 1.1em; }
.fd-texte h2, .fd-intertitre {
  margin-top: calc(var(--pas) * 1.3);
  font-size: 1.45rem;
  padding-bottom: 0.3rem;
  border-bottom: var(--trait) solid var(--filet);
}
.fd-sous-titre {
  margin-top: calc(var(--pas) * 0.9);
  color: var(--encre-attenuee);
  font-size: 1.12rem;
  letter-spacing: 0.04em;
}
.fd-liste { padding-left: 1.2rem; }
.fd-liste li { margin-top: 0.4rem; }
.fd-liste li::marker { color: var(--rouille); }
.fd-long { margin-top: calc(var(--pas) * 2.2); }
.fd-long__titre { max-width: 40ch; margin-bottom: 0.4rem; }

/* Figures et legendes : quatre segments separes par une borne. */
.fd-figure { margin-top: calc(var(--pas) * 1.1); }
.fd-figure .fd-image { border: var(--trait) solid var(--filet-fort); }
.fd-figure--consigne .fd-image { aspect-ratio: var(--ratio-consigne); }
.fd-figure--ouverture .fd-image { aspect-ratio: var(--ratio-consigne); }
.fd-figure--cadastre { margin-top: 0; grid-column: 1 / -1; }
.fd-figure--cadastre .fd-image { aspect-ratio: var(--ratio-cadastre); }
.fd-figure--piece .fd-image { aspect-ratio: var(--ratio-piece); }
.fd-legende {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.5rem;
  font-size: 0.86rem;
  color: var(--encre-attenuee);
  border-left: var(--trait-fort) solid var(--rouille);
  padding-left: 0.7rem;
}
.fd-legende__lieu { font-family: var(--titre-police); font-weight: 600; color: var(--encre); }
.fd-legende__periode { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }
.fd-legende__origine { font-size: 0.82rem; }
@media (min-width: 44rem) {
  .fd-piece-marge { float: right; width: 14rem; margin: 0.4rem 0 1rem 1.6rem; }
}

/* Citation (uniquement un ouvrage nomme), encart, tableau. */
.fd-citation {
  margin-top: calc(var(--pas) * 1.2);
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 5px solid var(--laiton);
  font-size: 1.14em;
  font-style: italic;
}
.fd-encart {
  margin-top: calc(var(--pas) * 1.3);
  background: var(--argile-voile);
  border: var(--trait) solid var(--filet);
  border-top: var(--trait-fort) solid var(--encre);
  padding: calc(var(--pas) * 0.85);
}
.fd-encart__titre { font-size: 1.05rem; margin-bottom: 0.5rem; }
.fd-tableau-defilant {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: var(--trait) solid var(--filet);
  background: var(--argile-voile);
  max-width: 100%;
}
.fd-tableau { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: 0.92rem; }
.fd-tableau__legende {
  caption-side: top;
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
  border-bottom: var(--trait) solid var(--filet);
}
.fd-tableau th, .fd-tableau td { padding: 0.5rem 0.8rem; text-align: left; border-bottom: var(--trait) solid var(--filet); }
.fd-tableau thead th { font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--encre-attenuee); }
.fd-tableau tbody th { font-weight: 700; }
.fd-tableau tbody tr:last-child th, .fd-tableau tbody tr:last-child td { border-bottom: 0; }

/* Corrections datees */
.fd-revision {
  margin-top: calc(var(--pas) * 1.7);
  max-width: var(--mesure);
  border-top: var(--trait-fort) solid var(--filet-fort);
  padding-top: 0.9rem;
}
.fd-revision__titre {
  font-family: var(--chiffre-police);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
}
.fd-revision__liste { list-style: none; padding: 0; margin-top: 0.6rem; font-size: 0.94rem; color: var(--encre-attenuee); }
.fd-revision__liste li { margin-top: 0.35rem; }
.fd-revision__liste time { font-family: var(--chiffre-police); font-weight: 700; color: var(--encre); }

/* Voisinage : deux entrees encadrantes, chacune portant sa borne. */
.fd-voisinage {
  display: grid;
  gap: var(--trait-fort);
  margin-top: calc(var(--pas) * 1.7);
  background: var(--filet);
  border-block: var(--trait-fort) solid var(--filet);
}
@media (min-width: 44rem) { .fd-voisinage { grid-template-columns: 1fr 1fr; } }
.fd-voisinage__lien {
  position: relative;
  display: block;
  background: var(--argile-voile);
  padding: calc(var(--pas) * 0.8) calc(var(--gouttiere) * 0.8) calc(var(--pas) * 0.8) calc(var(--gouttiere) * 1.1);
  color: var(--encre);
}
.fd-voisinage__lien:hover { background: var(--argile); }
.fd-voisinage__sens {
  display: block;
  font-family: var(--chiffre-police);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
}
.fd-voisinage__titre { display: block; margin-top: 0.3rem; font-family: var(--titre-police); font-size: 1.02rem; font-weight: 600; }

/* Renvois prevus par la matrice interne : une section editoriale, jamais un
   bloc « liens utiles » ni un pied de page. */
.fd-suite { margin-top: calc(var(--pas) * 1.8); border-top: var(--trait-fort) solid var(--encre); padding-top: 0.9rem; }
.fd-suite__titre { font-size: 1.2rem; margin-bottom: 0.7rem; }
.fd-suite__liste { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.fd-suite__ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 0.8rem; }
.fd-suite__annee { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.11em; color: var(--encre); }
.fd-suite a { font-family: var(--titre-police); font-size: 1rem; border-bottom: var(--trait) solid var(--filet-fort); }


/* ---------------------------------------------------------------------
   COMPLEMENTS DE FAMILLE (chaque classe du DOM a sa regle)
   --------------------------------------------------------------------- */
.fd-enseigne__identite { min-width: 0; }
.fd-pied__colonne { min-width: 0; }
.fd-rail__ligne { min-width: 0; }
.fd-rail-cote__marque { display: none; }
.fd-anciennes__amont, .fd-anciennes__aval { min-width: 0; }
.fd-voisinage__amont, .fd-voisinage__aval { min-width: 0; }
.fd-cadastre__texte { min-width: 0; }
.fd-consigne--illustree .fd-figure { margin-top: 0.6rem; }
.fd-long__sur {
  font-family: var(--chiffre-police);
  font-size: 0.76rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--encre-attenuee);
  margin-bottom: 0.6rem;
}
.fd-long__titre { max-width: 40ch; margin-bottom: 0.4rem; }

/* ---------------------------------------------------------------------
   MOBILE : le releve perd ses colonnes, jamais ses bornes.
   --------------------------------------------------------------------- */
@media (max-width: 43.999rem) {
  :root { --axe-position: 1.6rem; --axe-retrait: 3.1rem; }
  .fd-decennie, .fd-strate__socle { margin-left: calc(-1 * var(--gouttiere)); padding-left: var(--gouttiere); }
  .fd-strate__annee { font-size: 2.3rem; }
  .fd-consigne { padding-left: 0; }
  .fd-consigne__date { margin-bottom: 0.3rem; }
  .fd-cadastre { padding-block: 2.6rem; }
  .fd-cadastre .fd-legende { border-left-color: var(--filet-fort); }
  .fd-mesures__mesure + .fd-mesures__mesure { border-left: 0; padding-left: 0; }
  .fd-mesures__mesure:nth-child(3) { display: none; }
  .fd-fiche-de-cote__liste { grid-template-columns: minmax(0, 1fr); }
  .fd-pied__inter { grid-template-columns: minmax(0, 1fr); }
  .fd-piece-marge { float: none; width: auto; margin: 0; }
  .fd-figcaption { border-left-color: var(--filet-fort); }
  .fd-rail-cote__liste { flex-direction: row; }
}

/* ---------------------------------------------------------------------
   VERIFICATIONS IMPOSEES
   - 320 px : aucune barre de defilement horizontale sur la page (les
     tableaux et le rail des decennies defilent dans leur propre conteneur).
   - le lien d'evitement reste atteignable et chaque lien montre son contour.
   - les images de la section retournee gardent leur debordement, jamais la page.
   --------------------------------------------------------------------- */
@media (max-width: 22rem) {
  :root { --axe-position: 1.2rem; --axe-retrait: 2.6rem; }
  .fd-strate__annee { font-size: 2rem; }
  .fd-cote { letter-spacing: 0.1em; }
}

/* ---------------------------------------------------------------------
   SIGNATURE C (suite) : des que la grille passe a deux colonnes, l'annee
   de decennie sort a moitie de la colonne de lecture et vient se poser sur
   le filet d'encre, comme une plaque d'arpentage. Sous 62rem la place
   manque : le nombre reste dans la marge et garde sa taille reduite.
   --------------------------------------------------------------------- */
@media (min-width: 62rem) {
  .fd-strate__annee { margin-left: -1.15em; }
}