/* =========================================================================
   LE CHÊNE VERT · systeme de design « La yeuse et le bocage », prefixe yeu-.
   L'arbre et sa conduite donnent leur nom a chaque module : allee (le chemin
   d'exploitation = largeur utile), lisiere (la bordure du champ = en-tete),
   haie (la haie qui relie = navigation), cime (le haut de l'arbre = couverture
   de l'accueil), bornage (la bande de chiffres = reperes du site), chemin
   (le fil d'Ariane), taillis (le peuplement conduit en tete = section),
   etiquette (surtitre), planches / planche (la planche d'herbier = fiche),
   cerne / anneau (le cerne de l'anneau de croissance = registre date),
   plant (le jeune arbre mis en terre = tete d'article), silhouette (le port
   libre de l'arbre = image de tete), fut (le tronc = colonne de lecture),
   branche (la branche portreuse = rail collant), creux (le creux de la
   fourche = encadre de note), mesure (la mesure du pied = poste de donnees),
   exergue (l'exergue), arpentage (le tableau de mesures), ensuite (a lire
   ensuite), racines (le pied de page), symbole (glyphes SVG : feuille,
   greffoir, perche, rameau), filet (separateur).

   Palette « Dessus de feuille, dessous tomenteux » : le dessous paille-gris
   de la feuille de yeuse pour le fond, le dessus olive presque noir en
   dominante, le gland brun en second accent, le lichen en ornement.
   Angles VIFS partout, fiches en aplat SANS filet, colonne de lecture de
   68ch doublee d'un rail collant, registre date SANS vignette, accueil en
   SOMMAIRE collant a gauche et sections numerotees a droite, sans aucune
   mosaique de fiches. Aucune requete externe, aucune police distante, aucun
   script. Mode sombre automatique.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COULEURS · le dessous tomenteux et le dessus de feuille ------ */
  --sol:          #e0debc;  /* dessous de feuille pale : fond des pages  */
  --sol-profond:     #d2d0ae;  /* reserves, sections alternees, aplat fiche */
  --sol-clair:     #f0eece;  /* encadres, lignes paires des tableaux      */
  --ecorce:          #22211a;  /* encre noire-verte : texte courant         */
  --ecorce-nuit:    #1c1c0a;  /* fonds sombres : en-tete, mesure, pied     */
  --ecorce-doux:    #63614e;  /* legendes, mentions, chapo                 */
  --feuille:      #3e3e20;  /* DOMINANTE : liens, plaquettes, filets     */
  --feuille-foncee: #343418;  /* survol, appui                             */
  --feuille-claire: #b0b088;  /* dessus de feuille sur fond sombre         */
  --gland:           #6a6238;  /* second accent : legendes de tableau       */
  --gland-clair:      #948c58;  /* gland sur fond sombre                     */
  --lichen:         #9a9c80;  /* ornements, jamais un texte sur fond clair */
  --brindille:           #c4c2a4;  /* filet fin sur fond clair                  */
  --brindille-nuit:     #3a3a26;  /* filet fin sur fond sombre                 */
  --nuit-sol:    #181806;  /* mode sombre : fond                        */
  --nuit-profond:     #202012;
  --nuit-clair:     #363626;
  --nuit-ecorce:  #ceccae;
  --nuit-doux:    #aaaa8c;

  /* ---- 2. TYPOGRAPHIE · piles systeme, rien de distant ---------------- */
  --police-titres: Perpetua, "Perpetua Titling MT", Cochin, "Palatino Linotype", Georgia, serif;
  --police-lecture: Tahoma, "Segoe UI", Verdana, "DejaVu Sans", sans-serif;

  --titre-graisse: 600;
  --titre-interlettrage: 0.002em;
  --capitales-interlettrage: 0.18em;

  --texte-corps: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --texte-interligne: 1.62;
  --niveau-h1: clamp(2.05rem, 1.05rem + 3.4vw, 3.7rem);
  --niveau-h2: clamp(1.42rem, 1.08rem + 1.28vw, 2.05rem);
  --niveau-h3: clamp(1.1rem, 1rem + 0.5vw, 1.36rem);
  --niveau-h4: 1.02rem;

  /* ---- 3. RYTHME ------------------------------------------------------ */
  --fut-mesure:  68ch;
  --allee-largeur:  1280px;
  --branche-largeur: 14rem;
  --bordure:    clamp(1rem, 3.6vw, 3.4rem);
  --gouttiere:   clamp(0.85rem, 2vw, 1.8rem);
  --pousse:    clamp(2.2rem, 5vw, 4.8rem);
  --decalage-h: clamp(1rem, 2.6vw, 2.8rem);

  /* ---- 4. DETAILS ----------------------------------------------------- */
  --arete:    0;            /* angles vifs partout : aucun rayon */
  --brindille-fine: 1px solid var(--brindille);
  --cadence:    150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sol:          var(--nuit-sol);
    --sol-profond:     var(--nuit-profond);
    --sol-clair:     var(--nuit-clair);
    --ecorce:          var(--nuit-ecorce);
    --ecorce-doux:    var(--nuit-doux);
    --feuille:      var(--feuille-claire);
    --feuille-foncee: #c2c29a;
    --gland:           var(--gland-clair);
    --lichen:         #7d7f66;
    --brindille:           #3a3a26;
  }
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sol);
  color: var(--ecorce);
  font-family: var(--police-lecture);
  font-size: var(--texte-corps);
  line-height: var(--texte-interligne);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.yeu-symbole { display: inline-block; vertical-align: -0.14em; }

