/* ============================================================
   OPTIMA STUDIO — style.css
   Design system : dark navy-black + electric indigo (identité Optima)
   Fonts : Bricolage Grotesque (display) · Instrument Sans (body)
           Space Mono (labels/data) · Poppins (wordmark)
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* Couleurs — dérivées du logo (marine profond + bleu électrique) */
  --ink:        #05060F;
  --ink-2:      #0A0C1A;
  --surface:    #0F1330;
  --surface-2:  #151A3A;
  --line:       rgba(255, 255, 255, 0.08);
  --line-2:     rgba(255, 255, 255, 0.14);

  --blue:       #2E3BF5;
  --blue-bright:#4E5DFF;
  --blue-soft:  #8B96FF;
  --violet:     #6D5DFF;

  --text:       #EEF1FF;
  --muted:      #969DCB;
  --muted-2:    #6B7099;
  --white:      #FFFFFF;

  --grad-brand: linear-gradient(105deg, var(--blue-soft) 0%, var(--blue-bright) 45%, var(--violet) 100%);
  --grad-btn:   linear-gradient(120deg, var(--blue-bright), var(--blue) 60%, var(--violet));

  /* Type */
  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-body:    'Instrument Sans', system-ui, sans-serif;
  --f-mono:    'Fragment Mono', ui-monospace, monospace;
  --f-word:    'Poppins', system-ui, sans-serif;

  /* Layout */
  --container: 1200px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --radius: 22px;
  --radius-lg: 30px;

  /* Motion — une seule famille de courbes pour tout le site */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);          /* sorties/entrées UI */
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);      /* déplacements à l'écran */
  --t-fast: 0.2s;                                   /* micro-feedback */
  --t-med: 0.35s;                                   /* hover, états */
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--f-body);
  background: var(--ink);
  color: var(--text);
  line-height: 1.6;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.075rem);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Atmosphère : grille + halo fixes en fond */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  z-index: 0; pointer-events: none;
}
body::after {
  content: "";
  position: fixed; top: -20%; left: 50%; transform: translateX(-50%);
  width: 90vw; height: 60vh;
  background: radial-gradient(circle, rgba(46,59,245,0.28), transparent 62%);
  filter: blur(40px);
  z-index: 0; pointer-events: none;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--blue); color: #fff; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); position: relative; z-index: 2; }

/* Reveal — masqué uniquement si JS actif (anti-FOUC) */
.js [data-reveal] { opacity: 0; will-change: transform, opacity; }
.js [data-reveal-founder] { opacity: 0; will-change: transform, opacity; }

/* ---------- TYPO UTILITAIRES ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-soft);
  display: inline-flex; align-items: center; gap: 0.6em;
}
.eyebrow__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; /* sans ça, un eyebrow long (mobile) écrase le point en ovale */
  background: var(--blue-bright);
  box-shadow: 0 0 0 0 rgba(78,93,255,0.6);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(78,93,255,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(78,93,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(78,93,255,0); }
}

.grad {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* Le letter-spacing négatif des titres rogne la dernière glyphe quand le fond
     est clippé sur le texte : on élargit la boîte peinte sans décaler la mise en page. */
  padding-right: 0.08em; margin-right: -0.08em;
}

.mono-inline {
  font-family: var(--f-mono);
  color: var(--blue-soft);
  background: rgba(78,93,255,0.1);
  padding: 0.05em 0.4em; border-radius: 6px;
  font-size: 0.9em;
}

/* ---------- BOUTONS ---------- */
.btn {
  --pad: 0.85rem 1.4rem;
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: var(--pad);
  border-radius: 100px;
  font-family: var(--f-body);
  font-weight: 600; font-size: 0.98rem;
  letter-spacing: 0.01em;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
  white-space: nowrap; position: relative;
}
.btn--sm  { --pad: 0.6rem 1.1rem; font-size: 0.9rem; }
.btn--lg  { --pad: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn--full { width: 100%; justify-content: center; }
.btn__arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
/* Feedback de pression : l'interface écoute (les boutons magnétiques
   reçoivent le même feedback via GSAP, voir initMagnetic) */
.btn:active { transform: scale(0.97); }
.chip:active, .burger:active { transform: scale(0.95); }

.btn--primary {
  background: var(--grad-btn);
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(46,59,245,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -10px rgba(78,93,255,0.75), inset 0 1px 0 rgba(255,255,255,0.3); }

.btn--ghost {
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--blue-soft); background: rgba(78,93,255,0.08); transform: translateY(-2px); }

/* ---------- HEADER ---------- */
.header {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.1rem 0;
  transition: transform 0.45s var(--ease), background 0.4s var(--ease), padding 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: rgba(5,6,15,0.72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
  padding: 0.7rem 0;
}
.header.hidden { transform: translateY(-100%); }
.header__inner { display: flex; align-items: center; gap: 1rem; }

.logo { display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.logo__mark { display: inline-flex; }
.logo__mark svg { overflow: visible; }
.lm-frame { stroke: var(--text); stroke-width: 8; }
.lm-dot   { fill: var(--blue-bright); transform-origin: 34px 35px; transition: transform var(--t-fast) var(--ease); }
.logo:hover .lm-dot { transform: scale(1.4); }
.lm-caret { stroke: var(--blue-bright); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.logo__word { font-family: var(--f-word); font-weight: 700; font-size: 1.28rem; letter-spacing: -0.01em; line-height: 1; }
.logo__word-a { color: var(--text); }
.logo__word-b { color: var(--blue-bright); }

.nav { display: flex; gap: 0.15rem; margin-left: auto; padding: 0.22rem; border: 1px solid var(--line); border-radius: 100px; background: rgba(255,255,255,0.03); }
.nav__link {
  font-size: 0.84rem; color: var(--muted); white-space: nowrap;
  padding: 0.4rem 0.72rem; border-radius: 100px;
  transition: color var(--t-med) var(--ease), background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link.is-active { color: #fff; background: var(--grad-btn); box-shadow: 0 8px 18px -8px rgba(46,59,245,0.6); }
.header__cta { flex-shrink: 0; }
/* La nav segmentée est plus large que l'ancien texte : bascule mobile plus tôt pour ne jamais rogner le CTA */
@media (max-width: 960px) {
  .nav, .header__cta { display: none; }
}

.burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); position: relative; }
.burger span { position: absolute; left: 11px; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { bottom: 16px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }
/* Burger dès ≤960px — placé APRÈS la règle de base .burger{display:none} pour gagner la cascade */
@media (max-width: 960px) { .burger { display: block; } }

/* Menu mobile */
.mobile-nav {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(5,6,15,0.96);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
}
body.menu-open .mobile-nav { opacity: 1; visibility: visible; }
.mobile-nav nav { display: flex; flex-direction: column; gap: 1.4rem; text-align: center; }
.mobile-nav__link { font-family: var(--f-display); font-weight: 600; font-size: 2rem; color: var(--text); }
.mobile-nav__cta { margin-top: 1rem; align-self: center; }

/* Entrée en cascade des liens à l'ouverture du menu */
.mobile-nav__link, .mobile-nav__cta {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
body.menu-open .mobile-nav__link, body.menu-open .mobile-nav__cta { opacity: 1; transform: none; }
body.menu-open .mobile-nav__link:nth-child(1) { transition-delay: 0.06s; }
body.menu-open .mobile-nav__link:nth-child(2) { transition-delay: 0.11s; }
body.menu-open .mobile-nav__link:nth-child(3) { transition-delay: 0.16s; }
body.menu-open .mobile-nav__link:nth-child(4) { transition-delay: 0.21s; }
body.menu-open .mobile-nav__link:nth-child(5) { transition-delay: 0.26s; }
body.menu-open .mobile-nav__cta { transition-delay: 0.32s; }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8rem 0 5rem; overflow: hidden;
}
.hero__content { text-align: center; max-width: 960px; }

.hero__eyebrow { margin-bottom: 1.6rem; color: #cdd3ff; text-shadow: 0 0 3px rgba(4,6,16,0.9), 0 0 10px rgba(4,6,16,0.85), 0 1px 2px rgba(4,6,16,0.95); }
.hero__eyebrow .eyebrow__pulse { box-shadow: 0 0 8px 2px rgba(4,6,16,0.6), 0 0 0 0 rgba(78,93,255,0.6); }

/* Étiquette de délai — épinglée en coin haut-droite, sous le header */
.hero__badge {
  position: absolute; top: 5.6rem; right: var(--pad-x); z-index: 4;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--f-display); font-weight: 700; font-size: 0.8rem; letter-spacing: -0.01em;
  color: var(--text);
  padding: 0.42rem 0.82rem; border-radius: 100px;
  background: var(--ink); border: 1.5px solid transparent;
  background-image: linear-gradient(var(--ink), var(--ink)), var(--grad-brand);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,0.8);
  white-space: nowrap;
}
.hero__badge-ic { width: 14px; height: 14px; flex-shrink: 0; color: var(--blue-soft); }
@media (max-width: 600px) {
  .hero__badge { top: 4.3rem; right: 1rem; font-size: 0.72rem; padding: 0.4rem 0.75rem; letter-spacing: -0.01em; }
}
.hero__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  line-height: 1.02; letter-spacing: -0.03em;
  margin-bottom: 1.6rem;
  text-wrap: balance;
}
.hero__title .line { display: block; }

.hero__sub {
  max-width: 640px; margin: 0 auto 2.4rem;
  color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); line-height: 1.55;
}
.hero__sub strong { color: var(--text); font-weight: 600; }
/* 2e appui du sous-titre : la promesse, en bleu de marque et graisse normale —
   hiérarchisée sous l'appui blanc, et sans 2e dégradé face au titre. */
.hero__sub-accent { color: var(--blue-soft); }

.hero__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.2rem; }

.hero__trust {
  font-family: var(--f-mono); font-size: 0.8rem; color: #aab2d8;
  display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; letter-spacing: 0.03em;
  text-shadow: 0 0 3px rgba(4,6,16,0.9), 0 0 10px rgba(4,6,16,0.85), 0 1px 2px rgba(4,6,16,0.95);
}
.dot-sep { color: var(--blue); }

.hero__scroll { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); width: 26px; height: 42px; border: 1.5px solid var(--line-2); border-radius: 20px; display: flex; justify-content: center; padding-top: 7px; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.hero__scroll:hover { border-color: var(--blue-soft); transform: translateX(-50%) translateY(2px); }
.hero__scroll-line { width: 3px; height: 8px; background: var(--blue-soft); border-radius: 4px; animation: scrollcue 1.8s infinite; }
@keyframes scrollcue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* Living wall — essaim de fenêtres de navigateur en dérive lente */
.hero__wall { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.wall-layer { position: absolute; inset: 0; will-change: transform; }

.bw {
  position: absolute;
  border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px -26px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
  will-change: transform;
}
.bw--front {
  border-color: rgba(78,93,255,0.28);
  box-shadow: 0 30px 70px -26px rgba(0,0,0,0.7), 0 0 44px -18px rgba(78,93,255,0.45);
}
.bw--mid  { opacity: 0.72; }
.bw--back { opacity: 0.5; }
@media (min-width: 768px) {
  .bw--mid  { filter: blur(1px); }
  .bw--back { filter: blur(3px); }
}
/* Mobile : présence discrète, le texte reste roi */
@media (max-width: 767px) {
  .bw--front { opacity: 0.7; }
  .bw--mid   { opacity: 0.45; }
  .bw--back  { opacity: 0.3; }
}

.bw__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--line);
}
.bw__dots { display: flex; gap: 4px; flex-shrink: 0; }
.bw__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.bw__url {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.02em;
  color: var(--muted-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 100px; padding: 2.5px 9px;
  white-space: nowrap; overflow: hidden;
}
.bw__lock { width: 5px; height: 5px; border-radius: 50%; background: var(--blue-soft); flex-shrink: 0; }
.bw__body { padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.bw__body--shot { padding: 0; gap: 0; }
.bw__body--shot img { display: block; width: 100%; height: auto; }

/* Atomes de mise en page des aperçus */
.mock__hero { height: 46px; border-radius: 8px; }
.mock__row { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.09); }
.mock__row.sm { width: 55%; }
.mock__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mock__tile { height: 34px; border-radius: 7px; background: rgba(255,255,255,0.06); }
.mock__pill { height: 16px; width: 48%; border-radius: 100px; }

.hero__wall-mask {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 54% 44% at 50% 45%, rgba(5,6,15,0.92), rgba(5,6,15,0.42) 62%, transparent 80%),
    linear-gradient(to bottom, var(--ink) 0%, transparent 16%, transparent 80%, var(--ink) 100%);
}
.hero__aurora {
  position: absolute; z-index: 1; width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
  left: 50%; top: 42%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(109,93,255,0.26), rgba(78,93,255,0.10) 45%, transparent 66%);
  filter: blur(60px); pointer-events: none;
  animation: heroAurora 16s ease-in-out infinite;
}
@keyframes heroAurora {
  0%, 100% { transform: translate(-54%, -50%) scale(0.92); opacity: 0.72; }
  50%      { transform: translate(-46%, -44%) scale(1.12); opacity: 1; }
}

