/* =========================================================================
   TERRES CLAIRES : « Le Dossier Institutionnel » (préfixe di-)

   Métaphore : le dossier d'un éditeur de revue photographique. On n'y range
   pas des articles, on y range des planches : une image encadrée d'un
   passe-partout, cotée à l'heure de sa prise de vue, légendée par son lieu
   et son milieu, et suivie de la mention de ce qu'on a le droit d'en faire.
   Le vocabulaire de classes suit ce geste : ouverture, aiguillage, rangée,
   planche-contact, dépêches, passe-partout, réglette, gnomon, cote d'heure,
   casier, marchepied, colophon.

   Charpente : squelette officiel « portail-rubriques » (/Users/selim/Sites/
   _squelettes/portail-rubriques), rhabillé et non réinventé. Les slots, la
   grille var(--rail) minmax(0,1fr), les bascules 46rem, le conteneur des
   tableaux et les renvois croisés restent en place.

   RÈGLES NÉGATIVES (elles tiennent le système) :
   NEGATIF 1 : le laiton ne fait jamais un aplat. Il vit en trait de 1 px, en
     ombre dure de 4 px ou en soulignement. Aucun fond, aucun bouton plein,
     aucune pastille pleine en --di-laiton.
   NEGATIF 2 : aucune couleur n'est jamais posée par-dessus une photographie.
     Un texte sur image est interdit hors du héros, où il repose sur un seul
     dégradé de --di-rade, jamais sur deux ni trois couches. Une image de
     paysage se lit, elle ne sert pas de fond.
   NEGATIF 3 : aucune ombre floue, aucun coin arrondi sur une image. Le
     passe-partout est un carton de montage, pas une vignette.
   ========================================================================= */

:root {

  /* ---- 1. MATIÈRES --------------------------------------------------- */
  --di-creme:     #F4F0E6;  /* papier crème chaud de la revue : fond général   */
  --di-encre:     #10233B;  /* encre d'imprimerie bleu marine : texte, titres  */
  --di-rade:      #0E1D30;  /* bleu marine de rade : zones retournées seules   */
  --di-ardoise:   #7C8794;  /* ardoise mouillée : tous les filets de 1 px      */
  --di-laiton:    #A8813C;  /* laiton discret : trait, ombre dure, soulignement*/
  --di-graphite:  #4A5460;  /* mine de crayon : texte secondaire, surtitres    */
  --di-calcaire:  #E7E1D2;  /* calcaire sec : blocs creusés, sommaire interne  */
  --di-sel:       #FBF9F4;  /* sel affleurant : panneaux posés sur le crème    */
  --di-vert-eau:  #3E6B63;  /* vert d'eau des étangs et bocages                */
  --di-terre:     #8A4B32;  /* terre cuite des toits du Sud                    */

  /* ---- 2. TEINTES DE RUBRIQUE (--voie-* du squelette, renommées) ----- */
  --di-voie-paysages: #1E4E8A;   /* bleu de rade clair : Paysages et régions   */
  --di-voie-nature:   #3E6B63;   /* vert d'eau : Faune, flore et milieux       */
  --di-voie-usage:    #8A4B32;   /* terre cuite : Usages et droits de l'image  */
  --di-voie-teinte: var(--di-laiton);

  /* ---- 3. POLICES (piles système, aucun fichier, aucune requête) ----- */
  --di-titre: "Hoefler Text", "Baskerville", "Palatino Linotype", Georgia, serif;
  --di-texte: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Segoe UI", sans-serif;
  --di-regie: "Iowan Old Style", "Hoefler Text", "Palatino Linotype", Georgia, serif;

  /* ---- 4. RYTHME ----------------------------------------------------- */
  --di-corps:       clamp(1.02rem, .42vw + .94rem, 1.14rem);
  --di-interligne:  1.62;
  --di-mesure:      66ch;      /* Lucida Grande a l'oeil large : 66 et non 72 */
  --di-halle:       72rem;
  --di-rail:        7.5rem;    /* colonne de gauche : numéro de rubrique, date */
  --di-gouttiere:   clamp(1rem, 4vw, 2.5rem);
  --di-respiration: clamp(2.6rem, 6vw, 4.6rem);
  --di-trait:       1px;
  --di-arrondi:     0;

  /* ---- 5. CADRAGES --------------------------------------------------- */
  --di-ratio-plan:    21/9;   /* le plan large : héros, ouverture de rubrique */
  --di-ratio-planche: 3/2;    /* la planche : vue documentée, visuel d'article*/
  --di-ratio-detail:  4/5;    /* le détail vertical : matière, flore, outil   */

  --di-focus: var(--di-terre);  /* contour de focus clavier, toujours visible */
}

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

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

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

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

