/* ------------------------------------------------------------------
 * interface.css — habillage du header, de l'invitation a defiler, des
 * cartons de section et du pied de page.
 *
 * Le site est rendu en WebGL plein ecran ; tout ce qui suit flotte
 * par-dessus. `pointer-events` reste desactive partout sauf sur les
 * elements cliquables, pour ne pas voler le defilement a la scene.
 * ------------------------------------------------------------------ */

:root {
  --dune-encre: #f4f6fa;
  --dune-estompe: rgba(244, 246, 250, .58);
  --dune-faible: rgba(244, 246, 250, .28);
  --dune-mono: "NBArchitektStd-Regular", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --dune-trait: rgba(244, 246, 250, .22);
}

.dune-header,
.dune-defiler,
.dune-section-ligne,
.dune-footer { pointer-events: none; }

.dune-header a,
.dune-header button,
.dune-footer a,
.dune-footer button { pointer-events: auto; }

/* ---------------- header ---------------- */

.dune-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 34px;
  transition: opacity .7s ease;
}

.dune-header.estompe { opacity: 0; }

.dune-logo {
  display: block;
  width: 168px;
  flex: 0 0 auto;
  line-height: 0;
  transition: opacity .3s ease;
}

.dune-logo:hover { opacity: .78; }
.dune-logo img { width: 100%; height: auto; display: block; }

.dune-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
}

.dune-nav-item {
  position: relative;
  background: none;
  border: 0;
  text-decoration: none;   /* les entrees sont devenues de vrais liens */
  padding: 4px 0;
  cursor: pointer;
  font-family: var(--dune-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dune-estompe);
  transition: color .3s ease;
}

/* le trait se deploie depuis la gauche, comme un soulignement dessine */
.dune-nav-item::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.dune-nav-item:hover { color: var(--dune-encre); }
.dune-nav-item:hover::after { transform: scaleX(1); }

/* bouton de contact : une pastille sobre, qui se remplit au survol */
.dune-contact {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  text-decoration: none;   /* lien vers la page contact */
  border: 1px solid var(--dune-trait);
  border-radius: 999px;
  background: rgba(10, 12, 18, .35);
  backdrop-filter: blur(6px);
  cursor: pointer;
  font-family: var(--dune-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dune-encre);
  overflow: hidden;
  transition: color .4s ease, border-color .4s ease;
}

.dune-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dune-encre);
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.dune-contact span,
.dune-contact i { position: relative; z-index: 1; font-style: normal; }
.dune-contact i { transition: transform .45s cubic-bezier(.16, 1, .3, 1); }