/* ---------- OUVERTURE (intro : logo qui se construit puis voile qui s'ouvre) ---------- */
/* top/left/right + height explicite (plutôt que inset:0, qui suit la petite
   viewport) : sur mobile, la barre d'adresse qui se rétracte pendant les 2,5s
   de l'animation agrandit la fenêtre visible, et un voile calé sur la petite
   viewport laissait alors apparaître le bas du héro ("Hébergement, domaine…")
   sous le rideau. 100lvh = la plus grande viewport possible, jamais dépassée. */
/* Visible dès le tout premier paint (pas de display:none à activer par JS) :
   sinon, le temps que main.js s'exécute (après le chargement de GSAP/Lenis
   via CDN), le héro s'affiche une fraction de seconde avant que le voile ne
   vienne le recouvrir — flash visible. Le voile + le tracé du logo dans son
   état par défaut (non animé) servent déjà de "poster" figé qui masque le
   héro sans dépendre du JS ; seule l'ANIMATION (tracé, ouverture du voile)
   est encore déclenchée par .intro--play. Le cas "déjà vu cette session" est
   géré en amont par un script inline dans <head> (classe .intro-skip) pour
   qu'aucun flash de ce voile n'apparaisse non plus au rechargement. */
.intro { display: block; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 9999; }
html.intro-skip .intro { display: none; }
/* Dégradé construit à partir des vrais tokens de fond (--ink-2 → --ink) :
   quand le voile s'ouvre, la couleur se raccorde exactement au fond réel
   du site (hero, body::before/after), sans à-coup de teinte. */
.intro__veil { position: absolute; left: 0; right: 0; height: 50%; background: linear-gradient(160deg, var(--ink-2), var(--ink)); will-change: transform; }
.intro__veil--top { top: 0; border-bottom: 1px solid rgba(139,150,255,0.15); }
.intro__veil--bot { bottom: 0; }
.intro__logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(0.5rem,1.6vw,1.1rem); }
.intro__mark { width: clamp(52px,7vw,74px); height: auto; flex-shrink: 0; overflow: visible; }
.intro__mark .lm-frame { fill: none; stroke: var(--text); stroke-width: 8; }
.intro__mark .lm-caret { fill: none; stroke: var(--blue-bright); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.intro__mark .lm-dot { fill: var(--blue-bright); transform: scale(0); transform-origin: 34px 35px; }
.intro__word { font-family: var(--f-word); font-weight: 700; font-size: clamp(2.1rem,6vw,3.8rem); letter-spacing: -0.02em; white-space: nowrap; clip-path: inset(0 100% 0 0); }
.intro__word .logo__word-a { color: var(--text); }
.intro__word .logo__word-b { color: var(--blue-bright); }
.intro--play .intro__mark .lm-frame, .intro--play .intro__mark .lm-caret { stroke-dasharray: 400; stroke-dashoffset: 400; animation: introDraw 0.9s ease forwards 0.2s; }
.intro--play .intro__mark .lm-dot { animation: introDot 0.4s cubic-bezier(.34,1.56,.64,1) forwards 0.85s; }
.intro--play .intro__word { animation: introWord 0.7s cubic-bezier(.6,0,.2,1) forwards 0.7s; }
.intro--play .intro__logo { animation: introLogoOut 0.4s ease forwards 1.5s; }
.intro--play .intro__veil--top { animation: introTop 0.85s cubic-bezier(.7,0,.15,1) forwards 1.55s; }
.intro--play .intro__veil--bot { animation: introBot 0.85s cubic-bezier(.7,0,.15,1) forwards 1.55s; }
@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introDot { to { transform: scale(1); } }
@keyframes introWord { to { clip-path: inset(0 0 0 0); } }
@keyframes introLogoOut { to { opacity: 0; transform: scale(1.06); } }
@keyframes introTop { to { transform: translateY(-100%); } }
@keyframes introBot { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }

/* ---------- MARQUEE (activités) ---------- */
.marquee-band { border-block: 1px solid var(--line); background: var(--ink-2); padding: 1.5rem 0; overflow: hidden; position: relative; z-index: 3; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 2.4rem; width: max-content; will-change: transform; }
.marquee__track span { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.9rem); color: var(--muted); white-space: nowrap; }
.marquee__star { color: var(--blue-bright) !important; font-size: 1rem !important; }

/* Bandeau métiers — tuiles d'icônes */
.marquee__track .job { display: inline-flex; align-items: center; gap: 0.8rem; }
.marquee__track .job__tile {
  width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(158deg, #1c2255 0%, #10132e 100%);
  border: 1px solid rgba(139,150,255,0.28);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.14), inset 0 -8px 16px -8px rgba(0,0,0,0.6), 0 12px 26px -12px rgba(0,0,0,0.7), 0 0 26px -16px rgba(78,93,255,0.7);
  color: var(--blue-soft);
}
.marquee__track .job__tile svg { width: 25px; height: 25px; }
.marquee__track .job__lbl { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.15rem, 2.1vw, 1.55rem); color: var(--text); white-space: nowrap; letter-spacing: -0.01em; }

/* ---------- SECTIONS (générique) ---------- */
.section { padding: clamp(5rem, 10vw, 9rem) 0; position: relative; }
.section__head { max-width: 760px; margin: 0 auto clamp(3rem, 6vw, 4.5rem); text-align: center; }
.section__head--center { text-align: center; }
.section__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.025em;
  margin: 0.9rem 0 1.2rem;
  text-wrap: balance;
}
.section__title--left { text-align: left; }
.section__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); text-wrap: pretty; }
.section__lead strong { color: var(--text); font-weight: 600; }

/* ---------- CONSTAT (pain grid) ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.pain-card {
  position: relative; padding: 2.2rem 2rem 2rem;
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
  overflow: hidden;
}
.pain-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), rgba(78,93,255,0.14), transparent 40%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.pain-card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.pain-card:hover::before { opacity: 1; }
.pain-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--radius) 0 0 var(--radius); background: linear-gradient(180deg, var(--blue-bright), #EF6B4E); opacity: 0.85; }
.pain-card__idx { display: block; font-family: var(--f-display); font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.3px rgba(139,150,255,0.38); }
.pain-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; line-height: 1.16; margin: 0.6rem 0 1rem; letter-spacing: -0.01em; }
.pain-card__cost { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1.02rem; color: #F2A990; line-height: 1.35; }
.pain-card__cost svg { width: 15px; height: 15px; color: #EF8A6B; flex-shrink: 0; transform: translateY(3px); }
.pain-card__cost strong { font-weight: 600; color: #F6BCA8; }

/* ---------- MÉTHODE (parcours au scroll) ---------- */
.methode-stage { position: relative; }
.methode-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* --- Repli (sans JS / reduced-motion / mobile) : étapes empilées, visibles --- */
.methode-body { display: block; max-width: 780px; margin-inline: auto; }
.methode-build { display: none; }

.methode-panels { list-style: none; display: flex; flex-direction: column; gap: 2.4rem; position: relative; }
.mstep { position: relative; padding-left: 3.6rem; }
.mstep__num {
  position: absolute; left: 0; top: 0.1rem;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-weight: 700; font-size: 0.85rem;
  color: var(--blue-soft);
  border: 1px solid var(--line-2); background: rgba(78,93,255,0.06);
}
.mstep__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.mstep__title em { font-style: normal; color: var(--blue-soft); font-size: 0.66em; font-family: var(--f-mono); }
.mstep__text { color: var(--muted); max-width: 52ch; }

/* Mockups « design sur-mesure » de l'étape 2 (réutilise les atomes .mock__*) */
.mstep__mocks { display: flex; gap: 1rem; margin-top: 1.7rem; }
.mini-bw {
  flex: 0 0 auto; width: clamp(148px, 19vw, 196px);
  border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 50px -26px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
.mini-bw--b { margin-top: 1.8rem; }
.mini-bw__bar { display: flex; gap: 5px; padding: 8px 10px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--line); }
.mini-bw__bar span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.mini-bw__body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }

