/* ==========================================================================
   LEADSHORT, Design System
   Style: Editorial Brutalism (dark, high contrast, sharp corners, heavy type)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Color, committed dark palette (brand DA: warm bone + desaturated sage) */
  --bg:              #0C100F;
  --bg-elevated:     #111615;
  --surface:         #161B1A;
  --surface-2:       #1C2321;
  --fg:              #EEEBE4;   /* warm off-white */
  --fg-muted:        #A7B3AE;   /* 8.9:1 on --bg */
  --fg-subtle:       #86928D;   /* 6.0:1 on --bg */
  --primary:         #EDEAE3;   /* CTA fill, bone */
  --primary-bright:  #FFFDF7;
  --on-primary:      #0C100F;
  --accent:          #9CBFB1;   /* brand sage, 8.4:1 on --bg */
  --accent-dim:      #6F8D84;
  --border:          #222927;
  --border-strong:   #37423F;
  --ring:            #9CBFB1;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Spacing (standard density) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* Layout */
  --container: 1200px;
  --gutter: 20px;
  --section-pad: 60px;      /* vertical rhythm between sections */
  --nav-h: 68px;

  /* Motion */
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 520ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Z-index scale */
  --z-base: 0;
  --z-sticky: 40;
  --z-nav: 60;
  --z-overlay: 100;
}

@media (min-width: 768px) { :root { --gutter: 32px; --nav-h: 76px; --section-pad: 88px; } }
@media (min-width: 1280px){ :root { --gutter: 48px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  /* Le double tap ne zoome plus : sur le carrousel, deux appuis rapides
     faisaient sauter l'echelle de la page. La pincee a deux doigts reste
     disponible, on ne bloque donc pas le zoom d'accessibilite. */
  touch-action: manipulation;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* Text selection picks up the brand accent instead of the browser blue */
::selection { background: var(--accent); color: var(--on-primary); }
::-moz-selection { background: var(--accent); color: var(--on-primary); }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px;
  z-index: var(--z-overlay);
  background: var(--primary); color: var(--on-primary);
  padding: 12px 20px; font-weight: 700;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * 0.62); }


/* Section label, mono eyebrow with rule */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--border); max-width: 160px;
}

/* Chapeau centre : reserve aux deux sections dont le contenu est lui-meme centre,
   le carrousel et la frise. Ailleurs le site reste ferre a gauche. */
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::before {
  content: ""; flex: 1; height: 1px; background: var(--border); max-width: 120px;
}
.section-head--center .eyebrow::after { max-width: 120px; }
.section-head--center .lede { margin-inline: auto; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }

.display {
  font-size: clamp(2.6rem, 8.4vw, 7.25rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.94;
}
.h2 {
  font-size: clamp(2rem, 5.4vw, 3.75rem);
  line-height: 1.02;
}
.h3 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); letter-spacing: -0.02em; line-height: 1.2; }

.serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.accent-text { color: var(--accent); }

/* Never leave a single word alone on the last line */
p { text-wrap: pretty; }

.lede {
  font-size: clamp(1.06rem, 2.1vw, 1.3rem);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 58ch;
}
.body-muted { color: var(--fg-muted); max-width: 62ch; }

