/* =============================================
   MASTER IA V17 — Site commercial master-ia.com
   home.css — extrait de l'inline index.html (P0 perf, 18/08/2026)
   © 2026 Master IA · BCE 1035.776.391
   Design: dark luxury tech noir (Syne/DM Mono/Manrope — V21d self-host)
   Dernière MàJ: 14/04/2026
   =============================================

   ARCHITECTURE CSS (ordre dans le fichier)
   ─────────────────────────────────────────
   1. RESET & VARIABLES   (:root, body, ::selection)
   2. UTILITAIRES          (.grad-text, .skip-link)
   3. CUSTOM CURSOR        (#cursor, #cursor-ring)
   4. NOISE GRAIN OVERLAY  (body::before — texture bruit SVG)
   5. SCROLL PROGRESS      (#scroll-progress — barre top fixe)
   6. NAV                  (nav fixe, logo, liens, CTA, burger mobile)
   7. MOBILE MENU          (.mobile-menu — overlay fullscreen)
   8. HERO                 (.hero — headline, eyebrow, CTA, stats, canvas neural)
   9. TRUST BAR            (.trust-bar — KPIs en ligne)
  10. TICKER               (.ticker-wrap — défilement infini)
  11. SECTION LABELS        (.section-label, .section-title — réutilisés partout)
  12. PAIN                 (.pain-section — 3 cartes problèmes)
  13. SOLUTION             (.solution-section — pilliers + orbite animée)
  14. DIFF TABLE           (.diff-section — comparaison eux/nous)
  15. NERVE               (.nerve-section — présentation produit + phone mockup)
      └─ Phone Mockup      (.phone-frame — iPhone 16 Pro Max style)
      └─ Cockpit Mini       (.cm-* — mini cockpit démo dans le phone)
  16. SERVICES             (.services-section — 3 cartes offres)
  17. PACK ALL-IN          (.pack-section — offre lancement)
  18. HOW IT WORKS         (.how-section — étapes 01→04)
  19. PHILOSOPHY           (.philosophy-section — manifeste)
  21. KPI BAR              (.kpi-bar — métriques clés)
  22. AUDIT CTA            (.audit-section — formulaire + canaux contact)
  23. FOOTER               (footer — logo, légal, liens)
  24. WHATSAPP FLOAT       (#whatsapp-float — bouton fixe bas-droit)
  25. COOKIE BANNER        (#cookie-banner — RGPD)
  26. LEGAL MODAL          (#legal-modal — mentions/CGV/privacy)
  27. ANIMATIONS           (@keyframes slideRight, slideUp, fadeIn)
  28. SCROLL REVEAL        (.reveal, .reveal-l)
  29. FOCUS/A11Y           (:focus-visible, prefers-reduced-motion)
  30. CONTENT-VISIBILITY   (performance — sections hors viewport)
  31. RESPONSIVE           (@media 1060/768/480px + prefers-reduced-motion)

   ARCHITECTURE HTML (ordre dans le body)
   ──────────────────────────────────────
   • Skip-link a11y → Nav → Mobile menu overlay
   • WhatsApp float → Curseur custom → Scroll progress
   • Hero (headline + canvas neural) → Trust bar → Ticker
   • Pain → Solution (orbite) → Diff table
   • NERVE (texte + phone mockup) → Services (3 offres) → Pack all-in
   • How it works (4 étapes) → Philosophy → Testimonials → KPI bar
   • Audit CTA (formulaire + canaux) → Footer
   • Cookie banner → Legal modal
   • JS : cursor, scroll, nav, reveal, 3D tilt, form, cookies, modales, tracking, canvas

   ARCHITECTURE JS (12 modules)
   ──────────────────────────────────
    1. Burger menu mobile (toggle overlay + body scroll lock)
    2. Custom cursor (pointeur acid + ring qui suit avec lag)
    3. Scroll progress bar (largeur proportionnelle au scroll)
    4. Nav scroll state (classe .scrolled après 40px)
    5. Scroll reveal observer (IntersectionObserver threshold 0.1)
    6. Phone 3D tilt (perspective + rotation au mousemove)
    7. Form submission (validation + rate limit 30s + honeypot + fetch webhook n8n)
    8. trackEvent (wrapper gtag pour analytics)
    9. GDPR cookies (accept/reject/settings → localStorage)
   10. Legal modal (3 types : mentions/cgv/privacy + focus trap)
   11. Event delegation (footer legal, cookie banner, tracking)
   12. Neural canvas (animation réseau neuronal dans le hero)
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; } /* V21m : rollback V21l font-size 14px (cassait le breakpoint header desktop — burger visible alors que nav-links cachés) */

:root {
  --void:      #080A0E;
  --deep:      #080B12;
  --surface:   #0D1119;
  --surface2:  #121820;
  --border:    rgba(255,255,255,0.06);
  --border-hi: rgba(200,240,74,0.25);
  --white:     #F2F0EC;
  --muted:     #A8AFBE; /* V21e : éclairci #8B95A6 → #A8AFBE pour WCAG AA texte petit sur fond noir */
  --muted2:    #BCC2CE; /* V21e : éclairci #9AA3B2 → #BCC2CE pour WCAG AAA texte body */
  --acid:      #C8F04A;
  --acid2:     #4AF0C8;
  --acid-dim:  #7DB82A;
  --red:       #FF4444;
  --f-display: 'Syne', sans-serif;
  --f-mono:    'DM Mono', monospace;
  --f-body:    'Manrope', sans-serif;
  --f-accent:  'Manrope', sans-serif; /* V21d : Lora retirée, italic Manrope (Pilier 1 DS = max 3 fonts) */
  --grad:      linear-gradient(135deg, #C8F04A, #4AF0C8);
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* z-index layers */
  --z-grain:   2;
  --z-content: 10;
  --z-float:   400;
  --z-nav:     500;
  --z-cookie:  9990;
  --z-modal:   9995;
  --z-scroll:  9997;
  --z-cursor:  9998;
  --z-cursor-ring: 9999;
}
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body {
  background: var(--void);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--acid); color: var(--void); }

/* -- SKIP LINK (a11y) -- */
/* Lien invisible par defaut (top:-100px), apparait au focus clavier pour
   permettre aux utilisateurs de lecteurs d'ecran de sauter direct au contenu.
   z-index au-dessus de la nav pour rester visible meme avec le header fixe. */
.skip-link {
  position: absolute; top: -100px; left: 16px;
  background: var(--acid); color: var(--void);
  padding: 8px 16px; font-family: var(--f-mono); font-size: 0.75rem;
  z-index: calc(var(--z-nav) + 1); text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 8px; }

/* -- CUSTOM CURSOR -- */
/* Deux elements superposes : un point acid (#cursor) + un anneau qui le suit
   avec un leger lag (transition plus lente sur le ring). Le JS positionne les
   deux via top/left ; pointer-events:none pour ne pas intercepter les clics.
   mix-blend-mode:difference inverse les couleurs du dot sur les fonds clairs. */
#cursor {
  position: fixed;
  width: 12px; height: 12px;
  background: var(--acid);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor-ring);
  transform: translate(-50%, -50%);
  transition: width 0.2s var(--ease), height 0.2s var(--ease), opacity 0.2s;
  mix-blend-mode: difference;
}
#cursor-ring {
  position: fixed;
  width: 40px; height: 40px;
  border: 1px solid rgba(200,240,74,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: transform 0.12s var(--ease), width 0.3s var(--ease), height 0.3s var(--ease);
}
/* Survol lien/bouton : le dot retrecit et le ring s'agrandit — feedback visuel */
body:has(a:hover) #cursor,
body:has(button:hover) #cursor { width: 6px; height: 6px; }
body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring { width: 60px; height: 60px; }

/* -- NOISE GRAIN OVERLAY -- */
/* Pseudo-element fixe plein ecran qui plaque un bruit SVG fractal par-dessus
   tout le site. Donne une texture analogique/film au fond sombre.
   z-index bas (2) pour rester sous le contenu ; pointer-events:none pour ne
   pas bloquer les interactions. Le SVG inline evite une requete HTTP. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: var(--z-grain);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 1;
}

/* -- SCROLL PROGRESS -- */
/* Barre fine fixee en haut de page dont la largeur est mise a jour par JS
   en fonction du pourcentage de scroll. z-index tres eleve (9997) pour
   rester visible par-dessus la nav et le contenu. */
#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: var(--z-scroll);
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--acid), var(--acid2));
  transition: width 0.1s linear;
}

/* =========
   NAV
========= */
/* Nav fixee en haut : transparente par defaut, puis glassmorphism au scroll
   (classe .scrolled ajoutee par JS apres 40px). border-bottom transparent
   au depart pour animer la bordure sans layout shift. */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 68px;
  border-bottom: 1px solid transparent;
  transition: all 0.4s var(--ease);
}
/* -- BURGER MENU -- */
/* Masque par defaut (display:none), affiche via media query mobile.
   3 spans absolus forment les 3 barres ; la classe .open les anime
   en croix (X) via rotation + repositionnement central. */
.nav-burger {
  display: none; background: none; border: none; cursor: pointer;
  width: 32px; height: 24px; position: relative; z-index: 10;
}
.nav-burger span {
  display: block; width: 100%; height: 2px; background: var(--white);
  position: absolute; left: 0; transition: all 0.3s var(--ease);
}
.nav-burger span:nth-child(1) { top: 0; }
.nav-burger span:nth-child(2) { top: 11px; }
.nav-burger span:nth-child(3) { top: 22px; }
.nav-burger.open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { top: 11px; transform: rotate(-45deg); }
/* Overlay plein ecran mobile : z-index juste sous la nav pour que le burger
   reste cliquable. backdrop-filter blur pour effet verre depoli sur le contenu. */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
  background: rgba(8,10,14,0.97); backdrop-filter: blur(24px);
  flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.mobile-menu.open { display: flex; opacity: 1; }
.mobile-menu a {
  font-family: var(--f-mono); font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color 0.2s;
}
.mobile-menu a:hover { color: var(--white); }
/* Etat apres scroll (JS ajoute .scrolled) : fond semi-transparent +
   blur + saturation boost pour l'effet glassmorphism. La bordure apparait. */
