/* ==========================================================================
   UMANO STRATA — Feuille de style
   Direction artistique : style guide « galerie de minuit » (scène noire,
   bandes charbon, rayons 28px, pilules, aucune ombre).
   Marque : l'accent bleu du guide est remplacé par le champagne de la charte
   Umano Strata (#D4B481 / #E7CDA6) et le bleu nuit (#010C22) sert de strate
   profonde.
   ========================================================================== */

:root {
  /* Surfaces */
  --obsidian: #000000;
  --graphite: #0e0e0e;
  --carbon: #1d1d1f;
  --steel: #333336;
  --slate: #6e6e73;
  --ash: #86868b;
  --porcelain: #f5f5f7;
  --white: #ffffff;
  --keyline: #282828;

  /* Marque Umano Strata */
  --night: #010c22;
  --champagne: #d4b481;
  --champagne-light: #e7cda6;

  /* Typographie */
  --font-text: "SF Pro Text", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "SF Pro Display", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Cormorant Garamond", "Times New Roman", serif;

  /* Formes */
  --r-card: 28px;
  --r-nav: 20px;
  --r-btn: 170px;
  --r-capsule: 36px;

  /* Rythme */
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(90px, 12vw, 144px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

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

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--porcelain);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--champagne); color: var(--night); }

:focus-visible { outline: 1px solid var(--champagne); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  padding: 8px 14px; border-radius: var(--r-btn);
  background: var(--champagne); color: var(--night); font-size: 12px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- Mise en page ---------- */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 980px; }
.wrap--wide { max-width: 1440px; }

.section { padding-block: var(--section); position: relative; }
.section--carbon { background: linear-gradient(var(--carbon), var(--obsidian) 288px); }
.section__head { max-width: 820px; margin-bottom: clamp(40px, 6vw, 72px); }
.section__link { margin-top: 48px; }

/* ---------- Typographie ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600; line-height: 1.21; letter-spacing: 0.228px;
  color: var(--champagne);
  margin-bottom: 16px;
}
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6.6vw, 80px);
  line-height: 1.05; letter-spacing: -0.015em;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.07; letter-spacing: -0.015em;
  text-wrap: balance;
}
.h2--sm { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; }
.lead {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.38; letter-spacing: 0.011em;
  color: var(--ash);
  margin-top: 20px; max-width: 640px;
  font-family: var(--font-display); font-weight: 500;
}
.body { color: var(--ash); margin-top: 16px; max-width: 640px; }

.link {
  color: var(--champagne-light);
  border-radius: 10px;
  transition: color .3s var(--ease);
}
.link i { font-style: normal; display: inline-block; transition: transform .4s var(--ease); margin-left: 2px; }
.link:hover { color: var(--white); }
.link:hover i { transform: translateX(4px); }

/* masques de révélation (créés par JS) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.w > span { display: inline-block; will-change: transform; }

/* ---------- Boutons & capsules ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-btn);
  font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: -0.224px;
  padding: 11px 22px;
  white-space: nowrap;
  transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.btn--primary { background: var(--champagne); color: var(--night); font-weight: 500; }
.btn--primary:hover { background: var(--champagne-light); }
.btn--compact { font-size: 12px; line-height: 16px; letter-spacing: -0.12px; padding: 7px 14px; }
.btn--lg { font-size: 17px; padding: 16px 32px; letter-spacing: -0.374px; }

.capsule {
  display: inline-flex; align-items: center;
  background: rgba(66, 66, 69, .72);
  color: rgba(255, 255, 255, .8);
  border-radius: var(--r-capsule);
  font-size: 14px; line-height: 1.29; letter-spacing: -0.224px;
  padding: 11px 20px;
}

/* ---------- Barre de progression ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; pointer-events: none; }
.progress__bar { display: block; height: 100%; background: var(--champagne); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: 44px;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 0 rgba(40, 40, 40, .9);
}
.nav__inner {
  height: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
.brand__mark { width: 28px; height: 28px; mix-blend-mode: screen; border-radius: 50%; }
.brand__name {
  font-family: var(--font-brand); font-weight: 600;
  font-size: 15px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--champagne-light);
  white-space: nowrap;
}
.nav__links { display: flex; gap: 28px; }
.nav__links a {
  font-size: 12px; line-height: 1.33; letter-spacing: -0.12px;
  color: rgba(255, 255, 255, .8);
  transition: color .3s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--white); }
.nav__toggle { display: none; width: 44px; height: 44px; margin-right: -12px; position: relative; }
.nav__toggle span {
  position: absolute; left: 13px; right: 13px; height: 1px; background: var(--porcelain);
  transition: transform .45s var(--ease), top .45s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 18px; }
.nav__toggle span:nth-child(2) { top: 25px; }
.menu-open .nav__toggle span:nth-child(1) { top: 21.500px; transform: rotate(45deg); }
.menu-open .nav__toggle span:nth-child(2) { top: 21.500px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, .96);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  padding: 96px var(--gutter) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  visibility: hidden; opacity: 0;
  transition: opacity .4s var(--ease), visibility 0s .4s;
}
.menu-open .menu { visibility: visible; opacity: 1; transition: opacity .4s var(--ease); }
.menu__links a {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 32px; line-height: 1.13; letter-spacing: 0.004em;
  padding: 14px 0;
  border-bottom: 1px solid var(--keyline);
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.menu__links small { font-size: 12px; font-weight: 400; color: var(--champagne); width: 24px; }
.menu-open .menu__links a { opacity: 1; transform: none; }
.menu-open .menu__links a:nth-child(2) { transition-delay: .06s; }
.menu-open .menu__links a:nth-child(3) { transition-delay: .12s; }
.menu-open .menu__links a:nth-child(4) { transition-delay: .18s; }
.menu__foot { color: var(--ash); font-size: 14px; }

/* ---------- 1. Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  padding: 44px var(--gutter) clamp(56px, 8vh, 84px);
  background: var(--obsidian);
  text-align: center;
  overflow: hidden;
}
.hero__stage { position: relative; min-height: 220px; }
.hero__emblem-wrap {
  position: absolute; left: 50%; top: 47%;
  height: min(106%, 720px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  will-change: transform, clip-path;
}
.hero__emblem { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.hero__needle {
  position: absolute; left: 50%; top: 8%; bottom: 8%;
  width: 1px; margin-left: -.5px;
  background: var(--champagne-light);
  transform: scaleY(0); transform-origin: 50% 0;
  z-index: 2;
}
.hero__content { position: relative; z-index: 3; max-width: 1120px; margin-inline: auto; }
.hero__label {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(19px, 2.2vw, 32px); line-height: 1.13; letter-spacing: 0.004em;
  color: var(--champagne-light);
  margin-bottom: clamp(10px, 1.6vh, 18px);
}
.hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(34px, min(5.4vw, 8.4vh), 80px);
  line-height: 1.05; letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero__cluster {
  margin-top: clamp(24px, 3.6vh, 40px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 16px; width: 1px; height: 28px; margin-left: -.5px;
  background: var(--steel); overflow: hidden;
}
.hero__scroll span {
  position: absolute; inset: 0; background: var(--champagne-light);
  animation: scrollcue 2.2s var(--ease) infinite;
}
@keyframes scrollcue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* état initial de l'intro (uniquement si JS actif) */
.js .hero [data-intro], .js .hero__title, .js .hero__emblem-wrap, .js .nav { visibility: hidden; }