body {
  margin: 0;
  background: var(--di-creme);
  color: var(--di-encre);
  font-family: var(--di-texte);
  font-size: var(--di-corps);
  line-height: var(--di-interligne);
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--di-titre);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0 0 .6em;
  font-variant-numeric: oldstyle-nums;
}

h1 { font-size: clamp(2.15rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 2.4vw, 2.05rem); }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.34rem); line-height: 1.2; }
h4 { font-size: 1.05rem; line-height: 1.25; }

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

a { color: var(--di-encre); text-underline-offset: .18em; }
a:hover { color: var(--di-voie-teinte); }

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

hr {
  border: 0;
  border-top: var(--di-trait) solid var(--di-ardoise);
  margin: var(--di-respiration) 0;
}

.di-raccourci {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--di-encre);
  color: var(--di-sel);
  padding: .7rem 1.1rem;
  z-index: 60;
}
.di-raccourci:focus { left: .75rem; top: .75rem; }

.di-hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Conteneurs */
.di-halle {
  max-width: var(--di-halle);
  margin-inline: auto;
  padding-inline: var(--di-gouttiere);
}
.di-halle--article { max-width: calc(var(--di-mesure) + 16.5rem); }
.di-parcours--simple { grid-template-columns: minmax(0, 1fr); }
.di-halle--lecture {
  max-width: var(--di-mesure);
  margin-inline: auto;
  padding-inline: var(--di-gouttiere);
}

/* =========================================================================
   GESTE 1 : LA RÉGLETTE D'HEURE (.di-reglette)
   La course de la lumière du jour, de l'aube au crépuscule : un filet de
   1 px en ardoise gradué par cinq traits verticaux, le troisième en laiton.
   Sous le surtitre de l'ouverture, en tête de chaque rangée de rubrique, et
   au-dessus du chapô de chaque article.
   ========================================================================= */

.di-reglette {
  display: block;
  height: 11px;
  border-bottom: var(--di-trait) solid var(--di-ardoise);
  background: repeating-linear-gradient(90deg, var(--di-ardoise) 0 1px, transparent 1px 2.5rem) bottom/100% 6px no-repeat;
  margin-bottom: 1.1rem;
}
.di-reglette::after {
  content: "";
  display: block;
  width: 1px;
  height: 6px;
  margin-left: 5rem;
  background: var(--di-laiton);
}
.di-reglette--courte { background-size: 100% 6px; }

/* =========================================================================
   GESTE 2 : LE GNOMON (.di-gnomon)
   L'instrument de l'ombre : le carré d'encre, son ombre dure en laiton, et
   le trait oblique du cadran. Il sert de marque dans l'enseigne, de puce
   devant chaque numéro de rubrique, et de point final à chaque article.
   ========================================================================= */

.di-gnomon {
  width: 18px;
  height: 18px;
  background: var(--di-encre);
  box-shadow: 4px 4px 0 var(--di-laiton);
  position: relative;
  flex: none;
}
.di-gnomon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(46deg, transparent 48%, var(--di-creme) 48% 52%, transparent 52%);
}
.di-gnomon--fin { margin-top: 2.2rem; }

/* =========================================================================
   GESTE 3 : LE PASSE-PARTOUT (.di-passe)
   Le carton de montage d'un tirage : marge intérieure crème de 14 px, filet
   de 1 px en ardoise à l'intérieur de cette marge, aucune ombre, aucun
   arrondi. Il encadre les 26 images du dossier.
   ========================================================================= */

.di-passe {
  background: var(--di-creme);
  padding: 14px;
  box-shadow: inset 0 0 0 1px var(--di-ardoise);
  margin: 0;
}
.di-passe > img,
.di-passe > picture > img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.94) contrast(1.03);
}
.di-passe > figcaption {
  margin-top: .7rem;
  font: 400 .78rem/1.5 var(--di-regie);
  font-style: italic;
  color: var(--di-graphite);
}
.di-passe--plan > img,    .di-passe--plan > picture > img    { aspect-ratio: var(--di-ratio-plan);    object-fit: cover; }
.di-passe--planche > img, .di-passe--planche > picture > img { aspect-ratio: var(--di-ratio-planche); object-fit: cover; }
.di-passe--detail > img,  .di-passe--detail > picture > img  { aspect-ratio: var(--di-ratio-detail);  object-fit: cover; }
.di-passe--nu { padding: 0; box-shadow: none; }
.di-passe--nu > img, .di-passe--nu > picture > img { filter: saturate(.94) contrast(1.03); }

/* =========================================================================
   IDÉE INATTENDUE : LA COTE D'HEURE (.di-cote-heure)
   Quatre positions : PREMIÈRE HEURE, PLEIN JOUR, HEURE BASSE, NUIT CLAIRE.
   La cote est le rangement du site : elle vit sur chaque image, dans la
   colonne de marge des articles, et à l'entrée de chaque rubrique. Le cran
   occupé est marqué par un carré plein de 5 px sur une réglure de quatre
   crans. Aucune image, aucun script : deux gradients et un pseudo-élément.
   ========================================================================= */