nav.scrolled {
  background: rgba(3,5,10,0.92);
  border-color: var(--border);
  backdrop-filter: blur(24px) saturate(180%);
}
.nav-logo {
  font-family: var(--f-display); font-weight: 800;
  font-size: 1.1rem; letter-spacing: -0.03em;
  color: var(--white); text-decoration: none;
  display: flex; align-items: center; gap: 8px;
}
.nav-logo-icon { width: 28px; height: 28px; flex-shrink: 0; }
.nav-logo-text { display: flex; align-items: center; gap: 3px; }
.nav-logo-dot { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color 0.2s;
  position: relative;
}
/* Soulignement anime au hover : scaleX(0→1) depuis la gauche.
   Utilise un pseudo-element plutot que text-decoration pour
   controler finement la position, l'epaisseur et l'animation. */
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1px; background: var(--acid);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
  font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 22px;
  background: transparent; color: var(--acid); border: 1px solid var(--acid);
  text-decoration: none; font-weight: 500;
  transition: all 0.25s var(--ease);
  position: relative; overflow: hidden;
}
/* Effet wipe au hover : un ::before blanc glisse de gauche a droite
   (translateX -101% → 0). Le span du texte est en z-index:1 pour
   rester visible par-dessus le pseudo-element. overflow:hidden sur
   le parent empeche le ::before de deborder. */
.nav-cta::before {
  content: ''; position: absolute; inset: 0;
  background: var(--white); transform: translateX(-101%);
  transition: transform 0.3s var(--ease);
}
.nav-cta:hover::before { transform: translateX(0); }
.nav-cta span { position: relative; z-index: 1; }

/* z-index:3 place le contenu texte au-dessus des elements decoratifs
   (bg-num, glow, ::before sont tous en z-index:0). */
.hero-inner {
  position: relative; z-index: 3;
  max-width: 820px;
}
.hero-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 12px var(--acid);
  animation: blink 1.5s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-sub {
  font-family: var(--f-accent); font-style: italic;
  font-size: 1.05rem; color: var(--muted2);
  max-width: 500px; line-height: 1.75;
  margin-bottom: 48px;
  animation: slideRight 0.9s var(--ease) 0.3s both;
}

.hero-actions {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  animation: slideRight 0.9s var(--ease) 0.45s both;
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px;
  background: var(--grad); color: var(--void);
  font-family: var(--f-mono); font-size: 0.78rem;
  font-weight: 500; letter-spacing: 0.06em;
  text-decoration: none;
  transition: all 0.3s var(--ease);
  position: relative; overflow: hidden;
  /* clip-path coupe le coin superieur droit en biseau — signature visuelle tech */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
/* Meme pattern wipe que .nav-cta : ::before blanc translate en hover,
   le span texte en z-index:1 reste lisible par-dessus. */
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: var(--white); transform: translateX(-101%);
  transition: transform 0.35s var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(200,240,74,0.3); }
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary span { position: relative; z-index: 1; }
.btn-ghost {
  font-family: var(--f-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--muted);
  text-decoration: none; display: flex; align-items: center; gap: 8px;
  transition: color 0.2s;
}
.btn-ghost:hover { color: var(--white); }
.hero-stat-num {
  font-family: var(--f-display); font-size: 2.2rem;
  font-weight: 800; letter-spacing: -0.04em;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
}
.hero-stat-lbl {
  font-family: var(--f-mono); font-size: 0.52rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px;
}

/* -- TRUST BAR -- */
/* Bande de chiffres cles (social proof) entre hero et contenu. Fond --deep
   legerement plus clair que --void pour creer une separation visuelle.
   flex-wrap permet le passage sur 2 lignes en mobile. */
.trust-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 48px;
  display: flex; align-items: center; justify-content: center; gap: 64px;
  flex-wrap: wrap; background: var(--deep);
}
.trust-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trust-num {
  font-family: var(--f-display); font-size: 1.9rem; font-weight: 800;
  letter-spacing: -0.04em; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1;
}
.trust-label {
  font-family: var(--f-mono); font-size: 0.64rem; color: var(--muted);
  letter-spacing: 0.1em; text-align: center;
}
.trust-divider { width: 1px; height: 44px; background: var(--border); }

/* -- TICKER -- */
/* Bandeau defilant infini : overflow:hidden masque le contenu qui sort du cadre.
   Le contenu HTML est duplique (2x) pour creer une boucle sans saut visible
   — l'animation translateX(0 → -50%) boucle de facon transparente. */
.ticker-wrap {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  background: var(--deep);
}
.ticker {
  display: flex; gap: 0;
  animation: ticker 30s linear infinite;
  white-space: nowrap;
  /* will-change optimise le compositing GPU pour cette animation continue */
  will-change: transform;
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 24px;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); padding: 0 40px;
}
.ticker-item strong { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ticker-sep { color: var(--acid); opacity: 0.3; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* =========
   SECTION LABELS
========= */
/* Composants reutilisables pour l'en-tete de chaque section.
   Le ::before genere un petit trait horizontal avant le texte du label,
   creant un motif "— LABEL" typique du design editorial tech. */
.section-label {
  font-family: var(--f-mono); font-size: 0.6rem;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--acid-dim); margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.section-label::before {
  content: ''; width: 28px; height: 1px; background: var(--acid-dim);
}
.section-title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.85rem, 3.5vw, 3.3rem);
  letter-spacing: -0.04em; line-height: 1.0;
  margin-bottom: 16px;
}
.section-title span { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* =========
   PAIN
========= */
.pain-section {
  padding: 130px 48px; max-width: 1200px; margin: 0 auto;
}
/* Grille 3 colonnes avec gap:1px + background sur le conteneur parent :
   le fond du grid (--border) transparait dans les espaces de 1px entre
   les cartes, creant des separateurs fins sans bordures individuelles. */
.pain-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; margin-top: 72px;
  background: var(--border);
  border: 1px solid var(--border);
}
/* overflow:hidden pour contenir le ::before (barre acid en haut).
   La barre est masquee par defaut (scaleX:0) et se revele au hover
   de gauche a droite — feedback visuel pour identifier la carte active. */
.pain-card {
  background: var(--deep); padding: 40px 32px;
  position: relative; overflow: hidden;
  transition: background 0.4s;
}
.pain-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--acid);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.pain-card:hover { background: var(--surface); }
.pain-card:hover::before { transform: scaleX(1); }
.pain-num {
  font-family: var(--f-display); font-size: 3.3rem;
  font-weight: 800; letter-spacing: -0.06em;
  color: rgba(200,240,74,0.07); line-height: 1;
  margin-bottom: 18px; transition: color 0.4s;
}
.pain-card:hover .pain-num { color: rgba(200,240,74,0.12); }
.pain-icon { font-size: 1.4rem; margin-bottom: 16px; display: block; }
.pain-title {
  font-family: var(--f-display); font-size: 1.15rem;
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--white); margin-bottom: 12px;
}
.pain-desc { font-size: 0.82rem; color: var(--muted2); line-height: 1.7; }
.pain-cost {
  margin-top: 20px;
  font-family: var(--f-mono); font-size: 0.62rem;
  color: var(--acid);
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border: 1px solid rgba(200,240,74,0.2);
  background: rgba(200,240,74,0.04);
  display: inline-block;
}
.pain-source {
  font-family: var(--f-mono); font-size: 0.7rem;
  color: rgba(168,175,190,0.85); font-style: italic;
  padding-left: 12px; line-height: 1.6; margin-top: 12px;
}

/* =========
   SOLUTION / APPROACH
========= */
/* overflow:hidden contient le texte geant "SYSTEM" en ::before qui deborde
   a droite. Meme pattern que hero-bg-num : text-stroke quasi invisible
   pour un watermark decoratif en arriere-plan. */
.solution-section {
  padding: 130px 48px;
  background: var(--deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.solution-section::before {
  content: 'SYSTEM';
  position: absolute; right: -2%; top: 50%; transform: translateY(-50%);
  font-family: var(--f-display); font-weight: 800;
  font-size: 22vw; line-height: 1; letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.025);
  pointer-events: none;
}
.solution-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.sol-pillars { display: flex; flex-direction: column; gap: 0; }
.sol-pillar {
  display: flex; gap: 24px;
  padding: 28px 0; border-bottom: 1px solid var(--border);
  transition: padding-left 0.3s var(--ease);
  cursor: default;
}
.sol-pillar:first-child { padding-top: 0; }
.sol-pillar:last-child { border-bottom: none; padding-bottom: 0; }
/* Indent subtil au hover : micro-interaction qui suggere l'interactivite */
.sol-pillar:hover { padding-left: 8px; }
.sol-num {
  font-family: var(--f-mono); font-size: 0.58rem;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 0.1em;
  margin-top: 4px; flex-shrink: 0; width: 24px;
}
.sol-title {
  font-family: var(--f-display); font-size: 1rem;
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--white); margin-bottom: 8px;
}
.sol-desc { font-size: 0.82rem; color: var(--muted2); line-height: 1.7; }

/* Animated orbit — systeme solaire decoratif illustrant l'approche.
   3 cercles concentriques tournent a des vitesses differentes,
   orbit-2 en sens inverse (reverse) pour un rendu organique.
   Les orbit-node sont positionnes en inline style sur chaque cercle. */