/* ---------- Manifeste ---------- */
.manifesto { padding-block: clamp(90px, 16vw, 210px); background: var(--obsidian); }
.manifesto__text {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 3.8vw, 48px);
  line-height: 1.14; letter-spacing: -0.005em;
  color: var(--porcelain);
}
.manifesto__text + .manifesto__text { margin-top: clamp(32px, 4vw, 56px); }
.manifesto__text--accent { color: var(--champagne-light); }
.manifesto__text .sw { opacity: 1; }

/* ---------- Tuiles ---------- */
.tile {
  position: relative;
  background: var(--obsidian);
  border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--keyline);
  padding: clamp(24px, 2.6vw, 36px);
  transition: box-shadow .5s var(--ease), background-color .5s var(--ease);
}
.tile__num {
  display: block;
  font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: -0.12px;
  color: var(--champagne);
}
.tile__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 2.3vw, 32px); line-height: 1.13; letter-spacing: 0.004em;
  color: var(--porcelain);
}
.tile__stat {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(21px, 2vw, 28px); line-height: 1.14; letter-spacing: 0.007em;
  color: var(--porcelain);
}
.tile__text { color: var(--ash); font-size: 17px; line-height: 1.47; margin-top: 12px; }
.ico { width: 32px; height: 32px; fill: none; stroke: var(--champagne-light); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 28px; }