/* Long tokens (URLs, ids) reflow instead of overflowing */
.wrap-anywhere { overflow-wrap: anywhere; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--primary);
  --btn-fg: var(--on-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  border-radius: 0;
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  will-change: transform;
}
.btn:hover { background: var(--primary-bright); border-color: var(--primary-bright); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.btn--block { width: 100%; }

.btn .icon { flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

.logo { display: inline-flex; align-items: center; padding: 8px 2px; }
.logo__img {
  height: 26px; width: auto;
  display: block;
}
@media (min-width: 768px) { .logo__img { height: 28px; } }
.footer .logo__img { height: 32px; }

.nav__links { display: none; align-items: center; gap: 4px; }
@media (min-width: 960px) { .nav__links { display: flex; } }
.nav__link {
  padding: 10px 14px;
  font-size: 15px; font-weight: 500; color: var(--fg-muted);
  transition: color var(--dur) var(--ease);
  cursor: pointer;
}
.nav__link:hover { color: var(--fg); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__cta { display: none; }
@media (min-width: 620px) { .nav__cta { display: inline-flex; } }

.nav__toggle {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px;
  background: transparent; border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__toggle:hover { border-color: var(--fg); }
@media (min-width: 960px) { .nav__toggle { display: none; } }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0;
  z-index: var(--z-overlay);
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: var(--space-4) 0 var(--space-6);
  overflow-y: auto;
  display: none;
}
.mobile-menu[data-open="true"] { display: block; }
.mobile-menu a {
  display: block;
  padding: 18px var(--gutter);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:hover { color: var(--accent); }
.mobile-menu .btn { margin: var(--space-4) var(--gutter) 0; width: calc(100% - var(--gutter) * 2); }
body[data-menu-open="true"] { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--section-pad) * 1.05);
  padding-bottom: calc(var(--section-pad) * 1.05);
  overflow: hidden;
}


.hero__glow {
  /* Le degrade occupe exactement la section et sa source est exprimee en
     pourcentage : la lumiere tombe du meme angle, en haut a gauche, quelle que
     soit la largeur de l'ecran. Rien n'est calibre en pixels, donc le telephone
     recoit la meme image que l'ordinateur, simplement plus etroite.
     Le fondu du haut evite l'arete que la coupe de section dessinait sous le menu. */
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(115% 85% at 16% 26%,
              rgba(156, 191, 177, 0.16) 0%,
              rgba(120, 155, 143, 0.05) 46%,
              transparent 74%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16%);
  z-index: var(--z-base);
}
.hero__inner { position: relative; }
.hero h1 { max-width: 16ch; }

.hero h1 { margin-bottom: var(--space-4); }
/* Sur telephone on descend la taille juste ce qu'il faut pour que
   « content departments » tienne sur une seule ligne au lieu de se couper en deux. */
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
}
.hero__sub { margin-bottom: var(--space-6); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--space-6); }

.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  font-size: 14.5px;
  color: var(--fg-muted);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* ---------- Founder ---------- */
.founder { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .founder {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: var(--space-7);
    align-items: center;
  }
  .founder__media { max-width: none; }
}

.founder__media {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 380px;   /* keeps the portrait from dominating small screens */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: linear-gradient(160deg, var(--surface-2), var(--bg-elevated));
}
.founder__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

.founder__own {
  margin-top: var(--space-5);
  border-left: 2px solid var(--accent-dim);
  padding: 2px 0 2px 18px;
}
.founder__own-label {
  font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.075em; text-transform: uppercase;
  color: var(--fg-subtle); margin-bottom: 6px;
}
.founder__own-stat {
  font-size: 1.05rem; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.founder__own-stat b { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--fg); }
.founder__own-stat span { color: var(--fg-subtle); margin-inline: 4px; }
.founder__own-note { margin-top: 6px; font-size: 14px; color: var(--fg-subtle); }

.founder__sign { margin-top: var(--space-5); display: grid; gap: 4px; }
.founder__sign b {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.6rem; line-height: 1; color: var(--fg);
}
.founder__sign span {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-subtle);
}

/* ---------- Client logo bar ---------- */
.marquee {
  border-block: 1px solid var(--border);
  background: var(--bg-elevated);
  overflow: hidden;
  padding-block: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* Le defilement ne s'arrete jamais, ni au survol ni au toucher. */
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee { pointer-events: none; }

.marquee__group {
  display: flex; align-items: center;
  gap: var(--space-7);
  padding-right: var(--space-7);
  list-style: none; margin: 0; padding-left: 0;
}
.marquee__item { display: inline-flex; align-items: center; }
.marquee__item img {
  height: 30px; width: auto;
  opacity: 0.6;
  transition: opacity var(--dur) var(--ease);
}
@media (max-width: 767px) { .marquee__item img { height: 24px; } }

/* --marquee-shift is set by script.js to exactly one group width, so the loop is
   seamless whatever the number of logos. 50% is the no-JS fallback (two groups). */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }
}