.di-cote-heure {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 3.1rem;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--di-graphite);
  margin: 0 0 .5rem;
  font-family: var(--di-texte);
}
.di-cote-heure::before {           /* le trait laiton de 1,6 rem */
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 1.6rem;
  height: var(--di-trait);
  background: var(--di-laiton);
}
.di-cote-heure::after {            /* la réglure de quatre crans */
  content: "";
  position: absolute;
  left: 1.8rem;
  top: .2em;
  width: 15px;
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--di-ardoise) 0 1px, transparent 1px 3.75px);
}
.di-cote-heure > .di-cote-heure__cran {   /* le carré plein de 5 px */
  position: absolute;
  left: 1.8rem;
  top: .2em;
  width: 5px;
  height: 5px;
  background: var(--di-encre);
}
.di-cote-heure--premiere-heure > .di-cote-heure__cran { left: 1.8rem; }
.di-cote-heure--plein-jour     > .di-cote-heure__cran { left: calc(1.8rem + 3.75px); }
.di-cote-heure--heure-basse    > .di-cote-heure__cran { left: calc(1.8rem + 7.5px); }
.di-cote-heure--nuit-claire    > .di-cote-heure__cran { left: calc(1.8rem + 11.25px); }
.di-cote-heure--retourne { color: var(--di-sel); }
.di-cote-heure--absente { opacity: .5; }
.di-cote-heure--retourne > .di-cote-heure__cran { background: var(--di-sel); }
.di-cote-heure--retourne::after { background: repeating-linear-gradient(90deg, var(--di-sel) 0 1px, transparent 1px 3.75px); }
.di-passe > figcaption > .di-cote-heure { display: flex; }

/* Le rangement des cotes, à l'entrée d'une rubrique */
.di-cotes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.6rem;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.di-cotes a { text-decoration: none; }

/* =========================================================================
   SURTITRE ET TRAIT-SURTITRE
   11 px, capitales, .3em, graphite. Le trait laiton de 1 px sur 2,5 rem est
   devant chaque surtitre : c'est la signature du dossier. Les capitales
   espacées ne portent jamais un titre ni un bouton.
   ========================================================================= */

.di-surtitre {
  display: block;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--di-graphite);
  margin: 0 0 .9rem;
  padding-left: 3.1rem;
  position: relative;
  font-family: var(--di-texte);
  line-height: 1.4;
}
.di-surtitre::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 2.5rem;
  height: var(--di-trait);
  background: var(--di-laiton);
}
.di-surtitre--retourne { color: var(--di-sel); }
.di-surtitre--voie { color: var(--di-voie-teinte); }

/* =========================================================================
   RETOURNÉ : les seules zones bleu marine, avec la trame de tirage
   ========================================================================= */

.di-retourne {
  background: var(--di-rade);
  background-image: repeating-linear-gradient(0deg, rgba(244, 240, 230, .045) 0 1px, transparent 1px 5px);
  color: var(--di-sel);
}
.di-retourne a { color: var(--di-sel); }
.di-retourne h1, .di-retourne h2, .di-retourne h3 { color: var(--di-sel); }

/* =========================================================================
   FRONTON (en-tête) : aplat crème à 96 %, collant, sans flou
   ========================================================================= */

.di-fronton {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(244, 240, 230, .96);
  border-bottom: var(--di-trait) solid var(--di-ardoise);
}

.di-fronton__corps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 2rem;
  min-height: 68px;
  padding-block: .7rem;
}

.di-enseigne {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  text-decoration: none;
  color: inherit;
}
.di-enseigne__nom {
  display: block;
  font-family: var(--di-titre);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.05;
  letter-spacing: -.012em;
}
.di-enseigne__mention {
  display: block;
  margin-top: .3rem;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--di-graphite);
}

.di-itineraire__liste {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.di-itineraire a {
  display: inline-block;
  padding: .25rem 0;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--di-encre);
  text-decoration: none;
  border-bottom: var(--di-trait) solid transparent;
}
.di-itineraire a:hover,
.di-itineraire a[aria-current="page"] {
  border-bottom-color: var(--di-laiton);   /* le laiton souligne, il ne remplit pas */
}
.di-itineraire__ouvre {
  display: none;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--di-encre);
  border: var(--di-trait) solid var(--di-ardoise);
  padding: .5rem .9rem;
  cursor: pointer;
}

/* =========================================================================
   OUVERTURE (héros de l'accueil) : retournée, 62vh, texte en bas à gauche
   ========================================================================= */