.orbit-wrap {
  position: relative; display: flex;
  align-items: center; justify-content: center;
  height: 400px;
}
.orbit-center {
  position: absolute; width: 80px; height: 80px;
  background: var(--surface2);
  border: 1px solid rgba(200,240,74,0.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  box-shadow: 0 0 60px rgba(200,240,74,0.2), 0 0 120px rgba(200,240,74,0.08);
  z-index: 3;
}
.orbit {
  position: absolute; border-radius: 50%;
  border: 1px solid;
  animation: spin linear infinite;
}
.orbit-1 { width: 160px; height: 160px; border-color: rgba(200,240,74,0.12); animation-duration: 20s; }
.orbit-2 { width: 260px; height: 260px; border-color: rgba(74,240,200,0.08); animation-duration: 35s; animation-direction: reverse; }
.orbit-3 { width: 360px; height: 360px; border-color: rgba(200,240,74,0.06); animation-duration: 55s; }
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

.orbit-node {
  position: absolute; width: 42px; height: 42px;
  border-radius: 50%; background: var(--surface2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; z-index: 2;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* =========
   DIFF TABLE — Tableau comparatif "eux vs nous". La derniere colonne (Master IA) est
   visuellement differenciee par un fond acid subtil et un header acid2.
========= */
.diff-section { padding: 130px 48px; max-width: 1200px; margin: 0 auto; }
.diff-table {
  width: 100%; border-collapse: collapse; margin-top: 56px;
  border: 1px solid var(--border);
}
.diff-table th {
  padding: 16px 24px;
  background: var(--surface);
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--border);
  text-align: left;
}
.diff-table th:last-child { color: var(--acid2); background: rgba(200,240,74,0.04); }
.diff-table td {
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  font-size: 0.82rem; line-height: 1.6; vertical-align: top;
}
.diff-table tbody tr:last-child td { border-bottom: none; }
.diff-table tbody tr:hover td { background: rgba(255,255,255,0.015); }
.col-label { font-family: var(--f-mono); font-size: 0.68rem; color: var(--muted); letter-spacing: 0.05em; }
.col-them { color: var(--muted2); }
/* !important necessaire car le hover tr applique aussi un background —
   sans lui, la teinte acid de la colonne "nous" disparaitrait au hover. */
.col-us { color: var(--white); background: rgba(200,240,74,0.025) !important; font-weight: 400; }

/* =========================
   NERVE — Section produit phare.
   overflow:hidden contient le nerve-slash et le phone-glow qui debordent.
========================= */
.nerve-section {
  position: relative; overflow: hidden;
  background: var(--void);
  border-top: 1px solid var(--border);
}
/* Fond biseaute couvrant la moitie gauche : clip-path polygon coupe
   le bord droit en diagonale (100%,0 → 85%,100%) pour creer une
   separation angulaire entre les deux colonnes de la grille. */
.nerve-slash {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 55%;
  background: var(--deep);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  z-index: 0;
}
/* Trait lumineux acid le long du bord biseaute — le ::before est
   positionne a right:0 du slash, donc il suit la diagonale clippee. */
.nerve-slash::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--acid), transparent);
}
.nerve-inner {
  position: relative; z-index: 1;
  max-width: 1300px; margin: 0 auto;
  padding: 120px 48px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: start;
}
.nerve-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 0.6rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--acid);
  border: 1px solid rgba(200,240,74,0.25);
  padding: 6px 14px; margin-bottom: 28px;
  background: rgba(200,240,74,0.04);
}
.nerve-tag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 10px var(--acid);
  animation: blink 1.5s step-end infinite;
}
.nerve-title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  letter-spacing: -0.05em; line-height: 0.9;
  margin-bottom: 8px; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nerve-subtitle {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: -0.02em; color: var(--white);
  margin-bottom: 24px; line-height: 1.3;
}
.nerve-desc {
  font-family: var(--f-accent); font-style: italic;
  font-size: 0.95rem; color: var(--muted2); line-height: 1.75;
  max-width: 460px; margin-bottom: 48px;
}
.nerve-feats { display: flex; flex-direction: column; gap: 0; margin-bottom: 48px; }
.nerve-feat {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: padding-left 0.3s var(--ease);
  cursor: default;
}
.nerve-feat:first-child { padding-top: 0; }
.nerve-feat:last-child { border-bottom: none; padding-bottom: 0; }
.nerve-feat:hover { padding-left: 6px; }
.nf-ico {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid rgba(200,240,74,0.2);
  background: rgba(200,240,74,0.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; border-radius: 6px;
}
.nf-title {
  font-family: var(--f-display); font-size: 0.88rem;
  font-weight: 700; letter-spacing: -0.01em; color: var(--white);
}
.nf-desc { font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted2); line-height: 1.65; margin-top: 5px; }
.modules-label {
  font-family: var(--f-mono); font-size: 0.56rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  display: flex; justify-content: space-between;
}
.modules-label span { color: rgba(200,240,74,0.4); }
.mod-ico { font-size: 1rem; flex-shrink: 0; }
.mod-name { font-family: var(--f-display); font-size: 0.72rem; font-weight: 700; color: var(--white); }
.mod-price { font-family: var(--f-mono); font-size: 0.5rem; color: var(--acid-dim); margin-top: 1px; }
/* Barre de prix : encadrement acid subtil + ::before qui trace un trait
   lumineux horizontal en haut. overflow:hidden contient ce trait. */
