/* ==========================================================================
   Kolia — système graphique de la vitrine
   ---------------------------------------------------------------------------
   Charte : design/charte/CHARTE-KOLIA.md. Toutes les couleurs, la police,
   les rayons et les ombres viennent de tokens.css (--k-*), chargé avant ce
   fichier ; aucune couleur n'est écrite en dur ici.

   Une seule famille, Manrope : titres en graisse 800 à interlettrage négatif,
   texte courant en 500, données en chiffres tabulaires. L'aubergine porte les
   bandeaux, la menthe l'action — sur aubergine uniquement ; sur fond clair,
   l'accent textuel est le teal.

   Pas d'images générées, pas de chiffres invérifiables : la matière visuelle,
   ce sont les vraies rues de Cotonou (© contributeurs OpenStreetMap) et la
   typographie.
   ========================================================================== */

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Manrope-400.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Manrope-500.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Manrope-600.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Manrope-700.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Manrope-800.ttf") format("truetype"); }

:root {
  /* Filets : sur aubergine, un palier de la marque ; sur fond clair, le filet
     de la charte, renforcé plus bas quand le navigateur sait mélanger. */
  --trait: var(--k-avatar-fond);
  --trait-clair: var(--k-filet);
  --trait-menthe: var(--k-icone-action);

  /* Rôles selon le fond (redéfinis par .fond-*) */
  --accent: var(--k-teal);
  --attenue: var(--k-attenue);

  /* Le code garde une chasse fixe : l'alignement des exemples en dépend */
  --code: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  --marge: clamp(20px, 4.2vw, 72px);
  --gouttiere: clamp(14px, 1.8vw, 28px);
  --max: 1720px;
  --barre: 76px;

  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --doux: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Filets translucides dérivés des tokens, là où color-mix est compris */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --trait-clair: color-mix(in srgb, var(--k-encre) 13%, transparent);
    --trait-menthe: color-mix(in srgb, var(--k-sur-menthe) 30%, transparent);
  }
}

/* --- Base ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--barre);
}
body {
  font-family: var(--k-police);
  font-weight: var(--k-graisse-corps);
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.16rem);
  line-height: 1.6;
  color: var(--k-encre);
  background: var(--k-fond);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--k-menthe); color: var(--k-sur-menthe); }
:focus-visible { outline: 3px solid var(--k-focus); outline-offset: 3px; border-radius: 4px; }

.evitement {
  position: absolute;
  left: var(--marge);
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--k-menthe);
  color: var(--k-sur-menthe);
  font-weight: 700;
  border-radius: var(--k-r-bouton-aux);
  transition: top 0.3s var(--expo);
}
.evitement:focus { top: 12px; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Typographie --------------------------------------------------------- */

.t-mega,
.t-1,
.t-2,
.t-3 { font-family: var(--k-police); text-wrap: balance; }

