/* =========================================================================
   SQUELETTE « portail-rubriques »
   Feuille de style unique. Aucune ressource distante.
   Champ lexical des classes : la gare (halle, fronton, quai, embranchement,
   desserte, depart, jalons, correspondance, marchepied...).
   -------------------------------------------------------------------------
   TOUT LE RHABILLAGE SE FAIT DANS LE BLOC :root CI-DESSOUS.
   En dessous du bloc :root, on ne touche qu'en connaissance de cause.
   ========================================================================= */

:root {

  /* ---- 1. COULEURS ---------------------------------------------------
     Le squelette est SOMBRE par defaut : un panneau d'affichage, pas une
     feuille de papier. Pour le passer en clair, voir SPEC.md section 5. */
  --fond:            #101923;   /* fond general : bleu d'encre profond     */
  --fond-appui:      #182736;   /* panneaux poses sur le fond              */
  --fond-relief:     #0b121b;   /* bandes creusees, plus sombres           */
  --encre:           #e8ecf2;   /* texte principal                         */
  --encre-douce:     #a3b1c2;   /* texte secondaire, dates, mentions       */
  --filet:           #304457;   /* traits de separation                    */
  --accent:          #e1ad58;   /* liens et signes forts (laiton)          */
  --accent-clair:    #e6bb70;   /* survol de l'accent                      */
  --accent-froid:    #6fb2a8;   /* second signe, contrepoint               */
  --sur-accent:      #141d28;   /* texte pose SUR un aplat d'accent        */
  --focus: var(--accent-froid); /* contour de focus clavier                */
  --fond-sombre:     #0d141c;   /* pied de page                            */
  --encre-inverse:   #e8ecf2;   /* texte du pied de page                   */

  /* ---- 2. TEINTES DE RUBRIQUE ---------------------------------------
     Une teinte par rubrique. C'est le seul endroit a modifier pour
     rehabiller la couleur des embranchements (classes .voie-1 a .voie-7). */
  --voie-1: #d4a24a;   /* laiton   */
  --voie-2: #6fb2a8;   /* aqua     */
  --voie-3: #85b4e0;   /* ciel     */
  --voie-4: #e3906f;   /* corail   */
  --voie-5: #b3c56a;   /* tilleul  */
  --voie-6: #b49ade;   /* mauve    */
  --voie-7: #e094ac;   /* rose     */
  --voie-teinte: var(--accent);  /* valeur courante, surchargee par .voie-N */

  /* ---- 3. POLICES (piles systeme, aucun fichier a charger) ---------- */
  --titre-police: "Century Schoolbook", "New Century Schoolbook", "Century Schoolbook L", Georgia, "Nimbus Roman", serif;
  --texte-police: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
  --regie-police: "Andale Mono", Consolas, "DejaVu Sans Mono", "Courier New", monospace;

  /* ---- 4. RYTHME ----------------------------------------------------- */
  --corps:       1rem;      /* taille du texte courant                    */
  --interligne:  1.7;
  --mesure:      36rem;     /* largeur de lecture d'un article            */
  --halle:       72rem;     /* largeur maximale du site                   */
  --gouttiere:   clamp(1rem, 4vw, 2.5rem);
  --respiration: clamp(2.5rem, 6vw, 4.5rem);
  --rail:        6.5rem;    /* colonne de gauche des numeros de rubrique  */
  --trait:       1px;
  --arrondi:     16px;      /* rayon discret pour les cartes média         */
}

/* =========================================================================
   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(--fond);
  color: var(--encre);
  font-family: var(--texte-police);
  font-size: var(--corps);
  line-height: var(--interligne);
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--titre-police);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .6em;
  letter-spacing: .01em;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
h4 { font-size: 1.05rem; }

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

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-clair); }

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

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

/* Lien d'evitement clavier */
.raccourci {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--sur-accent);
  padding: .7rem 1.1rem;
  z-index: 50;
}
.raccourci:focus {
  left: .75rem;
  top: .75rem;
}