.di-ouverture {
  padding-block: clamp(1.6rem, 3vw, 2.4rem) clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: var(--di-respiration);
}
.di-ouverture__tete { padding-top: .6rem; }

.di-ouverture__vue {
  position: relative;
  margin: 0;
  /* Le plan 21/9 donne la hauteur du heros : un min-height en vh creusait
     une bande bleue morte entre le haut du passe-partout et la photographie. */
  display: flex;
  align-items: flex-end;
}
.di-ouverture__vue.di-passe {
  width: 100%;
  background: var(--di-rade);
  box-shadow: inset 0 0 0 1px rgba(244, 240, 230, .22);
  padding: 14px;
}
.di-ouverture__vue.di-passe > img,
.di-ouverture__vue.di-passe > picture > img {
  aspect-ratio: var(--di-ratio-plan);
  object-fit: cover;
  position: relative;
  z-index: 0;
}

/* Un seul dégradé de lisibilité sur tout le site : celui du héros. */
.di-ouverture__vue::after {
  content: "";
  position: absolute;
  inset: 14px;
  /* Le bloc de titre occupe les 73 % bas du heros a 1440 px : les arrets du
     brief (0 22 %, .35 46 %, transparent 70 %) laissaient le H1 sur 25 %
     d'opacite, illisible sur un ciel clair. Meme construction, meme couleur,
     meme unicite : trois arrets, releves pour couvrir le texte. */
  background: linear-gradient(to top, rgba(14, 29, 48, .9) 0 58%, rgba(14, 29, 48, .62) 78%, transparent 94%);
  pointer-events: none;
}

.di-ouverture__vue > figcaption.di-ouverture__cartel {
  font: 400 1rem/1.62 var(--di-texte);
  font-family: var(--di-texte);
  font-style: normal;
  color: var(--di-sel);
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 0 clamp(1rem, 3vw, 2.2rem) clamp(1.1rem, 2.6vw, 1.8rem);
  max-width: 54rem;
}
.di-ouverture__titre {
  color: var(--di-sel);
  font-size: clamp(2.15rem, 4.4vw, 3.5rem);
  margin-bottom: .8rem;
  max-width: 28ch;
}
.di-ouverture__amorce {
  color: var(--di-sel);
  max-width: var(--di-mesure);
  margin-bottom: 1.2rem;
  font-size: 1.02rem;
}
.di-ouverture__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2rem;
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  border-top: var(--di-trait) solid rgba(244, 240, 230, .32);
  color: var(--di-sel);
  font-size: .86rem;
}
.di-ouverture__reperes b {
  font-family: var(--di-titre);
  font-weight: 600;
  font-size: 1.5rem;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.012em;
  margin-right: .5rem;
}
.di-ouverture__cote {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: var(--di-trait) solid rgba(244, 240, 230, .32);
  font-family: var(--di-regie);
  font-style: italic;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--di-sel);
}
.di-ouverture__legende { display: inline; }
.di-ouverture__cartel .di-cote-heure { padding-left: 0; }
.di-ouverture__cartel .di-cote-heure::before,
.di-ouverture__cartel .di-cote-heure::after,
.di-ouverture__cartel .di-cote-heure > .di-cote-heure__cran { display: none; }

/* Le bas de l'ouverture : reperes chiffres et cote d'heure de la planche de
   tete. Hors du passe-partout pour que le titre seul porte sur la photographie
   et que le cartel tienne dans le degrade de lisibilite. */
.di-ouverture__bas {
  margin-top: 1.4rem;
  padding-top: 1.15rem;
  border-top: var(--di-trait) solid rgba(244, 240, 230, .36);
}
.di-ouverture__bas .di-ouverture__reperes {
  border-top: 0;
  padding-top: 0;
  margin-bottom: .95rem;
}
.di-ouverture__bas .di-ouverture__cote {
  border-top: 0;
  padding-top: 0;
  margin: 0;
}

/* =========================================================================
   CASIER : une section de page et son en-tête
   ========================================================================= */

.di-casier {
  max-width: var(--di-halle);
  margin-inline: auto;
  padding-inline: var(--di-gouttiere);
  padding-block: var(--di-respiration) 0;
}
.di-casier--creux {
  max-width: none;
  padding-inline: 0;
  background: var(--di-calcaire);
  border-top: var(--di-trait) solid var(--di-ardoise);
  border-bottom: var(--di-trait) solid var(--di-ardoise);
}
.di-casier--creux > .di-casier__interieur {
  max-width: var(--di-halle);
  margin-inline: auto;
  padding-inline: var(--di-gouttiere);
  padding-block: var(--di-respiration) 0;
}
.di-casier__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 2rem;
  border-bottom: 2px solid var(--di-encre);
  padding-bottom: 1rem;
  margin-bottom: 1.6rem;
}
.di-casier__tete h2 { margin: 0; }
.di-casier__note {
  font-size: .84rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--di-graphite);
  margin: 0;
}
.di-casier__chapeau {
  max-width: var(--di-mesure);
  color: var(--di-graphite);
  margin: -.4rem 0 1.8rem;
}
.di-casier--creux > .di-casier__interieur > .di-casier__chapeau { margin-bottom: 1.8rem; }