h1, h2, h3, h4 {
  font-family: var(--police-titres);
  font-weight: var(--titre-graisse);
  letter-spacing: var(--titre-interlettrage);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--niveau-h1); }
h2 { font-size: var(--niveau-h2); }
h3 { font-size: var(--niveau-h3); }
h4 { font-size: var(--niveau-h4); }

p, ul, ol { margin: 0 0 1.1em; }
a {
  color: var(--feuille);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.17em;
  transition: color var(--cadence);
}
a:hover { color: var(--feuille-foncee); }
:focus-visible {
  outline: 2px solid var(--feuille);
  outline-offset: 3px;
  border-radius: var(--arete);
}
hr { border: 0; border-top: var(--brindille-fine); margin: var(--pousse) 0; }

::selection { background: var(--feuille); color: #f4f2d8; }

/* Chiffres alignes : dates, skalen, notes, mesures. */
.yeu-arpentage, .yeu-mesure, .yeu-date, .yeu-mentions, .yeu-bornage,
.yeu-taillis__numero, .yeu-cime__annee, .yeu-branche {
  font-variant-numeric: tabular-nums;
}

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

.yeu-saut {
  position: absolute; left: -9999px; top: 0;
  background: var(--ecorce-nuit); color: #f0eece;
  padding: 0.7rem 1.15rem; z-index: 60;
}
.yeu-saut:focus { left: 0.6rem; top: 0.6rem; }

/* La allee : largeur utile de toute zone de contenu. */
.yeu-allee {
  width: 100%;
  max-width: var(--allee-largeur);
  margin-inline: auto;
  padding-inline: var(--bordure);
}
.yeu-parcelle { display: block; }

/* --- Lisiere : l'en-tete, le terrain ou tout commence --------------------- */
.yeu-lisiere {
  background: var(--ecorce-nuit);
  color: #f0eece;
  border-bottom: 4px solid var(--feuille);
  padding-block: clamp(0.6rem, 1.1vw, 0.85rem);
}
.yeu-lisiere__rangee {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
}
.yeu-lisiere__marque {
  font-family: var(--police-titres);
  font-size: clamp(1.18rem, 0.95rem + 0.85vw, 1.62rem);
  color: #f0eece;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.yeu-lisiere__marque:hover { color: #fff; }
.yeu-lisiere__marque span {
  display: block;
  font-family: var(--police-lecture);
  font-size: 0.6rem;
  letter-spacing: var(--capitales-interlettrage);
  text-transform: uppercase;
  color: var(--feuille-claire);
  margin-top: 0.26rem;
}
.yeu-haie ul {
  display: flex; flex-wrap: wrap;
  gap: 0.25rem 1.05rem;
  list-style: none; margin: 0; padding: 0;
}
.yeu-haie__maille a {
  color: #c4c2a4;
  text-decoration: none;
  font-size: 0.79rem;
  letter-spacing: 0.02em;
  padding-block: 0.14rem;
  border-bottom: 2px solid transparent;
  transition: color var(--cadence), border-color var(--cadence);
}
.yeu-haie__maille a:hover,
.yeu-haie__maille a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--feuille-claire);
}
/* La bascule du menu : une case a cocher hors ecran mais focalisable, une etiquette
   qui sert de bouton. Invisible sur grand ecran, ou les sept entrees tiennent. */
