/* ============================================================
   GRUECAPITAL — Landing styles (v3)
   Product-first design : big hero mockup, spotlight sections,
   UI dioramas, intermediate CTAs, real responsive.
   Palette : ink + paper (near-white) + accent orange + warm highlight.
   ============================================================ */

/* --- 1. Tokens ------------------------------------------------ */
:root {
  --ink:        #0E0E0C;
  --ink-soft:   #1F1E1A;
  --ink-mute:   #4A463E;
  --ink-mute-text: #5A5450;  /* a11y WCAG AA — paragraphes longs sur fond paper/paper-band */
  --paper:      #FBFBF9;
  --paper-band: #F2EFE9;
  --paper-deep: #EBE7DD;
  --accent:     #FF6A2C;
  --accent-deep:#C84A12;
  --accent-soft:#FFD9C0;
  --highlight:  #FFE7C2;
  --mute:       #6F6A60;        /* eyebrows ≤ 12 px et éléments décoratifs uniquement */
  --rule:        rgba(14, 14, 12, 0.08);
  --rule-strong: rgba(14, 14, 12, 0.18);

  /* Intent colors — pop-ups garde-fou + états dashboard (audit consolidé v1) */
  --success:     #2D8A57;
  --success-soft: #D7EFDF;
  --warning:     #C28F1E;
  --warning-soft: #FAEBC9;
  --danger:      #B43D2F;
  --danger-soft: #F5D6CF;
  --info:        #2C6CA6;
  --info-soft:   #D5E5F2;

  --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-accent:  'Fraunces', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --container:   1280px;
  --gutter:      clamp(20px, 4vw, 56px);
  --section-y:   clamp(80px, 11vw, 160px);

  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 44px;
  --radius-2xl: 56px;

  --ease: cubic-bezier(0.22, 0.71, 0.18, 1);
  --shadow-sm: 0 1px 2px rgba(14,14,12,0.06), 0 2px 6px rgba(14,14,12,0.04);
  --shadow-md: 0 4px 12px -2px rgba(14,14,12,0.08), 0 16px 32px -12px rgba(14,14,12,0.10);
  --shadow-lg: 0 8px 24px -4px rgba(14,14,12,0.10), 0 32px 64px -20px rgba(14,14,12,0.16);

  color-scheme: light;
}

/* ============================================================
   1.5. DARK THEME TOKENS — applied when <html data-theme="dark">
   ============================================================ */
[data-theme="dark"] {
  --ink:        #FBFBF9;
  --ink-soft:   #E5E2DA;
  --ink-mute:   #B0ACA1;
  --ink-mute-text: #C4BFB4;  /* a11y AA dark mode */
  --paper:      #0E0E0C;
  --paper-band: #17161A;
  --paper-deep: #1F1D22;
  --accent:     #FF7A3F;
  --accent-deep:#C84A12;
  --accent-soft:#3C2818;
  --highlight:  #3C2818;
  --mute:       #8A857C;
  --rule:        rgba(251, 251, 249, 0.08);
  --rule-strong: rgba(251, 251, 249, 0.20);

  --success:     #4ABF7E;
  --success-soft: #1F3329;
  --warning:     #E5B547;
  --warning-soft: #3D311A;
  --danger:      #E0625A;
  --danger-soft: #3D1F1C;
  --info:        #62A6E0;
  --info-soft:   #1A2A3D;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.20);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.40), 0 16px 32px -12px rgba(0,0,0,0.30);
  --shadow-lg: 0 8px 24px -4px rgba(0,0,0,0.50), 0 32px 64px -20px rgba(0,0,0,0.45);

  color-scheme: dark;
}

/* Smooth color transition when no curtain animation runs
   (system theme change, initial paint). Disabled during curtain phase via the
   .theme-swapping class to keep the dramatic moment crisp. */
body { transition: background-color 280ms var(--ease), color 280ms var(--ease); }
.theme-swapping body { transition: none; }

/* === Dark-mode overrides for sections built on inverted contrast === */
[data-theme="dark"] .nav-pill {
  background: rgba(14, 14, 12, 0.78);
  border-color: rgba(251, 251, 249, 0.08);
  box-shadow:
    0 8px 28px -10px rgba(0, 0, 0, 0.50),
    0 2px 4px rgba(0, 0, 0, 0.20);
}
/* CTA strip : was ink bg + paper text. In dark, we keep it darker than page
   (paper-band) and explicitly preserve light text — otherwise it becomes
   dark-on-dark and disappears. */
[data-theme="dark"] .cta-strip {
  background: var(--paper-band);
  color: var(--ink);
}
[data-theme="dark"] .cta-strip h2,
[data-theme="dark"] .cta-strip-meta { color: var(--ink); }
[data-theme="dark"] .cta-strip-meta { color: var(--ink-mute); }
[data-theme="dark"] .cta-strip h2 em { color: var(--accent); }
[data-theme="dark"] .cta-strip::before {
  background: radial-gradient(closest-side, rgba(255, 122, 63, 0.18), transparent 70%);
}
/* Persona cards (sticky stack) : adapt bg/border to dark surface */
[data-theme="dark"] .persona-card {
  background: var(--paper-band);
  border-color: rgba(251, 251, 249, 0.08);
}
/* iPad shell : stays dark in both modes (it's a physical device) */
[data-theme="dark"] .product-frame {
  background: var(--paper-band);
}
/* Band-ink helper (legacy) : stay distinct from page bg in dark */
[data-theme="dark"] .band-ink {
  background: var(--paper-band);
}
/* Hero blob : still peach-warm on dark, but slightly more saturated to read */
[data-theme="dark"] .hero-blob {
  background: radial-gradient(closest-side, rgba(255, 122, 63, 0.18) 0%, rgba(60, 40, 24, 0.30) 40%, transparent 70%);
}
/* Form inputs adapt naturally via vars, but the focus bg switch needs care */
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field textarea:focus,
[data-theme="dark"] .field select:focus {
  background: var(--paper-band);
}
[data-theme="dark"] .radio-list label:has(input:checked) {
  background: var(--paper-band);
}
/* Form card shell : darker bg + subtle border in night mode */
[data-theme="dark"] .form-shell {
  background: var(--paper-band);
  border-color: rgba(251, 251, 249, 0.08);
  box-shadow:
    0 12px 32px -12px rgba(0, 0, 0, 0.50),
    0 2px 4px rgba(0, 0, 0, 0.20);
}
/* Stepper pills : night-mode contrast */
[data-theme="dark"] .step-pill-num {
  background: var(--paper-band);
  border-color: rgba(251, 251, 249, 0.18);
}
[data-theme="dark"] .step-pill.is-done .step-pill-num {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
[data-theme="dark"] .step-pill-bar.is-done {
  background: var(--paper);
}
/* Diorama gradient backgrounds (uses var(--paper-band) → var(--paper-deep)
   — already theme-aware, no override needed) */

/* --- 2. Reset / base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.02;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* --- 3. Typography ------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.h-display {
  font-size: clamp(40px, 5.4vw, 78px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.h-xl { font-size: clamp(36px, 5vw, 72px); letter-spacing: -0.032em; line-height: 1.0; }
.h-lg { font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -0.025em; line-height: 1.05; }
.h-md { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.018em; line-height: 1.15; }
.italic-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
}
.lead {
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 58ch;
}
p { margin: 0 0 1em; max-width: 64ch; }
small { font-size: 13px; color: var(--mute); }

.pill-hl {
  display: inline-block;
  padding: 0.05em 0.36em;
  background: var(--highlight);
  border-radius: 0.3em;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink);
}

/* --- 4. Layout ----------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
section { padding: var(--section-y) 0; position: relative; }
.section-tight { padding: clamp(56px, 8vw, 96px) 0; }
.rule { height: 1px; background: var(--rule); width: 100%; }

.band       { background: var(--paper-band); }
.band-deep  { background: var(--paper-deep); }
.band-ink   { background: var(--ink); color: var(--paper); }
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: var(--paper); }
.band-ink .eyebrow { color: rgba(251,251,249,0.65); }
.band-ink .lead, .band-ink p { color: rgba(251,251,249,0.78); }
.band-ink .italic-accent { color: var(--accent); }

/* --- 5. Nav -------------------------------------------------- */
/* === NAV (21st.dev larsen66 port) ===
   The nav is no longer a full-width sticky bar. It's a centered pill
   floating at the top of the page that collapses to a 56px circle
   when the user scrolls down past 150px (controlled by main.js).
   Right-side controls (theme toggle + Précommander) live in their
   own fixed top-right block, always visible. */
.nav {
  /* Sticky : in normal flow at page load (so hero content like the
     "Bêta fermée" badge sits naturally below it) — sticks to the top
     as soon as the user scrolls, which is when the larsen66 collapse
     animation actually has somewhere to live. */
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 18px var(--gutter) 0;
  pointer-events: none;          /* let clicks pass through empty space */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.nav-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 8px 22px;
  height: 56px;
  border-radius: 999px;
  background: rgba(251, 251, 249, 0.80);
  border: 1px solid var(--rule);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    0 8px 28px -10px rgba(14, 14, 12, 0.18),
    0 2px 4px rgba(14, 14, 12, 0.04);
  position: relative;
  overflow: hidden;
  transition:
    width 0.55s cubic-bezier(0.25, 1, 0.32, 1),
    padding 0.45s cubic-bezier(0.25, 1, 0.32, 1),
    background 0.3s var(--ease),
    border-color 0.3s var(--ease);
  /* No `will-change: width` here — it would promote the pill to a
     containing block and break `position: fixed` on the mobile drawer
     inside (.nav-center on small screens). */
}
.nav-pill .brand,
.nav-pill .nav-center {
  transition:
    opacity 0.30s var(--ease),
    transform 0.45s cubic-bezier(0.25, 1, 0.32, 1);
}
.nav-pill-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.30s var(--ease) 0s;
}
.nav-pill-icon svg { width: 22px; height: 22px; }

/* Collapsed : shrink to circle, hide brand+links, show menu icon.
   Cursor: pointer signals the user can click to expand again. */
.nav-pill.is-collapsed {
  width: 56px;
  padding: 8px;
  gap: 0;
  cursor: pointer;
}
.nav-pill.is-collapsed .brand {
  opacity: 0;
  transform: translateX(-22px);
  pointer-events: none;
}
.nav-pill.is-collapsed .nav-center {
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
}
.nav-pill.is-collapsed .nav-pill-icon {
  opacity: 1;
  transition-delay: 0.18s;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
  flex-shrink: 0;
}
.brand-mark {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: 4px 4px 4px 12px;
  background: var(--accent);
  border-radius: 2px;
}
.brand-text { display: inline-block; }

.nav-center {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-link {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--accent);
}