/* --- Mode interactif (desktop épinglé) : ajouté par le JS --- */
.methode--interactive { padding-top: 0; }
.methode--interactive .methode-stage {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  /* Plus de marge en haut qu'en bas : la scène est épinglée sous le header
     fixe, il faut un vrai espace de respiration sous la nav, pas un centrage
     strict qui colle l'eyebrow au menu. */
  padding: clamp(6.5rem, 14vh, 9.5rem) 0 clamp(3rem, 6vh, 6rem);
}
.methode--interactive .methode-body {
  display: grid; grid-template-columns: clamp(300px, 32vw, 430px) 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
  max-width: var(--container);
}
.methode--interactive .methode-build { display: block; }

/* Fenêtre-chantier : le site se construit en direct pendant le parcours */
.build {
  position: relative; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  box-shadow: 0 44px 90px -44px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color 0.8s var(--ease), box-shadow 0.8s var(--ease);
}
.build__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--line);
}
.build__dots { display: flex; gap: 5px; flex-shrink: 0; }
.build__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.build__url {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.02em;
  color: var(--muted-2);
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  border-radius: 100px; padding: 5px 13px;
  white-space: nowrap; overflow: hidden;
  transition: color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.build__lock { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); flex-shrink: 0; transition: background 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.build__live {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #7CE7B0; border: 1px solid rgba(124,231,176,0.4); background: rgba(124,231,176,0.08);
  padding: 0.32em 0.75em; border-radius: 100px; flex-shrink: 0;
  opacity: 0; transform: scale(0.85);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.build__body { position: relative; padding: 20px; min-height: 316px; }

/* Phase 0 — l'échange (bulles de conversation) */
.build__chat {
  position: absolute; inset: 18px;
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), filter 0.5s var(--ease);
}
.build__bubble {
  max-width: 82%; padding: 0.55em 0.9em; border-radius: 14px;
  font-size: 0.8rem; line-height: 1.4; color: var(--text);
}
.build__bubble--in  { align-self: flex-start; background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.build__bubble--out { align-self: flex-end; background: var(--grad-btn); border-bottom-right-radius: 4px; box-shadow: 0 8px 20px -8px rgba(46,59,245,0.5); }
.build__bubble--typing { display: inline-flex; gap: 4px; padding: 0.75em 0.95em; }
.build__bubble--typing i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
  animation: typing 1.2s infinite;
}
.build__bubble--typing i:nth-child(2) { animation-delay: 0.18s; }
.build__bubble--typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* Dernière réponse révélée au scroll : un « fantôme » invisible réserve la
   hauteur finale (les autres bulles ne bougent jamais) ; la bulle vivante,
   posée par-dessus et calée en haut, se resserre d'abord sur les 3 points
   « en train d'écrire » puis s'étire à la taille du message. */
.chat-last { position: relative; align-self: flex-start; max-width: 82%; }
.chat-last__ghost, .chat-last__live { display: inline-block; max-width: 100%; }
.chat-last__ghost { visibility: hidden; }
.chat-last__live { position: absolute; top: 0; left: 0; }
.chat-answer__text { display: block; }
.chat-answer__dots { display: none; align-items: center; gap: 4px; }
.chat-answer__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); display: inline-block; animation: typing 1.2s infinite; }
.chat-answer__dots i:nth-child(2) { animation-delay: 0.18s; }
.chat-answer__dots i:nth-child(3) { animation-delay: 0.36s; }
.methode--interactive .build__chat:not(.is-answered) .chat-last__live .chat-answer__text { display: none; }
.methode--interactive .build__chat:not(.is-answered) .chat-last__live .chat-answer__dots { display: inline-flex; }
.build:not([data-phase="0"]) .build__chat { opacity: 0; transform: translateY(-16px); filter: blur(4px); pointer-events: none; }

/* Phases 1+ — le design s'assemble bloc par bloc */
.build__design { display: flex; flex-direction: column; gap: 12px; }
.build__el { opacity: 0; transform: translateY(18px) scale(0.97); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.build__el:nth-child(2) { transition-delay: 0.08s; }
.build__el:nth-child(3) { transition-delay: 0.16s; }
.build__el:nth-child(4) { transition-delay: 0.24s; }
.build__el:nth-child(5) { transition-delay: 0.32s; }
.build:not([data-phase="0"]) .build__el { opacity: 1; transform: none; }
/* border toujours présente (transparente une fois encrée) → aucun saut de layout */
.build__hero { position: relative; height: 84px; border-radius: 10px; background: var(--grad-btn); border: 1.5px dashed transparent; transition: background 0.7s var(--ease), border-color 0.7s var(--ease); }
.build__row { height: 11px; border-radius: 6px; background: rgba(255,255,255,0.09); transition: background 0.7s var(--ease); }
.build__row--sm { width: 58%; }
.build__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.build__grid span { height: 52px; border-radius: 8px; background: rgba(255,255,255,0.06); display: block; border: 1.5px dashed transparent; transition: background 0.7s var(--ease), border-color 0.7s var(--ease); }
.build__pill { height: 26px; width: 45%; border-radius: 100px; background: var(--grad-btn); border: 1.5px dashed transparent; transition: background 0.7s var(--ease), border-color 0.7s var(--ease); }

/* ····· PHASE 1 — L'ATELIER : maquette filaire, sélection, curseur ····· */
.build[data-phase="1"] .build__hero { background: rgba(78,93,255,0.10); border-color: rgba(139,150,255,0.55); }
.build[data-phase="1"] .build__pill { background: rgba(78,93,255,0.12); border-color: rgba(139,150,255,0.45); }
.build[data-phase="1"] .build__grid span { background: rgba(255,255,255,0.03); border-color: rgba(139,150,255,0.28); }
.build[data-phase="1"] .build__row { background: rgba(255,255,255,0.05); }

/* Poignées de sélection (façon outil de design) autour du bloc héro */
.build__handles { position: absolute; inset: -6px; opacity: 0; transition: opacity 0.45s var(--ease); pointer-events: none; }
.build__handles::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(139,150,255,0.7); border-radius: 4px; }
.build__handles i { position: absolute; width: 8px; height: 8px; background: var(--ink); border: 1.5px solid var(--blue-soft); border-radius: 2px; }
.build__handles i:nth-child(1) { top: -4px; left: -4px; }
.build__handles i:nth-child(2) { top: -4px; right: -4px; }
.build__handles i:nth-child(3) { bottom: -4px; left: -4px; }
.build__handles i:nth-child(4) { bottom: -4px; right: -4px; }
.build[data-phase="1"] .build__handles { opacity: 1; }

/* Curseur collaboratif « Ugo » qui travaille sur la maquette */
.build__cursor {
  position: absolute; top: 92px; left: 52%; z-index: 2;
  display: inline-flex; align-items: flex-start; gap: 2px;
  opacity: 0; transition: opacity 0.45s var(--ease);
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.build__cursor em {
  font-style: normal; font-family: var(--f-body); font-weight: 600; font-size: 0.68rem;
  color: #fff; background: var(--grad-btn);
  padding: 0.22em 0.65em; border-radius: 100px;
  transform: translateY(10px);
}
.build[data-phase="1"] .build__cursor { opacity: 1; animation: cursor-work 7s ease-in-out infinite; }
@keyframes cursor-work {
  0%, 100% { transform: translate(0, 0); }
  22%      { transform: translate(-58px, 38px); }
  48%      { transform: translate(34px, 96px); }
  74%      { transform: translate(-24px, 150px); }
}

/* ····· PHASE 2 — LE LANCEMENT : la maquette s'encre + reflet + URL ····· */
.build__shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.14) 50%, transparent 62%);
  transform: translateX(-130%);
}
.build[data-phase="2"] .build__shine { animation: shine-sweep 1.15s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards; }
@keyframes shine-sweep { to { transform: translateX(130%); } }
.build[data-phase="2"] .build__url, .build[data-phase="3"] .build__url { color: var(--text); border-color: rgba(78,93,255,0.4); }
.build[data-phase="2"] .build__lock, .build[data-phase="3"] .build__lock { background: #7CE7B0; box-shadow: 0 0 9px rgba(124,231,176,0.8); }
.build[data-phase="2"] .build__live, .build[data-phase="3"] .build__live { opacity: 1; transform: scale(1); }

/* ····· PHASE 3 — LA VIE : notifications empilées + courbe de visites ····· */
.build__life {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.build__notif {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 0.67rem; color: var(--text);
  background: rgba(5,6,15,0.88); border: 1px solid var(--line-2);
  padding: 0.55em 0.9em; border-radius: 10px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.7);
  opacity: 0; transform: translateX(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.build__notif:nth-child(1) { color: #7CE7B0; border-color: rgba(124,231,176,0.35); }
.build__notif b { font-weight: 400; color: var(--blue-bright); letter-spacing: 0.1em; }
.build__notif i { width: 6px; height: 6px; border-radius: 50%; background: #7CE7B0; box-shadow: 0 0 7px rgba(124,231,176,0.8); }
.build[data-phase="3"] .build__notif { opacity: 1; transform: none; }
.build[data-phase="3"] .build__notif:nth-child(1) { transition-delay: 0.15s; }
.build[data-phase="3"] .build__notif:nth-child(2) { transition-delay: 0.55s; }
.build[data-phase="3"] .build__notif:nth-child(3) { transition-delay: 0.95s; }

.build__stats {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: 9px;
  padding: 0.55em 0.85em; border-radius: 10px;
  background: rgba(5,6,15,0.88); border: 1px solid var(--line-2);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.7);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s var(--ease) 0.35s, transform 0.5s var(--ease) 0.35s;
}
.build__stats svg { width: 62px; height: 22px; display: block; }
.build__stats span { font-family: var(--f-mono); font-size: 0.65rem; color: var(--blue-soft); }
.build__spark {
  stroke: var(--blue-bright); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 130; stroke-dashoffset: 130;
}
.build[data-phase="3"] .build__stats { opacity: 1; transform: none; }
.build[data-phase="3"] .build__spark { animation: spark-draw 1.3s var(--ease) 0.6s forwards; }
@keyframes spark-draw { to { stroke-dashoffset: 0; } }

.build[data-phase="3"] {
  border-color: rgba(78,93,255,0.45);
  box-shadow: 0 44px 100px -40px rgba(46,59,245,0.55), 0 0 60px -20px rgba(78,93,255,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Progression continue du parcours (bas de la fenêtre) */
.build__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px;
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left center;
}

.methode--interactive .methode-panels { min-height: 50vh; }
.methode--interactive .mstep {
  position: absolute; inset: 0; padding-left: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden;
  transform: translateY(30px); filter: blur(6px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.methode--interactive .mstep.is-active {
  opacity: 1; visibility: visible; transform: none; filter: blur(0);
}
.methode--interactive .mstep__num { position: static; margin-bottom: 1.3rem; width: 3rem; height: 3rem; font-size: 1rem; }
.methode--interactive .mstep__title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); white-space: nowrap; }
.methode--interactive .mstep__text { font-size: 1.12rem; }
/* Entre le mobile (≤768px) et ~1000px, la colonne de texte devient trop
   étroite pour le titre de l'étape 2 ("On conçoit, 100% sur-mesure") sur
   une ligne à la taille clamp() normale — il coupait au milieu du mot. */
@media (min-width: 769px) and (max-width: 1000px) {
  .methode--interactive .mstep__title { font-size: 1.35rem; }
}
/* La fenêtre-chantier montre déjà le design en train de naître :
   les mini-mockups du panneau 2 ne servent qu'au repli empilé (mobile). */
.methode--interactive .mstep__mocks { display: none; }

.methode__quote {
  text-align: center; max-width: 760px; margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em;
}

/* ---------- OFFRE ---------- */
.offer-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 1.6rem; align-items: stretch; }
.offer-card {
  position: relative; padding: 2.6rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform 0.4s var(--ease); overflow: hidden;
}
.offer-card--sub {
  background: linear-gradient(165deg, rgba(46,59,245,0.14), rgba(15,19,48,0.6));
  border-color: rgba(78,93,255,0.35);
}
.offer-card--sub::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.5; pointer-events: none;
}
.offer-card__top { padding-bottom: 1.6rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.offer-card--gift { overflow: visible; }
.offer-card__gift {
  position: absolute; top: -13px; right: -6px; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--f-display); font-weight: 700; font-size: 0.8rem; letter-spacing: -0.01em; color: var(--text);
  padding: 0.42rem 0.82rem; border-radius: 100px;
  background: var(--ink); border: 1.5px solid transparent;
  background-image: linear-gradient(var(--ink), var(--ink)), var(--grad-brand);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,0.8);
}
.offer-card__gift svg { width: 14px; height: 14px; color: var(--blue-soft); flex-shrink: 0; }
.offer-card__tag { display: inline-block; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0.35em 0.9em; border: 1px solid var(--line-2); border-radius: 100px; margin-bottom: 1.1rem; }
.offer-card__tag--accent { color: var(--blue-soft); border-color: rgba(78,93,255,0.4); background: rgba(78,93,255,0.08); }
.offer-card__title { font-family: var(--f-display); font-weight: 800; font-size: 1.85rem; letter-spacing: -0.02em; margin-bottom: 0.7rem; }
.offer-card__desc { color: var(--muted); }

.offer-list { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }
.offer-list li { position: relative; padding-left: 1.9rem; color: var(--text); font-weight: 500; }
.offer-list li::before {
  content: ""; position: absolute; left: 0; top: 0.15em; width: 20px; height: 20px; border-radius: 6px;
  background: rgba(78,93,255,0.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E5DFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px; background-repeat: no-repeat; background-position: center;
}
.offer-list--rich li { padding-left: 1.9rem; }
.offer-list--rich strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; margin-bottom: 0.15rem; }
.offer-list--rich li { color: var(--muted); font-weight: 400; margin-bottom: 0.4rem; }

.offer-note {
  margin-top: 2.6rem; padding: 2rem 2.4rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
}
.offer-note p { color: var(--muted); max-width: 640px; }
.offer-note strong { color: var(--text); }

/* Offre — bandeau « design offert » + phrase d'impact */
.offre-offert {
  border: 1px solid rgba(139,150,255,0.3); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(78,93,255,0.12), rgba(109,93,255,0.06));
  padding: 2rem 2.2rem; margin-bottom: 1.6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
}
.offre-offert__l { max-width: 62%; }
.offre-offert__k { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-soft); }
.offre-offert__t { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); letter-spacing: -0.02em; color: var(--text); margin: 0.4rem 0 0.7rem; text-wrap: balance; }
.offre-offert__d { color: var(--muted); }
.offre-offert__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.offre-offert__chips span { font-family: var(--f-mono); font-size: 0.72rem; color: var(--blue-soft); border: 1px solid var(--line-2); border-radius: 100px; padding: 0.3rem 0.7rem; }
.offre-offert__r { text-align: center; flex-shrink: 0; }
.offre-offert__big { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 2rem + 2.4vw, 3.8rem); letter-spacing: -0.03em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.offre-offert__sm { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-top: 0.4rem; }

