/* ============================================================
   Space Sparks · maquette de site vitrine
   Registre marque. Style typographique suisse sur ciel profond.
   ============================================================ */

:root{
  /* Ciel */
  --ink:        oklch(0.135 0.022 268);
  --ink-2:      oklch(0.185 0.026 268);
  --ink-3:      oklch(0.245 0.028 268);
  /* Lumiere */
  --ivory:      oklch(0.965 0.010 85);
  --ivory-2:    oklch(0.915 0.014 85);
  --muted:      oklch(0.735 0.018 268);
  --faint:      oklch(0.545 0.022 268);
  /* Etincelle */
  --spark:      oklch(0.835 0.155 78);
  --spark-hot:  oklch(0.905 0.115 92);
  --spark-deep: oklch(0.585 0.135 62);
  --spark-solid: var(--spark);
  --on-spark:   oklch(0.19 0.03 70);
  /* Le canevas ne lit pas les couleurs CSS : on lui passe les composantes. */
  --canvas-spark: 255, 214, 140;
  --canvas-glow:  255, 226, 175;
  --canvas-trail: 255, 205, 130;
  --canvas-head:  255, 236, 200;

  --error:      oklch(0.685 0.180 25);
  --valid:      oklch(0.760 0.140 158);

  --line:       color-mix(in oklch, var(--ivory) 13%, transparent);
  --line-soft:  color-mix(in oklch, var(--ivory) 7%, transparent);

  /* Deux familles, deux rôles. Familjen Grotesk porte tout ce qui est
     titre : ses lettres ont un dessin nordique reconnaissable, là où
     Archivo reste neutre. Archivo conserve le texte courant, les libellés
     et les grands chiffres, où son axe de largeur est irremplaçable. */
  --font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-titre: 'Familjen Grotesk', 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --gut: clamp(20px, 5vw, 72px);
  --max: 1320px;

  color-scheme: dark;
}

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

/* Plusieurs blocs du formulaire declarent display, qui l emporterait sur
   l attribut hidden : on retablit la priorite attendue. */
[hidden]{ display: none !important; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Fond etoile ---------- */
#sky{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.aura{
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
}
.aura--a{
  top: -18vh; right: -12vw;
  width: 62vw; height: 62vw;
  background: radial-gradient(circle, color-mix(in oklch, var(--spark) 16%, transparent), transparent 66%);
  opacity: .55;
}
.aura--b{
  top: 118vh; left: -22vw;
  width: 70vw; height: 70vw;
  background: radial-gradient(circle, oklch(0.5 0.13 268 / .3), transparent 68%);
  opacity: .7;
}