.nav-right {
  /* Sibling of the sticky <header.nav> — `absolute` without a positioned
     ancestor anchors to the document's initial containing block. Same
     visual coords as fixed at scroll=0, but it scrolls AWAY with the
     page instead of staying glued to the viewport. */
  position: absolute;
  top: 18px;
  right: var(--gutter);
  z-index: 51;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

/* === Theme toggle button (curtain trigger) === */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper-band);
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  color: var(--ink);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.theme-toggle:hover {
  background: var(--paper-deep);
  border-color: var(--rule-strong);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.theme-icon {
  position: absolute;
  width: 18px;
  height: 18px;
  color: var(--ink);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}
/* Default = light mode → moon visible, sun hidden */
.theme-icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-icon-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
@media (prefers-reduced-motion: reduce) {
  .theme-icon { transition: opacity 0.15s linear !important; transform: none !important; }
}

/* === Curtain : sliding panel + orange wake + organic asymmetric easing ===
   - translateY (not scaleY) so the wake keeps its shape during the move.
   - ::after = soft orange gradient that trails just below the curtain's
     leading edge, fading in during descent, fading out during ascent.
   - ::before = subtle warm radial inside the curtain so the panel never
     reads as a flat color block.
   - Asymmetric easing : easeOut on the way down (lands softly), easeIn on
     the way up (lifts off with a snap). Both ~380ms.
   - In light↔dark either direction, the orange wake works on both bgs. */
.curtain {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  background: var(--paper);
  transform: translateY(-100%);
  /* Default (no .is-active) = state when curtain is rising out of the way.
     easeIn-ish : slow start, accelerates off-screen. */
  transition: transform 380ms cubic-bezier(0.85, 0, 0.68, 0.28);
  will-change: transform;
}
.curtain::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% 28%, rgba(255, 106, 44, 0.08) 0%, transparent 65%);
  pointer-events: none;
}
.curtain::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(
    to bottom,
    rgba(255, 106, 44, 0.85) 0%,
    rgba(255, 106, 44, 0.48) 28%,
    rgba(255, 106, 44, 0.18) 60%,
    rgba(255, 106, 44, 0.05) 85%,
    transparent 100%
  );
  filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 380ms cubic-bezier(0.85, 0, 0.68, 0.28);
}
.curtain.is-active {
  transform: translateY(0);
  /* On the way in : easeOut-ish, lands and settles. */
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
}
.curtain.is-active::after {
  opacity: 1;
  transition: opacity 380ms cubic-bezier(0.32, 0.72, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
  .curtain,
  .curtain::after { transition: none !important; }
  .curtain { transform: translateY(-100%) !important; }
  .curtain::after { opacity: 0 !important; }
}
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 12px;
  background: var(--paper-band);
}
.nav-burger span { width: 18px; height: 1.5px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.2s; }

/* --- 6. Buttons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  will-change: transform;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 1px 2px rgba(14,14,12,0.10), 0 8px 16px -6px rgba(14,14,12,0.18);
}
.btn-primary:hover {
  background: var(--accent);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -2px rgba(255,106,44,0.30), 0 16px 32px -8px rgba(255,106,44,0.18);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}
.btn-secondary:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-accent {
  background: var(--accent);
  color: var(--paper);
  box-shadow: 0 1px 2px rgba(200,74,18,0.20), 0 8px 16px -4px rgba(255,106,44,0.30);
}
.btn-accent:hover { background: var(--ink); transform: translateY(-2px); }
.btn-pill {
  background: var(--highlight);
  color: var(--ink);
  padding: 12px 18px;
  font-size: 14px;
}
.btn-pill:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn-ghost {
  padding: 10px 0;
  border-radius: 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
}
.btn-ghost:hover { color: var(--accent); border-bottom-color: var(--accent); }
.btn-lg { padding: 18px 30px; font-size: 16px; }
.btn .arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   7. HERO — product-first layout
   ============================================================ */
.hero {
  padding: clamp(24px, 2.4vw, 36px) 0 clamp(70px, 9vw, 110px);
  position: relative;
  overflow: hidden;
}
.hero-blob {
  position: absolute;
  inset: -15% -20% auto auto;
  width: 70vw;
  height: 70vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, var(--accent-soft) 0%, rgba(255,231,194,0.45) 40%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 0.92fr 1.08fr; gap: 80px; }
}
/* Custom property for the rotating border angle. Defining it with @property
   makes the value animatable (otherwise CSS can't interpolate raw angles). */
@property --eyebrow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  /* Dual background : solid paper inside (padding-box clip) + rotating
     conic-gradient on the border ring (border-box clip). The 2px transparent
     border is where the gradient peeks through. */
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    conic-gradient(
      from var(--eyebrow-angle),
      rgba(255, 106, 44, 0) 0%,
      rgba(255, 106, 44, 0) 28%,
      rgba(255, 106, 44, 0.9) 45%,
      rgba(255, 200, 150, 1) 50%,
      rgba(255, 106, 44, 0.9) 55%,
      rgba(255, 106, 44, 0) 72%,
      rgba(255, 106, 44, 0) 100%
    ) border-box;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
  --eyebrow-angle: 0deg;
  animation: rotate-eyebrow-border 4s linear infinite;
}
@keyframes rotate-eyebrow-border {
  to { --eyebrow-angle: 360deg; }
}
.hero-eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,106,44,0.18);
  flex-shrink: 0;
}

/* "Bêta fermée" : dark pulsing aura that reads as a "burned" / "stamped"
   detail on the cream pill (and a depth-shadow on dark backgrounds). */
.beta-glow {
  color: var(--ink);
  font-weight: 600;
  text-shadow:
    0 0 3px rgba(14, 14, 12, 0.32),
    0 0 9px rgba(14, 14, 12, 0.18);
  animation: beta-glow-pulse 3.2s ease-in-out infinite;
}
@keyframes beta-glow-pulse {
  0%, 100% {
    text-shadow:
      0 0 3px rgba(14, 14, 12, 0.32),
      0 0 9px rgba(14, 14, 12, 0.18);
  }
  50% {
    text-shadow:
      0 0 4px rgba(14, 14, 12, 0.45),
      0 0 13px rgba(14, 14, 12, 0.26);
  }
}
/* Dark mode : black glow on dark bg, kept light-touch like in light mode. */
[data-theme="dark"] .beta-glow {
  animation-name: beta-glow-pulse-dark;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.55),
    0 0 11px rgba(0, 0, 0, 0.32);
}
@keyframes beta-glow-pulse-dark {
  0%, 100% {
    text-shadow:
      0 0 4px rgba(0, 0, 0, 0.55),
      0 0 11px rgba(0, 0, 0, 0.32);
  }
  50% {
    text-shadow:
      0 0 5px rgba(0, 0, 0, 0.75),
      0 0 15px rgba(0, 0, 0, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow { animation: none; --eyebrow-angle: 45deg; }
  .beta-glow { animation: none; }
}
.hero-title { margin-bottom: 28px; }
.hero-sub {
  font-size: clamp(18px, 1.55vw, 21px);
  color: var(--ink-soft);
  margin: 0 0 36px;
  max-width: 38ch;
  line-height: 1.5;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 36px;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  font-size: 13px;
  color: var(--mute);
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-trust span::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* === Product mockup === */
.product {
  position: relative;
  aspect-ratio: 4 / 3.4;
  width: 100%;
  max-width: 720px;
  margin-left: auto;
}
.product-frame {
  position: absolute;
  inset: 8% 5% 8% 8%;
  background: var(--ink);
  border-radius: clamp(20px, 2.5vw, 32px);
  padding: clamp(10px, 1.2vw, 16px);
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.5deg);
  transform-origin: center center;
  will-change: transform;
}

/* Scroll-linked : iPad qui se redresse à mesure que le hero passe.
   Native CSS scroll-driven animations (Chrome/Edge 115+).
   Safari : fallback statique à l'état initial — acceptable, le hero
   reste tilté comme avant. */
@supports (animation-timeline: view()) {
  @keyframes hero-product-redresse {
    from { transform: rotate(-1.5deg) scale(0.97); }
    to   { transform: rotate(0deg) scale(1.02); }
  }
  .hero .product-frame {
    animation: hero-product-redresse linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .product-frame {
    animation: none !important;
    transform: rotate(-1.5deg) !important;
  }
}
.product-screen {
  background: var(--paper);
  border-radius: clamp(12px, 1.5vw, 20px);
  overflow: hidden;
  height: 100%;
  position: relative;
  border: 1px solid rgba(14,14,12,0.06);
}
.product-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* Floating mini-cards around the product */
.float-card {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  animation: float 6s ease-in-out infinite;
}
.float-card strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 2px;
}
.float-card .badge {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  flex-shrink: 0;
}
.float-card .badge.dark { background: var(--ink); color: var(--accent); }
.float-card .badge.accent { background: var(--accent); color: var(--paper); }
.float-card .row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mute); margin-top: 4px; }
.float-card .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.float-1 {
  top: -2%;
  left: -2%;
  animation-delay: -1s;
}
.float-2 {
  top: 42%;
  right: -6%;
  animation-delay: -3s;
}
.float-3 {
  bottom: 0;
  left: 8%;
  animation-delay: -5s;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .float-card { animation: none; }
}

/* --- 8. Stats strip (after hero) ----------------------------- */
.stats-strip {
  padding: 40px 0 60px;
  border-bottom: 1px solid var(--rule);
}
.stats-strip-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 700px) {
  .stats-strip-grid { grid-template-columns: repeat(4, 1fr); gap: 48px; }
}
.stat-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 280ms cubic-bezier(0.22, 0.71, 0.18, 1), opacity 280ms var(--ease);
  cursor: default;
}
.stat-cell .stat-n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 4.4vw, 64px);
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--ink);
  transition: color 240ms var(--ease);
  /* Force le contenu sur une seule ligne baseline-alignée — sinon
     "8 dimensions" se sépare en 2 lignes et casse le rythme. */
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  white-space: nowrap;
}
.stat-cell .stat-n .italic-accent {
  font-size: 0.52em;
  color: var(--accent);
  letter-spacing: -0.005em;
}
.stat-cell .stat-l {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 24ch;
}

/* Hover : la stat survolée monte + passe en accent, les autres s'estompent.
   Géré uniquement avec :hover natif — pas de JS. */
@media (hover: hover) {
  .stats-strip-grid:hover .stat-cell { opacity: 0.45; }
  .stats-strip-grid:hover .stat-cell:hover {
    opacity: 1;
    transform: translateY(-6px);
  }
  .stats-strip-grid:hover .stat-cell:hover .stat-n { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .stat-cell { transition: none !important; transform: none !important; }
  .stats-strip-grid:hover .stat-cell { opacity: 1 !important; }
}

/* --- 9. Manifesto -------------------------------------------- */
.manifesto {
  text-align: left;
  padding: var(--section-y) 0;
}
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: end;
}
@media (min-width: 900px) { .manifesto-grid { grid-template-columns: 2fr 1fr; gap: 80px; } }
.manifesto-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 68px);
  letter-spacing: -0.032em;
  line-height: 1.02;
  max-width: 22ch;
  color: var(--ink);
}
.manifesto-text em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.manifesto-side {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 38ch;
}
/* Wrapper for the consultant architecture + side paragraph in the right column */
.manifesto-side-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
}

/* === Consultant architecture (chip + traces + flowing dots) === */
.consultant-arch {
  width: 100%;
  max-width: 460px;
}
.consultant-arch svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.consultant-arch .arch-trace {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: arch-draw 1.2s cubic-bezier(0.6, 0, 0.2, 1) both;
}
.consultant-arch .arch-trace[data-i="0"] { animation-delay: 0.05s; }
.consultant-arch .arch-trace[data-i="1"] { animation-delay: 0.15s; }
.consultant-arch .arch-trace[data-i="2"] { animation-delay: 0.25s; }
.consultant-arch .arch-trace[data-i="3"] { animation-delay: 0.35s; }
.consultant-arch .arch-trace[data-i="4"] { animation-delay: 0.45s; }
.consultant-arch .arch-trace[data-i="5"] { animation-delay: 0.55s; }
.consultant-arch .arch-trace[data-i="6"] { animation-delay: 0.65s; }
.consultant-arch .arch-trace[data-i="7"] { animation-delay: 0.75s; }
@keyframes arch-draw {
  to { stroke-dashoffset: 0; }
}

