/* =========================================================================
   THE UNWORN LEDGER — lex-watches.com
   Direction 10. La Carte et le Cadastre, variante « releve d'etabli ».
   Squelette : grille-annuaire (/Users/selim/Sites/_squelettes/grille-annuaire).
   Chaine : une bande de legende, des parcelles de tailles inegales, un rail
   de caracteristiques colle, un registre a filets, un pied qui prouve.
   Aucune requete distante : polices systeme, aucune image de fond, aucun
   script de carte. Le cadastre est dessine en CSS et en texte.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. JETONS. Une matiere par jeton, un role exclusif par jeton.
   ------------------------------------------------------------------------- */
:root {
  /* -- papiers ---------------------------------------------------------- */
  --cd-papier:        #FBF4E7;  /* papier de journal chaud, fin de journee : fond de page, rien d'autre */
  --cd-papier-creux:  #F3EAD8;  /* papier sous la loupe : fond des legendes, encarts, tetes de tableau */
  --cd-fiche:         #FFFCF6;  /* fiche cartonnee du comptoir : fond des parcelles et du rail */
  /* -- encres ----------------------------------------------------------- */
  --cd-encre:         #2A1B12;  /* encre grasse de tirage : texte principal et titres */
  --cd-encre-legere:  #6B5748;  /* encre affaiblie au sechage : texte secondaire, legendes d'image */
  /* -- metaux et cuirs -------------------------------------------------- */
  --cd-acier:         #7C848A;  /* acier de boitier brosse : filets, cotes, cercles, trame. JAMAIS du texte courant */
  --cd-acier-plein:   #7C848A;  /* l'acier a pleine densite, reserve a color-mix() */
  --cd-liseret:       #E3D5BC;  /* tranche de carton de fiche : bordures de fiches, separateurs */
  --cd-oxblood:       #8E2F26;  /* cuir de bracelet oxblood : liens et etat actif, rien d'autre */
  --cd-oxblood-voile: #F2E0DA;  /* teinture diluee : fond des etiquettes de rubrique uniquement */
  --cd-tritium:       #CFB98B;  /* tritium vieilli : seconde teinte de rubrique, soulignement des tetes */
  --cd-laiton:        #A8853F;  /* laiton de platine : traits de 1px et reperes de tableau, aucun aplat */
  /* -- bande retournee -------------------------------------------------- */
  --cd-nuit:          #22140C;  /* fond plein de la feuille d'etabli comparee */
  --cd-nuit-encre:    #FBF4E7;  /* texte sur la bande retournee */
  --cd-nuit-filet:    #8C6B2E;  /* laiton eteint sur fond de nuit */
  --cd-nuit-cote:     #C6B79C;  /* cote sur fond de nuit */

  /* -- polices : trois roles, aucune police tierce -------------------- */
  --cd-titre:   "Futura", "Century Gothic", "Trebuchet MS", "Avenir Next", "URW Gothic", sans-serif;
  --cd-texte:   "Charter", "Bitstream Charter", "Sitka Text", "Georgia", "Nimbus Roman", serif;
  --cd-chiffre: "IBM Plex Mono", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;

  /* -- mesures ---------------------------------------------------------- */
  --cd-travee-largeur: 73.75rem;   /* 1180 px : la travée pleine */
  --cd-travee-etroite: 45rem;      /* 720 px : l'abecedaire et l'encart de methode */
  --cd-mesure: 66ch;               /* mesure de lecture du corps d'article */
  --cd-mesure-chapeau: 62ch;
  --cd-pas-grille: 300px;          /* pas de la grille de parcelles */
  --cd-rail: 17rem;                /* largeur du rail de caracteristiques */
  --cd-pas: 28px;                  /* densite dense */
  --cd-pas-normal: 56px;           /* densite normale */
  --cd-pas-large: 84px;            /* respiration avant le pied */

  /* -- ratios d'image : trois cadrages nommes -------------------------- */
  --cd-ratio-planche: 21 / 9;      /* vues de zone : bande de legende, tetes de rubrique */
  --cd-ratio-etabli: 4 / 3;        /* image d'article en tete de fiche */
  --cd-ratio-cadran: 1 / 1;        /* vignettes carrees des parcelles */

  --cd-filet: 1px solid var(--cd-liseret);
  --cd-filet-acier: 1px solid var(--cd-acier);
  --cd-ombre-fiche: 6px 6px 0 var(--cd-papier-creux);
}

/* REGLE NEGATIVE 1 : --cd-acier ne porte JAMAIS de texte courant. C'est un filet, une cote,
   un cercle de releve, une trame. Un paragraphe en acier est un bug de contraste.
   REGLE NEGATIVE 2 : --cd-laiton ne sert JAMAIS de fond ni de couleur de lien. Uniquement
   des traits de 1px et des reperes de tableau : le laiton est un detail de mouvement, pas un aplat.
   REGLE NEGATIVE 3 : --cd-oxblood est reserve aux liens et a l'etat actif. Aucun titre en oxblood,
   sinon le site ressemble a une boutique et ce site ne vend rien. */