/* =========================================================================
   AIGUILLAGE : les trois rangées de rubrique de l'accueil
   Grille du squelette conservée : var(--di-rail) minmax(0, 1fr).
   ========================================================================= */

.di-aiguillage {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--di-encre);
}
.di-rangee {
  display: grid;
  grid-template-columns: var(--di-rail) minmax(0, 1fr);
  gap: 0 var(--di-gouttiere);
  padding-block: clamp(1.7rem, 3.5vw, 2.5rem);
  border-bottom: var(--di-trait) solid var(--di-ardoise);
}
.di-rangee__reperage { grid-column: 1; }
.di-rangee__indice {
  display: block;
  font-family: var(--di-titre);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.012em;
  color: var(--di-voie-teinte);
  font-variant-numeric: oldstyle-nums;
}
.di-rangee__barre {
  display: block;
  width: 2.4rem;
  height: 4px;
  background: var(--di-voie-teinte);
  margin: .7rem 0 .9rem;
}
.di-rangee__corps { grid-column: 2; min-width: 0; }
.di-rangee__corps > .di-reglette { margin-bottom: .6rem; }
.di-rangee__intitule { margin-bottom: .5rem; }
.di-rangee__intitule a { display: inline-block; }
.di-rangee__intitule a {
  color: var(--di-encre);
  text-decoration: none;
  background-image: linear-gradient(var(--di-laiton), var(--di-laiton));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .18s ease-out;
}
.di-rangee__intitule a:hover,
.di-rangee__intitule a:focus-visible { background-size: 100% 2px; }
.di-rangee__apercu {
  max-width: 58ch;
  color: var(--di-graphite);
  margin-bottom: .8rem;
}
.di-rangee__desserte {
  list-style: none;
  margin: 0 0 .9rem;
  padding: 0;
  display: grid;
  gap: .25rem;
}
.di-rangee__desserte li a { display: inline-block; }
.di-rangee__desserte li {
  position: relative;
  padding-left: 1.2rem;
  font-size: .95rem;
}
.di-rangee__desserte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: 2px;
  background: var(--di-voie-teinte);
}
.di-rangee__desserte a {
  color: var(--di-encre);
  text-decoration: none;
  border-bottom: var(--di-trait) solid var(--di-ardoise);
}
.di-rangee__desserte a:hover { border-bottom-color: var(--di-laiton); }
.di-rangee__date {
  font-family: var(--di-titre);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--di-graphite);
  margin-right: .6rem;
}

/* =========================================================================
   PLANCHE-CONTACT : quatre vues d'une même sélection, quatre heures
   ========================================================================= */

.di-planche-contact__vues {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--di-gouttiere);
}
.di-planche-contact__vue { min-width: 0; }
.di-planche-contact__cote { display: flex; margin-bottom: .55rem; }

/* =========================================================================
   DÉPÊCHES : le flux daté (accueil et pages de rubrique)
   La colonne de gauche ne contient QUE la date.
   ========================================================================= */

.di-depeches {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--di-trait) solid var(--di-ardoise);
}
.di-depart {
  display: grid;
  grid-template-columns: var(--di-rail) minmax(0, 1fr);
  gap: .2rem var(--di-gouttiere);
  padding-block: 1.3rem;
  border-bottom: var(--di-trait) solid var(--di-ardoise);
}
.di-depart__horaire {
  font-family: var(--di-titre);
  font-size: .95rem;
  color: var(--di-graphite);
  font-variant-numeric: lining-nums tabular-nums;
  padding-top: .25rem;
  margin: 0;
}
.di-depart__corps { min-width: 0; }
.di-depart__intitule {
  font-family: var(--di-titre);
  font-weight: 600;
  font-size: 1.22rem;
  line-height: 1.25;
  margin: 0 0 .35rem;
}
.di-depart__intitule a { color: var(--di-encre); text-decoration: none; }
.di-depart__intitule a:hover { color: var(--di-voie-teinte); text-decoration: underline; }
.di-depart__amorce {
  margin: 0;
  color: var(--di-graphite);
  max-width: 62ch;
  font-size: .96rem;
}

.di-etiquette-voie {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--di-voie-teinte);
  border: var(--di-trait) solid var(--di-voie-teinte);
  padding: .18rem .5rem;
  margin-bottom: .5rem;
  text-decoration: none;
  background: none;
}
a.di-etiquette-voie:hover { color: var(--di-sel); background: var(--di-voie-teinte); }

