/* Contraste Lab. Palette 3 du catalogue systeme/references/langages-visuels.md,
   derivee de Sanzo Wada. La couleur porte le sens de la navigation.
   Interdits du langage tenus, pas de fond creme a serif haute et accent terre cuite,
   pas de presque-noir a accent vert acide, pas de grille de cartes au meme rayon avec
   la meme ombre grise, pas de sur-titre en majuscules espacees. */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/newsreader.woff2?v=0a301b6d") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212;
}

:root {
  --encre: #22303C;
  --trafic: #8FB3AE;
  --automatisation: #C08A2E;
  /* Yellow Ochre eclairci pour le TEXTE seul, #C08A2E rend 4,44 sur l encre,
     sous le seuil AA de 4,5 pour du petit texte. L aplat garde le ton du langage. */
  --automatisation-texte: #C79437;
  --texte: #E4E6E3;
  --tenu: #93A0AA;
  --trait: #3A4A57;
  --serif: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mesure: 34rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* L attribut hidden vient de la feuille du navigateur, toute classe qui pose un
   display l ecrase. Le bouton de courriel en ouverture, class bouton donc
   display inline-flex, restait visible et inerte sans script (contradicteur du
   10/09). Ici hidden gagne toujours. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--encre);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:where(a):focus-visible,
:where(button):focus-visible {
  outline: 2px solid var(--trafic);
  outline-offset: 3px;
  border-radius: 1px;
}

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre);
  color: var(--texte);
  padding: 0.75rem 1rem;
  z-index: 50;
}
.saut:focus { left: 0; }

/* ------------------------------------------------------------ en-tete */

.tete {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.15rem clamp(1rem, 4vw, 3rem);
  position: relative;
  z-index: 20;
}

.marque {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.menu {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.menu > li { position: relative; }

.menu a {
  text-decoration: none;
  color: var(--tenu);
  padding: 0.35rem 0;
  display: inline-block;
  transition: color 0.2s;
}

.menu a:hover,
.menu a[aria-current] { color: var(--texte); }

.sous {
  position: absolute;
  top: 100%;
  left: -0.9rem;
  min-width: 15rem;
  background: var(--encre);
  border: 1px solid var(--trait);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4rem);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.a-sous:hover .sous,
.a-sous:focus-within .sous {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sous a { display: block; padding: 0.4rem 0.9rem; }

/* ------------------------------------------------------------ accueil
   Dans l esprit de l accueil de Dior. Deux moities filmees qui vont du haut au bas
   de l ecran, la marque au centre de l en-tete pose sur les deux, un libelle et un
   lien en bas de chaque moitie. Au survol, la moitie visee s elargit, sa video prend
   sa vitesse et sa phrase se deplie, l autre se fige et s eteint. */

.accueil main { height: 100svh; min-height: 26rem; }
.accueil footer { margin-top: 0; }

.tete-accueil {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 1.5rem;
  padding: 1.7rem clamp(1rem, 4vw, 3rem) 4rem;
  background: linear-gradient(180deg, rgba(34, 48, 60, 0.3) 0%, rgba(34, 48, 60, 0) 100%);
  /* le degrade couvre le haut des deux portes, il ne doit pas leur voler le survol */
  pointer-events: none;
}

.tete-accueil > * { pointer-events: auto; }
.tete-accueil .nav-d { justify-self: end; }
.tete-accueil .menu a { color: var(--texte); }
.tete-accueil .menu a:hover,
.tete-accueil .menu a[aria-current] { text-decoration: underline; text-underline-offset: 0.3em; }
.tete-accueil .nav-d .sous { left: auto; right: -0.9rem; }

.marque-h1 {
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0.26em;
  /* l espacement suit aussi la derniere lettre, ce retrait remet le mot au centre */
  text-indent: 0.26em;
  text-transform: uppercase;
}

.marque-h1 span {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-indent: 0;
  text-transform: none;
  color: var(--texte);
  opacity: 0.88;
}

.portes {
  height: 100%;
  display: flex;
  overflow: hidden;
  background: var(--encre);
}

.porte {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  color: var(--texte);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: flex-grow 1.1s var(--ease);
}

.porte:focus-visible { outline-offset: -8px; }
.porte-b:focus-visible { outline-color: var(--automatisation-texte); }

.porte-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

/* Le plan deborde de 3 pour cent, le parallaxe le deplace sans montrer son bord. */
.porte-plan {
  position: absolute;
  inset: -3%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

.porte-plan img,
.porte-plan video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--zoom, 1));
  transition: transform 1.8s var(--ease), filter 0.9s var(--ease), opacity 1.1s ease;
}

/* La video se pose sur l affiche a sa premiere image, jamais avant. */
.porte-plan video { opacity: 0; }
.porte-plan video.en-lecture { opacity: 1; }

/* La teinte de porte s applique en VOILE et jamais en aplat, regle du langage. */
.porte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.9s var(--ease);
}