.consultant-arch .arch-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  fill: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  animation: arch-fade 0.6s 1.1s var(--ease) both;
}
@keyframes arch-fade { to { opacity: 0.85; } }

.consultant-arch .arch-pins rect {
  fill: var(--ink-mute);
  opacity: 0;
  animation: arch-fade 0.4s 0.9s var(--ease) both;
}
.consultant-arch .arch-chip {
  fill: var(--ink);
  opacity: 0;
  animation: arch-fade 0.5s 0.7s var(--ease) both;
}
/* In dark mode, --ink becomes light → the chip would invert and the light
   "Consultant" text would disappear on it. Lock the chip to a slightly
   elevated dark surface instead (acts like a real chip on a darker PCB). */
[data-theme="dark"] .consultant-arch .arch-chip {
  fill: var(--paper-band);
  stroke: var(--rule-strong);
  stroke-width: 0.5;
}
[data-theme="dark"] .consultant-arch .arch-pins rect {
  fill: var(--ink-soft);
}
.consultant-arch .arch-chip-inner {
  fill: none;
  stroke: rgba(255, 106, 44, 0.25);
  stroke-width: 0.5;
  opacity: 0;
  animation: arch-fade 0.5s 1.0s var(--ease) both;
}
.consultant-arch .arch-chip-text {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  dominant-baseline: middle;
  opacity: 0;
  animation: arch-fade 0.6s 1.2s var(--ease) both;
}
.consultant-arch .arch-dot {
  filter: url(#archGlow);
}

@media (prefers-reduced-motion: reduce) {
  .consultant-arch .arch-trace,
  .consultant-arch .arch-label,
  .consultant-arch .arch-pins rect,
  .consultant-arch .arch-chip,
  .consultant-arch .arch-chip-inner,
  .consultant-arch .arch-chip-text {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
  .consultant-arch .arch-label { opacity: 0.85 !important; }
  .consultant-arch .arch-dot { display: none !important; }
}

/* Mobile : the right column is below the manifesto-text — shrink the SVG */
@media (max-width: 899px) {
  .consultant-arch { max-width: 380px; }
  .consultant-arch .arch-label { font-size: 10px; }
  .consultant-arch .arch-chip-text { font-size: 7.5px; }
}

/* ============================================================
   10.0. SPOTLIGHT STACK — pinned diorama + scrolling text steps
   ============================================================ */
.spotlight-stack {
  position: relative;
  padding: clamp(60px, 8vw, 100px) 0;
}
.spotlight-stack-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
.spotlight-mobile-visual { display: block; margin-top: 40px; }
.spotlight-pinned-col { display: none; }

/* === Desktop : pinned right column with stacked text on the left === */
@media (min-width: 1000px) {
  .spotlight-stack {
    /* ~3 viewports : enough scroll room for the 3 paliers */
    min-height: 300vh;
    padding: clamp(60px, 8vw, 120px) 0 clamp(120px, 14vw, 200px);
  }
  .spotlight-stack-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
  }
  .spotlight-mobile-visual { display: none; }
  .spotlight-pinned-col { display: block; }

  .spotlight-steps-col {
    display: flex;
    flex-direction: column;
  }
  .spotlight-step {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .spotlight-step-text { max-width: 540px; }
  .spotlight-step-text > * + * { margin-top: 22px; }
  .spotlight-step-text .spotlight-num { margin-bottom: 4px; }
  .spotlight-step-text h2 {
    font-size: clamp(34px, 4.4vw, 60px);
    letter-spacing: -0.03em;
    line-height: 1.0;
    max-width: 14ch;
  }

  /* === Right column : sticky, contains all 3 dioramas overlayed === */
  .spotlight-pinned-col {
    position: sticky;
    top: 20vh;
    height: 60vh;
  }
  .spotlight-pinned-stage {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .spotlight-pinned-stage .diorama {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    opacity: 0;
    transform: translateY(12px) scale(0.985);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    pointer-events: none;
    will-change: opacity, transform;
  }
  .spotlight-pinned-stage .diorama.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* Active step text gets a subtle highlight on the spotlight-num */
  .spotlight-step .spotlight-num { opacity: 0.5; transition: opacity 0.4s var(--ease); }
  .spotlight-step.is-active .spotlight-num { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-pinned-stage .diorama {
    transition: none !important;
  }
}

/* ============================================================
   10. SPOTLIGHT sections (legacy, kept for fallback / other pages)
   ============================================================ */
.spotlight {
  padding: clamp(100px, 13vw, 180px) 0;
  position: relative;
  overflow: hidden;
}
.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1000px) {
  .spotlight-grid { grid-template-columns: 1fr 1.1fr; gap: 80px; }
  .spotlight.reverse .spotlight-text  { order: 2; }
  .spotlight.reverse .spotlight-visual { order: 1; }
}
.spotlight-text { max-width: 540px; }
.spotlight-num {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-bottom: 22px;
}
.spotlight-num::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1.5px;
  background: var(--accent);
  margin-right: 12px;
}
.spotlight-text h2 {
  font-size: clamp(34px, 4.4vw, 60px);
  letter-spacing: -0.03em;
  line-height: 1.0;
  margin-bottom: 24px;
  max-width: 14ch;
}
.spotlight-text .lead { margin-bottom: 28px; }
.spotlight-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  gap: 0;
}
.spotlight-bullets li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.spotlight-bullets li:last-child { border-bottom: 1px solid var(--rule); }
.spotlight-bullets li::before {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 1px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FBFBF9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

/* === Diorama = visual collage of UI mocks illustrating the feature === */
.diorama {
  position: relative;
  aspect-ratio: 4 / 3.6;
  width: 100%;
  background: linear-gradient(160deg, var(--paper-band) 0%, var(--paper-deep) 100%);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.diorama::before {
  content: '';
  position: absolute;
  width: 60%; height: 60%;
  top: -10%; right: -10%;
  background: radial-gradient(closest-side, var(--accent-soft) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.dio-card {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 18px 20px;
}
.dio-card h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.dio-card p {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
  max-width: none;
}
.dio-card .tag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 10px;
}
.dio-card .tag.dark { background: var(--ink); color: var(--accent); }
.dio-card .tag.accent { background: var(--accent); color: var(--paper); }
.dio-card .row { display: flex; align-items: center; gap: 10px; }
.dio-card .ai-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 500;
  margin-top: 8px;
}
.dio-card .ai-mark::before {
  content: 'IA';
  font-family: var(--font-display);
  background: var(--accent);
  color: var(--paper);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: 0.05em;
}

/* Score gauge for the GrueScore */
.dio-gauge {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  position: relative;
}
.dio-gauge svg { width: 100%; height: 100%; }
.dio-gauge-num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
}
.dio-gauge-num strong { font-size: 32px; }
.dio-gauge-num small { font-size: 11px; color: var(--mute); margin-top: 4px; }

/* Progress bar */
.dio-progress {
  width: 100%;
  height: 8px;
  background: var(--paper-band);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0;
}
.dio-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

/* Module checklist mini */
.dio-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
}
.dio-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-soft);
}
.dio-list li::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper-band);
  flex-shrink: 0;
}
.dio-list li.done::before {
  background: var(--accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23FBFBF9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
.dio-list li.done { color: var(--ink); }

/* Specific diorama compositions */
.dio-reflexion .dio-card-1 {
  top: 8%; left: 4%;
  width: 62%;
}
.dio-reflexion .dio-card-2 {
  bottom: 8%; right: 4%;
  width: 56%;
}
.dio-reflexion .dio-thinking {
  position: absolute;
  top: 50%; left: 56%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  background: var(--ink);
  padding: 12px 16px;
  border-radius: 999px;
}
.dio-reflexion .dio-thinking span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: thinking 1.4s infinite;
}
.dio-reflexion .dio-thinking span:nth-child(2) { animation-delay: 0.2s; background: var(--paper); }
.dio-reflexion .dio-thinking span:nth-child(3) { animation-delay: 0.4s; background: var(--paper); }
@keyframes thinking {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .dio-reflexion .dio-thinking span { animation: none; opacity: 1; }
}

.dio-cadrage {
  background: linear-gradient(160deg, var(--paper-deep) 0%, var(--paper-band) 100%);
}
.dio-cadrage .dio-card-1 {
  top: 6%; left: 4%;
  right: 4%;
  display: flex; align-items: center; gap: 20px;
}
.dio-cadrage .dio-card-2 {
  bottom: 6%; left: 4%;
  width: 92%;
}

.dio-production .dio-card-1 {
  top: 7%; left: 5%;
  width: 78%;
}
.dio-production .dio-card-2 {
  bottom: 7%; right: 5%;
  width: 60%;
}
.dio-production .dio-marker {
  background: linear-gradient(transparent 65%, var(--highlight) 65%);
  padding: 0 2px;
}

/* --- 11. CTA Mini strip (intermediate) ----------------------- */
.cta-mini {
  padding: clamp(40px, 5vw, 64px) 0;
}
.cta-mini-inner {
  background: var(--highlight);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-mini-inner::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  right: -40px; top: -40px;
  background: radial-gradient(closest-side, var(--accent-soft), transparent);
  border-radius: 50%;
  pointer-events: none;
}
@media (min-width: 800px) { .cta-mini-inner { grid-template-columns: 1.4fr auto; gap: 48px; } }
.cta-mini-text {
  position: relative;
  z-index: 1;
}
.cta-mini-text h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 10px;
  max-width: 24ch;
}
.cta-mini-text p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 50ch;
}
.cta-mini-inner .btn { position: relative; z-index: 1; }

/* === Chrome black sparkles for the .has-sparkles CTA mini ===
   Tiny radial-gradient beads scattered along the bottom edge of the box.
   Each bead simulates a 3D chrome sphere with a top-left highlight.
   Inline CSS vars on each span control position / size / animation timing. */
.cta-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.cta-sparkles .spark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  /* Chrome bead : white highlight top-left, fading through silver to black */
  background:
    radial-gradient(
      circle at 30% 28%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(210, 210, 215, 0.75) 18%,
      rgba(60, 60, 65, 0.92) 50%,
      rgba(0, 0, 0, 1) 100%
    );
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.5),
    0 0 6px rgba(0, 0, 0, 0.25),
    0 0 10px rgba(255, 255, 255, 0.18);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  animation: spark-twinkle var(--d, 2.4s) var(--del, 0s) ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes spark-twinkle {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
  45%      { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  60%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.05); }
}

/* In dark mode the highlight band needs to stay visible — the bead is
   already mostly dark so it disappears on a dark page. Push the highlight
   up so the chrome reflection reads even on .paper = #0E0E0C. */
