:root {
  --accent: #2DCD93;
  --accent-deep: color-mix(in srgb, #2DCD93 68%, #000);
  --accent-soft: color-mix(in srgb, #2DCD93 28%, #fff);
  --accent-glow: rgb(45 205 147 / 0.35);

  /* dark (default) */
  --bg: oklch(0.14 0.012 160);
  --bg-elev: oklch(0.17 0.012 160);
  --bg-card: oklch(0.19 0.013 160);
  --bg-card-hi: oklch(0.22 0.014 160);
  --line: oklch(0.30 0.015 160 / 0.5);
  --line-strong: oklch(0.40 0.02 160 / 0.6);
  --ink: oklch(0.98 0.005 150);
  --ink-dim: oklch(0.75 0.012 160);
  --ink-mute: oklch(0.55 0.012 160);

  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 8px 40px -12px oklch(0 0 0 / 0.5);
  --gap: 24px;

  --pad-section-y: 120px;
  --container: 1280px;
}

[data-theme="light"] {
  --bg: oklch(0.98 0.005 150);
  --bg-elev: oklch(0.96 0.006 150);
  --bg-card: oklch(1 0 0);
  --bg-card-hi: oklch(0.99 0.004 150);
  --line: oklch(0.20 0.01 160 / 0.10);
  --line-strong: oklch(0.20 0.01 160 / 0.18);
  --ink: oklch(0.17 0.015 160);
  --ink-dim: oklch(0.38 0.015 160);
  --ink-mute: oklch(0.55 0.012 160);
  --shadow: 0 1px 0 0 oklch(0 0 0 / 0.03) inset, 0 10px 40px -14px oklch(0.2 0.03 160 / 0.12);
  --accent: #2DCD93;
  --accent-deep: color-mix(in srgb, #2DCD93 68%, #000);
  --accent-soft: color-mix(in srgb, #2DCD93 28%, #fff);
  --accent-glow: rgb(45 205 147 / 0.22);
}

[data-density="compact"] {
  --pad-section-y: 110px;
  --gap: 18px;
}

/* Sélection de texte — vert accent */
::selection {
  background: #2DCD93;
  color: #fff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
  /* 'clip' au lieu de 'hidden' : empêche le scroll horizontal SANS créer
     un nouveau scroll-container qui casserait position: sticky.
     Fallback 'hidden' pour les très vieux navigateurs. */
  overflow-x: hidden;
  overflow-x: clip;
}
body { font-weight: 400; position: relative; }

/* Ambient side glows — donne de la profondeur au fond noir, animées doucement */
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 40% at 15% 20%, oklch(0.72 0.18 155 / 0.42), transparent 70%),
    radial-gradient(ellipse 45% 35% at 85% 60%, oklch(0.68 0.20 155 / 0.35), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 95%, oklch(0.66 0.16 155 / 0.28), transparent 65%);
  filter: blur(80px);
  opacity: 0.9;
  animation: ambientDrift 25s ease-in-out infinite;
  will-change: transform;
}
@keyframes ambientDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(3%, -2%) scale(1.04); }
  50%      { transform: translate(-2%, 3%) scale(0.97); }
  75%      { transform: translate(2%, 1%) scale(1.02); }
}
[data-theme="light"] body::before {
  opacity: 0; /* Pas de lumière verte en mode clair */
}
[data-theme="light"] .hero-orb-blob {
  display: none;
}