/* No motion: one static, wrapping row instead of a loop */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; width: 100%; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .marquee__group {
    flex-wrap: wrap; justify-content: center;
    gap: var(--space-5) var(--space-6); padding-right: 0;
  }
  .marquee__item img { transition: none; }
}

/* ---------- Stats ---------- */
.stats { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--bg); padding: var(--space-5) var(--space-4); }
.stat__value {
  font-size: clamp(2.6rem, 6vw, 4.25rem);
  font-weight: 800; letter-spacing: -0.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  margin-bottom: 10px;
}
.stat:nth-child(2) .stat__value { color: var(--accent); }
.stat__label { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.075em; text-transform: uppercase; color: var(--fg-muted); }
.stat__note { margin-top: 6px; font-size: 15px; color: var(--fg-subtle); }

/* ---------- Split heading block ---------- */
.split { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
}

/* ---------- Process timeline ----------
   A vertical spine that draws itself as you scroll. Each step sits on one side of it,
   slides in when reached, and carries an oversized numeral on the opposite side. */
.steps {
  --p: 0;
  position: relative;
  padding-block: var(--space-4);
}
/* Les cartes entrent depuis l'exterieur : on coupe, sinon la page se decale
   lateralement tant que l'etape n'est pas apparue. Uniquement a partir de 900px,
   ou cette entree laterale existe : plus bas le trait est colle au bord gauche et
   la coupe rognerait le halo des cercles. */
@media (min-width: 900px) {
  .steps { overflow-x: clip; }
}

.steps__spine {
  /* le trait garde la meme avance avant le premier cercle qu'apres la derniere carte */
  position: absolute; top: var(--space-5); bottom: var(--space-5); left: 21px;
  width: 2px; background: var(--border);
  overflow: hidden;
}
.steps__fill {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--accent-dim), var(--accent));
  transform: scaleY(var(--p)); transform-origin: top;
}
.steps__fill::after {            /* the travelling head */
  content: "";
  position: absolute; left: -3px; bottom: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 4px rgba(156,191,177,0.5);
  opacity: calc(var(--p) * 4);
}
@media (min-width: 900px) { .steps__spine { left: 50%; margin-left: -1px; } }

.step {
  position: relative;
  padding-left: 60px;
  padding-block: var(--space-5);
}
.step:first-child { padding-top: var(--space-3); }
@media (max-width: 899px) {
  .step:first-child .step__node { top: var(--space-3); }
  .step__title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
}
@media (min-width: 900px) {
  .step {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: var(--space-8);
    padding-left: 0;
    padding-block: var(--space-8);
  }
  .step:first-child { padding-top: var(--space-5); }
  .step__card { max-width: min(420px, 100%); }
  .step:nth-of-type(odd)  .step__card { grid-column: 1; justify-self: end; }
  .step:nth-of-type(even) .step__card { grid-column: 2; justify-self: start; }
  .step:nth-of-type(odd)  .step__ghost { grid-column: 2; justify-self: start; }
  .step:nth-of-type(even) .step__ghost { grid-column: 1; justify-self: end; }
}

/* Marker sits on the spine */
.step__node {
  position: absolute; top: var(--space-5); left: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  z-index: 1;
}
@media (min-width: 900px) {
  .step__node {
    left: 50%; top: var(--space-8);
    width: 52px; height: 52px;
    transform: translateX(-50%);
  }
  .step:first-child .step__node { top: var(--space-5); }
}
/* Cercle de fond, toujours present. Sans lui, tant qu'une etape n'est pas
   apparue on ne voit qu'un disque couleur page : un trou dans le trait.
   Il est cale exactement sous le trace du cercle vert, qui vient par dessus. */