.dune-contact:hover { color: #07080c; border-color: var(--dune-encre); }
.dune-contact:hover::before { transform: translateY(0); }
.dune-contact:hover i { transform: translateX(4px); }

/* ---------------- invitation a defiler ---------------- */

.dune-defiler {
  position: fixed;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  z-index: 39;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity .9s ease;
}

.dune-defiler.entre { opacity: 1; }
.dune-defiler.parti { opacity: 0; }

.dune-defiler-fr {
  font-family: var(--dune-mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dune-estompe);
}

.dune-defiler-en {
  font-family: var(--dune-mono);
  font-size: 10px;
  letter-spacing: .2em;
  font-style: italic;
  color: var(--dune-faible);
}

/* la piste : un fil, et une tete qui le descend en boucle */
.dune-defiler-piste {
  position: relative;
  width: 1px;
  height: 54px;
  margin-top: 10px;
  background: linear-gradient(to bottom, var(--dune-trait), transparent);
  overflow: hidden;
}

.dune-defiler-tete {
  position: absolute;
  left: -1px;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--dune-encre);
  animation: dune-descente 2.1s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes dune-descente {
  0%   { transform: translateY(-18px); opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(56px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dune-defiler-tete { animation: none; opacity: .8; transform: translateY(18px); }
}

/* ---------------- pied de page ---------------- */

.dune-footer {
  position: fixed;
  inset: 0;
  z-index: 41;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto auto;
  padding: 0 42px 34px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s;
}

.dune-footer.visible { opacity: 1; visibility: visible; }

/* le voile : sans lui, le wordmark se superpose a la 3D et les deux
   deviennent illisibles. Il eteint la scene sans la couper net. */
.dune-footer-voile {
  /* fixe et non absolu : la marge interieure du pied de page laissait
     sinon une bande claire sur les quatre bords, et on voyait le cadre */
  position: fixed;
  inset: 0;
  grid-area: 1 / 1 / -1 / -1;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(6, 7, 11, .94) 0%, #06070b 58%, #06070b 100%);
}

.dune-footer-mot {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: min(58vw, 820px);
  line-height: 0;
}

.dune-footer-mot img { width: 100%; height: auto; display: block; }

.dune-footer-col {
  position: relative;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.dune-footer-droite { align-items: flex-end; }

.dune-footer-lien {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--dune-mono);
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: .06em;
  line-height: 1.35;
  color: var(--dune-estompe);
  transition: color .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.dune-footer-lien:hover { transform: translateX(4px); }
.dune-footer-droite .dune-footer-lien:hover { transform: translateX(-4px); }

.dune-footer-lien:hover { color: var(--dune-encre); }

.dune-footer-bas {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 34px;
  text-align: center;
  font-family: var(--dune-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--dune-faible);
}

/* ---------------- lisere sombre, sur tout le site ----------------
   Le pied de page avait un voile qui cadrait l'image ; on l'etend a
   toutes les sections. Il assombrit les bords, garde le centre net, et
   donne au site une tenue constante d'un ecran a l'autre. */

.dune-lisere {
  position: fixed;
  inset: 0;
  z-index: 21;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(4, 5, 8, .55) 78%, rgba(4, 5, 8, .88) 100%);
}

/* ---------------- fond incurve (voir fond.js) ---------------- */

.dune-fond {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ---------------- petits ecrans ---------------- */

@media (max-width: 860px) {
  .dune-header { padding: 18px 20px; }
  .dune-logo { width: 118px; }
  .dune-nav { gap: 22px; }
  .dune-nav-item { font-size: 10px; letter-spacing: .14em; }
  .dune-contact { padding: 9px 15px; font-size: 10px; letter-spacing: .12em; gap: 8px; }
  .dune-footer { padding: 0 20px 24px; }
  .dune-footer-mot { width: 84vw; }
  .dune-defiler { bottom: 30px; }
}

/* ---------------- accroche du premier ecran ---------------- */

.dune-accroche {
  position: fixed;
  left: 50%;
  top: 71%;
  transform: translate(-50%, -50%) translateY(14px);
  z-index: 37;
  width: min(90vw, 700px);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.dune-accroche.entre { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
.dune-accroche.parti { opacity: 0; transform: translate(-50%, -50%) translateY(-10px); }

.dune-accroche-fr {
  margin: 0;
  font-family: var(--dune-mono);
  font-size: clamp(17px, 2.1vw, 27px);
  letter-spacing: .01em;
  line-height: 1.35;
  color: var(--dune-encre);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .9);
}

.dune-accroche-en {
  margin: 8px 0 0;
  font-family: var(--dune-mono);
  font-size: clamp(11px, 1.15vw, 14px);
  letter-spacing: .06em;
  font-style: italic;
  color: var(--dune-faible);
}

@media (max-width: 860px) {
  .dune-accroche { top: 72%; }
}

/* ---------------- indicateur lateral de section ---------------- */

.dune-reperes {
  position: fixed;
  left: 34px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 38;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dune-repere {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--dune-mono);
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--dune-faible);
  transition: color .45s ease;
}

/* le trait s'allonge sur la section courante : c'est le seul mouvement,
   et il suffit a dire ou on en est */
.dune-repere-trait {
  display: block;
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width .55s cubic-bezier(.16, 1, .3, 1), background .45s ease;
}

.dune-repere-titre { transition: opacity .45s ease; opacity: .85; }

.dune-repere:hover { color: var(--dune-estompe); }

.dune-repere.actif { color: var(--dune-encre); }
.dune-repere.actif .dune-repere-trait { width: 30px; }
.dune-repere.actif .dune-repere-titre { opacity: 1; }

/* ---------------- ligne de section ---------------- */

.dune-section-ligne {
  position: fixed;
  left: 34px;
  bottom: 44px;
  z-index: 38;
  margin: 0;
  max-width: min(38vw, 420px);
  font-family: var(--dune-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--dune-estompe);
  text-shadow: 0 1px 22px rgba(0, 0, 0, .95);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
}

.dune-section-ligne.visible { opacity: 1; transform: translateY(0); }

/* ---------------- la scene s'eteint au pied de page ---------------- */

canvas.dune-eteint {
  opacity: 0;
  transition: opacity 1.1s ease;
}

canvas { transition: opacity 1.1s ease; }

/* ---------------- liseré sombre, sur tout le site ---------------- */

.dune-vignette {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 42%, rgba(4, 5, 8, .55) 78%, rgba(4, 5, 8, .88) 100%);
}

/* ---------------- pied de page : liens plus grands ---------------- */

.dune-footer-lien {
  font-size: 17px;
  letter-spacing: .06em;
}

.dune-footer-col { gap: 14px; }

.dune-footer-bas { font-size: 11px; letter-spacing: .12em; }

@media (max-width: 860px) {
  .dune-reperes { left: 16px; gap: 13px; }
  .dune-repere { font-size: 9px; letter-spacing: .16em; }
  .dune-section-ligne { left: 16px; bottom: 26px; max-width: 62vw; font-size: 11px; }
  .dune-footer-lien { font-size: 14px; }
}

/* ---------------- la lumiere sur les textes ----------------
   Un degrade ancre a la fenetre, decoupe sur les lettres. Il suit le
   curseur (deux variables CSS mises a jour par interface.js) et donne
   aux textes le meme eclat que le chrome de la scene. Aucune animation
   JavaScript : le navigateur compose, c'est tout. */

.dune-nav-item,
.dune-footer-lien,
.dune-accroche-fr,
.dune-repere-titre,
.dune-section-ligne {
  background-image: radial-gradient(
    circle 300px at var(--dune-x, 50vw) var(--dune-y, 50vh),
    #ffffff 0%,
    rgba(255, 255, 255, .82) 18%,
    var(--dune-base, rgba(244, 246, 250, .58)) 58%
  );
  background-attachment: fixed;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: none;
}

.dune-accroche-fr { --dune-base: var(--dune-encre); }
.dune-footer-lien { --dune-base: rgba(244, 246, 250, .62); }
.dune-repere-titre { --dune-base: rgba(244, 246, 250, .30); }
.dune-section-ligne { --dune-base: rgba(244, 246, 250, .52); }
.dune-repere.actif .dune-repere-titre { --dune-base: var(--dune-encre); }

/* le survol rapproche encore la lumiere */
.dune-nav-item:hover,
.dune-footer-lien:hover { --dune-base: var(--dune-encre); }

/* le bouton de contact garde son remplissage : le decoupage sur les
   lettres entrerait en conflit avec le fond qui monte au survol */
.dune-contact span { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .dune-nav-item,
  .dune-footer-lien,
  .dune-accroche-fr,
  .dune-repere-titre,
  .dune-section-ligne {
    background-image: none;
    color: var(--dune-base, var(--dune-estompe));
  }
}

/* ================================================================
   SECTION STUDIO
   ================================================================
   Le propos a gauche, le schema a droite — et le schema pese autant
   que le texte. La premiere version le reduisait a un timbre-poste
   dans un coin : la moitie de l'ecran restait vide et rien n'etait
   lisible.

   Un mot par ligne est une faute : la colonne de texte a donc une
   mesure confortable (jusqu'a 22 mots par ligne d'ecran large) et le
   corps descend quand la place manque.
   ================================================================ */

:root {
  --dune-froid: #7fb0ff;
  --dune-chaud: #f0b98a;
  --dune-fig: rgba(244, 246, 250, .40);
  --dune-fig-faible: rgba(244, 246, 250, .18);
}

.dune-studio {
  position: fixed;
  inset: 0;
  z-index: 37;
  pointer-events: none;
  display: grid;
  place-items: center;
  /* la marge gauche doit passer derriere l'indicateur lateral, qui
     occupe les 120 premiers pixels — sinon le texte lui rentre dedans */
  padding: clamp(80px, 9vh, 120px) clamp(28px, 4vw, 76px)
           clamp(70px, 8vh, 110px) clamp(150px, 11vw, 230px);
}

.dune-plan {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 2.6vw, 44px);
  width: 100%;
  max-width: 1620px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

.dune-plan.visible { opacity: 1; transform: translateY(0); }

.dune-plan-propos { max-width: 42ch; }

.dune-plan-etiquette {
  display: block;
  margin-bottom: clamp(16px, 2vw, 26px);
  font-family: var(--dune-mono);
  font-size: clamp(11px, .88vw, 14px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, .36);
}

.dune-plan-etiquette::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  margin-right: 14px;
  vertical-align: middle;
  background: rgba(244, 246, 250, .3);
}

.dune-plan-titre {
  margin: 0;
  font-family: var(--dune-mono);
  font-weight: 400;
  font-size: clamp(24px, 2.35vw, 43px);
  line-height: 1.26;
  letter-spacing: -.005em;
  text-wrap: balance;
  color: var(--dune-encre);
  text-shadow: 0 2px 44px rgba(0, 0, 0, .92);
}

.dune-plan-accent { font-style: normal; color: rgba(244, 246, 250, .40); }

.dune-plan-chapo {
  margin: clamp(18px, 2vw, 28px) 0 0;
  font-family: var(--dune-mono);
  font-size: clamp(14px, 1.18vw, 19px);
  line-height: 1.62;
  color: rgba(244, 246, 250, .60);
  max-width: 40ch;
}

.dune-plan-en {
  margin: clamp(14px, 1.5vw, 20px) 0 0;
  font-family: var(--dune-mono);
  font-size: clamp(12px, .95vw, 15px);
  line-height: 1.66;
  letter-spacing: .04em;
  font-style: italic;
  color: rgba(244, 246, 250, .26);
  max-width: 44ch;
}

/* --- le mecanisme : trois temps --- */

.dune-temps { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 14px); }

.dune-temps-ligne {
  margin: 0;
  font-family: var(--dune-mono);
  font-size: clamp(22px, 2.15vw, 39px);
  line-height: 1.28;
  text-wrap: balance;
  color: var(--dune-encre);
  text-shadow: 0 2px 40px rgba(0, 0, 0, .92);
}
.dune-temps-ligne:nth-child(2) { color: rgba(244, 246, 250, .72); }
.dune-temps-ligne:nth-child(3) { color: rgba(244, 246, 250, .48); }

/* ---------------- le schema ---------------- */

.dune-plan-figure {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: min(52vw, 720px);
  /* le cadre : un trait, rien de plus. Pas de fond, pas d'ombre — le
     schema est pose sur la scene, pas dans une boite. Seuls le filet et
     les deux reperes de coin le delimitent. */
  padding: clamp(20px, 2.2vw, 34px);
  border: 1px solid rgba(244, 246, 250, .18);
  border-radius: 10px;
  background: none;
  opacity: 0;
  transform: scale(.97);
  transition: opacity .85s ease .14s, transform 1s cubic-bezier(.16, 1, .3, 1) .14s;
}

/* un petit repere dans le coin, comme une planche technique */
.dune-plan-figure::before,
.dune-plan-figure::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border: 1px solid rgba(244, 246, 250, .28);
  pointer-events: none;
}
.dune-plan-figure::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.dune-plan-figure::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.dune-plan.visible .dune-plan-figure { opacity: 1; transform: scale(1); }