.t-mega {
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 12rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.t-1 {
  font-weight: 800;
  font-size: clamp(2.4rem, 5.6vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -0.048em;
}
.t-2 {
  font-weight: 800;
  font-size: clamp(1.75rem, 3.2vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.036em;
}
.t-3 {
  font-weight: 800;
  font-size: clamp(1.2rem, 1.6vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.t-chapo {
  font-weight: 500;
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
/* Surtitre en capitales (charte : 800, interlettrage +1,5) */
.t-label {
  font-family: var(--k-police);
  font-weight: 800;
  font-size: clamp(0.68rem, 0.64rem + 0.14vw, 0.78rem);
  line-height: 1.5;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
/* Données : heures, références, distances — chiffres tabulaires */
.t-donnee {
  font-family: var(--k-police);
  font-weight: 600;
  font-size: clamp(0.8rem, 0.76rem + 0.14vw, 0.9rem);
  line-height: 1.5;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.signal { color: var(--accent); }
.attenue { color: var(--attenue); }
p { text-wrap: pretty; }

/* --- Mise en page -------------------------------------------------------- */

.cadre {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
}
/* Les anciens fonds « encre » et « lagune » deviennent l'aubergine de la
   charte ; le bandeau d'appel passe à la menthe ; le papier, au fond d'écran. */
.fond-encre,
.fond-lagune { background: var(--k-aubergine); color: var(--k-sur-aubergine); --accent: var(--k-menthe); --attenue: var(--k-sur-aubergine-doux); }
.fond-papier { background: var(--k-fond); color: var(--k-encre); --accent: var(--k-teal); --attenue: var(--k-attenue); }
.fond-signal { background: var(--k-menthe); color: var(--k-sur-menthe); --accent: var(--k-sur-menthe); --attenue: var(--k-sur-menthe); }

.section { padding-block: clamp(96px, 13vw, 220px); position: relative; }
.entete-section { display: grid; gap: 22px; margin-bottom: clamp(56px, 7vw, 120px); }

/* --- Boutons & liens ----------------------------------------------------- */

/* Bouton principal (charte §6) : menthe, libellé à gauche, carré d'action
   sombre à droite avec la flèche. */
.bouton {
  --fond: var(--k-menthe);
  --texte-bouton: var(--k-sur-menthe);
  --survol: var(--k-menthe-survol);
  --carre: var(--k-icone-action);
  --carre-icone: var(--k-menthe);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 9px 10px 9px 20px;
  border-radius: var(--k-r-bouton);
  background: var(--fond);
  color: var(--texte-bouton);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.012em;
  overflow: hidden;
  white-space: nowrap;
  transition: color 0.5s var(--expo);
}
/* Le remplissage monte depuis le bas : un geste, pas un fondu */
.bouton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--survol);
  transform: translateY(101%);
  border-radius: inherit;
  transition: transform 0.55s var(--expo);
}
.bouton__fleche {
  display: grid;
  place-items: center;
  flex: none;
  width: 37px;
  height: 37px;
  border-radius: 12px;
  background: var(--carre);
  color: var(--carre-icone);
  overflow: hidden;
}
.bouton__fleche svg { width: 18px; height: 18px; transition: transform 0.55s var(--expo); }
.bouton:hover::before,
.bouton:focus-visible::before { transform: translateY(0); }
.bouton:hover .bouton__fleche svg,
.bouton:focus-visible .bouton__fleche svg { transform: translate(2px, -2px); }

/* Bouton contour (charte : bouton secondaire) — sobre, filet fin */
.bouton--contour {
  --fond: transparent;
  --texte-bouton: currentColor;
  --survol: var(--k-nav-actif-fond);
  --bord: var(--k-avatar-bord);
  box-shadow: inset 0 0 0 1px var(--bord);
  border-radius: var(--k-r-bouton-aux);
  justify-content: center;
  padding: 0 24px;
}
.bouton--contour:hover,
.bouton--contour:focus-visible { --bord: var(--k-sur-aubergine-doux); }
.fond-papier .bouton--contour { --fond: var(--k-carte); --survol: var(--k-doux); --bord: var(--k-filet); }
.fond-papier .bouton--contour:hover,
.fond-papier .bouton--contour:focus-visible { --bord: var(--k-teal); }
/* Variante aubergine, pour les surfaces menthe */
.bouton--encre { --fond: var(--k-aubergine); --texte-bouton: var(--k-sur-aubergine); --survol: var(--k-pastille-aubergine); --carre: var(--k-menthe); --carre-icone: var(--k-sur-menthe); }

.lien {
  position: relative;
  display: inline-block;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.5s var(--expo);
  padding-bottom: 2px;
}
.lien:hover,
.lien:focus-visible { background-size: 0 1px; background-position: 100% 100%; }

/* --- Barre de navigation ------------------------------------------------- */

.barre {
  --accent: var(--k-menthe);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--barre);
  color: var(--k-sur-aubergine);
  transition: background-color 0.5s var(--expo), color 0.5s var(--expo), transform 0.6s var(--expo);
}
.barre::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--trait);
  opacity: 0;
  transition: opacity 0.5s var(--expo);
}
.barre.est-defilee {
  background: var(--k-aubergine);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .barre.est-defilee { background: color-mix(in srgb, var(--k-aubergine) 88%, transparent); }
}
.barre.est-defilee::after { opacity: 1; }
.barre.est-cachee { transform: translateY(-100%); }
.barre--claire:not(.est-defilee) { color: var(--k-encre); --accent: var(--k-teal); }

.barre__cadre {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Logo (charte §5) : signe « k » + « kolia » + point menthe */
.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -0.06em;
}
.marque svg { width: 32px; height: 32px; fill: var(--k-menthe); transition: transform 0.8s var(--expo); }
.marque:hover svg { transform: rotate(-12deg) scale(1.05); }
.marque__point { color: var(--k-menthe); }
/* Sur fond clair : signe aubergine, point teal (la menthe n'y est jamais du texte) */
.barre--claire:not(.est-defilee) .marque svg { fill: var(--k-aubergine); }
.barre--claire:not(.est-defilee) .marque__point { color: var(--k-teal); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .barre--claire:not(.est-defilee) .marque svg { fill: var(--k-menthe); }
}
:root[data-theme="dark"] .barre--claire:not(.est-defilee) .marque svg { fill: var(--k-menthe); }

.barre__liens { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.barre__liens a {
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.8;
  transition: opacity 0.3s;
  position: relative;
}
.barre__liens a:hover,
.barre__liens a[aria-current="page"] { opacity: 1; }
.barre__liens a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.barre__actions { display: flex; align-items: center; gap: 22px; }
.barre__actions .bouton { min-height: 46px; padding: 5px 5px 5px 16px; font-size: 0.92rem; gap: 12px; }
.barre__actions .bouton__fleche { width: 34px; height: 34px; border-radius: 11px; }
.barre__menu {
  display: none;
  width: 46px; height: 46px;
  place-items: center;
  border-radius: var(--k-r-bouton-aux);
  box-shadow: inset 0 0 0 1px var(--trait);
}
.barre__menu span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform 0.5s var(--expo); }
.barre__menu span + span { margin-top: 5px; }
.menu-ouvert .barre__menu span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-ouvert .barre__menu span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Menu plein écran (mobile) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--k-aubergine);
  color: var(--k-sur-aubergine);
  padding: calc(var(--barre) + 24px) var(--marge) 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--expo);
  visibility: hidden;
}
.menu-ouvert .menu { clip-path: inset(0 0 0 0); visibility: visible; }
.menu-ouvert .barre { background: var(--k-aubergine); color: var(--k-sur-aubergine); }
.menu-ouvert .barre .marque svg { fill: var(--k-menthe); }
.menu-ouvert .barre .marque__point { color: var(--k-menthe); }
.menu__liens a {
  display: block;
  font-weight: 800;
  font-size: clamp(2.2rem, 10vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: -0.045em;
  padding-block: 4px;
  transform: translateY(40%);
  opacity: 0;
  transition: transform 0.9s var(--expo), opacity 0.9s var(--expo);
}
.menu-ouvert .menu__liens a { transform: none; opacity: 1; }
.menu-ouvert .menu__liens a:nth-child(2) { transition-delay: 0.04s; }
.menu-ouvert .menu__liens a:nth-child(3) { transition-delay: 0.08s; }
.menu-ouvert .menu__liens a:nth-child(4) { transition-delay: 0.12s; }
.menu-ouvert .menu__liens a:nth-child(5) { transition-delay: 0.16s; }
.menu__pied { display: grid; gap: 14px; }

/* --- Ouverture (héros cartographique) ----------------------------------- */

.ouverture {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  isolation: isolate;
}
.carte {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.carte svg { width: 100%; height: 100%; }
/* Carte recolorée : terre aubergine, eau vert profond, rues en aubergine
   clair (opacités croissantes selon la hiérarchie), trajets en menthe. */
.carte #eau path { fill: var(--k-icone-action); fill-opacity: 0.55; stroke: var(--k-surtitre-aubergine); stroke-opacity: 0.14; stroke-width: 0.6; }
.carte #cote path { fill: none; stroke: var(--k-surtitre-aubergine); stroke-opacity: 0.4; stroke-width: 1; }
.carte #canaux path { fill: none; stroke: var(--k-menthe); stroke-opacity: 0.22; stroke-width: 1.4; }
.carte #fines path { fill: none; stroke: var(--k-surtitre-aubergine); stroke-opacity: 0.12; stroke-width: 0.55; }
.carte #majeures path { fill: none; stroke: var(--k-surtitre-aubergine); stroke-opacity: 0.22; stroke-width: 0.9; }
.carte #axes path { fill: none; stroke: var(--k-surtitre-aubergine); stroke-opacity: 0.4; stroke-width: 1.5; }
.carte #trajets path { fill: none; stroke: none; }
.carte #lieux text {
  font-family: var(--k-police);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--k-surtitre-aubergine);
  fill-opacity: 0.55;
  text-anchor: middle;
}
.carte .sillage { fill: none; stroke: var(--k-menthe); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carte .coursier { fill: var(--k-menthe); }
.carte .coursier-halo { fill: var(--k-menthe); opacity: 0.22; }
.carte .arrivee { fill: none; stroke: var(--k-menthe); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: pulsation 2.4s var(--expo) infinite; }
@keyframes pulsation {
  0% { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Entrée de la carte : le réseau apparaît avant les mots */
.js .carte #fines,
.js .carte #eau,
.js .carte #cote,
.js .carte #lieux { opacity: 0; transition: opacity 2.2s var(--doux); }
.js .carte.est-prete #fines,
.js .carte.est-prete #eau,
.js .carte.est-prete #cote { opacity: 1; }
.js .carte.est-prete #lieux { opacity: 1; transition-delay: 1.2s; }
.js .carte #axes path,
.js .carte #majeures path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .carte.est-prete #axes path { animation: tracer 2.8s var(--doux) forwards; }
.js .carte.est-prete #majeures path { animation: tracer 3.4s var(--doux) 0.3s forwards; }
@keyframes tracer { to { stroke-dashoffset: 0; } }

/* Voile de lisibilité : la carte reste la vedette, le texte reste lisible */
.ouverture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--k-aubergine) 0%, var(--k-aubergine) 14%, transparent 70%),
    radial-gradient(120% 70% at 0% 100%, var(--k-aubergine), transparent 60%);
  pointer-events: none;
}
.ouverture__contenu {
  width: 100%;
  padding-top: calc(var(--barre) + 40px);
  padding-bottom: clamp(28px, 4vw, 56px);
}
.ouverture__surtitre {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: clamp(18px, 2.2vw, 30px);
  color: var(--k-surtitre-aubergine);
}
.ouverture__surtitre span:not(:last-child)::after { content: "·"; margin-left: 22px; color: var(--k-nav-inactif); }
.ouverture h1 { margin-inline-start: -0.04em; }
/* Le masque laisse de la place au-dessus pour les capitales accentuées (É, À)
   et en dessous pour les jambages de Manrope */