[data-theme="dark"] .cta-sparkles .spark {
  background:
    radial-gradient(
      circle at 30% 28%,
      rgba(255, 255, 255, 1) 0%,
      rgba(220, 222, 230, 0.85) 22%,
      rgba(80, 80, 88, 0.9) 55%,
      rgba(0, 0, 0, 1) 100%
    );
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.7),
    0 0 8px rgba(255, 255, 255, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .cta-sparkles .spark {
    animation: none;
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Make sure the actual content of the CTA stays above the sparkles */
.has-sparkles .cta-mini-text,
.has-sparkles > .btn {
  position: relative;
  z-index: 1;
}

/* --- 12. Tools grid (enhanced cards) ------------------------- */
.tools-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: end;
  margin-bottom: 56px;
}
@media (min-width: 900px) { .tools-head { grid-template-columns: 1.4fr 1fr; gap: 60px; } }
.tools-head h2 { max-width: 16ch; }
.tools-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}
@media (min-width: 700px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tools-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.tool-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* Cursor spotlight : voile radial qui suit la souris.
   Position pilotée par --mx / --my (set en JS via mousemove). */
.tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 106, 44, 0.10),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.tool-card:hover::before { opacity: 1; }
.tool-card:hover {
  transform: translateY(-6px);
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-lg);
}
@media (hover: none) {
  .tool-card::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card::before { display: none; }
  .tool-card:hover { transform: none; }
}
.tool-card > * { position: relative; z-index: 1; }
.tool-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--highlight);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.tool-card:hover .tool-icon { background: var(--ink); color: var(--accent); }
.tool-icon svg { width: 26px; height: 26px; }
.tool-card h4 {
  font-size: 20px;
  letter-spacing: -0.018em;
  line-height: 1.2;
}
.tool-card p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  max-width: none;
  flex: 1 0 auto;
}
.tool-tag {
  margin-top: auto;
  align-self: flex-start;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  width: 100%;
}

/* --- 13. Compliance / safeguards ----------------------------- */
.compliance-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 56px;
}
@media (min-width: 900px) { .compliance-head { grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; } }
.safeguards-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
@media (min-width: 700px) { .safeguards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .safeguards-grid { grid-template-columns: repeat(4, 1fr); } }
.safeguard {
  padding: 36px 28px 36px 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background 0.3s var(--ease);
}
.safeguard:hover { background: var(--paper-band); }
.safeguard:last-child { border-right: 0; }
@media (max-width: 999px) { .safeguard:nth-child(2n) { border-right: 0; } }
@media (max-width: 699px) { .safeguard { border-right: 0; padding-right: 0; } }
.safeguard-icon {
  width: 40px; height: 40px;
  color: var(--accent);
  margin-bottom: 22px;
  padding: 8px;
  border-radius: 12px;
  background: var(--paper);
}
.safeguard h4 {
  font-size: 19px;
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.safeguard p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
  max-width: 30ch;
}

/* ============================================================
   13.5. LAMP EFFECT — orange beams converging on a glowing line
   ============================================================ */
.lamp-bg {
  position: relative;
  background: #0A0A0A;
  color: var(--paper);
  /* v6 : section sized so the bar sits ~25-30% from top and content fits
     in 80vh without clipping. Title margin-top is reduced so it sits in
     the halo zone just below the bar. */
  min-height: 80vh;
  padding: clamp(180px, 26vh, 280px) 0 clamp(60px, 8vw, 100px);
  overflow: hidden;
  isolation: isolate;
}
/* Text color overrides — same logic as .band-ink, scoped to .lamp-bg */
.lamp-bg h1, .lamp-bg h2, .lamp-bg h3, .lamp-bg h4 { color: var(--paper); }
.lamp-bg .eyebrow { color: rgba(251, 251, 249, 0.6); }
.lamp-bg .lead,
.lamp-bg .safeguard p { color: rgba(251, 251, 249, 0.72); }
.lamp-bg .italic-accent { color: var(--accent); }
.lamp-bg .safeguard-icon {
  background: rgba(251, 251, 249, 0.05);
  color: var(--accent);
}
.lamp-bg .safeguard { border-color: rgba(251, 251, 249, 0.10); }
.lamp-bg .safeguard:hover { background: rgba(251, 251, 249, 0.03); }
.lamp-bg .safeguards-grid { border-top-color: rgba(251, 251, 249, 0.12); }
.lamp-content { position: relative; z-index: 1; }

/* Dark mode inversion : section flips to a LIGHT cream band on the dark
   page — full inverse of light mode. We use hardcoded colors (not theme
   vars) because the vars auto-invert and we want them frozen. */
[data-theme="dark"] .lamp-bg {
  background: #FBFBF9;
  color: #0E0E0C;
}
[data-theme="dark"] .lamp-bg h1,
[data-theme="dark"] .lamp-bg h2,
[data-theme="dark"] .lamp-bg h3,
[data-theme="dark"] .lamp-bg h4 { color: #0E0E0C; }
[data-theme="dark"] .lamp-bg .eyebrow { color: rgba(14, 14, 12, 0.55); }
[data-theme="dark"] .lamp-bg .lead,
[data-theme="dark"] .lamp-bg .safeguard p { color: rgba(14, 14, 12, 0.70); }
[data-theme="dark"] .lamp-bg .italic-accent { color: var(--accent); }
[data-theme="dark"] .lamp-bg .safeguard-icon {
  background: rgba(14, 14, 12, 0.04);
  color: var(--accent);
}
[data-theme="dark"] .lamp-bg .safeguard { border-color: rgba(14, 14, 12, 0.10); }
[data-theme="dark"] .lamp-bg .safeguard:hover { background: rgba(14, 14, 12, 0.03); }
[data-theme="dark"] .lamp-bg .safeguards-grid { border-top-color: rgba(14, 14, 12, 0.12); }

/* On the light inverted bg, the line should appear darker (no white
   highlight needed) so the lamp reads as "warm light through cream paper"
   rather than "stage light" — keep the orange core, dim the white tip. */
[data-theme="dark"] .lamp-line {
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 106, 44, 0.6) 15%,
    rgba(255, 106, 44, 1) 50%,
    rgba(255, 106, 44, 0.6) 85%,
    transparent 100%
  );
  box-shadow:
    0 0 4px 1px rgba(255, 140, 80, 0.9),
    0 0 18px 4px rgba(255, 106, 44, 0.6),
    0 0 40px 12px rgba(255, 106, 44, 0.25);
}

/* === The lamp visual : just the bar with its native box-shadow halo ===
   v6 — no more cones, no more masks. The bar's stacked box-shadow does
   ALL the lighting. The halo radiates symmetrically above and below
   the bar like a real fluorescent tube. */
.lamp {
  position: absolute;
  top: 25%;          /* bar position : ~25-30% from section top */
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

/* === Cones : rotated linear-gradient beams that form the V ===
   v6 — Two tall thin "column of light" beams, each rotated to point
   diagonally from the bar. The left beam tilts -28° (down-left), the
   right beam tilts +28° (down-right). Both share their top-center at
   the bar center → apex of the V is at the lamp tube.
   Strong blur (70px) + horizontal mask on each beam dissolves the hard
   edges → soft trapezoidal pans of light, crossing at the bar. */
/* === Lamp tube : the bar itself + a stacked box-shadow halo ===
   v6 — minimalist. No cones, no masks, no blurred elements. The bar's
   stacked box-shadow does ALL the lighting. The halo radiates symmetri-
   cally above and below the bar like a real fluorescent tube. */
.lamp-line {
  position: relative;
  width: 60%;
  max-width: 600px;
  min-width: 280px;
  height: 2px;
  margin: 0 auto;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 240, 220, 0.4) 12%,
    rgba(255, 255, 250, 1) 50%,
    rgba(255, 240, 220, 0.4) 88%,
    transparent 100%
  );
  /* Halo with PROGRESSIVE downward offset : the core glow stays on the bar,
     but each outer layer drifts further down. Result : a light wash that
     "drips" from the bar into the section below, not a symmetric radial. */
  box-shadow:
    0 0 6px 1px       rgba(255, 230, 200, 0.95),  /* filament core, centered */
    0 10px 24px 6px   rgba(255, 106, 44, 0.70),   /* dense aura, 10px below */
    0 32px 60px 14px  rgba(255, 106, 44, 0.50),   /* mid halo, 32px below */
    0 70px 130px 32px rgba(255, 106, 44, 0.28),   /* diffusion, 70px below */
    0 140px 220px 60px rgba(255, 106, 44, 0.12);  /* atmospheric, deep down */
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s,
    opacity 0.6s ease 0.1s;
}

.lamp-bg.is-lit .lamp-line {
  transform: scaleX(1);
  opacity: 1;
}

/* Subtle breathing : modulate the halo intensity gently after ignition. */
.lamp-bg.is-lit .lamp-line { animation: lamp-pulse 3.6s ease-in-out 1.4s infinite; }
@keyframes lamp-pulse {
  0%, 100% {
    box-shadow:
      0 0 6px 1px       rgba(255, 230, 200, 0.95),
      0 10px 24px 6px   rgba(255, 106, 44, 0.70),
      0 32px 60px 14px  rgba(255, 106, 44, 0.50),
      0 70px 130px 32px rgba(255, 106, 44, 0.28),
      0 140px 220px 60px rgba(255, 106, 44, 0.12);
  }
  50% {
    box-shadow:
      0 0 6px 1px       rgba(255, 230, 200, 0.82),
      0 10px 24px 6px   rgba(255, 106, 44, 0.55),
      0 32px 60px 14px  rgba(255, 106, 44, 0.35),
      0 70px 130px 32px rgba(255, 106, 44, 0.18),
      0 140px 220px 60px rgba(255, 106, 44, 0.07);
  }
}

/* === Text rise — synchronized with the lamp ignition sequence ===
   The reveal mechanic is overridden here : we don't wait for IntersectionObserver
   on each .reveal child. Once .is-lit is on the section, all reveals animate in
   sequence, each with its own delay relative to the lamp turning on. */
.lamp-content .reveal {
  opacity: 0;
  transform: translateY(70px) scale(0.97);
  transition: none;
}
.lamp-bg.is-lit .lamp-content .reveal {
  animation: lamp-rise 1.25s cubic-bezier(0.22, 0.71, 0.18, 1) 0.9s both;
}
.lamp-bg.is-lit .lamp-content .reveal.reveal-delay-1 { animation-delay: 1.05s; }
.lamp-bg.is-lit .lamp-content .reveal.reveal-delay-2 { animation-delay: 1.20s; }
.lamp-bg.is-lit .lamp-content .reveal.reveal-delay-3 { animation-delay: 1.35s; }
.lamp-bg.is-lit .lamp-content .safeguards-grid .safeguard.reveal             { animation-delay: 1.40s; }
.lamp-bg.is-lit .lamp-content .safeguards-grid .safeguard.reveal-delay-1     { animation-delay: 1.55s; }
.lamp-bg.is-lit .lamp-content .safeguards-grid .safeguard.reveal-delay-2     { animation-delay: 1.70s; }
.lamp-bg.is-lit .lamp-content .safeguards-grid .safeguard.reveal-delay-3     { animation-delay: 1.85s; }

@keyframes lamp-rise {
  0%   { opacity: 0; transform: translateY(70px) scale(0.97); }
  50%  { opacity: 1; transform: translateY(-10px) scale(1.008); }
  72%  { transform: translateY(3px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lamp-line {
    transition: none !important;
    animation: none !important;
    transform: scaleX(1) !important;
    opacity: 1 !important;
  }
  .lamp-content .reveal { opacity: 1; transform: none; animation: none !important; }
}

/* ============================================================
   13.7. NIVEAUX — text + orbital panel side-by-side
   Two-column grid. Left : text (eyebrow + h2 + lead). Right : dark panel
   with 3 concentric dashed orbits, each rotating at different speeds.
   9 module bubbles distributed 3 per orbit. Counter-rotation on bubbles
   keeps their text upright while the orbit spins.
   ============================================================ */
.niveaux-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 80px);
}
@media (min-width: 900px) {
  .niveaux-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
  }
}
.niveaux-text { max-width: 38ch; }
/* No more bounding panel — orbits bleed off the right of the viewport,
   creating a "system bigger than what's shown" sensation. */