/* =========================================================================
   CONTENEURS
   ========================================================================= */

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

.halle--lecture,
.bio--lecture { max-width: calc(var(--mesure) + 2 * var(--gouttiere)); }

.quai { padding-block: var(--respiration); }
.quai + .quai { border-top: var(--trait) solid var(--filet); }
.quai--creuse,
.bio--creuse { background: var(--fond-relief); }

.quai__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  margin-bottom: 1.8rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--encre);
}
.quai__tete h2 { margin: 0; }

.quai__note {
  font-family: var(--regie-police);
  font-size: .85rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* =========================================================================
   FRONTON (en-tete du site)
   ========================================================================= */

.fronton {
  background: var(--fond-appui);
  border-bottom: 2px solid var(--filet);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}

.fronton__corps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.1rem;
}

.enseigne { text-decoration: none; color: inherit; display: block; }
.enseigne__nom {
  font-family: var(--titre-police);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  display: block;
}
.enseigne__mention {
  font-family: var(--regie-police);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  display: block;
  margin-top: .25rem;
}

.itineraire ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.itineraire a {
  font-family: var(--regie-police);
  font-size: .92rem;
  letter-spacing: .04em;
  color: var(--encre);
  text-decoration: none;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
}
.itineraire a:hover,
.itineraire a[aria-current="page"] {
  border-bottom-color: var(--voie-teinte);
  color: var(--encre);
}

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

.pancarte {
  padding-block: clamp(2rem, 5vw, 3.6rem);
  border-bottom: var(--trait) solid var(--filet);
}
.pancarte--voie,
.bio--voie { border-bottom: 4px solid var(--voie-teinte); }

.pancarte__surtitre {
  font-family: var(--regie-police);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--voie-teinte);
  margin: 0 0 .8rem;
}

.pancarte h1 { max-width: 22ch; }
.pancarte--large h1,
.bio--large h1 { max-width: 30ch; }

.pancarte__amorce {
  max-width: var(--mesure);
  font-size: 1.08rem;
  color: var(--encre-douce);
  margin-bottom: 0;
}

.pancarte__indice {
  font-family: var(--titre-police);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1;
  color: var(--voie-teinte);
  font-variant-numeric: lining-nums tabular-nums;
  display: block;
  margin-bottom: .4rem;
}

/* =========================================================================
   CHEF HERO : bande photo de l'accueil
   ========================================================================= */

.chef-hero {
  height: 330px;
  min-height: 330px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--filet);
  background: var(--fond-relief);
}

.chef-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}

.chef-hero__veil {
  position: absolute;
  inset: 0;
  background: #101923;
  opacity: .76;
  z-index: -1;
}

.chef-hero__content {
  height: 100%;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 2rem;
}