.ligne { display: block; overflow: clip; padding-block: 0.14em 0.1em; margin-block: -0.14em -0.1em; }
.ligne > span { display: block; }
.js .ligne > span { transform: translateY(110%); }
.js .est-prete .ligne > span {
  transform: none;
  transition: transform 1.3s var(--expo);
  transition-delay: calc(0.35s + var(--i, 0) * 0.11s);
}
.ouverture__bas {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  align-items: end;
  margin-top: clamp(28px, 3.6vw, 56px);
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid var(--trait);
}
.ouverture__chapo { grid-column: 1 / span 5; color: var(--k-sur-aubergine-doux); max-width: 46ch; }
.ouverture__actions { grid-column: 6 / span 4; display: flex; flex-wrap: wrap; gap: 12px; align-self: end; }
.ouverture__trajet { grid-column: 10 / span 3; justify-self: end; text-align: right; }

.trajet-direct { display: grid; gap: 6px; color: var(--k-sur-aubergine-doux); }
.trajet-direct__ligne { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--k-sur-aubergine); }
.trajet-direct__point {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--k-menthe);
}
.trajet-direct__point::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulsation 1.8s var(--expo) infinite;
}
.trajet-direct__nom { transition: opacity 0.5s var(--expo), transform 0.5s var(--expo); }
.trajet-direct__nom.change { opacity: 0; transform: translateY(6px); }
.credit-carte { position: absolute; right: var(--marge); bottom: 10px; font-size: 0.64rem; color: var(--k-nav-inactif); }
.credit-carte a { text-decoration: underline; text-underline-offset: 2px; }

/* --- Manifeste ----------------------------------------------------------- */

.manifeste__repere { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--barre) + 24px); }
.manifeste__texte { grid-column: 4 / span 9; }
.manifeste__texte .mot { color: var(--k-encre); opacity: 0.16; transition: opacity 0.6s var(--expo), color 0.6s var(--expo); }
.manifeste__texte .mot.est-lu { opacity: 1; }
.manifeste__texte .mot.fort.est-lu { color: var(--k-teal); }
.manifeste__signature { grid-column: 4 / span 9; margin-top: clamp(40px, 5vw, 72px); display: flex; gap: 24px; align-items: center; color: var(--k-attenue); }
.manifeste__signature::before { content: ""; width: 64px; height: 1px; background: currentColor; }

/* --- Une course, minute par minute -------------------------------------- */

.manifeste { padding-bottom: clamp(72px, 9vw, 150px); }
.course { border-top: 1px solid var(--trait-clair); padding-top: clamp(72px, 9vw, 150px); }
.course__tete { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: end; margin-bottom: clamp(56px, 7vw, 110px); }
.course__tete h2 { grid-column: 1 / span 8; }
.course__tete p { grid-column: 9 / span 4; color: var(--k-attenue); }
.course__scene { grid-column: 1 / span 6; position: relative; }
.course__visuel {
  --accent: var(--k-menthe);
  position: sticky;
  top: calc(var(--barre) + 4vh);
  height: calc(100svh - var(--barre) - 8vh);
  max-height: 780px;
  border-radius: var(--k-r-offre);
  background: var(--k-aubergine);
  color: var(--k-sur-aubergine);
  box-shadow: var(--k-ombre-flottante);
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
}
.course__plan { position: relative; overflow: hidden; }
.course__plan svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.course__plan .fond-rues path { fill: none; stroke: var(--k-surtitre-aubergine); stroke-opacity: 0.14; stroke-width: 0.8; }
.course__plan .fond-axes path { fill: none; stroke: var(--k-surtitre-aubergine); stroke-opacity: 0.3; stroke-width: 1.4; }
.course__plan .fond-eau path { fill: var(--k-icone-action); fill-opacity: 0.7; }
.course__plan .itineraire-fond { fill: none; stroke: var(--k-surtitre-aubergine); stroke-opacity: 0.35; stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.course__plan .itineraire { fill: none; stroke: var(--k-menthe); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 1.2s var(--expo); }
.course__plan .repere-depart { fill: var(--k-sur-aubergine); }
.course__plan .repere-arrivee { fill: var(--k-menthe); }
.course__plan .livreur { fill: var(--k-aubergine); stroke: var(--k-menthe); stroke-width: 4; transition: transform 1.2s var(--expo); }
.course__etat {
  padding: clamp(22px, 2.4vw, 34px);
  border-top: 1px solid var(--trait);
  display: grid;
  gap: 10px;
}
.course__etat-ligne { display: flex; justify-content: space-between; gap: 16px; color: var(--k-sur-aubergine-doux); }
.course__statut { position: relative; height: 1.2em; font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.2; overflow: clip; }
.course__statut span { position: absolute; inset: 0; transform: translateY(105%); transition: transform 0.9s var(--expo); }
.course__statut span.est-actif { transform: none; }
.course__statut span.est-passe { transform: translateY(-105%); }
.course__rail { height: 4px; border-radius: 4px; background: var(--trait); position: relative; overflow: hidden; }
.course__rail i { position: absolute; inset: 0; background: var(--k-menthe); border-radius: inherit; transform-origin: left; transform: scaleX(var(--progression, 0.05)); transition: transform 1.2s var(--expo); }
.course__etapes { grid-column: 8 / span 5; }
.etape {
  min-height: 62svh;
  display: grid;
  align-content: center;
  gap: 18px;
  opacity: 0.28;
  transition: opacity 0.7s var(--expo);
}
.etape.est-active { opacity: 1; }
.etape__heure { color: var(--accent); }
.etape p { color: var(--k-attenue); max-width: 44ch; }

/* --- Garanties ----------------------------------------------------------- */

.garanties__tete { grid-column: 1 / span 12; margin-bottom: clamp(56px, 7vw, 120px); display: grid; gap: 26px; }
.garanties__tete p { max-width: 52ch; color: var(--k-sur-aubergine-doux); }
.garanties__tete p.signal { color: var(--accent); }
.garantie {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  padding-block: clamp(28px, 3.4vw, 48px);
  border-top: 1px solid var(--trait);
  align-items: baseline;
}
.garantie:last-child { border-bottom: 1px solid var(--trait); }
.garanties__liste { grid-column: 1 / -1; }
.garantie__num { grid-column: 1 / span 1; color: var(--k-nav-inactif); }
.garantie__risque { grid-column: 2 / span 7; }
/* La rature : ce qui ne peut pas arriver est barré sous vos yeux, ligne par
   ligne — le fond « clone » se découpe sur chaque ligne du texte. */
.rature {
  color: var(--k-sur-aubergine);
  background: linear-gradient(var(--k-menthe), var(--k-menthe)) 0 58% / 0% max(3px, 0.07em) no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1.2s var(--expo) 0.2s, color 0.9s var(--expo) 0.55s;
}
.garantie.est-vue .rature { background-size: 100% max(3px, 0.07em); color: var(--k-nav-inactif); }
.garantie__preuve { grid-column: 9 / span 4; color: var(--k-sur-aubergine-doux); }
.garantie__preuve strong { color: var(--k-sur-aubergine); font-weight: 700; }

/* --- Portes (commerçants, livreurs, développeurs) ------------------------ */

.portes { display: flex; gap: var(--gouttiere); min-height: min(80svh, 820px); }
.porte {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--k-r-offre);
  padding: clamp(24px, 2.6vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: flex-grow 0.9s var(--expo);
  isolation: isolate;
}
/* Même logique que les icônes d'application : client = aubergine, livreur =
   menthe, développeurs = carte claire. */
.porte:nth-child(1) { background: var(--k-aubergine); color: var(--k-sur-aubergine); --accent: var(--k-menthe); }
.porte:nth-child(2) { background: var(--k-menthe); color: var(--k-sur-menthe); --accent: var(--k-sur-menthe); }
.porte:nth-child(3) { background: var(--k-carte); color: var(--k-encre); --accent: var(--k-teal); box-shadow: inset 0 0 0 1px var(--k-filet), var(--k-ombre-carte); }
/* Au repos, seul le titre, posé en bas de la porte. Au survol, la porte
   s'élargit et le détail se déplie. Sur écran tactile, tout est ouvert. */
.porte__deploiement { display: grid; grid-template-rows: 1fr; }
.porte__deploiement > div { min-height: 0; overflow: hidden; }
@media (hover: hover) and (min-width: 1000px) {
  .portes:hover .porte,
  .portes:focus-within .porte { flex-grow: 0.75; }
  .portes .porte:hover,
  .portes .porte:focus-within { flex-grow: 1.9; }
  .porte__deploiement { grid-template-rows: 0fr; transition: grid-template-rows 0.9s var(--expo); }
  .porte:hover .porte__deploiement,
  .porte:focus-within .porte__deploiement { grid-template-rows: 1fr; }
  .porte__detail { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--expo), transform 0.8s var(--expo); }
  .porte:hover .porte__detail,
  .porte:focus-within .porte__detail { opacity: 1; transform: none; transition-delay: 0.22s; }
}
.porte__haut { display: flex; justify-content: space-between; gap: 16px; opacity: 0.85; }
.porte__titre { max-width: 12ch; }
.porte__detail { display: grid; gap: 22px; margin-top: 26px; max-width: 42ch; }
/* Le focus reste visible sur la porte menthe */
.porte:nth-child(2) :focus-visible { outline-color: var(--k-aubergine); }
.porte__liste { display: grid; gap: 10px; }
.porte__liste li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.porte__liste li::before { content: "→"; font-weight: 700; font-size: 0.9em; padding-top: 0.1em; color: var(--accent); }
.porte:nth-child(2) .bouton { --fond: var(--k-aubergine); --texte-bouton: var(--k-sur-aubergine); --survol: var(--k-pastille-aubergine); --carre: var(--k-menthe); --carre-icone: var(--k-sur-menthe); }