.offre-impact { text-align: center; margin: 2.6rem auto 0; max-width: 820px; }
.offre-impact p { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.offre-impact .offre-impact__list { font-weight: 700; font-size: clamp(1rem, 0.9rem + 0.55vw, 1.28rem); color: var(--muted); letter-spacing: -0.01em; margin-bottom: 0.55rem; white-space: nowrap; }
.offre-impact .offre-impact__punch { font-weight: 800; font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.15rem); line-height: 1.18; color: var(--text); }
@media (max-width: 560px) { .offre-impact .offre-impact__list { white-space: normal; } }
.offre-impact .btn { margin-top: 2.3rem; }

/* Offre — tarifs publics (cartes À l'année / Au mois) */
.offer-grid .offer-card { display: flex; flex-direction: column; }
.plan-price { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0 1.2rem; }
.plan-price__lead { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.plan-price__row { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.plan-price__big { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 1.9rem + 2vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-price__per { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--muted); }
.plan-price__was { font-family: var(--f-mono); font-size: 1rem; color: var(--muted-2); align-self: baseline; }
.plan-price__was s { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(150,157,203,0.5); }
.plan-sub { color: var(--muted); font-size: 0.93rem; line-height: 1.55; padding-top: 1.05rem; border-top: 1px solid var(--line); }
.plan-sub strong { color: var(--text); font-weight: 600; }
.plan-cta { --pad: 1.05rem 1.6rem; margin-top: 1.7rem; }
.offer-card sup { font-size: 0.62em; }
.offre-switch { text-align: center; max-width: 780px; margin: 1.5rem auto 0; color: var(--muted-2); font-size: 0.9rem; line-height: 1.55; }
.offre-switch sup { font-size: 0.62em; }
.offre-switch--note { margin-top: 0.7rem; }

/* Offre — évolution An1 → An2 dans les cartes (embranchement + prix au jour) */
.plan-day { font-family: var(--f-mono); font-size: 0.74rem; color: var(--muted-2); margin: -0.6rem 0 0; }
.plan-branch__head { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-soft); margin: 1.1rem 0 0.7rem; padding-top: 1.05rem; border-top: 1px solid var(--line); }
.plan-branch { display: flex; flex-direction: column; gap: 0.55rem; }
.plan-branch__row { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.85rem; border: 1px solid var(--line); border-radius: 11px; }
.plan-branch__row--hl { border-color: rgba(139,150,255,0.35); background: linear-gradient(120deg, rgba(78,93,255,0.12), rgba(109,93,255,0.05)); }
.plan-branch__ic { width: 20px; height: 20px; color: var(--blue-soft); flex-shrink: 0; }
.plan-branch__txt { color: var(--muted); font-size: 0.92rem; }
.plan-branch__txt strong { color: var(--text); font-weight: 600; }
.plan-branch__price { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.05rem; text-align: right; }
.plan-branch__amtline { display: flex; align-items: baseline; gap: 0.25rem; }
.plan-branch__amt { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-branch__per { font-family: var(--f-display); font-weight: 700; font-size: 0.8rem; color: var(--muted); }
.plan-branch__day { font-family: var(--f-mono); font-size: 0.62rem; color: var(--muted-2); letter-spacing: 0.02em; }
.plan-sub--tight { border-top: 0; padding-top: 0.9rem; }

/* Offre — 2 étages (An 1 → An 2) */
.offre-tier-h { text-align: center; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.65rem); letter-spacing: -0.01em; color: var(--text); margin: 0 0 1.4rem; text-wrap: balance; }
.offre-tier-h .grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offre-tier-sep { display: flex; align-items: center; gap: 1rem; max-width: 620px; margin: 2.4rem auto 1.4rem; color: var(--muted-2); }
.offre-tier-sep::before, .offre-tier-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.offre-tier-sep svg { width: 22px; height: 22px; color: var(--blue-soft); flex-shrink: 0; }
.offer-grid--3 { grid-template-columns: repeat(3, 1fr); }
.offre-y2 .offer-card { padding: 1.8rem 1.7rem; justify-content: center; }
.offre-y2 .offer-card__top { flex: 0 0 auto; }
.offer-card--stop { opacity: 0.62; }
.offer-card--stop .offer-card__tag { color: var(--muted-2); border-color: var(--line); }
.offer-card--stop .offer-card__title { color: var(--muted-2); }
.offer-card--stop .stop-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(200,90,78,0.35); color: #C85A4E; margin-bottom: 0.9rem; }
.offer-card--stop .stop-ic svg { width: 18px; height: 18px; }
.stop-list { list-style: none; margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.stop-list li { display: flex; align-items: flex-start; gap: 0.55rem; color: var(--muted-2); font-size: 0.88rem; line-height: 1.4; }
.stop-list svg { width: 15px; height: 15px; color: #C85A4E; flex-shrink: 0; margin-top: 3px; }
.b__lead { display: block; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.b__row { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }
.b__big { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); line-height: 1; letter-spacing: -0.03em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.b__per { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; color: var(--muted); }
.b__was { font-family: var(--f-mono); font-size: 0.88rem; color: var(--muted-2); }
.b__was s { text-decoration: line-through; text-decoration-color: rgba(150,157,203,0.5); }
.b__day { font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted-2); margin-top: 0.7rem; line-height: 1.5; }
.b__big--muted { background: none; -webkit-background-clip: initial; -webkit-text-fill-color: var(--muted-2); color: var(--muted-2); }
.b__day--warn { color: #E9906B; }
@media (max-width: 760px) { .offer-grid--3 { grid-template-columns: 1fr; } }

/* Offre — ancrage de valeur « design offert » */
.offer-anchor {
  border: 1px solid rgba(139,150,255,0.3); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(78,93,255,0.12), rgba(109,93,255,0.06));
  padding: 1.6rem 2rem; margin-bottom: 1.6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
}
.offer-anchor__l { flex: 1 1 60%; min-width: 260px; }
.offer-anchor__k { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-soft); }
.offer-anchor__t { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem); letter-spacing: -0.01em; color: var(--text); margin-top: 0.4rem; line-height: 1.28; }
.offer-anchor__t .grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offer-anchor__r { text-align: center; flex-shrink: 0; }
.offer-anchor__big { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem); letter-spacing: -0.03em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.offer-anchor__sm { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-top: 0.35rem; }

/* Offre — fonctionnalités mutualisées (hors cartes) : value stack en tuiles */
.offer-included { margin-bottom: 1.6rem; text-align: center; }
.offer-included__intro { text-align: center; color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); margin-bottom: 1.7rem; text-wrap: pretty; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: left; }
.svc-tile-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1.5rem 1.4rem; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); }
.svc-tile-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.svc-tile {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 1rem;
  background: linear-gradient(158deg, #1c2255 0%, #10132e 100%); border: 1px solid rgba(139,150,255,0.28); color: var(--blue-soft);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.14), 0 12px 26px -12px rgba(0,0,0,0.7), 0 0 26px -16px rgba(78,93,255,0.7);
}
.svc-tile svg { width: 24px; height: 24px; }
.svc-tile-card h4 { font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--text); margin-bottom: 0.3rem; }
.svc-tile-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.45; margin: 0; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
/* 2 colonnes conservées jusqu'en très petit mobile : réduit de moitié le
   scroll de cette grille de 6 tuiles (au lieu d'un empilement 1 colonne). */