.chef-hero__surtitre {
  margin: 0 0 .8rem;
  color: var(--accent);
  font-family: var(--regie-police);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.chef-hero h1 {
  max-width: 24ch;
  margin-bottom: .8rem;
  color: #f6f3ea;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.8rem);
  letter-spacing: -.02em;
}

.chef-hero__amorce {
  max-width: 48ch;
  margin: 0;
  color: #d5dde6;
  font-size: clamp(1rem, .88rem + .4vw, 1.2rem);
}

.chef-hero__mentions {
  margin-top: 1.45rem;
  color: #b9c7d5;
}

.chef-hero + .quai {
  padding-top: 2.5rem;
}

.chef-hero + .quai .quai__tete {
  margin-bottom: 1rem;
}

/* Mentions courtes : date, duree, nombre d'articles */
.mention {
  font-family: var(--regie-police);
  font-size: .86rem;
  letter-spacing: .05em;
  color: var(--encre-douce);
  margin: 0;
}
.mention--groupe {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.4rem;
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
}

/* =========================================================================
   JALONS (fil d'ariane)
   ========================================================================= */

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

/* =========================================================================
   AIGUILLAGE : la grille éditoriale des rubriques sur l'accueil
   ========================================================================= */

.aiguillage {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.embranchement {
  min-width: 0;
  position: relative;
  display: block;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--filet);
  border-radius: var(--arrondi);
  background: linear-gradient(145deg, rgba(24, 39, 54, .98), rgba(16, 25, 35, .98));
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.embranchement:hover {
  transform: translateY(-3px);
  border-color: var(--voie-teinte);
  background: var(--fond-appui);
}

.embranchement__reperage {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}

.embranchement__indice {
  font-family: var(--titre-police);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1;
  color: var(--voie-teinte);
  font-variant-numeric: lining-nums tabular-nums;
  display: block;
}
.embranchement__barre {
  display: block;
  width: 2.2rem;
  height: 3px;
  background: var(--voie-teinte);
}

.embranchement__corps { min-width: 0; }

.embranchement__intitule { margin-bottom: .5rem; }
.embranchement__intitule a {
  color: var(--encre);
  text-decoration: none;
  background-image: linear-gradient(var(--voie-teinte), var(--voie-teinte));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .18s ease-out;
}
.embranchement__intitule a:hover,
.embranchement__intitule a:focus-visible { background-size: 100% 2px; }

.embranchement__apercu {
  max-width: 52ch;
  color: var(--encre-douce);
  margin-bottom: 1rem;
}

.rubrik-bild,
.home-bild,
.medien {
  margin: 0 0 1rem;
  overflow: hidden;
  border: 1px solid var(--filet);
  border-radius: calc(var(--arrondi) - 4px);
  background: var(--fond-relief);
}

.rubrik-bild img,
.home-bild img,
.medien img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.rubrik-bild figcaption,
.home-bild figcaption,
.medien figcaption {
  padding: .65rem .8rem;
  color: var(--encre-douce);
  font-size: .86rem;
}

.embranchement .rubrik-bild {
  margin: .8rem 0 1rem;
}

/* Liens d'articles poses sous chaque rubrique : c'est l'etoile du portail */
.embranchement__desserte {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.embranchement__desserte li { position: relative; padding-left: 1.1rem; }
.embranchement__desserte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .5rem;
  height: 2px;
  background: var(--voie-teinte);
}
.embranchement__desserte a {
  color: var(--encre);
  text-decoration: none;
  border-bottom: var(--trait) solid var(--filet);
}
.embranchement__desserte a:hover { border-bottom-color: var(--voie-teinte); }

@media (max-width: 46rem) {
  .aiguillage { grid-template-columns: 1fr; }
  .embranchement__reperage {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .6rem;
  }
  .embranchement__indice { font-size: 1.9rem; }
  .embranchement__barre { width: 1.6rem; }
}

/* =========================================================================
   ACCES : les liens d'action
   ========================================================================= */

.acces {
  display: inline-block;
  font-family: var(--regie-police);
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--voie-teinte);
  text-decoration: none;
  border-bottom: 2px solid var(--voie-teinte);
  padding-bottom: .15rem;
}
.acces:hover { color: var(--encre); border-bottom-color: var(--encre); }
.acces::after { content: " \2192"; }

.acces--plein,
.bio--plein {
  background: var(--voie-teinte);
  color: var(--sur-accent);
  border: 0;
  padding: .7rem 1.2rem;
  border-radius: var(--arrondi);
}
.acces--plein:hover,
.bio--plein:hover { background: var(--encre); color: var(--fond); }

/* =========================================================================
   DESSERTE : liste d'articles (accueil « derniers ajouts » et page rubrique)
   ========================================================================= */

.desserte {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--trait) solid var(--filet);
}

.bio--creuse .desserte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  border-top: 0;
}

.depart {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: .2rem var(--gouttiere);
  padding-block: 1.3rem;
  border-bottom: var(--trait) solid var(--filet);
}