/* --- Code ---------------------------------------------------------------- */

.code__texte { grid-column: 1 / span 5; display: grid; gap: 28px; align-content: start; }
.code__texte p { color: var(--k-sur-aubergine-doux); max-width: 42ch; }
.code__texte p.t-label { color: var(--k-surtitre-aubergine); }
.code__fenetre {
  grid-column: 7 / span 6;
  border-radius: var(--k-r-carte);
  background: var(--k-pastille-aubergine);
  box-shadow: inset 0 0 0 1px var(--k-avatar-fond), var(--k-ombre-flottante);
  overflow: hidden;
}
.code__onglets { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--trait); }
.code__onglets button {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--k-r-pastille);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--k-nav-inactif);
  transition: background-color 0.3s, color 0.3s;
}
.code__onglets button[aria-selected="true"] { background: var(--k-avatar-fond); color: var(--k-menthe); }
.code__panneau { padding: clamp(20px, 2.2vw, 30px); overflow-x: auto; }
.code__panneau[hidden] { display: none; }
.code pre {
  font-family: var(--code);
  font-size: clamp(0.72rem, 0.68rem + 0.16vw, 0.84rem);
  line-height: 1.85;
  color: var(--k-sur-aubergine);
  tab-size: 2;
}
.code .c { color: var(--k-nav-inactif); font-style: italic; }
.code .k { color: var(--k-surtitre-aubergine); }
.code .s { color: var(--k-menthe); }
.code .n { color: var(--k-menthe-survol); }
.code .m { color: var(--k-menthe); font-weight: 700; }

/* --- La ville ------------------------------------------------------------ */

.ville__tete { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: end; }
.ville__tete h2 { grid-column: 1 / span 7; }
.ville__tete p { grid-column: 9 / span 4; color: var(--k-attenue); }
.defile {
  margin-block: clamp(56px, 7vw, 110px);
  overflow: clip;
  border-block: 1px solid var(--trait-clair);
  padding-block: clamp(18px, 2vw, 30px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.defile__piste { display: flex; width: max-content; animation: defiler 90s linear infinite; }
.defile:hover .defile__piste { animation-play-state: paused; }
.defile__groupe { display: flex; align-items: center; }
.defile__groupe span {
  font-weight: 800;
  font-size: clamp(2.2rem, 5.2vw, 5.6rem);
  line-height: 1.15;
  letter-spacing: -0.045em;
  white-space: nowrap;
  padding-inline: clamp(14px, 1.6vw, 26px);
  color: var(--k-encre);
}
.defile__groupe span:nth-child(3n + 2) { color: transparent; -webkit-text-stroke: 1px var(--k-encre); }
.defile__groupe i { width: 12px; height: 12px; border-radius: 50%; background: var(--k-teal); flex: none; }
@keyframes defiler { to { transform: translateX(-50%); } }
.feuille { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.feuille__etape { padding-top: 22px; border-top: 2px solid var(--k-encre); display: grid; gap: 14px; }
.feuille__etape.est-future { border-top: 1px solid var(--trait-clair); padding-top: 23px; color: var(--k-attenue); }
.feuille__etape .t-label { display: flex; align-items: center; gap: 10px; }
.feuille__etape .t-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k-teal); }
.feuille__etape.est-future .t-label::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* --- Appel final --------------------------------------------------------- */

.appel { padding-block: clamp(96px, 12vw, 200px); overflow: clip; }
.appel__titre { grid-column: 1 / span 12; }
.appel__bas { grid-column: 1 / span 12; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px; margin-top: clamp(40px, 5vw, 80px); padding-top: 28px; border-top: 1px solid var(--trait-menthe); }
.appel__bas p { max-width: 44ch; }
.appel__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.appel .bouton--contour { --bord: var(--k-sur-menthe); --survol: var(--k-aubergine); }
.appel .bouton--contour:hover,
.appel .bouton--contour:focus-visible { --texte-bouton: var(--k-sur-aubergine); --bord: var(--k-aubergine); }
.fond-signal :focus-visible { outline-color: var(--k-aubergine); }

/* --- Pied de page -------------------------------------------------------- */

.pied { padding-top: clamp(72px, 8vw, 128px); overflow: clip; }
.pied__haut { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); row-gap: 48px; }
.pied__devise { grid-column: 1 / span 4; display: grid; gap: 18px; align-content: start; }
.pied__devise p { color: var(--k-sur-aubergine-doux); max-width: 30ch; }
.pied__devise p.t-3 { color: var(--k-sur-aubergine); }
.pied__col { grid-column: span 2; display: grid; gap: 12px; align-content: start; }
.pied__col:first-of-type { grid-column: 7 / span 2; }
.pied__col h2 { color: var(--k-surtitre-aubergine); margin-bottom: 6px; }
.pied__col a { color: var(--k-sur-aubergine-doux); width: fit-content; }
.pied__col a:hover { color: var(--k-sur-aubergine); }
.pied__marque {
  grid-column: 1 / span 12;
  margin-top: clamp(64px, 8vw, 120px);
  font-weight: 800;
  font-size: clamp(5rem, 22vw, 26rem);
  line-height: 0.9;
  letter-spacing: -0.07em;
  color: var(--k-sur-aubergine);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: -0.12em;
  user-select: none;
}
.pied__marque .marque__point { color: var(--k-menthe); }
.pied__marque svg { width: 0.62em; height: 0.62em; fill: var(--k-menthe); margin-bottom: 0.16em; flex: none; }
.pied__bas { grid-column: 1 / span 12; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding-block: 26px; border-top: 1px solid var(--trait); color: var(--k-sur-aubergine-doux); position: relative; z-index: 1; background: var(--k-aubergine); }
.pied__bas a:hover { color: var(--k-sur-aubergine); }