/* ---------- Trames et rythme ---------- */
.shell{
  position: relative;
  z-index: 1;
}
.wrap{
  width: min(100% - var(--gut) * 2, var(--max));
  margin-inline: auto;
}
.rule{
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ---------- Typographie ---------- */
.display{
  font-family: var(--font-titre);
  font-weight: 700;
  letter-spacing: -0.036em;
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
}
.h-chapter{
  font-family: var(--font-titre);
  font-size: clamp(2.1rem, 5.2vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}
.h-sub{
  font-family: var(--font-titre);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0;
}
.lead{
  font-size: clamp(1.12rem, 1.65vw, 1.5rem);
  line-height: 1.52;
  color: var(--ivory);
  max-width: 30ch;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.012em;
}
.body{
  max-width: 62ch;
  color: var(--muted);
  margin: 0;
}
.label{
  font-size: 0.7rem;
  font-weight: 600;
  font-stretch: 86%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}
.label--spark{ color: var(--spark); }

.numeral{
  font-size: clamp(3.4rem, 9vw, 7.2rem);
  font-weight: 800;
  font-stretch: 74%;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklch, var(--ivory) 26%, transparent);
  display: block;
}

/* ---------- Barre de navigation ---------- */
.nav{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  transition: transform .55s var(--ease), background-color .4s linear, border-color .4s linear;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0px);
}
.nav.is-stuck{
  background: color-mix(in oklch, var(--ink) 82%, transparent);
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(14px);
}
.nav.is-hidden{ transform: translateY(-102%); }
.nav__in{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}
.mark{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ivory);
}
.mark__glyph{
  width: 15px; height: 15px;
  flex: none;
  color: var(--spark);
}
.mark__text{
  font-family: var(--font-titre);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.nav__links{
  display: flex;
  gap: clamp(14px, 2vw, 30px);
  align-items: center;
}
.nav__link{
  font-size: 0.78rem;
  font-weight: 500;
  font-stretch: 92%;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 0;
  position: relative;
  transition: color .28s var(--ease);
}
.nav__link::after{
  content:'';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--spark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav__link:hover{ color: var(--ivory); }
.nav__link:hover::after,
.nav__link.is-active::after{ transform: scaleX(1); }
.nav__link.is-active{ color: var(--ivory); }

.progress{
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 100%;
  transform: scaleX(var(--sp, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--spark-deep), var(--spark));
}

/* ---------- Boutons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 0.82rem;
  font-weight: 600;
  font-stretch: 96%;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ivory);
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn::before{
  content:'';
  position: absolute;
  inset: 0;
  background: var(--spark-solid);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.btn > *{ position: relative; z-index: 1; }
.btn:hover{ color: var(--on-spark); border-color: var(--spark-solid); }
.btn:hover::before{ transform: translateY(0); }
.btn__dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--spark);
  transition: background-color .35s var(--ease);
}
.btn:hover .btn__dot{ background: var(--on-spark); }
.btn--lg{
  padding: 16px 28px;
  font-size: 0.95rem;
}
.btn--solid{
  background: var(--spark-solid);
  border-color: var(--spark-solid);
  color: var(--on-spark);
}
.btn--solid::before{ background: var(--ivory); }
.btn--solid .btn__dot{ background: var(--on-spark); }
.btn--solid:hover{ color: var(--ink); }
.btn--solid:hover .btn__dot{ background: var(--spark-solid); }
.btn--dark{
  border-color: color-mix(in oklch, var(--ink) 22%, transparent);
  color: var(--ink);
}
.btn--dark::before{ background: var(--ink); }
.btn--dark:hover{ color: var(--ivory); border-color: var(--ink); }
.btn--dark .btn__dot{ background: var(--spark-deep); }
.btn--dark:hover .btn__dot{ background: var(--spark); }

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

/* ---------- Apparitions ---------- */
.rv{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .95s var(--ease), transform 1.15s var(--ease);
  transition-delay: calc(var(--d, 0) * 85ms);
}
.rv.is-in{ opacity: 1; transform: none; }

.rv-line{
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease);
  transition-delay: calc(var(--d, 0) * 85ms);
}
.rv-line.is-in{ transform: scaleX(1); }

/* ---------- Ouverture ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 120px 44px;
}
.hero__grid{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
}
.hero__grid span{
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line-soft);
  transform: scaleY(0);
  transform-origin: top;
  animation: gridIn 1.6s var(--ease) forwards;
}
@keyframes gridIn{ to{ transform: scaleY(1); } }

.hero__top{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 26px;
  flex-wrap: wrap;
}
.hero__title{
  font-size: clamp(2.5rem, 7vw, 6.4rem);
  margin-block: clamp(18px, 3.4vw, 40px) clamp(24px, 3vw, 40px);
}
.hero__title .w{
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) rotate(1.4deg);
  animation: wordIn 1.25s var(--ease) forwards;
  animation-delay: calc(var(--d) * 72ms + 220ms);
}
/* Une ligne par temps de la phrase : qui, quoi, comment. */
.hero__title > span{ display: block; }
.hero__title .accent{ color: var(--spark); }
@keyframes wordIn{ to{ opacity: 1; transform: none; } }

.hero__foot{
  padding-top: 30px;
}
/* L'accroche porte seule le bas de l'ouverture : elle peut donc courir
   plus large, jusqu'a la limite de lisibilite d'une ligne. */
.hero__lead{
  max-width: 56ch;
  font-size: clamp(1.18rem, 1.95vw, 1.72rem);
  line-height: 1.46;
}
.hero__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: clamp(26px, 3vw, 38px);
}

/* ---------- Chapitres ---------- */
.chapter{
  position: relative;
  padding-block: clamp(90px, 13vh, 168px);
}
.chapter__head{
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.chapter__id{ display: flex; flex-direction: column; gap: 16px; }

/* Revelation du texte au defilement */
.wr{ max-width: 22ch; }
.wr .w{
  opacity: .17;
  transition: opacity .35s linear;
  display: inline-block;
}

/* ---------- 01 · L'etincelle ---------- */
.spark-body{
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 60px);
  margin-top: clamp(44px, 7vw, 96px);
}
.spark-body__text{ display: grid; gap: 22px; }
.facts{
  list-style: none;
  margin: clamp(36px, 5vw, 60px) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 720px;
}
.facts li{
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 17px 0;
  border-top: 1px solid var(--line-soft);
}
.facts li:last-child{ border-bottom: 1px solid var(--line-soft); }
.facts span:first-child{
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 86%;
  letter-spacing: 0.14em;
  color: var(--spark);
}
.facts span:nth-child(2){ color: var(--ivory); font-weight: 500; }
.facts span:last-child{ color: var(--faint); font-size: 0.88rem; text-align: right; }

