/* =====================================================================
   SEDGE AND GRANITE  (eannpoole.com)
   Champ lexical des classes : le carnet de terrain d'un arpenteur de
   zones humides. Prefixe .rg- (registry). Une preuve est une LIGNE.
   Squelette rhabille : fiches-reference.
   Aucune requete externe : trois piles systeme, jamais de fichier de police.

   REGLE NEGATIVE 1 : --laiton et --olive-laiche ne sont JAMAIS un fond.
   Ce sont des encres de filet, de cote et de numero. Un aplat olive ferait
   un bandeau institutionnel, or ce site n'est pas une agence d'Etat et ne
   doit pas en avoir l'air.
   REGLE NEGATIVE 2 : aucune box-shadow, aucun border-radius, aucun gradient
   de fond hors des deux trames declarees ci-dessous (--rg-rayon reste a 0).
   REGLE NEGATIVE 3 : --pierre-seche ne sert que sur une section pleine
   largeur retournee, jamais sur un bloc de contenu isole.
   REGLE NEGATIVE 4 : aucun debit de traduction automatique, aucun tiret
   cadratin ni demi-cadratin dans la copie du site.
   ===================================================================== */

:root {

  /* ---------- 1. PALETTE : six a dix jetons nommes par des matieres ---------- */
  --papier-bouleau:    #EFEADF;  /* fond general de toutes les pages */
  --papier-creux:      #E2DCCE;  /* encarts, entetes de registre, colophon */
  --pierre-seche:      #D9D3C8;  /* mur de pierre seche : sections retournees */
  --encre-tourbe:      #26241E;  /* texte courant, titres */
  --encre-brume:       #575349;  /* mentions, legendes, dates, notes de marge */
  --olive-laiche:      #4F5A3C;  /* cotes de station, graduations, haut de lisiere */
  --laiton:            #7A5B2A;  /* filets de signature, surtitres, numeros */
  --granit:            #5F5B52;  /* liens et renvois croises */
  --filet-tourbe:      #B5AEA1;  /* filets internes des cellules, separateurs */
  --filet-fort-granit: #9A9284;  /* filets structurants, bordures de registre */
  --selection:         #DCE3D2;

  /* Jetons fixes des bandes retournees (aucun mode sombre : voir plus bas) */
  --rg-pierre-encre:   #26241E;
  --rg-pierre-filet:   #A79F91;

  /* ---------- 2. POLICES : trois piles systeme, zero requete ---------- */
  --rg-titre-police: "Sitka Heading", "Hoefler Text", Constantia, "Times New Roman", serif;
  --rg-texte-police: Seravek, "Segoe UI", "Lucida Grande", "Helvetica Neue", sans-serif;
  --rg-cote-police:  "Iowan Old Style", "Hoefler Text", Rockwell, Georgia, serif;

  /* ---------- 3. RYTHME ET PROPORTIONS ---------- */
  --rg-cadre:        74rem;
  --rg-marge:        12.5rem;   /* colonne de reperes, valeur du squelette */
  --rg-mesure-ch:    66ch;      /* mesure de lecture demandee */
  --rg-mesure:       36rem;     /* borne reelle de la colonne de lecture */
  --rg-gouttiere:    2.5rem;
  --rg-pas:          1.15rem;
  --rg-interligne:   1.58;
  --rg-rayon:        0;         /* aucun angle arrondi, jamais */
  --rg-graisse:      600;

  /* ---------- 4. TAILLES ---------- */
  --rg-t-base:  clamp(1.02rem, .98rem + .18vw, 1.09rem);
  --rg-t-h1:    clamp(1.85rem, 1.35rem + 1.7vw, 2.6rem);
  --rg-t-h2:    clamp(1.32rem, 1.1rem + .7vw, 1.62rem);
  --rg-t-h3:    1.08rem;
  --rg-t-petit: .84rem;
  --rg-t-menu:  .76rem;   /* troisieme role : cote, autorite, date */
  --rg-t-exergue: 1.2rem;

  /* ---------- 5. RATIOS D'IMAGE (deux minimum, nommes) ---------- */
  --rg-ratio-terrain:  21 / 9;
  --rg-ratio-station:  3 / 4;
  --rg-ratio-planche:  4 / 3;
}

/* =====================================================================
   BASE
   ===================================================================== */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* la bande retournee deborde de --rg-cadre : on coupe sans creer de
     conteneur de defilement, sinon position:sticky meurt dans la marge. */
  overflow-x: clip;
}

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