.bio--creuse .depart {
  display: block;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--filet);
  border-radius: var(--arrondi);
  background: var(--fond-appui);
}

.bio--creuse .depart__horaire {
  padding: .9rem 1rem 0;
}

.bio--creuse .depart__corps {
  padding: 0 1rem 1.1rem;
}

.home-bild {
  max-width: none;
}

.depart__horaire {
  font-family: var(--regie-police);
  font-size: .84rem;
  letter-spacing: .05em;
  color: var(--encre-douce);
  font-variant-numeric: lining-nums tabular-nums;
  padding-top: .3rem;
}

.depart__corps { min-width: 0; }

.depart__intitule {
  font-family: var(--titre-police);
  font-size: 1.22rem;
  line-height: 1.3;
  margin: 0 0 .35rem;
}
.depart__intitule a { color: var(--encre); text-decoration: none; }
.depart__intitule a:hover { color: var(--voie-teinte); }

.depart__amorce {
  margin: 0;
  color: var(--encre-douce);
  max-width: 60ch;
}

.etiquette-voie {
  display: inline-block;
  font-family: var(--regie-police);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--voie-teinte);
  border: var(--trait) solid var(--voie-teinte);
  padding: .12rem .5rem;
  margin-bottom: .5rem;
  text-decoration: none;
}
a.etiquette-voie:hover { background: var(--voie-teinte); color: var(--sur-accent); }

@media (max-width: 46rem) {
  .bio--creuse .desserte { grid-template-columns: 1fr; }
  .depart { grid-template-columns: 1fr; }
  .depart__horaire { padding-top: 0; margin-bottom: .3rem; }
}

/* =========================================================================
   CONSIGNE : encadre lateral ou bloc de reperes
   ========================================================================= */

.consigne {
  background: var(--fond-appui);
  border-left: 4px solid var(--voie-teinte);
  padding: 1.3rem 1.4rem;
  margin-block: 1.8rem;
}
.consigne h2, .consigne h3 { margin-bottom: .5rem; }
.consigne p:last-child, .consigne ul:last-child { margin-bottom: 0; }
.consigne ul { padding-left: 1.1rem; }
.consigne li { margin-bottom: .35rem; }

/* =========================================================================
   PARCOURS : corps d'un article
   ========================================================================= */

.parcours { max-width: var(--mesure); }
.parcours > * { max-width: 100%; }

.parcours h2 {
  margin-top: 2.2rem;
  padding-top: .9rem;
  border-top: 2px solid var(--voie-teinte);
}
.parcours h3 { margin-top: 1.8rem; }

.parcours ul, .parcours ol { padding-left: 1.3rem; }
.parcours li { margin-bottom: .45rem; }

/* les titres des blocs poses dans l'article ne prennent pas le filet des h2 */
.parcours .consigne h2,
.parcours .sommaire h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.annonce {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--encre);
  border-bottom: var(--trait) solid var(--filet);
  padding-bottom: 1.3rem;
  margin-bottom: 1.6rem;
}

.exergue {
  margin: 1.8rem 0;
  padding: .4rem 0 .4rem 1.3rem;
  border-left: 4px solid var(--voie-teinte);
  font-family: var(--titre-police);
  font-size: 1.16rem;
  line-height: 1.45;
}
.exergue p:last-child { margin-bottom: 0; }
.exergue cite {
  display: block;
  margin-top: .6rem;
  font-family: var(--regie-police);
  font-size: .84rem;
  font-style: normal;
  letter-spacing: .06em;
  color: var(--encre-douce);
}

.planche { margin: 1.8rem 0; }
.planche img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--fond-relief);
}
.planche figcaption {
  font-family: var(--regie-police);
  font-size: .84rem;
  color: var(--encre-douce);
  padding-top: .5rem;
  border-top: var(--trait) solid var(--filet);
  margin-top: .5rem;
}