/* -------------------------------------------------------------------------
   2. SOCLE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--cd-papier);
  color: var(--cd-encre);
  font-family: var(--cd-texte);
  font-size: clamp(16px, 15px + .25vw, 17.5px);
  line-height: 1.62;
  overflow-x: clip;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--cd-titre);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 .7em;
}
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }
p, ul, ol, dl, table { margin: 0 0 1.5rem; }

a { color: var(--cd-oxblood); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--cd-encre); }

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

table { border-collapse: collapse; }

/* Le seul conteneur de largeur du site. */
.cd-travee { width: min(100% - 2rem, var(--cd-travee-largeur)); margin-inline: auto; }

.cd-acces-direct {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--cd-encre); color: var(--cd-papier); padding: .6rem 1rem;
  font-family: var(--cd-titre); letter-spacing: .08em; text-transform: uppercase; font-size: .75rem;
}
.cd-acces-direct:focus { left: .5rem; top: .5rem; }

.cd-hors-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* -------------------------------------------------------------------------
   3. GESTE SIGNATURE A — LA COTE
   Un segment horizontal termine par deux traits verticaux de 1px, qui porte
   une mesure. Dessine en pseudo-elements : aucune image, aucun script.
   ------------------------------------------------------------------------- */
.cd-cote {
  position: relative;
  display: inline-block;
  padding: 0 .7em;
  font-family: var(--cd-chiffre);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--cd-acier);
  white-space: nowrap;
}
.cd-cote::before, .cd-cote::after {
  content: ""; position: absolute; top: -.25em; bottom: -.25em; width: 1px; background: var(--cd-acier);
}
.cd-cote::before { left: 0; }
.cd-cote::after { right: 0; }

/* La cote negative : le meme instrument, la valeur en moins. Un segment vide
   entre les deux traits terminaux, la ou aucun chiffre n'a ete publie. */
.cd-cote--vide { min-width: 9.5em; text-align: right; }
.cd-cote__blanc {
  display: inline-block; width: 3.4em; height: .68em;
  border-bottom: 1px dashed var(--cd-acier); vertical-align: baseline;
}
.cd-cote--comble { color: var(--cd-encre); }
.cd-cote--comble::before, .cd-cote--comble::after { background: var(--cd-encre); }

/* -------------------------------------------------------------------------
   4. GESTE SIGNATURE B — LE NUMERO DE RELEVE CERLE
   ------------------------------------------------------------------------- */
.cd-releve-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6em; height: 2.6em; padding: 0 .4em;
  border: 1px solid var(--cd-acier); border-radius: 50%;
  font-family: var(--cd-chiffre); font-size: 11px; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .05em; color: var(--cd-encre);
  text-decoration: none;
}
a.cd-releve-num { text-decoration: none; }
a.cd-releve-num:hover, a.cd-releve-num:focus-visible { border-color: var(--cd-oxblood); color: var(--cd-oxblood); }

/* -------------------------------------------------------------------------
   5. GESTE SIGNATURE C — LA TRAME DE VERRE DE LOUPE
   Quadrillage croise au pas de 6 px, obtenu par color-mix sur l'acier : la
   trame est translucide, jamais le texte (aucune `opacity` sur le bloc).
   ------------------------------------------------------------------------- */
.cd-loupe {
  --cd-trame: color-mix(in srgb, var(--cd-acier-plein) 14%, transparent);
  background-color: var(--cd-papier-creux);
  background-image:
    repeating-linear-gradient(0deg, var(--cd-trame) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, var(--cd-trame) 0 1px, transparent 1px 6px);
  box-shadow: inset 0 0 0 1px var(--cd-liseret);
}
.cd-loupe > * { position: relative; }

/* -------------------------------------------------------------------------
   6. FRONTON
   ------------------------------------------------------------------------- */
.cd-fronton { background: var(--cd-papier); border-bottom: 3px solid var(--cd-encre); }
.cd-fronton__barre { height: 4px; background: var(--cd-oxblood); }
.cd-fronton__interieur {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.5rem;
  padding: 1rem 0; min-height: 88px;
}
.cd-enseigne {
  font-family: var(--cd-titre); font-size: 1.3rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cd-encre); text-decoration: none;
}
.cd-enseigne:hover { color: var(--cd-oxblood); }
.cd-devise {
  margin: 0; font-family: var(--cd-texte); font-style: italic;
  font-size: 13px; color: var(--cd-encre-legere);
  border-left: var(--cd-filet); padding-left: 1rem;
}

/* Navigation : une case a cocher, deux etats, aucun script externe. */
.cd-parcours { margin-left: auto; }
.cd-bascule { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cd-poignee {
  display: inline-block; cursor: pointer;
  font-family: var(--cd-titre); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  border: var(--cd-filet-acier); padding: .45rem .8rem; color: var(--cd-encre);
}
.cd-poignee span { margin-left: .35rem; }
.cd-bascule:focus-visible + .cd-poignee { outline: 2px solid var(--cd-oxblood); outline-offset: 2px; }
.cd-parcours ul { display: none; list-style: none; margin: 0; padding: 0; }
.cd-bascule:checked ~ ul { display: block; margin-top: .6rem; }
.cd-bascule:checked ~ ul li { border-top: var(--cd-filet); }
.cd-parcours__lien {
  display: block; padding: .5rem 0; text-decoration: none;
  font-family: var(--cd-titre); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cd-encre-legere);
}
.cd-parcours__lien:hover { color: var(--cd-oxblood); }
.cd-parcours__lien[aria-current="page"] { color: var(--cd-encre); box-shadow: inset 0 -2px 0 var(--cd-oxblood); }