body {
  margin: 0;
  background: var(--papier-bouleau);
  color: var(--encre-tourbe);
  font-family: var(--rg-texte-police);
  font-size: var(--rg-t-base);
  line-height: var(--rg-interligne);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

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

a { color: var(--granit); text-underline-offset: .16em; text-decoration-thickness: from-font; }
a:hover { color: var(--laiton); }

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

h1, h2, h3, h4 {
  font-family: var(--rg-titre-police);
  font-weight: var(--rg-graisse);
  line-height: 1.14;
  margin: 0;
  color: var(--encre-tourbe);
}

p, ul, ol, dl, table, figure, blockquote { margin: 0; }
strong { font-weight: 600; }
em { font-style: italic; }   /* reserve exclusivement aux noms latins d'especes */

/* Rythme vertical par defaut dans les colonnes de texte */
.rg-flux > * + * { margin-top: var(--rg-pas); }

/* =====================================================================
   SIGNATURE A : rg-transect
   Un filet horizontal de 1 px portant trois graduations verticales
   inegales (2 px, 4 px, 7 px) qui marquent UPLAND, EDGE, WETLAND.
   Vit sous le nom de l'ouvrage, en tete de chaque tranche d'accueil,
   sous le h1 de chaque article et au-dessus du colophon.
   ===================================================================== */

.rg-transect {
  display: block;
  height: 7px;
  border-bottom: 1px solid var(--laiton);
  background-image:
    linear-gradient(to right, var(--olive-laiche) 0 2px, transparent 2px),
    linear-gradient(to right, var(--olive-laiche) 0 4px, transparent 4px),
    linear-gradient(to right, var(--laiton) 0 7px, transparent 7px);
  background-size: 7.5rem 2px, 7.5rem 4px, 7.5rem 7px;
  background-position: 0 100%, 0 100%, 0 100%;
  background-repeat: repeat-x, repeat-x, repeat-x;
}
.rg-transect--serre { background-size: 3.2rem 2px, 3.2rem 4px, 3.2rem 7px; }

/* Le libelle du registre d'article (« Station register ») : meme troisieme
   role typographique que la cote et l'autorite de la cellule cousue, jamais
   du texte courant. Il annonce le <dl class="rg-station"> qui suit. */
.rg-registre-titre {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--encre-brume);
  font-feature-settings: "lnum" 1, "tnum" 1;
  margin: 0 0 .5rem;
}

/* =====================================================================
   SIGNATURE B : rg-station
   La cellule de registre cousue. QUATRE colonnes separees par des filets
   internes : cote, terme, mesure en chiffres tabulaires, autorite citee.
   Pas de carte, pas d'ombre. Le modificateur --fiche reduit a trois
   colonnes (terme, mesure, autorite) pour les registres d'article.
   ===================================================================== */

.rg-station {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 7rem minmax(0, 12rem);
  border-block: 1px solid var(--filet-fort-granit);
}
.rg-station > * {
  border-right: 1px solid var(--filet-tourbe);
  padding: .55rem .9rem;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.rg-station > *:last-child { border-right: 0; }
.rg-station--fiche { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 11rem); }
.rg-station__ligne { display: contents; }
.rg-station__terme { font-family: var(--rg-titre-police); font-weight: 600; }
/* Troisieme colonne cousue : la mesure, en chiffres tabulaires, jamais coupee */
.rg-station__mesure {
  font-feature-settings: "lnum" 1, "tnum" 1;
  overflow-wrap: break-word;
  color: var(--encre-tourbe);
}
.rg-station__cote,
.rg-station__autorite { color: var(--encre-brume); }
.rg-station__tete {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 7rem minmax(0, 12rem);
  border-top: 1px solid var(--filet-fort-granit);
  border-bottom: 1px solid var(--filet-fort-granit);
  background: var(--papier-creux);
}
.rg-station__tete > * {
  border-right: 1px solid var(--filet-tourbe);
  padding: .4rem .9rem;
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-tourbe);
}
.rg-station__tete > *:last-child { border-right: 0; }

/* =====================================================================
   SIGNATURE C : rg-lisiere
   Filet de lisiere laiton : 2 px, degrade par paliers durs (olive en haut,
   laiton en bas), colle a gauche de tout bloc qui porte une observation.
   C'est la limite de zone humide vue en coupe : le point de bascule a
   55 % est l'endroit ou le sol devient hydrique.
   ===================================================================== */

.rg-lisiere {
  border-left: 2px solid transparent;
  padding-left: 1.1rem;
  border-image: linear-gradient(to bottom, var(--olive-laiche) 0 55%, var(--laiton) 55% 100%) 1;
  background: linear-gradient(to right, var(--papier-creux) 0 .35rem, transparent .35rem);
}

/* =====================================================================
   L'IDEE INATTENDUE : The Wet Line
   Une regle graduee en CSS pur, trois zones nommees, un curseur de laiton
   positionne la ou l'entree se situe sur le transect, et deux lignes fixes
   « Where you are » / « Who decides here ».
   ===================================================================== */