.porte-a::after {
  background:
    linear-gradient(180deg, rgba(34, 48, 60, 0.86) 0%, rgba(34, 48, 60, 0.5) 13%,
      rgba(34, 48, 60, 0) 34%, rgba(34, 48, 60, 0.45) 66%, rgba(34, 48, 60, 0.9) 100%),
    linear-gradient(0deg, rgba(143, 179, 174, 0.12), rgba(143, 179, 174, 0.12));
}

.porte-b::after {
  background:
    linear-gradient(180deg, rgba(34, 48, 60, 0.9) 0%, rgba(34, 48, 60, 0.56) 13%,
      rgba(34, 48, 60, 0) 34%, rgba(34, 48, 60, 0.45) 66%, rgba(34, 48, 60, 0.9) 100%),
    linear-gradient(0deg, rgba(192, 138, 46, 0.1), rgba(192, 138, 46, 0.1));
}

.porte-texte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(2rem, 8vh, 5rem);
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.porte h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 300;
  line-height: 1.05;
  margin: 0;
}

/* La phrase se replie par une grille de 0fr vers 1fr, seule facon d animer une
   hauteur naturelle sans la coder en dur. */
.porte-phrase {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.9s var(--ease), opacity 0.6s var(--ease);
}

.porte-phrase p {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  max-width: 25rem;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.6;
}

.porte-phrase p::before { content: ""; display: block; height: 0.85rem; }

.decouvrir {
  position: relative;
  margin-top: 1.1rem;
  padding-bottom: 0.35rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.decouvrir::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transform: scaleX(0.62);
  transition: transform 0.8s var(--ease), opacity 0.8s var(--ease);
}

.porte-a .decouvrir { color: var(--trafic); }
.porte-b .decouvrir { color: var(--automatisation-texte); }

/* Survol reserve a une vraie souris, un ecran tactile garderait l etat colle. */
@media (hover: hover) and (pointer: fine) {
  .portes:hover .porte { flex-grow: 0.72; }
  .portes .porte:hover { flex-grow: 1.28; --zoom: 1.06; }
  .portes:hover .porte:not(:hover) .porte-plan > * { filter: grayscale(0.85) brightness(0.42); }
  .porte:hover .porte-phrase { grid-template-rows: 1fr; opacity: 1; }
  .porte:hover .decouvrir::after { transform: scaleX(1); opacity: 1; }
}

/* Meme choregraphie au clavier. Regle a part, un navigateur qui ignore :has()
   jetterait sinon aussi les regles de survol ci-dessus. Le prefixe est enveloppe
   dans :where() pour ne peser AUCUNE specificite, sinon il ecrase le survol, et
   il est desarme tant que le pointeur est sur les portes, sinon souris et clavier
   se cumulent et eteignent les deux moities (contradicteur du 10/09). */