@media (max-width: 600px) {
  .svc-grid { gap: 0.7rem; }
  .svc-tile-card { padding: 1.1rem 1rem; }
  .svc-tile { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 0.7rem; }
  .svc-tile svg { width: 19px; height: 19px; }
  .svc-tile-card h4 { font-size: 0.95rem; line-height: 1.25; }
  .svc-tile-card p { font-size: 0.82rem; line-height: 1.4; }
}
@media (max-width: 360px) { .svc-grid { grid-template-columns: 1fr; } }
/* cartes tarifs : plus de liste interne → le header enchaîne sur le CTA */
.offer-grid .offer-card__top { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; flex: 1 1 auto; }

/* Accessibilité — focus clavier visible sur les CTA */
.btn:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }
.footer__socials { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0; align-items: flex-start; }
.footer__socials a.footer__social { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--text); font-size: 0.95rem; }
.footer__socials a.footer__social:hover { color: var(--text); transform: none; }
.footer__socials .footer__social svg { width: 40px; height: 40px; padding: 10px; box-sizing: border-box; background: var(--grad-btn); color: #fff; border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(46,59,245,0.6), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.footer__socials .footer__social:hover svg { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(78,93,255,0.75), inset 0 1px 0 rgba(255,255,255,0.3); }
.footer__social-val { font-family: var(--f-mono); font-size: 0.9rem; letter-spacing: 0.02em; }
@media (max-width: 720px) { .offre-offert { padding: 1.6rem; } .offre-offert__l { max-width: 100%; } }

/* ---------- STATS ---------- */
.stats { border-block: 1px solid var(--line); background: var(--ink-2); padding: clamp(3rem, 6vw, 4.5rem) 0; }
.stats__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; text-align: center; }
.stat__num { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -0.03em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat__label { display: block; margin-top: 0.7rem; font-size: 0.9rem; color: var(--muted); line-height: 1.35; }

/* ---------- AVIS — cas client (Studio Beauté Zoé) ---------- */
.case {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.case__frame {
  display: block; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -36px rgba(0,0,0,0.75), 0 0 60px -30px rgba(78,93,255,0.35);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.case__frame:hover {
  transform: translateY(-6px);
  border-color: rgba(78,93,255,0.4);
  box-shadow: 0 50px 100px -36px rgba(0,0,0,0.8), 0 0 70px -26px rgba(78,93,255,0.5);
}
.case__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--line);
}
.case__url {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.02em;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 100px; padding: 4px 12px;
  white-space: nowrap; overflow: hidden;
}
.case__live {
  margin-left: auto;
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #7CE7B0; border: 1px solid rgba(124,231,176,0.4); background: rgba(124,231,176,0.08);
  border-radius: 100px; padding: 0.25em 0.7em;
}
.case__shot { display: block; overflow: hidden; }
.case__shot img { width: 100%; height: auto; display: block; transform: scale(1.005); transition: transform 0.7s var(--ease); }
.case__frame:hover .case__shot img { transform: scale(1.03); }

.case__kicker {
  font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue-soft); margin-bottom: 1rem;
}
.case__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.02em; }
.case__sub { color: var(--muted-2); font-size: 0.95rem; margin: 0.3rem 0 1.5rem; }
.case__quote {
  position: relative;
  font-size: clamp(1.1rem, 1.05rem + 0.3vw, 1.3rem); line-height: 1.55;
  color: var(--text); padding-left: 1.2rem;
  border-left: 1px solid rgba(139,150,255,0.45);
  margin-bottom: 1.6rem;
}
.case__who { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
/* Double classe pour battre .testi__tag (position:absolute) dans la cascade,
   quel que soit l'ordre des règles dans le fichier. */
.testi__tag.case__tag { position: static; margin-left: 0.4rem; }

/* Identité du client (réutilisé par le bloc cas-client .case__who) */
.testi__who { display: flex; align-items: center; gap: 0.85rem; }
.testi__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--grad-btn); display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
.testi__avatar--photo { background: var(--surface-2); }
.testi__avatar--photo img { width: 100%; height: 100%; object-fit: cover; }
.testi__name { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; }
.testi__role { font-size: 0.85rem; color: var(--muted); }
.testi__role a { color: var(--blue-soft); }
.testi__tag { position: absolute; top: 1.3rem; right: 1.3rem; font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25em 0.6em; border-radius: 100px; }
.testi__tag--real { color: #7CE7B0; border: 1px solid rgba(124,231,176,0.4); background: rgba(124,231,176,0.08); }

/* ---------- AVIS — RÉSULTATS RÉELS (Google Business) ----------
   Parti pris : éditorial, minimal. Trois pourcentages géants séparés par
   des filets — les chiffres portent tout, zéro décoration. */
.results { margin-top: clamp(3rem, 6vw, 5rem); text-align: center; }
.results__head { max-width: 680px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.results__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.08; letter-spacing: -0.025em;
  margin: 0.9rem 0 1rem;
}
.results__sub { color: var(--muted); font-size: 1.05rem; }
.results__sub strong { color: var(--text); font-weight: 600; }

/* Barres de croissance avant/après : la donnée devient physique.
   Chaque --w est proportionnel aux valeurs réelles ; la barre 2026
   jaillit (scaleX) à l'entrée dans le viewport. */
.results__viz {
  max-width: 720px; margin-inline: auto; text-align: left;
  display: flex; flex-direction: column; gap: clamp(1.8rem, 3.5vw, 2.6rem);
  border-block: 1px solid var(--line);
  padding-block: clamp(2.2rem, 4.5vw, 3.2rem);
}
.rbar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.9rem; }
.rbar__label { font-family: var(--f-display); font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.12rem); letter-spacing: -0.01em; }
.rbar__delta { font-family: var(--f-mono); font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: #7CE7B0; white-space: nowrap; }
.rbar__row { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 1rem; }
.rbar__row + .rbar__row { margin-top: 0.55rem; }
.rbar__year { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.rbar__track { display: block; height: 16px; }
.rbar__fill {
  display: block; height: 100%; width: var(--w);
  border-radius: 100px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.rbar__fill--before { background: rgba(255,255,255,0.10); }
.rbar__fill--after { background: var(--grad-btn); box-shadow: 0 0 20px -5px rgba(78,93,255,0.65); }
.results__viz.is-in .rbar__fill { transform: scaleX(1); }
/* Chorégraphie : les témoins 2025 d'abord, puis les barres 2026 en cascade */
.results__viz.is-in .rbar:nth-child(1) .rbar__fill--after { transition-delay: 0.35s; }
.results__viz.is-in .rbar:nth-child(2) .rbar__fill--after { transition-delay: 0.55s; }
.results__viz.is-in .rbar:nth-child(3) .rbar__fill--after { transition-delay: 0.75s; }

.results__source { margin-top: 1.6rem; font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted-2); line-height: 1.5; }

/* ---------- FONDATEUR ---------- */
.fondateur__inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* Largeur explicite : sans elle, l'étirement grid de cet item s'effondre
   (tous les enfants de .portrait sont en position:absolute, donc ne
   contribuent à aucune taille intrinsèque — combiné au will-change:transform
   posé par le système de révélation [data-reveal], la carte se réduit à
   quelques pixels au lieu de remplir sa colonne). */
.fondateur__portrait { width: 100%; }
.portrait {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-2);
  background: linear-gradient(160deg, var(--surface-2), var(--ink-2));
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7);
}
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.portrait img.is-missing { display: none; }
.portrait__ph { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; padding: 1rem; }
.portrait__ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(78,93,255,0.25), transparent 60%); }
.portrait__initials { font-family: var(--f-display); font-weight: 800; font-size: 3.4rem; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; }
.portrait__name { font-family: var(--f-display); font-weight: 600; color: var(--text); position: relative; }
.portrait__ph small { font-family: var(--f-mono); font-size: 0.7rem; color: var(--muted-2); position: relative; }
.portrait__badge { position: absolute; z-index: 3; left: 1.1rem; bottom: 1.1rem; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.4em 0.9em; border-radius: 100px; background: rgba(5,6,15,0.7); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.fondateur__text .section__title { margin-top: 0.9rem; }
.fondateur__text > p { color: var(--muted); margin-bottom: 1rem; max-width: 60ch; }
.fondateur__text > p strong { color: var(--text); font-weight: 600; }
.fondateur__sign { font-family: var(--f-display); font-weight: 600; color: var(--text) !important; margin-top: 0.4rem; }
.fondateur__links { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.8rem; }
.chip {
  font-family: var(--f-mono); font-size: 0.82rem; padding: 0.6em 1.1em; border-radius: 100px;
  border: 1px solid var(--line-2); color: var(--text); transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
}
.chip:hover { border-color: var(--blue-soft); background: rgba(78,93,255,0.08); transform: translateY(-2px); }
.chip--icon { width: 48px; height: 48px; padding: 0; display: inline-grid; place-items: center; }
.chip--icon svg { width: 20px; height: 20px; display: block; }
.chip--icon:hover { color: var(--blue-soft); }

/* ---------- CONTACT ---------- */
.contact { overflow: hidden; }
.contact__inner { max-width: 780px; position: relative; z-index: 2; }
.contact__aurora { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 60% 50% at 50% 20%, rgba(46,59,245,0.18), transparent 60%); pointer-events: none; }
.contact-aig { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0.9rem; margin-bottom: 2.4rem; }
.contact-aig__side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; padding: 1.3rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-decoration: none; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.contact-aig__side:hover { transform: translateY(-3px); border-color: var(--blue-soft); box-shadow: 0 18px 40px -22px rgba(0,0,0,0.7); }
.contact-aig__side--live { border-color: rgba(78,93,255,0.4); background: linear-gradient(150deg, rgba(78,93,255,0.14), rgba(109,93,255,0.06)); box-shadow: 0 14px 34px -18px rgba(46,59,245,0.5); }
.contact-aig__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 0.3rem; }
.contact-aig__side--live .contact-aig__ic { background: var(--grad-btn); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 20px -8px rgba(46,59,245,0.6); }
.contact-aig__side:not(.contact-aig__side--live) .contact-aig__ic { border: 1px solid var(--line-2); color: var(--blue-soft); }
.contact-aig__ic svg { width: 22px; height: 22px; display: block; }
.contact-aig__k { font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--text); }
.contact-aig__d { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.contact-aig__side--live .contact-aig__d { color: var(--blue-soft); }
.contact-aig__or { align-self: center; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted); border: 1px solid var(--line-2); background: var(--ink); }
@media (max-width: 560px) { .contact-aig { grid-template-columns: 1fr; } .contact-aig__or { justify-self: center; } }