.rg-mouille { margin: 0; }
.rg-mouille__regle {
  position: relative;
  height: 2.4rem;
  border-bottom: 1px solid var(--filet-fort-granit);
  background-image:
    linear-gradient(to right, var(--olive-laiche) 0 1px, transparent 1px),
    linear-gradient(to right, var(--olive-laiche) 0 1px, transparent 1px);
  background-size: 33.333% 9px, 33.333% 5px;
  background-position: 0 100%, 0 100%;
  background-repeat: repeat-x, repeat-x;
}
.rg-mouille__zone {
  position: absolute;
  bottom: .45rem;
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-brume);
  white-space: nowrap;
}
.rg-mouille__zone--upland  { left: 0; }
.rg-mouille__zone--edge    { left: 33.333%; }
.rg-mouille__zone--wetland { left: 66.666%; }
.rg-mouille__curseur {
  position: absolute;
  top: -.55rem;
  bottom: -.35rem;
  left: 48%;
  width: 2px;
  background: var(--laiton);
}
.rg-mouille__curseur::after {
  content: "";
  position: absolute;
  top: -.35rem;
  left: -.29rem;
  width: .6rem;
  height: .6rem;
  border: 1px solid var(--laiton);
  background: var(--papier-bouleau);
}
.rg-mouille--upland     .rg-mouille__curseur { left: 14%; }
.rg-mouille--lisiere    .rg-mouille__curseur { left: 48%; }
.rg-mouille--marais     .rg-mouille__curseur { left: 82%; }
.rg-mouille--incertain  .rg-mouille__curseur { left: 48%; background: transparent; border-left: 2px dashed var(--laiton); }
.rg-mouille__ou,
.rg-mouille__qui {
  font-size: var(--rg-t-petit);
  color: var(--encre-brume);
  padding-top: .45rem;
}
.rg-mouille__ou strong,
.rg-mouille__qui strong {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-tourbe);
  font-weight: 400;
}
/* Version compacte : la meme regle, sans libelles, pour les entrees de flux */
.rg-mouille--compact { display: inline-block; vertical-align: middle; }
.rg-mouille--compact .rg-mouille__regle { width: 4rem; height: 1.1rem; border-bottom-color: var(--filet-tourbe); }
.rg-mouille--compact .rg-mouille__zone { display: none; }
.rg-mouille--compact .rg-mouille__curseur { top: -.3rem; bottom: -.2rem; }
.rg-mouille--compact .rg-mouille__curseur::after { display: none; }

/* =====================================================================
   OSSATURE
   ===================================================================== */

.rg-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre-tourbe);
  color: var(--papier-bouleau);
  padding: .6rem 1rem;
  font-family: var(--rg-cote-police);
  letter-spacing: .12em;
  z-index: 50;
}
.rg-evitement:focus { left: .5rem; top: .5rem; position: fixed; }

.rg-corpus {
  width: 100%;
  max-width: var(--rg-cadre);
  margin: 0 auto;
  padding: 0 1.15rem;
}

/* =====================================================================
   FRONTISPICE
   ===================================================================== */

.rg-frontispice { border-bottom: 2px solid var(--encre-tourbe); background: var(--papier-bouleau); }

.rg-frontispice__haut {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: 1.1rem 0 .6rem;
}

.rg-titraille { display: block; text-decoration: none; color: inherit; }
.rg-titraille:hover { color: var(--laiton); }
.rg-titraille__nom {
  display: block;
  font-family: var(--rg-titre-police);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  font-weight: var(--rg-graisse);
  letter-spacing: .006em;
}
.rg-titraille__sous {
  display: block;
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-brume);
  margin-top: .25rem;
}

.rg-etat {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-brume);
  text-align: right;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.rg-etat span { display: block; }
@media (max-width: 45.99em) { .rg-etat { text-align: left; } }

/* Navigation : LES DEUX ETATS, case a cocher, aucun script.
   Au-dessus de 52em : declencheur cache, liste en barre horizontale.
   En dessous : declencheur visible, liste repliee. */
.rg-navigation { border-top: 1px solid var(--filet-tourbe); padding: .4rem 0 .55rem; }
.rg-menu__case {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  clip-path: inset(50%);
}
.rg-menu__declencheur {
  display: inline-block;
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-tourbe);
  border: 1px solid var(--filet-fort-granit);
  padding: .3rem .8rem;
  cursor: pointer;
}
.rg-menu__declencheur::after { content: " +"; color: var(--laiton); }
.rg-menu__case:checked ~ .rg-menu__declencheur::after { content: " \2212"; }
.rg-menu__case:focus-visible ~ .rg-menu__declencheur { outline: 2px solid var(--laiton); outline-offset: 2px; }

.rg-navigation ul {
  list-style: none; margin: .5rem 0 0; padding: 0;
  display: none;
}
.rg-menu__case:checked ~ ul { display: flex; flex-direction: column; gap: .1rem; }
.rg-navigation a {
  font-family: var(--rg-titre-police);
  font-size: var(--rg-t-petit);
  letter-spacing: .01em;
  color: var(--encre-tourbe);
  text-decoration: none;
  padding: .25rem 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.rg-navigation a:hover,
.rg-navigation a[aria-current="page"] { border-bottom-color: var(--laiton); color: var(--laiton); }

@media (min-width: 52em) {
  .rg-menu__declencheur { display: none; }
  .rg-navigation ul { display: flex; flex-wrap: wrap; gap: .15rem 1.4rem; margin: 0; }
}

/* =====================================================================
   FIL D'ARIANE
   ===================================================================== */

.rg-fil {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-brume);
  padding: .85rem 0 0;
}
.rg-fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.rg-fil li + li::before { content: " / "; color: var(--filet-fort-granit); }
.rg-fil a { color: var(--encre-brume); }

/* =====================================================================
   PLAN DE PAGE : colonne de reperes + colonne de lecture
   ===================================================================== */

.rg-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem var(--rg-gouttiere);
  padding: 1.4rem 0 2.5rem;
  align-items: start;
}
.rg-marge { order: 2; }
.rg-lecture { order: 1; }