.step__node::before {
  content: "";
  position: absolute; inset: 1px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg);
}
/* overflow visible so the marker's glow is not clipped into a square */
.step__node svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.step__ring {
  fill: var(--bg);
  stroke: var(--accent); stroke-width: 2;
  stroke-dasharray: 152; stroke-dashoffset: 152;
  transition: stroke-dashoffset 1000ms var(--ease), fill 500ms var(--ease), filter 500ms var(--ease);
}
.step.is-in .step__ring { stroke-dashoffset: 0; }
.step.is-reached .step__ring { fill: var(--accent); }
.step.is-current .step__ring { filter: drop-shadow(0 0 14px rgba(156,191,177,0.6)); }
/* Le chiffre est la des le depart. Il arrivait auparavant avec un demi-seconde de
   retard : en defilement rapide, le cercle s'allumait en vert avant que le chiffre
   n'apparaisse, et on voyait une pastille vide. */
.step__node b {
  position: relative;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--fg-subtle);
  transition: color 420ms var(--ease);
}
.step.is-reached .step__node b { color: var(--on-primary); }

/* Oversized numeral facing the card across the spine */
.step__ghost {
  position: absolute; top: -4px; right: 0;
  font-size: 6.5rem; font-weight: 800; letter-spacing: -0.06em; line-height: 0.8;
  color: var(--accent);
  opacity: 0; transform: translateY(28px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  pointer-events: none; user-select: none;
}
.step.is-in .step__ghost { opacity: 0.07; transform: none; }
.step.is-current .step__ghost { opacity: 0.12; }
@media (min-width: 900px) {
  .step__ghost {
    position: static;
    font-size: 15rem; letter-spacing: -0.07em;
    transform: translateY(40px);
    transition: opacity 1100ms var(--ease), transform 1100ms var(--ease);
  }
  .step.is-in .step__ghost { opacity: 0.06; transform: translateY(var(--drift, 0px)); }
  .step.is-current .step__ghost { opacity: 0.11; }
}

/* Card enters from its own side */
.step__card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
@media (min-width: 900px) {
  .step:nth-of-type(odd)  .step__card { transform: translate(-44px, 20px); }
  .step:nth-of-type(even) .step__card { transform: translate(44px, 20px); }

  /* A droite le texte demarre pile au bord de la carte, donc a 48px du trait.
     A gauche il s'arrete ou la phrase s'arrete : mesure faite, le texte le plus
     proche du trait est a 78px, et la moyenne bien au dela. On decale donc la
     colonne de droite de 48px de plus pour que les deux cotes respirent pareil.
     La largeur maximale suit, sinon la carte deborderait de sa colonne autour
     de 900px. */
  .step:nth-of-type(even) .step__card {
    margin-left: 48px;
    max-width: min(420px, calc(100% - 48px));
  }
}
.step.is-in .step__card { opacity: 1; transform: none; }

/* Une seule apparition par etape : la carte entiere entre d'un bloc. La cascade
   date, puis titre, puis phrase, puis coches, donnait l'impression d'une liste qui
   se remplit ligne a ligne. Le mouvement reste, il est simplement unifie. */
.step__time {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.step__title {
  font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.05;
  margin-bottom: 16px;
}
.step__time span, .step__title span { display: block; }

.step__body { font-size: 16px; color: var(--fg-muted); }

.step__list {
  list-style: none; padding: 0;
  display: grid; gap: 10px;
  margin-top: var(--space-4);
}
.step__list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 15px; line-height: 1.45; color: var(--fg-muted);
}
.step__list .tick { width: 16px; height: 16px; flex: none; color: var(--accent); margin-top: 3px; }

/* ---- Sur telephone, une frise plus calme ----
   L'animation en cascade a ete pensee pour deux colonnes larges. Dans une colonne
   etroite elle devient bavarde : chaque libelle, chaque coche arrive separement.
   Ici, un seul mouvement par etape, pas de chiffre geant derriere le texte, et
   surtout des cercles toujours visibles pour que le trait ne soit jamais troue en
   attendant qu'une etape apparaisse. */
@media (max-width: 899px) {
  .step__ghost { display: none; }
  .step { padding-block: var(--space-6); }

  /* le cercle est dessine des le depart, il se remplit quand on l'atteint */
  .step__ring {
    stroke-dasharray: none; stroke-dashoffset: 0;
    stroke: var(--border-strong);
    transition: stroke 420ms var(--ease), fill 420ms var(--ease), filter 420ms var(--ease);
  }
  .step.is-reached .step__ring { stroke: var(--accent); }
  .step__card { transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
  .steps__fill { transform: none; }
  .steps__fill::after { display: none; }
  .step__card, .step__node b { opacity: 1; transform: none; }
  .step__ghost { opacity: 0.06; transform: none; }
  .step__ring { stroke-dashoffset: 0; }
  .steps__fill, .step__card, .step__ghost, .step__ring, .step__node b { transition: none; }
}

/* ---------- Client results carousel ----------
   Cards are stacked on one another and pushed aside by their distance from the active
   one, so the centre card reads sharp and the neighbours fall back. */
.cases {
  --card-w: min(430px, 84vw);
  --step: calc(var(--card-w) * 0.66);
  position: relative;
  padding-bottom: var(--space-6);
}

.cases__stage {
  position: relative;
  height: var(--stage-h, 520px);
  /* the off-screen cards must not widen the page */
  overflow: hidden;
}

.case {
  position: absolute; top: 0; left: 50%;
  width: var(--card-w);
  margin-left: calc(var(--card-w) / -2);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateX(calc(var(--o, 0) * var(--step))) scale(var(--s, 1));
  opacity: var(--a, 1);
  filter: blur(var(--b, 0px));
  z-index: var(--z, 0);
  transition: transform 620ms var(--ease), opacity 620ms var(--ease),
              filter 620ms var(--ease), border-color 400ms var(--ease);
  will-change: transform;
}
.case.is-active { border-color: var(--accent-dim); }
.case.is-hidden { pointer-events: none; }

/* Round controls, matching the inspiration's outlined arrows */
.cases__nav {
  position: absolute; top: calc(var(--stage-h, 520px) / 2); z-index: 20;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  transform: translateY(-50%);
  border: 1px solid var(--border-strong); border-radius: 50%;
  background: rgba(12,16,15,0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--fg); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.cases__nav svg { width: 20px; height: 20px; }
.cases__nav:hover { border-color: var(--accent); color: var(--accent); }
.cases__nav:active { transform: translateY(-50%) scale(0.94); }
.cases__nav--prev { left: 0; }
.cases__nav--next { right: 0; }
@media (min-width: 1100px) {
  .cases__nav--prev { left: 8px; }
  .cases__nav--next { right: 8px; }
}
.cases__dots {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  margin-top: var(--space-5);
}
.cases__dots button {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 4px;
  background: var(--border-strong);
  cursor: pointer;
  transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cases__dots button[aria-selected="true"] { width: 26px; background: var(--accent); }

/* ---- card internals ---- */
.case__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.case__media img { width: 100%; height: 100%; object-fit: cover; }
.case__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(12,16,15,0.94) 4%, rgba(12,16,15,0.3) 58%, transparent);
}
.case__name {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: 12px;
  z-index: 1;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
}

.case__body { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; }

.case__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.case__plats { display: flex; align-items: center; gap: 8px; }
.case__plats svg { width: 17px; height: 17px; color: var(--fg-muted); }
.case__period {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--fg-subtle); text-align: right;
}

.case__rows {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px; row-gap: 16px;
  align-items: center;
  margin: 0; padding: var(--space-4) 0;
}
.case__rows dt {
  min-width: 3.5em;
  font-size: 1.8rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.case__rows dd {
  margin: 0;
  display: flex; align-items: center;
  min-height: 2.8em;
  font-size: 13.5px; line-height: 1.4; color: var(--fg-muted);
  text-wrap: balance;
}

.case__after {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-strong);
}
.case__after-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.case__after-label svg { width: 13px; height: 13px; flex: none; }
.case__after-text {
  font-size: 13.5px; line-height: 1.45; color: var(--fg);
  min-height: calc(13.5px * 1.45 * 2);
}

/* Sur telephone : une seule carte, nette, pleine largeur. Pas de voisines floues
   derriere, elles sortent completement du cadre. Les fleches rejoignent la rangee
   de pastilles pour ne pas passer par dessus la carte. */
@media (max-width: 760px) {
  .cases { --card-w: 100%; --step: calc(100% + 20px); padding-bottom: 0; }

  .case {
    filter: none;
    opacity: 0;
    transform: translateX(calc(var(--o, 0) * var(--step)));
    /* Deux causes a la bordure inegale, corrigees ensemble :
       1. la carte devenait sa propre couche graphique, rééchantillonnée des
          qu'elle tombait sur une demi-hauteur de pixel ;
       2. sa hauteur etait fractionnaire, donc le bord haut et le bord bas ne
          tombaient pas sur la meme fraction de pixel et se rendaient
          differemment. La hauteur est desormais celle de la scene, un entier. */
    will-change: auto;
  }
  .case.is-active { opacity: 1; }

  /* Le liseré est tracé par dessus le contenu, pas derriere. Une bordure classique
     se retrouve masquee la ou la photo touche le bord et devient invisible sur les
     visuels clairs, d'ou un cadre present sur certaines cartes et absent sur
     d'autres. La, il fait le tour de la meme facon quelle que soit l'image. */
  .case, .case.is-active { border-color: transparent; }
  /* La photo est rentree d'un pixel : le liseré se detache alors toujours sur le
     fond sombre de la carte, jamais sur l'image. C'est ce qui le rendait franc sur
     les visuels sombres et fantomatique sur les visuels clairs. */
  .case__media { margin: 1px 1px 0; }
  .case::after {
    content: "";
    position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px var(--border-strong);
    pointer-events: none;
    z-index: 5;
  }

  .case__name { font-size: 1.5rem; }
  .case__body { padding: var(--space-4) var(--space-4) var(--space-4); }
  .case__rows { row-gap: 18px; padding: var(--space-4) 0 var(--space-5); }
  .case__rows dt { font-size: 2.1rem; min-width: 3.2em; }
  .case__rows dd { font-size: 14.5px; min-height: 2.6em; }

  /* la ligne qui compte se detache, comme le bandeau de l'inspiration */
  .case__after {
    margin-top: auto;
    padding: 13px 15px;
    border: 1px solid var(--accent-dim);
    background: rgba(156, 191, 177, 0.07);
  }
  /* interlignes en pixels entiers : la hauteur du cadre tombe juste, donc son
     bord haut et son bord bas se rendent exactement pareil */
  .case__after-label { line-height: 14px; }
  .case__after-text { min-height: 0; line-height: 20px; }

  .cases__nav {
    top: auto; bottom: 0; transform: none;
    width: 46px; height: 46px;
  }
  .cases__nav:active { transform: scale(0.94); }
  .cases__nav--prev { left: 0; }
  .cases__nav--next { right: 0; }
  .cases__dots { min-height: 46px; align-items: center; margin-top: var(--space-5); }
}

/* Call to action placed where the proof has just landed */
.cases__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px var(--space-4);
  margin-top: var(--space-6);
  text-align: center;
}
.cases__cta span { font-size: 15.5px; color: var(--fg-muted); }