.form { display: flex; flex-direction: column; gap: 1.1rem; padding: 2.4rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.form__hp { position: absolute; left: -9999px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.field__opt { color: var(--muted-2); }
.field input, .field textarea {
  width: 100%; padding: 0.85rem 1rem; border-radius: 12px;
  background: var(--ink-2); border: 1px solid var(--line-2); color: var(--text);
  font-family: var(--f-body); font-size: 1rem; transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-bright);
  background: rgba(78,93,255,0.05);
  box-shadow: 0 0 0 3px rgba(78,93,255,0.16);
}
.field input, .field textarea { transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.form__note { text-align: center; font-size: 0.85rem; color: var(--muted-2); }

/* ---------- FOOTER ---------- */
.footer { border-top: 1px solid var(--line); background: var(--ink-2); padding-top: clamp(3rem, 6vw, 4.5rem); position: relative; z-index: 2; overflow: hidden; }
.footer__inner { position: relative; display: grid; grid-template-columns: 1.4fr auto; gap: 2.5rem; padding-bottom: 3rem; align-items: start; }
.footer__brand, .footer__contact { position: relative; z-index: 1; }
.logo--footer .logo__word { font-size: 1.15rem; }
.footer__tag { color: var(--muted); font-size: 0.92rem; margin-top: 1rem; max-width: 34ch; }
.footer__col-title { display: block; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 1.1rem; }
.footer__nav, .footer__contact { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__nav a, .footer__contact a { color: var(--muted); font-size: 0.95rem; transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); width: fit-content; }
.footer__nav a:hover, .footer__contact a:hover { color: var(--text); transform: translateX(3px); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.5rem 0; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted-2); }
.footer__mono { font-family: var(--f-mono); font-size: 0.75rem; }
.footer__legal-links { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer__legal-links a { color: var(--muted-2); transition: color var(--t-fast) var(--ease); }
.footer__legal-links a:hover { color: var(--blue-soft); }

/* ---------- FAQ (fenêtres de message flottantes) ---------- */
.faq__head { margin-bottom: 2.6rem; }
.faq-wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; align-items: start; }
.faq-win { animation: faqFloat var(--fd, 7s) ease-in-out infinite; animation-delay: var(--fdelay, 0s); will-change: transform; }
.faq-win:nth-child(3n+2) { margin-top: 1.7rem; }
.faq-win.is-open { animation: none; }
@keyframes faqFloat { 0% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(var(--fx,0px), var(--fy,-9px)) rotate(var(--fr,0deg)); } 100% { transform: translate(0,0) rotate(0deg); } }
.faq .win { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: 0 24px 56px -30px rgba(0,0,0,0.7); }
.faq-win__win { cursor: pointer; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.faq-win__win:hover { transform: translateY(-3px); box-shadow: 0 30px 64px -28px rgba(0,0,0,0.8); }
.faq .win__bar { display: flex; align-items: center; gap: 9px; padding: 10px 13px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--line); }
.faq .win__dots { display: flex; gap: 5px; }
.faq .win__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.faq .win__name { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--muted-2); }
.faq-win__body { padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.faq .bub { max-width: 92%; padding: 0.62em 0.95em; border-radius: 15px; font-size: 0.92rem; line-height: 1.45; }
.faq .bub--out { align-self: flex-end; background: var(--grad-btn); color: #fff; font-weight: 500; border-bottom-right-radius: 4px; box-shadow: 0 8px 20px -8px rgba(46,59,245,0.5); }
.faq .bub--in { align-self: flex-start; background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: var(--muted); border-bottom-left-radius: 4px; }
.faq .bub--in strong { color: var(--text); font-weight: 600; }
.faq .bub--in em { font-family: var(--f-mono); font-style: normal; color: var(--blue-soft); font-size: 0.92em; }
.faq .bub--in sup { font-size: 0.62em; }
.faq-win__tap { display: none; font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-soft); align-self: center; text-align: center; margin: 0.9rem 0 0.2rem; }
.faq-win__reveal { display: flex; align-items: flex-end; gap: 7px; padding-top: 4px; }
.faq-win__ava { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 60% 34%; border: 1px solid rgba(139,150,255,0.4); flex-shrink: 0; }
.faq--interactive .faq-win__tap { display: block; }
.faq--interactive .faq-win.is-open .faq-win__tap { display: none; }
.faq--interactive .faq-win__ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease); }
.faq--interactive .faq-win__ans > div { overflow: hidden; }
.faq--interactive .faq-win.is-open .faq-win__ans { grid-template-rows: 1fr; }
.faq--interactive .faq-win__reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.4s var(--ease) 0.05s, transform 0.45s cubic-bezier(.34,1.56,.64,1) 0.05s; }
.faq--interactive .faq-win.is-open .faq-win__reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .faq-win { animation: none; } .faq--interactive .faq-win__reveal { transition: none; } }
@media (max-width: 900px) { .faq-wins { grid-template-columns: repeat(2, 1fr); } .faq-win:nth-child(3n+2) { margin-top: 0; } }
@media (max-width: 560px) { .faq-wins { grid-template-columns: 1fr; } .faq-win { animation: none; margin-top: 0 !important; } .faq .bub { max-width: 100%; } }

/* Footer — CTA + signature */
.footer__contact { margin-right: clamp(0.75rem, 2.5vw, 2.2rem); }
.footer__cta { margin-top: 1.4rem; }
.footer__cta a { display: none; }
.footer__slogan { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; line-height: 1.18; letter-spacing: -0.01em; color: var(--text); margin-bottom: 1.1rem; max-width: 22ch; }
.footer__slogan .grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer__avail { display: flex; align-items: center; gap: 0.55rem; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); margin-top: 1.2rem; }
.footer__avail b { color: var(--text); font-weight: 400; }
.footer__avail-dot { width: 8px; height: 8px; border-radius: 50%; background: #6BFFB0; animation: footerPulse 2s infinite; flex-shrink: 0; }
@keyframes footerPulse { 0% { box-shadow: 0 0 0 0 rgba(107,255,176,0.5); } 70% { box-shadow: 0 0 0 7px rgba(107,255,176,0); } 100% { box-shadow: 0 0 0 0 rgba(107,255,176,0); } }
.footer__cta-title { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--text); margin-bottom: 0.6rem; }
.footer__sign { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: clamp(0.2rem, 1vw, 0.5rem); pointer-events: none; z-index: 0; opacity: 0.05; }
.footer__lockup { display: inline-flex; align-items: center; gap: clamp(0.45rem, 1.3vw, 1rem); }
.footer__lockup > svg { width: clamp(2.6rem, 11vw, 8.4rem); height: auto; flex-shrink: 0; }
.footer__lockup .word { font-family: var(--f-word); font-weight: 700; font-size: clamp(3.5rem, 15vw, 11rem); letter-spacing: -0.02em; line-height: 0.9; white-space: nowrap; }
.footer__lockup .a { color: var(--text); }
.footer__lockup .b { color: var(--blue-bright); }
.footer__backtop { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted-2); font-size: 0.85rem; transition: color var(--t-fast) var(--ease); }
.footer__backtop:hover { color: var(--blue-soft); }

/* ---------- PAGES LÉGALES (mentions légales / politique de confidentialité) ---------- */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content h2 {
  font-family: var(--f-display); font-weight: 800; letter-spacing: -0.01em; color: var(--text);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); margin: 3rem 0 1rem;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-family: var(--f-display); font-weight: 700; color: var(--text);
  font-size: 1.05rem; letter-spacing: -0.005em; margin: 1.6rem 0 0.6rem;
}
.legal-content p { color: var(--muted); line-height: 1.75; margin-bottom: 1rem; }
.legal-content p:last-child { margin-bottom: 0; }
.legal-content strong { color: var(--text); font-weight: 600; }
.legal-content a { color: var(--blue-soft); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(139,150,255,0.4); }
.legal-content a:hover { color: var(--text); }
.legal-content ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 1.2rem; padding: 0; }
.legal-content li { position: relative; padding-left: 1.4rem; color: var(--muted); line-height: 1.65; }
.legal-content li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-soft); }
.legal-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 1.5rem 1.7rem; margin: 1.2rem 0 1.6rem;
}
.legal-card p { margin-bottom: 0; }
.legal-card p + p { margin-top: 0.9rem; }
.legal-meta { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted-2); }
.legal-crosslink { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); color: var(--muted); }
.legal-back { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 2rem; transition: color var(--t-fast) var(--ease); }
.legal-back:hover { color: var(--blue-soft); }
.legal-back svg { width: 14px; height: 14px; }

/* ---------- CURSEUR ---------- */
.cursor-glow, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); }
.cursor-glow { width: 420px; height: 420px; background: radial-gradient(circle, rgba(78,93,255,0.1), transparent 60%); mix-blend-mode: screen; transition: opacity 0.4s; }
.cursor-dot { width: 7px; height: 7px; background: var(--blue-soft); transition: opacity 0.3s, width 0.25s var(--ease), height 0.25s var(--ease); }
body.cursor-ready .cursor-glow, body.cursor-ready .cursor-dot { opacity: 1; }
body.cursor-hover .cursor-dot { width: 34px; height: 34px; background: rgba(139,150,255,0.25); }