@media (min-width: 62em) {
  .rg-plan { grid-template-columns: var(--rg-marge) minmax(0, 1fr); }
  .rg-plan > .rg-marge   { grid-column: 1; grid-row: 1; order: 0; }
  .rg-plan > .rg-lecture { grid-column: 2; grid-row: 1; order: 0; }
  .rg-plan--inverse { grid-template-columns: minmax(0, 1fr) var(--rg-marge); }
  .rg-plan--inverse > .rg-marge   { grid-column: 2; }
  .rg-plan--inverse > .rg-lecture { grid-column: 1; }
}

.rg-marge {
  font-size: var(--rg-t-petit);
  color: var(--encre-brume);
  border-top: 2px solid var(--encre-tourbe);
  padding-top: .6rem;
}
@media (min-width: 62em) {
  .rg-marge { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}
.rg-marge__titre {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-tourbe);
  margin-bottom: .45rem;
}
.rg-marge ul { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.rg-marge li { border-bottom: 1px solid var(--filet-tourbe); }
.rg-marge li a { display: block; padding: .3rem 0; color: var(--encre-tourbe); text-decoration: none; }
.rg-marge li a:hover { color: var(--laiton); }

/* Rail de renvois croises : chaque renvoi porte sa cote de station */
.rg-rail { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.rg-rail li { border-bottom: 1px solid var(--filet-tourbe); padding: .35rem 0; }
.rg-rail li a { text-decoration: none; color: var(--encre-tourbe); display: block; }
.rg-rail li a:hover { color: var(--laiton); }
.rg-rail__nom {
  display: block;
  font-size: var(--rg-t-menu);
  color: var(--encre-brume);
  line-height: 1.35;
}
/* Frontispice nu : l'accueil porte son propre cartouche d'arpentage juste
   dessous, la tete de page n'y repete donc ni le nom ni l'etat d'edition. */
.rg-frontispice--nu .rg-etat { display: none; }
.rg-rail__cote {
  display: block;
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--olive-laiche);
}

.rg-lecture { max-width: 100%; min-width: 0; }
.rg-lecture--mesure { max-width: var(--rg-mesure); }

/* =====================================================================
   TRANCHES
   ===================================================================== */

.rg-tranche { padding: 0 0 1.9rem; }
.rg-tranche + .rg-tranche { border-top: 1px solid var(--filet-tourbe); padding-top: 1.4rem; }
.rg-tranche > .rg-transect { margin-bottom: .9rem; }

.rg-tranche__tete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .3rem 1rem;
  margin-bottom: .9rem;
}
.rg-tranche__titre { font-size: var(--rg-t-h2); letter-spacing: .006em; }
.rg-tranche__titre .rg-numero {
  font-family: var(--rg-cote-police);
  color: var(--laiton);
  margin-right: .5rem;
  font-weight: 400;
}
.rg-tranche__mention {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--encre-brume);
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.rg-chapeau { font-size: 1.03rem; max-width: var(--rg-mesure); }
.rg-ouverture { padding: 0 0 1.2rem; }
.rg-ouverture > * + * { margin-top: .7rem; }
.rg-ouverture--etroite { max-width: var(--rg-mesure); }
.rg-titre-page { font-size: var(--rg-t-h1); letter-spacing: .006em; line-height: 1.14; }
.rg-titre-page .rg-cote { display: block; margin-bottom: .4rem; }
.rg-mention { font-size: var(--rg-t-petit); color: var(--encre-brume); }

/* =====================================================================
   CARTOUCHE D'ARPENTAGE (tete d'accueil et tete de rubrique)
   ===================================================================== */

.rg-cartouche { padding: 1.1rem 0 .5rem; }
.rg-cartouche__ligne {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .35rem 1.5rem;
}
.rg-cartouche__nom {
  font-family: var(--rg-titre-police);
  font-size: var(--rg-t-h1);
  font-weight: var(--rg-graisse);
  line-height: 1.14;
  display: block;
}
.rg-cartouche__sous {
  display: block;
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--encre-brume);
  margin-top: .3rem;
}
.rg-cartouche__etat {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-brume);
  text-align: right;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.rg-cartouche__etat span { display: block; }
@media (max-width: 45.99em) { .rg-cartouche__etat { text-align: left; } }

/* =====================================================================
   ABECEDAIRE
   ===================================================================== */

.rg-abecedaire {
  border-top: 1px solid var(--filet-fort-granit);
  border-bottom: 1px solid var(--filet-fort-granit);
  padding: .5rem 0;
  margin: 0 0 1.4rem;
}
.rg-abecedaire ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem; }
.rg-abecedaire a, .rg-abecedaire span {
  display: inline-block; min-width: 1.7rem; padding: .18rem .25rem; text-align: center;
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-petit);
  letter-spacing: .12em;
  text-decoration: none;
  color: var(--encre-tourbe);
  border: 1px solid transparent;
}
.rg-abecedaire a:hover { border-color: var(--laiton); color: var(--laiton); }
.rg-abecedaire span { color: var(--filet-fort-granit); }
/* A 390 px le bandeau disparait, remplace par un lien unique vers l'index */
.rg-saut-index { display: inline-block; font-size: var(--rg-t-petit); margin: 0 0 1.2rem; }
@media (min-width: 46em) { .rg-saut-index { display: none; } }
@media (max-width: 45.99em) { .rg-abecedaire { display: none; } }