/* =========================================================================
   ORIENTATION : le mode d'emploi, étroit et centré
   ========================================================================= */

.di-orientation {
  max-width: var(--di-halle);
  margin-inline: auto;
  padding-inline: var(--di-gouttiere);
  padding-block: var(--di-respiration) 0;
}
.di-orientation__corps {
  max-width: var(--di-mesure);
  margin-inline: auto;
}
.di-consigne {
  background: var(--di-sel);
  border-top: var(--di-trait) solid var(--di-laiton);
  border-left: var(--di-trait) solid var(--di-ardoise);
  border-right: var(--di-trait) solid var(--di-ardoise);
  border-bottom: var(--di-trait) solid var(--di-ardoise);
  padding: 1.5rem 1.6rem;
  margin-block: 1.8rem;
}
.di-consigne h2, .di-consigne h3 { margin-bottom: .6rem; }
.di-consigne > :last-child { margin-bottom: 0; }
.di-consigne ul, .di-consigne ol { padding-left: 1.2rem; }
.di-consigne li { margin-bottom: .45rem; }
.di-consigne dl { margin: 0; }
.di-consigne dt {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--di-graphite);
  margin-bottom: .3rem;
}
.di-consigne dd { margin: 0 0 1.3rem; }
.di-consigne dd:last-child { margin-bottom: 0; }
.di-consigne__vue { margin: 1.6rem 0 0; }

/* =========================================================================
   PANCARTE (titre de page) et JALONS
   ========================================================================= */

.di-jalons { padding-top: 1.2rem; }
.di-jalons ol {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .84rem;
  color: var(--di-graphite);
}
.di-jalons li + li::before { content: "/"; margin-right: .55rem; color: var(--di-ardoise); }
.di-jalons a { color: var(--di-graphite); }

.di-pancarte {
  padding-block: clamp(1.8rem, 4vw, 3rem);
  border-bottom: var(--di-trait) solid var(--di-ardoise);
}
.di-pancarte--voie { border-bottom: 3px solid var(--di-voie-teinte); }
.di-pancarte h1 { max-width: 26ch; }
.di-pancarte--large h1 { max-width: 30ch; }
.di-pancarte__amorce {
  max-width: var(--di-mesure);
  font-size: 1.06rem;
  color: var(--di-graphite);
  margin-bottom: 0;
}
.di-pancarte__indice {
  display: block;
  font-family: var(--di-titre);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--di-voie-teinte);
  font-variant-numeric: oldstyle-nums;
  margin-bottom: .4rem;
}

.di-mention {
  font-size: .84rem;
  color: var(--di-graphite);
  margin: 0;
}
.di-mention--groupe {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.4rem;
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
}
.di-mention__valeur { font-variant-numeric: lining-nums tabular-nums; }

/* =========================================================================
   ACCÈS : les liens d'action
   ========================================================================= */

.di-acces {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--di-encre);
  text-decoration: none;
  border-bottom: 2px solid var(--di-laiton);
  padding-bottom: .2rem;
}
.di-acces:hover { color: var(--di-voie-teinte); border-bottom-color: var(--di-voie-teinte); }
.di-acces::after { content: " \2192"; }
.di-acces--plein {
  background: var(--di-encre);
  color: var(--di-sel);
  border: var(--di-trait) solid var(--di-encre);
  padding: .7rem 1.2rem;
}
.di-acces--plein:hover { background: var(--di-rade); color: var(--di-sel); border-color: var(--di-rade); }

/* =========================================================================
   PARCOURS : le corps de l'article et sa colonne de notes de prise de vue
   ========================================================================= */

.di-parcours {
  display: grid;
  grid-template-columns: minmax(0, var(--di-mesure)) 15rem;
  gap: 0 var(--di-gouttiere);
  align-items: start;
  padding-block: clamp(1.4rem, 3vw, 2.2rem) 0;
  max-width: 100%;
}
.di-parcours__texte { min-width: 0; }
.di-parcours__texte > * { max-width: 100%; }