/* ---------- ACCESSIBILITÉ ---------- */
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 4px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
  .stats__grid { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
}
@media (max-width: 900px) {
  .offer-grid { gap: 1rem; }
  .offer-grid .offer-card { padding: 1.9rem 1.6rem; }
  .plan-price__big { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.4rem); }
}
@media (max-width: 640px) {
  .offer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav, .header__cta { display: none; }
  .burger { display: block; margin-left: auto; }

  .pain-grid { grid-template-columns: 1fr; gap: 0.6rem; }

  /* Services inclus sur mobile : réordonnés en 3 paires — Création+Hébergement /
     SEO+Sécurité / Modifications+Interlocuteur — d'où l'ordre explicite sur
     les 6 tuiles plutôt qu'un simple échange de deux. */
  .svc-tile-card:nth-child(1) { order: 1; }
  .svc-tile-card:nth-child(2) { order: 2; }
  .svc-tile-card:nth-child(3) { order: 3; }
  .svc-tile-card:nth-child(4) { order: 5; }
  .svc-tile-card:nth-child(5) { order: 4; }
  .svc-tile-card:nth-child(6) { order: 6; }

  /* Chiffres clés (72h, 24/7…) : la taille desktop (clamp jusqu'à 4.2rem)
     domine trop une cellule de ~150px de large sur mobile ; on la resserre
     pour rester cohérent avec le reste du site. */
  .stats { padding: 2.2rem 0; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 1.8rem; gap: 1rem; }
  .stat__num { font-size: 2.1rem; }
  .stat__label { font-size: 0.78rem; margin-top: 0.4rem; }

  /* Le constat sur mobile : les 4 cartes restent empilées (pas de pin), mais
     resserrées pour que le bloc entier tienne dans (ou tout près de) un seul
     écran plutôt que de s'étaler sur une longue suite de scroll. */
  .pain-card { padding: 1.1rem 1.2rem 1rem; }
  .pain-card__idx { font-size: 1.6rem; }
  .pain-card h3 { font-size: 1.05rem; margin: 0.3rem 0 0.45rem; }
  .pain-card__cost { font-size: 0.82rem; }
  .case { grid-template-columns: 1fr; }
  .rbar__row { grid-template-columns: 62px 1fr; gap: 0.7rem; }
  .rbar__head { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .rbar__track { height: 13px; }
  /* Section "Le fondateur" sur mobile : l'eyebrow + le titre + le 1er
     paragraphe passent AVANT la photo (display:contents sur le wrapper
     texte pour pouvoir réordonner ses enfants indépendamment de la photo,
     sans toucher au DOM ni au grid desktop) — la photo arrive ensuite,
     bien intégrée après une phrase d'intro, plutôt qu'en ouverture brute. */
  .fondateur__inner { grid-template-columns: 1fr; gap: 0; }
  .fondateur__text { display: contents; }
  .fondateur__text .eyebrow { order: 1; }
  .fondateur__text .section__title { order: 2; margin-top: 0.3rem; }
  .fondateur__text > p:nth-of-type(2) { order: 3; margin-bottom: 0.9rem; }
  .fondateur__portrait { order: 4; max-width: 260px; margin: 0.5rem auto 1rem; }
  .portrait { aspect-ratio: 1 / 1; }
  .portrait img { object-position: 50% 30%; }
  .portrait__badge { font-size: 0.56rem; letter-spacing: 0.08em; padding: 0.32em 0.7em; left: 0.8rem; bottom: 0.8rem; }
  .fondateur__text > p { order: 5; margin-bottom: 0.85rem; }
  .fondateur__sign { margin-top: 0.1rem; }
  .fondateur__links { order: 6; margin-top: 0.5rem; }
  .section__title--left, .fondateur__text .eyebrow { text-align: left; }

  .offer-card, .form { padding: 1.8rem; }
  .offer-note { flex-direction: column; align-items: flex-start; }
  .form__row { grid-template-columns: 1fr; }

  /* Étiquette "Client vérifié" retirée sur mobile (cas client Zoé). */
  .case__tag { display: none; }

  /* Plus d'air entre la fin du témoignage de Zoé et le bloc "Un mois en
     ligne. Une visibilité qui explose déjà." qui suit. */
  .case { margin-bottom: 4.75rem; }
  .case__kicker { text-align: center; }

  /* Ancrage « design offert » sur mobile : texte à gauche, prix à droite,
     comme en desktop mais resserré pour que les deux tiennent côte à côte
     sans wrap disgracieux (min-width desktop supprimée, tailles réduites). */
  .offer-anchor { align-items: center; padding: 1.2rem 1rem; gap: 0.6rem; flex-wrap: nowrap; }
  .offer-anchor__l { flex: 1 1 auto; min-width: 0; }
  .offer-anchor__k { font-size: 0.56rem; letter-spacing: 0.08em; line-height: 1.35; }
  .offer-anchor__t { font-size: clamp(1rem, 4.8vw, 1.15rem); margin-top: 0.35rem; }
  .offer-anchor__r { flex: 0 0 auto; }
  .offer-anchor__big { font-size: 1.7rem; }

  /* Tarifs année 2 sur mobile : "À l'année" en tête (offre la plus
     avantageuse), suivi de "Au mois" puis "Arrêter". Desktop garde
     l'ordre du DOM (Au mois / À l'année / Arrêter). */
  .offre-y2.offer-grid--3 { display: flex; flex-direction: column; }
  .offre-y2 .offer-card--sub { order: -1; }
  .offre-y2 .offer-card--stop { display: none; }

  /* Barre d'adresse du cas client (site de Zoé) sur mobile : le domaine
     et le badge "En ligne" sont resserrés pour tenir chacun sur une seule
     ligne dans la largeur réduite de la fenêtre, sans être coupés. */
  .case__bar { padding: 8px 10px; gap: 6px; }
  .case__url { font-size: 0.56rem; padding: 3px 8px; gap: 5px; text-overflow: ellipsis; }
  .case__live { font-size: 0.52rem; letter-spacing: 0.06em; padding: 0.22em 0.55em; white-space: nowrap; flex-shrink: 0; }
  .offer-anchor__sm { font-size: 0.52rem; letter-spacing: 0.08em; }

  /* FAQ sur mobile : 2 fenêtres par ligne au lieu d'une seule colonne,
     resserrées pour tenir côte à côte. La question sur l'abonnement (vs
     paiement unique) reste à taille normale et prend toute la largeur,
     pile au milieu de la grille : c'est l'objection prix la plus commune,
     donc celle qui doit le plus sauter aux yeux pour faciliter le closing. */
  .faq-wins { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .faq-win { animation: none; margin-top: 0 !important; }
  .faq .win__bar { padding: 7px 9px; gap: 6px; }
  .faq .win__dots { gap: 3px; }
  .faq .win__dots i { width: 5px; height: 5px; }
  .faq .win__name { font-size: 0.56rem; }
  .faq-win__body { padding: 10px; gap: 6px; }
  .faq .bub { font-size: 0.74rem; padding: 0.5em 0.75em; line-height: 1.35; }
  .faq-win__tap { font-size: 0.5rem; margin: 0.6rem 0 0.1rem; }
  .faq-win__ava { width: 22px; height: 22px; }

  .faq-win:nth-child(1) { order: 1; }
  .faq-win:nth-child(2) { order: 2; }
  .faq-win:nth-child(3) { order: 3; }
  .faq-win:nth-child(4) { order: 4; }
  .faq-win:nth-child(6) { order: 5; grid-column: 1 / -1; }
  .faq-win:nth-child(6) .win__bar { padding: 10px 13px; gap: 9px; }
  .faq-win:nth-child(6) .win__dots { gap: 5px; }
  .faq-win:nth-child(6) .win__dots i { width: 8px; height: 8px; }
  .faq-win:nth-child(6) .win__name { font-size: 0.66rem; }
  .faq-win:nth-child(6) .faq-win__body { padding: 14px; gap: 9px; }
  .faq-win:nth-child(6) .bub { font-size: 0.92rem; padding: 0.62em 0.95em; line-height: 1.45; max-width: 92%; }
  .faq-win:nth-child(6) .faq-win__tap { font-size: 0.6rem; margin: 0.9rem 0 0.2rem; }
  .faq-win:nth-child(6) .faq-win__ava { width: 28px; height: 28px; }
  .faq-win:nth-child(5) { order: 6; }
  .faq-win:nth-child(7) { order: 7; }
  .faq-win:nth-child(8) { order: 8; }
  .faq-win:nth-child(9) { order: 9; }

  /* CTA "Parlons-en" (WhatsApp / Un message) sur mobile : restent côte à
     côte au lieu de s'empiler, en resserrant padding, icônes et textes. */
  .contact-aig { grid-template-columns: 1fr auto 1fr; gap: 0.5rem; }
  .contact-aig__side { padding: 0.9rem 0.5rem; gap: 0.2rem; }
  .contact-aig__ic { width: 34px; height: 34px; margin-bottom: 0.2rem; }
  .contact-aig__ic svg { width: 18px; height: 18px; }
  .contact-aig__k { font-size: 0.88rem; }
  .contact-aig__d { font-size: 0.56rem; letter-spacing: 0.05em; }
  .contact-aig__or { width: 30px; height: 30px; font-size: 0.62rem; }

  /* Formulaire de contact sur mobile : mêmes proportions resserrées que les
     boutons WhatsApp / Un message juste au-dessus, pour rester cohérent. */
  .form { padding: 1.5rem 1.2rem; gap: 0.9rem; }
  .field { gap: 0.35rem; }
  .field label { font-size: 0.78rem; }
  .field input, .field textarea { padding: 0.7rem 0.85rem; font-size: 0.88rem; }
  .form__note { font-size: 0.76rem; }

  .footer { padding-top: 2.4rem; }
  .footer__inner { grid-template-columns: 1fr; gap: 1.8rem; padding-bottom: 2rem; }
  .footer__contact { margin-right: 0; gap: 0.5rem; }
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; padding: 1.1rem 0; font-size: 0.76rem; }
  .footer__slogan { font-size: 1.15rem; margin-bottom: 0.8rem; }
  .footer__cta { margin-top: 1rem; }
  .footer__cta-title { font-size: 1.2rem; margin-bottom: 0.4rem; }
  .footer__socials { gap: 0.65rem; }
  .footer__socials a.footer__social { font-size: 0.85rem; gap: 0.6rem; }
  .footer__socials .footer__social svg { width: 34px; height: 34px; padding: 8px; }
  .footer__social-val { font-size: 0.82rem; }

  /* Filigrane "optima studio" en fond de footer : reste géant, à la même
     échelle relative qu'en desktop (même clamp), mais centré verticalement
     dans le footer au lieu d'être plaqué en haut. */
  .footer__sign { align-items: center; padding-top: 0; }

  .mstep { padding-left: 3rem; }
  .mstep__num { width: 2.2rem; height: 2.2rem; font-size: 0.78rem; }
  .mstep__mocks { gap: 0.8rem; }

  .cursor-glow, .cursor-dot { display: none; }

  /* Échelle typographique mobile cohérente : même facteur (~0.9) que la
     réduction appliquée au héro, mais posé sur les classes PARTAGÉES
     (eyebrow, titre de section, lead, boutons) — donc hérité automatiquement
     par tout le site (constat, méthode, offre, avis, fondateur, faq, contact…)
     sans avoir à retoucher chaque section une par une. */
  .eyebrow { font-size: 0.7rem; }
  .section__title { font-size: clamp(1.8rem, 4.6vw, 3.6rem); }
  .section__lead { font-size: 0.96rem; }
  .btn { font-size: 0.88rem; }
  .btn--sm { font-size: 0.81rem; }
  .btn--lg { --pad: 0.95rem 1.7rem; font-size: 0.95rem; }

  /* Héro : sous-titre et trust-line (spécifiques, hors classes partagées). */
  .hero__sub { font-size: 0.95rem; }
  .hero__trust { font-size: 0.72rem; }
  /* Juste assez réduit pour tenir sur une seule ligne à 375px de large. */
  .hero__eyebrow { font-size: 0.5rem; }
  /* Point réduit dans la même proportion que le texte (facteur ~0.64). */
  .hero__eyebrow .eyebrow__pulse { width: 5px; height: 5px; }

  /* Méthode épinglée sur mobile : même mécanique (pin + 4 phases) que sur
     ordinateur, mais seule LA FENÊTRE-CHANTIER + le texte d'étape sont
     épinglés (voir JS : sur mobile le trigger est .methode-body, pas
     .methode-stage) — l'en-tête (eyebrow/titre/lead) défile normalement
     au-dessus, puis le blocage démarre pile en dessous.  */
  .methode-stage { min-height: 0; display: block; padding: 0; }
  .methode--interactive .methode-head { margin-bottom: 1.1rem; }
  .methode--interactive .methode-head .section__title { font-size: 1.5rem; margin: 0.4rem 0 0.5rem; }
  .methode--interactive .methode-head .section__lead { font-size: 0.82rem; }
  .methode--interactive .methode-body {
    grid-template-columns: 1fr; gap: 1rem;
    max-width: 300px; margin-inline: auto;
    min-height: 0; display: block;
    padding: 5.5rem 0 1.8rem;
  }

  /* Barre d'URL : moins de chrome (points, paddings) pour laisser au
     domaine toute la place et ne plus être tronqué. */
  .build__bar { gap: 8px; padding: 10px 12px; }
  .build__dots { gap: 4px; }
  .build__dots i { width: 6px; height: 6px; }
  .build__url { font-size: 0.66rem; padding: 4px 10px; gap: 6px; }

  /* Fenêtre-chantier : assez de hauteur pour que les bulles de la phase 1
     (conversation) ne débordent plus par-dessus la barre du haut, et marge
     dédiée en haut (sous la barre) et en bas (sous le dernier message,
     y compris une fois la bulle finale révélée). */
  .build__body { min-height: 290px; padding: 14px; }
  .build__chat { inset: 26px 18px 28px; }
  .methode--interactive .methode-panels { min-height: 165px; }
  .methode--interactive .mstep__num { width: 2.1rem; height: 2.1rem; font-size: 0.82rem; margin-bottom: 0.6rem; }
  .methode--interactive .mstep__title { font-size: 1.1rem; margin-bottom: 0.35rem; }
  .methode--interactive .mstep__text { font-size: 0.82rem; line-height: 1.4; }
}

/* ---------- MOTION RÉDUIT ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js [data-reveal-founder] { opacity: 1 !important; transform: none !important; filter: none !important; }
  /* Le mur reste visible mais figé : composition statique, aucune dérive (gérée côté JS). */
  .hero__wall { opacity: 0.7; }
  .hero__aurora { animation: none; }
}