@media (min-width: 52rem) {
  .cd-poignee { display: none; }
  .cd-parcours ul { display: flex; flex-wrap: wrap; gap: 1.2rem; }
  .cd-parcours__lien { padding: .2rem 0; }
  .cd-bascule:checked ~ ul { margin-top: 0; }
}

/* -------------------------------------------------------------------------
   7. BANDE DE LEGENDE (accueil) + VUES
   ------------------------------------------------------------------------- */
.cd-legende {
  background-color: var(--cd-papier-creux);
  background-image:
    repeating-linear-gradient(0deg, rgba(124,132,138,.055) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(124,132,138,.055) 0 1px, transparent 1px 6px);
  border-top: 3px solid var(--cd-encre);
  border-bottom: 1px solid var(--cd-acier);
  padding: var(--cd-pas-normal) 0 0;
}
.cd-legende__titre { max-width: 34ch; }
.cd-legende__chapeau { max-width: var(--cd-mesure-chapeau); color: var(--cd-encre-legere); }
.cd-legende__chapeau a { color: var(--cd-oxblood); }
.cd-legende__cotes { display: flex; flex-wrap: wrap; gap: .2rem .1rem; margin: 0; }

figure.cd-vue { margin: 0; }
.cd-vue img {
  width: 100%; height: auto; object-fit: cover; object-position: center 45%;
  filter: saturate(.92) contrast(1.04);
  border: var(--cd-filet);
  box-shadow: var(--cd-ombre-fiche);
}
.cd-vue--planche img { aspect-ratio: var(--cd-ratio-planche); }
.cd-vue--etabli img { aspect-ratio: var(--cd-ratio-etabli); }
.cd-vue--cadran img { aspect-ratio: var(--cd-ratio-cadran); }
.cd-vue__legende {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .3rem;
  padding-top: .5rem; margin: 0;
  font-size: 12px; line-height: 1.5; color: var(--cd-encre-legere);
}
/* La bande de legende tient sur deux colonnes : le chapeau garde sa mesure de
   62ch a gauche, le colophon occupe la moitie droite du premier ecran et dit
   qui tient le releve avant que le lecteur ait a descendre. */
.cd-legende__grille { display: grid; gap: var(--cd-pas) 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) {
  .cd-legende__grille { grid-template-columns: minmax(0, 1fr) 22rem; }
}
.cd-legende .cd-vue--planche { margin-top: var(--cd-pas-normal); }
/* Les deux colonnes de la bande de legende ne doivent jamais deborder : une mesure
   nulle laisse un lien long pousser la grille et casser le colophon de droite. */
.cd-legende__texte { min-width: 0; }
.cd-legende__texte > :last-child { margin-bottom: 0; }
/* L'image de tete d'une rubrique respire comme celle de l'accueil, sans ombre doublee. */
.cd-vue--tete { margin-top: var(--cd-pas-normal); }
.cd-vue--tete img { object-position: center 42%; }

/* Le colophon de tete : la ligne d'auteur collective, ce que l'equipe fait et
   ne fait pas, le contact. Present sur l'accueil et sur chaque entree de rubrique. */
.cd-colophon {
  background: var(--cd-fiche); border: var(--cd-filet); border-top: 3px solid var(--cd-oxblood);
  padding: 1rem 1.15rem 1.1rem;
}
.cd-colophon__titre {
  font-family: var(--cd-titre); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cd-encre-legere); margin: 0 0 .5rem; padding-bottom: .35rem; border-bottom: var(--cd-filet-acier);
}
.cd-colophon__texte { font-size: .86rem; line-height: 1.55; margin: 0 0 .7rem; }
.cd-colophon__liste { margin: 0 0 .7rem; }
.cd-colophon__liste dt {
  font-family: var(--cd-titre); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cd-encre-legere); border-top: var(--cd-filet); padding-top: .4rem;
}
.cd-colophon__liste dd { margin: .15rem 0 .5rem; font-size: .84rem; line-height: 1.5; }
.cd-colophon__contact { font-size: .84rem; line-height: 1.5; margin: 0 0 .5rem; }
.cd-colophon__contact a, .cd-colophon__liste a { color: var(--cd-oxblood); }
.cd-colophon__edition {
  font-family: var(--cd-chiffre); font-size: 11px; color: var(--cd-encre-legere);
  border-top: var(--cd-filet-acier); padding-top: .45rem; margin: 0;
}

/* La ligne d'auteur collective, en clair sur chaque page. */
.cd-signature {
  font-family: var(--cd-chiffre); font-size: 11px; line-height: 1.7; color: var(--cd-encre-legere);
  border-top: var(--cd-filet); border-bottom: var(--cd-filet); padding: .45rem 0;
  margin: 0 0 var(--cd-pas); max-width: var(--cd-mesure-chapeau);
}
.cd-signature a { color: var(--cd-oxblood); }

/* -------------------------------------------------------------------------
   8. BILAN CHIFFRE (quatre chiffres de reperage)
   ------------------------------------------------------------------------- */
.cd-bilan {
  display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;
  border-top: var(--cd-filet); border-bottom: var(--cd-filet);
}
.cd-bilan__poste { flex: 1 1 10rem; padding: .9rem 1rem; border-right: var(--cd-filet-acier); }
.cd-bilan__poste:last-child { border-right: 0; }
.cd-bilan__chiffre {
  display: block; font-family: var(--cd-chiffre); font-size: 34px; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--cd-encre);
}
.cd-bilan__libelle {
  display: block; font-family: var(--cd-titre); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cd-encre-legere);
}