/* =====================================================================
   NOMENCLATURE
   ===================================================================== */

.rg-nomenclature { margin: 0; }
.rg-entree {
  border-top: 1px solid var(--filet-tourbe);
  padding: .7rem 0 .75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .15rem 1rem;
}
@media (min-width: 46em) { .rg-entree { grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); } }
.rg-entree:hover { background: var(--papier-creux); }
.rg-entree:first-of-type { border-top: 1px solid var(--filet-fort-granit); }
.rg-lettrage + .rg-nomenclature .rg-entree:first-of-type { border-top: 0; }

.rg-vedette {
  font-family: var(--rg-titre-police);
  font-weight: var(--rg-graisse);
  font-size: var(--rg-t-h3);
  margin: 0;
  line-height: 1.25;
}
.rg-vedette a { color: var(--encre-tourbe); text-decoration: none; }
.rg-vedette a:hover { color: var(--laiton); text-decoration: underline; }
.rg-vedette__variante {
  display: block;
  font-family: var(--rg-texte-police);
  font-style: italic;
  font-weight: 400;
  font-size: var(--rg-t-petit);
  color: var(--encre-brume);
}
.rg-glose { margin: 0; font-size: .97rem; }
.rg-glose p + p { margin-top: .4rem; }

/* Troisieme role typographique : cote de station, nom d'autorite, date.
   Rien d'autre n'a droit a cette police. */
.rg-cote {
  display: block;
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-brume);
  font-feature-settings: "lnum" 1, "tnum" 1;
  white-space: nowrap;
}
.rg-cote--station { color: var(--olive-laiche); }
.rg-cote--laiton { color: var(--laiton); }
.rg-autorite {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-brume);
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.rg-date {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-brume);
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.rg-etiquette {
  display: inline-block;
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-tourbe);
  border: 1px solid var(--filet-fort-granit);
  padding: .05rem .4rem;
  margin-right: .3rem;
}
.rg-lettrage {
  display: flex; align-items: baseline; gap: .7rem;
  font-family: var(--rg-titre-police);
  font-size: 1.5rem;
  color: var(--laiton);
  border-bottom: 2px solid var(--encre-tourbe);
  padding: 1.4rem 0 .25rem;
  scroll-margin-top: 1rem;
}
.rg-lettrage__compte {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-brume);
}

/* Index plat mis en colonnes par le CSS */
.rg-index-termes { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--rg-gouttiere); column-rule: 1px solid var(--filet-tourbe); }
@media (min-width: 46em) { .rg-index-termes { columns: 3; } }
@media (min-width: 74em) { .rg-index-termes { columns: 4; } }
.rg-index-termes li { break-inside: avoid; border-bottom: 1px solid var(--filet-tourbe); padding: .24rem 0; font-size: .9rem; display: flex; gap: .45rem; align-items: baseline; }
.rg-index-termes a { color: var(--encre-tourbe); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.rg-index-termes a:hover { color: var(--laiton); text-decoration: underline; }
.rg-index-termes .rg-cote { display: inline; margin: 0; }

/* =====================================================================
   REGISTRE A QUATRE COLONNES DANS UN CONTENEUR DEFILANT
   ===================================================================== */

.rg-abaque {
  overflow-x: auto;
  border: 1px solid var(--filet-fort-granit);
  background: var(--papier-bouleau);
  max-width: 100%;
}
.rg-abaque:focus-visible { outline: 2px solid var(--laiton); outline-offset: 0; }
.rg-abaque .rg-station,
.rg-abaque .rg-releve-table { min-width: 38rem; }

.rg-releve-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 38rem;
  font-size: var(--rg-t-petit);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.rg-releve-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-brume);
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--filet-tourbe);
}
.rg-releve-table th, .rg-releve-table td {
  padding: .45rem .7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--filet-tourbe);
  border-right: 1px solid var(--filet-tourbe);
}
.rg-releve-table th:last-child, .rg-releve-table td:last-child { border-right: 0; }
.rg-releve-table thead th {
  background: var(--papier-creux);
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--filet-fort-granit);
  white-space: nowrap;
}
.rg-releve-table tbody th { font-family: var(--rg-titre-police); font-weight: 600; white-space: nowrap; }
.rg-releve-table tbody tr:last-child th,
.rg-releve-table tbody tr:last-child td { border-bottom: 0; }

.rg-defilement-note {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-brume);
  margin-top: .35rem;
}
@media (min-width: 46em) { .rg-defilement-note { display: none; } }

/* =====================================================================
   RENVOIS CROISES
   ===================================================================== */

.rg-renvoi { color: var(--granit); font-style: italic; }
.rg-renvoi::before { content: "\2192 "; font-style: normal; }
/* Planche de tete : la vue de site qui ouvre le cartouche d'accueil, placee
   avant le premier h2 pour que le terrain soit montre avant d'etre decrit. */
.rg-planche-tete { margin-top: 1.6rem; }
.rg-planche-tete .rg-tranche__mention { margin-bottom: .45rem; }