@media (prefers-reduced-motion: reduce) {
  .case, .cases__nav, .cases__dots button { transition: none; }
  .case { filter: none; }
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: 24px 4px;
  background: transparent; border: 0; cursor: pointer;
  text-align: left;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem); font-weight: 700; letter-spacing: -0.02em;
  color: var(--fg);
  transition: color var(--dur) var(--ease);
  min-height: 56px;
}
.faq__trigger:hover { color: var(--accent); }
.faq__icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.faq__icon svg { width: 16px; height: 16px; }
.faq__trigger[aria-expanded="true"] .faq__icon { transform: rotate(45deg); border-color: var(--accent); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.faq__panel[data-open="true"] { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p { padding: 0 4px 26px; color: var(--fg-muted); max-width: 70ch; }
@media (prefers-reduced-motion: reduce) {
  .faq__panel { transition: none; }
}

/* ---------- CTA ---------- */
.cta {
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  padding: var(--space-6) var(--space-4);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .cta { padding: var(--space-8) var(--space-7); } }
.cta::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 0% 0%, rgba(156,191,177,0.14), transparent 62%);
}
.cta__inner { position: relative; max-width: 720px; }
.cta h2 { margin-bottom: var(--space-4); }
.cta .lede { margin-bottom: var(--space-6); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--space-6); }
.cta__points { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.cta__points span { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--fg-muted); }
.cta__points svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding-block: var(--space-6); }
.footer__grid { display: grid; gap: var(--space-5); }
/* Sur telephone, Navigate et Contact tiennent cote a cote : la marque prend
   toute la largeur, les deux colonnes de liens se partagent la ligne suivante. */
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
}
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6); } }
.footer h4 {
  font-family: var(--font-sans); font-weight: 500; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--fg-subtle); font-weight: 500; margin-bottom: var(--space-3);
}
.footer nav { display: grid; gap: 10px; }
.footer nav a { color: var(--fg-muted); font-size: 15px; transition: color var(--dur) var(--ease); width: fit-content; }
.footer nav a:hover { color: var(--fg); }
.footer__bottom {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: 13.5px; color: var(--fg-subtle);
}
.footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
/* .footer nav is a grid for the link columns above, so this needs to outrank it */
.footer nav.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
/* mentions legales : meme taille que la ligne de copyright, sinon elles pesent
   plus lourd que le texte qu'elles accompagnent */