.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 2. Situations (défilement horizontal) ---------- */
.situations {
  background: linear-gradient(var(--carbon), var(--obsidian) 288px);
  padding-block: var(--section) clamp(48px, 6vw, 90px);
  overflow: hidden;
}
.situations__head { margin-bottom: clamp(32px, 5vh, 56px); }
.situations__head .h2 { max-width: 760px; }
.situations__viewport { width: 100%; }
.situations__track {
  display: flex; gap: 24px;
  padding-inline: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter)));
  width: max-content;
  will-change: transform;
}
.tile--scene {
  width: clamp(280px, 30vw, 420px);
  min-height: clamp(300px, 44vh, 420px);
  display: flex; flex-direction: column;
  flex: none;
}
.tile--scene .tile__num {
  font-family: var(--font-display); font-size: 19px; line-height: 1.21; letter-spacing: 0.228px;
  margin-bottom: auto; padding-bottom: 48px;
  color: var(--slate);
  transition: color .5s var(--ease);
}
.tile--scene.is-active .tile__num, .tile--scene:hover .tile__num { color: var(--champagne); }
.tile--scene.is-active, .tile--scene:hover { box-shadow: 0 0 0 1px var(--slate); }
.situations__rail { margin-top: clamp(28px, 4vh, 48px); }
.situations__rail::before, .situations__rail span { content: ""; display: block; height: 1px; }
.situations__rail { position: relative; }
.situations__rail::before { background: var(--steel); }
.situations__rail span { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; background: var(--champagne); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Cadre média ---------- */
.frame-section { background: var(--obsidian); padding-block: clamp(24px, 4vw, 48px) var(--section); }
.media {
  position: relative; overflow: hidden;
  border-radius: var(--r-card);
  background: var(--graphite);
  aspect-ratio: 16 / 8.500;
  will-change: clip-path;
}
.media img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; object-position: 62% 40%; will-change: transform; }
@media (min-width: 900px) {
  /* recadrage : on écarte le bord gauche de la prise de vue */
  .media:not(.media--portrait) img { left: -22%; width: 122%; max-width: none; }
}
.media::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .46);
}
.media__caption {
  position: absolute; z-index: 2; left: clamp(24px, 5vw, 72px); right: clamp(24px, 5vw, 72px); bottom: clamp(24px, 5vw, 64px);
  display: flex; flex-direction: column; gap: 12px;
}
.media__kicker { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: 0.228px; color: var(--champagne-light); }
.media__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 4.2vw, 56px); line-height: 1.07; letter-spacing: -0.015em;
  max-width: 16ch;
}
.media--portrait { aspect-ratio: 4 / 5; }
.media--portrait::after { background: rgba(0, 0, 0, .08); }
.media--portrait img { object-position: 50% 30%; }

/* ---------- 3. Conséquences ---------- */
.panel {
  background: var(--carbon);
  border-radius: var(--r-card);
  padding: clamp(24px, 5vw, 72px);
}
.panel__head { max-width: 860px; margin-bottom: clamp(32px, 5vw, 64px); }
.panel__label {
  font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ash);
  margin: 40px 0 16px;
}
.panel__head + .panel__label { margin-top: 0; }
.tile--metric { min-height: 260px; }
.tile--metric:hover { box-shadow: 0 0 0 1px var(--slate); }

/* ---------- 4. Strates ---------- */
.strata { background: var(--obsidian); position: relative; }
.strata__pin { min-height: 100vh; display: flex; align-items: center; padding-block: clamp(72px, 10vh, 120px); }
.strata__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.strata__final {
  margin-top: 32px; max-width: 520px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(21px, 2vw, 28px); line-height: 1.19; letter-spacing: 0.007em;
  color: var(--champagne-light);
}
.strata__stage { position: relative; max-width: 520px; width: 100%; margin-inline: auto; }
.strata__needle {
  position: absolute; left: -28px; top: -20px; bottom: -20px; width: 1px;
  background: var(--champagne);
  transform-origin: 50% 0; z-index: 5; pointer-events: none;
}
.strata__needle::before, .strata__needle::after {
  content: ""; position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -3.500px; border-radius: 50%; background: var(--champagne);
}
.strata__needle::before { top: -3px; }
.strata__needle::after { bottom: -3px; }

.dash {
  position: relative; z-index: 4;
  background: var(--carbon);
  border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--steel);
  padding: 20px 24px 12px;
}
.dash__head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: -0.12px; color: var(--ash); padding-bottom: 12px; border-bottom: 1px solid var(--steel); }
.dash__head span:first-child { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: 0.228px; color: var(--porcelain); }
.dash__tag { box-shadow: 0 0 0 1px var(--slate); border-radius: 9999px; padding: 4px 10px; color: var(--porcelain); }
.dash__rows li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(6px, 1.1vh, 11px) 0; font-size: 14px; letter-spacing: -0.224px; color: var(--ash); border-bottom: 1px solid rgba(51, 51, 54, .6); }
.dash__rows li:last-child { border-bottom: 0; }
.dash__rows svg { width: 120px; height: 24px; fill: none; stroke: var(--porcelain); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

.layers { position: relative; z-index: 1; display: grid; gap: 8px; margin-top: 8px; }
.layer {
  position: relative;
  display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: baseline;
  padding: clamp(10px, 1.7vh, 16px) 24px;
  border-radius: 20px;
  background: #121214;
  box-shadow: 0 0 0 1px var(--keyline);
  will-change: transform, opacity;
}
.layer:nth-child(1) { z-index: 5; }
.layer:nth-child(2) { z-index: 4; background: #0d0f15; }
.layer:nth-child(3) { z-index: 3; background: #090d18; }
.layer:nth-child(4) { z-index: 2; background: #050c1d; }
.layer--root { background: var(--night); box-shadow: 0 0 0 1px var(--champagne); }
.layer__depth { grid-row: span 2; font-size: 12px; color: var(--slate); font-variant-numeric: tabular-nums; }
.layer__name { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.21; letter-spacing: 0.228px; color: var(--porcelain); }
.layer__note { font-size: 14px; line-height: 1.29; letter-spacing: -0.224px; color: var(--ash); }
.layer--root .layer__depth { color: var(--champagne); }

/* ---------- 5. Intervention ---------- */
.tile--level { display: flex; flex-direction: column; min-height: 320px; }
.tile--level .tile__num { margin-bottom: auto; padding-bottom: 56px; }
.tile--level .tile__text { margin-bottom: 28px; }
.tile__more { margin-top: auto; font-size: 14px; letter-spacing: -0.224px; color: var(--champagne-light); }
.tile__more i { font-style: normal; display: inline-block; margin-left: 4px; transition: transform .45s var(--ease); }
.tile--level:hover { box-shadow: 0 0 0 1px var(--champagne); }
.tile--level:hover .tile__more i { transform: translateX(6px); }

.method { margin-top: clamp(56px, 8vw, 96px); }
.method__line { height: 1px; background: var(--steel); position: relative; margin-bottom: 24px; }
.method__line span { position: absolute; inset: 0; background: var(--champagne); transform-origin: 0 50%; }
.method__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.method__steps li { counter-increment: step; position: relative; padding-top: 4px; }
.method__steps li::before {
  content: ""; position: absolute; left: 0; top: -28px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--champagne);
}
.method__steps b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.19; letter-spacing: 0.011em; color: var(--porcelain); }
.method__steps span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; color: var(--ash); }

/* ---------- 6. Preuve ---------- */
.proof { background: var(--obsidian); }
.proof__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block: 48px 40px; padding-top: 32px; border-top: 1px solid var(--steel); }
.stat dt { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: 0.007em; color: var(--porcelain); min-height: 56px; display: flex; align-items: flex-end; font-variant-numeric: tabular-nums; }
.stat dt small { font-size: 19px; color: var(--champagne-light); }
.stat:nth-child(3) dt { font-size: 19px; line-height: 1.21; }
.stat dd { margin-top: 12px; font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; color: var(--ash); }