/* ---------- 02 · La trajectoire ---------- */
.traj__stage{ height: 460vh; position: relative; }
.traj__sticky{
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.traj__cols{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  width: 100%;
}
.traj__steps{ position: relative; }
.traj__steps{ min-height: 412px; }
.step{
  position: absolute;
  inset: 0 0 auto 0;
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s var(--ease), transform .75s var(--ease), visibility .55s;
  display: grid;
  gap: 16px;
  align-content: start;
}
.step.is-on{
  opacity: 1;
  visibility: visible;
  transform: none;
}
.step.is-past{ transform: translateY(-30px); }
.step__k{
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.step__k b{
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 86%;
  letter-spacing: 0.2em;
  color: var(--spark);
}
.step__k i{
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--faint);
  text-transform: uppercase;
}
.step p{ color: var(--muted); max-width: 44ch; margin: 0; }
.step ul{
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.step ul li{
  font-size: 0.74rem;
  font-stretch: 92%;
  letter-spacing: 0.02em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}
.traj__bars{
  display: flex;
  gap: 6px;
  margin-top: 30px;
}
.traj__bars i{
  height: 2px;
  flex: 1;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.traj__bars i::after{
  content:'';
  position: absolute;
  inset: 0;
  background: var(--spark);
  transform: scaleX(var(--f, 0));
  transform-origin: left;
}
.traj__art{ position: relative; }
.traj__art svg{ width: 100%; height: auto; display: block; overflow: visible; }
.orbit-path{
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}
.orbit-run{
  fill: none;
  stroke: url(#gspark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: calc(var(--len) * (1 - var(--p, 0)));
}
.orbit-node circle{ transition: r .4s var(--ease), fill .4s var(--ease), opacity .4s var(--ease); }
.orbit-node text{
  font-size: 11px;
  font-weight: 600;
  font-stretch: 86%;
  letter-spacing: 0.16em;
  fill: var(--faint);
  transition: fill .4s var(--ease);
}
.orbit-node.is-on text{ fill: var(--ivory); }
.orbit-planet{
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

/* ---------- Piste d'athlétisme ----------
   Le panneau Sport reste dans le registre de dessin des deux autres :
   un tracé au filet, sans figure humaine. Le coureur est le point qui
   parcourt la ligne, selon la même mécanique que la trajectoire du
   chapitre 02. */
.piste .lice{ fill: none; stroke: currentColor; stroke-width: 1.5; }
.piste .lice--exterieure,
.piste .lice--interieure{ opacity: .26; }
.piste .lice--course{ opacity: .5; }
.piste .arrivee{ stroke: currentColor; stroke-width: 1.5; opacity: .45; }

.piste .mobile{
  offset-path: path('M70 43 H130 A32 32 0 0 1 130 107 H70 A32 32 0 0 1 70 43 Z');
  offset-rotate: 0deg;
  animation: tour 5.4s linear infinite;
}
.piste .mobile--t1{ animation-delay: -5.34s; }
.piste .mobile--t2{ animation-delay: -5.28s; }
.piste .mobile--t3{ animation-delay: -5.22s; }
.piste .mobile--tete{ animation-delay: -5.16s; }
@keyframes tour{
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* ---------- 03 · Les mondes ---------- */
.worlds{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(44px, 6vw, 84px);
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}
.world{
  background: var(--ink);
  padding: clamp(26px, 3vw, 42px) clamp(20px, 2.4vw, 34px) clamp(30px, 4vw, 48px);
  display: grid;
  gap: 20px;
  align-content: start;
  position: relative;
  transition: background-color .5s var(--ease);
}
.world:hover{ background: var(--ink-2); }
.world__art{
  aspect-ratio: 4 / 3;
  width: 100%;
  color: var(--spark);
  transform: translateY(var(--py, 0px));
  will-change: transform;
}
.world__art svg{ width: 100%; height: 100%; display: block; }
.world__art [data-draw]{
  stroke-dasharray: var(--dl, 400);
  stroke-dashoffset: var(--dl, 400);
  transition: stroke-dashoffset 1.6s var(--ease);
  transition-delay: calc(var(--dd, 0) * 140ms);
}
.world.is-in .world__art [data-draw]{ stroke-dashoffset: 0; }

/* ---------- Tracés parcourus ----------
   Un point parcourt le tracé et le trait se dessine derrière lui. Trait
   et point partagent durée, courbe linéaire et paliers ; pathLength="100"
   rend le décalage du trait proportionnel à la longueur parcourue, comme
   offset-distance l'est pour le point : les deux avancent ensemble sans
   aucune mesure en JavaScript. Le motif 100/102 et le départ à 101
   évitent qu'une extrémité arrondie de longueur nulle n'affiche un point
   parasite au bout du tracé. L'animation ne démarre qu'à l'apparition
   du panneau, pour que le visiteur voie le tracé commencer. */
.world__art .trace-fantome{ opacity: .2; }
.world__art .trace{
  stroke-dasharray: 100 102;
  stroke-dashoffset: 101;
}
.world__art .trace-point{
  opacity: 0;
  offset-rotate: 0deg;
}
.trace--vie, .trace-point--vie{ --duree: 4.2s; }
.trace-point--vie{ offset-path: path('M32 78 L62 78 L72 58 L84 100 L96 44 L108 88 L118 78 L168 78'); }
.trace--batiment, .trace-point--batiment{ --duree: 5.2s; }
.trace-point--batiment{ offset-path: path('M40 108 L40 62 L74 44 L108 62 L108 50 L142 32 L176 50 L176 108'); }
.world.is-in .trace{ animation: tracer var(--duree) linear infinite; }
.world.is-in .trace-point{ animation: suivre var(--duree) linear infinite; }

@keyframes tracer{
  0%   { stroke-dashoffset: 101; opacity: 1; }
  68%  { stroke-dashoffset: 0;   opacity: 1; }
  86%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}
@keyframes suivre{
  0%   { offset-distance: 0%;   opacity: 0; }
  4%   { opacity: 1; }
  68%  { offset-distance: 100%; opacity: 1; }
  86%  { offset-distance: 100%; opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.world h3{
  font-family: var(--font-titre);
  font-size: 1.46rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.world p{ color: var(--muted); font-size: 0.95rem; margin: 0; }
.world__tags{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.world__tags li{
  font-size: 0.83rem;
  color: var(--faint);
  padding-left: 16px;
  position: relative;
}
.world__tags li::before{
  content:'';
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 1px;
  background: var(--spark);
}
.worlds-note{
  margin-top: 26px;
  color: var(--faint);
  font-size: 0.95rem;
  max-width: 58ch;
}

/* ---------- 04 · L'ouvrage ---------- */
.craft{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(30px, 5vw, 76px);
  margin-top: clamp(48px, 7vw, 96px);
  align-items: center;
}
.craft__list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.craft__list li{
  border-top: 1px solid var(--line-soft);
  padding: 22px 0;
  display: grid;
  gap: 7px;
}
.craft__list li:last-child{ border-bottom: 1px solid var(--line-soft); }
.craft__list h4{
  margin: 0;
  font-family: var(--font-titre);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.craft__list h4 em{
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--spark);
  font-weight: 600;
  font-stretch: 86%;
}
.craft__list p{ margin: 0; color: var(--muted); font-size: 0.93rem; max-width: 48ch; }

.devices{
  position: relative;
  aspect-ratio: 1 / 0.95;
  perspective: 1400px;
}
.dev{
  position: absolute;
  border-radius: 12px;
  background: linear-gradient(165deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line);
  box-shadow: 0 34px 80px oklch(0.08 0.02 268 / .7);
  overflow: hidden;
  transform-style: preserve-3d;
}
.dev--web{
  left: 0; top: 0;
  width: 62%; aspect-ratio: 16 / 10;
  transform: translateY(calc(var(--pz, 0px) * -0.55));
}
.dev--desk{
  right: 0; top: 15%;
  width: 43%; aspect-ratio: 16 / 11;
  transform: translateY(calc(var(--pz, 0px) * 0.15));
  z-index: 1;
}
.dev--panel{
  left: 25%; bottom: 4%;
  width: 39%; aspect-ratio: 16 / 9;
  border-radius: 8px;
  box-shadow: 0 34px 80px oklch(0.08 0.02 268 / .7), inset 0 0 0 3px oklch(0.28 0.03 268);
  transform: translateY(calc(var(--pz, 0px) * 0.45));
  z-index: 2;
}
.dev--panel::after{
  content: '';
  position: absolute;
  left: 42%; right: 42%; bottom: -1px;
  height: 4px;
  background: var(--ink-3);
}
.dev--phone{
  left: 2%; bottom: 0;
  width: 19.5%; aspect-ratio: 9 / 18.5;
  border-radius: 18px;
  transform: translateY(calc(var(--pz, 0px) * 0.8));
  z-index: 3;
}
.dev--watch{
  right: 4%; bottom: 3%;
  width: 15.5%; aspect-ratio: 1 / 1.14;
  border-radius: 28%;
  overflow: visible;
  transform: translateY(calc(var(--pz, 0px) * 1.05));
  z-index: 4;
}
.dev--watch::before{
  content: '';
  position: absolute;
  left: 28%; right: 28%; top: -26%; bottom: -26%;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--ink-2), var(--ink-3));
  border: 1px solid var(--line-soft);
  z-index: -1;
}
.dev--watch::after{
  content: '';
  position: absolute;
  right: -4px; top: 36%;
  width: 4px; height: 16%;
  border-radius: 0 2px 2px 0;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 0;
}
.dev--watch .dev__body{
  padding: 9px;
  gap: 5px;
  height: 100%;
  align-content: center;
  justify-items: center;
}
.dev--panel .dev__body{ padding: 10px; gap: 7px; }
.dev__bar{
  height: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-inline: 11px;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in oklch, var(--ink) 40%, transparent);
}
.dev__bar i{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line);
}
.dev__bar span{
  margin-left: 8px;
  height: 6px;
  flex: 1;
  max-width: 120px;
  border-radius: 3px;
  background: var(--line-soft);
}
.dev__body{ padding: 12px; display: grid; gap: 8px; }
.ui-row{ display: flex; gap: 8px; }
.ui-card{
  border-radius: 7px;
  background: color-mix(in oklch, var(--ivory) 5%, transparent);
  border: 1px solid var(--line-soft);
  flex: 1;
  padding: 9px;
  display: grid;
  gap: 6px;
  align-content: start;
}
.ui-bar{
  height: 5px;
  border-radius: 3px;
  background: var(--line);
}
.ui-bar.w40{ width: 40%; }
.ui-bar.w60{ width: 60%; }
.ui-bar.w75{ width: 75%; }
.ui-bar.spark{ background: var(--spark); opacity: .85; }
.ui-chart{
  height: 54px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.ui-chart i{
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--spark), color-mix(in oklch, var(--spark) 18%, transparent));
  height: var(--h);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform .9s var(--ease);
  transition-delay: calc(var(--dd) * 70ms);
}
.is-in .ui-chart i{ transform: scaleY(1); }
.ui-ring{
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 4px solid var(--line);
  border-top-color: var(--spark);
  border-right-color: var(--spark);
  margin: 2px auto;
}
.dev--phone .dev__body{ padding: 9px; gap: 6px; }
.dev__notch{
  width: 34%;
  height: 14px;
  margin: 6px auto 4px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ink) 70%, transparent);
}

/* ---------- 05 · Dare One ---------- */
.proof{
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 78% 0%, oklch(0.42 0.15 300 / .28), transparent 62%),
    color-mix(in oklch, var(--ink-2) 62%, transparent);
}
.proof__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}
.proof__text{ display: grid; gap: 22px; }
.proof__stats{
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.proof__stats li{
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--line-soft);
  padding: 13px 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.proof__stats b{
  color: var(--ivory);
  font-weight: 600;
  font-stretch: 100%;
}
.shot{
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: linear-gradient(170deg, oklch(0.24 0.075 292), oklch(0.16 0.05 285));
  box-shadow: 0 44px 90px oklch(0.08 0.02 268 / .72);
  transform: translateY(var(--pz2, 0px));
}
.shot__top{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid oklch(0.72 0.14 300 / .18);
}
.shot__top b{
  font-size: 0.74rem;
  font-weight: 700;
  font-stretch: 90%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.86 0.09 300);
}
.shot__top span{
  margin-left: auto;
  font-size: 0.7rem;
  color: oklch(0.72 0.05 292);
}
.shot__body{
  padding: 16px;
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(3, 1fr);
}
.shot__card{
  border-radius: 12px;
  background: oklch(0.28 0.075 292 / .55);
  border: 1px solid oklch(0.72 0.14 300 / .16);
  padding: 13px;
  display: grid;
  gap: 9px;
  align-content: start;
}
.shot__card--wide{ grid-column: span 2; }
.shot__lab{
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.76 0.06 296);
  font-weight: 600;
  font-stretch: 86%;
}
.shot__num{
  font-family: var(--font-titre);
  font-size: 1.54rem;
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1;
  color: oklch(0.97 0.02 300);
}
.shot__line{
  height: 42px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, oklch(0.7 0.17 320 / .5), oklch(0.7 0.17 300 / .12)),
    repeating-linear-gradient(90deg, transparent 0 15px, oklch(0.72 0.14 300 / .14) 15px 16px);
}
.shot__gauge{
  height: 6px;
  border-radius: 999px;
  background: oklch(0.72 0.14 300 / .2);
  overflow: hidden;
}
.shot__gauge i{
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 999px;
  background: linear-gradient(90deg, oklch(0.68 0.19 320), oklch(0.8 0.14 350));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.4s var(--ease);
  transition-delay: calc(var(--dd) * 130ms);
}
.is-in .shot__gauge i{ transform: scaleX(1); }