/* -------------------------------------------------------------------------
   9. ONGLETS DE RUBRIQUE (liens vers les hubs reels, filtre en plus)
   ------------------------------------------------------------------------- */
.cd-onglets {
  display: flex; flex-wrap: wrap; gap: .2rem .4rem;
  padding: var(--cd-pas) 0 0; border-bottom: var(--cd-filet);
  position: sticky; top: 0; background: var(--cd-papier); z-index: 5;
}
.cd-onglet {
  display: inline-block; padding: .4rem .8rem .45rem; text-decoration: none;
  font-family: var(--cd-titre); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cd-encre-legere); border: 0; background: none; cursor: pointer;
}
.cd-onglet:hover { color: var(--cd-oxblood); }
.cd-onglet--courant, .cd-onglet[aria-current="true"] {
  color: var(--cd-oxblood); background: var(--cd-oxblood-voile);
  box-shadow: inset 0 -2px 0 var(--cd-oxblood);
}

/* -------------------------------------------------------------------------
   10. RAYON (tete de section) ET PARCELLES (la grille d'annuaire)
   ------------------------------------------------------------------------- */
.cd-rayon { padding: var(--cd-pas-normal) 0; }
.cd-rayon--dense { padding: var(--cd-pas) 0; }
.cd-rayon__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: var(--cd-pas); }
.cd-rayon__tete h2 { margin: 0; box-shadow: inset 0 -6px 0 var(--cd-tritium); }
.cd-rayon__decompte { font-family: var(--cd-chiffre); font-size: 11px; color: var(--cd-encre-legere); }
.cd-rayon__tete .cd-renvoi { margin-left: auto; }
.cd-rayon__chapeau { max-width: var(--cd-mesure-chapeau); color: var(--cd-encre-legere); }

.cd-parcelles { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .cd-parcelles { grid-template-columns: repeat(auto-fill, minmax(var(--cd-pas-grille), 1fr)); }
}
@media (min-width: 62rem) {
  .cd-parcelles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row dense;
    /* La premiere entree tient deux COLONNES sur une seule rangee. Elle tenait
       deux rangees : la rangee d'a cote etait alors calee sur sa hauteur et les
       entrees voisines s'etiraient a vide sur plusieurs centaines de pixels. */
    grid-template-areas:
      "p1 p1 p2 p3"
      "p4 p5 p6 p7";
  }
  .cd-parcelle--p1 { grid-area: p1; }
  .cd-parcelle--p2 { grid-area: p2; }
  .cd-parcelle--p3 { grid-area: p3; }
  .cd-parcelle--p4 { grid-area: p4; }
  .cd-parcelle--p5 { grid-area: p5; }
  .cd-parcelle--p6 { grid-area: p6; }
  .cd-parcelle--p7 { grid-area: p7; }
  /* Deux cartes larges seulement, la premiere et la derniere : dix-huit entrees
     plus deux cartes doubles font vingt cases, soit cinq rangees pleines. */
  .cd-parcelle--double { grid-column: span 2; }
  /* La carte large est plus haute que son texte : la ligne de mesures est calee en bas
     de carte pour que les filets s'alignent sur la rangee, et c'est la photo, non le
     blanc, qui prend la hauteur qui reste. */
  .cd-parcelle--double .cd-parcelle__vue { flex: 1 1 10rem; min-height: 0; }
  .cd-parcelle--double .cd-parcelle__vue picture { display: block; height: 100%; }
  .cd-parcelle--double .cd-parcelle__vue img { aspect-ratio: auto; height: 100%; min-height: 10rem; }
}

.cd-parcelle {
  display: flex; flex-direction: column;
  background: var(--cd-fiche); border: var(--cd-filet); border-top: 3px solid var(--cd-acier);
  padding: .9rem 1rem 1rem;
}
.cd-parcelle[data-rubrique="market"]     { border-top-color: var(--cd-oxblood); }
.cd-parcelle[data-rubrique="references"] { border-top-color: var(--cd-tritium); }
.cd-parcelle[data-rubrique="brands-hub"] { border-top-color: var(--cd-laiton); }
.cd-parcelle[data-rubrique="ownership"]  { border-top-color: var(--cd-acier); }
.cd-parcelle:hover { border-color: var(--cd-acier); }
.cd-parcelle__tete { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; }
.cd-parcelle__date { font-family: var(--cd-chiffre); font-size: 11px; color: var(--cd-encre-legere); margin-left: auto; }
.cd-etiquette {
  font-family: var(--cd-titre); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--cd-oxblood-voile); color: var(--cd-encre); padding: .16rem .45rem;
}
.cd-parcelle__intitule { margin: 0 0 .4rem; font-size: 1.02rem; }
.cd-parcelle__intitule a { color: var(--cd-encre); text-decoration: none; }
.cd-parcelle__intitule a:hover { color: var(--cd-oxblood); text-decoration: underline; }
.cd-parcelle__abrege { font-size: .9rem; line-height: 1.55; color: var(--cd-encre-legere); margin: 0 0 .6rem; }
.cd-parcelle__vue { margin: 0 0 .7rem; }
.cd-parcelle__vue img { width: 100%; }
.cd-parcelle__vue img { border: var(--cd-filet); box-shadow: 3px 3px 0 var(--cd-papier-creux); }
.cd-parcelle__mesures { display: flex; flex-wrap: wrap; gap: .1rem .2rem; margin: auto 0 0; padding-top: .5rem; border-top: var(--cd-filet); }
.cd-renvoi { font-family: var(--cd-titre); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--cd-oxblood); }
.cd-renvoi:hover { text-decoration: underline; }
.cd-renvoi span { margin-left: .25rem; }