/* ==========================================================================
   Pages intérieures — mêmes règles, autre cadence : l'en-tête pose le sujet,
   les blocs se lisent comme un document, un seul geste signature par page.
   ========================================================================== */

.barre--claire:not(.est-defilee) .barre__menu { box-shadow: inset 0 0 0 1px var(--trait-clair); }

/* En-tête de page */
.entete-page {
  position: relative;
  padding-top: calc(var(--barre) + clamp(56px, 9vw, 150px));
  padding-bottom: clamp(48px, 6vw, 96px);
  overflow: clip;
}
/* Anneau décoratif du bandeau héros (charte §6), sur les en-têtes aubergine */
.entete-page.fond-encre::after,
.entete-page.fond-lagune::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: clamp(-220px, -12vw, -90px);
  bottom: clamp(-200px, -11vw, -80px);
  width: clamp(240px, 32vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(30px, 4vw, 70px) solid var(--k-nav-actif-fond);
  pointer-events: none;
}
.entete-page > .cadre { position: relative; z-index: 1; }
.entete-page__surtitre { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: clamp(18px, 2.2vw, 30px); color: var(--k-teal); }
.fond-encre .entete-page__surtitre,
.fond-lagune .entete-page__surtitre { color: var(--k-surtitre-aubergine); }
.entete-page__surtitre span:not(:last-child)::after { content: "·"; margin-left: 22px; color: var(--attenue); }
.entete-page__titre { grid-column: 1 / -1; margin-inline-start: -0.04em; }
.entete-page__bas {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: 28px;
  align-items: end;
  margin-top: clamp(28px, 3.6vw, 56px);
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid var(--trait-clair);
}
.fond-encre .entete-page__bas,
.fond-lagune .entete-page__bas { border-top-color: var(--trait); }
.entete-page__chapo { grid-column: 1 / span 6; max-width: 50ch; }
.fond-encre .entete-page__chapo,
.fond-lagune .entete-page__chapo { color: var(--k-sur-aubergine-doux); }
.entete-page__cote { grid-column: 8 / span 5; justify-self: end; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.entete-page__cote.t-donnee { display: grid; gap: 6px; text-align: right; color: var(--k-attenue); }
.fond-encre .entete-page__cote.t-donnee { color: var(--k-sur-aubergine-doux); }

/* Bloc : repère à gauche, texte à droite — la trame du manifeste */
.bloc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); }
.bloc + .bloc { margin-top: clamp(80px, 10vw, 170px); }
.bloc__repere { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--barre) + 24px); color: var(--k-attenue); }
.fond-encre .bloc__repere,
.fond-lagune .bloc__repere { color: var(--k-surtitre-aubergine); }
.bloc__corps { grid-column: 4 / span 9; display: grid; gap: clamp(24px, 2.6vw, 38px); align-content: start; min-width: 0; }
.bloc__corps > p { max-width: 60ch; }
.bloc__corps > .t-chapo { max-width: 46ch; }
.note { color: var(--k-attenue); font-size: 0.94em; max-width: 62ch; }
.fond-encre .note,
.fond-lagune .note { color: var(--k-sur-aubergine-doux); }

/* Rangs : numéro, titre, texte — une liste qui se lit comme un registre */
.rangs { border-bottom: 1px solid var(--trait-clair); }
.rang {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: 12px;
  padding-block: clamp(22px, 2.6vw, 36px);
  border-top: 1px solid var(--trait-clair);
  align-items: baseline;
}
.fond-encre .rangs, .fond-encre .rang,
.fond-lagune .rangs, .fond-lagune .rang { border-color: var(--trait); }
.rang__num { grid-column: 1 / span 1; color: var(--k-teal); }
.rang__titre { grid-column: 2 / span 4; }
.rang__texte { grid-column: 6 / span 4; color: var(--k-attenue); }
.rang__texte a { text-decoration: underline; text-underline-offset: 3px; }
.fond-encre .rang__num, .fond-lagune .rang__num { color: var(--k-menthe); }
.fond-encre .rang__texte, .fond-lagune .rang__texte { color: var(--k-sur-aubergine-doux); }
.rang__texte strong { color: var(--k-encre); font-weight: 700; }
.fond-encre .rang__texte strong { color: var(--k-sur-aubergine); }

/* Puces d'état (charte §6, r-chip) : libellé + forme + couleur d'état.
   La couleur ne porte jamais seule le statut. */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 10px;
  padding: 5px 9px;
  border-radius: var(--k-r-puce);
  background: var(--k-succes-fond);
  color: var(--k-succes);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  white-space: nowrap;
}
.pastille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pastille--attente { background: var(--k-attente-fond); color: var(--k-attente); }
.pastille--attente::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* Code en ligne, blocs de code, tableaux */
code { font-family: var(--code); font-size: 0.84em; padding: 0.14em 0.42em; border-radius: var(--k-r-puce); background: var(--k-neutre-fond); overflow-wrap: anywhere; }
.fond-encre code, .fond-lagune code { background: var(--k-pastille-aubergine); color: var(--k-sur-aubergine); }
pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.bloc-code { border-radius: var(--k-r-carte); background: var(--k-aubergine); color: var(--k-sur-aubergine); overflow: hidden; box-shadow: var(--k-ombre-carte); }
.bloc-code pre code, .code__fenetre pre code { background: none; color: inherit; }
.bloc-code__titre { display: flex; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--trait); color: var(--k-sur-aubergine-doux); }
.bloc-code .code__panneau,
.bloc-code > pre { padding: clamp(18px, 2vw, 26px); overflow-x: auto; }
.bloc-code pre { font-family: var(--code); font-size: clamp(0.72rem, 0.68rem + 0.14vw, 0.82rem); line-height: 1.8; color: var(--k-sur-aubergine); tab-size: 2; }
.bloc-code .code__onglets { padding: 8px; }
.bloc-code .code__onglets button[aria-selected="true"] { background: var(--k-pastille-aubergine); }
.bloc-code :focus-visible { outline-color: var(--k-menthe); }
.code__fenetre :focus-visible { outline-color: var(--k-menthe); }

.tableau { overflow-x: auto; }
.tableau table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.tableau th {
  text-align: left;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-attenue);
  padding: 0 18px 12px 0;
  border-bottom: 1px solid var(--k-encre);
  white-space: nowrap;
}
.tableau td { padding: 14px 18px 14px 0; border-bottom: 1px solid var(--trait-clair); vertical-align: top; }
.tableau td:first-child code,
.tableau td:first-child { white-space: nowrap; }
.tableau tr > :last-child { padding-right: 0; }

/* Questions : l'ouverture s'anime là où le navigateur sait interpoler « auto » */
.questions { border-bottom: 1px solid var(--trait-clair); }
.question { border-top: 1px solid var(--trait-clair); }
.question summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-block: clamp(20px, 2.4vw, 30px);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--k-r-bouton-aux);
  background-color: var(--k-carte);
  box-shadow: inset 0 0 0 1px var(--k-filet);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-position: center, center;
  background-size: 14px 1.5px, 1.5px 14px;
  background-repeat: no-repeat;
  transition: transform 0.6s var(--expo), background-color 0.4s;
}
.question summary:hover::after { background-color: var(--k-doux); }
.question[open] summary::after { transform: rotate(135deg); }
.question__reponse { padding-bottom: clamp(22px, 2.6vw, 34px); max-width: 64ch; color: var(--k-attenue); display: grid; gap: 12px; }
@supports (interpolate-size: allow-keywords) {
  .questions { interpolate-size: allow-keywords; }
  .question::details-content { block-size: 0; overflow: clip; transition: block-size 0.7s var(--expo), content-visibility 0.7s allow-discrete; }
  .question[open]::details-content { block-size: auto; }
}