/* ---------- Vision ---------- */
.vision { background: var(--obsidian); padding-block: clamp(60px, 10vw, 144px) var(--section); }
.vision .eyebrow { margin-bottom: clamp(24px, 4vw, 48px); }
.vision__line {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 6.2vw, 80px);
  line-height: 1.05; letter-spacing: -0.015em;
  color: var(--steel);
  transition: color .7s var(--ease);
}
.vision__line.is-on { color: var(--porcelain); }

/* ---------- 7. Invitation ---------- */
.invite { padding-top: 0; background: var(--obsidian); }
.panel--invite {
  position: relative; overflow: hidden;
  background: var(--night);
  box-shadow: 0 0 0 1px #0d1b3a;
  text-align: center;
  padding-block: clamp(64px, 10vw, 144px);
}
.panel--invite > * { position: relative; z-index: 1; }
.panel--invite .lead { margin-inline: auto; color: #a9afbf; }
.invite__mark {
  position: absolute !important; z-index: 0 !important;
  left: 50%; top: 50%; width: min(900px, 120%); max-width: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen; opacity: .13;
  pointer-events: none;
}
.steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  max-width: 860px; margin: clamp(40px, 5vw, 64px) auto;
  text-align: left;
}
.steps li {
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 0 0 1px rgba(231, 205, 166, .18);
  border-radius: 20px;
  padding: 20px;
  font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; color: var(--porcelain);
}
.steps span { display: block; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--champagne); margin-bottom: 20px; }
.invite__alt { margin-top: 28px; font-size: 14px; letter-spacing: -0.224px; color: #a9afbf; }

/* ---------- Pied de page ---------- */
.footer { background: var(--obsidian); border-top: 1px solid var(--keyline); padding-block: 64px 32px; font-size: 12px; line-height: 1.33; letter-spacing: -0.12px; color: var(--ash); }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 48px; }
.footer__brand p { margin-top: 16px; max-width: 320px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col h2 { font-size: 12px; font-weight: 600; color: var(--porcelain); margin-bottom: 4px; }
.footer__col a { transition: color .3s var(--ease); width: fit-content; }
.footer__col a:hover { color: var(--champagne-light); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 20px; border-top: 1px solid var(--keyline); color: var(--slate); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 900px) {
  /* la section épinglée tient dans un écran */
  .situations {
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(72px, 10vh, 120px) clamp(32px, 5vh, 64px);
  }
  .situations__head {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 64px; align-items: end;
  }
  .situations__head .eyebrow { grid-column: 1 / -1; }
  .situations__head .lead { margin-top: 0; }
  .tile--scene { min-height: clamp(250px, 38vh, 400px); }
}

@media (max-width: 899px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }

  .grid--3 { grid-template-columns: 1fr; }
  .tile--metric, .tile--level { min-height: 0; }
  .tile--level .tile__num { padding-bottom: 40px; }

  /* carrousel tactile natif à la place de l'épinglage */
  .situations__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .situations__viewport::-webkit-scrollbar { display: none; }
  .tile--scene { scroll-snap-align: center; width: min(82vw, 380px); min-height: 320px; }
  .situations__rail { display: none; }

  .media { aspect-ratio: 4 / 5; }
  .media img { object-position: 50% 40%; }

  .strata__pin { min-height: 0; padding-block: var(--section); }
  .strata__grid { grid-template-columns: 1fr; }
  .strata__stage { margin-top: 24px; }
  .strata__needle { left: -10px; }

  .method__line { display: none; }
  .method__steps { grid-template-columns: 1fr; gap: 0; border-left: 1px solid var(--steel); }
  .method__steps li { padding: 0 0 28px 24px; }
  .method__steps li:last-child { padding-bottom: 0; }
  .method__steps li::before { left: -4px; top: 8px; }

  .proof__grid { grid-template-columns: 1fr; }
  .media--portrait { max-width: 520px; }
  .stats { grid-template-columns: 1fr; gap: 28px; }
  .stat dt { min-height: 0; }

  .steps { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .hero__cluster { flex-direction: column; }
  .capsule { font-size: 12px; padding: 8px 16px; }
  .btn--lg { font-size: 15px; padding: 15px 24px; white-space: normal; text-align: center; }
  .footer__top { grid-template-columns: 1fr; }
  .dash__rows svg { width: 84px; }
}

/* ==========================================================================
   PAGES INTÉRIEURES
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: 120px; }

/* ---------- En-tête de page ---------- */
.phero {
  position: relative; overflow: hidden;
  background: var(--obsidian);
  min-height: min(86vh, 820px);
  display: flex; align-items: flex-end;
  padding: 140px 0 clamp(48px, 7vw, 90px);
}
.phero__needle {
  position: absolute; top: 44px; bottom: 0; right: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter)));
  width: 1px; background: var(--champagne);
  transform-origin: 50% 0;
}
.phero__needle::after { content: ""; position: absolute; left: -3px; top: 38%; width: 7px; height: 7px; border-radius: 50%; background: var(--champagne); }
.phero__inner { position: relative; }
.crumbs { display: flex; gap: 8px; font-size: 12px; line-height: 1.33; letter-spacing: -0.12px; color: var(--slate); margin-bottom: clamp(32px, 6vh, 64px); }
.crumbs a { color: var(--ash); transition: color .3s var(--ease); }
.crumbs a:hover { color: var(--porcelain); }
.crumbs [aria-current] { color: var(--porcelain); }
.phero .display { max-width: 12ch; }
.phero__lead {
  margin-top: 24px; max-width: 560px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(21px, 2.4vw, 32px); line-height: 1.13; letter-spacing: 0.004em;
  color: var(--ash);
}
.phero__levels { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 5vh, 56px); }
.phero__levels a {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 11px 20px; border-radius: 9999px;
  box-shadow: 0 0 0 1px var(--slate);
  font-size: 14px; letter-spacing: -0.224px; color: var(--porcelain);
  transition: box-shadow .4s var(--ease), color .4s var(--ease);
}
.phero__levels a span { font-size: 12px; color: var(--champagne); }
.phero__levels a:hover { box-shadow: 0 0 0 1px var(--champagne); color: var(--champagne-light); }
.js .phero [data-intro], .js .phero [data-page-title] { visibility: hidden; }