/* ==================================================================
   LE DIAGNOSTIC — 3 cartes cochables + jauge conditionnelle
   Note : ne jamais transitionner border-color ici (bordure de base issue
   d'un raccourci avec var() : la transition reste bloquée sur la couleur
   de départ). On anime transform / box-shadow / background uniquement.
================================================================== */
.diag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; }

.diag-card {
  position: relative; display: flex; flex-direction: column;
  padding: 2.2rem 2rem 2rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.diag-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(520px circle at 50% -10%, rgba(78,93,255,0.16), transparent 45%);
  transition: opacity .4s var(--ease);
}
.diag-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -32px rgba(0,0,0,.8); }
.diag-card:hover::before { opacity: 1; }
.diag-card__idx {
  position: absolute; top: 1rem; right: 1.4rem;
  font-family: var(--f-display); font-weight: 800; font-size: 3rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.3px rgba(139,150,255,.30); pointer-events: none;
}
.diag-card__ic {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(158deg, #1c2255, #10132e); border: 1px solid rgba(139,150,255,.28);
  color: var(--blue-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 24px -12px rgba(78,93,255,.9);
  margin-bottom: 1.3rem;
}
.diag-card__ic svg { width: 23px; height: 23px; }
.diag-card h3 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; line-height: 1.18;
  letter-spacing: -0.015em; color: var(--text); margin-bottom: 0.7rem; text-wrap: balance;
}
.diag-card p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }

/* La case à cocher : zone de 44px minimum, libellé en mono */
.diag-check {
  margin-top: auto; padding-top: 1.4rem; min-height: 44px;
  display: flex; align-items: center; gap: 0.75rem;
  border: 0; background: none; cursor: pointer; text-align: left; width: 100%;
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); transition: color .25s var(--ease);
}
.diag-check:hover { color: var(--text); }
.diag-check:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 4px; border-radius: 6px; }
.diag-check__box {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 8px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  display: grid; place-items: center; transition: background .25s var(--ease);
}
.diag-check__box svg {
  width: 14px; height: 14px; opacity: 0; transform: scale(.6); color: #fff;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.diag-check[aria-pressed="true"] { color: var(--text); }
.diag-check[aria-pressed="true"] .diag-check__box { background: var(--grad-btn); }
.diag-check[aria-pressed="true"] .diag-check__box svg { opacity: 1; transform: scale(1); }

/* La jauge : 3 segments + message conditionnel + CTA */
.diag-gauge {
  margin-top: 1.6rem; padding: 2.2rem 2.4rem; border-radius: var(--radius-lg);
  border: 1px solid var(--line-2); background: var(--surface);
}
.diag-gauge__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.diag-gauge__lbl { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-soft); }
.diag-gauge__count { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--text); }
.diag-gauge__bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1.6rem; }
.diag-gauge__seg { height: 8px; border-radius: 100px; background: rgba(255,255,255,0.07); transition: background .45s var(--ease), box-shadow .45s var(--ease); }
.diag-gauge__seg.is-on { background: var(--grad-btn); box-shadow: 0 0 18px -4px rgba(78,93,255,.8); }
.diag-gauge__body { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; }
/* Les enfants doivent pouvoir descendre sous leur min-content : sinon le CTA,
   en white-space:nowrap, impose 362px et déborde de la carte sur téléphone. */
.diag-gauge__body > * { min-width: 0; }
.diag-gauge__body .btn { white-space: normal; text-align: center; }
.diag-gauge__msg { max-width: 40ch; }
.diag-gauge__msg strong {
  display: block; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.3;
  letter-spacing: -0.02em; color: var(--text); text-wrap: balance;
}
.diag-gauge__msg span {
  display: block; font-family: var(--f-body); font-weight: 400; font-size: 0.98rem;
  color: var(--muted); line-height: 1.6; margin-top: 0.5rem;
}

/* Le fait, sous la jauge : vérifiable, jamais menaçant */
.diag-fact {
  margin: 2.2rem auto 0; max-width: 760px; text-align: center;
  font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--muted); line-height: 1.7;
}
.diag-fact strong { color: var(--text); font-weight: 400; }

@media (max-width: 900px) {
  .diag-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .diag-gauge { padding: 1.8rem 1.5rem; }
  .diag-gauge__body { gap: 1.2rem; }
  .diag-gauge__body .btn { width: 100%; justify-content: center; }
}


/* ==================================================================
   LE « AVANT » DE ZOÉ — les trois axes du diagnostic, vides.
   Registre corail (le même que #constat) : c'est un manque passé, réparé
   juste en dessous par les barres de résultats.
================================================================== */
.zbefore {
  max-width: 820px; margin: 0 auto 1.6rem;
  padding: 1.7rem 1.9rem; border-radius: var(--radius);
  background: var(--ink-2); border: 1px solid var(--line);
}
.zbefore__k {
  display: block; font-family: var(--f-mono); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: #F2A990;
  margin-bottom: 1.1rem;
}
.zbefore__list { list-style: none; display: grid; gap: 0.7rem; margin: 0 0 1.1rem; }
.zbefore__list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 0.8rem; align-items: start;
  color: var(--text); font-size: 0.98rem; line-height: 1.5;
}
.zbefore__list svg { width: 18px; height: 18px; color: #EF8A6B; margin-top: 0.18em; }
.zbefore__list span { color: var(--muted); }
.zbefore__note {
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.05em;
  color: var(--muted); line-height: 1.7; padding-top: 1rem; border-top: 1px solid var(--line);
}
.zbefore__note strong { color: var(--text); font-weight: 400; }
@media (max-width: 768px) { .zbefore { padding: 1.4rem 1.3rem; } }


/* ==================================================================
   POURQUOI UN ABONNEMENT — repère externe posé avant les tarifs.
   Colonne gauche corail (ce qui se passe ailleurs), colonne droite bleue
   (ce qui se passe ici). Trois lignes, pas une de plus.
================================================================== */
.whysub { max-width: 940px; margin: clamp(2.4rem, 4.5vw, 3.6rem) auto clamp(2rem, 4vw, 2.8rem); }
.whysub__head { text-align: center; margin-bottom: 1.5rem; }
.whysub__k {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 0.55rem;
}
.whysub__q {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.12rem, 0.98rem + 0.6vw, 1.45rem); line-height: 1.22;
  letter-spacing: -0.025em; color: var(--text); text-wrap: balance;
}
.whysub__grid { display: grid; gap: 0.7rem; }
.whysub__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.whysub__old, .whysub__new {
  display: grid; grid-template-columns: 20px 1fr; gap: 0.75rem; align-items: start;
  padding: 1rem 1.2rem; border-radius: 14px; font-size: 0.95rem; line-height: 1.55;
}
.whysub__old svg, .whysub__new svg { width: 17px; height: 17px; margin-top: 0.2em; }
.whysub__old { background: rgba(239,107,78,0.06); border: 1px solid rgba(239,107,78,0.22); color: var(--muted); }
.whysub__old svg { color: #EF8A6B; }
.whysub__new { background: rgba(78,93,255,0.08); border: 1px solid rgba(78,93,255,0.28); color: var(--text); }
.whysub__new svg { color: var(--blue-soft); }
@media (max-width: 768px) {
  .whysub__row { grid-template-columns: 1fr; gap: 0.45rem; }
  .whysub__old, .whysub__new { padding: 0.9rem 1rem; font-size: 0.92rem; }
}