@media (hover: hover) and (pointer: fine) {
  :where(.portes:not(:hover):has(.porte:focus-visible)) .porte { flex-grow: 0.72; }
  :where(.portes:not(:hover)) .porte:focus-visible { flex-grow: 1.28; --zoom: 1.06; }
  :where(.portes:not(:hover):has(.porte:focus-visible)) .porte:not(:focus-visible) .porte-plan > * {
    filter: grayscale(0.85) brightness(0.42);
  }
  :where(.portes:not(:hover)) .porte:focus-visible .porte-phrase {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  :where(.portes:not(:hover)) .porte:focus-visible .decouvrir::after {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Sans survol, la phrase et le trait sont deja la. */
@media (hover: none), (pointer: coarse) {
  .porte-phrase { grid-template-rows: 1fr; opacity: 1; }
  .decouvrir::after { transform: scaleX(1); opacity: 1; }
}


/* ------------------------------------------------------------ pages
   Gabarit des pages interieures (10/09/2026). Une ouverture qui prend l ecran,
   la photo de matiere de la porte sous un voile d encre, le titre en serif leger,
   un bouton. Puis des blocs, un par titre de niveau 2, le titre a gauche et le
   corps a droite, sur des fonds qui alternent l encre et la nuit. Les fiches n ont
   ni boite, ni ombre, ni rayon, un filet de couleur et un terme en serif. */

:root {
  --nuit: #182129;
  --large: 72rem;
}

.page main { padding: 0; }

article { max-width: none; margin: 0; }

/* ---- ouverture */

.ouverture {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 30rem; /* repli pour un navigateur sans svh */
  min-height: clamp(26rem, 62svh, 40rem);
  padding: 2rem clamp(1rem, 4vw, 3rem) clamp(2.5rem, 6vh, 4.5rem);
}

.gabarit-pilier .ouverture { min-height: clamp(30rem, 80svh, 48rem); }
.gabarit-document .ouverture { min-height: 0; padding-top: 1rem; padding-bottom: 2.5rem; }

.ouverture-fond {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.ouverture-fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}

/* Le voile va de l encre pleine, sous le texte, a la matiere presque nue a droite,
   et il retombe dans l encre en bas pour raccorder le premier bloc. Ses arrets
   SUIVENT la colonne de texte, 41 rem depuis le bord tant que la page est etroite,
   puis le centre plus 5 rem quand le conteneur de 72 rem se centre, sinon a 1920
   la fin du chapo sortait du voile (mesure par contraste.py). La teinte de porte
   s y ajoute en voile leger, jamais en aplat (regle du langage). */
.ouverture-fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(34, 48, 60, 1) 0, rgba(34, 48, 60, 0.98) max(41rem, calc(50% + 5rem)),
      rgba(34, 48, 60, 0.86) max(48rem, calc(50% + 12rem)), rgba(34, 48, 60, 0.5) max(60rem, calc(50% + 24rem)),
      rgba(34, 48, 60, 0.26) 100%),
    linear-gradient(0deg, rgba(34, 48, 60, 1) 0%, rgba(34, 48, 60, 0) 24%);
}

.porte-trafic .ouverture-fond::after {
  background:
    linear-gradient(90deg, rgba(34, 48, 60, 1) 0, rgba(34, 48, 60, 0.98) max(41rem, calc(50% + 5rem)),
      rgba(34, 48, 60, 0.86) max(48rem, calc(50% + 12rem)), rgba(34, 48, 60, 0.5) max(60rem, calc(50% + 24rem)),
      rgba(34, 48, 60, 0.26) 100%),
    linear-gradient(0deg, rgba(34, 48, 60, 1) 0%, rgba(34, 48, 60, 0) 24%),
    linear-gradient(0deg, rgba(143, 179, 174, 0.14), rgba(143, 179, 174, 0.14));
}

.porte-automatisation .ouverture-fond::after {
  background:
    linear-gradient(90deg, rgba(34, 48, 60, 1) 0, rgba(34, 48, 60, 0.98) max(41rem, calc(50% + 5rem)),
      rgba(34, 48, 60, 0.86) max(48rem, calc(50% + 12rem)), rgba(34, 48, 60, 0.5) max(60rem, calc(50% + 24rem)),
      rgba(34, 48, 60, 0.26) 100%),
    linear-gradient(0deg, rgba(34, 48, 60, 1) 0%, rgba(34, 48, 60, 0) 24%),
    linear-gradient(0deg, rgba(192, 138, 46, 0.1), rgba(192, 138, 46, 0.1));
}

/* Une page sans porte n a pas de photo. Un seul filet vertical, la marge d un
   cahier de laboratoire, dessine en CSS et jamais en aplat de couleur. */
.ouverture:not(.ouverture-image)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: min(62%, calc(50% + 24rem));
  width: 1px;
  background: var(--trait);
}

.ouverture-corps {
  width: 100%;
  max-width: var(--large);
  margin: 0 auto;
}

.ouverture h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 1.2rem 0 1.3rem;
  max-width: 15ch;
  text-wrap: balance;
}

.gabarit-document .ouverture h1 { font-size: clamp(2rem, 4vw, 3rem); }
/* la colonne du document fait 44 rem, l ouverture s y aligne, sinon le titre
   partait a 224 px a gauche de son propre texte */