/* --- Tarifs : l'anatomie d'un prix --------------------------------------- */

.equation {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(10px, 1.6vw, 26px) clamp(12px, 2vw, 32px);
}
.equation__terme { display: grid; gap: 10px; }
.equation__terme .t-label { color: var(--k-surtitre-aubergine); }
.equation__valeur {
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 7rem);
  line-height: 1;
  letter-spacing: -0.055em;
}
.equation__op { font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 3.6rem); line-height: 1; padding-bottom: 0.12em; color: var(--accent); }
.equation__terme.est-signal .equation__valeur { color: var(--accent); }
.js .equation > * { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--expo), transform 1.1s var(--expo); }
.js .equation.est-vue > * { opacity: 1; transform: none; transition-delay: calc(var(--k, 0) * 80ms); }
.equation { margin-block: clamp(56px, 7vw, 110px) clamp(28px, 3vw, 44px); }
.niveaux { display: grid; gap: clamp(32px, 4vw, 56px); margin-top: clamp(48px, 6vw, 90px); }
.equation__legende { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gouttiere); padding-top: 24px; border-top: 1px solid var(--trait); }
.equation__legende p { color: var(--k-sur-aubergine-doux); font-size: 0.95rem; }
.equation__legende strong { display: block; color: var(--k-sur-aubergine); font-weight: 700; margin-bottom: 4px; }

.curseur { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px 24px; }
.curseur label { color: var(--k-attenue); }
.curseur output { font-variant-numeric: tabular-nums; }
.curseur input { grid-column: 1 / -1; }
input[type="range"] {
  --rempli: 20%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 46px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(var(--k-teal), var(--k-teal)) 0 0 / var(--rempli) 100% no-repeat, var(--trait-clair);
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--trait-clair); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--k-teal); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--k-aubergine);
  box-shadow: 0 0 0 6px var(--k-fond), inset 0 0 0 8px var(--k-menthe);
  transition: transform 0.4s var(--expo);
}
input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--k-aubergine); box-shadow: 0 0 0 6px var(--k-fond), inset 0 0 0 8px var(--k-menthe); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }

.niveaux__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.niveau {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: var(--k-r-offre);
  background: var(--k-carte);
  box-shadow: inset 0 0 0 1px var(--k-filet), var(--k-ombre-carte);
  min-height: clamp(300px, 30vw, 420px);
  --accent: var(--k-teal);
  --niveau-doux: var(--k-attenue);
  --niveau-filet: var(--trait-clair);
}
.niveau:nth-child(2) { background: var(--k-menthe); color: var(--k-sur-menthe); box-shadow: none; --accent: var(--k-sur-menthe); --niveau-doux: var(--k-sur-menthe); --niveau-filet: var(--trait-menthe); }
.niveau:nth-child(3) { background: var(--k-aubergine); color: var(--k-sur-aubergine); box-shadow: var(--k-ombre-flottante); --accent: var(--k-menthe); --niveau-doux: var(--k-sur-aubergine-doux); --niveau-filet: var(--trait); }
.niveau__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.niveau__mult { font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--accent); }
.niveau p { color: var(--niveau-doux); }
.niveau .niveau__delai { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--niveau-filet); color: inherit; }
.niveau__delai .t-label { color: var(--niveau-doux); }
.niveau__delai .t-1 { font-variant-numeric: tabular-nums; }

/* --- Développeurs : le journal d'une course, en direct --------------------- */

.entete-page--partage .entete-page__titre { grid-column: 1 / span 7; }
.entete-page--partage .entete-page__visuel { grid-column: 8 / span 5; grid-row: 2; align-self: end; }
.journal { border-radius: var(--k-r-carte); background: var(--k-nav-actif-fond); box-shadow: inset 0 0 0 1px var(--trait); overflow: hidden; }
.journal__tete { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--trait); color: var(--k-sur-aubergine-doux); }
.journal ol { padding: 10px 0; font-size: clamp(0.72rem, 0.68rem + 0.14vw, 0.82rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; }
.journal li { display: grid; grid-template-columns: 5.4em 1fr auto; gap: 14px; padding: 7px 18px; color: var(--k-sur-aubergine-doux); }
.journal li span:first-child { color: var(--k-nav-inactif); }
.journal li span:last-child { color: var(--k-menthe); }
.journal li.est-cle span:nth-child(2) { color: var(--k-menthe); font-weight: 800; }
.js .journal li { opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--expo), transform 0.6s var(--expo); }
.js .journal li.est-vue { opacity: 1; transform: none; }

.capacites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gouttiere); }
.capacite { display: grid; gap: 12px; align-content: start; padding-block: clamp(24px, 2.6vw, 36px); border-top: 1px solid var(--trait); }
.capacite p { color: var(--k-sur-aubergine-doux); }

/* --- Documentation & pages légales : sommaire collant ---------------------- */

.doc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(96px, 12vw, 200px); }
.doc__sommaire { grid-column: 1 / span 3; position: sticky; top: calc(var(--barre) + 24px); align-self: start; display: grid; gap: 26px; max-height: calc(100svh - var(--barre) - 48px); overflow-y: auto; padding-right: 12px; }
.doc__groupe { display: grid; }
.doc__groupe .t-label { color: var(--k-attenue); margin-bottom: 10px; }
.doc__sommaire a { padding: 5px 0 5px 16px; border-left: 2px solid var(--trait-clair); color: var(--k-attenue); font-size: 0.94rem; transition: color 0.3s, border-color 0.3s; }
.doc__sommaire a:hover { color: var(--k-encre); }
.doc__sommaire a[aria-current="true"] { color: var(--k-encre); font-weight: 700; border-left-color: var(--k-teal); }
.doc__article { grid-column: 4 / span 8; min-width: 0; }
.doc__section { scroll-margin-top: calc(var(--barre) + 24px); }
.doc__section + .doc__section { margin-top: clamp(64px, 7vw, 110px); padding-top: clamp(40px, 4.4vw, 64px); border-top: 1px solid var(--trait-clair); }
.doc__section > * + * { margin-top: 20px; }
.doc__section > h2 + * { margin-top: 26px; }
.doc__section h3 { margin-top: 44px; }
.doc__section p,
.doc__section ul,
.doc__section ol { max-width: 68ch; }
.doc__section ul li,
.doc__section ol.liste li { position: relative; padding-left: 22px; }
.doc__section ul li + li,
.doc__section ol.liste li + li { margin-top: 8px; }
.doc__section ul li::before { content: "→"; position: absolute; left: 0; top: 0.05em; font-weight: 700; font-size: 0.9em; color: var(--k-teal); }
.doc__section ol.liste { counter-reset: etape; }
.doc__section ol.liste li { counter-increment: etape; padding-left: 34px; }
.doc__section ol.liste li::before { content: counter(etape, decimal-leading-zero); position: absolute; left: 0; top: 0.2em; font-weight: 800; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--k-teal); }
.doc__section a:not(.bouton) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc__section .bloc-code,
.doc__section .tableau { max-width: none; }
.encart { padding: 20px 22px; border-radius: var(--k-r-adresse); background: var(--k-doux); box-shadow: inset 3px 0 0 var(--k-teal); }
.encart p + p { margin-top: 8px; }