/* ---------- Bande des partenaires ---------- */
.partenaires{
  position: relative;
  padding-block: clamp(70px, 10vh, 128px);
}
.partenaires__tete{
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.marques{
  list-style: none;
  margin: clamp(38px, 5vw, 68px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}
.marque-p{
  background: var(--ink);
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 32px 18px;
  color: var(--faint);
  transition: color .35s var(--ease), background-color .35s var(--ease);
}
.marque-p:hover{ color: var(--ivory); background: var(--ink-2); }
.marque-p svg{ width: 34px; height: 34px; }
.marque-p span{
  font-size: 0.74rem;
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.partenaires__note{
  margin: 22px 0 0;
  font-size: 0.85rem;
  color: var(--faint);
  max-width: 60ch;
}
@media (max-width: 1024px){
  .partenaires__tete{ grid-template-columns: minmax(0, 1fr); }
  .marques{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .marques{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marque-p{ padding: 26px 12px; }
}

/* ---------- 06 · Precision suisse ---------- */
.swiss{
  background: var(--ivory);
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.swiss .label{ color: oklch(0.5 0.03 268); }
.swiss .numeral{ -webkit-text-stroke-color: oklch(0.2 0.03 268 / .3); }
.swiss .chapter__head{ border-top-color: oklch(0.2 0.03 268 / .16); }
.swiss .body{ color: oklch(0.42 0.025 268); }
.swiss .lead{ color: var(--ink); }
.scale{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 34px;
  margin-bottom: 30px;
}
.scale i{
  flex: 0 0 1px;
  background: oklch(0.2 0.03 268 / .3);
  width: 1px;
  height: 8px;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform .5s var(--ease);
  transition-delay: calc(var(--dd) * 22ms);
}
.scale.is-in i{ transform: scaleY(1); }
.scale i.tall{ height: 22px; background: oklch(0.2 0.03 268 / .55); }
.scale i.mark{ height: 34px; background: var(--spark-deep); width: 2px; }
.swiss__list{
  list-style: none;
  margin: clamp(40px, 6vw, 80px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 5vw, 72px);
}
.swiss__list li{
  border-top: 1px solid oklch(0.2 0.03 268 / .16);
  padding: 26px 0;
  display: grid;
  gap: 9px;
}
.swiss__list h4{
  margin: 0;
  font-family: var(--font-titre);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.swiss__list h4 em{
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  font-stretch: 86%;
  letter-spacing: 0.18em;
  color: var(--spark-deep);
}
.swiss__list p{ margin: 0; color: oklch(0.42 0.025 268); font-size: 0.95rem; max-width: 46ch; }
.swiss__list li.is-feature{
  grid-column: 1 / -1;
  border-top: 2px solid oklch(0.2 0.03 268 / .42);
  padding-bottom: 30px;
}
.swiss__list li.is-feature h4{ font-size: clamp(1.5rem, 2.8vw, 2.05rem); }
.swiss__list li.is-feature p{ max-width: 74ch; font-size: 1.02rem; }
.swiss__cta{
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.swiss__cross{
  width: 26px; height: 26px;
  flex: none;
  color: var(--spark-deep);
}

/* ---------- Epilogue ---------- */
.outro{
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding-block: clamp(90px, 12vh, 150px);
  position: relative;
}
.outro__title{
  font-size: clamp(2.3rem, 6.2vw, 5.6rem);
  margin-bottom: clamp(26px, 4vw, 46px);
}
.outro__row{
  display: flex;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  flex-wrap: wrap;
  margin-top: 34px;
}
.ico{
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--spark);
}
.lieu{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.92rem;
}
.lieu .ico{ width: 18px; height: 18px; }

.foot{
  border-top: 1px solid var(--line);
  padding-block: 34px 44px;
}
.foot__in{
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.foot p{ margin: 0; color: var(--faint); font-size: 0.83rem; }
.foot a{ color: var(--muted); text-decoration: none; }
.foot a:hover{ color: var(--spark); }
.foot__links{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 34px;
  font-size: 0.83rem;
}
@media (max-width: 620px){
  .foot__links{ grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Épilogue et formulaire ---------- */
.outro__grid{
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
  margin-top: clamp(26px, 4vw, 44px);
}
.outro__aside{ display: grid; gap: 26px; }
.outro__notes{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.outro__notes li{
  border-top: 1px solid var(--line-soft);
  padding: 14px 0;
  color: var(--muted);
  font-size: 0.9rem;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.outro__notes li .ico{ margin-top: 1px; }

.form{
  display: grid;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 34px);
  background: color-mix(in oklch, var(--ink-2) 55%, transparent);
  backdrop-filter: blur(8px);
}
.form__row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.field{ display: grid; gap: 7px; }
.field__label{
  font-size: 0.7rem;
  font-weight: 600;
  font-stretch: 86%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.field__label em{
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--faint);
  font-weight: 500;
}
.field__input{
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ivory);
  background: color-mix(in oklch, var(--ivory) 4%, transparent);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 15px;
  min-height: 46px;
  transition: border-color .22s var(--ease), background-color .22s var(--ease), box-shadow .22s var(--ease);
}
.field__input::placeholder{ color: var(--faint); }
.field__input:hover{ border-color: var(--line-strong, var(--line)); }
.field__input:focus{
  outline: none;
  border-color: var(--spark);
  background: color-mix(in oklch, var(--ivory) 7%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--spark) 24%, transparent);
}
.field__input--zone{ resize: vertical; min-height: 148px; line-height: 1.6; }
.choix{
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.choix__liste{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.choix__item{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 17px 10px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: color .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease);
}
.choix__item:hover{
  color: var(--ivory);
  border-color: color-mix(in oklch, var(--ivory) 28%, transparent);
}
.choix__item input{
  position: absolute;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.choix__marque{
  flex: none;
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  border-radius: 5px;
  border: 1.5px solid color-mix(in oklch, var(--ivory) 30%, transparent);
  transition: background-color .22s var(--ease), border-color .22s var(--ease);
}
.choix__marque::after{
  content: '';
  width: 4px; height: 8px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
  transition: border-color .22s var(--ease);
}
.choix__item:has(input:checked){
  color: var(--on-spark);
  background: var(--spark-solid);
  border-color: var(--spark-solid);
  font-weight: 600;
}
.choix__item:has(input:checked) .choix__marque{
  background: var(--on-spark);
  border-color: var(--on-spark);
}
.choix__item:has(input:checked) .choix__marque::after{ border-color: var(--spark-solid); }
.choix__item:has(input:focus-visible){
  outline: 2px solid var(--spark);
  outline-offset: 3px;
}

.field--faute .field__input{
  border-color: var(--error);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--error) 20%, transparent);
}
.field__faute{
  margin: 0;
  font-size: 0.82rem;
  color: var(--error);
  display: flex;
  gap: 7px;
  align-items: baseline;
}
.field__faute::before{
  content: '!';
  flex: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  transform: translateY(2px);
}

/* Piège à robots : hors écran, hors tabulation, hors arbre d'accessibilité. */
.pot{
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__mention{
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--faint);
  max-width: 56ch;
}
.form__pied{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.form__etat{
  margin: 0;
  font-size: 0.85rem;
  color: var(--error);
  flex: 1 1 220px;
}
.form__etat:empty{ display: none; }

.btn.is-occupe{ pointer-events: none; opacity: .8; }
.btn.is-occupe .btn__dot{ animation: pouls .9s ease-in-out infinite; }
@keyframes pouls{
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.4); opacity: .35; }
}

/* L'adresse n'est jamais écrite en clair dans la source : elle est
   reconstituée au chargement. Sans JavaScript, le repli renvoie vers le
   formulaire, qui reste le chemin normal. */
.courriel a{ color: var(--spark); text-decoration: none; border-bottom: 1px solid color-mix(in oklch, var(--spark) 40%, transparent); }
.courriel a:hover{ border-bottom-color: var(--spark); }

.form-recu{
  border: 1px solid color-mix(in oklch, var(--spark) 34%, transparent);
  border-radius: 20px;
  padding: clamp(26px, 3.4vw, 40px);
  background: color-mix(in oklch, var(--spark) 7%, transparent);
  display: grid;
  gap: 16px;
}
.form-recu__mention{
  margin: 0;
  font-size: 0.8rem;
  color: var(--faint);
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

@media (max-width: 1024px){
  .outro__grid{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px){
  .form__row{ grid-template-columns: minmax(0, 1fr); }
  .form__pied{ gap: 12px; }
  .form__pied .btn{ width: 100%; justify-content: center; }
}

/* ---------- Liens dans le texte ---------- */
.lien{
  color: var(--spark);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--spark) 40%, transparent);
  transition: border-color .28s var(--ease);
}
.lien:hover{ border-bottom-color: var(--spark); }
.lien:focus-visible{ outline: 2px solid var(--spark); outline-offset: 3px; border-radius: 2px; }

/* ---------- Avis de confidentialité ---------- */
/* Le site ne dépose aucun cookie : il n'y a donc rien à accepter ni à
   refuser. L'avis remplit le devoir d'informer de la nLPD, sans barrer
   la page ni retenir le clavier. Il reste masqué tant que le script ne
   l'a pas révélé, de sorte qu'il n'apparaît jamais sans son bouton. */
.avis{
  position: fixed;
  z-index: 60;
  right: var(--gut);
  bottom: clamp(16px, 3vw, 28px);
  width: min(calc(100% - var(--gut) * 2), 384px);
  display: grid;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in oklch, var(--ink-2) 94%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px oklch(0.05 0.02 268 / .55);
  animation: avis-entree .6s var(--ease) both;
}
@keyframes avis-entree{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}
.avis__texte{ margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.avis__texte b{ color: var(--ivory); font-weight: 600; }
.avis__pied{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avis__pied .lien{ font-size: 0.82rem; }

/* ---------- Adaptation aux petits écrans ---------- */
@media (max-width: 1024px){
  .chapter__head,
  .spark-body,
  .craft,
  .proof__grid{ grid-template-columns: minmax(0, 1fr); }
  .traj__cols{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .traj__art{ order: -1; max-width: 264px; margin-inline: auto; }
  .traj__cols .numeral{ display: none; }
  .traj__cols .chapter__id{ margin-bottom: 18px !important; gap: 8px; }
  .traj__cols .h-chapter{ font-size: clamp(1.9rem, 6vw, 2.6rem); }
  .traj__steps{ min-height: 372px; }
  .step h3{ font-size: clamp(1.2rem, 4.4vw, 1.6rem); }
  .worlds{ grid-template-columns: minmax(0, 1fr); }
  .world{ transform: none; }
  .nav__links .nav__link{ display: none; }
  .nav__links .nav__link--cta{ display: inline-flex; }
}
@media (max-width: 1024px) and (max-height: 745px){
  .traj__art{ max-width: 208px; }
  .traj__cols .label{ display: none; }
  .step p{ font-size: 0.9rem; }
  .traj__steps{ min-height: 344px; }
}
@media (max-width: 760px){
  body{ font-size: 16px; }
  .hero{ min-height: 92svh; }
  .hero__top{ align-items: flex-start; flex-direction: column; gap: 10px; }
  .swiss__list{ grid-template-columns: minmax(0, 1fr); }
  .facts li{ grid-template-columns: 2.6rem minmax(0, 1fr); }
  .facts span:last-child{ grid-column: 2; text-align: left; }
  .traj__stage{ height: 400vh; }
  .devices{ aspect-ratio: 1 / 1; }
  .devices{ aspect-ratio: 1 / 1.02; }
  .dev--web{ width: 72%; }
  .dev--desk{ width: 50%; top: 14%; }
  .dev--panel{ width: 46%; left: 22%; }
  .dev--phone{ width: 23%; }
  .dev--watch{ width: 19%; }
  .shot__body{ grid-template-columns: repeat(2, 1fr); }
  .shot__card--wide{ grid-column: span 2; }
  .outro__row{ gap: 18px; }
}
@media (max-width: 520px){
  .hero__title{ font-size: clamp(2.1rem, 9.4vw, 2.9rem); }
  .lead{ max-width: none; }
  .wr{ max-width: none; }
  .step ul{ display: none; }
}