.gabarit-document .ouverture-corps { max-width: 44rem; }

.fil { max-width: none; margin: 0; }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0;
  font-size: 0.82rem; color: var(--tenu); }
.fil li + li::before { content: "\2192"; margin-right: 0.5rem; opacity: 0.55; }
.fil a { color: var(--tenu); text-decoration: none; }
.fil a:hover { color: var(--texte); text-decoration: underline; }

.chapo {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--texte);
  max-width: 38rem;
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
}

/* en texte et pas en tenu, le chapo croise le filet vertical en etroit et le tenu
   y tombait a 3,42 (contraste.py) */
.gabarit-document .chapo { margin-bottom: 0; }

/* ---- boutons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  align-items: center;
}

.bouton {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--texte);
  color: var(--texte);
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.bouton:hover { background: rgba(228, 230, 227, 0.1); }

.bouton-plein { background: var(--texte); color: var(--encre); }
.bouton-plein:hover { background: transparent; color: var(--texte); }

/* La teinte de porte en aplat sur le bouton, le seul aplat de couleur du gabarit.
   Yellow Ochre eclairci pour tenir le seuil AA sous l encre (mesure, 4,44 en #C08A2E). */
.porte-trafic .bouton-plein { background: var(--trafic); border-color: var(--trafic); color: var(--encre); }
.porte-trafic .bouton-plein:hover { background: transparent; color: var(--texte); border-color: var(--texte); }
.porte-automatisation .bouton-plein { background: var(--automatisation-texte); border-color: var(--automatisation-texte); color: var(--encre); }
.porte-automatisation .bouton-plein:hover { background: transparent; color: var(--texte); border-color: var(--texte); }
.porte-automatisation .bouton:focus-visible { outline-color: var(--automatisation-texte); }

/* ---- sommaire, sur cette page */

.sommaire {
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  padding: 0 clamp(1rem, 4vw, 3rem);
}

.sommaire ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
  max-width: var(--large);
  margin: 0 auto;
  padding: 0;
  font-size: 0.84rem;
}

.sommaire ol::-webkit-scrollbar { display: none; }

.sommaire li { flex: 0 0 auto; }

.sommaire a {
  display: inline-block;
  padding: 0.85rem 0;
  color: var(--tenu);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.sommaire a:hover { color: var(--texte); border-bottom-color: currentColor; }

/* ---- blocs */

.bloc { padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 3rem); }

/* l alternance compte les blocs, pas les sections de l article, l ouverture et le
   sommaire n y entrent pas */
.bloc:nth-child(even of .bloc) { background: var(--nuit); }

.bloc-int {
  max-width: var(--large);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.bloc-titre { position: sticky; top: 2rem; }

.bloc-amorce .bloc-int { grid-template-columns: minmax(0, 1fr); }

.bloc h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.7vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

/* le filet de porte, sous le titre, dit a quelle moitie du site on est */
.bloc h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 1.1rem;
  background: var(--tenu);
}

.porte-trafic .bloc h2::after { background: var(--trafic); }
.porte-automatisation .bloc h2::after { background: var(--automatisation); }

.bloc-corps { max-width: 40rem; }
.bloc-corps > :first-child { margin-top: 0; }
.bloc-corps > :last-child { margin-bottom: 0; }

.bloc p { margin: 0 0 1.15rem; }

.bloc h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  margin: 2rem 0 0.6rem;
}

.bloc ul { margin: 0 0 1.4rem; padding-left: 1.1rem; }
.bloc li { margin-bottom: 0.5rem; }
.bloc li::marker { color: var(--tenu); }

/* les liens du texte seulement, un bouton garde ses couleurs propres (le bouton plein
   des pages sans porte etait rendu texte sur texte, invisible, par cette regle) */
.bloc a:not(.bouton) { color: var(--texte); text-decoration-color: var(--tenu); text-underline-offset: 0.2em; }
.porte-trafic .bloc a:not(.bouton) { text-decoration-color: var(--trafic); }
.porte-automatisation .bloc a:not(.bouton) { text-decoration-color: var(--automatisation-texte); }
.bloc a:not(.bouton):hover { text-decoration-thickness: 2px; }

.bloc .actions { margin-top: 1.8rem; }