/* -------------------------------------------------------------------------
   11. FEUILLE D'ETABLI COMPAREE (la bande retournee, plein cadre)
   La seule bande qui deborde des marges du reste de la page.
   ------------------------------------------------------------------------- */
.cd-etabli {
  width: 100vw; margin-inline: calc(50% - 50vw);
  background: var(--cd-nuit); color: var(--cd-nuit-encre);
  border-top: 3px solid var(--cd-nuit-filet); border-bottom: 3px solid var(--cd-nuit-filet);
  padding: var(--cd-pas-normal) 0; margin-top: var(--cd-pas-normal);
}
.cd-etabli__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: var(--cd-pas); }
.cd-etabli__tete h2 { margin: 0; color: var(--cd-nuit-encre); }
.cd-etabli__decompte { font-family: var(--cd-chiffre); font-size: 11px; color: var(--cd-nuit-cote); }
.cd-etabli__chapeau { max-width: var(--cd-mesure-chapeau); color: var(--cd-nuit-cote); margin-left: auto; }
.cd-etabli__colonnes { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
.cd-etabli__frise { height: 1px; background: var(--cd-nuit-filet); margin-bottom: 1rem; }
.cd-etabli__colonne { border-top: 1px solid var(--cd-nuit-filet); padding-top: .8rem; }
.cd-etabli__ref { font-family: var(--cd-titre); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .15rem; }
.cd-etabli__ref a { color: var(--cd-nuit-encre); text-decoration: none; border-bottom: 1px solid var(--cd-nuit-filet); }
.cd-etabli__ref a:hover { color: var(--cd-nuit-cote); }
.cd-etabli__role { font-size: .82rem; line-height: 1.5; color: var(--cd-nuit-cote); margin: 0 0 .3rem; }
.cd-etabli__mesures { list-style: none; margin: 0; padding: 0; font-family: var(--cd-chiffre); font-size: 11px; font-variant-numeric: tabular-nums; }
.cd-etabli__mesures > .cd-etabli__ligne { border-top: 1px solid var(--cd-nuit-filet); padding: .24rem 0; }
.cd-etabli__mesures dt, .cd-etabli__mesures dd { display: inline; margin: 0; }
.cd-etabli__mesures dd { float: right; color: var(--cd-nuit-encre); }
.cd-etabli__manque { font-size: .78rem; line-height: 1.45; color: var(--cd-nuit-cote); margin: .4rem 0 0; }
.cd-etabli__mesures .cd-cote { color: var(--cd-nuit-cote); }
.cd-etabli__mesures .cd-cote::before, .cd-etabli__mesures .cd-cote::after { background: var(--cd-nuit-cote); }
.cd-etabli__mesures .cd-cote__blanc { border-bottom-color: var(--cd-nuit-cote); }
@media (min-width: 44rem) { .cd-etabli__colonnes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* -------------------------------------------------------------------------
   12. ABECEDAIRE (index alphabetique, travée etroite)
   ------------------------------------------------------------------------- */
.cd-abecedaire-bloc { width: min(100% - 2rem, var(--cd-travee-etroite)); margin-inline: auto; padding: var(--cd-pas-normal) 0; }
.cd-abecedaire { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 2rem; }
@media (max-width: 40rem) { .cd-abecedaire { column-count: 1; } }
.cd-abecedaire li { break-inside: avoid; margin-bottom: .5rem; }
.cd-abecedaire__lettre {
  font-family: var(--cd-titre); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cd-acier); margin-right: .4rem;
}
.cd-abecedaire__entree { font-size: 14px; color: var(--cd-oxblood); text-decoration: none; }
.cd-abecedaire__entree:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   13. ENCART DE METHODE (travée etroite, trame de loupe)
   ------------------------------------------------------------------------- */
.cd-encart-bloc { width: min(100% - 2rem, var(--cd-travee-etroite)); margin-inline: auto; padding: var(--cd-pas-normal) 0 var(--cd-pas-large); }
.cd-encart { border-left: 3px solid var(--cd-oxblood); padding: 1.1rem 1.25rem; }
.cd-encart h2 { font-size: 1.15rem; }
.cd-encart p:last-child, .cd-encart dl:last-child { margin-bottom: 0; }
.cd-encart__signature { font-style: italic; font-size: .88rem; color: var(--cd-encre-legere); }
.cd-encart dl { margin: 0; }
.cd-encart dt { font-family: var(--cd-titre); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .9rem; }
.cd-encart dd { margin: .2rem 0 0; }

/* -------------------------------------------------------------------------
   14. REGISTRE (liste dense des rubriques) ET FEUILLETAGE
   ------------------------------------------------------------------------- */
.cd-registre { list-style: none; margin: 0; padding: 0; border-top: var(--cd-filet-acier); }
.cd-ligne { display: grid; gap: .2rem 1rem; grid-template-columns: 1fr; padding: .9rem 0; border-bottom: var(--cd-filet); }
@media (min-width: 52rem) { .cd-ligne { grid-template-columns: 4.5rem 7rem minmax(0, 1fr) 13rem; align-items: start; } }
.cd-ligne__vue { display: block; max-width: 9rem; }
.cd-ligne__vue .cd-vue { margin: 0; }
.cd-ligne__vue img { width: 100%; }
.cd-registre__tout {
  font-family: var(--cd-chiffre); font-size: 11px; color: var(--cd-encre-legere);
  margin-top: var(--cd-pas); border-top: var(--cd-filet-acier); padding-top: .5rem;
}
.cd-ligne__cote { font-family: var(--cd-chiffre); font-size: 11px; color: var(--cd-encre-legere); }
.cd-ligne__cotes { display: flex; flex-wrap: wrap; gap: .2rem .1rem; margin: .35rem 0 0; }
.cd-ligne__intitule { margin: 0 0 .25rem; font-size: 1rem; }
.cd-ligne__intitule a { color: var(--cd-encre); text-decoration: none; }
.cd-ligne__intitule a:hover { color: var(--cd-oxblood); text-decoration: underline; }
.cd-ligne__abrege { font-size: .9rem; color: var(--cd-encre-legere); margin: 0 0 .4rem; }
.cd-ligne__attributs { list-style: none; margin: 0; padding: 0; font-family: var(--cd-chiffre); font-size: 11px; color: var(--cd-encre-legere); }
.cd-ligne__attributs li { border-top: var(--cd-filet); padding: .35rem 0; }
/* Les rubriques voisines : intitule complet, nombre de pages reel, objet de la
   rubrique. Une lettre nue posee devant un lien ne dit rien au lecteur. */
.cd-voisines { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .cd-voisines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cd-voisines__poste { border-top: 3px solid var(--cd-acier); padding-top: .6rem; }
.cd-voisines__lien {
  display: block; font-family: var(--cd-titre); font-size: .84rem; letter-spacing: .04em;
  color: var(--cd-encre); text-decoration: none;
}
.cd-voisines__lien:hover { color: var(--cd-oxblood); text-decoration: underline; }
.cd-voisines__note { display: block; font-family: var(--cd-chiffre); font-size: 11px; color: var(--cd-encre-legere); margin: .2rem 0; }
.cd-voisines__objet { display: block; font-size: .84rem; line-height: 1.5; color: var(--cd-encre-legere); }

.cd-feuilletage { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--cd-pas); font-family: var(--cd-chiffre); font-size: 12px; }
.cd-feuilletage a, .cd-feuilletage span {
  display: inline-block; padding: .35rem .6rem; border: var(--cd-filet); text-decoration: none; color: var(--cd-encre);
}
.cd-feuilletage a:hover { border-color: var(--cd-oxblood); color: var(--cd-oxblood); }
.cd-feuilletage [aria-current="page"] { background: var(--cd-oxblood-voile); border-color: var(--cd-oxblood); }

/* -------------------------------------------------------------------------
   15. FIL DE REMONTEE
   ------------------------------------------------------------------------- */
.cd-remontee { padding: var(--cd-pas) 0 0; font-size: .8rem; color: var(--cd-encre-legere); }
.cd-remontee ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.cd-remontee li::after { content: "/"; margin-left: .35rem; color: var(--cd-acier); }
.cd-remontee li:last-child::after { content: ""; }

/* -------------------------------------------------------------------------
   16. ARTICLE : entete cote, chapeau, lettrine, duo texte + rail
   ------------------------------------------------------------------------- */
.cd-entete-fiche { padding: var(--cd-pas) 0 0; }
.cd-entete-fiche__cote { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .7rem; }
.cd-entete-fiche__grille { display: grid; gap: var(--cd-pas) 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) {
  .cd-entete-fiche__grille { grid-template-columns: minmax(0, 1fr) 22rem; }
}
/* Dans la bande de tete d'une rubrique, la colonne de gauche serre son rythme : la
   feuille d'etabli et la datation laissaient 188 px de blanc face au colophon de droite. */
.cd-entete-fiche__grille > div > .cd-datation { margin-bottom: .9rem; }
.cd-entete-fiche__grille .cd-mesure { padding: .28rem 0; }
.cd-entete-fiche__grille .cd-signature { margin-bottom: .7rem; }
.cd-chapeau { font-size: clamp(17px, 16px + .3vw, 19px); line-height: 1.55; color: var(--cd-encre-legere); max-width: var(--cd-mesure-chapeau); }
.cd-datation { font-family: var(--cd-chiffre); font-size: 11px; color: var(--cd-encre-legere); margin: 0 0 var(--cd-pas); }

/* La ligne d'auteur : ce que cette page refuse de faire. */
.cd-ligne-auteur {
  font-style: italic; border-top: var(--cd-filet-acier); border-bottom: var(--cd-filet-acier);
  padding: .8rem 0; margin: 0 0 var(--cd-pas); max-width: var(--cd-mesure-chapeau);
}

/* La feuille d'etabli : quatre mesures, puis la cote negative. */
.cd-etabli-feuille { margin: 0 0 var(--cd-pas); border-top: 3px solid var(--cd-encre); border-bottom: var(--cd-filet-acier); padding: .1rem 0; }
.cd-etabli-feuille__titre {
  font-family: var(--cd-titre); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  margin: .7rem 0 .4rem;
}
.cd-etabli-feuille dl { margin: 0; }
/* La ligne de reserve : la cote negative de la feuille, dite en une phrase. */
.cd-etabli-feuille__reserve {
  font-style: italic; font-size: 12px; color: var(--cd-encre-legere);
  border-top: var(--cd-filet); margin: 0; padding: .4rem 0 .5rem; max-width: var(--cd-mesure-chapeau);
}
/* La reserve de rubrique : la cote negative la plus frequente de la section, sous la
   feuille d'etabli du hub, avec le renvoi vers la page ou le blanc est dessine. */
.cd-reserve {
  font-size: .86rem; line-height: 1.55; color: var(--cd-encre-legere);
  border-top: var(--cd-filet-acier); margin: .6rem 0 0; padding-top: .5rem;
  max-width: var(--cd-mesure-chapeau);
}
.cd-reserve a { color: var(--cd-oxblood); }
.cd-mesure { display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: baseline; border-top: var(--cd-filet); padding: .4rem 0; }
.cd-mesure__terme { font-size: .86rem; color: var(--cd-encre-legere); flex: 1 1 12rem; margin: 0; }
.cd-mesure__valeur { margin: 0; font-family: var(--cd-chiffre); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.cd-mesure--creuse .cd-mesure__terme { font-style: italic; }
.cd-mesure--creuse .cd-mesure__valeur { color: var(--cd-acier); }
.cd-mesure__note { font-family: var(--cd-texte); font-style: italic; font-size: 12px; color: var(--cd-encre-legere); }

/* Renvois de lecture : les pages que celle-ci passe la main a. */
.cd-renvois { padding: var(--cd-pas) 0 var(--cd-pas-normal); }
.cd-renvois h2 { display: inline-block; box-shadow: inset 0 -6px 0 var(--cd-tritium); margin-bottom: .5rem; }
.cd-renvois > p { max-width: var(--cd-mesure-chapeau); color: var(--cd-encre-legere); font-size: .86rem; }
.cd-renvois ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .9rem; }
.cd-renvois li { flex: 1 1 18rem; border-top: var(--cd-filet-acier); padding: .45rem 0; }
.cd-renvois__lien { font-size: .88rem; }

.cd-duo { display: grid; gap: var(--cd-pas); padding: var(--cd-pas) 0; }
@media (min-width: 60rem) {
  .cd-duo { grid-template-columns: minmax(0, 1fr) var(--cd-rail); align-items: start; }
  .cd-rail { position: sticky; top: var(--cd-pas); }
}
.cd-corps > * { max-width: var(--cd-mesure); }
.cd-corps h2 { margin-top: calc(var(--cd-pas) * 1.3); }
.cd-corps h3 { margin-top: var(--cd-pas); }
.cd-corps ul, .cd-corps ol { padding-left: 1.2rem; }
.cd-corps li { margin-bottom: .4rem; }
.cd-corps figure { max-width: 100%; margin: var(--cd-pas) 0; }
.cd-corps figcaption { font-size: .82rem; color: var(--cd-encre-legere); padding-top: .4rem; }
.cd-corps table { width: 100%; font-size: .86rem; }
.cd-corps th, .cd-corps td { border-bottom: var(--cd-filet); padding: .45rem .6rem; text-align: left; }
.cd-corps thead th { background: var(--cd-papier-creux); font-family: var(--cd-titre); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }

/* La lettrine Charter de trois lignes, posee sur le premier paragraphe. */
.cd-parcelle-intro::first-letter {
  float: left; font-family: var(--cd-texte); font-size: 3.05em; line-height: .86;
  padding: .06em .12em 0 0; color: var(--cd-encre);
}

/* Le rail : caracteristiques en chiffres tabulaires + sommaire numerote. */
.cd-rail { border-top: 3px solid var(--cd-encre); padding-top: .8rem; }
.cd-caracteristiques { background: var(--cd-fiche); border: var(--cd-filet); padding: .3rem 1rem .6rem; }
.cd-caracteristiques h2 { font-size: .95rem; margin: .7rem 0 .4rem; }
.cd-caracteristiques table { width: 100%; font-size: .82rem; margin: 0; }
.cd-caracteristiques th, .cd-caracteristiques td { text-align: left; padding: .4rem 0; border-bottom: var(--cd-filet); vertical-align: top; }
.cd-caracteristiques tr:last-child th, .cd-caracteristiques tr:last-child td { border-bottom: 0; }
.cd-caracteristiques th { font-weight: 400; color: var(--cd-encre-legere); width: 48%; }
.cd-caracteristiques td { font-family: var(--cd-chiffre); font-size: 11px; font-variant-numeric: tabular-nums; }
.cd-caracteristiques__manque { font-size: .78rem; color: var(--cd-encre-legere); margin: .6rem 0 0; }

.cd-jalons { margin-top: var(--cd-pas); }
.cd-jalons__titre {
  font-family: var(--cd-titre); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cd-encre-legere); margin: 0 0 .4rem;
}
.cd-jalons ol { list-style: none; margin: 0; padding: 0; }
.cd-jalons li { display: flex; align-items: center; gap: .5rem; border-top: var(--cd-filet); padding: .45rem 0; }
.cd-jalons__lien { font-size: .86rem; text-decoration: none; color: var(--cd-encre); }
.cd-jalons__lien:hover { color: var(--cd-oxblood); }
.cd-jalon {
  font-family: var(--cd-chiffre); font-size: 11px; color: var(--cd-acier); min-width: 1.4em;
}
.cd-corps h2 .cd-jalon { margin-right: .5em; }