.yeu-haie__bascule {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  border: 0;
}
.yeu-haie__bouton { display: none; }

/* --- Chemin : le fil d'Ariane -------------------------------------------- */
.yeu-chemin { padding-block: clamp(0.8rem, 1.7vw, 1.25rem); }
.yeu-chemin ol {
  display: flex; flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.79rem;
  color: var(--ecorce-doux);
}
.yeu-chemin li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--feuille);
}
.yeu-chemin a { color: var(--ecorce-doux); }
.yeu-chemin a:hover { color: var(--feuille); }
.yeu-chemin [aria-current="page"] { color: var(--ecorce); font-weight: 600; }

/* =========================================================================
   CIME · le depart de la piste : bandeau PHOTO pleine largeur, voile
   fige EN DUR (jamais une variable : en theme clair une variable pale
   delaverait la photo en gris), titre et chapo poses en bas a gauche dans
   la zone calme, bande de Bornage sous le voile. Le bandeau est une
   BANDE et non un ecran : la mosaique des rubriques commence avant
   700 px de hauteur de page.
   ========================================================================= */

.yeu-cime {
  position: relative;
  isolation: isolate;
  background: var(--ecorce-nuit);
  min-height: clamp(232px, 23vw, 330px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.yeu-cime__vue {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.yeu-cime::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(28, 28, 10, 0.92) 0 42%, rgba(28, 28, 10, 0.34) 100%);
}
.yeu-cime__cadre {
  width: 100%;
  padding-block: clamp(1.15rem, 2.3vw, 1.85rem) clamp(0.75rem, 1.4vw, 1.1rem);
  color: #f0eece;
}
.yeu-cime__surtitre {
  display: flex; align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: var(--capitales-interlettrage);
  text-transform: uppercase;
  color: var(--feuille-claire);
  margin: 0 0 0.6rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.62);
}
.yeu-cime h1 {
  max-width: 32ch;
  font-size: clamp(1.85rem, 1rem + 2.9vw, 3.1rem);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.yeu-cime__chapo {
  font-size: clamp(0.95rem, 0.91rem + 0.22vw, 1.06rem);
  line-height: 1.46;
  max-width: 80ch;
  margin: 0.7rem 0 0;
  color: #d8d6b8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  text-wrap: pretty;
}
.yeu-cime__annee {
  margin: 0.8rem 0 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  font-size: 0.72rem;
  letter-spacing: var(--capitales-interlettrage);
  text-transform: uppercase;
  color: #9a9c80;
}
.yeu-cime__annee em {
  font-style: normal;
  color: #fff;
  letter-spacing: 0.09em;
}

/* La bande de chiffres, collee sous le voile. */
.yeu-bornage {
  background: var(--ecorce-nuit);
  border-bottom: var(--brindille-fine);
}
.yeu-bornage ol {
  display: flex;
  list-style: none; margin: 0; padding: 0;
  gap: 0;
  overflow-x: auto;
}
.yeu-bornage li {
  flex: 1 1 0;
  min-width: max-content;
  padding: 0.62rem 1.1rem;
  border-left: 1px solid var(--brindille-nuit);
  font-size: 0.73rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #c4c2a4;
  white-space: nowrap;
}
.yeu-bornage li:first-child { border-left: 0; padding-left: 0; }
.yeu-bornage li strong { color: var(--feuille-claire); font-weight: 600; }

/* =========================================================================
   GUIDE · le rythme de l'accueil : un SOMMAIRE collant a gauche et des
   tranches numerotees a droite. Aucune mosaique de fiches : chaque tranche
   est une partie du guide, avec sa scene, ses pages en lignes de registre
   (cerne / anneau) et sa synthese (creux). Le sommaire est le meme element
   que le rail de lecture : filet de 3 px en dominante, chiffres en aplat.
   ========================================================================= */

.yeu-guide { padding-block: clamp(1.2rem, 2.4vw, 2.2rem) 0; }
.yeu-guide__grille {
  display: grid;
  grid-template-columns: var(--branche-largeur) minmax(0, 1fr);
  column-gap: clamp(1.6rem, 3.4vw, 3.4rem);
  align-items: start;
}
.yeu-guide__sommaire {
  position: sticky;
  top: 1.2rem;
  font-size: 0.78rem;
  color: var(--ecorce-doux);
  border-top: 3px solid var(--feuille);
  padding-top: 0.7rem;
  margin-bottom: 1.6rem;
}
.yeu-guide__sommaire ol {
  list-style: none; margin: 0; padding: 0;
  counter-reset: tranche;
}
.yeu-guide__sommaire li {
  counter-increment: tranche;
  padding-block: 0.3rem;
  border-bottom: var(--brindille-fine);
}
.yeu-guide__sommaire li:last-child { border-bottom: 0; }
.yeu-guide__sommaire a {
  color: var(--ecorce-doux);
  text-decoration: none;
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  column-gap: 0.5rem;
  align-items: baseline;
}
.yeu-guide__sommaire a::before {
  content: counter(tranche, decimal-leading-zero);
  color: var(--feuille);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.yeu-guide__sommaire a:hover { color: var(--feuille); text-decoration: underline; }
.yeu-guide__sommaire p {
  margin: 0.8rem 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
}
.yeu-guide__tranches { max-width: calc(var(--fut-mesure) + 13rem); }

.yeu-tranche {
  padding-block: clamp(1.1rem, 2.2vw, 2rem);
  border-top: 3px solid var(--feuille);
}
.yeu-tranche + .yeu-tranche { margin-top: clamp(0.9rem, 1.8vw, 1.6rem); }
.yeu-tranche--contre { background: var(--sol-profond); }
.yeu-tranche__tete {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.9rem;
  align-items: baseline;
  margin-bottom: 0.8rem;
}
.yeu-tranche__tete h2 { font-size: var(--niveau-h2); }
.yeu-tranche__tete h2 a {
  color: var(--ecorce);
  text-decoration: none;
  background-image: linear-gradient(var(--feuille), var(--feuille));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 96%;
  transition: background-size var(--cadence), color var(--cadence);
}
.yeu-tranche__tete h2 a:hover { color: var(--feuille); background-size: 100% 2px; }
.yeu-tranche__note {
  margin: 0.45rem 0 0;
  color: var(--ecorce-doux);
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 62ch;
  text-wrap: pretty;
}
/* La scene de la tranche : une bande panoramique, sans cadre, sans aplat. */
.yeu-tranche__vignette {
  margin: 0 0 1.1rem;
  overflow: hidden;
  background: var(--ecorce-nuit);
}
.yeu-tranche__vignette img {
  width: 100%;
  aspect-ratio: 16 / 5;
  object-fit: cover;
}
.yeu-tranche .yeu-cerne { border-top-width: 2px; }

@media (max-width: 1080px) {
  .yeu-guide__grille { grid-template-columns: minmax(0, 1fr); }
  .yeu-guide__sommaire {
    position: static;
    max-width: var(--fut-mesure);
    margin-bottom: 0.6rem;
  }
  .yeu-guide__sommaire ol { columns: 2; column-gap: 1.6rem; }
  .yeu-guide__tranches { max-width: none; }
}

/* =========================================================================
   TAILLIS · les sections, numerotees 01 a 06 plus NOTE
   ========================================================================= */

.yeu-taillis { padding-block: clamp(1.3rem, 2.6vw, 2.6rem); }
.yeu-taillis--enfonce { background: var(--sol-profond); }
.yeu-taillis__tete {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  border-bottom: 3px solid var(--feuille);
  padding-bottom: 0.5rem;
  margin-bottom: clamp(0.95rem, 1.9vw, 1.5rem);
}
.yeu-taillis__numero {
  display: inline-block;
  background: var(--feuille);
  color: #f4f2d8;
  font-family: var(--police-lecture);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  padding: 0.2rem 0.55rem 0.2rem 0.62rem;
  margin-right: 0.75rem;
  vertical-align: 0.22em;
}
.yeu-taillis__titre { font-size: var(--niveau-h2); }
.yeu-taillis__note {
  margin: 0;
  color: var(--ecorce-doux);
  font-size: 0.9rem;
  max-width: 40ch;
}

/* Filet : le separateur entre grandes sections. */
.yeu-filet {
  display: flex;
  justify-content: center;
  padding-block: clamp(0.3rem, 1vw, 0.9rem);
  color: var(--lichen);
}

/* Etiquette : surtitre en petites capitales, couleur gres. */
.yeu-etiquette {
  font-size: 0.72rem;
  letter-spacing: var(--capitales-interlettrage);
  text-transform: uppercase;
  color: var(--feuille);
  margin: 0 0 0.5rem;
}

/* =========================================================================
   PLANCHES · la mosaique de panneaux. Aplat de fond creux, AUCUN filet de
   cadre, angles vifs, et un seul filet vertical de 3 px en gres a gauche
   de l'etiquette : c'est lui qui donne sa texture a la grille.
   ========================================================================= */

.yeu-planches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: var(--gouttiere);
  list-style: none; margin: 0; padding: 0;
}
.yeu-planche { margin: 0; background: var(--sol-profond); }
.yeu-taillis--enfonce .yeu-planche { background: var(--sol-clair); }
.yeu-planche--plein  { grid-column: span 6; }
.yeu-planche--large { grid-column: span 4; }
.yeu-planche--moitie  { grid-column: span 3; }
.yeu-planche--petit { grid-column: span 2; }
.yeu-planche--decalage  { transform: translateY(var(--decalage-h)); }
.yeu-planche--decalage2 { transform: translateY(calc(var(--decalage-h) * 0.5)); }
.yeu-planches--serre { padding-bottom: var(--decalage-h); }

.yeu-planche__cadre {
  position: relative;
  overflow: hidden;
  border-radius: var(--arete);
  background: var(--ecorce-nuit);
}
/* Le gres monte au survol ; le lien reste sur le titre. */
.yeu-planche__cadre::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(62, 62, 32, 0) 55%, rgba(62, 62, 32, 0.30));
  opacity: 0;
  transition: opacity var(--cadence);
}
.yeu-planche:hover .yeu-planche__cadre::after,
.yeu-planche:focus-within .yeu-planche__cadre::after { opacity: 1; }
.yeu-planche__cadre--panorama    { aspect-ratio: 21 / 9; }
.yeu-planche__cadre--paysage    { aspect-ratio: 4 / 3; }
.yeu-planche__cadre--carre { aspect-ratio: 1 / 1; }
.yeu-planche__cadre--haut    { aspect-ratio: 3 / 4; }
.yeu-planche__vue {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.yeu-planche:hover .yeu-planche__vue { transform: scale(1.02); }

.yeu-planche__plaque {
  padding: 0.75rem 0.9rem 0.95rem;
  border-left: 3px solid var(--feuille);
}
.yeu-planche__titre { margin: 0 0 0.28rem; }
.yeu-planche__link {
  color: var(--ecorce);
  text-decoration: none;
  background-image: linear-gradient(var(--feuille), var(--feuille));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 96%;
  transition: background-size var(--cadence), color var(--cadence);
}
.yeu-planche__link:hover { color: var(--feuille); background-size: 100% 2px; }
.yeu-planche__note {
  margin: 0;
  color: var(--ecorce-doux);
  font-size: 0.9rem;
  line-height: 1.5;
}
.yeu-planche__mention {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: var(--capitales-interlettrage);
  text-transform: uppercase;
  color: var(--ecorce-doux);
}

/* =========================================================================
   CERNE · le registre date de l'accueil. Une ligne par entree, SANS
   vignette : date en colonne a chiffres tabulaires, rubrique en petites
   capitales, titre, une phrase. Les images du site vivent dans la
   mosaique et en tete d'article, jamais ici.
   ========================================================================= */

.yeu-cerne {
  list-style: none; margin: 0; padding: 0;
  border-top: 3px solid var(--feuille);
}
.yeu-anneau {
  display: grid;
  grid-template-columns: 7.6rem 1fr;
  gap: 0.2rem 1.6rem;
  padding-block: 0.72rem;
  border-bottom: var(--brindille-fine);
  margin: 0;
  transition: background var(--cadence);
}
.yeu-anneau:hover { background: var(--sol-clair); }
.yeu-date {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ecorce-doux);
  padding-top: 0.15rem;
}
.yeu-anneau__marque {
  display: block;
  font-size: 0.66rem;
  letter-spacing: var(--capitales-interlettrage);
  text-transform: uppercase;
  color: var(--feuille);
  margin-top: 0.14rem;
}
.yeu-anneau h3 {
  margin: 0 0 0.15rem;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
}
.yeu-anneau h3 a { color: var(--ecorce); text-decoration: none; }
.yeu-anneau h3 a:hover { color: var(--feuille); text-decoration: underline; }
.yeu-anneau p { margin: 0; color: var(--ecorce-doux); font-size: 0.9rem; }