.nerve-pbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; gap: 16px;
  border: 1px solid rgba(200,240,74,0.2);
  background: rgba(200,240,74,0.03);
  position: relative; overflow: hidden;
}
.nerve-pbar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acid), transparent);
}
.npb-from { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted2); line-height: 1.4; }
.npb-amt { font-family: var(--f-mono); font-size: 2.4rem; font-weight: 500; letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.npb-period { font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted2); margin-top: 4px; line-height: 1.5; }
.npb-btn {
  padding: 14px 24px;
  background: var(--grad); color: var(--void);
  font-family: var(--f-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.08em; text-decoration: none; white-space: nowrap;
  transition: all 0.25s var(--ease);
  /* Meme biseau coin superieur droit que btn-primary — coherence visuelle */
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.npb-btn:hover { background: var(--white); transform: translateY(-2px); }
/* Phone mockup — Reproduction fidele d'un smartphone moderne.
   Le frame utilise des box-shadow multiples pour simuler la profondeur
   et les reflets metalliques du chassis. */
.nerve-right { position: relative; }
/* Perspective 3D : le telephone est legerement incline au repos (-3deg Y, 2deg X)
   et se redresse au hover. perspective(1200px) definit le point de fuite,
   la transition 0.6s rend le mouvement fluide et "physique". */
.phone-wrap {
  position: relative;
  transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
  transition: transform 0.6s var(--ease);
  max-width: 400px;
  margin: 0 auto;
}
.phone-wrap:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}
.phone-frame {
  position: relative;
  background: linear-gradient(160deg, #111418, #0A0C10);
  border: 2.5px solid rgba(255,255,255,0.12);
  width: 400px;
  min-height: 700px;
  border-radius: 48px;
  padding: 12px;
  display: flex; flex-direction: column;
  box-shadow:
    0 60px 120px rgba(0,0,0,0.8),
    0 30px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.4);
}
/* Side buttons — ::before (gauche) genere 3 boutons volume via box-shadow
   (un element + 2 ombres decalees). ::after (droite) = bouton power. */
.phone-frame::before {
  content: '';
  position: absolute; top: 140px; left: -3.5px;
  width: 3px; height: 28px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 40px 0 rgba(255,255,255,0.08), 0 74px 0 rgba(255,255,255,0.08);
}
.phone-frame::after {
  content: '';
  position: absolute; top: 180px; right: -3.5px;
  width: 3px; height: 64px;
  background: rgba(255,255,255,0.10);
  border-radius: 0 2px 2px 0;
}
/* Phone screen area — border-radius !important et overflow !important
   forcent le masquage du contenu cockpit a l'interieur des coins arrondis,
   meme si des styles enfants tentent de les overrider. */
.phone-screen {
  position: relative;
  background: linear-gradient(145deg, #0A0D15, #060810);
  border-radius: 42px !important;
  overflow: hidden !important;
  flex: 1;
  display: flex; flex-direction: column;
}
/* Dynamic Island — capsule noire + faux objectif camera via ::before du notch-bar */
.phone-notch {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 0 4px;
  position: relative;
}
.phone-notch-bar {
  width: 120px; height: 28px;
  background: #000;
  border-radius: 14px;
  position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}
.phone-notch-bar::before {
  content: '';
  position: absolute; right: 24px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(30,35,50,0.9);
  box-shadow: 0 0 3px rgba(200,240,74,0.1), inset 0 0 2px rgba(200,240,74,0.08);
}
/* Status bar */
.phone-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 24px 10px;
  font-family: var(--f-mono); font-size: 0.48rem;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.phone-status-right { display: flex; align-items: center; gap: 6px; }
/* Batterie en pur CSS : contour = bordure, ::before = jauge acid, ::after = borne + */
.phone-status-bat {
  width: 20px; height: 10px; border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 3px; position: relative;
  display: flex; align-items: center; padding: 1.5px;
}
.phone-status-bat::before {
  content: ''; flex: 1; height: 100%;
  background: var(--acid); border-radius: 1px;
}
.phone-status-bat::after {
  content: ''; position: absolute; right: -4px; top: 50%;
  transform: translateY(-50%);
  width: 2.5px; height: 5px;
  background: rgba(255,255,255,0.25); border-radius: 0 1.5px 1.5px 0;
}
/* Cockpit content inside phone — surcharges pour adapter le cockpit NERVE a l'echelle du mockup */
.phone-content {
  padding: 4px 18px 18px;
  flex: 1;
  display: flex; flex-direction: column;
}
.phone-content .cm-hdr { padding-bottom: 14px; margin-bottom: 14px; }
.phone-content .cm-logo-box { width: 34px; height: 34px; font-size: 0.95rem; }
.phone-content .cm-hdr-title { font-size: 0.88rem; }
.phone-content .cm-hdr-sub { font-size: 0.46rem; }
.phone-content .cm-kpi-grid { gap: 8px; margin-bottom: 14px; }
.phone-content .cm-kpi { padding: 12px 14px; border-radius: 10px; }
.phone-content .cm-k-lbl { font-size: 0.44rem; margin-bottom: 3px; }
.phone-content .cm-k-val.xl { font-size: 1.8rem; }
.phone-content .cm-k-val.md { font-size: 1.3rem; }
.phone-content .cm-k-sub { font-size: 0.43rem; margin-top: 3px; }
.phone-content .cm-row { padding: 9px 0; gap: 10px; }
.phone-content .cm-av { width: 28px; height: 28px; border-radius: 6px; font-size: 0.56rem; }
.phone-content .cm-rname { font-size: 0.66rem; }
.phone-content .cm-rdet { font-size: 0.44rem; }
.phone-content .cm-badge { font-size: 0.44rem; padding: 3px 9px; }
.phone-content .cm-foot { margin-top: 14px; padding-top: 12px; font-size: 0.44rem; }
/* Home indicator */
.phone-home {
  display: flex; justify-content: center;
  padding: 14px 0 10px;
}
.phone-home-bar {
  width: 134px; height: 5px;
  background: rgba(255,255,255,0.15);
  border-radius: 5px;
}
/* Acid glow behind phone — halo diffus (width:220%, z-index:-1) derriere le frame,
   contenu par overflow:hidden de .nerve-section. */
.phone-glow {
  position: absolute;
  top: 15%; left: 50%; transform: translateX(-50%);
  width: 220%; height: 70%;
  background: radial-gradient(ellipse, rgba(200,240,74,0.07) 0%, transparent 60%);
  pointer-events: none; z-index: -1;
}
/* Pastilles flottantes autour du telephone : positionnees en absolu
   via .nerve-right. z-index:4 au-dessus du phone. Animation floatY
   les fait osciller verticalement en boucle infinie. */
.float-pill {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--surface2);
  border: 1px solid rgba(200,240,74,0.2);
  border-radius: 100px;
  font-family: var(--f-mono); font-size: 0.52rem;
  letter-spacing: 0.06em; color: var(--muted2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  white-space: nowrap; z-index: 4;
}
.float-pill .fp-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.fp-1 { top: -20px; right: -30px; animation: floatY 4s ease-in-out infinite; }
.fp-2 { bottom: 60px; left: -40px; animation: floatY 5s ease-in-out 1.5s infinite; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.cm-hdr {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cm-logo-box {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--acid); display: flex;
  align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 0.85rem;
  font-weight: 800; color: var(--void); flex-shrink: 0;
}
.cm-hdr-title { font-family: var(--f-display); font-size: 0.78rem; font-weight: 700; color: var(--white); }
.cm-hdr-sub { font-family: var(--f-mono); font-size: 0.42rem; color: rgba(200,240,74,0.4); letter-spacing: 0.08em; margin-top: 1px; }
.cm-live { margin-left: auto; display: flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 0.42rem; color: rgba(200,240,74,0.6); letter-spacing: 0.1em; }
.cm-ldot { width: 5px; height: 5px; border-radius: 50%; background: var(--acid); animation: blink 1.5s step-end infinite; }
.cm-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
.cm-kpi {
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px; padding: 10px 11px; position: relative; overflow: hidden;
}
.cm-kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(200,240,74,0.2),transparent); }
.cm-kpi.cm-hero { grid-column:1/-1; background:rgba(200,240,74,0.04); border-color:rgba(200,240,74,0.1); }
.cm-k-lbl { font-family:var(--f-mono); font-size:0.41rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.25); margin-bottom:2px; }
.cm-k-val { font-family:var(--f-mono); font-weight:700; color:var(--acid); line-height:1; }
.cm-k-val.xl { font-size:1.5rem; }
.cm-k-val.md { font-size:1.1rem; }
.cm-k-sub { font-family:var(--f-mono); font-size:0.4rem; color:rgba(255,255,255,0.2); margin-top:2px; }
.cm-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cm-row:last-child { border-bottom: none; }
.cm-av {
  width: 24px; height: 24px; border-radius: 5px; flex-shrink: 0;
  background: rgba(200,240,74,0.07); border: 1px solid rgba(200,240,74,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.52rem; font-weight: 700; color: var(--acid);
  font-family: var(--f-display);
}
.cm-rname { font-size: 0.58rem; font-weight: 600; color: var(--white); font-family: var(--f-display); }
.cm-rdet { font-family: var(--f-mono); font-size: 0.41rem; color: rgba(255,255,255,0.28); }
.cm-badge {
  margin-left: auto; padding: 2px 7px;
  font-family: var(--f-mono); font-size: 0.4rem; font-weight: 700;
  letter-spacing: 0.05em; flex-shrink: 0;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
}
.b-ok   { background: rgba(74,222,128,0.12); color: #4ade80; }
.b-new  { background: rgba(200,240,74,0.1);  color: var(--acid); }
.b-wait { background: rgba(74,240,200,0.1);  color: var(--acid2); }
.cm-foot {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,0.04);
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 0.4rem;
}
.cm-foot-l { color: rgba(255,255,255,0.18); }
.cm-foot-r { color: rgba(200,240,74,0.35); }

/* =========
   SERVICES — 3 offres (Audit, Essentiel, Complet)
========= */
/* Grille gap:1px + background:border = séparateurs visibles entre cartes sans bordures.
   .nerve-svc = carte recommandée (bordure acid permanente, ::after toujours scaleX(1)).
   .svc-cta = bouton texte gradient qui se remplit en fond au hover
   (background-clip: text → initial + text-fill-color reset) */
.services-section { padding: 130px 48px; max-width: 1300px; margin: 0 auto; }
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin-top: 40px;
  background: var(--border); border: 1px solid var(--border);
}
.svc-card {
  background: var(--deep); padding: 26px 24px;
  position: relative; overflow: hidden; transition: background 0.35s;
}
.svc-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--acid); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.svc-card:hover { background: var(--surface); }
.svc-card:hover::after { transform: scaleX(1); }
.svc-card.nerve-svc { background: var(--surface); border: 1px solid rgba(200,240,74,0.3); }
.svc-card.nerve-svc::after { transform: scaleX(1); }
.svc-tag { font-family: var(--f-mono); font-size: 0.54rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.svc-tag.nt { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.svc-name { font-family: var(--f-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; color: var(--white); margin-bottom: 9px; line-height: 1.25; }
.svc-pain { font-style: italic; color: var(--muted2); font-size: 0.79rem; line-height: 1.55; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.svc-feats { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.svc-feats li { display: flex; gap: 9px; font-size: 0.77rem; color: var(--muted2); line-height: 1.5; }
.svc-feats li::before { content: '\2014'; color: rgba(200,240,74,0.3); font-family: var(--f-mono); flex-shrink: 0; }
.svc-price { font-family: var(--f-mono); font-size: 1rem; font-weight: 500; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.svc-price-note { font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted2); letter-spacing: 0.015em; line-height: 1.6; margin-top: 6px; }
.svc-cta {
  display: block; text-align: center; padding: 11px; margin-top: 20px;
  border: 1px solid rgba(200,240,74,0.22);
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; transition: all 0.25s var(--ease);
}
.svc-cta:hover { background: var(--grad); -webkit-background-clip: initial; -webkit-text-fill-color: var(--void); background-clip: initial; color: var(--void); }

/* =========
   PACK ALL-IN — Offre de lancement : prix fixe 79.99€ HTVA/mois
========= */
/* Fond gradient 3-stops pour profondeur, ::before = ligne acid 3px en haut,
   ::after = halo radial décoratif centré. .pack-badge = label biseau clip-path.
   .pack-pricing = carte encadrée acid avec étiquette ::before positionnée en négatif top.
   .pack-price = gradient text grand format (3.4rem) */
.pack-section {
  background: linear-gradient(160deg, #050810 0%, #08101C 50%, #050810 100%);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.pack-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--acid), var(--acid2), var(--acid), transparent);
}
.pack-section::after {
  content: '';
  position: absolute; top: -50%; left: 40%; transform: translateX(-50%);
  width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(200,240,74,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.pack-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 110px 48px; position: relative; z-index: 1;
}
.pack-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 0.65rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--grad); color: var(--void);
  padding: 7px 18px; font-weight: 500; margin-bottom: 28px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.pack-title {
  font-family: var(--f-display); font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1.0;
  margin-bottom: 16px;
}
.pack-title span { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pack-sub { font-family: var(--f-accent); font-style: italic; color: var(--muted2); font-size: 1rem; line-height: 1.75; max-width: 560px; margin-bottom: 64px; }
.pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.pack-lines-title { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.pack-line {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--border); gap: 16px;
}
.pack-line:last-child { border-bottom: none; }
.pl-left { display: flex; align-items: center; gap: 12px; }
.pl-ico { font-size: 1.1rem; flex-shrink: 0; }
.pl-name { font-family: var(--f-display); font-size: 0.88rem; font-weight: 700; color: var(--white); }
.pl-desc { font-family: var(--f-mono); font-size: 0.58rem; color: var(--muted); margin-top: 2px; }
.pl-price { font-family: var(--f-mono); font-size: 0.7rem; color: rgba(200,240,74,0.4); text-decoration: line-through; flex-shrink: 0; white-space: nowrap; }
.pack-pricing {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(200,240,74,0.2);
  padding: 40px 36px; position: relative;
}
.pack-pricing::before {
  content: 'OFFRE LIMITÉE';
  position: absolute; top: -14px; left: 28px;
  font-family: var(--f-mono); font-size: 0.58rem;
  letter-spacing: 0.18em; background: var(--grad);
  color: var(--void); padding: 4px 14px; font-weight: 500;
}
.pp-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-family: var(--f-mono); font-size: 0.75rem;
}
.pp-row:last-of-type { border-bottom: none; }
.pp-lbl { color: var(--muted); }
.pp-old { color: rgba(255,255,255,0.3); text-decoration: line-through; font-size: 0.68rem; }
.pp-new { color: var(--white); font-weight: 500; }
.pp-eco { color: var(--acid); font-weight: 600; }
.pack-price {
  margin-top: 28px;
  font-family: var(--f-mono); font-size: 3.4rem;
  font-weight: 500; letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1;
}
.pack-price-note { font-family: var(--f-mono); font-size: 0.65rem; color: var(--muted); letter-spacing: 0.015em; margin-top: 6px; margin-bottom: 28px; }
.pack-guarantee { font-family: var(--f-mono); font-size: 0.6rem; color: var(--muted); text-align: center; margin-top: 14px; letter-spacing: 0.06em; }

/* =========
   HOW IT WORKS — 4 étapes (01→04) en grille
========= */
/* Même pattern que pain-cards : grille gap:1px, barre acid ::before scaleX au hover,
   numéros géants semi-transparents qui s'illuminent au survol */
.how-section { padding: 130px 48px; background: var(--deep); border-top: 1px solid var(--border); }
.how-inner { max-width: 1100px; margin: 0 auto; }
.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 64px; background: var(--border); border: 1px solid var(--border); }
.step {
  background: var(--void); padding: 36px 28px;
  position: relative; overflow: hidden; transition: background 0.35s;
}
.step:hover { background: var(--surface); }
.step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--acid); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.step:hover::before { transform: scaleX(1); }
.step-num {
  font-family: var(--f-display); font-size: 3.5rem; font-weight: 800;
  letter-spacing: -0.06em; color: rgba(200,240,74,0.08); line-height: 1;
  margin-bottom: 20px; transition: color 0.35s;
}
.step:hover .step-num { color: rgba(200,240,74,0.14); }
.step-title { font-family: var(--f-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--white); margin-bottom: 10px; }
.step-desc { font-size: 0.79rem; color: var(--muted2); line-height: 1.7; }
.step-dur { margin-top: 16px; font-family: var(--f-mono); font-size: 0.56rem; color: var(--acid-dim); letter-spacing: 0.08em; }

/* =========
   PHILOSOPHY — Manifeste + 3 règles fondamentales
========= */
/* ::before = halo radial centré. blockquote en Manrope italic avec mots-clés gradient.
   .phil-rules = grille 3 colonnes avec bordure acid au hover + ligne gradient ::before */
.philosophy-section {
  padding: 130px 48px; text-align: center;
  position: relative; overflow: hidden;
}
.philosophy-section::before {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(200,240,74,0.04) 0%, transparent 70%);
  pointer-events: none;
}
blockquote {
  font-family: var(--f-accent); font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.4;
  color: var(--white); max-width: 780px; margin: 0 auto 72px;
  position: relative; z-index: 1;
}
blockquote em { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; }
.phil-rules {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 32px; max-width: 1000px; margin: 0 auto;
  position: relative; z-index: 1;
}
.phil-rule {
  text-align: left; padding: 28px 24px;
  border: 1px solid var(--border);
  background: var(--deep); position: relative; overflow: hidden;
  transition: border-color 0.3s;
}
.phil-rule:hover { border-color: rgba(200,240,74,0.2); }
.phil-rule::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,240,74,0.3), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.phil-rule:hover::before { opacity: 1; }
.rule-num { font-family: var(--f-mono); font-size: 0.55rem; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 0.1em; margin-bottom: 12px; }
.rule-text { font-size: 0.82rem; color: var(--muted2); line-height: 1.7; }
.rule-text strong { color: var(--white); }
.testimonial-inner { max-width: 720px; text-align: center; position: relative; z-index: 1; }
.t-bar { width: 60px; height: 1px; background: rgba(200,240,74,0.4); margin: 0 auto 16px; }

/* =========
   KPI BAR — 4 métriques clés (grille responsive 4→2 cols)
========= */
/* Chiffres gradient text, séparés par border-right. Hover = fond surface */
.kpi-bar {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--void);
}
.kpi-item {
  padding: 36px 40px;
  border-right: 1px solid var(--border);
  transition: background 0.3s;
}
.kpi-item:last-child { border-right: none; }
.kpi-item:hover { background: var(--surface); }
.kpi-n {
  font-family: var(--f-display); font-size: 2.6rem; font-weight: 800;
  letter-spacing: -0.04em; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1;
}
.kpi-l { font-family: var(--f-mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* =========
   AUDIT CTA — Section conversion principale (formulaire + canaux)
========= */
/* ::before = halo radial derrière le titre. .contact-block = grille 2 cols (form + alt).
   Formulaire : inputs avec focus ring acid, select avec chevron SVG custom, honeypot display:none.
   .form-submit = fond gradient avec effet wipe blanc via ::after translateX.
   .contact-channel = cartes WhatsApp/Email avec hover translateY(-2px) */
.audit-section {
  padding: 140px 48px; text-align: center;
  position: relative; overflow: hidden;
}
.audit-section::before {
  content: '';
  position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 700px;
  background: radial-gradient(ellipse, rgba(200,240,74,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.audit-title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.2rem, 4.4vw, 3.7rem);
  letter-spacing: -0.04em; line-height: 1.0;
  margin-bottom: 20px; position: relative; z-index: 1;
}
.audit-title em { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; display: block; }
.audit-sub {
  font-family: var(--f-accent); font-style: italic;
  font-size: 1.05rem; color: var(--muted2); max-width: 480px;
  margin: 0 auto 48px; line-height: 1.75; position: relative; z-index: 1;
}

/* Contact block */
.contact-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-top: 48px; align-items: start; max-width: 860px;
  margin-left: auto; margin-right: auto;
  position: relative; z-index: 1; text-align: left;
}
.contact-form {
  background: var(--deep); border: 1px solid var(--border); padding: 36px 32px;
}
.contact-form::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acid), transparent);
}
.contact-form-title {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 24px;
}
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; position: relative; }
.form-field label {
  font-family: var(--f-mono); font-size: 0.68rem; color: var(--muted);
  letter-spacing: 0.08em; transition: color 0.2s;
}
.form-field:focus-within label { color: var(--acid); }
.form-field input, .form-field select, .form-field textarea {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--white); font-family: var(--f-mono); font-size: 0.82rem;
  padding: 12px 16px; outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  appearance: none; width: 100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: rgba(200,240,74,0.6);
  box-shadow: 0 0 0 3px rgba(200,240,74,0.08), 0 0 16px rgba(200,240,74,0.06);
  outline: none;
}
.form-field input:valid:not(:placeholder-shown) { border-color: rgba(74,240,200,0.4); }
.form-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A8496' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.form-field select option { background: var(--deep); }
.form-submit {
  width: 100%; font-family: var(--f-mono); font-size: 0.78rem;
  letter-spacing: 0.08em; font-weight: 600; padding: 14px 24px;
  background: transparent; color: var(--acid); border: 1px solid var(--acid);
  cursor: pointer; transition: all 0.25s var(--ease); margin-top: 8px;
  position: relative; overflow: hidden;
}
.form-submit::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.15);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}
.form-submit:hover { background: var(--grad); color: var(--void); transform: translateY(-2px); }
.form-submit:hover::after { transform: translateX(100%); }
.form-honeypot { display: none; }
.contact-alt { display: flex; flex-direction: column; gap: 16px; }
.contact-alt-title {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 8px;
}
.contact-channel {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; border: 1px solid var(--border);
  background: var(--deep); text-decoration: none;
  transition: all 0.25s var(--ease); color: var(--white);
}
.contact-channel:hover { border-color: rgba(200,240,74,0.3); transform: translateY(-2px); background: var(--surface); }
.contact-channel-icon { font-size: 1.4rem; flex-shrink: 0; }
.contact-channel-label { font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; }
.contact-channel-value { font-family: var(--f-display); font-size: 0.92rem; font-weight: 700; color: var(--white); margin-top: 2px; }
.contact-channel.whatsapp:hover { border-color: rgba(37,211,102,0.4); }
.contact-channel.whatsapp .contact-channel-value { color: #25D366; }
.contact-note {
  font-family: var(--f-mono); font-size: 0.68rem; color: var(--muted);
  text-align: center; margin-top: 24px; line-height: 1.7;
  max-width: 680px; margin-left: auto; margin-right: auto;
  position: relative; z-index: 1;
}

/* =========
   FOOTER — Logo + BCE + liens légaux (data-legal → modales JS)
========= */
footer {
  border-top: 1px solid var(--border); padding: 44px 48px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px; background: var(--void);
}
.footer-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 800; font-size: 1rem; letter-spacing: -0.03em; color: var(--white); text-decoration: none; transition: opacity 0.2s; }
.footer-logo:hover { opacity: 0.8; }
.footer-logo span { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-logo .mia-logo-mark { flex-shrink: 0; display: block; }
.footer-center { font-family: var(--f-mono); font-size: 0.6rem; color: var(--muted); letter-spacing: 0.08em; text-align: center; }
.footer-meta { font-family: var(--f-mono); font-size: 0.6rem; color: var(--muted); letter-spacing: 0.05em; text-align: right; line-height: 1.9; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { font-family: var(--f-mono); font-size: 0.58rem; color: var(--muted); text-decoration: none; letter-spacing: 0.06em; transition: color 0.2s; }
.footer-links a:hover { color: var(--acid); }
.footer-legal { color: var(--muted); text-decoration: none; font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.06em; transition: color 0.2s; cursor: pointer; }
.footer-legal:hover { color: var(--white); }

/* -- WhatsApp float : bouton fixe bas-droit avec bounce subtil et tooltip au hover -- */
#whatsapp-float {
  position: fixed; bottom: 28px; right: 28px; z-index: var(--z-float);
  width: 54px; height: 54px; border-radius: 50%;
  /* Cercle plein fond noir, contour lime, logo WhatsApp lime. */
  background: var(--void);
  border: 1px solid var(--acid);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(200,240,74,0.25);
  transition: all 0.3s var(--ease-back); text-decoration: none;
  animation: waBounce 3s ease-in-out infinite;
}
#whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(200,240,74,0.45); }
#whatsapp-float svg { width: 26px; height: 26px; fill: var(--acid); }
@keyframes waBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
#whatsapp-float .wa-tooltip {
  position: absolute; right: 68px; top: 50%; transform: translateY(-50%);
  background: var(--deep); border: 1px solid var(--border);
  font-family: var(--f-mono); font-size: 0.68rem; color: var(--white);
  padding: 8px 14px; white-space: nowrap; letter-spacing: 0.06em;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
#whatsapp-float:hover .wa-tooltip { opacity: 1; }

/* -- COOKIE BANNER (RGPD) : slide-up depuis le bas, 3 boutons (accept/reject/settings).
   translateY(100%) par défaut, .visible = translateY(0). localStorage consent -- */
#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-cookie);
  background: var(--deep); border-top: 1px solid rgba(200,240,74,0.3);
  padding: 20px 48px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  transform: translateY(100%); transition: transform 0.5s var(--ease);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.4);
}
#cookie-banner.visible { transform: translateY(0); }
.cookie-text { font-family: var(--f-mono); font-size: 0.75rem; color: var(--muted); line-height: 1.6; max-width: 660px; }
.cookie-text a { color: var(--acid); text-decoration: none; }
.cookie-text a:hover { text-decoration: underline; }
.cookie-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.cookie-btn-accept { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; font-weight: 600; padding: 10px 22px; background: transparent; color: var(--acid); border: 1px solid var(--acid); cursor: pointer; transition: all 0.25s var(--ease); white-space: nowrap; }
.cookie-btn-accept:hover { background: var(--grad); color: var(--void); }
.cookie-btn-reject { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; padding: 10px 22px; background: transparent; color: var(--muted); border: 1px solid var(--border); cursor: pointer; transition: all 0.25s var(--ease); white-space: nowrap; }
.cookie-btn-reject:hover { color: var(--white); border-color: rgba(255,255,255,0.3); }
.cookie-btn-settings { font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.06em; color: var(--muted); border: none; background: transparent; cursor: pointer; text-decoration: underline; padding: 0; transition: color 0.2s; }
.cookie-btn-settings:hover { color: var(--white); }