/* l encart devient une citation, en serif leger et plus grand que le corps */
.encart {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.4;
  color: var(--texte);
  border-left: 2px solid var(--tenu);
  padding: 0.3rem 0 0.3rem 1.4rem;
  margin: 2.2rem 0;
}

.porte-trafic .encart { border-left-color: var(--trafic); }
.porte-automatisation .encart { border-left-color: var(--automatisation); }

/* ---- fiches, le corps prend toute la largeur sous le titre */

.bloc-fiches .bloc-int { grid-template-columns: minmax(0, 1fr); }
.bloc-fiches .bloc-titre { position: static; max-width: 34rem; }
.bloc-fiches .bloc-corps { max-width: none; }
.bloc-fiches .bloc-corps > p, .bloc-fiches .bloc-corps > ul, .bloc-fiches .bloc-corps > .encart { max-width: 40rem; }

.fiches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  margin: 2rem 0 2.2rem;
}

.fiches-1 { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.fiches-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; }
.fiches-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fiches-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.fiche {
  border-top: 1px solid var(--trait);
  padding-top: 1.2rem;
  position: relative;
}

/* le filet de porte, court, sur le trait de la fiche, jamais une boite */
.fiche::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--tenu);
}

.porte-trafic .fiche::before { background: var(--trafic); }
.porte-automatisation .fiche::before { background: var(--automatisation); }

dl.fiches { margin-top: 2rem; }

.fiche h3, .fiche dt {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0 0 0.7rem;
  padding: 0;
  border: 0;
}

.fiche p, .fiche dd { font-size: 0.98rem; margin: 0 0 0.9rem; }
.fiche p:last-child, .fiche dd:last-child { margin-bottom: 0; }
.fiche ul { font-size: 0.98rem; margin-bottom: 0; }

/* ---- etape, une vraie sequence, numerotee en chiffres romains */

.etape-numero {
  display: block;
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  color: var(--tenu);
}

.porte-trafic .etape-numero { color: var(--trafic); }
.porte-automatisation .etape-numero { color: var(--automatisation-texte); }

/* ---- fin, l appel a l action, centre */

.bloc-fin { text-align: center; border-top: 1px solid var(--trait); }
.bloc-fin .bloc-int { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.6rem; }
.bloc-fin .bloc-titre { position: static; max-width: 40rem; }
.bloc-fin h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 300; }
.bloc-fin h2::after { margin-left: auto; margin-right: auto; }
.bloc-fin .bloc-corps { max-width: 38rem; }
.bloc-fin .actions { justify-content: center; }
.bloc-fin p { color: var(--texte); }

/* ---- document, les pages legales, une colonne, la liste terme et definition en lignes */

.gabarit-document .bloc { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.gabarit-document .bloc:nth-child(even of .bloc) { background: transparent; }
.gabarit-document .bloc-int { grid-template-columns: minmax(0, 1fr); max-width: 44rem; gap: 1rem; }
.gabarit-document .bloc-titre { position: static; }
.gabarit-document .bloc h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.gabarit-document .bloc h2::after { display: none; }
.gabarit-document .bloc-corps { max-width: none; }
.gabarit-document .fiches { display: block; margin: 0.5rem 0 1.5rem; }
.gabarit-document .fiche { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 0.4rem 1.5rem; padding: 0.8rem 0; }
.gabarit-document .fiche::before { display: none; }
.gabarit-document .fiche h3, .gabarit-document .fiche dt { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; margin: 0; }
.gabarit-document .fiche p, .gabarit-document .fiche dd { margin: 0; }

/* Bouton qui reconstitue l adresse de courriel dans le corps du texte. */
.courriel {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--tenu);
  text-underline-offset: 0.2em;
}

.courriel:hover { text-decoration-thickness: 2px; }

.courriel-lien { text-underline-offset: 0.2em; }

.bouton.courriel { text-decoration: none; }

/* ------------------------------------------------------------ pied */

footer {
  border-top: 1px solid var(--trait);
  padding: 3rem clamp(1rem, 4vw, 3rem) 2.5rem;
  margin-top: 4rem;
}

.accueil footer { margin-top: 0; }

.pied-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2.2rem;
  max-width: 68rem;
  margin: 0 auto;
}

.pied-cols h2 {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texte);
  margin: 0 0 0.9rem;
}