/* =========================================================================
   ARTICLES · plant, silhouette, fut et son rail
   ========================================================================= */

.yeu-plant {
  padding-block: clamp(0.3rem, 1.4vw, 1rem) clamp(1.2rem, 2.8vw, 2rem);
}
.yeu-plant h1 { max-width: 24ch; }
.yeu-plant__amorce {
  font-size: clamp(1.06rem, 0.99rem + 0.48vw, 1.3rem);
  line-height: 1.52;
  color: var(--ecorce-doux);
  max-width: 58ch;
  margin: 0.85rem 0 0;
}
.yeu-mentions {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none; margin: 1rem 0 0; padding: 0;
  max-width: 58ch;
  font-size: 0.8rem;
  color: var(--ecorce-doux);
  border-top: var(--brindille-fine);
  padding-top: 0.75rem;
}
.yeu-mentions a { color: var(--ecorce-doux); }
.yeu-mentions a:hover { color: var(--feuille); }

.yeu-silhouette { margin: 0; }
.yeu-silhouette__vue {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--arete);
}

/* Le fut et sa branche : sur les ecrans larges, un rail collant a gauche
   porte le surtitre, la date, la rubrique et le sommaire des h2. Sous
   1080 px il repasse en bloc horizontal au-dessus du texte. */