/* -- LEGAL MODAL : overlay fixe pour mentions/CGV/privacy.
   opacity:0 + pointer-events:none par défaut, .open = visible.
   .legal-modal-box = slide-up 20px, max-height 80vh avec overflow-y auto.
   Focus trap JS empêche Tab de sortir de la modale -- */
#legal-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(8,10,14,0.92); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
#legal-modal.open { opacity: 1; pointer-events: all; }
.legal-modal-box {
  background: var(--deep); border: 1px solid var(--border);
  max-width: 760px; width: 100%; max-height: 80vh;
  display: flex; flex-direction: column;
  transform: translateY(20px); transition: transform 0.3s ease;
}
#legal-modal.open .legal-modal-box { transform: translateY(0); }
.legal-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 32px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.legal-modal-title { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.legal-modal-close {
  width: 36px; height: 36px; border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s var(--ease); flex-shrink: 0;
}
.legal-modal-close:hover { border-color: var(--acid); color: var(--acid); }
.legal-modal-body {
  padding: 32px; overflow-y: auto; flex: 1;
  font-family: var(--f-mono); font-size: 0.78rem; color: var(--muted); line-height: 1.85;
}
.legal-modal-body h3 { font-family: var(--f-display); font-size: 0.88rem; font-weight: 700; color: var(--white); margin: 24px 0 10px; letter-spacing: -0.01em; }
.legal-modal-body h3:first-child { margin-top: 0; }
.legal-modal-body p { margin-bottom: 12px; }
.legal-modal-body a { color: var(--acid); }
.legal-modal-body strong { color: var(--white); font-weight: 500; }

/* =========
   ANIMATIONS — 3 keyframes réutilisés dans le hero
========= */
/* slideRight : entrée depuis la gauche (hero-eyebrow, headline, sub, actions)
   slideUp : entrée depuis le bas (hero-hl-inner avec delays échelonnés)
   fadeIn : apparition simple (hero-stats) */
@keyframes slideRight { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideUp    { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn     { from{opacity:0} to{opacity:1} }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-l { opacity: 0; transform: translateX(-28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-l.visible { opacity: 1; transform: translateX(0); }

/* =========
   PERFORMANCE — content-visibility pour lazy rendering des sections hors viewport
========= */
/* Mesuré le 23/08/2026 (scripts/mesure-cls-scroll.js) : le CLS est bien à 0 — la croissance
   se produit SOUS le viewport, donc rien de visible ne bouge. Le vrai coût de la valeur
   précédente (`0 500px`) était ailleurs : la hauteur de page passait de 21 661 à 25 407 px
   pendant le parcours (+17%), car 500 px étaient réservés pour des sections de 813 à 3 139 px.
   Conséquence réelle : barre de défilement instable et ancres qui atterrissent à côté tant que
   la section visée n'est pas rendue.
   Le mot-clé `auto` fait mémoriser au navigateur la taille réelle après le premier rendu ;
   1200 px n'est plus qu'une estimation de départ, proche de la médiane mesurée.
   `.how-section` et `.testimonial-section` retirés : ils n'existent nulle part dans le HTML. */
.pain-section, .diff-section, .services-section,
.pack-section, .philosophy-section,
.kpi-bar { content-visibility: auto; contain-intrinsic-size: auto 1200px; }
.orbit, .hero-glow { will-change: transform; }

/* =========
   CARTES SECTEUR · CTA AVIS · PASTILLES SOCIALES  (backlog #4 — 23/08/2026)
=========
   Les 19 attributs `onmouseover`/`onmouseout` du HTML sont remplacés par ces règles. Deux
   raisons : ils répétaient 4 fois la même logique dans le balisage, et tout attribut `on*`
   impose `script-src 'unsafe-inline'` dans la CSP — ils bloquaient donc le durcissement
   ouvert à l'item #2.
   Le style de base était lui aussi en ligne : il fallait le sortir avec, car un attribut
   `style` l'emporte sur une classe. Le laisser aurait obligé à écrire les `:hover` en
   `!important`, c'est-à-dire à nourrir l'item #1 en réglant le #4.
   Gain d'accessibilité au passage : `:focus-visible` donne au clavier le retour visuel que
   les gestionnaires souris ne fournissaient qu'à la souris. */
.card-secteur {
  display: flex; flex-direction: column; gap: 7px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 26px 22px; text-decoration: none;
  transition: border-color .25s, transform .25s;
}
.card-secteur:hover, .card-secteur:focus-visible {
  border-color: rgba(200,240,74,0.4); transform: translateY(-4px);
}
/* Variante mise en avant : bordure et fond acid dès le repos, d'où un survol qui ne
   change que l'élévation (c'est ce que faisait son gestionnaire d'origine). */
.card-secteur--accent {
  background: rgba(200,240,74,0.05);
  border-color: rgba(200,240,74,0.32);
  box-shadow: 0 0 0 1px rgba(200,240,74,0.06);
}
.card-secteur--accent:hover, .card-secteur--accent:focus-visible {
  border-color: rgba(200,240,74,0.32); transform: translateY(-4px);
}

/* ⚠️ Écart corrigé au passage : le style en ligne posait `box-shadow: none` au repos, mais
   `onmouseout` reposait une ombre `0 4px 14px`. Le bouton gardait donc une ombre après le
   premier survol, différente de son état au chargement. L'état initial fait foi. */
.cta-avis {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px;
  background: transparent; color: #C8F04A; border: 1px solid #C8F04A;
  text-decoration: none; font-size: 0.88rem; letter-spacing: 0.04em; font-weight: 600;
  transition: all 0.22s ease; box-shadow: none;
}
.cta-avis:hover, .cta-avis:focus-visible {
  transform: translateY(-2px); box-shadow: 0 6px 22px rgba(200,240,74,0.45);
}

.social-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(200,240,74,0.5);
  background: rgba(200,240,74,0.06); color: #C8F04A;
  text-decoration: none; transition: all 0.22s ease;
}
.social-pastille:hover, .social-pastille:focus-visible {
  border-color: #C8F04A; background: rgba(200,240,74,0.18); color: #080A0E;
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(200,240,74,0.45);
}

/* Focus visible — keyboard accessibility */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
.btn-primary:focus-visible, .btn-ghost:focus-visible, .nav-cta:focus-visible,
.svc-cta:focus-visible, .npb-btn:focus-visible,
.form-submit:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}
img, canvas { display: block; }

/* =========
   RESPONSIVE — 3 breakpoints + prefers-reduced-motion
========= */
/* 1060px : grilles multi-colonnes → 1 colonne, orbite masquée
   768px  : nav-links masqués + burger affiché, hero condensé, phone réduit, curseur natif
   480px  : paddings 16px, tailles clamp() minimales, cookie banner vertical
   reduced-motion : toutes animations/transitions à 0.01ms, canvas masqué, reveals instantanés */
@media (max-width: 1060px) {
  .nerve-inner { grid-template-columns: 1fr; }
  .nerve-slash { display: none; }
  .solution-inner { grid-template-columns: 1fr; }
  .orbit-wrap { display: none; }
  .pack-grid { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .phil-rules { grid-template-columns: 1fr; }
  .kpi-bar { grid-template-columns: 1fr 1fr; }
  .kpi-item { border-bottom: 1px solid var(--border); }
  .contact-block { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  nav { padding: 0 24px; }
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .nav-cta { display: none; }
  .pain-section, .diff-section, .services-section, .how-section, .audit-section, .pack-inner { padding-left: 24px; padding-right: 24px; }
  .pain-grid, .steps-grid { grid-template-columns: 1fr; }
  /* ── Diff table mobile : stack en cartes, on masque le tableau ── */
  .diff-table { display: block; margin-top: 32px; border: none; }
  .diff-table thead { display: none; }
  .diff-table tbody, .diff-table tr { display: block; }
  .diff-table tr { margin-bottom: 20px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .diff-table td { display: block; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 0.85rem; word-break: break-word; }
  .diff-table td:last-child { border-bottom: none; }
  .diff-table .col-label { background: var(--surface); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 10px 16px; }
  .diff-table .col-them::before { content: "Agence classique : "; display: block; font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  .diff-table .col-us { background: rgba(200,240,74,0.04); }
  .diff-table .col-us::before { content: "Master IA : "; display: block; font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acid2); margin-bottom: 6px; }
  .kpi-bar { grid-template-columns: 1fr 1fr; }
  .trust-bar { padding: 20px 24px; gap: 24px; }
  .trust-divider { display: none; }
  .footer-links, .footer-center { display: none; }
  footer { padding: 28px 24px; }
  /* ── Pricing cards mobile ── */
  .svc-card { padding: 28px 20px; }
  .svc-price-note { font-size: 0.66rem; letter-spacing: 0.04em; line-height: 1.55; }
  .pack-pricing { padding: 28px 20px; }
  .pack-price { font-size: clamp(2.2rem, 10vw, 3.4rem); flex-wrap: wrap; justify-content: center; }
  .pack-price-note { font-size: 0.5rem; letter-spacing: 0.04em; line-height: 1.5; text-align: center; }
  .pack-guarantee { font-size: 0.52rem; line-height: 1.5; }
  .pack-title { font-size: clamp(1.8rem, 7vw, 3rem); }
  .pack-sub { font-size: 0.88rem; }

  /* ── NERVE mobile layout ── */
  .nerve-section { overflow: hidden !important; padding: 0 !important; }
  .nerve-inner { display: flex !important; flex-direction: column !important; padding: 60px 16px !important; gap: 40px !important; overflow: hidden !important; }
  /* Text column: full width */
  .nerve-left { width: 100% !important; max-width: 100% !important; overflow-wrap: break-word; word-break: break-word; padding: 0 !important; }
  .nerve-title { font-size: clamp(2.4rem, 10vw, 3.5rem) !important; }
  .nerve-subtitle { font-size: clamp(1rem, 4vw, 1.3rem) !important; }
  .nerve-desc { max-width: 100% !important; }
  .nerve-pbar { flex-direction: column !important; text-align: center; gap: 16px !important; padding: 16px !important; }
  .npb-btn { width: 100% !important; text-align: center; display: block !important; }
  /* Phone column: centered, alone */
  .nerve-right { width: 100% !important; max-width: 100% !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
  .float-pill { display: none !important; }
  .phone-glow { display: none !important; }
  .phone-wrap { max-width: 300px !important; width: 100% !important; margin: 0 auto !important; transform: none !important; display: block !important; }
  .phone-frame { width: 100% !important; max-width: 300px !important; min-height: 480px !important; height: auto !important; border-radius: 36px !important; padding: 9px !important; margin: 0 auto; }
  .phone-screen { border-radius: 28px !important; overflow: hidden !important; }
  .phone-notch { padding: 7px 0 3px; }
  .phone-notch-bar { width: 84px; height: 22px; border-radius: 11px; }
  .phone-notch-bar::before { width: 6px; height: 6px; right: 19px; }
  .phone-status { padding: 4px 16px 6px; font-size: 0.4rem; }
  .phone-status-bat { width: 15px; height: 7px; border-width: 1px; }
  .phone-home { padding: 9px 0 7px; }
  .phone-home-bar { width: 90px; height: 4px; }
  .phone-content { padding: 2px 12px 12px; }
  .phone-content .cm-hdr { padding-bottom: 9px; margin-bottom: 9px; gap: 7px; }
  .phone-content .cm-logo-box { width: 24px; height: 24px; font-size: 0.7rem; border-radius: 5px; }
  .phone-content .cm-hdr-title { font-size: 0.64rem; }
  .phone-content .cm-hdr-sub { font-size: 0.34rem; }
  .phone-content .cm-live { font-size: 0.34rem; }
  .phone-content .cm-ldot { width: 4px; height: 4px; }
  .phone-content .cm-kpi-grid { gap: 5px; margin-bottom: 8px; }
  .phone-content .cm-kpi { padding: 7px 9px; border-radius: 7px; }
  .phone-content .cm-k-lbl { font-size: 0.34rem; }
  .phone-content .cm-k-val.xl { font-size: 1.15rem; }
  .phone-content .cm-k-val.md { font-size: 0.85rem; }
  .phone-content .cm-k-sub { font-size: 0.32rem; }
  .phone-content .cm-row { padding: 5px 0; gap: 6px; }
  .phone-content .cm-av { width: 21px; height: 21px; font-size: 0.42rem; border-radius: 4px; }
  .phone-content .cm-rname { font-size: 0.52rem; }
  .phone-content .cm-rdet { font-size: 0.34rem; }
  .phone-content .cm-badge { font-size: 0.32rem; padding: 2px 5px; }
  .phone-content .cm-foot { margin-top: 7px; padding-top: 7px; font-size: 0.32rem; }

  #cursor, #cursor-ring { display: none; }
  body { cursor: auto; }
  #cookie-banner { padding: 20px 24px; }
  /* Remonté de 20 à 110 px le 23/08/2026. Mesuré au CDP : en 414×896 le bouton occupait
     814→868 et le CTA du hero 801→865 — il en recouvrait le bord droit sur 44 px, si bien
     qu'un appui à droite de « Audit gratuit » ouvrait WhatsApp au lieu du formulaire.
     ⚠️ Corrigé ICI et pas dans une règle ajoutée plus haut : ce bloc est plus bas dans la
     feuille, il l'aurait emporté à spécificité égale. C'est l'anti-pattern de cascade
     décrit dans design.md — la valeur se change à l'endroit qui gagne déjà, on n'empile
     pas une règle rivale. */
  #whatsapp-float { bottom: 110px; right: 20px; }
  .legal-modal-body { padding: 20px; }
  .legal-modal-header { padding: 16px 20px; }
}
@media (max-width: 480px) {
  .hero-sub { font-size: 0.92rem; }
  .pain-section, .diff-section, .services-section, .how-section,
  .audit-section, .pack-inner, .nerve-inner, .philosophy-section { padding-left: 16px; padding-right: 16px; }
  nav { padding: 0 16px; height: 56px; }
  footer { padding: 20px 16px; }
  .trust-bar { padding: 16px; gap: 16px; }
  .section-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .kpi-bar { grid-template-columns: 1fr 1fr; }
  .kpi-n { font-size: 1.8rem; }
  .kpi-item { padding: 24px 16px; }
  /* Compacte le 27/08/2026. Mesure CDP : le bandeau occupait 218 px, soit 33 % d'un ecran
     375x667 — un tiers du premier ecran mange par le bandeau RGPD. Compaction CSS seule :
     le texte legal et les 3 boutons (parametrer/refuser/accepter) sont INCHANGES.
     Modifie ICI car c'est la regle qui l'emporte deja a ces largeurs (le bloc 768px est
     plus haut dans la feuille) — cf. design.md, on ne empile pas de regle rivale. */
  #cookie-banner { padding: 10px 14px; flex-direction: column; gap: 8px; }
  .cookie-text { font-size: 0.7rem; line-height: 1.4; }
  .cookie-actions { gap: 6px; width: 100%; flex-wrap: nowrap; }
  .cookie-actions button { flex: 1 1 0; padding: 11px 4px; font-size: 0.62rem; letter-spacing: 0.03em; }
  /* Pricing mobile 480 */
  .svc-card { padding: 24px 16px; }
  .svc-name { font-size: 1.05rem; }
  .svc-price-note { font-size: 0.62rem; }
  .pack-pricing { padding: 24px 16px; }
  .pack-price { font-size: 2rem; }
  .pack-title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  /* V21k mobile fixes */
  .existing-section { padding: 60px 16px 48px !important; }
  .existing-card { padding: 24px 18px !important; }
  .process-tl { padding: 80px 20px !important; }
  .faq-section { padding: 60px 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ticker { animation: none; }
  .orbit { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .reveal-l { opacity: 1; transform: none; }
  /* Backlog #7 — le curseur personnalisé est un élément qui poursuit le pointeur en
     permanence : c'est exactement le type de mouvement que ce réglage demande d'éviter.
     `display: none` plutôt qu'une transition raccourcie, car le mouvement vient du JS
     (home.js écrit left/top à chaque déplacement) et non d'une animation CSS. */
  #cursor, #cursor-ring { display: none; }
  /* Les survols conservent leur changement de couleur, mais plus leur élévation. */
  .card-secteur:hover, .card-secteur:focus-visible,
  .card-secteur--accent:hover, .card-secteur--accent:focus-visible,
  .cta-avis:hover, .cta-avis:focus-visible,
  .social-pastille:hover, .social-pastille:focus-visible { transform: none; }
  .phone-wrap { transform: none !important; }
}

/* ===== .hero-v2 — scoped styles (refonte 2026-04-19) ===== */
.hero-v2 {
  position: relative;
  background: #080A0E;
  color: #E8ECF2;
  padding: 96px 48px 64px;
  overflow: hidden;
  font-family: 'Manrope', system-ui, sans-serif;
}
.hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(200, 240, 74, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(74, 240, 200, 0.06), transparent 60%);
  pointer-events: none;
}
.hero-v2__inner { position: relative; max-width: 1200px; margin: 0 auto; }
.hero-v2__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  font-family: 'DM Mono', monospace; font-size: 12px;
  letter-spacing: 0.04em;
  color: #C8F04A; margin-bottom: 40px;
  max-width: 100%;
}
.hero-v2__eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: #C8F04A; box-shadow: 0 0 12px #C8F04A;
  animation: heroV2Blink 1.5s step-end infinite;
  flex-shrink: 0;
}
@keyframes heroV2Blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.hero-v2__h1 {
  font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: clamp(35px, 4.2vw, 62px); line-height: 1.05;
  letter-spacing: -0.02em; color: #FFFFFF;
  margin: 0 0 26px; max-width: 26ch; text-wrap: balance;
}
.hero-v2__h1 em { font-style: normal; color: #C8F04A; }
.hero-v2__sub {
  font-size: 18.7px; line-height: 1.55; color: #A8B0BD;
  max-width: 58ch; margin: 0 0 44px; font-weight: 400;
}
.hero-v2__sub--claim { color: #FFFFFF; font-weight: 500; margin-bottom: 16px; }
.hero-v2__sub--description { margin-bottom: 16px; }
.hero-v2__sub--differenciants { color: #FFFFFF; margin-bottom: 48px; }
.hero-v2__sub--differenciants strong { font-weight: 700; }
.hero-v2__ctas { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero-v2__cta-primary {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 32px; font-family: 'Manrope', sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: 0.02em;
  color: var(--acid); background: transparent;
  border: 1px solid var(--acid); border-radius: 2px; cursor: pointer; text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  box-shadow: 0 0 0 rgba(200, 240, 74, 0);
}
.hero-v2__cta-primary:hover { transform: translateY(-1px); background: linear-gradient(135deg, #C8F04A 0%, #4AF0C8 100%); color: #080A0E; box-shadow: 0 8px 24px rgba(200, 240, 74, 0.25); }
.hero-v2__cta-primary svg { transition: transform 0.2s ease; }
.hero-v2__cta-primary:hover svg { transform: translateX(3px); }
.hero-v2__cta-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 28px; font-family: 'Manrope', sans-serif;
  font-weight: 500; font-size: 15px; color: #FFFFFF;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 2px; text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.hero-v2__cta-secondary:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.03); }
.hero-v2__cta-wa {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 28px;
  font-family: 'Manrope', sans-serif; font-weight: 600;
  font-size: 15px; color: var(--acid);
  background: transparent; border: 1px solid var(--acid); border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 0 0 rgba(200, 240, 74, 0);
}
.hero-v2__cta-wa:hover { background: rgba(200,240,74,0.12); transform: translateY(-1px); }
.hero-v2__cta-wa svg { flex-shrink: 0; fill: #C8F04A; }
.hero-v2__signature-text { font-size: 13px; line-height: 1.5; color: #A8B0BD; }
.hero-v2__signature-text strong { color: #E8ECF2; font-weight: 600; display: block; margin-bottom: 2px; }
.hero-v2__signature-text span { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; color: #6C7688; }
@media (max-width: 768px) {
  /* CTA remonte juste apres le H1 le 27/08/2026 — reordonnancement CSS, AUCUNE copie
     retiree ni raccourcie, desktop inchange. Mesure CDP avant : le CTA tombait a 888 px
     sur un ecran de 667 (221 px sous la ligne de flottaison) car il arrivait apres 464 px
     de prose en 3 paragraphes. Le texte reste integralement present, sous le CTA. */
  .hero-v2 { padding: 48px 24px 40px; }
  .hero-v2__inner { display: flex; flex-direction: column; }
  .hero-v2__eyebrow { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 24px; order: 1; }
  .hero-v2__h1 { margin-bottom: 22px; order: 2; }
  .hero-v2__ctas { order: 3; margin-bottom: 28px; }
  .hero-v2__sub--claim { order: 4; }
  .hero-v2__sub--description { order: 5; }
  .hero-v2__sub--differenciants { order: 6; margin-bottom: 0; }
  .hero-v2__ctas { flex-direction: column; align-items: stretch; }
  .hero-v2__cta-primary, .hero-v2__cta-secondary, .hero-v2__cta-wa { justify-content: center; }
}

/* ===== .proof-gb — scoped styles (refonte 2026-04-19, v2 liste simple sans photo) ===== */
.proof-gb { background: var(--void); color: #E8ECF2; padding: 120px 48px; font-family: 'Manrope', system-ui, sans-serif; }
.proof-gb__inner { max-width: 800px; margin: 0 auto; }
.proof-gb__section-label {
  font-family: 'DM Mono', monospace; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 32px; /* WCAG : #6C7688 4.2:1 → #A8AFBE */
  display: flex; align-items: center; gap: 16px;
}
.proof-gb__section-label::before { content: ''; width: 32px; height: 1px; background: #C8F04A; }
.proof-gb__h2 {
  font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: clamp(31px, 3.5vw, 46px); line-height: 1.1;
  letter-spacing: -0.02em; color: #FFFFFF;
  margin: 0 0 56px; max-width: 24ch; text-wrap: balance;
}
.proof-gb__list { display: flex; flex-direction: column; gap: 32px; }
.proof-gb__item { padding: 28px 0; border-top: 1px solid #232832; }
.proof-gb__item:last-child { border-bottom: 1px solid #232832; }
.proof-gb__item-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  font-family: 'Syne', sans-serif; font-weight: 600;
  font-size: 22px; color: #FFFFFF; margin-bottom: 6px;
}
.proof-gb__item-loc { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.proof-gb__item-desc { font-size: 15px; line-height: 1.55; color: #A8B0BD; margin: 0 0 14px; }
.proof-gb__quote { font-size: 14.5px; line-height: 1.6; color: #C9CFDA; font-style: italic; border-left: 2px solid #C8F04A; padding: 2px 0 2px 14px; margin: 0 0 14px; }
.proof-gb__quote-src { display: block; margin-top: 6px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; color: #F5C518; font-style: normal; }
.proof-gb__item-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Mono', monospace; font-size: 12px;
  letter-spacing: 0.08em; color: #C8F04A; text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid rgba(200, 240, 74, 0.35);
  transition: border-color 0.2s ease;
}
.proof-gb__item-link:hover { border-color: #C8F04A; }
.proof-gb__badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.proof-gb__badge::before { content: ''; width: 8px; height: 1px; background: var(--muted); }
@media (max-width: 900px) {
  .proof-gb { padding: 80px 24px; }
  .proof-gb__h2 { margin-bottom: 40px; }
}

/* ============================================================
   HARMONISATION ACID (refonte 2026-04-19)
   Le gradient acid→teal devient acid #C8F04A plein partout.
   Textes = acid plein. Boutons = fond acid + texte sombre.
   ============================================================ */

/* Redéfinition de la variable gradient en couleur solide acid */
:root {
  --grad: #C8F04A !important;
}

/* TEXTES : gradient → acid plein (toutes classes qui utilisaient le clip-text) */
.section-title span,
.trust-num,
.pack-title span, .audit-title em,
.npb-amt, .svc-price,
.footer-logo span,
.rule-num, .pack-num, .step-num,
.svc-tag.nt, .ticker-item strong,
.nav-logo-dot,
blockquote em {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #C8F04A !important;
  background-clip: initial !important;
  color: #C8F04A !important;
}

/* BOUTONS : fond noir, texte lime, bord lime (demande CEO 20/06) — remplissage lime au survol */
.btn-primary,
.nav-cta,
.svc-cta,
.npb-btn,
.audit-submit,
.cookie-btn-accept,
.hero-v2__cta-primary {
  background: transparent !important;
  color: var(--acid) !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--acid) !important;
  background-clip: initial !important;
  border: 1px solid var(--acid) !important;
}
.btn-primary:hover, .nav-cta:hover, .svc-cta:hover, .npb-btn:hover,
.audit-submit:hover, .cookie-btn-accept:hover, .hero-v2__cta-primary:hover {
  background: var(--grad) !important;
  color: var(--void) !important;
  -webkit-text-fill-color: var(--void) !important;
  box-shadow: 0 8px 24px rgba(200, 240, 74, 0.3) !important;
}

/* CTA "Voir les 3 paliers" : variante inversée fond noir / texte jaune (demande CEO 20/06) */
.hero-v2__cta-outline, .hero-v2__cta-outline:hover {
  background: #080A0E !important;
  color: #C8F04A !important;
  -webkit-text-fill-color: #C8F04A !important;
  border: 1px solid #C8F04A !important;
  border-color: #C8F04A !important;
}
.hero-v2__cta-outline:hover {
  background: #11160C !important;
  box-shadow: 0 8px 24px rgba(200, 240, 74, 0.18) !important;
}

/* SVG dans boutons : lime sur fond noir (ghost) ; noir sur fond lime au survol */
.hero-v2__cta-primary svg,
.btn-primary svg, .nav-cta svg,
.npb-btn svg, .audit-submit svg {
  color: var(--acid) !important;
  fill: var(--acid) !important;
}
.hero-v2__cta-primary:hover svg,
.btn-primary:hover svg, .nav-cta:hover svg,
.npb-btn:hover svg, .audit-submit:hover svg {
  color: var(--void) !important;
  fill: var(--void) !important;
}

/* gr-reviews (avis Google statiques V17) — bloc retiré V21a (section non utilisée depuis V19) */

/* ===== .process-tl — scoped styles (refonte 2026-04-19) ===== */
.process-tl { background: #F4F1EA; color: #080A0E; padding: 120px 48px; font-family: 'Manrope', system-ui, sans-serif; }
.process-tl__inner { max-width: 1280px; margin: 0 auto; }
.process-tl__section-label {
  font-family: 'DM Mono', monospace; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #6C5A2E; margin-bottom: 40px;
  display: flex; align-items: center; gap: 16px;
}
.process-tl__section-label::before { content: ''; width: 32px; height: 1px; background: #C8923A; }
.process-tl__h2 {
  font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: clamp(33px, 4vw, 55px); line-height: 1.05;
  letter-spacing: -0.02em; color: #080A0E;
  margin: 0 0 24px; max-width: 20ch; text-wrap: balance;
}
.process-tl__intro { font-family: 'Manrope', sans-serif; font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.6; color: #3A3F4A; max-width: 56ch; margin: 0 0 96px; }
.process-tl__track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.process-tl__track::before {
  content: ''; position: absolute; top: 28px; left: 28px; right: 28px; height: 1px;
  background: repeating-linear-gradient(to right, #C8923A 0, #C8923A 4px, transparent 4px, transparent 10px);
  opacity: 0.4;
}
.process-tl__step { position: relative; display: flex; flex-direction: column; gap: 24px; }
.process-tl__marker {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  background: #F4F1EA; border: 1.5px solid #C8923A;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 20px;
  color: #C8923A; letter-spacing: -0.02em; z-index: 1; transition: all 0.3s ease;
}
.process-tl__step--highlight .process-tl__marker {
  background: #C8F04A; border-color: #C8F04A; color: #080A0E;
  box-shadow: 0 0 0 6px rgba(200, 240, 74, 0.18);
}
.process-tl__step-label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #6C5A2E; margin-bottom: 4px; }
.process-tl__step-title { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: #080A0E; margin: 0 0 16px; text-wrap: balance; }
.process-tl__step-meta { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.05em; color: #6C5A2E; line-height: 1.5; margin-bottom: 20px; }
.process-tl__deliverable { padding-top: 16px; border-top: 1px solid rgba(8, 10, 14, 0.12); font-size: 14px; line-height: 1.5; color: #3A3F4A; }
.process-tl__deliverable strong { display: block; font-family: 'DM Mono', monospace; font-weight: 500; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #6C5A2E; margin-bottom: 6px; }
.process-tl__footer {
  margin-top: 80px; padding-top: 32px;
  border-top: 1px solid rgba(8, 10, 14, 0.1);
  font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
  color: #6C5A2E; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
@media (max-width: 900px) {
  .process-tl { padding: 80px 24px; }
  .process-tl__track { grid-template-columns: 1fr; gap: 48px; }
  .process-tl__track::before {
    top: 28px; bottom: 28px; left: 28px; right: auto;
    width: 1px; height: auto;
    background: repeating-linear-gradient(to bottom, #C8923A 0, #C8923A 4px, transparent 4px, transparent 10px);
  }
}

/* =========================================================
   V20a (2026-04-27) — SVG ICON BADGES Lucide-style
   Palette : stroke acid #C8F04A + accent teal #4AF0C8 (3 héro duotone).
   Override les anciennes règles emoji (font-size) sur les containers.
========================================================= */

/* Pain cards 01/02/03 — badge gradient acid → teal */
.pain-icon {
  width: 48px; height: 48px;
  font-size: 0; /* override emoji size */
  margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(200,240,74,0.20), rgba(74,240,200,0.12));
  border: 1px solid rgba(200,240,74,0.30);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(200,240,74,0.06);
}
.pain-icon svg { width: 56%; height: 56%; }

/* NERVE features — badge compact aligné à gauche */
.nf-ico {
  width: 34px; height: 34px; flex-shrink: 0;
  font-size: 0; /* override emoji size */
  border: 1px solid rgba(200,240,74,0.25);
  background: linear-gradient(135deg, rgba(200,240,74,0.18), rgba(74,240,200,0.10));
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.nf-ico svg { width: 60%; height: 60%; }

/* Orbit nodes — bulles gravitationnelles avec gradient acid */
.orbit-node {
  background: linear-gradient(135deg, rgba(200,240,74,0.18), rgba(74,240,200,0.12));
  border: 1px solid rgba(200,240,74,0.32);
  font-size: 0; /* override emoji size */
}
.orbit-node svg { width: 55%; height: 55%; }

/* Orbit centre — bulle "brain" duotone (plus grande, glow plus prononcé) */
.orbit-center {
  font-size: 0; /* override emoji size */
  background: radial-gradient(circle at 30% 30%, rgba(200,240,74,0.30), rgba(74,240,200,0.18) 60%, transparent 80%) !important;
  border: 1px solid rgba(200,240,74,0.45) !important;
  box-shadow: 0 0 32px rgba(200,240,74,0.15), inset 0 0 18px rgba(74,240,200,0.10);
  display: flex; align-items: center; justify-content: center;
}
.orbit-center svg { width: 60%; height: 60%; }

/* Contact channel icons (WhatsApp, Email) — inline avec texte */
.contact-channel-icon {
  width: 28px; height: 28px;
  font-size: 0; /* override emoji size */
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(200,240,74,0.15), rgba(74,240,200,0.08));
  border: 1px solid rgba(200,240,74,0.22);
  border-radius: 6px;
}
.contact-channel-icon svg { width: 65%; height: 65%; }

/* Pack badge "flame" + Site existant "plug" — pills inline */
.pack-badge svg, .existing-pill svg {
  width: 14px; height: 14px;
  vertical-align: -2px;
  margin-right: 6px;
  display: inline-block;
}
.pack-badge svg { stroke: #C8F04A; }
.existing-pill svg { stroke: #4AF0C8; }

/* Cookie banner icon */
.cookie-icon {
  width: 18px; height: 18px;
  display: inline-block; vertical-align: -3px;
  margin-right: 8px;
}
.cookie-icon svg { width: 100%; height: 100%; }