.niveaux-orbit {
  position: relative;
  overflow: visible;
  min-height: 700px;
  width: 100%;
}

.orbit-panel {
  position: absolute;
  inset: 0;
  overflow: visible;
  /* No more bg, border-radius, shadow. Just a positioning context. */
}

/* === Each orbit : circle that rotates as a whole ===
   Center anchored at the right edge of .niveaux-orbit (left: 100%) with
   negative margin-left equal to half its diameter → orbit center sits ON
   the right edge, half the orbit visible, half bleeds off the page. */
.orbit {
  position: absolute;
  top: 50%;
  left: 100%;
  border-radius: 50%;
  width: var(--orbit-d);
  height: var(--orbit-d);
  margin-left: calc(var(--orbit-d) / -2);
  margin-top: calc(var(--orbit-d) / -2);
  animation: orbit-rotate var(--orbit-speed) linear infinite;
}
.orbit-inner {
  --orbit-r: clamp(75px, 13vw, 110px);
  --orbit-d: calc(var(--orbit-r) * 2);
  --orbit-speed: 15s;
}
.orbit-mid {
  --orbit-r: clamp(125px, 22vw, 180px);
  --orbit-d: calc(var(--orbit-r) * 2);
  --orbit-speed: 22s;
}
.orbit-outer {
  --orbit-r: clamp(170px, 30vw, 250px);
  --orbit-d: calc(var(--orbit-r) * 2);
  --orbit-speed: 30s;
}

@keyframes orbit-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Dashed ring outlining each orbit (on cream bg → dark dashed) */
.orbit-ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(14, 14, 12, 0.14);
  border-radius: 50%;
}

/* === Items pinned to orbit edge — placed by --angle ===
   Restyled for the cream section bg : light bg + dark text. */
.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--item-size, 76px);
  height: var(--item-size, 76px);
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  color: var(--ink);
  box-shadow:
    0 4px 12px -4px rgba(14, 14, 12, 0.12),
    0 1px 3px rgba(14, 14, 12, 0.06);
  /* Counter-rotate at same speed as parent orbit → text stays upright */
  animation: orbit-counter-rotate var(--orbit-speed) linear infinite;
}
.orbit-inner .orbit-item { --item-size: clamp(72px, 11vw, 88px); }
.orbit-mid   .orbit-item { --item-size: clamp(64px, 9.5vw, 76px); }
.orbit-outer .orbit-item { --item-size: clamp(54px, 8vw, 64px); }

/* The final rotate must cancel BOTH the parent orbit's rotation (0→360°)
   AND the item's own static --angle that was applied for positioning.
   At t=0  : net world rotation = 0  + --angle + (-1 * --angle)        = 0   ✓
   At t=end: net world rotation = 360 + --angle + (-1*--angle - 360)   = 0   ✓ */
@keyframes orbit-counter-rotate {
  from {
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translateY(calc(-1 * var(--orbit-r)))
      rotate(calc(-1 * var(--angle)));
  }
  to {
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translateY(calc(-1 * var(--orbit-r)))
      rotate(calc(-1 * var(--angle) - 360deg));
  }
}

/* Active bubble — orange border + glow */
.orbit-item.is-active {
  border-color: var(--accent);
  background: rgba(255, 106, 44, 0.06);
  box-shadow:
    0 0 0 4px rgba(255, 106, 44, 0.12),
    0 6px 22px -4px rgba(255, 106, 44, 0.40),
    0 1px 3px rgba(14, 14, 12, 0.06);
}
.orbit-item.is-active .orbit-id { color: var(--accent-deep); }
.orbit-item.is-active .orbit-name { color: var(--accent); }

.orbit-id {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
}
.orbit-name {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--mute);
  margin-top: 3px;
  line-height: 1.1;
  text-transform: uppercase;
  max-width: 9ch;
}
.orbit-inner .orbit-name { font-size: 9px; }
.orbit-outer .orbit-name { font-size: 7px; }

/* === Dark mode : translucent light bubbles on dark section, inverted center === */
[data-theme="dark"] .orbit-ring {
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .orbit-item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 4px 12px -4px rgba(0, 0, 0, 0.40),
    0 1px 3px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
[data-theme="dark"] .orbit-id { color: #FBFBF9; }
[data-theme="dark"] .orbit-name { color: rgba(255, 255, 255, 0.50); }

[data-theme="dark"] .orbit-item.is-active {
  border-color: var(--accent);
  background: rgba(255, 106, 44, 0.15);
  box-shadow:
    0 0 0 4px rgba(255, 106, 44, 0.18),
    0 6px 22px -4px rgba(255, 106, 44, 0.55);
}
[data-theme="dark"] .orbit-item.is-active .orbit-id { color: #FFFFFF; }
[data-theme="dark"] .orbit-item.is-active .orbit-name { color: var(--accent-soft); }

/* Center node inverted in dark mode : cream chip on dark page */
[data-theme="dark"] .orbit-center {
  background: linear-gradient(135deg, #FBFBF9 0%, #E5E2DA 100%);
  border-color: rgba(14, 14, 12, 0.08);
  box-shadow:
    0 0 0 6px rgba(255, 106, 44, 0.10),
    0 10px 28px -6px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .orbit-center::before {
  background: radial-gradient(circle at 50% 35%, rgba(255, 106, 44, 0.25), transparent 70%);
}
[data-theme="dark"] .orbit-center-tag { color: rgba(14, 14, 12, 0.55); }
[data-theme="dark"] .orbit-center-label { color: #0E0E0C; }

/* === Center node : "Niveau 1 / Cadrage" ===
   Anchored at the right edge of .niveaux-orbit (same as orbits), centered
   on that edge via negative margins. Kept dark for contrast on cream bg. */
.orbit-center {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 130px;
  height: 130px;
  margin-left: -65px;
  margin-top: -65px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A1A1A 0%, #0E0E0C 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  z-index: 3;
  box-shadow:
    0 0 0 6px rgba(255, 106, 44, 0.06),
    0 10px 28px -6px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.orbit-center::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 106, 44, 0.15), transparent 70%);
  pointer-events: none;
}
.orbit-center-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.50);
  position: relative;
  z-index: 1;
}
.orbit-center-label {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .orbit-panel { max-width: 92vw; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit { animation: none; }
  .orbit-item {
    animation: none;
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translateY(calc(-1 * var(--orbit-r)))
      rotate(calc(-1 * var(--angle)));
  }
}

/* === Click affordance ===
   Bubbles are clickable. Orbits keep rotating continuously, even when
   a description panel is open — the orange .is-active marker travels
   with the selected bubble. */
.orbit-item { cursor: pointer; user-select: none; }
.orbit-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* === Module detail panel ===
   Sits below the lead in .niveaux-text. Hidden until a bubble is clicked.
   Slides up + fades in. Per spec: appears on the LEFT, not on top. */
.module-detail {
  position: relative;
  margin-top: 36px;
  padding: 26px 30px 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 44ch;

  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease),
    visibility 0s linear 0.35s;
}
.module-detail.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s, 0s, 0s;
}
.module-detail-id {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.module-detail-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 12px;
  padding-right: 36px; /* leave space for the close button */
}
.module-detail-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.module-detail-meta {
  display: block;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.module-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-mute);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.module-detail-close:hover,
.module-detail-close:focus-visible {
  background: var(--paper-band);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

/* Dark-mode overrides : panel sits on the band tone, slightly lifted */
[data-theme="dark"] .module-detail {
  background: var(--paper-band);
  border-color: rgba(251, 251, 249, 0.10);
}
[data-theme="dark"] .module-detail-close {
  border-color: rgba(251, 251, 249, 0.14);
}
[data-theme="dark"] .module-detail-close:hover,
[data-theme="dark"] .module-detail-close:focus-visible {
  background: rgba(251, 251, 249, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .module-detail { transition: none; transform: none; }
}

/* (section 14 "Levels showcase" — .levels-grid and .level-block rules
   removed : the two cards "L'IA challenge / L'IA produit avec vous" were
   deleted from index.html, the orbital animation now lives on service.html) */

/* Personas H2 : slightly smaller than the other h-xl so the 2-line layout
   "On parle à trois fondateurs / très différents." stays balanced. The
   italic "trois fondateurs" stays on the first line via white-space:nowrap
   on the .italic-accent — otherwise the column width forces a 3-line wrap. */
#qui .h-xl {
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.05;
}
#qui .h-xl .italic-accent {
  white-space: nowrap;
}

/* --- 15. Personas — sticky stacking cards --------------------
   Three cards stack as the user scrolls : each pins at its sticky
   top and the next one slides up to cover it, with a small peek
   so the user sees the previous card behind the front one. */
.personas-stack {
  margin-top: 56px;
  position: relative;
}
.persona-card {
  position: sticky;
  top: calc(96px + var(--i) * 18px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: clamp(440px, 68vh, 580px);
  margin-bottom: 28px;
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.persona-card:last-child { margin-bottom: 0; }
.persona-card-text {
  padding: clamp(36px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.persona-card-text h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.10;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  max-width: 18ch;
}
.persona-card-text p {
  color: var(--ink-soft);
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.55;
  margin: 0;
  max-width: 48ch;
}
.persona-card-media {
  position: relative;
  overflow: hidden;
  background: var(--paper-band);
}
.persona-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.88) contrast(1.02);
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}
.persona-card-media::after {
  /* subtle inward gradient on the text-side edge for a soft seam */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--paper) 0%,
    rgba(251, 251, 249, 0) 8%,
    rgba(251, 251, 249, 0) 100%
  );
  pointer-events: none;
}
.persona-card:hover .persona-card-media img {
  transform: scale(1.03);
}

.persona-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.persona-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.persona-pill {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--ink);
  font-weight: 500;
}
.persona-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.persona-dots {
  display: flex;
  gap: 6px;
}
.persona-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rule-strong);
}
.persona-dots span.is-on { background: var(--accent); }

/* Dark mode : darken image slightly so it integrates with the deep bg */
[data-theme="dark"] .persona-card-media img {
  filter: saturate(0.75) contrast(1.05) brightness(0.85);
}
[data-theme="dark"] .persona-card-media::after {
  background: linear-gradient(
    to right,
    var(--paper) 0%,
    rgba(14, 14, 12, 0) 8%,
    rgba(14, 14, 12, 0) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .persona-card { position: relative; top: auto; }
  .persona-card-media img { transition: none; }
}

/* --- 16. Big CTA strip (final, ink) -------------------------- */
.cta-strip {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute;
  width: 70vw; height: 70vw;
  right: -25vw; top: -35vw;
  background: radial-gradient(closest-side, rgba(255, 106, 44, 0.20), transparent 70%);
  pointer-events: none;
}
.cta-strip-inner {
  position: relative;
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
  align-items: end;
  z-index: 1;
}
@media (min-width: 800px) { .cta-strip-inner { grid-template-columns: 1.5fr 1fr; gap: 80px; } }
.cta-strip h2 {
  color: var(--paper);
  font-size: clamp(36px, 5.2vw, 76px);
  letter-spacing: -0.032em;
  line-height: 1.0;
  max-width: 18ch;
}
.cta-strip h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.cta-strip .btn-accent { align-self: flex-start; }
.cta-strip-meta {
  margin-top: 24px;
  font-size: 13.5px;
  color: rgba(251,251,249,0.65);
  letter-spacing: 0.02em;
}

/* === Pulse Beams around the CTA button ===
   Eight SVG paths radiating from the button center. Each beam is a
   thin orange line with a small dash that travels along the path —
   stroke-dasharray + stroke-dashoffset animation is the vanilla
   equivalent of Framer Motion's pathLength/pathOffset trick. Each
   beam has its own --d delay so the pulses are staggered. */
.pulse-beams-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;        /* keeps the SVG glow contained */
  align-self: flex-start;     /* match parent .btn-accent rule */
}
.cta-strip .pulse-beams-wrap { align-self: flex-start; }
.pulse-beams {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(420px, 56vw, 760px);
  height: clamp(240px, 28vw, 380px);
  max-width: none;                /* override the global `img, svg { max-width: 100% }` */
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.pulse-beams-wrap > .btn {
  position: relative;
  z-index: 1;
}
.pulse-beam {
  fill: none;
  stroke: #FF6A2C;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 38 540;   /* small visible dash, big gap → one pulse at a time */
  stroke-dashoffset: 38;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255, 106, 44, 0.55));
  animation: pulse-beam-travel 5.2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  animation-delay: var(--d, 0s);
  will-change: stroke-dashoffset, opacity;
}
@keyframes pulse-beam-travel {
  0%   { stroke-dashoffset: 38;   opacity: 0; }
  9%   { opacity: 0.55; }
  46%  { opacity: 0.55; }
  60%  { opacity: 0; }
  100% { stroke-dashoffset: -500; opacity: 0; }
}
/* On smaller screens : compress the radiating area so beams stay
   inside the viewport and don't get clipped harshly */