/* --- Contact : des adresses, pas un formulaire ----------------------------- */

.canaux { border-bottom: 1px solid var(--trait); }
.canal {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: 10px;
  align-items: center;
  padding: clamp(26px, 3.2vw, 48px) clamp(12px, 1.4vw, 22px);
  border-top: 1px solid var(--trait);
  border-radius: 0;
  transition: color 0.5s var(--expo);
}
.canal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--k-menthe);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.7s var(--expo);
}
.canal:hover,
.canal:focus-visible { color: var(--k-sur-menthe); }
.canal:focus-visible { outline-color: var(--k-menthe); outline-offset: -3px; }
.canal:hover::before,
.canal:focus-visible::before { transform: scaleY(1); }
.canal__qui { grid-column: 1 / span 3; display: grid; gap: 6px; }
.canal__qui span:last-child { font-family: var(--k-police); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--k-sur-aubergine-doux); transition: color 0.5s var(--expo); }
.canal:hover .canal__qui span:last-child,
.canal:focus-visible .canal__qui span:last-child { color: var(--k-sur-menthe); }
.canal__adresse { grid-column: 4 / span 8; font-weight: 800; font-size: clamp(1.4rem, 3.4vw, 3.8rem); line-height: 1.1; letter-spacing: -0.045em; overflow-wrap: anywhere; }
.canal__fleche { grid-column: 12; justify-self: end; width: clamp(46px, 4vw, 64px); height: clamp(46px, 4vw, 64px); border-radius: var(--k-r-bouton-aux); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--k-avatar-bord); transition: background-color 0.5s var(--expo), color 0.5s var(--expo); }
.canal__fleche svg { width: 40%; height: 40%; transition: transform 0.6s var(--expo); }
.canal:hover .canal__fleche,
.canal:focus-visible .canal__fleche { background: var(--k-icone-action); color: var(--k-menthe); box-shadow: none; }
.canal:hover .canal__fleche svg,
.canal:focus-visible .canal__fleche svg { transform: translate(2px, -2px); }

/* --- Applications : le message que reçoit le destinataire ------------------ */

.sms { display: grid; gap: 10px; max-width: 420px; }
.sms__bulle { padding: 18px 20px; border-radius: var(--k-r-carte) var(--k-r-carte) var(--k-r-carte) 6px; background: var(--k-carte); color: var(--k-encre); font-size: 1.02rem; line-height: 1.5; box-shadow: var(--k-ombre-flottante); }
.sms__bulle a { color: var(--k-teal); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.sms__meta { color: var(--k-sur-aubergine-doux); padding-left: 8px; }

/* --- Statut : une vérification réelle, depuis votre navigateur ------------- */

.releve { display: grid; gap: clamp(28px, 3vw, 44px); }
.releve__etat { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
/* Le voyant double le titre (« Opérationnel », « Perturbé »…), il ne le remplace pas */
.releve__voyant { position: relative; flex: none; width: clamp(22px, 2.6vw, 36px); height: clamp(22px, 2.6vw, 36px); border-radius: 50%; background: var(--k-neutre); }
.releve__voyant::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulsation 2.4s var(--expo) infinite; }
[data-etat="ok"] .releve__voyant { background: var(--k-succes); }
[data-etat="degrade"] .releve__voyant,
[data-etat="inconnu"] .releve__voyant { background: var(--k-attente); }
[data-etat="panne"] .releve__voyant { background: var(--k-echec); }
[data-etat="verification"] .releve__voyant::after { animation-duration: 0.9s; }
.releve__mesures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); padding-top: 24px; border-top: 1px solid var(--trait-clair); }
.releve__mesures div { display: grid; gap: 8px; }
.releve__mesures dt { color: var(--k-attenue); }
.releve__mesures dd { font-variant-numeric: tabular-nums; }
.releve__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

@media (max-width: 1100px) {
  .entete-page__chapo { grid-column: 1 / span 7; }
  .entete-page__cote { grid-column: 8 / span 5; }
  .entete-page--partage .entete-page__titre { grid-column: 1 / -1; }
  .entete-page--partage .entete-page__visuel { grid-column: 1 / -1; grid-row: auto; margin-top: 40px; }
  .rang__titre { grid-column: 2 / span 8; }
  .rang__texte { grid-column: 2 / span 8; }
  .niveaux__liste { grid-template-columns: 1fr; }
  .niveau { min-height: 0; }
  .capacites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equation__legende { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .entete-page__chapo,
  .entete-page__cote { grid-column: 1 / -1; }
  .entete-page__cote { justify-self: start; justify-content: flex-start; }
  .entete-page__cote.t-donnee { text-align: left; }
  .bloc__repere { grid-column: 1 / -1; position: static; margin-bottom: 26px; }
  .bloc__corps { grid-column: 1 / -1; }
  .rang { grid-template-columns: 1fr; }
  .rang__num,
  .rang__titre,
  .rang__texte { grid-column: 1 / -1; }
  .capacites { grid-template-columns: 1fr; }
  .doc__sommaire {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    gap: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: calc(var(--marge) * -1);
    padding: 0 var(--marge);
    background: var(--k-fond);
    border-bottom: 1px solid var(--trait-clair);
    scrollbar-width: none;
  }
  .doc__sommaire::-webkit-scrollbar { display: none; }
  .doc__groupe { display: flex; }
  .doc__groupe .t-label { display: none; }
  .doc__sommaire a { white-space: nowrap; padding: 16px 14px; border-left: 0; border-bottom: 2px solid transparent; }
  .doc__sommaire a[aria-current="true"] { border-bottom-color: var(--k-teal); }
  .doc__article { grid-column: 1 / -1; margin-top: 40px; }
  .canal__qui,
  .canal__adresse { grid-column: 1 / span 10; }
  .canal__fleche { grid-column: 11 / span 2; grid-row: 1 / span 2; }
  .releve__mesures { grid-template-columns: 1fr; }
  .equation__legende { grid-template-columns: 1fr; }
}

/* Sur téléphone, un tableau se lit ligne par ligne, en fiches */
@media (max-width: 640px) {
  .tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tableau table,
  .tableau tbody,
  .tableau tr,
  .tableau td { display: block; }
  .tableau tbody { border-top: 1px solid var(--k-encre); }
  .tableau tr { padding-block: 14px; border-bottom: 1px solid var(--trait-clair); }
  .tableau td,
  .tableau td:first-child { padding: 2px 0; border: 0; white-space: normal; }
  .tableau td:first-child { margin-bottom: 6px; font-weight: 700; }
  .tableau td:not(:first-child) { color: var(--k-attenue); }
}

/* --- Audit commercial : portes lisibles, simulateur, grille réelle --------- */

[hidden] { display: none !important; }

/* Le titre d'accueil tient sur trois lignes : un cran sous le méga */
.ouverture__titre { font-size: clamp(2.7rem, 8vw, 9.4rem); }

/* Portes : bénéfice et action toujours visibles ; seul le détail se déplie */
.porte__benefice { margin-top: 16px; max-width: 40ch; opacity: 0.88; }
.porte__action { margin-top: 24px; }
.porte__action .bouton { white-space: normal; }

/* Pied de page : quatre colonnes de liens */
.pied__col:first-of-type { grid-column: 5 / span 2; }
.pied__contact { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied__devise p.pied__contact,
.pied__devise p.pied__horaires { max-width: none; }

/* Tableaux sur aubergine */
.fond-encre .tableau th { color: var(--k-surtitre-aubergine); border-bottom-color: var(--k-sur-aubergine-doux); }
.fond-encre .tableau td { border-bottom-color: var(--trait); }

/* Messages d'état (chargement, repli, erreur) : texte + fond, jamais la couleur seule */
.alerte { padding: 14px 18px; border-radius: var(--k-r-adresse); background: var(--k-attente-fond); color: var(--k-attente); font-weight: 600; }
.alerte strong { font-weight: 800; }

/* Simulateur de tarifs */
.simulateur { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); row-gap: 32px; align-items: start; }
.simulateur__formulaire {
  grid-column: 1 / span 7;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px var(--gouttiere);
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: var(--k-r-offre);
  background: var(--k-carte);
  box-shadow: inset 0 0 0 1px var(--k-filet), var(--k-ombre-carte);
}
.champ { display: grid; gap: 8px; align-content: start; min-width: 0; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-weight: 700; font-size: 0.95rem; }
.champ small { color: var(--k-attenue); font-size: 0.85rem; line-height: 1.45; }
.champ input,
.champ select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--k-r-champ);
  background: var(--k-fond);
  color: var(--k-encre);
  box-shadow: inset 0 0 0 1px var(--k-neutre);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.champ input:disabled,