/* Renvois de tranche : la liste de fin d'entree, ancre de matrice + glose */
.rg-tranche-renvois { padding: 1.2rem 0; border-top: 1px solid var(--filet-tourbe); }
.rg-tranche-renvois__titre {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--laiton);
  margin: 0 0 .6rem;
}
.rg-renvois__nom {
  display: block;
  font-size: var(--rg-t-menu);
  color: var(--encre-brume);
  margin-left: 1.55rem;
  line-height: 1.35;
}
.rg-renvois {
  list-style: none; margin: 0; padding: .7rem 0 0;
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  border-top: 1px solid var(--filet-tourbe);
  font-size: var(--rg-t-petit);
}
.rg-renvois li::before { content: "\2192 "; color: var(--filet-fort-granit); }
.rg-renvois a { color: var(--granit); text-decoration: none; }
.rg-renvois a:hover { text-decoration: underline; }

/* =====================================================================
   NOTULE ET EXERGUE
   ===================================================================== */

.rg-notule {
  background: var(--papier-creux);
  padding: .8rem 1rem;
  font-size: var(--rg-t-petit);
  border-top: 1px solid var(--filet-fort-granit);
  border-bottom: 1px solid var(--filet-fort-granit);
}
.rg-notule__titre {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .26em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.rg-exergue {
  font-size: var(--rg-t-exergue);
  border-top: 2px solid var(--laiton);
  border-bottom: 1px solid var(--laiton);
  padding: .9rem 0;
  margin: 0 0 1.3rem;
  max-width: var(--rg-mesure);
}
.rg-exergue strong { font-family: var(--rg-titre-police); }

/* =====================================================================
   PARAGRAPHE A MANCHETTE (titre en marge, texte a droite)
   ===================================================================== */

.rg-para {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--filet-tourbe);
}
.rg-para ul, .rg-para ol, .rg-glose ul, .rg-notule ul { padding-left: 1.15rem; }
.rg-notule ul { list-style: square; }
.rg-para li, .rg-notule li { padding: .1rem 0; }

/* La manchette de marge : le titre tient la colonne de gauche et une note
   cousue descend le long de la marge (station, bloc, date). C'est le filet
   de marge du registre, ecrit : la colonne de gauche n'est jamais du vide,
   elle porte la cote du bloc. */
.rg-manchette { display: flex; flex-direction: column; gap: .55rem; padding-top: .2rem; }
.rg-manchette__titre {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--laiton);
  margin: 0;
}
.rg-manchette .rg-numero { color: var(--encre-brume); }
.rg-manchette__cote {
  margin: 0;
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--olive-laiche);
  font-feature-settings: "lnum" 1, "tnum" 1;
}

@media (min-width: 60em) {
  /* La manchette est une note de marge suspendue, pas une colonne de bande :
     elle tient la marge a gauche, le texte tient la colonne de lecture a
     droite, et la marge n'est jamais une cellule vide mesuree a cote d'un
     bloc plein. */
  .rg-para {
    position: relative;
    display: block;
    padding-left: calc(var(--rg-marge) + var(--rg-gouttiere));
  }
  .rg-manchette {
    position: absolute;
    top: 1.2rem;
    left: 0;
    width: var(--rg-marge);
    text-align: right;
  }
  .rg-para > *:not(.rg-manchette) { max-width: var(--rg-mesure); }
  .rg-para > .rg-abaque, .rg-para > .rg-planche, .rg-para > figure { max-width: none; }
  .rg-lecture--mesure .rg-para { padding-left: 0; }
  .rg-lecture--mesure .rg-manchette { position: static; width: auto; text-align: left; }
}

/* Rythme vertical de la colonne de lecture : les paragraphes respirent,
   les intertitres se detachent, le premier bloc ne pousse pas la manchette. */
.rg-lisiere > * + * { margin-top: var(--rg-pas); }
.rg-lisiere > h3 {
  margin-top: 1.5rem;
  font-size: var(--rg-t-h3);
  letter-spacing: .01em;
  padding-top: .55rem;
  border-top: 1px solid var(--filet-tourbe);
}

/* Lettrine de trois lignes, sur le premier bloc de chaque article */
.rg-para--lettrine .rg-lisiere > p:first-of-type::first-letter {
  float: left;
  font-family: var(--rg-titre-police);
  font-weight: var(--rg-graisse);
  font-size: 3.05em;
  line-height: .84;
  padding: .08em .14em 0 0;
  color: var(--laiton);
}

/* =====================================================================
   PLANCHE (image)
   ===================================================================== */

.rg-planche { margin: 0; }
.rg-planche__cadre {
  border: 1px solid var(--filet-fort-granit);
  background: var(--papier-bouleau);
  padding: 6px;
}
.rg-planche img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .18s ease-out;
}
.rg-planche--terrain img  { aspect-ratio: var(--rg-ratio-terrain); object-fit: cover; }
.rg-planche--station img  { aspect-ratio: var(--rg-ratio-station); object-fit: cover; }
.rg-planche--planche img  { aspect-ratio: var(--rg-ratio-planche); object-fit: cover; }
.rg-planche__cadre:hover img { transform: scale(1.012); }
@media (prefers-reduced-motion: reduce) { .rg-planche__cadre:hover img { transform: none; } }