@media (max-width: 700px) {
  .pulse-beams {
    width: clamp(320px, 92vw, 560px);
    height: clamp(200px, 56vw, 280px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-beam { animation: none; opacity: 0; }
}

/* --- 17. About + stats --------------------------------------- */
.about-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 56px;
}
@media (min-width: 900px) { .about-head { grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: end; } }
.about-head h2 { max-width: 14ch; }
.about-stats {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
  padding-top: 36px;
}
@media (min-width: 700px) { .about-stats { grid-template-columns: repeat(3, 1fr); } }
.stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}
.stat-num .italic-accent { color: var(--accent); }
.stat-label {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 12px;
  max-width: 28ch;
  line-height: 1.45;
}

/* --- 18. Service page : list rows ---------------------------- */
.dual-list {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  margin-top: 48px;
}
@media (min-width: 800px) { .dual-list { grid-template-columns: 1fr 1fr; gap: 60px; } }
.dual-col h4 {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: var(--mute);
}
.dual-col ul { list-style: none; padding: 0; margin: 0; }
.dual-col li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.dual-col li:last-child { border-bottom: 1px solid var(--rule); }
.dual-col .sigil {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  margin-top: 1px;
}
.sigil-yes { background: var(--ink); color: var(--paper); }
.sigil-no  { background: transparent; color: var(--mute); border: 1px solid var(--rule-strong); }

.scenarios {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 56px;
}
@media (min-width: 700px) { .scenarios { grid-template-columns: repeat(3, 1fr); } }
.scenario {
  padding: 28px 26px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  position: relative;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.scenario:hover { transform: translateY(-3px); border-color: var(--rule-strong); }
.scenario::before {
  content: '"';
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 56px;
  color: var(--accent);
  line-height: 0.5;
  position: absolute;
  top: 24px;
  left: 22px;
  opacity: 0.5;
}
.scenario-body { padding-top: 28px; }
.scenario-who {
  margin-top: 20px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute);
}

.compare {
  background: var(--paper-band);
  padding: var(--section-y) 0;
}
.compare-rows { margin-top: 56px; }
.compare-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
@media (min-width: 800px) {
  .compare-row { grid-template-columns: 1.1fr 1fr 1fr; gap: 36px; }
}
.compare-row:last-child { border-bottom: 1px solid var(--rule); }
.compare-q {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  color: var(--ink);
}
.compare-a {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.compare-a-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

/* --- 19. Precommander form ----------------------------------- */
.form-hero {
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 60px);
}
.form-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 28px;
  font-size: 13px;
  color: var(--mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.form-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.form-trust .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* === Form shell : card container with subtle elevation === */
.form-shell {
  max-width: 760px;
  margin: 0 auto 120px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3.5vw, 56px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  box-shadow:
    0 12px 32px -12px rgba(14, 14, 12, 0.10),
    0 2px 4px rgba(14, 14, 12, 0.03);
}

/* === Stepper : numbered circles + labels, connected by horizontal bars.
   `.is-current` is the active step. `.is-done` are completed steps
   (button is enabled so the user can jump back to review them). === */
.form-progress {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.step-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.step-pill[disabled] { cursor: not-allowed; }
.step-pill-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--rule-strong);
  color: var(--mute);
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font-display);
  transition:
    background 0.3s var(--ease),
    border-color 0.3s var(--ease),
    color 0.3s var(--ease),
    transform 0.2s var(--ease),
    box-shadow 0.3s var(--ease);
}
.step-pill-label {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--mute);
  transition: color 0.3s var(--ease);
}
.step-pill.is-current .step-pill-num {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 0 0 5px rgba(255, 106, 44, 0.14);
}
.step-pill.is-current .step-pill-label {
  color: var(--ink);
  font-weight: 600;
}
.step-pill.is-done .step-pill-num {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.step-pill.is-done .step-pill-label {
  color: var(--ink-soft);
}
.step-pill.is-done:not([disabled]):hover .step-pill-num {
  transform: scale(1.06);
}
.step-pill.is-done:not([disabled]):focus-visible .step-pill-num {
  box-shadow: 0 0 0 4px rgba(14, 14, 12, 0.15);
  outline: none;
}

.step-pill-bar {
  flex: 1;
  height: 2px;
  background: var(--rule);
  border-radius: 1px;
  margin-top: 18px;          /* aligns with the centre of the 36px circles */
  transition: background 0.4s var(--ease);
}
.step-pill-bar.is-done { background: var(--ink); }

/* === Step content : slide-in transitions, direction-aware === */
.form-step {
  display: none;
  animation: form-step-in-forward 0.45s cubic-bezier(0.25, 1, 0.32, 1);
}
.form-step.is-active { display: block; }
.form-shell[data-direction="back"] .form-step.is-active {
  animation-name: form-step-in-back;
}
@keyframes form-step-in-forward {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes form-step-in-back {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .form-step { animation: none; }
  .step-pill-num { transition: none; }
}

/* Hide labels under circles on small screens — keep only numbers */
@media (max-width: 600px) {
  .step-pill-label { display: none; }
  .step-pill-bar { margin-top: 18px; }
  .form-shell { border-radius: var(--radius-lg); }
}
.form-step-num {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
  margin-bottom: 12px;
}
.form-step h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: 12px;
  letter-spacing: -0.025em;
}
.form-step-lede {
  color: var(--ink-soft);
  font-size: 17px;
  margin-bottom: 36px;
  max-width: 50ch;
}

.field { margin-bottom: 22px; }
.field-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .field-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--ink);
}
.field label .req { color: var(--accent); margin-left: 3px; }
.field input[type=text],
.field input[type=email],
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper-band);
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--accent-deep);
  min-height: 1em;
}
.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-color: var(--accent-deep); }

.radio-list { display: grid; gap: 10px; }
.radio-list label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 15px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.radio-list label:hover { border-color: var(--ink); }
.radio-list input[type=radio] { accent-color: var(--accent); }
.radio-list input[type=radio]:checked + span { font-weight: 600; }
.radio-list label:has(input:checked) {
  border-color: var(--ink);
  background: var(--paper-band);
}
.check-list { display: grid; gap: 16px; }
.check-list label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.45;
}
.check-list input[type=checkbox] {
  margin-top: 3px;
  accent-color: var(--accent);
  width: 18px; height: 18px;
}

.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  gap: 16px;
}
.form-nav .btn-back {
  font-size: 14px;
  color: var(--mute);
  padding: 8px 0;
  transition: color 0.2s var(--ease);
}
.form-nav .btn-back:hover { color: var(--ink); }
.form-nav .btn-back:disabled { opacity: 0.3; cursor: not-allowed; }

.form-success {
  display: none;
  text-align: center;
  padding: 80px 20px;
}
.form-success.is-active { display: block; }
.form-success .success-mark {
  width: 64px; height: 64px;
  margin: 0 auto 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.form-success h2 {
  font-size: clamp(32px, 4vw, 52px);
  margin-bottom: 20px;
}
.form-success p { margin: 0 auto 32px; max-width: 48ch; color: var(--ink-soft); }

/* --- 20. Footer ---------------------------------------------- */
.footer {
  padding: 72px 0 40px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--mute);
}
.footer-top {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
}
@media (min-width: 800px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } }
.footer-brand-block {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 32ch;
}
.footer-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.footer-tag {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.footer-col h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute);
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-weight: 500;
}
.footer-col a {
  display: block;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  transition: color 0.2s var(--ease);
}
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}

/* ============================================================
   20.4. DASHBOARD INLINE SVG — scroll-triggered animation
   ============================================================ */