/* L'encadre « Check before you buy » : trois entrees, jamais plus. */
.cd-verification { border-left: 3px solid var(--cd-oxblood); padding: 1rem 1.15rem; margin: 0 0 var(--cd-pas); max-width: var(--cd-mesure); }
.cd-verification h2 { font-size: 1rem; margin: 0 0 .6rem; }
.cd-verification dl { margin: 0; }
.cd-verification dt { font-family: var(--cd-titre); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .7rem; color: var(--cd-encre); }
.cd-verification dt:first-of-type { margin-top: 0; }
.cd-verification dd { margin: .2rem 0 0; font-size: .92rem; }

/* Tableau large : defilement propre, jamais de debordement de page. */
.cd-tableau-defilant { overflow-x: auto; border: var(--cd-filet); background: var(--cd-fiche); max-width: 100%; margin: 0 0 1.5rem; }
.cd-tableau-defilant table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .86rem; margin: 0; }
.cd-tableau-defilant caption { text-align: left; padding: .7rem 1rem; font-size: .8rem; color: var(--cd-encre-legere); }
.cd-tableau-defilant th, .cd-tableau-defilant td { padding: .55rem 1rem; border-bottom: var(--cd-filet); text-align: left; }
.cd-tableau-defilant thead th { background: var(--cd-papier-creux); font-family: var(--cd-titre); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.cd-tableau-defilant tbody tr:last-child th, .cd-tableau-defilant tbody tr:last-child td { border-bottom: 0; }
.cd-tableau-defilant th[scope="row"] { border-left: 2px solid var(--cd-laiton); }
.cd-tableau-defilant td { font-family: var(--cd-chiffre); font-size: 11px; font-variant-numeric: tabular-nums; }
.cd-tableau-defilant:focus-visible { outline: 2px solid var(--cd-oxblood); }

/* Voisinage : entrees liees en bas de fiche. */
.cd-voisinage { border-top: var(--cd-filet-acier); padding: var(--cd-pas-normal) 0; }
.cd-voisinage .cd-parcelles { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-template-areas: none; }
.cd-voisinage .cd-parcelle { grid-area: auto; grid-column: auto; }

/* -------------------------------------------------------------------------
   17. PIED QUI PROUVE
   ------------------------------------------------------------------------- */
.cd-pied { background: var(--cd-fiche); border-top: 3px solid var(--cd-encre); padding: var(--cd-pas-normal) 0 var(--cd-pas); margin-top: var(--cd-pas-normal); }
.cd-pied__colonnes { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .cd-pied__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .cd-pied__colonnes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cd-pied h2 {
  font-family: var(--cd-titre); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cd-encre-legere); margin: 0 0 .4rem; padding-bottom: .3rem; border-bottom: var(--cd-filet-acier);
}
.cd-pied p { font-size: .84rem; line-height: 1.55; }
.cd-pied p:last-child { margin-bottom: 0; }
.cd-pied__colophon { font-family: var(--cd-chiffre); font-size: 11px; line-height: 1.7; }
/* Une colonne de pied ne deborde pas de sa fraction de grille : les adresses de
   contact et les codes de revision sont des chaines insecables. */
.cd-pied__colonne { min-width: 0; }
.cd-pied__colonne > :last-child { margin-bottom: 0; }
.cd-pied__marque { display: block; font-family: var(--cd-titre); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; }
.cd-pied ul { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.cd-pied li { margin-bottom: .3rem; }
.cd-pied__bas { border-top: var(--cd-filet); margin-top: var(--cd-pas); padding-top: .8rem; font-size: .78rem; color: var(--cd-encre-legere); }
.cd-pied__bas p { margin: 0 0 .3rem; }
.cd-pied__bas code { font-family: var(--cd-chiffre); font-size: 11px; color: var(--cd-encre); }

/* -------------------------------------------------------------------------
   18. MOBILE : ce qui cede, ce qui reste signature
   ------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .cd-travee { width: min(100% - 2rem, var(--cd-travee-largeur)); }
  .cd-parcelles { grid-template-columns: 1fr; grid-template-areas: none; }
  .cd-parcelle--p1, .cd-parcelle--double { grid-area: auto; grid-column: auto; }
  .cd-ligne__vue { max-width: 11rem; }
  .cd-abecedaire-bloc { display: none; }           /* l'index occupe trois ecrans pour 20 pages */
  .cd-pied__colonnes { grid-template-columns: 1fr; }
  .cd-rail { position: static; }                    /* le rail remonte au-dessus du corps */
  .cd-duo { display: flex; flex-direction: column; }
  .cd-corps { order: 2; }
  .cd-rail { order: 1; }
  .cd-jalons ol { display: flex; overflow-x: auto; gap: .5rem; padding-bottom: .3rem; }
  .cd-jalons li { border-top: 0; flex: 0 0 auto; }
  .cd-vue img { box-shadow: 3px 3px 0 var(--cd-papier-creux); }
  .cd-etabli__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-cote { font-size: 10px; }
  .cd-cote--vide { min-width: 8em; }
  .cd-releve-num { min-width: 2.2em; height: 2.2em; font-size: 10px; }
  .cd-onglets { position: static; }
  .cd-fronton__interieur { min-height: 0; }
  .cd-devise { border-left: 0; padding-left: 0; flex-basis: 100%; }
}