.dune-fig { width: 100%; height: auto; overflow: visible; display: block; }

.dune-fig text {
  font-family: var(--dune-mono);
  font-size: 13px;
  letter-spacing: .14em;
  fill: var(--dune-fig);
  text-anchor: middle;
}

/* animations partagees */
@keyframes dune-tracer { to { stroke-dashoffset: 0; } }
@keyframes dune-apparait { to { opacity: 1; } }
@keyframes dune-monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---- 01 territoire ---- */

.fig-territoire .trace {
  fill: none; stroke: var(--dune-froid); stroke-width: 1.6; stroke-opacity: .5;
  stroke-dasharray: 620; stroke-dashoffset: 620;
}
.dune-plan.visible .fig-territoire .trace { animation: dune-tracer 1.7s cubic-bezier(.16,1,.3,1) .2s forwards; }

.fig-territoire .ville circle { fill: var(--dune-froid); opacity: 0; filter: drop-shadow(0 0 8px rgba(127,176,255,.75)); }
.fig-territoire .ville .capitale { fill: #ffffff; filter: drop-shadow(0 0 12px rgba(255,255,255,.7)); }
.fig-territoire .ville text { opacity: 0; font-size: 12px; letter-spacing: .2em; }
.dune-plan.visible .fig-territoire .ville circle,
.dune-plan.visible .fig-territoire .ville text {
  animation: dune-apparait .55s ease forwards; animation-delay: calc(.55s + var(--i) * .1s);
}

.fig-territoire .nombre { font-size: 40px; letter-spacing: .01em; fill: var(--dune-encre); text-anchor: start; }
.fig-territoire .quoi { font-size: 12px; letter-spacing: .22em; fill: rgba(244,246,250,.5); text-anchor: start; }
.fig-territoire .source { font-size: 10.5px; letter-spacing: .18em; fill: rgba(244,246,250,.26); text-anchor: start; }
.fig-territoire .soulignement.froid { fill: var(--dune-froid); }
.fig-territoire .soulignement.chaud { fill: var(--dune-chaud); }
.fig-territoire .bloc { opacity: 0; }
.dune-plan.visible .fig-territoire .bloc {
  animation: dune-monte .7s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(1.25s + var(--i) * .16s);
}
.dune-plan.visible .fig-territoire .source { animation: dune-apparait .6s ease 1.7s forwards; opacity: 0; }

/* ---- 02 valeur percue ---- */

.fig-valeur .cadre { fill: rgba(244,246,250,.03); stroke: rgba(244,246,250,.16); }
.fig-valeur .barre-titre { fill: rgba(244,246,250,.07); }
.fig-valeur .facade circle { fill: rgba(244,246,250,.24); }
.fig-valeur .lignes rect { fill: rgba(244,246,250,.20); }
.fig-valeur .etiq { font-size: 11.5px; letter-spacing: .22em; fill: rgba(244,246,250,.4); }
.fig-valeur .etiq.fort { fill: var(--dune-encre); }

.fig-valeur .apres .cadre { stroke: rgba(244,246,250,.42); fill: rgba(244,246,250,.055); }
.fig-valeur .apres .lignes rect { fill: rgba(244,246,250,.34); }
.fig-valeur .apres .titre { fill: #ffffff; }
.fig-valeur .apres .bouton { fill: var(--dune-froid); }

.fig-valeur .avant { opacity: 0; }
.fig-valeur .apres { opacity: 0; }
.dune-plan.visible .fig-valeur .avant { animation: dune-monte .7s cubic-bezier(.16,1,.3,1) .2s forwards; }
.dune-plan.visible .fig-valeur .apres { animation: dune-monte .7s cubic-bezier(.16,1,.3,1) .5s forwards; }

.fig-valeur .entete { font-size: 11px; letter-spacing: .26em; fill: rgba(244,246,250,.34); }
.fig-valeur .rail { fill: rgba(244,246,250,.09); }
.fig-valeur .remplissage { transform-box: fill-box; transform-origin: left; transform: scaleX(0); }
.fig-valeur .remplissage.basse { fill: rgba(244,246,250,.3); }
.fig-valeur .remplissage.haute { fill: var(--dune-chaud); }
.dune-plan.visible .fig-valeur .remplissage.basse { animation: dune-jauge-basse 1.1s cubic-bezier(.16,1,.3,1) .9s forwards; }
.dune-plan.visible .fig-valeur .remplissage.haute { animation: dune-jauge-haute 1.2s cubic-bezier(.16,1,.3,1) 1.15s forwards; }
@keyframes dune-jauge-basse { to { transform: scaleX(.42); } }
@keyframes dune-jauge-haute { to { transform: scaleX(1); } }

.fig-valeur .valeur-texte { font-size: 11px; letter-spacing: .2em; fill: rgba(244,246,250,.42); }
.fig-valeur .valeur-texte.fort { fill: var(--dune-chaud); }

.fig-valeur .fleche, .fig-valeur .pointe { stroke: rgba(244,246,250,.4); stroke-width: 1.4; fill: none; }
.fig-valeur .gain { font-size: 16px; letter-spacing: .2em; fill: rgba(244,246,250,.5); }
.fig-valeur .gain.fort { fill: var(--dune-encre); }
.fig-valeur .conclusion { font-size: 12px; letter-spacing: .28em; fill: var(--dune-chaud); }
.fig-valeur .ecart { opacity: 0; }
.dune-plan.visible .fig-valeur .ecart { animation: dune-monte .8s cubic-bezier(.16,1,.3,1) 1.6s forwards; }

/* ---- 03 chaine ---- */

.fig-chaine .rail { stroke: rgba(244,246,250,.12); stroke-width: 1.5; }
.fig-chaine .rail-actif {
  stroke: var(--dune-froid); stroke-width: 1.8; stroke-opacity: .45;
  stroke-dasharray: 460; stroke-dashoffset: 460;
}
.dune-plan.visible .fig-chaine .rail-actif { animation: dune-tracer 1.6s cubic-bezier(.16,1,.3,1) .2s forwards; }

.fig-chaine .station { opacity: 0; }
.dune-plan.visible .fig-chaine .station {
  animation: dune-monte .6s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(.35s + var(--i) * .28s);
}
.fig-chaine .disque { fill: rgba(10,12,18,.9); stroke: rgba(244,246,250,.28); stroke-width: 1.2; }
.fig-chaine .final .disque { stroke: var(--dune-chaud); }
.fig-chaine .onde { fill: none; stroke: var(--dune-froid); stroke-width: 1.2; opacity: 0; }
.dune-plan.visible .fig-chaine .onde {
  animation: dune-onde 3s ease-out infinite; animation-delay: calc(.9s + var(--i) * .28s);
}
@keyframes dune-onde {
  0%   { opacity: .5; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.7); }
  100% { opacity: 0;  transform: scale(1.7); }
}
.fig-chaine .onde { transform-box: fill-box; transform-origin: center; }

.fig-chaine .glyphe { fill: rgba(244,246,250,.72); }
.fig-chaine .glyphe-trait { fill: none; stroke: rgba(244,246,250,.72); stroke-width: 2; stroke-linecap: round; }
.fig-chaine .final .glyphe-trait { stroke: var(--dune-chaud); }
.fig-chaine .epais { stroke-width: 2.6; stroke-linejoin: round; }

.fig-chaine .num { font-size: 11px; letter-spacing: .3em; fill: rgba(244,246,250,.3); }
.fig-chaine .titre { font-size: 13px; letter-spacing: .16em; fill: rgba(244,246,250,.82); }
.fig-chaine .signal { fill: #ffffff; filter: drop-shadow(0 0 10px rgba(127,176,255,.95)); }

.fig-chaine .resultat { opacity: 0; }
.dune-plan.visible .fig-chaine .resultat { animation: dune-monte .8s cubic-bezier(.16,1,.3,1) 1.3s forwards; }
.fig-chaine .carte { fill: rgba(244,246,250,.045); stroke: rgba(244,246,250,.2); }
.fig-chaine .ligne-forte { fill: #ffffff; }
.fig-chaine .ligne { fill: rgba(244,246,250,.28); }
.fig-chaine .pastille { fill: var(--dune-froid); opacity: .8; }
.fig-chaine .chute { font-size: 11.5px; letter-spacing: .24em; fill: rgba(244,246,250,.42); }

/* ---- 04 parcours ---- */

.fig-parcours .rail { stroke: rgba(244,246,250,.12); stroke-width: 1.5; }
.fig-parcours .rail-actif {
  stroke: var(--dune-froid); stroke-width: 2; stroke-opacity: .55;
  stroke-dasharray: 320; stroke-dashoffset: 320;
}
.dune-plan.visible .fig-parcours .rail-actif { animation: dune-tracer 1.7s cubic-bezier(.16,1,.3,1) .25s forwards; }

.fig-parcours .etape { opacity: 0; }
.dune-plan.visible .fig-parcours .etape {
  animation: dune-monte .6s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(.45s + var(--i) * .2s);
}
.fig-parcours .etape circle { fill: var(--dune-froid); }
.fig-parcours .final circle { fill: var(--dune-chaud); }
.fig-parcours .titre { text-anchor: start; font-size: 17px; letter-spacing: .16em; fill: var(--dune-encre); }
.fig-parcours .sous { text-anchor: start; font-size: 12px; letter-spacing: .08em; fill: rgba(244,246,250,.42); }

.fig-parcours .delai { opacity: 0; }
.dune-plan.visible .fig-parcours .delai { animation: dune-monte .8s cubic-bezier(.16,1,.3,1) 1.35s forwards; }
.fig-parcours .carte { fill: rgba(244,246,250,.05); stroke: rgba(244,246,250,.2); }
.fig-parcours .grand { font-size: 32px; fill: var(--dune-encre); text-anchor: start; }
.fig-parcours .petit { font-size: 11px; letter-spacing: .24em; fill: rgba(244,246,250,.5); text-anchor: start; }
.fig-parcours .faible { fill: rgba(244,246,250,.28); letter-spacing: .18em; }

/* ---------------- mobile ---------------- */

@media (max-width: 980px) {
  .dune-studio { padding: 76px 20px 84px; }
  .dune-plan {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 24px;
    align-content: center;
  }
  .dune-plan-figure { grid-row: 1; max-width: min(88vw, 460px); }
  .dune-plan-propos { grid-row: 2; max-width: none; }
  .dune-plan-titre { font-size: clamp(19px, 5.4vw, 27px); }
  .dune-temps-ligne { font-size: clamp(17px, 4.8vw, 24px); }
  .dune-plan-chapo { font-size: 13px; max-width: none; }
  .dune-plan-en { font-size: 11px; }
  .dune-fig text { font-size: 15px; }
  .fig-territoire .nombre { font-size: 44px; }
  .fig-parcours .titre { font-size: 19px; }
  .fig-parcours .sous { font-size: 13px; }
}

@media (max-height: 560px) and (max-width: 980px) {
  .dune-plan-figure { display: none; }
  .dune-plan { grid-template-rows: auto; }
  .dune-plan-propos { grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dune-plan { transition: opacity .4s ease; transform: none; }
  .dune-fig * { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; transform: none !important; }
  .dune-fig .signal { display: none; }
  .fig-valeur .remplissage.basse { transform: scaleX(.42); }
  .fig-valeur .remplissage.haute { transform: scaleX(1); }
}

/* ---------------- header et reperes sur telephone ----------------
   A 390 px de large, le menu central passait sous le bouton de contact,
   et l'indicateur lateral se posait sur le texte des sections. Sur
   mobile : le header ne garde que la marque et le bouton, et
   l'indicateur devient une rangee de traits en bas d'ecran. */

@media (max-width: 980px) {
  .dune-nav { display: none; }
  .dune-header { padding: 14px 16px; }
  .dune-logo { width: 104px; }
  .dune-contact { padding: 8px 13px; font-size: 9.5px; letter-spacing: .1em; gap: 7px; }

  .dune-reperes {
    left: 50%; top: auto; bottom: 16px;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 10px;
  }
  .dune-repere { gap: 0; padding: 10px 4px; }
  .dune-repere-titre {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);   /* reste lu par les lecteurs d'ecran */
  }
  .dune-repere-trait { width: 18px; }
  .dune-repere.actif .dune-repere-trait { width: 30px; }

  .dune-section-ligne { bottom: 52px; }
}