.dashboard-animate {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* All animated parts start in their resting state (hidden / empty) */
.dash-module-row {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.dash-gauge-fill {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 1.6s var(--ease);
}
.dash-recommendation {
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.dash-radar-poly {
  opacity: 0;
  transition: opacity 0.8s var(--ease) 0.4s;
}

/* When the dashboard is .is-active, animate everything in */
.dashboard-animate.is-active .dash-module-row {
  opacity: 1;
  transform: translateX(0);
}
.dashboard-animate.is-active .dash-module-row[data-i="0"] { transition-delay: 0.05s; }
.dashboard-animate.is-active .dash-module-row[data-i="1"] { transition-delay: 0.17s; }
.dashboard-animate.is-active .dash-module-row[data-i="2"] { transition-delay: 0.29s; }
.dashboard-animate.is-active .dash-module-row[data-i="3"] { transition-delay: 0.41s; }
.dashboard-animate.is-active .dash-module-row[data-i="4"] { transition-delay: 0.53s; }
.dashboard-animate.is-active .dash-module-row[data-i="5"] { transition-delay: 0.65s; }
.dashboard-animate.is-active .dash-module-row[data-i="6"] { transition-delay: 0.77s; }
.dashboard-animate.is-active .dash-module-row[data-i="7"] { transition-delay: 0.89s; }
.dashboard-animate.is-active .dash-module-row[data-i="8"] { transition-delay: 1.01s; }

.dashboard-animate.is-active .dash-gauge-fill {
  transform: scaleX(1);
  transition-delay: 0.3s;
}

.dashboard-animate.is-active .dash-recommendation { opacity: 1; }
.dashboard-animate.is-active .dash-recommendation[data-i="0"] { transition-delay: 0.9s; }
.dashboard-animate.is-active .dash-recommendation[data-i="1"] { transition-delay: 1.1s; }
.dashboard-animate.is-active .dash-recommendation[data-i="2"] { transition-delay: 1.3s; }

.dashboard-animate.is-active .dash-radar-poly { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dash-module-row,
  .dash-recommendation,
  .dash-radar-poly { opacity: 1 !important; transform: none !important; }
  .dash-gauge-fill { transform: scaleX(1) !important; }
}

/* ============================================================
   20.5. VIEW TRANSITIONS (cross-page navigation)
   ============================================================ */
@view-transition {
  navigation: auto;
}

/* Persist visual identity between pages */
.nav .brand               { view-transition-name: brand-logo; }
.nav-right .btn-primary   { view-transition-name: cta-pre; }

/* Root fade + slight slide on cross-page navigation */
::view-transition-old(root) {
  animation: vt-out 280ms cubic-bezier(0.22, 0.71, 0.18, 1) both;
}
::view-transition-new(root) {
  animation: vt-in 360ms cubic-bezier(0.22, 0.71, 0.18, 1) both;
}
@keyframes vt-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}
@keyframes vt-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Persisted elements get a smoother cross-fade only */
::view-transition-old(brand-logo),
::view-transition-new(brand-logo),
::view-transition-old(cta-pre),
::view-transition-new(cta-pre) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.22, 0.71, 0.18, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(brand-logo),
  ::view-transition-new(brand-logo),
  ::view-transition-old(cta-pre),
  ::view-transition-new(cta-pre) {
    animation: none !important;
  }
}

/* --- 21. Reveal animations ----------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   22. RESPONSIVE — tablet + mobile breakpoints
   ============================================================ */

/* Tablet portrait/landscape : 768 → 1023 */
@media (max-width: 1023px) {
  :root {
    --section-y: clamp(64px, 9vw, 120px);
  }
  .nav-center { gap: 24px; }
  .nav-link { font-size: 14px; }
  .hero-grid { gap: 48px; }
  .product { max-width: 600px; margin: 0 auto; }
  .spotlight-grid { gap: 56px; }
  .persona-card { min-height: clamp(420px, 60vh, 540px); }
}

/* Mobile : ≤ 820 — pill becomes a brand-only chip, links go to drawer,
   burger appears in .nav-right next to theme toggle + Précommander. */
@media (max-width: 820px) {
  .nav {
    padding: 12px var(--gutter) 0;
    justify-content: flex-start;   /* pill snaps to the left, leaving room for fixed right controls */
  }
  .nav-pill {
    height: 48px;
    padding: 6px 16px;
    gap: 0;
    /* Remove backdrop-filter on mobile : it creates a containing block
       that traps the drawer (.nav-center is `position: fixed` inside).
       Compensate with a slightly more opaque background. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(251, 251, 249, 0.96);
  }
  [data-theme="dark"] .nav-pill {
    background: rgba(14, 14, 12, 0.96);
  }
  /* Disable the scroll-collapse behavior on mobile */
  .nav-pill.is-collapsed {
    width: auto;
    padding: 6px 16px;
    gap: 0;
    cursor: default;
  }
  .nav-pill.is-collapsed .brand {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .nav-pill.is-collapsed .nav-pill-icon { opacity: 0; }
  .nav-pill-icon { display: none; }   /* no menu icon on mobile, the burger does that job */
  .brand { font-size: 16px; }

  /* nav-center turns into a fullscreen slide-in drawer */
  .nav-pill .nav-center {
    position: fixed;
    inset: 0;
    background: var(--paper);
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    font-size: 24px;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    z-index: 40;
    padding: 80px var(--gutter);
    opacity: 1 !important;   /* override collapse fades */
  }
  .nav-pill .nav-center .nav-link { font-size: 28px; }
  .nav.is-open .nav-pill .nav-center { transform: translateX(0); }

  .nav-burger { display: flex; }
  .nav.is-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .nav-right { top: 12px; gap: 8px; }
  .nav-right .btn { padding: 10px 16px; font-size: 13px; }
  .nav-right .arrow { display: none; }
}

/* Very small screens : the pill keeps only the brand mark — the wordmark
   would collide with the fixed right controls (toggle + CTA + burger). */
@media (max-width: 480px) {
  .nav-pill .brand-text { display: none; }
}

/* Small mobile : ≤ 600 — typography tightens, padding reduces */
@media (max-width: 600px) {
  body { font-size: 16px; }
  :root {
    --section-y: clamp(56px, 12vw, 90px);
    --gutter: 18px;
  }
  .h-display { font-size: clamp(40px, 11vw, 60px); }
  .h-xl { font-size: clamp(32px, 8.5vw, 46px); }
  .h-lg { font-size: clamp(26px, 7vw, 36px); }
  .hero-eyebrow { font-size: 12px; padding: 7px 14px 7px 10px; }
  .hero-ctas .btn { padding: 13px 18px; font-size: 14px; }
  .hero-ctas { gap: 10px; }
  .product { max-width: 380px; }
  .float-card { padding: 10px 12px; font-size: 12px; }
  .float-card strong { font-size: 15px; }
  .float-card .badge { width: 32px; height: 32px; font-size: 13px; }
  .float-1 { top: -4%; left: -8%; }
  .float-2 { top: 38%; right: -10%; }
  .float-3 { bottom: 2%; left: 4%; }
  .stats-strip-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .spotlight { padding: clamp(64px, 12vw, 100px) 0; }
  .spotlight-text h2 { font-size: clamp(28px, 8vw, 40px); max-width: none; }
  .cta-mini-inner { padding: 24px 22px; border-radius: var(--radius-lg); }
  .persona-card {
    position: relative;          /* disable sticky on small screens */
    top: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
    margin-bottom: 20px;
  }
  .persona-card-media {
    order: -1;                   /* image on top of text on mobile */
    aspect-ratio: 16 / 10;
  }
  .persona-card-text { padding: 28px 24px; gap: 18px; }
  .persona-card-text h3 { font-size: clamp(22px, 6vw, 28px); }
  .footer { padding: 56px 0 32px; }
  .cta-strip h2 { font-size: clamp(32px, 9vw, 50px); }
  .diorama { padding: 18px; }
  .dio-card { padding: 14px 16px; }
  .dio-card h5 { font-size: 13px; }
  .dio-card p { font-size: 11.5px; }
}

/* ============================================================
   ACCESSIBILITY — skip link + reduced motion (audit consolidé v1)
   ============================================================ */

/* Skip link visible on focus only */
.skip-link {
  position: absolute;
  top: -40px;
  left: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 9999;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: top 180ms var(--ease);
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Force conformity AA for long-form text — audit recommandation */
.prose, .lead, p.body, .helper-text, .small-body {
  color: var(--ink-mute-text);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep reveal-on-scroll content always visible */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* Stop the orbital rotation, curtain swap and any continuous animations */
  .orbit, .curtain, .pulse, .spin, .sig-rotate, .sig-pulse, .sig-egg { animation: none !important; }
}

/* ethics-teaser supprimé le 2026-05-15 sur demande Thomas — section garde-fous existante en bas suffit */

/* ============================================================
   V5 AURORA — Design system « Aurora glass » (2026-07-02)
   Réf. : DESIGN-SYSTEM-V5-AURORA.md — tokens verre, fond aurora,
   cartes 3 niveaux, ancre sombre, aurora nuit.
   Les classes existantes sont RESTYLÉES, jamais renommées.
   ============================================================ */

/* --- V5.1 Tokens verre (3 niveaux de blanc, jamais plus) ------ */
:root {
  --glass-1: rgba(255, 255, 255, 0.42);   /* contexte */
  --glass-2: rgba(255, 255, 255, 0.65);   /* standard */
  --glass-3: #FFFFFF;                     /* héros — 1-2 cartes max par écran */
  --glass-line: rgba(255, 255, 255, 0.65);
  --glass-line-strong: rgba(255, 255, 255, 0.9);
  --glass-panel: rgba(255, 255, 255, 0.55);
  --glass-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 24px -8px rgba(200, 74, 18, 0.10),
    0 24px 48px -16px rgba(14, 14, 12, 0.07);
}
[data-theme="dark"] {
  --glass-1: rgba(255, 255, 255, 0.04);
  --glass-2: rgba(255, 255, 255, 0.07);
  --glass-3: rgba(255, 255, 255, 0.12);
  --glass-line: rgba(255, 255, 255, 0.10);
  --glass-line-strong: rgba(255, 255, 255, 0.16);
  --glass-panel: rgba(255, 255, 255, 0.05);
  --glass-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 24px -8px rgba(0, 0, 0, 0.45),
    0 24px 48px -16px rgba(0, 0, 0, 0.35);
}

/* --- V5.2 Fond aurora ----------------------------------------- */
.aurora-bg {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(600px 400px at 12% 8%,  rgba(255, 106, 44, 0.10), transparent 60%),
    radial-gradient(800px 500px at 88% 20%, rgba(255, 231, 194, 0.55), transparent 65%),
    radial-gradient(700px 600px at 50% 110%, rgba(255, 217, 192, 0.35), transparent 60%),
    var(--paper);
}
/* 2 blobs animés max — transform uniquement, jamais le blur */
.aurora-bg::before,
.aurora-bg::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.aurora-bg::before {
  width: 40vw; height: 30vw;
  max-width: 560px; max-height: 420px;
  top: -6%; right: 4%;
  background: rgba(255, 217, 192, 0.55);
  animation: aurora-drift-a 28s ease-in-out infinite alternate;
}
.aurora-bg::after {
  width: 34vw; height: 26vw;
  max-width: 480px; max-height: 360px;
  bottom: -10%; left: -6%;
  background: rgba(255, 138, 77, 0.18);
  animation: aurora-drift-b 34s ease-in-out infinite alternate;
}
@keyframes aurora-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-60px, 40px, 0); }
}
@keyframes aurora-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(50px, -30px, 0); }
}
/* Aurora nuit (§10 du DS) */
[data-theme="dark"] .aurora-bg {
  background:
    radial-gradient(600px 400px at 12% 8%,  rgba(255, 106, 44, 0.06), transparent 60%),
    radial-gradient(800px 500px at 88% 20%, rgba(255, 217, 192, 0.05), transparent 65%),
    radial-gradient(700px 600px at 50% 110%, rgba(255, 217, 192, 0.04), transparent 60%),
    var(--paper);
}
[data-theme="dark"] .aurora-bg::before { background: rgba(255, 106, 44, 0.10); }
[data-theme="dark"] .aurora-bg::after  { background: rgba(255, 138, 77, 0.07); }

/* Aurora masquée au coin (sections intermédiaires) */
.aurora-corner {
  position: relative;
  isolation: isolate;
}
.aurora-corner.band { background: var(--paper); }
.aurora-corner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(700px 480px at 100% 0%, rgba(255, 217, 192, 0.50), transparent 65%),
    radial-gradient(480px 380px at 94% 6%,  rgba(255, 106, 44, 0.07), transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
}
[data-theme="dark"] .aurora-corner::before {
  background:
    radial-gradient(700px 480px at 100% 0%, rgba(255, 106, 44, 0.06), transparent 65%),
    radial-gradient(480px 380px at 94% 6%,  rgba(255, 217, 192, 0.05), transparent 60%);
}
/* Le blob héro historique est remplacé par l'aurora sur ce hero */
.hero.aurora-bg .hero-blob { display: none; }

/* --- V5.3 Recette carte verre (fallback rgba, pas de blur imbriqué) */
.glass-card {
  background: var(--glass-2);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
}
@media (prefers-reduced-transparency: reduce) {
  .glass-card,
  .stat-cell,
  .tool-card,
  .dio-card,
  .float-card { background: rgba(255, 255, 255, 0.92); backdrop-filter: none; }
  [data-theme="dark"] .glass-card,
  [data-theme="dark"] .stat-cell,
  [data-theme="dark"] .tool-card,
  [data-theme="dark"] .dio-card,
  [data-theme="dark"] .float-card { background: rgba(24, 23, 21, 0.96); }
}