.rg-planche__legende {
  font-size: var(--rg-t-petit);
  color: var(--encre-brume);
  padding-top: .4rem;
  border-bottom: 1px solid var(--filet-tourbe);
  padding-bottom: .5rem;
}
.rg-legende__champ {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* =====================================================================
   FLUX DATE (rg-releve) : les articles, du sec vers l'eau
   ===================================================================== */

.rg-releve { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: var(--rg-gouttiere); }
@media (min-width: 60em) { .rg-releve { columns: 2; column-rule: 1px solid var(--filet-tourbe); } }
.rg-releve > li {
  break-inside: avoid;
  padding: .2rem 0 .9rem;
  margin-bottom: .6rem;
}
.rg-releve__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.rg-releve__titre { font-size: var(--rg-t-h3); font-family: var(--rg-titre-police); font-weight: var(--rg-graisse); }
.rg-releve__titre a { color: var(--encre-tourbe); text-decoration: none; }
.rg-releve__titre a:hover { color: var(--laiton); text-decoration: underline; }
.rg-releve__extrait { font-size: var(--rg-t-petit); color: var(--encre-brume); margin-top: .25rem; }
.rg-releve__pied { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .35rem; }

/* =====================================================================
   BANDE RETOURNEE PLEINE LARGEUR SUR PIERRE SECHE
   ===================================================================== */

.rg-pierre {
  background-color: var(--pierre-seche);
  background-image:
    repeating-linear-gradient(0deg, rgba(38,36,30,.10) 0 1px, transparent 1px 2.35rem),
    repeating-linear-gradient(90deg, rgba(38,36,30,.07) 0 1px, transparent 1px 5.7rem);
  background-position: 0 0, 1.9rem 0;
}
.rg-releve-croise {
  margin-inline: calc(50% - 50vw);
  padding: 1.6rem calc(50vw - 50%) 2rem;
  border-top: 2px solid var(--rg-pierre-encre);
  border-bottom: 2px solid var(--rg-pierre-encre);
  color: var(--rg-pierre-encre);
}
.rg-releve-croise .rg-tranche__titre,
.rg-releve-croise .rg-chapeau { color: var(--rg-pierre-encre); }
.rg-releve-croise .rg-tranche__mention { color: #4A463D; }
.rg-releve-croise .rg-station { border-block-color: var(--rg-pierre-filet); background: rgba(239,234,223,.72); }
.rg-releve-croise .rg-station > * { border-right-color: var(--rg-pierre-filet); }
.rg-releve-croise .rg-station__tete { background: rgba(226,220,206,.92); border-color: var(--rg-pierre-filet); }
.rg-releve-croise .rg-station__tete > * { border-right-color: var(--rg-pierre-filet); }
.rg-releve-croise .rg-abaque { background: rgba(239,234,223,.72); border-color: var(--rg-pierre-filet); }
.rg-releve-croise a { color: #403C33; }

/* =====================================================================
   TROIS TERRAINS : assess, plan, manage
   ===================================================================== */

.rg-trois-terrains__rang {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem 0;
  margin-top: .4rem;
}
@media (min-width: 52em) {
  .rg-trois-terrains__rang { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .rg-terrain { border-right: 1px solid var(--filet-tourbe); padding-right: 1.3rem; }
  .rg-terrain + .rg-terrain { padding-left: 1.3rem; }
  .rg-terrain:last-child { border-right: 0; padding-right: 0; }
}
.rg-terrain { border-bottom: 1px solid var(--filet-tourbe); padding-bottom: 1.2rem; padding-top: .2rem; }
@media (min-width: 52em) { .rg-terrain { border-bottom: 0; padding-bottom: 0; } }
.rg-terrain__titre { font-size: var(--rg-t-h3); margin-top: .7rem; }
.rg-terrain__titre a { color: var(--encre-tourbe); text-decoration: none; }
.rg-terrain__titre a:hover { color: var(--laiton); text-decoration: underline; }
.rg-terrain p { font-size: var(--rg-t-petit); color: var(--encre-brume); margin-top: .4rem; }
.rg-terrain__liens { list-style: none; margin: .7rem 0 0; padding: 0; font-size: var(--rg-t-petit); }
.rg-terrain__liens li { border-bottom: 1px solid var(--filet-tourbe); padding: .25rem 0; }
.rg-terrain__liens a { color: var(--encre-tourbe); text-decoration: none; }
.rg-terrain__liens a:hover { color: var(--laiton); text-decoration: underline; }
.rg-terrain__liens .rg-cote { display: inline; }

/* =====================================================================
   LIGNE D'AUTEUR : ce que le site refuse de faire
   ===================================================================== */

.rg-ligne-auteur {
  max-width: var(--rg-mesure);
  margin: 0 auto;
  padding: 2.4rem 0 2.6rem;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--encre-tourbe);
}

/* =====================================================================
   JALONS
   ===================================================================== */

.rg-jalons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
  border-top: 2px solid var(--encre-tourbe);
  margin-top: 1.6rem;
  padding-top: .9rem;
}
@media (min-width: 46em) { .rg-jalons { grid-template-columns: 1fr 1fr; } }
.rg-jalon { text-decoration: none; color: var(--encre-tourbe); display: block; padding: .4rem 0; }
.rg-jalon:hover .rg-jalon__nom { color: var(--laiton); text-decoration: underline; }
.rg-jalon__sens {
  display: block;
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-brume);
}
.rg-jalon__nom { font-family: var(--rg-titre-police); font-weight: 600; }
@media (min-width: 46em) { .rg-jalon--suivant { text-align: right; } }

/* =====================================================================
   COLOPHON
   ===================================================================== */

.rg-colophon {
  border-top: 2px solid var(--encre-tourbe);
  background: var(--papier-creux);
  padding: 0 0 2rem;
  font-size: var(--rg-t-petit);
}
.rg-colophon > .rg-transect { margin-bottom: 1.5rem; }
.rg-colophon__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem var(--rg-gouttiere);
}
@media (min-width: 46em) {
  /* Quatre colonnes cousues. Les trois coutures sont tracees sur la grille
     elle-meme, pas sur les blocs : chaque colonne garde la hauteur de son
     contenu et la couture descend sur toute la bande. */
  .rg-colophon__grille {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    align-items: start;
    background-image: repeating-linear-gradient(to right,
      transparent 0 calc(25% - 1px), var(--filet-tourbe) calc(25% - 1px) 25%);
  }
  .rg-colophon__grille > * { padding-right: calc(var(--rg-gouttiere) / 2); }
  .rg-colophon__grille > * + * { padding-left: calc(var(--rg-gouttiere) / 2); }
}
.rg-colophon h2 {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .26em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.rg-colophon ul { list-style: none; margin: 0; padding: 0; }
.rg-colophon li { padding: .16rem 0; }
.rg-colophon a { color: var(--encre-tourbe); }
.rg-colophon a:hover { color: var(--laiton); }
.rg-colophon__col--lisiere { border-left: 2px solid transparent; padding-left: 1rem;
  border-image: linear-gradient(to bottom, var(--olive-laiche) 0 55%, var(--laiton) 55% 100%) 1; }
.rg-colophon__ident { border-block: 1px solid var(--filet-fort-granit); margin-bottom: .7rem; }
.rg-colophon__ident > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  border-bottom: 1px solid var(--filet-tourbe);
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.rg-colophon__ident > div:last-child { border-bottom: 0; }
.rg-colophon__ident dt,
.rg-colophon__ident dd { padding: .35rem .6rem; margin: 0; }
.rg-colophon__ident dt {
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-brume);
  border-right: 1px solid var(--filet-tourbe);
}
.rg-colophon__pied {
  border-top: 1px solid var(--filet-fort-granit);
  margin-top: 1.4rem;
  padding-top: .8rem;
  color: var(--encre-brume);
  font-family: var(--rg-cote-police);
  font-size: var(--rg-t-menu);
  letter-spacing: .22em;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; justify-content: space-between;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* =====================================================================
   MOBILE : ce qui se replie, ce qui reste signature, ce qui disparait
   ===================================================================== */

@media (max-width: 45.99em) {
  /* Le transect garde ses trois graduations, son pas se resserre */
  .rg-transect { background-size: 3.2rem 2px, 3.2rem 4px, 3.2rem 7px; }
  /* La cellule de station passe a deux colonnes ; mesure et autorite
     descendent sur une deuxieme ligne, les filets internes deviennent
     des filets de ligne. */
  .rg-station--fiche { display: block; }
  .rg-station--fiche > .rg-station__ligne {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    border-bottom: 1px solid var(--filet-tourbe);
  }
  .rg-station--fiche > .rg-station__ligne > * { border-right: 0; }
  .rg-station--fiche > .rg-station__ligne > .rg-station__terme { border-right: 1px solid var(--filet-tourbe); }
  .rg-station--fiche > .rg-station__ligne > dd { grid-column: 2; border-top: 1px solid var(--filet-tourbe); }
  .rg-station__tete { display: none; }
  /* Le filet de lisiere garde ses 2 px et son point de bascule a 55 % */
  .rg-lisiere { padding-left: .8rem; }
  /* La manchette repasse au-dessus de son texte, en capitales laiton */
  .rg-manchette { text-align: left; }
  .rg-manchette__cote { display: inline-block; }
  .rg-planche__cadre:hover img { transform: none; }
  /* La trame de pierre seche se reduit a un fond plat : pas de moirage */
  .rg-pierre {
    background-image: none;
  }
}

/* =====================================================================
   IMPRESSION
   ===================================================================== */

@media print {
  :root { --papier-bouleau: #ffffff; --papier-creux: #ffffff; --pierre-seche: #ffffff; }
  .rg-navigation, .rg-marge, .rg-abecedaire, .rg-jalons, .rg-evitement, .rg-saut-index { display: none; }
  .rg-plan { grid-template-columns: minmax(0, 1fr); }
  a { color: inherit; text-decoration: none; }
  .rg-abaque { overflow: visible; }
  .rg-releve-table, .rg-abaque .rg-station { min-width: 0; }
  /* The Wet Line est conservee a l'impression */
  .rg-mouille { break-inside: avoid; }
}