/* ---------- Navigation locale ---------- */
.localnav { position: sticky; top: 56px; z-index: 80; padding-inline: var(--gutter); margin-block: 0 -52px; pointer-events: none; }
.localnav__bar {
  pointer-events: auto;
  max-width: 1104px; margin-inline: auto; height: 52px;
  display: flex; align-items: center; gap: 28px;
  padding: 0 12px 0 24px;
  background: rgba(14, 14, 14, .86);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--r-nav);
  box-shadow: 0 0 0 1px var(--keyline);
}
.localnav__name { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.21; letter-spacing: 0.228px; margin-right: auto; }
.localnav__links { display: flex; gap: 24px; }
.localnav__links a { font-size: 14px; font-weight: 500; letter-spacing: -0.224px; color: var(--ash); white-space: nowrap; transition: color .3s var(--ease); }
.localnav__links a:hover { color: var(--porcelain); }
.localnav__links a.is-current { color: var(--champagne-light); }

.manifesto--page { padding-block: clamp(120px, 16vw, 210px) clamp(90px, 12vw, 144px); }

/* ---------- Niveaux ---------- */
.level { padding-block: var(--section); background: var(--obsidian); }
.level.section--carbon { background: linear-gradient(var(--carbon), var(--obsidian) 288px); }
.level__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.level__aside { position: sticky; top: 132px; }
.glyph { width: clamp(96px, 11vw, 150px); height: auto; fill: none; stroke: var(--champagne-light); stroke-width: 1.25; stroke-linecap: round; margin-bottom: 32px; }
.glyph [pathLength] { stroke-dasharray: 1; }
.glyph__dot { fill: var(--champagne); stroke: none; }
.level__num { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.21; letter-spacing: 0.228px; color: var(--champagne); margin-bottom: 16px; }
.level__num i { font-style: normal; color: var(--slate); margin-inline: 4px; }
.answer {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 1.7vw, 21px); line-height: 1.38; letter-spacing: 0.011em;
  color: var(--porcelain);
  max-width: 720px;
}
.section__head .answer { margin-top: 24px; }
.facets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.facet { font-size: 17px; line-height: 1.47; color: var(--ash); }
.facet:hover { box-shadow: 0 0 0 1px var(--slate); }
.facet--wide { grid-column: 1 / -1; }
.facet__label { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.21; letter-spacing: 0.228px; color: var(--porcelain); margin-bottom: 16px; }
.ticks li { position: relative; padding-left: 20px; }
.ticks li + li { margin-top: 8px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: var(--champagne); }
.formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.formats dt { font-weight: 600; font-size: 17px; color: var(--champagne-light); }
.formats dd { margin-top: 4px; font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; }
.level__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }

/* ---------- Comparatif (surface claire) ---------- */
.compare { background: var(--white); color: var(--carbon); border-radius: var(--r-card); padding: clamp(8px, 2vw, 24px) clamp(16px, 3vw, 40px); will-change: clip-path; }
.compare table { width: 100%; border-collapse: collapse; text-align: left; }
.compare thead th { font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); padding: 20px 16px 16px 0; }
.compare tbody th, .compare td { padding: 24px 16px 24px 0; border-top: 1px solid #d2d2d7; vertical-align: top; font-size: 17px; line-height: 1.47; }
.compare tbody th { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.19; letter-spacing: 0.011em; white-space: nowrap; }
.compare tbody th a { color: var(--carbon); transition: color .3s var(--ease); }
.compare tbody th a:hover { color: #8a6a34; }
.compare td { color: #424245; }
.compare td:last-child { color: var(--carbon); font-weight: 500; padding-right: 0; }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__head { position: sticky; top: 132px; }
.byline { margin-top: 24px; font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; color: var(--ash); }
.faq__list { display: grid; gap: 12px; }
.qa { background: var(--obsidian); border-radius: var(--r-nav); box-shadow: 0 0 0 1px var(--keyline); transition: box-shadow .4s var(--ease); }
.qa:hover, .qa[open] { box-shadow: 0 0 0 1px var(--slate); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.21; letter-spacing: 0.228px; color: var(--porcelain); }
.qa summary i { position: relative; flex: none; width: 16px; height: 16px; transition: transform .5s var(--ease); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--champagne); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i { transform: rotate(45deg); }
.qa p { padding: 0 24px 24px; color: var(--ash); max-width: 640px; }

.start .method { margin-top: clamp(56px, 8vw, 96px); }
.invite__actions--solo { margin-top: 40px; }

/* ---------- Notre approche ---------- */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media.media--center img { left: 0; width: 100%; object-position: 50% 35%; }
.media--center::after { background: rgba(0, 0, 0, .28); }
.h2 + .answer { margin-top: 24px; }

.compare--versus thead th:last-child, .compare--versus td:last-child { color: var(--carbon); }
.compare--versus thead th:last-child { color: #8a6a34; }
.compare--versus td:nth-child(2) { color: var(--slate); }
.compare--versus tbody th { font-size: 17px; white-space: normal; width: 22%; }

.principles { background: var(--obsidian); }
.principles__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.principles__head { position: sticky; top: 132px; }
.principles__head .answer { margin-top: 24px; }
.stack { display: grid; gap: 24px; padding-bottom: 8vh; }
.stack__card {
  position: sticky; top: calc(124px + var(--i, 0) * 14px);
  background: var(--carbon);
  border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--steel);
  padding: clamp(28px, 3.4vw, 48px);
  min-height: clamp(240px, 34vh, 320px);
  display: flex; flex-direction: column;
  transform-origin: 50% 0;
  will-change: transform;
}
.stack__card:nth-child(2) { --i: 1; }
.stack__card:nth-child(3) { --i: 2; }
.stack__card:nth-child(4) { --i: 3; }
.stack__card:nth-child(5) { --i: 4; }
.stack__card--root { background: var(--night); box-shadow: 0 0 0 1px var(--champagne); }
.stack__num { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: 0.228px; color: var(--champagne); margin-bottom: auto; padding-bottom: 40px; }
.stack__card p { margin-top: 12px; color: var(--ash); max-width: 520px; }
.stack__card--root p { color: #a9afbf; }

.nots { margin-top: clamp(56px, 8vw, 96px); }
.nots ul { display: flex; flex-wrap: wrap; gap: 12px; }
.nots li, .tags li {
  padding: 9px 18px; border-radius: 9999px;
  box-shadow: 0 0 0 1px var(--slate);
  font-size: 14px; letter-spacing: -0.224px; color: var(--ash);
}
.nots li { text-decoration: line-through; text-decoration-color: var(--champagne); text-decoration-thickness: 1px; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tags li { color: var(--porcelain); }
.proof .panel__label { margin-top: 0; }

.glossary { display: grid; gap: 12px; }
.term { background: var(--obsidian); border-radius: var(--r-nav); box-shadow: 0 0 0 1px var(--keyline); padding: 24px; transition: box-shadow .4s var(--ease); }
.term:hover { box-shadow: 0 0 0 1px var(--slate); }
.term dt { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.19; letter-spacing: 0.011em; color: var(--champagne-light); }
.term dd { margin-top: 10px; color: var(--ash); max-width: 640px; }

@media (max-width: 899px) {
  .grid--2, .principles__grid { grid-template-columns: 1fr; }
  .principles__head { position: static; }
  .stack__card { top: calc(64px + var(--i, 0) * 10px); min-height: 220px; }
}

/* ---------- Échange confidentiel ---------- */
.phero--short { min-height: min(68vh, 640px); }
.phero--short .display { max-width: 14ch; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__aside { position: sticky; top: 100px; }

.timeline { position: relative; margin-top: 40px; display: grid; gap: 28px; padding-left: 32px; }
.timeline__line { position: absolute; left: 3px; top: 8px; bottom: 8px; width: 1px; background: var(--steel); }
.timeline__line i { position: absolute; inset: 0; background: var(--champagne); transform-origin: 50% 0; }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -32px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--champagne); }
.timeline b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.19; letter-spacing: 0.011em; color: var(--porcelain); }
.timeline li > span { display: block; margin-top: 6px; color: var(--ash); max-width: 420px; }
.assure { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.assure li { padding: 9px 18px; border-radius: 9999px; box-shadow: 0 0 0 1px var(--slate); font-size: 14px; letter-spacing: -0.224px; color: var(--porcelain); }

.contact__panel { background: var(--carbon); border-radius: var(--r-card); padding: clamp(24px, 4vw, 48px); }
.form__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 2.6vw, 32px); line-height: 1.13; letter-spacing: 0.004em; margin-bottom: 28px; }
.field { margin-bottom: 20px; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.224px; color: var(--porcelain); margin-bottom: 8px; padding: 0; }
.field label em { font-style: normal; font-weight: 400; color: var(--ash); margin-left: 6px; }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%;
  font: inherit; font-size: 17px; color: var(--porcelain);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--slate);
  border-radius: 980px;
  padding: 13px 24px;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field textarea { border-radius: 20px; resize: vertical; min-height: 120px; line-height: 1.47; }
.field input::placeholder { color: var(--slate); }
.field input:hover, .field textarea:hover { border-color: var(--ash); }
.field input:focus-visible, .field textarea:focus-visible { outline: 1px solid var(--champagne); outline-offset: 1px; border-color: var(--champagne); border-radius: 980px; }
.field textarea:focus-visible { border-radius: 20px; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #e0a07a; }
.field__error { display: none; margin-top: 8px; font-size: 12px; letter-spacing: -0.12px; color: #e0a07a; }
.field.is-invalid .field__error { display: block; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; text-align: center; white-space: nowrap;
  padding: 12px 8px; border-radius: 980px;
  box-shadow: 0 0 0 1px var(--slate);
  font-size: 14px; font-weight: 400; letter-spacing: -0.224px; color: var(--ash);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.seg label:hover span { box-shadow: 0 0 0 1px var(--ash); color: var(--porcelain); }
.seg input:checked + span { background: var(--champagne); box-shadow: 0 0 0 1px var(--champagne); color: var(--night); font-weight: 500; }
.seg input:focus-visible + span { outline: 1px solid var(--champagne); outline-offset: 3px; }

.form__submit { width: 100%; margin-top: 12px; border: 0; cursor: pointer; font-family: inherit; }
.form__submit[disabled] { opacity: .6; cursor: default; }
.form__note { margin-top: 16px; font-size: 12px; line-height: 1.33; letter-spacing: -0.12px; color: var(--ash); text-align: center; }
.form__done { text-align: center; padding-block: clamp(24px, 6vw, 72px); }
.form__done .glyph { margin-inline: auto; }
.form__done .form__title { margin-bottom: 12px; }
.form__done p { color: var(--ash); max-width: 420px; margin-inline: auto; }
.form__alt { margin-top: 24px; font-size: 14px; letter-spacing: -0.224px; }

/* formulaires Tally intégrés */
.tally__frame { display: block; width: 100%; border: 0; background: transparent; color-scheme: normal; }
.tally .form__title { margin-bottom: 12px; }
.tally .form__alt { margin-top: 12px; font-size: 12px; text-align: center; color: var(--ash); }
.tally--lp { max-width: 640px; margin: 32px auto 0; text-align: left; }
.tally--lp .form__note, .tally--lp .form__alt { color: #a9afbf; }

.fit__card .ticks li { color: var(--ash); }
.fit__card { padding: clamp(28px, 3.4vw, 48px); }
.fit__card--no { background: transparent; }
.fit__card--no .ticks li::before { background: var(--slate); }
.direct__card { min-height: 220px; font-style: normal; }
.direct__card .tile__stat { font-size: clamp(17px, 1.55vw, 21px); line-height: 1.24; overflow-wrap: anywhere; }
.tile__more--mute { color: var(--ash); }

@media (max-width: 899px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__aside { position: static; }
  .contact__panel { order: -1; }
  .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Les 7 angles morts (page d'atterrissage) ---------- */
.phero--lp { align-items: center; min-height: min(100vh, 900px); padding-top: 110px; }
.lp__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.phero--lp .display { max-width: none; font-size: clamp(38px, 5.4vw, 72px); }
.lp__cluster { justify-content: flex-start; }
.lp__stage { display: flex; justify-content: center; }
.cover {
  position: relative; overflow: hidden;
  width: min(100%, 360px); aspect-ratio: 3 / 4.2;
  background: var(--night);
  border-radius: var(--r-card);
  box-shadow: 0 0 0 1px #1a2a4f;
  padding: 28px;
  display: flex; flex-direction: column;
  will-change: transform;
}
.cover__mark { position: absolute; right: -34%; top: -12%; width: 120%; max-width: none; mix-blend-mode: screen; opacity: .5; pointer-events: none; }
.cover > span { position: relative; }
.cover__brand { font-family: var(--font-brand); font-weight: 600; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne-light); }
.cover__num { margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: clamp(96px, 12vw, 150px); line-height: .9; letter-spacing: -0.03em; color: var(--champagne); }
.cover__title { margin-top: 12px; font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.19; letter-spacing: 0.011em; color: var(--porcelain); }
.cover__sub { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(231, 205, 166, .3); font-size: 12px; line-height: 1.33; letter-spacing: -0.12px; color: #a9afbf; }

.vision--lp { padding-top: clamp(60px, 8vw, 110px); }
.vision--lp .vision__line { font-size: clamp(24px, 3.6vw, 48px); line-height: 1.14; letter-spacing: -0.005em; padding-block: .32em; border-bottom: 1px solid var(--keyline); }

.blinds { background: var(--obsidian); }
.blinds__cta { margin-top: 28px; }
.blindlist li {
  display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: baseline;
  padding: 28px 0; border-top: 1px solid var(--steel);
}
.blindlist li:last-child { border-bottom: 1px solid var(--steel); }
.blindlist li > span { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1; color: var(--steel); font-variant-numeric: tabular-nums; transition: color .6s var(--ease); }
.blindlist h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.14; letter-spacing: 0.007em; color: var(--ash); transition: color .6s var(--ease); }
.blindlist p { margin-top: 8px; color: var(--slate); transition: color .6s var(--ease); max-width: 520px; }
.blindlist li.is-on > span { color: var(--champagne); }
.blindlist li.is-on h3 { color: var(--porcelain); }
.blindlist li.is-on p { color: var(--ash); }

.panel--form { padding-inline: clamp(24px, 5vw, 72px); }
.panel--form .h2 { max-width: 18ch; margin-inline: auto; }
.form--lp { max-width: 720px; margin: 40px auto 0; text-align: left; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form--lp .field input { background: rgba(255, 255, 255, .05); border-color: rgba(231, 205, 166, .35); }
.form--lp .form__note { color: #a9afbf; }
.form--lp .form__done { padding-block: 12px; }
.form--lp .form__done p { color: #a9afbf; }

.after__card { display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 48px); min-height: 340px; }
.after__card .tile__num { margin-bottom: auto; padding-bottom: 40px; }
.after__card .tile__text { margin-bottom: 24px; }
.after__card .tile__more { margin-top: 0; width: fit-content; transition: color .3s var(--ease); }
.after__card .tile__more:hover { color: var(--white); }
.after__card .tile__more:hover i { transform: translateX(6px); }
.tile__more--second { margin-top: 10px !important; color: var(--ash); }
.after__card .byline { margin-top: 20px; }

@media (max-width: 899px) {
  .phero--lp { padding-top: 96px; }
  .lp__grid { grid-template-columns: 1fr; }
  .cover { width: min(72vw, 300px); }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .blindlist li { grid-template-columns: 40px 1fr; padding: 22px 0; }
}

@media (max-width: 1099px) {
  .localnav__name { display: none; }
  .localnav__bar { padding-left: 20px; gap: 16px; }
  .localnav__links { overflow-x: auto; scrollbar-width: none; margin-right: auto; }
  .localnav__links::-webkit-scrollbar { display: none; }
}

@media (max-width: 899px) {
  .phero { min-height: 0; padding-top: 110px; }
  .phero__needle { display: none; }
  .localnav { top: 52px; }
  .localnav__bar .btn { display: none; }
  .localnav__bar { padding-right: 20px; }
  .level__grid, .faq__grid { grid-template-columns: 1fr; }
  .level__aside, .faq__head { position: static; }
  .glyph { margin-bottom: 24px; }
  .facets, .formats { grid-template-columns: 1fr; }

  /* le tableau devient une pile de fiches */
  .compare { padding: 8px 24px; }
  .compare thead { display: none; }
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare tr { padding: 24px 0; border-top: 1px solid #d2d2d7; }
  .compare tr:first-child { border-top: 0; }
  .compare tbody th, .compare td { border: 0; padding: 0; white-space: normal; }
  .compare td { margin-top: 14px; }
  .compare--versus tbody th { width: auto; font-size: 21px; }
  .compare td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll span { animation: none; }
  * { transition-duration: .01ms !important; }
}