/* Sommaire interne a l'article */
.sommaire {
  background: var(--fond-relief);
  padding: 1.1rem 1.3rem;
  margin-bottom: 2rem;
}
.sommaire h2 {
  font-family: var(--regie-police);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .6rem;
  border: 0;
  padding: 0;
}
.sommaire ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: .96rem;
}
.sommaire li { margin-bottom: .3rem; }
.sommaire a { color: var(--encre); }

/* =========================================================================
   TABLEAUX : toujours dans un conteneur a defilement
   ========================================================================= */

.tableau-defile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.4rem;
  border: var(--trait) solid var(--filet);
}
.tableau-defile table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  margin: 0;
  font-size: .95rem;
}
.tableau-defile th,
.tableau-defile td {
  text-align: left;
  padding: .6rem .8rem;
  border-bottom: var(--trait) solid var(--filet);
  vertical-align: top;
}
.tableau-defile thead th {
  font-family: var(--regie-police);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--fond-relief);
}
.tableau-defile caption {
  caption-side: top;
  text-align: left;
  font-family: var(--regie-police);
  font-size: .84rem;
  color: var(--encre-douce);
  padding: .6rem .8rem;
}

/* =========================================================================
   CORRESPONDANCE : les renvois croises (le coeur de l'etoile)
   ========================================================================= */

.correspondance { padding-block: var(--respiration); }

.correspondance__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--trait);
  background: var(--filet);
  border: var(--trait) solid var(--filet);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.correspondance__liste li { background: var(--fond-appui); }
.correspondance__liste a {
  display: block;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--encre);
  border-top: 4px solid var(--voie-teinte);
  height: 100%;
}
.correspondance__liste a:hover { background: var(--fond-relief); }
.correspondance__quoi {
  display: block;
  font-family: var(--regie-police);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: .3rem;
}
.correspondance__titre {
  display: block;
  font-family: var(--titre-police);
  font-size: 1.08rem;
  line-height: 1.3;
}

/* Relais : navigation entre pages d'une rubrique */
.relais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  padding-block: 1.6rem;
  border-top: var(--trait) solid var(--filet);
  font-family: var(--regie-police);
  font-size: .92rem;
}
.relais__etat { color: var(--encre-douce); }

/* =========================================================================
   MARCHEPIED : pied de page
   ========================================================================= */

.marchepied {
  background: var(--fond-sombre);
  color: var(--encre-inverse);
  margin-top: var(--respiration);
  padding-block: var(--respiration) 2rem;
}
.marchepied a { color: var(--encre-inverse); }
.marchepied a:hover { color: var(--accent-clair); }

.marchepied__grille {
  display: grid;
  gap: 2rem var(--gouttiere);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.marchepied__colonne h2 {
  font-family: var(--regie-police);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .8rem;
  color: var(--encre-inverse);
  opacity: .75;
}
.marchepied ul { list-style: none; margin: 0; padding: 0; }
.marchepied li { margin-bottom: .45rem; }

.marchepied__bas {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: var(--trait) solid var(--filet);
  font-family: var(--regie-police);
  font-size: .84rem;
  opacity: .8;
}

/* =========================================================================
   TEINTES DE RUBRIQUE : a poser sur .embranchement, .pancarte, .quai,
   .depart, ou sur <body> pour teinter toute une page.
   ========================================================================= */

.voie-1 { --voie-teinte: var(--voie-1); }
.voie-2 { --voie-teinte: var(--voie-2); }
.voie-3 { --voie-teinte: var(--voie-3); }
.voie-4 { --voie-teinte: var(--voie-4); }
.voie-5 { --voie-teinte: var(--voie-5); }
.voie-6 { --voie-teinte: var(--voie-6); }
.voie-7 { --voie-teinte: var(--voie-7); }

/* =========================================================================
   UTILITAIRES (peu nombreux, volontairement)
   ========================================================================= */

.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;
}

.sans-marge-bas { margin-bottom: 0; }