.champ select:disabled { opacity: 0.55; cursor: not-allowed; }
.simulateur__envoi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.simulateur__resultat {
  grid-column: 8 / span 5;
  position: sticky;
  top: calc(var(--barre) + 24px);
  display: grid;
  gap: 18px;
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: var(--k-r-offre);
  background: var(--k-aubergine);
  color: var(--k-sur-aubergine);
  box-shadow: var(--k-ombre-flottante);
}
.simulateur__resultat .t-label { color: var(--k-surtitre-aubergine); }
.simulateur__resultat .note { color: var(--k-sur-aubergine-doux); }
.lignes { display: grid; }
.lignes > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 10px; border-top: 1px solid var(--trait); font-variant-numeric: tabular-nums; }
.lignes dt { color: var(--k-sur-aubergine-doux); }
.lignes dd { font-weight: 700; text-align: right; white-space: nowrap; }
.lignes > div.est-total dt,
.lignes > div.est-total dd { color: var(--k-menthe); font-weight: 800; font-size: 1.15em; }

/* Liste de faits : puce, titre court, texte (pages d'intention) */
.faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gouttiere); }
.fait { display: grid; gap: 10px; align-content: start; padding-block: clamp(22px, 2.6vw, 34px); border-top: 1px solid var(--trait-clair); }
.fait p { color: var(--k-attenue); }
.fond-encre .fait { border-top-color: var(--trait); }
.fond-encre .fait p { color: var(--k-sur-aubergine-doux); }
.zones-liste { display: flex; flex-wrap: wrap; gap: 10px; }
.zones-liste li { padding: 10px 16px; border-radius: var(--k-r-pastille); background: var(--k-carte); box-shadow: inset 0 0 0 1px var(--k-filet); font-weight: 700; }
.zones-liste li span { font-weight: 500; color: var(--k-attenue); }

@media (max-width: 1100px) {
  .simulateur__formulaire,
  .simulateur__resultat { grid-column: 1 / -1; }
  .simulateur__resultat { position: static; }
  /* Les libellés de navigation sont longs (« Paiement à la livraison ») :
     on passe au menu plein écran avant qu'ils ne se chevauchent. */
  .barre__liens,
  .barre__actions .lien,
  .barre__actions .bouton { display: none; }
  .barre__menu { display: grid; }
}
.menu-ouvert .menu__liens a:nth-child(6) { transition-delay: 0.2s; }
.menu-ouvert .menu__liens a:nth-child(7) { transition-delay: 0.24s; }
.menu__liens a { font-size: clamp(1.9rem, 7vw, 3.4rem); }
@media (max-width: 900px) {
  .faits { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .simulateur__formulaire { grid-template-columns: 1fr; }
}

/* --- Apparitions au défilement ------------------------------------------- */
/* Sans JavaScript, tout reste visible : l'état caché n'existe que sous .js */

.js .monte { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--expo), transform 1.2s var(--expo); transition-delay: var(--d, 0s); }
.js .monte.est-vue { opacity: 1; transform: none; }

/* --- Adaptations --------------------------------------------------------- */

@media (max-width: 1100px) {
  .ouverture__chapo { grid-column: 1 / span 7; }
  .ouverture__actions { grid-column: 8 / span 5; justify-content: flex-end; }
  .ouverture__trajet { grid-column: 1 / span 12; justify-self: start; text-align: left; margin-top: 28px; }
  .trajet-direct__ligne { justify-content: flex-start; }
  .garantie__risque { grid-column: 2 / span 11; }
  .garantie__preuve { grid-column: 2 / span 11; margin-top: 16px; }
  .code__texte { grid-column: 1 / span 12; margin-bottom: 48px; }
  .code__fenetre { grid-column: 1 / span 12; }
  .pied__devise { grid-column: 1 / span 12; }
  .pied__col,
  .pied__col:first-of-type { grid-column: span 3; }
}

@media (max-width: 900px) {
  :root { --barre: 64px; }
  .barre__liens,
  .barre__actions .lien { display: none; }
  .barre__menu { display: grid; }
  .barre__actions .bouton { display: none; }
  .ouverture__chapo,
  .ouverture__actions { grid-column: 1 / span 12; }
  .ouverture__actions { justify-content: flex-start; margin-top: 24px; }
  .manifeste__repere { grid-column: 1 / span 12; position: static; margin-bottom: 28px; }
  .manifeste__texte,
  .manifeste__signature { grid-column: 1 / span 12; }
  .course__tete h2,
  .course__tete p { grid-column: 1 / span 12; }
  .course__tete p { margin-top: 20px; }
  .course__scene { grid-column: 1 / span 12; position: sticky; top: var(--barre); z-index: 2; padding-top: 10px; background: var(--k-fond); }
  .course__visuel { position: relative; top: 0; height: 44svh; border-radius: var(--k-r-carte); }
  .course__etapes { grid-column: 1 / span 12; }
  .etape { min-height: 62svh; }
  .garantie__num { grid-column: 1 / span 12; margin-bottom: 10px; }
  .garantie__risque,
  .garantie__preuve { grid-column: 1 / span 12; }
  .portes { flex-direction: column; min-height: 0; }
  .porte { min-height: 64svh; }
  .ville__tete h2,
  .ville__tete p { grid-column: 1 / span 12; }
  .ville__tete p { margin-top: 20px; }
  .feuille { grid-template-columns: 1fr; }
  .pied__col,
  .pied__col:first-of-type { grid-column: span 6; }
  .marque { font-size: 1.6rem; }
  .marque svg { width: 28px; height: 28px; }
}

@media (max-width: 560px) {
  .ouverture__surtitre span:not(:last-child)::after { display: none; }
  .bouton { min-height: 52px; }
  .course__statut { font-size: 1.3rem; }
}

/* Mouvement réduit : rien ne bouge, tout reste lisible */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .js .monte,
  .js .ligne > span { opacity: 1; transform: none; }
  .js .carte #axes path,
  .js .carte #majeures path { stroke-dasharray: none; }
  .defile__piste { animation: none; }
  .manifeste__texte .mot { opacity: 1; }
  .rature { background-size: 100% max(3px, 0.07em); }
}