.di-annonce {
  font-size: 1.1rem;
  line-height: 1.6;
  border-bottom: var(--di-trait) solid var(--di-ardoise);
  padding-bottom: 1.3rem;
  margin-bottom: 1.6rem;
}
.di-annonce::first-letter {
  font-family: var(--di-titre);
  font-weight: 600;
  font-size: 3.4em;
  line-height: .82;
  float: left;
  padding: .06em .12em 0 0;
  color: var(--di-encre);
}
.di-parcours__texte h2 {
  margin-top: 2.4rem;
  padding-top: 1rem;
  border-top: 2px solid var(--di-voie-teinte);
}
.di-parcours__texte h3 { margin-top: 1.8rem; }
.di-parcours__texte ul, .di-parcours__texte ol { padding-left: 1.3rem; }
.di-parcours__texte li { margin-bottom: .45rem; }
.di-parcours__texte .di-consigne h2,
.di-parcours__texte .di-sommaire h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* La colonne de notes : heure, saison, orientation, accès */
.di-marge {
  position: sticky;
  top: 6rem;
  min-width: 0;
  font-family: var(--di-regie);
  font-style: italic;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--di-graphite);
}
.di-note {
  border-left: var(--di-trait) solid var(--di-ardoise);
  padding: .1rem 0 0 1rem;
  margin-bottom: 1.1rem;
}
/* Le rembourrage de respiration passe dans le paragraphe : la boite comptee
   couvre toute la note, la colonne de marge ne laisse plus de vide en bas. */
.di-note p { margin: 0; padding-bottom: .95rem; }
.di-note .di-cote-heure { font-style: normal; margin-bottom: .35rem; }

.di-exergue {
  margin: 1.9rem 0;
  padding: 1rem 0 0;
  border-top: var(--di-trait) solid var(--di-laiton);
  font-family: var(--di-titre);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -.012em;
}
.di-exergue p:last-child { margin-bottom: 0; }
.di-exergue cite {
  display: block;
  margin-top: .7rem;
  font-family: var(--di-regie);
  font-style: italic;
  font-weight: 400;
  font-size: .84rem;
  letter-spacing: 0;
  color: var(--di-graphite);
}

.di-marque-fin {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.4rem;
  font-family: var(--di-regie);
  font-style: italic;
  font-size: .84rem;
  color: var(--di-graphite);
}

/* Le <dl> d'usage : ce que l'image montre, ne montre pas, exige */
.di-mentions {
  margin: 2.4rem 0 0;
  border-top: 2px solid var(--di-encre);
  padding-top: 1.2rem;
}
.di-mentions dt {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--di-graphite);
  margin-bottom: .35rem;
}
.di-mentions dd { margin: 0 0 1.4rem; }
.di-mentions dd:last-child { margin-bottom: 0; }

.di-sommaire {
  background: var(--di-calcaire);
  border: var(--di-trait) solid var(--di-ardoise);
  padding: 1.1rem 1.3rem;
  margin-bottom: 2rem;
}
.di-sommaire h2 {
  font-family: var(--di-texte);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--di-graphite);
  margin: 0 0 .6rem;
}
.di-sommaire ol { margin: 0; padding-left: 1.2rem; font-size: .95rem; }
.di-sommaire li { margin-bottom: .3rem; }
.di-sommaire a { color: var(--di-encre); }

.di-planche { margin: 1.9rem 0; }

/* =========================================================================
   TABLEAUX : toujours dans un conteneur à défilement
   ========================================================================= */

.di-tableau-defile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.4rem;
  border: var(--di-trait) solid var(--di-ardoise);
  background: var(--di-sel);
}
.di-tableau-defile table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  margin: 0;
  font-size: .95rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.di-tableau-defile th,
.di-tableau-defile td {
  text-align: left;
  padding: .6rem .8rem;
  border-bottom: var(--di-trait) solid var(--di-ardoise);
  vertical-align: top;
}
.di-tableau-defile thead th {
  font-family: var(--di-texte);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  background: var(--di-calcaire);
}
.di-tableau-defile caption {
  caption-side: top;
  text-align: left;
  font-family: var(--di-regie);
  font-style: italic;
  font-size: .82rem;
  color: var(--di-graphite);
  padding: .6rem .8rem;
}

/* =========================================================================
   CORRESPONDANCE : les renvois croisés, branches de l'étoile
   ========================================================================= */

.di-correspondance__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--di-trait);
  background: var(--di-ardoise);
  border: var(--di-trait) solid var(--di-ardoise);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.di-correspondance__liste li { background: var(--di-sel); }
.di-correspondance__liste a {
  display: block;
  height: 100%;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--di-encre);
  border-top: 4px solid var(--di-voie-teinte);
}
.di-correspondance__liste a:hover { background: var(--di-calcaire); }
.di-correspondance__quoi {
  display: block;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--di-graphite);
  margin-bottom: .35rem;
}
.di-correspondance__titre {
  display: block;
  font-family: var(--di-titre);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.25;
  letter-spacing: -.012em;
}

.di-relais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  padding-block: 1.6rem;
  border-top: var(--di-trait) solid var(--di-ardoise);
  font-size: .88rem;
}
.di-relais__etat { color: var(--di-graphite); }

/* =========================================================================
   MARCHEPIED : le pied qui prouve
   ========================================================================= */