.yeu-fut {
  padding-block: clamp(1.4rem, 3.2vw, 2.4rem) clamp(1.8rem, 4.2vw, 3rem);
}
/* La mesure vit sur le CONTENEUR, jamais sur un titre : l'unite ch se
   resout avec la police de l'element qui l'emploie, et 68ch sur un h2 en
   serif de 33px vaudrait presque le double de la colonne. */
.yeu-fut__texte { max-width: var(--fut-mesure); }
.yeu-fut__texte > * + * { margin-top: 0.9em; }
.yeu-fut__texte h2 {
  margin-top: 1.7em;
  padding-bottom: 0.24rem;
  border-bottom: var(--brindille-fine);
}
.yeu-fut__texte h3 { margin-top: 1.3em; }
.yeu-fut__texte ul, .yeu-fut__texte ol { padding-left: 1.35rem; }
.yeu-fut__texte li + li { margin-top: 0.42em; }
.yeu-fut__texte strong { color: var(--feuille-foncee); }
@media (prefers-color-scheme: dark) {
  .yeu-fut__texte strong { color: #b0b088; }
}

.yeu-branche {
  font-size: 0.78rem;
  color: var(--ecorce-doux);
  border-top: 3px solid var(--feuille);
  padding-top: 0.7rem;
  margin-bottom: 1.6rem;
}
.yeu-branche h2 {
  font-family: var(--police-lecture);
  font-size: 0.68rem;
  letter-spacing: var(--capitales-interlettrage);
  text-transform: uppercase;
  color: var(--feuille);
  border: 0; padding: 0;
  margin: 0 0 0.5rem;
}
.yeu-branche ul { list-style: none; margin: 0; padding: 0; }
.yeu-branche li { padding-block: 0.22rem; border-bottom: var(--brindille-fine); }
.yeu-branche li:last-child { border-bottom: 0; }
.yeu-branche a { color: var(--ecorce-doux); text-decoration: none; }
.yeu-branche a:hover { color: var(--feuille); text-decoration: underline; }
.yeu-branche__ligne { display: block; margin-top: 0.6rem; }

@media (min-width: 1081px) {
  .yeu-fut {
    display: grid;
    grid-template-columns: var(--branche-largeur) minmax(0, 1fr);
    column-gap: clamp(1.6rem, 3.4vw, 3.4rem);
    align-items: start;
  }
  .yeu-fut > .yeu-branche {
    grid-column: 1;
    position: sticky;
    top: 1.6rem;
    margin-bottom: 0;
  }
  /* Colonne 2 imposee : sans cette ligne, une page SANS rail (la 404, le
     gabarit de publication) verrait sa colonne de lecture tomber dans la
     piste etroite du rail. */
  .yeu-fut > .yeu-fut__texte { grid-column: 2; }
  /* Les modules de donnees respirent hors de la mesure, vers la droite :
     c'est l'asymetrie du gabarit, la colonne de texte ne bouge pas. */
  .yeu-fut__texte > .yeu-arpentage,
  .yeu-fut__texte > .yeu-mesure,
  .yeu-fut__texte > .yeu-creux {
    width: calc(100% + 11rem);
    max-width: none;
  }
}

/* Creux : l'angle de piste, l'encadre qui fait ralentir. */
.yeu-creux {
  margin: 1.6em 0;
  background: var(--sol-clair);
  border-left: 5px solid var(--feuille);
  border-radius: var(--arete);
  padding: 0.95rem 1.2rem;
  font-size: 0.96em;
}
.yeu-creux h4 {
  font-family: var(--police-lecture);
  font-size: 0.75rem;
  letter-spacing: var(--capitales-interlettrage);
  text-transform: uppercase;
  color: var(--feuille);
  margin: 0 0 0.45rem;
}
.yeu-creux p, .yeu-creux ul { margin: 0; }
.yeu-creux p + p, .yeu-creux ul { margin-top: 0.45rem; }
.yeu-creux strong { color: var(--feuille-foncee); }

/* Mesure : le poste de donnees, fond nuit, chiffres alignes. */
.yeu-mesure {
  margin: 1.6em 0;
  background: var(--ecorce-nuit);
  color: #ceccae;
  border-radius: var(--arete);
  padding: 1.05rem 1.25rem 1.15rem;
}
.yeu-mesure h2, .yeu-mesure h3, .yeu-mesure h4 {
  font-family: var(--police-lecture);
  font-size: 0.75rem;
  letter-spacing: var(--capitales-interlettrage);
  text-transform: uppercase;
  color: var(--feuille-claire);
  margin: 0 0 0.65rem;
  border: 0; padding: 0;
}
.yeu-mesure p, .yeu-mesure ul { margin: 0; font-size: 0.94rem; color: #ceccae; }
.yeu-mesure strong { color: #fff; font-variant-numeric: tabular-nums; }
.yeu-mesure p + p, .yeu-mesure ul { margin-top: 0.45rem; }

/* Arpentage : le tableau de mesures. L'en-tete sombre du donneur cede la
   place a un filet double sous la ligne de tete. */
.yeu-arpentage {
  overflow-x: auto;
  margin: 1.5em 0;
}
.yeu-arpentage table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 0.91em;
}
.yeu-arpentage th, .yeu-arpentage td {
  text-align: left;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--brindille);
  vertical-align: top;
}
.yeu-arpentage caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.55rem;
  font-size: 0.73rem;
  letter-spacing: var(--capitales-interlettrage);
  text-transform: uppercase;
  color: var(--gland);
}
.yeu-arpentage thead th {
  font-family: var(--police-lecture);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ecorce);
  border-bottom: 4px double var(--feuille);
  padding-top: 0;
}
.yeu-arpentage tr:last-child td { border-bottom: 0; }
.yeu-arpentage tbody tr:nth-child(even) { background: var(--sol-clair); }