/* --- V5.4 Header nav en verre (1 des 2-3 blurs autorisés) ------ */
@media (min-width: 821px) {
  .nav-pill {
    background: rgba(251, 251, 249, 0.72);
    border-color: var(--glass-line-strong);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 8px 28px -10px rgba(200, 74, 18, 0.16),
      0 2px 4px rgba(14, 14, 12, 0.04);
  }
  [data-theme="dark"] .nav-pill {
    background: rgba(14, 14, 12, 0.78);
    border-color: rgba(251, 251, 249, 0.10);
    box-shadow:
      0 8px 28px -10px rgba(0, 0, 0, 0.50),
      0 2px 4px rgba(0, 0, 0, 0.20);
  }
}

/* --- V5.5 Boutons pilules (DS §6) ------------------------------ */
.btn-primary {
  background: var(--accent);
  color: #FBFBF9;
  box-shadow: 0 1px 2px rgba(200, 74, 18, 0.20), 0 8px 16px -4px rgba(255, 106, 44, 0.30);
}
.btn-primary:hover {
  background: var(--accent-deep);
  color: #FBFBF9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(200, 74, 18, 0.35), 0 16px 32px -8px rgba(255, 106, 44, 0.20);
}
.btn-secondary {
  background: var(--glass-2);
  border: 1px solid rgba(14, 14, 12, 0.10);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.btn-secondary:hover {
  border-color: var(--accent-deep);
  transform: translateY(-1px);
}
[data-theme="dark"] .btn-secondary { border-color: rgba(251, 251, 249, 0.16); }

/* --- V5.6 Hero produit : le SVG contient déjà son cadre aurora -- */
.hero .product { aspect-ratio: 16 / 10.4; }
.product-frame-v5 {
  inset: 2% 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.product-frame-v5 .product-screen {
  background: transparent;
  border: 1px solid var(--glass-line-strong);
  border-radius: clamp(14px, 1.8vw, 22px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 44px -16px rgba(200, 74, 18, 0.22),
    0 40px 80px -28px rgba(14, 14, 12, 0.16);
}
[data-theme="dark"] .product-frame-v5 { background: transparent; }
[data-theme="dark"] .product-frame-v5 .product-screen {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 18px 44px -16px rgba(0, 0, 0, 0.55),
    0 40px 80px -28px rgba(0, 0, 0, 0.45);
}

/* Float-cards autour du produit : verre niveau 2, ombre pêche */
.float-card {
  background: var(--glass-2);
  border-color: var(--glass-line-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 12px 28px -10px rgba(200, 74, 18, 0.16),
    0 2px 6px rgba(14, 14, 12, 0.05);
}
[data-theme="dark"] .float-card {
  background: rgba(22, 21, 19, 0.85);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.55);
}
.float-card .badge svg { width: 18px; height: 18px; }

/* Lignes de connexion du SVG hero : draw au reveal (id nécessaire :
   le <style> interne du SVG est scoping par #dashboard-svg) */
#dashboard-svg .journey {
  opacity: 0;
  transition: opacity 0.8s var(--ease) 1.3s;
}
#dashboard-svg.is-active .journey { opacity: 0.8; }
@media (prefers-reduced-motion: reduce) {
  #dashboard-svg .journey { opacity: 0.8 !important; transition: none !important; }
}

/* --- V5.7 Stats strip : cellules verre niveau 1 ---------------- */
.stats-strip {
  border-bottom: 0;
  padding: 48px 0 64px;
  background: linear-gradient(180deg, rgba(255, 217, 192, 0.16), rgba(255, 217, 192, 0) 75%);
}
[data-theme="dark"] .stats-strip { background: none; }
.stat-cell {
  background: var(--glass-1);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 10px 24px -12px rgba(200, 74, 18, 0.10);
}

/* --- V5.8 Tools grid : cartes verre niveau 2 -------------------- */
.tool-card {
  background: var(--glass-2);
  border-color: var(--glass-line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 24px -10px rgba(200, 74, 18, 0.08);
}
.tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-line-strong);
  box-shadow: var(--glass-shadow);
}

/* --- V5.9 Spotlight : dioramas et cartes en verre --------------- */
.diorama {
  background:
    linear-gradient(160deg, rgba(255, 231, 194, 0.30), rgba(255, 217, 192, 0.16)),
    var(--glass-1);
  border-color: var(--glass-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
[data-theme="dark"] .diorama {
  background: var(--glass-1);
  border-color: var(--glass-line);
}
.dio-card {
  background: var(--glass-3);
  border-color: var(--glass-line-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 24px -8px rgba(200, 74, 18, 0.12),
    0 16px 40px -16px rgba(14, 14, 12, 0.08);
}

/* --- V5.10 Personas : cartes héros (blanc opaque + bord lumineux) */
.persona-card {
  background: var(--glass-3);
  border-color: var(--glass-line-strong);
  box-shadow: var(--glass-shadow);
}

/* --- V5.11 Ancre sombre : CTA final ----------------------------- */
.cta-strip {
  background: transparent;
  padding: clamp(56px, 8vw, 110px) 0;
}
.cta-strip::before {
  width: 60vw; height: 60vw;
  right: -18vw; top: -24vw;
  background: radial-gradient(closest-side, rgba(255, 106, 44, 0.12), transparent 70%);
}
.cta-strip .cta-strip-inner {
  background: rgba(14, 14, 12, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 28px;
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4.5vw, 64px);
  box-shadow:
    0 24px 64px -24px rgba(14, 14, 12, 0.40),
    0 8px 24px -12px rgba(200, 74, 18, 0.14);
}
.cta-strip h2 em { color: var(--accent-soft); }
[data-theme="dark"] .cta-strip { background: transparent; }
[data-theme="dark"] .cta-strip .cta-strip-inner {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 122, 63, 0.38);
}

/* --- V5.12 Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aurora-bg::before,
  .aurora-bg::after { animation: none !important; }
}

/* --- V5.13 Fixes mobile (QA v5, 2026-07-02) ----------------------
   Placés en fin de fichier : les règles v5 (padding .stat-cell 26/24)
   écrasaient les overrides du bloc ≤600 situé plus haut. */
@media (max-width: 600px) {
  /* Stats 2 colonnes : minmax(0,1fr) coupe l'overflow min-content */
  .stats-strip-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat-cell { padding: 18px 14px; }
  /* La carte flottante « 68/100 » ne doit pas créer de scroll horizontal */
  .float-2 { right: 0; }
}

/* --- V5.14 Precommander : formulaire en cartes verre (DS §6) ----
   Le <main> de precommander.html porte .aurora-bg : la coquille du
   formulaire devient panneau de verre, les inputs passent en
   --glass-2 avec focus orange + halo. Pas de blur imbriqué. */
.form-shell {
  background: var(--glass-panel);
  border: 1px solid var(--glass-line-strong);
  border-radius: 28px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 32px -12px rgba(200, 74, 18, 0.12),
    0 32px 64px -24px rgba(14, 14, 12, 0.10);
}
[data-theme="dark"] .form-shell {
  background: var(--glass-panel);
  border-color: var(--glass-line);
  box-shadow: var(--glass-shadow);
}
.field input[type=text],
.field input[type=email],
.field textarea,
.field select {
  background: var(--glass-2);
  border: 1px solid rgba(14, 14, 12, 0.10);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent);
  background: var(--glass-3);
  box-shadow: 0 0 0 4px rgba(255, 106, 44, 0.15);
}
[data-theme="dark"] .field input[type=text],
[data-theme="dark"] .field input[type=email],
[data-theme="dark"] .field textarea,
[data-theme="dark"] .field select {
  background: var(--glass-2);
  border-color: rgba(251, 251, 249, 0.14);
  box-shadow: none;
}
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field textarea:focus,
[data-theme="dark"] .field select:focus {
  background: var(--glass-3);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 122, 63, 0.18);
}
/* Options radio = mini cartes verre niveau 1, sélection orange */
.radio-list label {
  background: var(--glass-1);
  border: 1px solid rgba(14, 14, 12, 0.10);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.radio-list label:hover { border-color: var(--accent); }
.radio-list label:has(input:checked) {
  background: var(--glass-3);
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px rgba(255, 106, 44, 0.12),
    0 8px 20px -10px rgba(200, 74, 18, 0.14);
}
[data-theme="dark"] .radio-list label {
  background: var(--glass-1);
  border-color: rgba(251, 251, 249, 0.12);
  box-shadow: none;
}
[data-theme="dark"] .radio-list label:has(input:checked) {
  background: var(--glass-3);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 122, 63, 0.14);
}
/* Stepper : progression orange (v5), cercles en verre */
.step-pill-num {
  background: var(--glass-2);
  border-color: rgba(14, 14, 12, 0.14);
}
.step-pill-bar { background: rgba(14, 14, 12, 0.10); }
.step-pill-bar.is-done { background: var(--accent); }
[data-theme="dark"] .step-pill-num {
  background: var(--glass-2);
  border-color: rgba(251, 251, 249, 0.18);
}
[data-theme="dark"] .step-pill-bar { background: rgba(251, 251, 249, 0.12); }
[data-theme="dark"] .step-pill-bar.is-done { background: var(--accent); }
/* CTA pilule orange : hover orange profond (DS §6), plus de bascule encre */
.btn-accent:hover {
  background: var(--accent-deep);
  color: var(--paper);
  transform: translateY(-1px);
}
[data-theme="dark"] .btn-accent { color: #FBFBF9; }
[data-theme="dark"] .btn-accent:hover { color: #FBFBF9; }

/* --- V5.15 Page service : composants en cartes verre (DS §2) -----
   Ajout minime : dual-col (niveau 1), scenario (niveau 2).
   Aucune classe renommée. */
.dual-col {
  background: var(--glass-1);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  padding: 26px 26px 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 10px 24px -12px rgba(200, 74, 18, 0.10);
}
.dual-col li { border-top-color: rgba(14, 14, 12, 0.06); }
.dual-col li:last-child { border-bottom: 0; }
[data-theme="dark"] .dual-col li { border-top-color: rgba(251, 251, 249, 0.08); }
.scenario {
  background: var(--glass-2);
  border-color: var(--glass-line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 24px -10px rgba(200, 74, 18, 0.08);
}
.scenario:hover { border-color: var(--glass-line-strong); box-shadow: var(--glass-shadow); }
/* Sigil ✓ : glyphe texte remplacé par une icône SVG trait fin (DS §7) */
.dual-col .sigil svg { width: 12px; height: 12px; display: block; }

/* Passerelle vers le login pour les testeurs bêta déjà invités
   (page précommande + états de succès). */
.form-login-hint {
  margin-top: 22px;
  text-align: center;
  font-size: 13.5px;
  color: var(--mute, #6b6b63);
}

.form-login-hint a {
  color: var(--accent-deep, #C4703F);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-login-hint a:hover { opacity: 0.8; }

/* ── Correctifs QA responsive (audit 2026-08-30) ───────────────────────────
   Deux causes de débordement horizontal du document en viewport mobile. */

/* Les orbites de /service sont centrées sur le bord droit du conteneur et
   débordent volontairement (effet « système plus grand que l'écran »). Sur
   mobile ce débordement faisait grossir le document et créait un scroll
   horizontal parasite. `clip` coupe le débordement SANS créer de conteneur
   de défilement — contrairement à `hidden`, qui casserait les 3 éléments
   en position:sticky de la page. */
.niveaux-orbit {
  overflow-x: clip;
}

/* Un chemin de fichier long dans un <code> inline (page /methodologie) ne
   possède aucun point de césure naturel : il poussait la page à 409 px de
   large dans un viewport de 390 px. */
code {
  overflow-wrap: anywhere;
  word-break: break-word;
}