/* Sections transparentes pour laisser le fond global respirer */
.section { background: transparent !important; }
.section-soft { background: transparent !important; }
/* Garde le contenu au-dessus des halos */
#root { position: relative; z-index: 1; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.serif { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.01em; }
.serif-i { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.display { font-family: var(--display-font, 'Bricolage Grotesque'), sans-serif; font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; text-transform: uppercase; }
.mono { font-family: 'Geist Mono', monospace; }

.eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.h1 {
  font-family: var(--display-font, 'Bricolage Grotesque'), sans-serif;
  font-size: clamp(42px, 5vw, 80px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 800;
  text-transform: uppercase;
}

/* ─── MRR badge inline — trace perimeter SVG + fond qui arrive après ─── */
.mrr-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.08em 0.36em 0.12em;
  margin: 0 0.16em;
  /* Radius en px fixe → doit matcher EXACTEMENT le rx du SVG (cf. mrr-trace-rect) */
  border-radius: 8px;
  color: var(--accent);
  /* Taille réduite : le badge ne doit pas écraser le reste du titre */
  font-size: 0.78em;
  letter-spacing: -0.02em;
  isolation: isolate;
  line-height: 0.9;
  vertical-align: baseline;
  /* CRUCIAL : sans ça, le shimmer ::before déborde sur toute la ligne du titre */
  overflow: hidden;
}

/* Texte (au-dessus de tout le reste) */
.mrr-badge-text {
  position: relative;
  z-index: 3;
}

/* SVG qui dessine le contour (trace perimeter) */
.mrr-trace-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.mrr-trace-rect {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  /* Démarre à 1.3s (après "MRR 2.0" lu) — trace sur 1.1s */
  animation: mrrTrace 1.1s cubic-bezier(.4,.2,.2,1) 1.3s forwards;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
@keyframes mrrTrace {
  0%   { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

/* Fond + glow — apparaît APRÈS le tracé (fade-in) */
.mrr-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent),
    0 0 60px -8px var(--accent-glow),
    inset 0 0 40px -16px var(--accent-glow);
  opacity: 0;
  /* Démarre quand le tracé est presque fini (1.3s + 1.0s = 2.3s) */
  animation: mrrFillIn 0.6s ease-out 2.3s forwards;
  z-index: -1;
  pointer-events: none;
}
@keyframes mrrFillIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Shimmer qui balaie le badge — invisible au repos, démarre à 3.2s puis boucle */
.mrr-badge::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(
    100deg,
    transparent 20%,
    color-mix(in oklab, var(--accent) 45%, white) 50%,
    transparent 80%
  );
  /* État initial : complètement hors-champ ET invisible (avant que l'animation démarre) */
  transform: translateX(-150%) skewX(-12deg);
  opacity: 0;
  animation: mrrShimmer 3.8s ease-in-out 3.2s infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
}

@keyframes mrrShimmer {
  0%   { transform: translateX(-150%) skewX(-12deg); opacity: 0;    }
  8%   {                                              opacity: 0.55; }
  48%  { transform: translateX(240%)  skewX(-12deg); opacity: 0.55; }
  55%  { transform: translateX(240%)  skewX(-12deg); opacity: 0;    }
  100% { transform: translateX(240%)  skewX(-12deg); opacity: 0;    }
}

/* ─── SVG V — clip-path calculé par JS (HeroOrb useEffect) ─── */
/* Fallback conservateur jusqu'à ce que JS mesure la VSL (80ms) */
.hero-v-svg {
  clip-path: inset(0 0 35% 0); /* cache le bas par défaut */
}
@media (max-width: 640px)  { .hero-v-svg { opacity: 0.55; } }
@media (min-width: 641px) and (max-width: 1024px) { .hero-v-svg { opacity: 0.85; } }
/* Mode light : inverser le remplissage du V (blanc → sombre) */
[data-theme="light"] .hero-v-svg { opacity: 0.55; }
[data-theme="light"] .hero-v-fill { fill: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .hero-v-fill-glow { fill: rgba(0,0,0,0.04) !important; }

/* Grand écran ≥ 1920px (Full HD+ / 2K / 4K) : VSL plus grande */
@media (min-width: 1921px) {
  .hero-video-wrap { max-width: min(860px, 56vw) !important; }
}
/* 2K réel (2560 CSS px = écran 4K 100% DPI ou 2K à 100%) */
@media (min-width: 2400px) {
  .hero-video-wrap { max-width: min(960px, 50vw) !important; }
}

@keyframes heroVDraw {
  from { stroke-dashoffset: 2200; }
  to   { stroke-dashoffset: 0; }
}
@keyframes heroVFillIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroOrbIn {
  from { opacity: 0; transform: translateX(-50%) scale(0.85); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes heroWatermarkIn {
  0%   {
    opacity: 0;
    transform: translateX(-50%) scale(0.7);
    filter: blur(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    filter: blur(0);
  }
}

/* ─── Curseur clignotant pour la barre URL de la VSL ─── */
@keyframes vslCursorBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ─── Boutons macOS (quitter / réduire / agrandir) avec icône au survol ─── */
.mac-dots { display: flex; gap: 6px; align-items: center; }
.mac-dots .mac-dot {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: default;
  position: relative;
  transition: transform 0.18s ease;
}
.mac-dots .mac-dot svg { opacity: 0; transition: opacity 0.2s ease; }
.mac-dots:hover .mac-dot svg { opacity: 1; }
.mac-dots .mac-dot:hover { transform: scale(1.12); }
.mac-dot--close    { background: #ff5f57; }
.mac-dot--minimize { background: #febc2e; }
.mac-dot--maximize { background: #28c841; }

/* ─── Ruban lumineux qui fait le tour d'un cadre (VSL, cards premium) ─── */
@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.beam-border {
  position: relative;
  isolation: isolate;
}
.beam-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0%,
    transparent 72%,
    color-mix(in oklab, var(--accent) 45%, transparent) 82%,
    var(--accent) 92%,
    #ffffff 96%,
    var(--accent) 99%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: beamSpin 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
/* Fallback si @property n'est pas supporté : beam statique subtil */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .beam-border::before {
    background: linear-gradient(135deg, transparent, var(--accent), transparent);
    animation: none;
  }
}
@keyframes beamSpin {
  to { --beam-angle: 360deg; }
}
.h2 {
  font-family: var(--display-font, 'Bricolage Grotesque'), sans-serif;
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.h3 {
  font-family: var(--display-font, 'Bricolage Grotesque'), sans-serif;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}

.section {
  padding-top: var(--pad-section-y);
  position: relative;
}
.section-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: var(--pad-section-y);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.section-header .h2 { margin-top: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.22s cubic-bezier(.2,.7,.2,1);
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}
.btn-primary:hover {
  transform: scale(1.04);
}
.btn-lg {
  padding: 17px 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.btn-dark {
  background: #0a0a0b;
  color: #ffffff;
  border: 1px solid color-mix(in oklab, #ffffff 12%, transparent);
}
.btn-dark:hover {
  transform: scale(1.03);
}
[data-theme="light"] .btn-dark {
  background: #0a0a0b;
  color: #ffffff;
  border-color: transparent;
}
[data-theme="light"] .btn-dark:hover {
  transform: scale(1.03);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover {
  transform: scale(1.03);
}
.btn-arrow {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.25s ease;
}
.btn:hover .btn-arrow { transform: translate(2px, -2px); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.4s ease;
}
.card:hover { border-color: var(--line-strong); }

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* reveal animation helper */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  filter: blur(4px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1), filter 0.7s ease;
}
.reveal.in { filter: blur(0); }
.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes drawPath {
  from { stroke-dashoffset: var(--len, 1000); }
  to { stroke-dashoffset: 0; }
}
@keyframes floatUp {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-80px); opacity: 0; }
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* marquee */
@keyframes marq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* subtle breathing orb */
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* kinetic text line */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* pulse ring */
@keyframes pulseRing {
  0% { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* counter spin */
@keyframes rollUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* FAQ ? décoratif */
@keyframes faqFloat {
  0%, 100% { transform: translateY(-50%) rotate(10deg); }
  50%       { transform: translateY(calc(-50% - 10px)) rotate(15deg); }
}

/* footer minimaliste */
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-links a:hover { color: var(--ink) !important; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }

/* ═══ Custom cursor — desktop uniquement (pointer: fine) ═══ */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }

  .vz-cursor-dot {
    position: fixed;
    top: -3px; left: -3px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
  }

  .vz-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 99998;
    will-change: transform;
  }

  .vz-cursor-ring-inner {
    width: 36px; height: 36px;
    margin: -18px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent);
    background: transparent;
    transition:
      width  0.28s cubic-bezier(.2,.7,.2,1),
      height 0.28s cubic-bezier(.2,.7,.2,1),
      margin 0.28s cubic-bezier(.2,.7,.2,1),
      background-color 0.22s ease,
      border-color 0.22s ease,
      opacity 0.2s ease;
    opacity: 0.65;
  }

  .vz-cursor-ring--hover .vz-cursor-ring-inner {
    width: 52px; height: 52px;
    margin: -26px;
    background-color: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent);
    opacity: 1;
  }

  .vz-cursor-ring--click .vz-cursor-ring-inner {
    width: 18px; height: 18px;
    margin: -9px;
    background-color: color-mix(in srgb, var(--accent) 28%, transparent);
    border-color: var(--accent);
    opacity: 1;
  }
}

/* divider */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* glow */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.5;
}

/* chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — tablette, mobile
   ═══════════════════════════════════════════════════════════════════ */

/* Tablettes (< 1024px) */
@media (max-width: 1024px) {
  :root { --pad-section-y: 72px; }
  .container { padding: 0 28px; }

  /* Piliers & cards à 2 colonnes → stack vertical */
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.05fr"],
  [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Pillar invert (Revenus) : reset text-align sur mobile */
  .pillar-text-invert {
    text-align: left !important;
  }
  .pillar-text-invert > div { flex-direction: row !important; }
  .pillar-text-invert h3,
  .pillar-text-invert p { margin-left: 0 !important; }
  .pillar-text-invert > div:last-child { justify-content: flex-start !important; }

  /* Timeline : stack vertical on tablet */
  [style*="grid-template-columns: 380px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Stats 4 colonnes → 2 */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
  :root { --pad-section-y: 48px; }
  .container { padding: 0 16px; }

  /* Titres beaucoup plus petits sur mobile */
  .h1 { font-size: clamp(28px, 7vw, 40px) !important; }
  .h2 { font-size: clamp(24px, 6vw, 36px) !important; }
  .h3 { font-size: clamp(20px, 5vw, 28px) !important; }

  /* Hero : coller à la navbar, tout tenir dans 100dvh */
  #hero {
    min-height: unset !important;
    padding-top: clamp(52px, 7vh, 64px) !important;
    padding-bottom: 0 !important;
    justify-content: flex-start !important;
  }
  /* Coller le titre à la navbar */
  .hero-headline { margin-top: 4px !important; }

  /* VSL mobile : cacher le chrome macOS, réduire taille */
  .vsl-chrome { display: none !important; }
  .hero-video-wrap {
    margin-top: 20px !important;
    margin-bottom: clamp(52px, 7vh, 64px) !important;
    /* Forcer une largeur réduite centrée */
    width: 82vw !important;
    max-width: 380px !important;
    min-width: unset !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-video-wrap .beam-border {
    padding: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4) !important;
  }
  .hero-video-wrap .beam-border > div[style*="aspect-ratio"] {
    border-radius: 14px !important;
  }

  /* Stats block : compact 2x2 sur mobile, serré */
  #hero ~ section [style*="grid-template-columns: repeat(4, 1fr)"],
  section:not(#hero) [style*="repeat(4, 1fr)"][style*="border-top"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .big-stat > div {
    padding: 14px 12px !important;
  }
  .big-stat .serif { font-size: clamp(28px, 7vw, 40px) !important; }
  .big-stat .label { font-size: 9px !important; margin-top: 4px !important; }

  /* Nav desktop : cache les liens du milieu sur tablette */
  nav:not(.mobile-nav) > div:nth-of-type(1) { display: none !important; }
  nav:not(.mobile-nav) { padding: 0 16px !important; }

  /* Nav mobile : forcer la visibilité des éléments cachés par les règles desktop */
  .mobile-nav {
    display: flex !important;
    padding: 8px 10px 8px 14px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  /* La div droite (CTAs + hamburger) était cachée par nav > div:nth-of-type(1) */
  .mobile-nav > div {
    display: flex !important;
  }
  /* Les liens /app étaient cachés */
  .mobile-nav a[href="/app"] {
    display: flex !important;
  }
  /* Tous les liens de la nav mobile visibles */
  .mobile-nav a {
    display: flex !important;
  }

  /* Hero - compact pour mobile */
  #hero { padding-top: 64px !important; padding-bottom: 20px !important; }
  .hero-video-wrap { 
    max-width: 100% !important; 
    margin-top: 16px !important; 
    padding: 0 8px !important;
  }
  /* Réduit la taille de la VSL container sur mobile */
  .hero-video-wrap > div {
    max-width: 100% !important;
  }

  /* Notifs desktop cachées sur mobile */
  .floating-notif-desktop { display: none !important; }
  
  /* Notifs mobiles : visibles, repositionnées au-dessus du titre */
  .floating-notif-mobile {
    display: block !important;
  }
  
  /* Cacher barre URL VSL sur mobile */
  .vsl-title-bar { display: none !important; }
  
  /* Réduire padding chrome VSL sur mobile */
  .mac-dots { display: none !important; }
  
  /* Container hero : réduire l'espace sous la nav sur mobile */
  #hero .container {
    position: relative !important;
    padding-top: 12px !important;
  }
  
  /* SVG V sur petits écrans */
  .hero-v-svg {
    opacity: 0.85 !important;
  }
  .hero-v-svg-hide {
    display: block !important;
    top: -5vh !important;
  }

  /* CTAs hero : taille auto, côte à côte, pas pleine largeur */
  .btn.btn-lg {
    width: auto;
    padding: 13px 22px !important;
    font-size: 14px !important;
    justify-content: center;
  }
  /* Le conteneur flex des CTAs : wrap centré */
  .btn.btn-lg + .btn.btn-lg { margin-left: 0; }

  /* Stats : 2 colonnes, plus compact */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Demo tabs : 1 rangée horizontale scrollable */
  .demo-tabs {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
  }
  .demo-tabs::-webkit-scrollbar { display: none; }
  .demo-tabs > button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 14px 14px !important;
    font-size: 10px !important;
    min-width: 0 !important;
  }
  /* Demo card : 1 colonne, padding réduit, titre compact */
  .demo-card {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 24px 20px !important;
  }
  .demo-card h3 {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.1 !important;
  }
  /* Bullets : 1 ligne scrollable */
  .demo-bullets {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .demo-bullets::-webkit-scrollbar { display: none; }
  .demo-bullets .chip { flex-shrink: 0 !important; }

  /* Demo content : pleine largeur */
  [style*="gridTemplateColumns: '1fr 1.2fr'"] {
    grid-template-columns: 1fr !important;
  }

  /* Piliers / cards : padding réduit */
  .card { padding: 24px !important; }

  /* Sticky CTA : plus compact */
  a[style*="position: fixed"][href="#pricing"] {
    padding: 10px 16px !important;
    font-size: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
  }

  /* Footer minimaliste : stack vertical sur mobile */
  .footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .footer-links {
    gap: 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Compare : stack vertical sur mobile */
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 20"] {
    grid-template-columns: 1fr !important;
  }
  /* Compare cards : padding réduit */
  [style*="padding: 36"][style*="borderRadius: 28"] {
    padding: 24px !important;
  }

  /* Timeline : stack complet sur mobile avec affichage alternatif */
  [style*="grid-template-columns: 380px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Timeline panel : auto height */
  [style*="height: 620"] {
    height: auto !important;
    min-height: 0 !important;
  }
  /* Timeline phases : horizontal scroll sur mobile */
  .timeline-phases {
    display: flex !important;
    overflow-x: auto !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .timeline-phases::-webkit-scrollbar { display: none; }

  /* Barre de progression : cachée sur mobile (serait un item bizarre dans la rangée) */
  .timeline-progress { display: none !important; }

  /* Bouton phase sur mobile : compact, juste numéro + nom */
  .timeline-phases > button {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    align-items: center !important;
    flex-direction: column !important;
    text-align: center !important;
  }

  /* Numéro de phase : taille réduite */
  .timeline-phases > button > span.serif {
    font-size: 22px !important;
    min-width: 0 !important;
    line-height: 1 !important;
  }

  /* Nom de phase */
  .timeline-phases > button > div {
    text-align: center !important;
    min-width: 0 !important;
  }
  .timeline-phases > button > div > div:first-child {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Sous-titre et stats pill : cachés sur mobile */
  .timeline-phase-sub { display: none !important; }
  .timeline-phase-pill { display: none !important; }
  /* Timeline module grid : 2 colonnes */
  .timeline-module-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Timeline panel plus compact */
  [style*="borderRadius: 24"][style*="padding: 32"] {
    padding: 20px !important;
    border-radius: 16px !important;
  }
  /* Header timeline sur mobile */
  [style*="justifyContent: 'space-between'"][style*="alignItems: 'center'"] > div > span.label {
    font-size: 10px !important;
  }
  [style*="justifyContent: 'space-between'"][style*="alignItems: 'center'"] > div > h3.serif {
    font-size: 24px !important;
  }

  /* Calculator : stack vertical sur mobile */
  [style*="gridTemplateColumns: '1fr 1.2fr'"],
  [style*="gridTemplateColumns: '1fr 1fr'"] {
    grid-template-columns: 1fr !important;
  }
  /* Calculator pack selectors : plus compacts */
  [style*="display: 'flex'"][style*="gap: 10"] {
    flex-wrap: wrap !important;
  }
  [style*="gap: 10"] > button {
    flex: 1 1 45% !important;
  }

  /* Pricing : packs 1 colonne, métriques toujours 3 */
  .packs-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .pack-metrics {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Titre pack : 1 ligne sur mobile */
  .pack-title br { display: none !important; }
  .pack-title { font-size: 22px !important; white-space: nowrap !important; }

  /* Bloc titre + prix : row, titre gauche, prix droite */
  .pack-title-row {
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
  }

  /* Prix : très grand à droite */
  .pack-price {
    font-size: 68px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  /* Header pack : tagline seule, badge en dessous */
  .pack-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .pack-badge { align-self: flex-start !important; }

  /* FAQ : padding réduit */
  details[style*="padding: 20px"] {
    padding: 16px !important;
  }

  /* Marquee : texte plus petit */
  [style*="font-size: clamp(56px"] {
    font-size: clamp(32px, 8vw, 48px) !important;
  }

  /* FinalCTA padding réduit */
  [style*="padding: 72px 60px"] { padding: 48px 20px !important; }
  
  /* Tous les textes : lisibilité mobile */
  body { font-size: 14px; }
  p { font-size: 14px !important; line-height: 1.6 !important; }
}

/* Tablette (768px - 1024px) - transition douce */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { padding: 0 24px; }
  
  /* Titres intermédiaires */
  .h1 { font-size: clamp(34px, 6vw, 56px) !important; }
  .h2 { font-size: clamp(26px, 4.5vw, 42px) !important; }
  
  /* Hero plein écran tablette + VSL */
  #hero { min-height: 100dvh !important; }
  .hero-video-wrap { max-width: 68% !important; margin-top: clamp(24px, 3vh, 40px) !important; }
  
  /* Timeline : 2 colonnes mais plus étroites */
  [style*="grid-template-columns: 380px 1fr"] {
    grid-template-columns: 280px 1fr !important;
  }
  
  /* Pricing : 3 colonnes mais plus compact */
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    gap: 12px !important;
  }
  
  /* Compare : garder 2 colonnes mais plus compact */
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 20"] {
    gap: 16px !important;
  }
  [style*="padding: 36"][style*="borderRadius: 28"] {
    padding: 28px !important;
  }
}

/* Petits laptops (1025px - 1440px) — MacBook 13/15 pouces */
@media (min-width: 1025px) and (max-width: 1440px) {
  /* Titre hero : réduction progressive selon la largeur */
  .h1 { font-size: clamp(36px, 4.2vw, 64px) !important; }
  .h2 { font-size: clamp(28px, 3.6vw, 50px) !important; }

  /* Hero : plein écran garanti + moins de padding vertical sur petits écrans */
  #hero { min-height: 100dvh !important; padding-top: clamp(72px, 7vh, 100px) !important; padding-bottom: clamp(12px, 2vh, 24px) !important; }

  /* VSL : adaptée pour petits laptops */
  .hero-video-wrap { max-width: min(780px, 82vw) !important; margin-top: clamp(28px, 3.5vh, 44px) !important; }

  /* CTAs hero légèrement plus compacts */
  .btn.btn-lg {
    padding: 14px 24px !important;
    font-size: 14px !important;
  }
}

/* Très petits (< 420px) */
@media (max-width: 420px) {
  :root { --pad-section-y: 40px; }
  .container { padding: 0 12px; }
  
  /* Titres encore plus petits */
  .h1 { font-size: clamp(28px, 9vw, 40px) !important; }
  .h2 { font-size: clamp(22px, 7vw, 32px) !important; }
  .h3 { font-size: clamp(20px, 6vw, 28px) !important; }
  
  /* Stats : 2 colonnes très compact */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  [style*="grid-template-columns: repeat(4, 1fr)"] > div {
    text-align: center;
  }
  
  /* Timeline modules : 2 colonnes même sur petit mobile */
  .timeline-module-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  
  /* Calculator packs : 1 par ligne */
  [style*="gap: 10"] > button {
    flex: 1 1 100% !important;
  }
  
  /* Nav desktop : supprimer "Connexion" sur petit mobile */
  nav:not(.mobile-nav) a[href="/app"] { display: none !important; }
  
  /* Hero ultra compact */
  #hero { padding-top: 72px !important; }
  
  /* CTAs full width pile */
  .btn.btn-lg { 
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  
  /* SVG V : pas d'ajustement nécessaire */
}