.footer nav.footer__legal a { font-size: 13.5px; color: var(--fg-subtle); transition: color var(--dur) var(--ease); }
.footer__legal a:hover { color: var(--fg); }
/* sur telephone les deux lignes se suivent de pres et forment un seul bas de page */
@media (max-width: 767px) {
  .footer__bottom { gap: 7px 20px; }
}

/* ---------- Legal pages ---------- */
.legal { max-width: 72ch; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--space-3); }
.legal__updated {
  font-size: 12px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--fg-subtle); margin-bottom: var(--space-6);
}
.legal h2 {
  font-size: 1.25rem; margin-top: var(--space-6); margin-bottom: var(--space-3);
  padding-top: var(--space-4); border-top: 1px solid var(--border);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p, .legal li { color: var(--fg-muted); font-size: 15.5px; line-height: 1.65; }
.legal p + p { margin-top: var(--space-3); }
.legal ul { margin: var(--space-3) 0 0; padding-left: 20px; display: grid; gap: 8px; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal dl { display: grid; gap: 10px; margin-top: var(--space-3); }
.legal dt { font-weight: 700; color: var(--fg); font-size: 15px; }
.legal dd { margin: 0; color: var(--fg-muted); font-size: 15.5px; }
/* Anything still bracketed must not reach production */
.legal mark {
  background: rgba(156,191,177,0.14); color: var(--accent);
  padding: 1px 6px; font-weight: 500;
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .case, .faq__icon { transition: none; }
  .btn:hover, .case:hover { transform: none; }
}
/* No-JS safety: content must never stay invisible */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* Active nav state (set by scrollspy) */
.nav__link[aria-current="true"] {
  color: var(--fg);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}