.di-marchepied {
  margin-top: var(--di-respiration);
  padding-block: var(--di-respiration) 2rem;
}
.di-marchepied__grille {
  display: grid;
  gap: 2rem var(--di-gouttiere);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.di-marchepied__colonne h2 {
  font-family: var(--di-texte);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--di-sel);
  margin-bottom: .9rem;
  padding-left: 3.1rem;
  position: relative;
}
.di-marchepied__colonne h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 2.5rem;
  height: var(--di-trait);
  background: var(--di-laiton);
}
.di-marchepied__colonne ul { list-style: none; margin: 0; padding: 0; }
/* Le lien porte la respiration (rembourrage, pas marge) : la colonne se
   remplit sur toute sa hauteur, aucun fond de colonne ne reste vide. */
.di-marchepied__colonne li { font-size: .94rem; }
.di-marchepied__colonne li a { display: block; padding-block: .38rem; }
.di-marchepied__colonne li + li { border-top: var(--di-trait) solid rgba(244, 240, 230, .14); }
.di-marchepied__colonne p { font-size: .94rem; margin-bottom: .8rem; }
.di-marchepied__colonne p:last-child { margin-bottom: 0; }
.di-marchepied__bas {
  margin-top: 2.6rem;
  padding-top: 1.2rem;
  border-top: var(--di-trait) solid rgba(244, 240, 230, .3);
  font-family: var(--di-regie);
  font-style: italic;
  font-size: .84rem;
}
.di-marchepied__bas p { margin-bottom: .5rem; }
.di-marchepied__bas p:last-child { margin-bottom: 0; }

.di-colophon {
  font-family: var(--di-regie);
  font-style: italic;
  color: var(--di-sel);
}
.di-colophon b { font-weight: 400; }

/* =========================================================================
   TEINTES DE RUBRIQUE (à poser sur <body>, .di-rangee, .di-pancarte…)
   ========================================================================= */

.di-voie-paysages { --di-voie-teinte: var(--di-voie-paysages); }
.di-voie-nature   { --di-voie-teinte: var(--di-voie-nature); }
.di-voie-usage    { --di-voie-teinte: var(--di-voie-usage); }

/* =========================================================================
   UTILITAIRES
   ========================================================================= */

.di-sans-marge-bas { margin-bottom: 0; }
.di-texte-courant { max-width: var(--di-mesure); }

/* =========================================================================
   MOBILE : 46rem : une colonne, la date au-dessus, les notes intercalées
   ========================================================================= */

@media (max-width: 62rem) {
  .di-parcours { grid-template-columns: minmax(0, 1fr); }
  .di-marge { position: static; margin-top: 2rem; }
  .di-note { border-left: var(--di-trait) solid var(--di-ardoise); }
}

@media (max-width: 52rem) {
  .di-itineraire__ouvre { display: inline-block; }
  .di-itineraire__liste { display: none; }
  .di-itineraire__commande:checked ~ .di-itineraire__liste {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding-top: .8rem;
    width: 100%;
  }
  .di-itineraire { flex-basis: 100%; }
  .di-planche-contact__vues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .di-marchepied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 46rem) {
  .di-ouverture__vue { min-height: 46vh; }
  .di-ouverture__vue.di-passe { padding: 9px; }
  /* En mobile le cartel ne tient plus sur la planche : il passe sous l'image,
     dans le cadre retourne, ou il reste lisible sans voile sur la photographie. */
  .di-ouverture__vue { display: block; }
  .di-ouverture__vue > picture > img { aspect-ratio: 3 / 2; }
  .di-ouverture__vue::after { display: none; }
  .di-ouverture__vue > figcaption.di-ouverture__cartel {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    max-width: none;
    padding: 1rem .9rem 1.2rem;
  }
  .di-marchepied__grille { grid-template-columns: minmax(0, 1fr); }
  .di-rangee { grid-template-columns: 1fr; }
  .di-rangee__reperage {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .6rem;
  }
  .di-rangee__indice { font-size: 1.9rem; }
  .di-rangee__barre { margin: 0; width: 1.6rem; }
  .di-rangee__corps { grid-column: 1; }
  .di-depart { grid-template-columns: 1fr; }
  .di-depart__horaire { padding-top: 0; margin-bottom: .3rem; }
  .di-planche-contact__vues { grid-template-columns: minmax(0, 1fr); }
  .di-gnomon { box-shadow: 3px 3px 0 var(--di-laiton); }
  .di-ouverture__reperes { gap: .3rem 1rem; }
  .di-ouverture__reperes li { border-left: var(--di-trait) solid rgba(244, 240, 230, .32); padding-left: .9rem; }
  .di-ouverture__reperes li:first-child { border-left: 0; padding-left: 0; }
  .di-reglette { background: repeating-linear-gradient(90deg, var(--di-ardoise) 0 1px, transparent 1px 1.6rem) bottom/100% 6px no-repeat; }
  .di-passe { padding: 9px; }
}