/* Exergue : la citation en exergue, filet gres a gauche. */
.yeu-exergue {
  margin: 1.5em 0;
  padding: 0.15rem 0 0.15rem 1.3rem;
  border-left: 5px solid var(--feuille);
  font-family: var(--police-titres);
  font-size: 1.14em;
  color: var(--feuille-foncee);
}
@media (prefers-color-scheme: dark) { .yeu-exergue { color: #b0b088; } }

/* Ensuite : la piste continue. */
.yeu-ensuite {
  margin-top: 2.2em;
  padding-top: 1.1rem;
  border-top: 3px solid var(--feuille);
}
.yeu-ensuite h2 {
  font-size: 1.16rem;
  border-bottom: 0;
  margin: 0 0 0.5rem;
  padding: 0;
}
.yeu-ensuite ul { list-style: none; margin: 0; padding: 0; }
.yeu-ensuite li { padding: 0.28rem 0; }
.yeu-ensuite li::before {
  content: "\203A";
  color: var(--feuille);
  margin-right: 0.5rem;
  font-weight: 700;
}

/* =========================================================================
   RACINES · le pied de page, la fin de piste
   ========================================================================= */

.yeu-racines {
  margin-top: var(--pousse);
  background: var(--ecorce-nuit);
  color: #ceccae;
  border-top: 4px solid var(--feuille);
}
.yeu-racines__rangee {
  display: grid;
  /* Le nombre de colonnes suit le nombre de colonnes editoriales : trois
     colonnes de base, une quatrieme quand la liste des liens utiles vit. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: calc(var(--gouttiere) * 1.5);
  padding-block: clamp(1.8rem, 4.2vw, 2.9rem);
}
.yeu-racines h2 {
  font-family: var(--police-lecture);
  font-size: 0.75rem;
  letter-spacing: var(--capitales-interlettrage);
  text-transform: uppercase;
  color: var(--feuille-claire);
  margin-bottom: 0.65rem;
}
.yeu-racines ul { list-style: none; margin: 0; padding: 0; }
.yeu-racines li { padding-block: 0.2rem; }
.yeu-racines a { color: #c4c2a4; text-decoration: none; transition: color var(--cadence); }
.yeu-racines a:hover { color: var(--feuille-claire); text-decoration: underline; }
.yeu-racines__pied {
  border-top: 1px solid var(--brindille-nuit);
  padding-block: 1rem;
  font-size: 0.78rem;
  color: #9a9c80;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.9rem;
}
.yeu-racines__pied .yeu-symbole { color: var(--feuille-claire); }
.yeu-racines__nature { flex-basis: 100%; color: #b4b69a; }

/* =========================================================================
   POINTS DE RUPTURE
   ========================================================================= */

@media (max-width: 1080px) {
  .yeu-planche--large { grid-column: span 6; }
  .yeu-planche--moitie  { grid-column: span 3; }
  .yeu-planche--petit { grid-column: span 3; }
  .yeu-planche--decalage, .yeu-planche--decalage2 { transform: none; }
  .yeu-planches--serre { padding-bottom: 0; }
  .yeu-branche { max-width: var(--fut-mesure); }
}

@media (max-width: 760px) {
  .yeu-planches { grid-template-columns: repeat(2, 1fr); }
  .yeu-planche--large, .yeu-planche--moitie, .yeu-planche--petit { grid-column: span 2; }
  .yeu-anneau { grid-template-columns: 1fr; gap: 0.12rem; }
  .yeu-date { padding-top: 0; }
  .yeu-anneau__marque { display: inline; margin-left: 0.5rem; }
  .yeu-racines__rangee { grid-template-columns: 1fr; }
  .yeu-guide__sommaire ol { columns: 1; }
  .yeu-tranche__tete { grid-template-columns: 1fr; row-gap: 0.3rem; }
  .yeu-tranche__vignette img { aspect-ratio: 16 / 7; }
  .yeu-taillis__tete { flex-direction: column; gap: 0.3rem; }
  .yeu-cime h1 { max-width: 22ch; }
  .yeu-cime { min-height: clamp(230px, 58vw, 310px); }
  .yeu-bornage li { padding-inline: 0.85rem; }
}

@media (max-width: 760px) {
  .yeu-haie { width: 100%; position: relative; }
  .yeu-haie__bouton {
    display: inline-block;
    cursor: pointer;
    color: #f0eece;
    font-size: 0.82rem;
    letter-spacing: var(--capitales-interlettrage);
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--feuille-claire);
  }
  .yeu-haie__bascule:focus-visible + .yeu-haie__bouton { outline: 2px solid #fff; outline-offset: 2px; }
  .yeu-haie ul { display: none; flex-direction: column; gap: 0; padding-top: 0.5rem; }
  .yeu-haie__bascule:checked ~ ul { display: flex; }
  .yeu-haie__maille a { display: block; padding-block: 0.5rem; font-size: 0.92rem; border-bottom: 1px solid var(--brindille-nuit); }
}

@media (max-width: 480px) {
  .yeu-lisiere__rangee { gap: 0.5rem; }
}

/* Courtoisie de mouvement. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .yeu-planche:hover .yeu-planche__vue { transform: none; }
}

/* Impression : le magazine sur papier. */
@media print {
  .yeu-lisiere, .yeu-racines, .yeu-saut, .yeu-chemin, .yeu-filet,
  .yeu-bornage, .yeu-branche, .yeu-guide__sommaire { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .yeu-fut { display: block; }
  .yeu-fut__texte { max-width: none; }
  .yeu-mesure { background: #fff; color: #000; border: 1pt solid #000; }
  .yeu-cime { min-height: 0; }
}