.pied-cols ul { list-style: none; margin: 0; padding: 0; }
.pied-cols li { margin-bottom: 0.45rem; }
.pied-cols a { color: var(--tenu); text-decoration: none; font-size: 0.88rem; }
.pied-cols a:hover { color: var(--texte); text-decoration: underline; }

.pied-fin {
  max-width: 68rem;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--trait);
  color: var(--tenu);
  font-size: 0.82rem;
}

/* ------------------------------------------------------------ etroit */

@media (max-width: 900px) {
  .tete { flex-wrap: wrap; gap: 0.9rem 1.4rem; }
  .ouverture { min-height: clamp(22rem, 70svh, 34rem); padding-bottom: 2.2rem; }
  .gabarit-pilier .ouverture { min-height: clamp(24rem, 76svh, 36rem); }
  .ouverture-fond img { object-position: 62% 50%; }
  /* en etroit le texte couvre toute la largeur, le voile est donc plus lourd partout */
  .ouverture-fond::after,
  .porte-trafic .ouverture-fond::after,
  .porte-automatisation .ouverture-fond::after {
    background:
      linear-gradient(180deg, rgba(34, 48, 60, 0.72) 0%, rgba(34, 48, 60, 0.93) 38%, rgba(34, 48, 60, 1) 100%);
  }
  /* le fil se pose sur la partie la plus nue du voile, en tenu il tombait a 1,6 */
  .ouverture-image .fil a, .ouverture-image .fil span { color: var(--texte); }
  .ouverture h1 { max-width: none; }
  .ouverture:not(.ouverture-image)::before { left: auto; right: 1.5rem; }
  .bloc-int { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .bloc-titre { position: static; }
  .fiches, .fiches-2, .fiches-3, .fiches-4 { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .gabarit-document .fiche { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  /* le sommaire defile, le bord droit se fond pour dire qu il y a une suite */
  .sommaire ol {
    flex-wrap: nowrap;
    gap: 0 1.2rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: 3rem;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent);
  }
  .menu { width: 100%; overflow-x: auto; gap: 1.2rem; padding-bottom: 0.2rem; }
  .sous { display: none; }
  .tete-accueil {
    grid-template-columns: auto auto;
    grid-template-areas: "marque marque" "gauche droite";
    justify-content: space-between;
    padding: 1.2rem 1rem 3rem;
    gap: 1rem;
  }
  .tete-accueil .marque-h1 { grid-area: marque; }
  .tete-accueil .nav-g { grid-area: gauche; }
  .tete-accueil .nav-d { grid-area: droite; }
  .tete-accueil .menu {
    width: auto;
    overflow: visible;
    gap: 1rem;
    font-size: 0.85rem;
    padding-bottom: 0;
  }
  .portes { flex-direction: column; }
  .porte-texte { bottom: 1.5rem; }
  .porte h2 { font-size: 1.9rem; }
  .porte-phrase p { font-size: 0.92rem; line-height: 1.5; max-width: 22rem; }
  .decouvrir { margin-top: 0.7rem; }
}

@media (max-width: 400px) {
  .tete-accueil .menu { font-size: 0.8rem; gap: 0.8rem; }
  .tete-accueil { padding-left: 0.9rem; padding-right: 0.9rem; }
}

/* ------------------------------------------------------------ mouvement */

@media (prefers-reduced-motion: no-preference) {
  .leve { animation: leve 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .leve-2 { animation-delay: 0.12s; }
  .leve-3 { animation-delay: 0.24s; }
  @keyframes leve {
    from { opacity: 0; transform: translateY(1.1rem); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------ impression */

@media print {
  :root { --encre: #fff; --nuit: #fff; --texte: #111; --tenu: #444; --trait: #999; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .tete nav, .sommaire, .ouverture-fond, footer .pied-cols, .actions, .saut { display: none !important; }
  .ouverture, .gabarit-pilier .ouverture { min-height: 0; padding: 0 0 1rem; }
  .ouverture:not(.ouverture-image)::before { display: none; }
  .bloc { padding: 1rem 0; background: transparent !important; break-inside: avoid; }
  .bloc-int, .gabarit-document .bloc-int { max-width: none; gap: 0.5rem; }
  .bloc-titre { position: static; }
  .fiches { gap: 1rem; }
  a { color: #111; }
  .pied-fin { border: 0; }
}