/* ═══════════════════════════════════════
   trackcvrt — landing styles
   built on the trackcvrt Design System
   ═══════════════════════════════════════ */

:root {
  /* Neutres */
  --ink-900:#0A0A0A;
  --ink-700:#2B2B2B;
  --ink-500:#6B6B70;
  --ink-300:#B5B5BA;
  --ink-200:#E4E4E7;
  --ink-100:#F1F1F3;
  --ink-50: #FAFAFA;
  --paper:  #FFFFFF;

  /* Accent lime */
  --lime-500:#C5F33B;
  --lime-400:#D4F866;
  --lime-600:#A3D420;
  --lime-100:#EEFBC6;

  /* Semantic */
  --success-500:#16A34A;
  --success-600:#15803D;
  --warn-500:#F59E0B;
  --warn-700:#B45309;
  --danger-500:#EF4444;
  --danger-700:#B91C1C;
  --info-500:#3B82F6;

  /* Dark cards */
  --dark-900:#0A0A0A;
  --dark-800:#171717;
  --dark-border:#262626;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Shadows */
  --shadow-float: 0 24px 48px -12px rgb(0 0 0 / 0.12);
  --shadow-card:  0 1px 3px rgb(0 0 0 / 0.06);
  --shadow-pop:   0 8px 24px -4px rgb(0 0 0 / 0.12);
}

*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink-50);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11','ss01','ss03';
}
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-feature-settings: normal; }

/* ───────── page shell ─────────
   Full bleed : la page remplit tout le viewport, plus de "carte flottante"
   sur grand écran (le pattern d'origine plafonnait à 1440 px et centrait,
   créant des marges grises au-delà). overflow: hidden conservé pour
   contenir les éléments décoratifs (hero-glow notamment) qui débordent. */
.page {
  max-width: 100%;
  margin: 0;
  background: var(--paper);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* ───────── topbar (fixed + blur fort, sans logo-mark) ───────── */
.topbar {
  display:flex; align-items:center; gap:16px;
  padding: 14px 32px;
  border-bottom: 1px solid rgba(228, 228, 231, 0.6);
  background: rgba(255,255,255,0.72);
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
/* Compensation du body pour éviter que le hero passe sous la topbar */
.page { padding-top: 64px; }
@media (max-width: 700px) { .page { padding-top: 56px; } }

.logo { font-weight:700; letter-spacing:-0.02em; font-size:18px; text-decoration:none; color: var(--ink-900); }

.topbar nav { display:flex; gap:4px; margin-left:24px; }
.nav-pill {
  padding:8px 16px; border-radius:999px; font-size:13px; font-weight:500;
  color: var(--ink-500); cursor:pointer; border:none; background:transparent;
  text-decoration:none; transition: background .15s, color .15s; white-space:nowrap;
}
.nav-pill:hover { background: var(--ink-100); color: var(--ink-900); }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }

/* ── Burger mobile (checkbox hack · zéro JS → marche aussi sur les pages légales
   statiques). Caché en desktop. ── */
.burger { display: none; }
.burger span {
  display: block; width: 20px; height: 2px;
  background: var(--ink-900); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

@media (max-width: 1000px) {
  /* La barre peut wrapper : nav + CTA s'empilent sous la 1ʳᵉ ligne (logo + burger) */
  .topbar { flex-wrap: wrap; }
  .burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 10px; margin-left: auto;
    border: 1px solid var(--ink-200); border-radius: 10px;
    background: var(--paper); cursor: pointer;
  }
  /* Fermé : nav et CTA hors de la barre */
  .topbar nav,
  .topbar-right { display: none; }
  /* Ouvert : nav + CTA en pleine largeur sous la barre */
  .nav-toggle:checked ~ nav,
  .nav-toggle:checked ~ .topbar-right {
    display: flex; flex-basis: 100%; margin-left: 0;
  }
  .nav-toggle:checked ~ nav {
    flex-direction: column; gap: 2px; order: 2;
    margin-top: 6px; padding-top: 12px;
    border-top: 1px solid var(--ink-200);
  }
  .nav-toggle:checked ~ nav .nav-pill { padding: 12px 4px; font-size: 15px; }
  .nav-toggle:checked ~ .topbar-right {
    flex-direction: column; align-items: stretch; gap: 8px; order: 3;
    padding-bottom: 4px;
  }
  .nav-toggle:checked ~ .topbar-right .btn { width: 100%; justify-content: center; }
  /* Animation burger → croix */
  .nav-toggle:checked ~ .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ───────── buttons ───────── */
.btn {
  border:none; cursor:pointer; font-family: var(--font-sans); font-weight:600; font-size:14px;
  border-radius:999px; padding: 12px 22px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn .arr { font-family: var(--font-mono); font-weight:500; }
.btn-primary { background: var(--lime-500); color: var(--ink-900); }
.btn-primary:hover { background: var(--lime-400); }
.btn-secondary { background: var(--ink-900); color:white; }
.btn-secondary:hover { background: var(--ink-700); }
.btn-ghost { background: var(--paper); color: var(--ink-900); border:1px solid var(--ink-200); }
.btn-ghost:hover { background: var(--ink-100); }
.btn-ghost-dark { background: transparent; color: rgba(255,255,255,0.92); border:1px solid rgba(255,255,255,0.18); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.08); }
.btn-lg { padding: 14px 28px; font-size:15px; }
.btn-sm { padding: 8px 16px; font-size:12px; }

/* ───────── eyebrow / sec heads ───────── */
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 11px; font-weight:600; color: var(--ink-500);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before { content:""; width:6px; height:6px; border-radius:999px; background: var(--lime-500); box-shadow: 0 0 0 4px rgba(197,243,59,0.25); }
.eyebrow.on-dark { color: rgba(255,255,255,0.7); }

section.sec {
  padding: 80px 64px;
  position: relative;
}
section.sec.tight { padding-top: 56px; padding-bottom: 56px; }
section.sec.dark { background: var(--dark-900); color:white; }
section.sec.dark h2, section.sec.dark h3 { color: white; }

.sec-head {
  display:flex; flex-direction: column; gap: 28px; margin-bottom: 64px; max-width: 100%;
}
.sec-head > * { min-width: 0; }
.sec-num { font-family: var(--font-mono); font-size:13px; color: var(--ink-500); display:flex; align-items:center; gap:10px; }
.sec-num::before { content:""; width:24px; height:1px; background: var(--ink-300); }
section.sec.dark .sec-num { color: rgba(255,255,255,0.5); }
section.sec.dark .sec-num::before { background: rgba(255,255,255,0.2); }

/* Mobile-first : min réduit à 30px pour éviter overflow à 320px (clamp originel min 42px). */
.sec-title { font-size: clamp(30px, 5.2vw + 0.5rem, 72px); font-weight:700; letter-spacing:-0.03em; line-height: 1.05; margin: 16px 0 0; max-width: none; text-wrap: balance; }
.sec-desc { font-size: 18px; color: var(--ink-700); line-height:1.55; max-width: 64ch; }
section.sec.dark .sec-desc { color: rgba(255,255,255,0.7); }
.sec-desc p + p { margin-top: 12px; }

@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; gap: 16px; }
  section.sec { padding: 56px 24px; }
}

/* ───────── hero (sec 1) · dark centered + funnel card ───────── */
.hero {
  background: var(--ink-900);
  color: white;
  padding: 80px 64px 0;
  position: relative;
  overflow: hidden;
}
.hero-glow {
  position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%);
  width: 1100px; height: 700px;
  background: radial-gradient(ellipse at center, rgba(197,243,59,0.18), transparent 60%);
  pointer-events: none; z-index: 0;
}
.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 1200px; margin: 0 auto; }

.hero h1 {
  /* Mobile-first : min réduit à 34px pour rester lisible et sans débord à 320px
     (clamp originel min 52px débordait avec les <br/> imposés du markup). */
  font-size: clamp(34px, 6vw + 0.75rem, 96px);
  line-height: 1.02; font-weight: 900;
  letter-spacing: -0.03em; margin: 24px 0 0; color: white;
  text-wrap: balance;
}
.hero h1 .acid {
  background: var(--lime-500); color: var(--ink-900);
  padding: 0 14px; border-radius: 12px;
  display: inline-block; transform: rotate(-1.5deg);
  box-decoration-break: clone;
}
.hero-lead {
  font-size: 19px; color: rgba(255,255,255,0.7);
  max-width: 64ch; margin: 28px auto 0; line-height: 1.55;
  text-wrap: pretty;
}
.hero-ctas { display:flex; gap: 12px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.hero-meta-row { display:flex; gap: 22px; justify-content: center; margin-top: 22px; color: rgba(255,255,255,0.45); font: 600 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; flex-wrap: wrap; }
.hero-meta-row span { display:inline-flex; align-items: center; gap: 8px; }
.hero-meta-row span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime-500); box-shadow: 0 0 10px var(--lime-500); }

/* ── hero · capture d'écran produit · pleine largeur du stage,
   border-radius léger, ombre + ring lime subtil pour le sortir du fond hero ── */
.hero-screenshot {
  display: block;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  height: auto;
  border-radius: 18px 18px 0 0;
  /* Glow blanc diffus tout autour de l'image (couche large + couche serrée)
     + ombre noire pour la profondeur + ring fin blanc pour la séparer du fond hero noir. */
  box-shadow:
    0 0 200px 20px rgba(255, 255, 255, 0.10),
    0 0 80px 0    rgba(255, 255, 255, 0.18),
    0 30px 80px -20px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.10);
}
@media (max-width: 720px) {
  .hero-screenshot { border-radius: 12px 12px 0 0; }
}

/* ── hero funnel card ── */
.funnel-stage {
  margin: 80px auto -1px;
  max-width: 1180px;
  padding: 0 24px;
  position: relative;
}

/* ─── Effet flottant du screenshot · DESKTOP UNIQUEMENT (≥901px) ───
   Le screenshot déborde sous le hero et flotte sur la section claire. Volontairement
   limité au desktop : sur mobile/tablette (≤900px) on garde le rendu d'origine
   (screenshot flush au bas du hero, coins bas carrés). Mécanisme : flow-root sur
   .hero-inner pour que la marge négative raccourcisse RÉELLEMENT le hero (sinon elle
   fuit par margin-collapse) + overflow visible + z-index pour passer l'image au-dessus
   de la section suivante. */
@media (min-width: 901px) {
  .hero { overflow: visible; z-index: 2; }
  .hero-inner { display: flow-root; }
  .hero-screenshot {
    border-radius: 18px;            /* tous les coins arrondis → carte qui flotte */
    box-shadow:
      0 40px 90px -20px rgba(0, 0, 0, 0.45),
      0 12px 32px -12px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(255, 255, 255, 0.10);
  }
  /* -299px ≈ noir qui s'arrête au niveau de la ligne « 6 étapes » (~53% de l'image).
     #probleme padding-top = débord (299) + ~105px d'air avant la 2ᵉ section. */
  .funnel-stage { margin-bottom: -299px; z-index: 2; }
  #probleme { padding-top: 404px; }
}
.funnel-card {
  background: var(--dark-800);
  border: 1px solid var(--dark-border);
  border-radius: 24px 24px 0 0;
  border-bottom: 0;
  padding: 22px 24px 28px;
  box-shadow: 0 -40px 80px -40px rgba(197,243,59,0.25);
}
.funnel-head { display:flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--dark-border); }
.funnel-head-l { display:flex; gap: 12px; align-items: center; color: rgba(255,255,255,0.55); font-size: 12px; }
.funnel-head-dots { display:flex; gap: 6px; }
.funnel-head-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--dark-border); display: block; }
.funnel-head-l .mono { font-size: 12px; }
.funnel-head-r { font-size: 11px; color: var(--lime-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }

.funnel-grid { display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; padding-top: 22px; }
@media (max-width: 900px) { .funnel-grid { grid-template-columns: 1fr; } }

.funnel-steps { display:flex; flex-direction: column; gap: 10px; }
.fstep {
  display:grid; grid-template-columns: 1fr 1.2fr 80px; gap: 14px; align-items: center;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--dark-border);
  border-radius: 14px;
}
.fstep small { color: rgba(255,255,255,0.6); font: 600 11px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fbar { height: 8px; background: var(--dark-border); border-radius: 999px; overflow: hidden; }
.fbar i { display: block; height: 100%; background: rgba(255,255,255,0.5); border-radius: 999px; }
.fnum { text-align: right; font: 700 14px/1 var(--font-mono); color: white; font-variant-numeric: tabular-nums; }
.fstep.broken { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.06); }
.fstep.broken small { color: #FCA5A5; }
.fstep.broken .fbar i { background: var(--danger-500); }
.fstep.broken .fnum { color: var(--danger-500); }
.leak-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(239,68,68,0.18); color: #FCA5A5; font: 700 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }

.funnel-side { display:flex; flex-direction: column; gap: 10px; }
.visit-card {
  background: rgba(197,243,59,0.08);
  border: 1px solid rgba(197,243,59,0.35);
  border-radius: 14px; padding: 14px 16px;
  position: relative; overflow: hidden;
}
.visit-card::after {
  content:""; position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(197,243,59,0.4), transparent 60%);
  pointer-events: none;
}
.visit-card-head { display:flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; z-index: 1; }
.visit-row { display:flex; align-items: center; gap: 10px; font-size: 12px; }
.visit-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--lime-500); box-shadow: 0 0 14px var(--lime-500); }
.visit-id { color: rgba(255,255,255,0.7); font-size: 12px; }
.visit-src { font-size: 11px; color: rgba(255,255,255,0.5); }
.visit-body { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.5; position: relative; z-index: 1; }
.visit-body b { color: var(--lime-500); font-weight: 600; }

.visit-event {
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--dark-border);
  border-radius: 10px;
  font: 600 12px/1 var(--font-mono);
  color: rgba(255,255,255,0.6);
  display:flex; justify-content: space-between; gap: 8px; align-items: center;
}
.visit-event b { color: white; font-weight: 600; }
.visit-event.alert {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.3);
  color: #FCA5A5;
}
.visit-event.alert b { color: #FCA5A5; }

@media (max-width: 1000px) {
  .hero { padding: 56px 24px 0; }
  .funnel-stage { padding: 0; }
  .funnel-card { padding: 18px; }
}

/* ── hero · kanban des fuites (V3) ── */
.p3-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 22px;
}
/* Section "02 · Sous le capot" · importée de V1, adaptée au DS V2.
   Terminal live (gauche, dark) + 9 cards capacités (droite, light).
   Animation séquentielle des lignes du terminal (fade-in + slide-up cascade). */
.lh-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 1000px) { .lh-grid { grid-template-columns: 1fr; } }

/* ─── Terminal live (gauche) ─── */
.lh-terminal {
  background: var(--ink-900);
  border: 1px solid var(--ink-900);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.4);
}
.lh-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid var(--dark-border);
}
.lh-lights { display: flex; gap: 6px; }
.lh-lights i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dark-border);
}
.lh-url {
  flex: 1;
  font: 500 11px/1 var(--font-mono);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}
.lh-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 10px/1 var(--font-mono);
  color: var(--lime-500);
  letter-spacing: 0.1em;
}
.lh-live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime-500);
  box-shadow: 0 0 8px var(--lime-500);
  animation: lhLivePulse 1.6s ease-in-out infinite;
}
@keyframes lhLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}
.lh-body {
  flex: 1;
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
  overflow: hidden;
}
.lh-prompt {
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}
.lh-prompt .g { color: var(--lime-500); }

/* Lignes événements · animation séquentielle (cascade fade-in slide-up).
   Le cascade initial utilise lhLineIn avec animation-delay inline.
   Les lignes live ajoutées par JS utilisent lh-line-live (lhLineSlideIn). */
.lh-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  animation: lhLineIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes lhLineIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* Lignes ajoutées en live · slide-in depuis le bas, plus rapide */
.lh-line.lh-line-live {
  animation: lhLineSlideIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes lhLineSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.lh-line .arrow {
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
.lh-line .type {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.10);
  min-width: 108px;
  text-align: center;
  flex-shrink: 0;
}
.lh-line.t-click  .type { background: rgba(197, 243, 59, 0.20); color: var(--lime-500); }
.lh-line.t-rage   .type { background: rgba(239, 68, 68, 0.22);  color: #FCA5A5; }
.lh-line.t-scroll .type,
.lh-line.t-form   .type { background: rgba(245, 158, 11, 0.20); color: #FCD34D; }
.lh-line.t-view   .type { background: rgba(147, 51, 234, 0.22); color: #C4B5FD; }
.lh-line .detail {
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lh-line .detail .k { color: rgba(255, 255, 255, 0.35); }
.lh-line .detail .v { color: rgba(255, 255, 255, 0.95); }
.lh-line .detail .warn { color: #FCA5A5; }

/* ─── Capacités (droite) · grid 2 cols × 4 rows = 9 cards ─── */
.lh-capacities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-content: start;
}
/* Mobile · garder 2 cards par ligne · compress des internals à très petit écran */
@media (max-width: 560px) {
  .lh-capacities { gap: 8px; }
  .lh-cap { padding: 10px 12px; gap: 8px; }
  .lh-cap-ic { width: 28px; height: 28px; }
  .lh-cap-ic svg { width: 14px; height: 14px; }
  .lh-cap-tx .t { font-size: 12px; }
  .lh-cap-tx .d { font-size: 10.5px; line-height: 1.4; }
}
@media (max-width: 380px) {
  .lh-capacities { gap: 6px; }
  .lh-cap { padding: 8px 10px; gap: 6px; flex-direction: column; align-items: flex-start; }
}
.lh-cap {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  align-items: flex-start;
  transition: border-color .15s, transform .15s;
}
.lh-cap:hover {
  border-color: var(--ink-900);
  transform: translateY(-1px);
}
.lh-cap-ic {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--ink-900);
  border: 1px solid var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime-500);
}
.lh-cap-ic svg { width: 16px; height: 16px; display: block; }
.lh-cap-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lh-cap-tx .t {
  font: 600 13px/1.2 var(--font-sans);
  color: var(--ink-900);
  letter-spacing: -0.005em;
}
.lh-cap-tx .d {
  font: 500 11.5px/1.45 var(--font-sans);
  color: var(--ink-500);
}

/* ─── Footer éditorial ─── */
.lh-foot {
  margin-top: 28px;
  text-align: center;
  font: 500 13px/1.6 var(--font-mono);
  color: var(--ink-500);
  letter-spacing: 0.02em;
}

/* ─── Ligne intégrations natives · containers à la couleur brand exact ─── */
.lh-integ {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.lh-integ-label {
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-500);
}
.lh-integ-logos {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lh-integ-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: transform .15s;
}
.lh-integ-logo:hover { transform: translateY(-1px); }
.lh-integ-logo svg { width: 14px; height: 14px; display: block; }
.lh-integ-more {
  font: 600 10px/1 var(--font-mono);
  color: var(--ink-500);
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  .lh-line { animation: none; opacity: 1; }
  .lh-live i { animation: none; }
}

/* Section "01 · Le principe" · importée de V1, adaptée au DS V2
   ──────────────────────────────────────────────────────────────────
   Grid 3 cards (1 col mobile, 2 cols tablette, 3 cols desktop).
   Chaque card = ink-200 border, paper bg, radius 20px (tokens V2).
   Visuels custom préfixés .pv-* (principe-viz) pour éviter collision. */
/* Grid 4 cards desktop · 2 cols tablette · 1 col mobile.
   Sur desktop large, les 4 cards racontent : snippet → UTM tags →
   observation → actions à gain. */
.principe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1100px) { .principe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .principe-grid { grid-template-columns: 1fr; } }

.principe-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Hauteur uniforme : .principe-grid align-items: stretch fait que toutes
     les cards adoptent la hauteur de la plus haute. flex: 1 sur .principe-viz
     remplit l'espace restant pour aligner tous les visuels en bas.
     min-width: 0 force les 4 colonnes du grid à largeur strictement égale
     (sans ça, le contenu mono interne peut déborder et faire grossir une col). */
  min-height: 420px;
  min-width: 0;
  transition: border-color .15s;
}
.principe-card:hover { border-color: var(--ink-900); }
.principe-lbl {
  font: 600 11px/1 var(--font-mono);
  color: var(--ink-500);
  letter-spacing: 0.04em;
}
.principe-card h4 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
  color: var(--ink-900);
}
.principe-card p {
  font-size: 13.5px;
  color: var(--ink-500);
  line-height: 1.55;
  margin: 0;
}
.principe-viz {
  /* flex: 1 → remplit toute la hauteur restante dans la card.
     Combiné avec min-height: 420 sur .principe-card et stretch sur la grid,
     ça aligne PARFAITEMENT les 4 viz en hauteur. */
  flex: 1;
  margin-top: auto;
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: 14px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  min-height: 180px;
  display: flex;
  flex-direction: column;
}

/* ── Viz étape 01 · Snippet code ── */
.principe-viz-code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--ink-900);
  border-color: var(--ink-900);
  padding: 0;
}
.pv-code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--dark-border);
}
.pv-dots { display: flex; gap: 4px; }
.pv-dots i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dark-border);
}
.pv-file {
  font: 600 10px/1 var(--font-mono);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}
.pv-code-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
}
.pv-code-line { display: flex; gap: 10px; align-items: baseline; }
.pv-num {
  color: rgba(255, 255, 255, 0.35);
  font-size: 10px;
  min-width: 10px;
}
.pv-txt { color: rgba(255, 255, 255, 0.75); font-size: 11px; }
.pv-tag  { color: #93C5FD; }  /* blue */
.pv-attr { color: var(--lime-500); }
.pv-str  { color: #FCD34D; }  /* amber */
.pv-copied {
  position: absolute;
  bottom: 12px; right: 14px;
  font: 700 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lime-500);
  padding: 5px 9px;
  background: rgba(197, 243, 59, 0.14);
  border: 1px solid rgba(197, 243, 59, 0.35);
  border-radius: 999px;
}
/* Curseur clignotant en fin de snippet · pattern terminal IDE.
   steps(2) crée un blink dur (on/off) plutôt qu'un fade. */
.pv-caret {
  display: inline-block;
  width: 6px;
  height: 12px;
  background: var(--lime-500);
  margin-left: 3px;
  vertical-align: text-bottom;
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(197, 243, 59, 0.55);
  animation: pvCaretBlink 1s steps(2) infinite;
}
@keyframes pvCaretBlink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-caret { animation: none; opacity: 0.85; }
}

/* ── Viz étape 02 · Configuration du funnel · MODE DARK cohérent ──
   Liste des 5 étapes du funnel avec numéros et tags Entrée/Objectif.
   L'étape goal (★ /confirm) en lime accent · les autres en blanc cassé. */
.principe-viz-funnel {
  background: var(--ink-900);
  border-color: var(--ink-900);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pv-fn-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--dark-border);
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  position: relative;
  transition: background .2s ease, border-color .2s ease;
}
/* Animation "curseur fantôme" · 4 keyframes distinctes pour les étapes 1-4.
   Toutes démarrent à t=0 (animation-delay 0) → ordre strict garanti :
   1 → 2 → 3 → 4 → goal. Chaque étape a sa fenêtre de highlight dans le
   cycle 5 s commun, puis le goal s'illumine en lime à 60 %. */
.pv-fn-step:nth-child(1):not(.pv-fn-goal) { animation: pvFnHover1 5s linear infinite; }
.pv-fn-step:nth-child(2):not(.pv-fn-goal) { animation: pvFnHover2 5s linear infinite; }
.pv-fn-step:nth-child(3):not(.pv-fn-goal) { animation: pvFnHover3 5s linear infinite; }
.pv-fn-step:nth-child(4):not(.pv-fn-goal) { animation: pvFnHover4 5s linear infinite; }

/* Étape 1 · highlight de 4 % à 14 % (t = 0.2 s à 0.7 s) */
@keyframes pvFnHover1 {
  0%, 3%, 15%, 100% {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--dark-border);
  }
  5%, 13% {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.26);
  }
}
/* Étape 2 · highlight de 17 % à 27 % (t = 0.85 s à 1.35 s) */
@keyframes pvFnHover2 {
  0%, 16%, 28%, 100% {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--dark-border);
  }
  18%, 26% {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.26);
  }
}
/* Étape 3 · highlight de 30 % à 40 % (t = 1.5 s à 2 s) */
@keyframes pvFnHover3 {
  0%, 29%, 41%, 100% {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--dark-border);
  }
  31%, 39% {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.26);
  }
}
/* Étape 4 · highlight de 43 % à 53 % (t = 2.15 s à 2.65 s) */
@keyframes pvFnHover4 {
  0%, 42%, 54%, 100% {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--dark-border);
  }
  44%, 52% {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.26);
  }
}
/* Hover utilisateur natif · pause l'anim auto + highlight plus marqué */
.pv-fn-step:not(.pv-fn-goal):hover {
  animation-play-state: paused;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
}
@media (prefers-reduced-motion: reduce) {
  .pv-fn-step:nth-child(1):not(.pv-fn-goal),
  .pv-fn-step:nth-child(2):not(.pv-fn-goal),
  .pv-fn-step:nth-child(3):not(.pv-fn-goal),
  .pv-fn-step:nth-child(4):not(.pv-fn-goal) {
    animation: none;
  }
}
/* Trait pointillé vertical entre étapes (sauf après la dernière) */
.pv-fn-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -5px;
  width: 1px;
  height: 4px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25) 0 2px,
    transparent 2px 4px
  );
}
.pv-fn-num {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 9px/1 var(--font-mono);
  flex-shrink: 0;
}
.pv-fn-path {
  flex: 1;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: -0.005em;
}
.pv-fn-tag {
  font: 600 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
}
/* Étape Objectif (goal) · départ en état NORMAL (gris) comme les 4 autres,
   passe en lime à t = 2 s (quand le "curseur fantôme" l'atteint),
   reste lime jusqu'à la fin du cycle 4 s, puis repasse en gris au reset.
   Cohérent avec l'animation pvFnHover des étapes 1-4. */
/* Goal · synchronisé sur le même cycle 5 s que les 4 autres étapes.
   Lime de 58 % à 95 % (t = 2.9 s à 4.75 s) → après que l'étape 4 ait
   terminé son highlight (qui finit à t = 2.65 s). */
.pv-fn-step.pv-fn-goal {
  animation: pvFnGoalReveal 5s linear infinite;
}
.pv-fn-goal .pv-fn-num  { animation: pvFnGoalNum  5s linear infinite; }
.pv-fn-goal .pv-fn-path { animation: pvFnGoalPath 5s linear infinite; }
.pv-fn-goal .pv-fn-tag  { animation: pvFnGoalTag  5s linear infinite; }

@keyframes pvFnGoalReveal {
  0%, 56%, 100% {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--dark-border);
  }
  58%, 95% {
    background: rgba(197, 243, 59, 0.10);
    border-color: rgba(197, 243, 59, 0.4);
  }
}
@keyframes pvFnGoalNum {
  0%, 56%, 100% {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
  }
  58%, 95% {
    background: var(--lime-500);
    color: var(--ink-900);
  }
}
@keyframes pvFnGoalPath {
  0%, 56%, 100% { color: rgba(255, 255, 255, 0.88); }
  58%, 95%      { color: var(--lime-500); }
}
@keyframes pvFnGoalTag {
  0%, 56%, 100% {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
  }
  58%, 95% {
    background: rgba(197, 243, 59, 0.18);
    color: var(--lime-500);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pv-fn-step.pv-fn-goal,
  .pv-fn-goal .pv-fn-num,
  .pv-fn-goal .pv-fn-path,
  .pv-fn-goal .pv-fn-tag {
    animation: none;
  }
  /* En mode reduced-motion : laisse le goal en état lime fixe (cohérent
     avec l'intention narrative · pas d'anim mais l'utilisateur voit l'objectif). */
  .pv-fn-step.pv-fn-goal {
    background: rgba(197, 243, 59, 0.10);
    border-color: rgba(197, 243, 59, 0.4);
  }
  .pv-fn-goal .pv-fn-num  { background: var(--lime-500); color: var(--ink-900); }
  .pv-fn-goal .pv-fn-path { color: var(--lime-500); }
  .pv-fn-goal .pv-fn-tag  { background: rgba(197, 243, 59, 0.18); color: var(--lime-500); }
}

/* ── Viz étape 02 · UTM tagging · MODE DARK cohérent ── */
.principe-viz-utm {
  background: var(--ink-900);
  border-color: var(--ink-900);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.pv-utm-url {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  background: var(--dark-800);
  border: 1px solid var(--dark-border);
  border-radius: 6px;
  padding: 10px 12px;
  word-break: break-all;
  overflow-wrap: break-word;
}
.pv-utm-host { color: rgba(255, 255, 255, 0.85); }
.pv-utm-sep,
.pv-utm-amp  { color: rgba(255, 255, 255, 0.35); }
.pv-utm-key  { color: #93C5FD; }            /* blue · UTM keys */
.pv-utm-val  {
  color: var(--ink-900);
  background: var(--lime-500);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
}
/* Badge lime "Mapping OK" sous l'URL · confirme la reconnaissance de la
   plateforme par trackcvrt. Statique (ne change pas pendant le cycle). */
/* Même style que .pv-copied (étape 01) pour cohérence des 3 badges */
.pv-utm-badge {
  display: inline-block;
  align-self: flex-end;
  padding: 5px 9px;
  background: rgba(197, 243, 59, 0.14);
  border: 1px solid rgba(197, 243, 59, 0.35);
  border-radius: 999px;
  font: 700 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lime-500);
}
.pv-utm-badge-check {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--lime-500);
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 8px/1 var(--font-sans);
  flex-shrink: 0;
}

/* Tabs plateformes ads · pattern Linear/Stripe avec underline lime
   glissante (transition cubic-bezier doux). Cycle auto 3 s avec pause
   au hover · synchro via JS. */
.pv-utm-tabs {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 0 4px 10px;
  border-bottom: 1px solid var(--dark-border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.pv-utm-tabs::-webkit-scrollbar { display: none; }

.pv-utm-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  border-radius: 6px;
  transition: color .2s ease, background .2s ease;
}
.pv-utm-tab svg {
  width: 16px;
  height: 16px;
  display: block;
  transition: transform .2s ease;
}
.pv-utm-tab:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
}
.pv-utm-tab.is-active {
  color: var(--lime-500);
}
.pv-utm-tab.is-active svg {
  transform: scale(1.05);
}

/* Underline lime · glisse sous la tab active · positionné absolument
   sous le border-bottom. transform translateX + width pilotés par JS. */
.pv-utm-underline {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--lime-500);
  border-radius: 1px 1px 0 0;
  transition:
    transform .55s cubic-bezier(0.16, 1, 0.3, 1),
    width .55s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(197, 243, 59, 0.55);
  pointer-events: none;
}

/* Zone display · espace stable même pendant le fade-swap */
.pv-utm-display {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

/* Fade-swap animation appliquée aux valeurs UTM et au pill détecté */
.pv-utm-val,
.pv-utm-detected-text {
  display: inline-block;
  transition:
    opacity .22s ease-out,
    transform .22s ease-out;
}
.pv-utm-val.is-fading,
.pv-utm-detected-text.is-fading {
  opacity: 0;
  transform: translateY(-4px);
}

/* Petite barre de progression auto-cycle · se remplit en 3 s puis reset.
   La largeur est gérée par CSS animation, restart depuis le JS via
   class toggle. */
.pv-utm-progress {
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
.pv-utm-progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, transparent, var(--lime-500));
  border-radius: 999px;
}
.pv-utm-progress.is-running > span {
  animation: pvUtmProgress 3s linear forwards;
}
@keyframes pvUtmProgress {
  from { width: 0%; }
  to   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-utm-underline,
  .pv-utm-val,
  .pv-utm-detected-text,
  .pv-utm-tab svg {
    transition: none;
  }
  .pv-utm-progress > span { animation: none; width: 0; }
}
.pv-utm-detected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: rgba(197, 243, 59, 0.10);
  border: 1px solid rgba(197, 243, 59, 0.35);
  border-radius: 999px;
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lime-500);
  align-self: flex-start;
  transition: background .15s, border-color .15s;
}
.pv-utm-detected-static { color: var(--lime-500); }
.pv-utm-sep-dot {
  color: rgba(197, 243, 59, 0.45);
  font-weight: 400;
}
/* Logo SVG de la plateforme injecté dans le pill détecté (clone du tab actif).
   Hérite de currentColor lime pour rester cohérent avec le pill. */
.pv-utm-detected-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lime-500);
  transition: opacity .22s ease-out, transform .22s ease-out;
}
.pv-utm-detected-logo svg {
  width: 11px;
  height: 11px;
  display: block;
}
.pv-utm-detected-logo.is-fading {
  opacity: 0;
  transform: translateY(-4px);
}
.pv-utm-check {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--lime-500);
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 9px/1 var(--font-sans);
  flex-shrink: 0;
}

/* ── Viz étape 02 · Page observée · refonte fidèle V1 ──
   - .principe-viz a déjà min-height 140, on force hauteur 160px pour layout
     stable (V1 utilise height: 160 sur .p-viz)
   - .pv-page remplit 100% du viz (padding: 14px sur viz)
   - 4 eyes ping animés (lime) avec scale + fade
   - 3 events tags (click/hover/scroll) qui slide-up + fade */
.principe-viz-watch {
  padding: 14px;
  background: var(--ink-900);
  border-color: var(--ink-900);
  /* Plus de height fixe : la viz remplit la hauteur de la card via
     flex: 1 hérité de .principe-viz. */
}
.pv-page {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--dark-800);
  border: 1px solid var(--dark-border);
  border-radius: 6px;
  overflow: hidden;
}
.pv-page-bar {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--dark-border);
  background: rgba(0, 0, 0, 0.35);
}
.pv-page-bar i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.pv-page-content {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pv-ph { background: rgba(255, 255, 255, 0.10); border-radius: 2px; }
.pv-ph.t  { height: 6px; width: 50%; }
.pv-ph.s  { height: 4px; width: 75%; }
.pv-ph.m  { height: 4px; width: 65%; }
.pv-ph.s2 { height: 4px; width: 55%; }
.pv-ph.btn {
  height: 12px;
  width: 44px;
  background: var(--lime-500);
  opacity: 0.7;
  margin-top: 4px;
  border-radius: 3px;
}

/* 4 eye markers · animation pvEyePing (fade-in scale-up puis fade-out scale-up)
   Décalages 0.2 / 1.2 / 2.2 / 3.2 s pour effet cascade infini fluide. */
.pv-eye {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime-500);
  box-shadow: 0 0 8px var(--lime-500);
  opacity: 0;
}
.pv-eye-1 { top: 32%; left: 28%; animation: pvEyePing 4s ease-out infinite; animation-delay: 0.2s; }
.pv-eye-2 { top: 52%; left: 48%; animation: pvEyePing 4s ease-out infinite; animation-delay: 1.2s; }
.pv-eye-3 { top: 68%; left: 62%; animation: pvEyePing 4s ease-out infinite; animation-delay: 2.2s; }
.pv-eye-4 { top: 82%; left: 22%; animation: pvEyePing 4s ease-out infinite; animation-delay: 3.2s; }
@keyframes pvEyePing {
  0%        { opacity: 0; transform: scale(0.3); }
  20%       { opacity: 1; transform: scale(1); }
  60%, 100% { opacity: 0; transform: scale(2.5); }
}

/* 3 event tags · animation pvEvent (slide-up + fade) */
.pv-event {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 3px 7px;
  background: rgba(23, 23, 23, 0.95);    /* dark-800 95% opacity */
  border: 1px solid var(--lime-500);
  color: var(--lime-500);
  border-radius: 4px;
  letter-spacing: 0.04em;
  opacity: 0;
  white-space: nowrap;
}
.pv-e1 { top: 22%; left: 34%; animation: pvEvent 4s ease-out infinite; animation-delay: 0.4s; }
.pv-e2 { top: 42%; left: 54%; animation: pvEvent 4s ease-out infinite; animation-delay: 1.4s; }
.pv-e3 { top: 78%; left: 28%; animation: pvEvent 4s ease-out infinite; animation-delay: 2.4s; }

/* Badge "Ready" · sous la page mockup · même style que .pv-copied et .pv-utm-badge */
.pv-watch-badge {
  margin-top: 10px;
  align-self: flex-end;
  display: inline-block;
  padding: 5px 9px;
  background: rgba(197, 243, 59, 0.14);
  border: 1px solid rgba(197, 243, 59, 0.35);
  border-radius: 999px;
  font: 700 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lime-500);
}
/* Réduit la hauteur de la .pv-page pour laisser place au badge en dessous */
.principe-viz-watch .pv-page {
  flex: 1;
  height: auto;
}
@keyframes pvEvent {
  0%        { opacity: 0; transform: translateY(6px); }
  15%       { opacity: 1; transform: translateY(0); }
  55%, 100% { opacity: 0; transform: translateY(-6px); }
}
/* Désactiver les animations pour utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  .pv-eye, .pv-event { animation: none; opacity: 0.8; }
}

/* ── Viz étape 03 · Liste actions à gain · MODE DARK cohérent ── */
.principe-viz-list {
  padding: 12px;
  background: var(--ink-900);
  border-color: var(--ink-900);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--dark-border);
  border-radius: 10px;
}
.pv-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--lime-500);
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/1 var(--font-sans);
  flex-shrink: 0;
}
.pv-item-txt {
  flex: 1;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
}
.pv-item-gain {
  font: 700 12px/1 var(--font-mono);
  color: var(--lime-500);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Mobile · compact */
@media (max-width: 560px) {
  .principe-card { padding: 18px; min-height: 0; gap: 10px; }
  .principe-card h4 { font-size: 16px; }
  .principe-card p { font-size: 12.5px; }
  .principe-viz { min-height: 120px; }
  .pv-code-body { padding: 12px; }
  .pv-txt { font-size: 10px; }
  .pv-item { padding: 8px 10px; gap: 8px; }
  .pv-check { width: 16px; height: 16px; font-size: 10px; }
  .pv-item-txt { font-size: 11.5px; }
  .pv-item-gain { font-size: 11px; }
}

/* Section 02 · Diptyque "vide vs riche"
   ──────────────────────────────────────────────────────────────────
   2 cards côte à côte (1 col empilé sous 900 px).
   - Gauche : analytics surface (ink-50 fond, kpi plats, question rhéto)
   - Droite : audit trackcvrt (ink-900 fond, drop spotlight, frictions,
     hypothèses lime)
   Zéro animation, zéro gimmick. Lisibilité maximale. */
.diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 900px) { .diptych { grid-template-columns: 1fr; } }

.dip-card {
  padding: 32px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.dip-card-surface {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
}
.dip-card-rich {
  background: var(--ink-900);
  color: white;
  border: 1px solid var(--ink-900);
  background-image: radial-gradient(ellipse 460px 220px at 100% 0%, rgba(197, 243, 59, 0.08), transparent 60%);
}

/* Head commune aux deux cards */
.dip-head { display: flex; flex-direction: column; gap: 10px; }
.dip-eyebrow {
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dip-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--ink-300);
}
.dip-eyebrow.lime { color: var(--lime-500); }
.dip-eyebrow.lime::before {
  background: var(--lime-500);
  box-shadow: 0 0 0 3px rgba(197, 243, 59, 0.22);
}
.dip-head h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink-900);
}
.dip-card-rich .dip-head h3 { color: white; }

/* KPI surface · 3 stats plats */
.dip-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dip-kpi {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  padding: 14px 16px;
}
.dip-kpi-l {
  display: block;
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-500);
  margin-bottom: 8px;
}
.dip-kpi b {
  font: 800 22px/1 var(--font-sans);
  color: var(--ink-900);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Graph plat surface (line chart neutre, gris) */
.dip-chart-flat {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink-300);
}
.dip-chart-flat svg { width: 100%; height: 44px; display: block; }
.dip-chart-label {
  font: 600 10px/1.3 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  text-align: center;
}

/* Question rhétorique en pied de card surface */
.dip-question {
  margin-top: auto;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px dashed var(--ink-300);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.dip-q-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink-200);
  color: var(--ink-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 16px/1 var(--font-sans);
  flex-shrink: 0;
}
.dip-question p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-700);
  line-height: 1.55;
}
.dip-question b { color: var(--ink-900); font-weight: 700; }

/* Drop spotlight · card rich, l'élément le plus visuel */
.dip-drop-spot {
  padding: 18px 20px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.32);
  border-radius: 14px;
}
.dip-drop-l {
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #FCA5A5;
}
.dip-drop-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.dip-drop-line b {
  font: 900 40px/1 var(--font-sans);
  color: #FCA5A5;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.dip-drop-page {
  font: 600 13px/1 var(--font-mono);
  color: rgba(255, 255, 255, 0.6);
}

/* Liste des frictions détectées */
.dip-fr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dip-fr {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.dip-fr-ic {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px/1 var(--font-sans);
  flex-shrink: 0;
}
.dip-fr-ic-rage { background: rgba(239, 68, 68, 0.16); color: #FCA5A5; }
.dip-fr-ic-dead { background: rgba(245, 158, 11, 0.16); color: #FCD34D; }
.dip-fr-ic-form { background: rgba(197, 243, 59, 0.16); color: var(--lime-500); }
.dip-fr > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dip-fr b {
  font-size: 13.5px;
  font-weight: 600;
  color: white;
  letter-spacing: -0.01em;
}
.dip-fr span {
  font: 500 11px/1.4 var(--font-mono);
  color: rgba(255, 255, 255, 0.55);
}

/* Hypothèses non-prescriptives (bloc lime en pied) */
.dip-hyp {
  margin-top: auto;
  padding: 16px 18px;
  background: rgba(197, 243, 59, 0.08);
  border: 1px solid rgba(197, 243, 59, 0.28);
  border-radius: 12px;
}
.dip-hyp-l {
  display: block;
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lime-500);
  margin-bottom: 12px;
}
.dip-hyp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dip-hyp-tag {
  padding: 6px 11px;
  background: rgba(197, 243, 59, 0.14);
  color: var(--lime-500);
  font: 600 11px/1 var(--font-mono);
  border-radius: 999px;
  border: 1px solid rgba(197, 243, 59, 0.32);
  white-space: nowrap;
}

/* Mobile · compact */
@media (max-width: 700px) {
  .dip-card { padding: 22px; gap: 18px; border-radius: 18px; }
  .dip-head h3 { font-size: 18px; }
  .dip-kpi-row { gap: 8px; }
  .dip-kpi { padding: 12px; }
  .dip-kpi b { font-size: 18px; }
  .dip-drop-line b { font-size: 32px; }
  .dip-fr { padding: 10px 12px; }
  .dip-fr b { font-size: 13px; }
  .dip-fr span { font-size: 10.5px; }
  .dip-question p { font-size: 13px; }
}

/* Hero · funnel minimaliste monochrome (NYT / Stripe Atlas data viz)
   ──────────────────────────────────────────────────────────────────
   Refonte premium : on retire les gradients rouge/lime, les pills
   "−86 %", le footer "+€ CA récupérable". Le funnel devient un
   simple tableau éditorial : nom étape (mono) · ligne fine
   (rgba blanc 0.45) · valeur (Inter weight 600 tabular-nums).
   Un seul accent lime ponctuel sur /confirm. */
.hero-funnel {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
  padding-top: 14px;
}

/* En-tête identifiant funnel · Domaine | Funnel
   Ligne sobre mono uppercase tout en haut, separateurs entre label/value
   et "|" entre les deux pairs. Pas de background, juste un bord-bottom subtil. */
.hf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.hf-head-label {
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  font-weight: 600;
}
.hf-head-value {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  margin-right: 6px;
}
.hf-head-sep {
  color: rgba(255, 255, 255, 0.18);
  font-weight: 400;
  margin: 0 4px;
}

/* Sources ads · même grid 3 cols que les rangées funnel (label / track / value)
   pour montrer que c'est le node parent qui alimente /landing.
   Le bord-bottom est en pointillé pour différencier visuellement de la séparation
   entre rangées funnel (solide). */
.hf-sources {
  display: grid;
  grid-template-columns: 120px 1fr 90px;
  gap: 22px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  margin-bottom: 4px;
}
.hf-sources-icons {
  display: flex;
  gap: 6px;
  align-items: center;
}
.brand-tile {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: color .15s, border-color .15s;
}
.brand-tile:hover {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.18);
}
.brand-tile svg { width: 12px; height: 12px; display: block; }
.hf-sources-period {
  font: 500 12px/1 var(--font-mono);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: -0.005em;
  text-align: right;
}

/* Rangée de funnel : 3 cols · nom · trait · valeur (row 1 principale).
   Une 2e row optionnelle peut accueillir .hf-meta-line (friction détectée
   · manque à gagner · visiteurs touchés). Le gap vertical de 4 px ne
   s'applique que si la 2e row est présente.
   Slot 3 = 140 px pour accommoder "62 000  −38 %" sur une ligne. */
.hf-row {
  display: grid;
  grid-template-columns: 120px 1fr 140px;
  gap: 4px 22px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.hf-row:last-of-type { border-bottom: none; }

/* Sous-ligne meta · sous la barre, dans le slot colonnes 2-3 (track + value).
   Ton ultra discret, mono, séparateurs par point médian. Une seule ligne
   sur desktop (nowrap), wrap autorisé sur mobile pour éviter de sortir
   du viewport quand pas la place. */
.hf-meta-line {
  grid-column: 2 / -1;
  font: 500 11px/1.3 var(--font-mono);
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-step {
  font: 500 13px/1 var(--font-mono);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: -0.005em;
}

/* Trait : 1 px de base · 2 px de fill (rgba blanc 0.45) */
.hf-track {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  display: block;
}
.hf-fill {
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  width: var(--w);
  background: rgba(255, 255, 255, 0.45);
  border-radius: 999px;
}
/* Unique accent lime sur /confirm · ni gradient ni glow agressif */
.hf-row.ok .hf-fill {
  background: var(--lime-500);
  height: 3px;
}

.hf-value {
  font: 600 15px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.95);
  text-align: right;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  justify-content: flex-end;
  white-space: nowrap;
}
.hf-row.ok .hf-value { color: var(--lime-500); }

/* Point lime discret après "120" sur /confirm */
.hf-dot-end {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--lime-500);
  display: inline-block;
  margin-left: 1px;
  box-shadow: 0 0 6px rgba(197, 243, 59, 0.6);
}
/* Pourcentage de conversion globale · à droite de la valeur 120 sur /confirm,
   en mono lime sobre (pas de pill, pas de background). Souligne le taux de
   conversion final sans crier. */
.hf-pct {
  font: 600 11px/1 var(--font-mono);
  color: var(--lime-500);
  opacity: 0.85;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

/* Delta -X % · texte mono rouge muted, pas de pill, pas de background.
   Inline juste après la valeur, en taille réduite, ton estompé. */
.hf-delta {
  display: inline;
  font: 500 11px/1 var(--font-mono);
  color: rgba(252, 165, 165, 0.7);            /* danger-500 muted (FCA5A5 0.7) */
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

/* Footer stats · 3 colonnes sobres, séparateurs verticaux ultra-fins,
   pas de background lime, pas de chiffre criard. Juste typo numérique
   tabular-nums + label mono uppercase au-dessus. */
.hf-foot-stats {
  display: flex;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.hf-foot-stats > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 16px;
}
.hf-foot-stats > div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 16px;
}
.hf-foot-stats span {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.4);
}
.hf-foot-stats b {
  font: 600 19px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.015em;
}
/* Accent lime sobre · seul élément coloré du footer · pas de glow */
.hf-foot-stats b.lime {
  color: var(--lime-500);
}

/* Mobile */
@media (max-width: 560px) {
  .hf-head { font-size: 10px; gap: 6px; padding-bottom: 12px; margin-bottom: 14px; }
  .hf-head-value { margin-right: 2px; }
  .hf-sources, .hf-row {
    grid-template-columns: 80px 1fr 110px;
    gap: 10px;
  }
  .hf-sources { padding: 12px 0; }
  .hf-sources-icons { gap: 4px; }
  .hf-row { padding: 12px 0; }
  .hf-step { font-size: 11px; }
  .hf-value { font-size: 13.5px; gap: 5px; }
  .hf-delta { font-size: 10px; }
  .hf-pct { font-size: 10px; }
  .hf-meta-line {
    font-size: 9.5px;
    line-height: 1.4;
    margin-top: 1px;
    /* Mobile : autoriser le wrap (sinon overflow horizontal du viewport) */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .brand-tile { width: 22px; height: 22px; border-radius: 5px; }
  .brand-tile svg { width: 11px; height: 11px; }
  .hf-sources-period { font-size: 11px; }
  .hf-foot-stats { margin-top: 16px; padding-top: 14px; }
  .hf-foot-stats > div { padding-right: 10px; gap: 5px; }
  .hf-foot-stats > div + div { padding-left: 10px; }
  .hf-foot-stats span { font-size: 9px; letter-spacing: 0.1em; }
  .hf-foot-stats b { font-size: 15px; }
}
@media (max-width: 380px) {
  .hf-sources, .hf-row { grid-template-columns: 64px 1fr 100px; gap: 6px; }
  .hf-step { font-size: 10.5px; }
  .hf-value { font-size: 12.5px; }
  .hf-delta { font-size: 9.5px; }
  .hf-pct { font-size: 9.5px; margin-left: 2px; }
  /* En-tête : autoriser le wrap si pas la place */
  .hf-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hf-head-sep { display: none; }
  .hf-sources-icons { flex-wrap: wrap; }
}
.p3-col {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--dark-border);
  border-radius: 12px;
  padding: 12px 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 280px;
}
.p3-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 12px;
  border-bottom: 1px dashed var(--dark-border);
  margin-bottom: 4px;
}
.p3-col-head .dot { width: 8px; height: 8px; border-radius: 50%; }
.p3-col-head .name {
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
  flex: 1;
}
.p3-col-head .count {
  font: 700 11px/1 var(--font-mono);
  color: rgba(255,255,255,0.4);
  padding: 3px 7px; border-radius: 4px;
  background: rgba(255,255,255,0.05);
}
.p3-col.detected .dot { background: var(--danger-500); }
.p3-col.progress .dot { background: var(--warn-500); }
.p3-col.fixed    .dot { background: var(--info-500); }
.p3-col.measured .dot { background: var(--lime-500); box-shadow: 0 0 8px var(--lime-500); }
.p3-card {
  background: var(--dark-800);
  border: 1px solid var(--dark-border);
  border-radius: 10px;
  padding: 11px 12px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.p3-card:hover { transform: translateY(-1px); border-color: rgba(197,243,59,0.4); }
.p3-card .id { font: 600 10px/1 var(--font-mono); color: rgba(255,255,255,0.4); }
.p3-card .tag {
  font: 700 9px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 6px; border-radius: 4px;
  align-self: flex-start;
}
.p3-card .tag.danger { background: rgba(239,68,68,0.15); color: #FCA5A5; }
.p3-card .tag.warn   { background: rgba(245,158,11,0.15); color: #FCD34D; }
.p3-card .tag.info   { background: rgba(59,130,246,0.15); color: #93C5FD; }
.p3-card .tag.lime   { background: var(--lime-500); color: var(--ink-900); }
.p3-card .title { font-size: 12.5px; line-height: 1.3; color: white; font-weight: 600; }
.p3-card .meta {
  display: flex; justify-content: space-between; align-items: center;
  font: 600 11px/1 var(--font-mono);
}
.p3-card .meta .impact { color: var(--danger-500); }
.p3-card .meta .gain { color: var(--lime-500); }
.p3-card .avs { display: flex; }
.p3-card .avs i {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--dark-800);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 8px/1 var(--font-mono); color: white;
  margin-left: -4px;
}
.p3-card .avs i:first-child { margin-left: 0; }
.p3-summary {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 16px;
  background: rgba(197,243,59,0.06);
  border: 1px solid rgba(197,243,59,0.25);
  border-radius: 12px;
}
@media (max-width: 700px) { .p3-summary { grid-template-columns: repeat(2, 1fr); } }
.p3-summary .s { display: flex; flex-direction: column; gap: 4px; }
.p3-summary .s label {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
}
.p3-summary .s b {
  font: 800 22px/1 var(--font-sans);
  color: white; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.p3-summary .s b.lime { color: var(--lime-500); }

/* ───────── generic cards & pills ───────── */
.card { background: var(--paper); border:1px solid var(--ink-200); border-radius:24px; padding:24px; display:flex; flex-direction:column; gap:14px; }
.card.dark { background: var(--ink-900); color:white; border-color: transparent; }
.card .head { display:flex; align-items:center; justify-content:space-between; }
.card .head .t { font-size:13px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-500); font-weight:600; }
.card.dark .head .t { color: rgba(255,255,255,0.5); }

.pill { padding: 6px 12px; border-radius:999px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; background: var(--ink-100); color: var(--ink-700); }
.pill .dot { width:6px; height:6px; border-radius:999px; background: currentColor; }
.pill-success { background: var(--lime-100); color: var(--success-600); }
.pill-warn    { background: rgba(245,158,11,0.12); color: var(--warn-700); }
.pill-danger  { background: rgba(239,68,68,0.12); color: var(--danger-700); }
.pill-dark    { background: var(--ink-900); color: white; }
.pill-lime    { background: var(--lime-500); color: var(--ink-900); }

.tag { display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase; }
.tag-success { background: var(--lime-100); color: var(--success-600); }
.tag-warn    { background: rgba(245,158,11,0.14); color: var(--warn-700); }
.tag-danger  { background: rgba(239,68,68,0.12); color: var(--danger-700); }
.tag-neutral { background: var(--ink-100); color: var(--ink-700); }
.tag .dot    { width:6px; height:6px; border-radius:999px; background: currentColor; }

.num-hero { font-size: 72px; font-weight:900; letter-spacing:-0.03em; line-height:0.95; font-variant-numeric: tabular-nums; }
.num-mid  { font-size: 40px; font-weight:700; letter-spacing:-0.02em; line-height:1; font-variant-numeric: tabular-nums; }
.num-mid small { font-size:18px; color: var(--ink-500); font-weight: 500; margin-left: 4px; }

/* ───────── sec 2 · trou noir ───────── */
.compare { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .compare { grid-template-columns: 1fr; } }
.compare-card { border-radius: 24px; padding: 32px; display:flex; flex-direction:column; gap: 18px; min-height: 360px; }
.compare-card.before { background: var(--ink-900); color: white; }
.compare-card.after  { background: var(--lime-100); color: var(--ink-900); }
.compare-card .ti { font-size: 11px; text-transform:uppercase; letter-spacing:0.12em; font-weight: 700; }
.compare-card.before .ti { color: var(--danger-500); }
.compare-card.after  .ti { color: var(--success-600); }
.compare-card h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.compare-card p  { font-size: 14.5px; line-height: 1.55; margin: 0; }
.compare-card.before p { color: rgba(255,255,255,0.65); }
.compare-card.after  p { color: var(--ink-700); }

.pipeline { display:flex; align-items:center; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.pipe-node { background: var(--paper); border:1px solid var(--ink-200); border-radius:12px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--ink-900); display:inline-flex; align-items:center; gap:8px; }
.pipe-node .mono { font-size: 11px; color: var(--ink-500); font-weight: 500; }
.pipe-arrow { color: var(--ink-500); font-family: var(--font-mono); font-weight: 500; }
.compare-card.before .pipe-node { background: var(--dark-800); border-color: var(--dark-border); color: white; }
.compare-card.before .pipe-arrow { color: rgba(255,255,255,0.4); }
.pipe-blackbox { background: transparent !important; border: 1px dashed rgba(255,255,255,0.3) !important; color: rgba(255,255,255,0.5) !important; font-family: var(--font-mono); letter-spacing: 0.12em; }
.pipe-visible { background: var(--lime-500) !important; border-color: var(--lime-500) !important; color: var(--ink-900) !important; }
.pipe-result.bad  { color: var(--danger-500); }
.pipe-result.good { color: var(--success-600); }

/* ── sec 2 · chaîne de pages navigateur ── */
.compare-card .compare-illu {
  margin-top: 6px;
  flex: 1; min-height: 0;
  display: flex; align-items: stretch;
}
.p1-chain {
  width: 100%;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px; align-items: stretch;
  position: relative;
  padding: 6px 0 28px;
}
.p1-win {
  position: relative;
  border-radius: 10px; overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  display: flex; flex-direction: column;
  min-height: 220px;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.25);
}
.p1-win-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--ink-50);
  position: relative; z-index: 4;
}
.p1-win-bar .dots { display:flex; gap: 3px; }
.p1-win-bar .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); display: block; }
.p1-win-bar .url {
  flex: 1; font: 600 10px/1 var(--font-mono);
  color: var(--ink-700);
  background: var(--paper);
  padding: 5px 8px; border-radius: 4px;
  border: 1px solid var(--ink-200);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p1-win-body {
  flex: 1; padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--paper);
}
.p1-win-body .skel { height: 6px; border-radius: 3px; background: var(--ink-100); }
.p1-win-body .skel.h { height: 12px; background: var(--ink-200); width: 70%; }
.p1-win-body .skel.m { width: 90%; }
.p1-win-body .skel.s { width: 55%; }
.p1-win-body .cta { margin-top: auto; height: 22px; width: 70%; border-radius: 6px; background: var(--lime-500); }
.p1-win-body .cta.dark { background: var(--ink-900); }

.compare-card.before .p1-win { background: #16161A; border-color: #2a2a2f; box-shadow: 0 6px 18px -8px rgba(0,0,0,0.6); }
.compare-card.before .p1-win-bar { background: #0E0E12; border-color: #2a2a2f; }
.compare-card.before .p1-win-bar .dots i { background: #3a3a40; }
.compare-card.before .p1-win-bar .url { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.55); border-color: #2a2a2f; }
.compare-card.before .p1-win-body { background: #16161A; }
.compare-card.before .p1-win-body .skel { background: rgba(255,255,255,0.06); }
.compare-card.before .p1-win-body .skel.h { background: rgba(255,255,255,0.12); }

.p1-win.fog::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 60%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 18%, rgba(10,10,10,0.6) 60%, rgba(10,10,10,0.95) 100%);
  pointer-events: none;
}
.p1-win.fog .p1-win-body { filter: blur(2.5px); opacity: 0.55; }
.p1-win.fog .q {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font: 900 28px/1 var(--font-mono);
  color: rgba(255,255,255,0.45);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  letter-spacing: 0.05em;
}
.p1-win.fog .leak {
  position: absolute; left: 8px; right: 8px; bottom: 10px; z-index: 3;
  font: 700 9px/1.1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #FCA5A5;
  text-align: center;
}

.p1-chain::before {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: 8px; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 6px, transparent 6px 12px);
}
.compare-card.after .p1-chain::before {
  background: repeating-linear-gradient(90deg, var(--ink-700) 0 6px, transparent 6px 12px);
}
.p1-flow-tag {
  position: absolute; bottom: -2px; padding: 2px 8px;
  font: 700 9px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: 4px;
}
.compare-card.before .p1-flow-tag.start { left: 0; background: var(--lime-500); color: var(--ink-900); }
.compare-card.before .p1-flow-tag.end   { right: 0; background: rgba(239,68,68,0.18); color: #FCA5A5; }
.compare-card.after  .p1-flow-tag.start { left: 0; background: var(--ink-900); color: var(--lime-500); }
.compare-card.after  .p1-flow-tag.end   { right: 0; background: var(--success-600); color: white; }

.p1-win.signal { box-shadow: 0 0 0 1.5px var(--ink-900), 0 6px 18px -8px rgba(0,0,0,0.25); }
.p1-win.signal .marker {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success-500);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18);
  z-index: 5;
}
.p1-win.signal.warn .marker { background: var(--warn-500); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.p1-win.signal.bad  .marker { background: var(--danger-500); box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
.p1-win-anno {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  background: var(--ink-900); color: white;
  border-radius: 6px; padding: 5px 7px;
  font: 600 9.5px/1.2 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.04em;
  z-index: 2;
  display: flex; gap: 5px; align-items: center;
}
.p1-win-anno .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lime-500); flex: none; }
.p1-win-anno.warn .dot { background: var(--warn-500); }
.p1-win-anno.bad  .dot { background: var(--danger-500); }

.compare-card .compare-legend {
  display:flex; gap: 16px; flex-wrap: wrap;
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding-top: 4px;
}
.compare-card.before .compare-legend { color: rgba(255,255,255,0.55); }
.compare-card.after  .compare-legend { color: var(--ink-500); }
.compare-card .compare-legend span { display:inline-flex; align-items: center; gap: 6px; }
.compare-card .compare-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* make the v2 compare card taller to accommodate the chain */
.compare-card.v2 { min-height: 480px; gap: 14px; }
.compare-card.v2 h3 { font-size: 24px; }
.compare-card.v2 p  { font-size: 13.5px; color: var(--ink-500); }
.compare-card.v2.before p { color: rgba(255,255,255,0.55); }

/* Mobile · garder les 5 mini-browsers en ligne horizontale (cohérence
   métaphore "chaîne du funnel") au lieu de les empiler en 2 colonnes
   qui triplaient la hauteur de la card et cassaient la lecture. */
@media (max-width: 700px) {
  .p1-chain {
    display: flex;
    grid-template-columns: none;
    gap: 5px;
    padding: 4px 0 22px;
  }
  .p1-win {
    flex: 1 1 0;
    min-width: 0;
    min-height: 130px;
    border-radius: 6px;
  }
  /* Ajuster les internals des mini-browsers pour rester lisibles
     à environ 55-65 px de largeur. */
  .p1-win-bar { padding: 3px 4px; gap: 3px; }
  .p1-win-bar .dots i { width: 4px; height: 4px; }
  .p1-win-bar .url { font-size: 7.5px; padding: 2px 3px; border-radius: 3px; }
  .p1-win-body { padding: 5px; gap: 3px; }
  .p1-win-body .skel { height: 3px; border-radius: 2px; }
  .p1-win-body .skel.h { height: 6px; }
  .p1-win-body .cta { height: 12px; width: 78%; border-radius: 3px; }
  .p1-win.fog .q { font-size: 14px; letter-spacing: 0.02em; }
  .p1-win.fog .leak { font-size: 6.5px; bottom: 5px; left: 3px; right: 3px; }
  .p1-win-anno {
    font-size: 6.5px; padding: 2px 3px; border-radius: 4px;
    left: 3px; right: 3px; bottom: 3px; gap: 3px;
  }
  .p1-win-anno .dot { width: 3px; height: 3px; }
  .p1-win.signal .marker { width: 5px; height: 5px; top: 3px; right: 3px; }
  /* Tags flow début/fin (lime · « clic » ↔ « ??? » / « OK ») */
  .p1-flow-tag { font-size: 7px; padding: 2px 5px; }
  /* Trait pointillé qui matérialise la ligne du funnel reste visible. */
}

/* ───────── sec 3 · 8 cards casser ───────── */
/* Grid 8 cards · 4 cols desktop, 2 cols dès la tablette ET en mobile
   (au lieu de 1 col qui faisait scroller 2 240 px sur mobile). À 320 px,
   chaque card fait ~137 px de large, lisible grâce au compress des
   internals (padding, font, min-height) appliqué sous .break-card. */
.break-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .break-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .break-grid { gap: 8px; } }
.break-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
  /* Reveal au scroll · état initial : invisible + légèrement décalée vers le bas.
     Transition cubic-bezier(0.16, 1, 0.3, 1) = ease-out doux, pattern Linear/Stripe.
     Quand la card entre dans le viewport, JS ajoute .is-revealed → retour à 0/1. */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(0.16, 1, 0.3, 1),
              transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}
.break-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger · décalage de 80 ms entre cards pour effet cascade naturel.
   Sur desktop 4 cols : row 1 (cards 1-4) cascade nette · row 2 (cards 5-8) idem. */
.break-card:nth-child(1).is-revealed { transition-delay: 0ms; }
.break-card:nth-child(2).is-revealed { transition-delay: 80ms; }
.break-card:nth-child(3).is-revealed { transition-delay: 160ms; }
.break-card:nth-child(4).is-revealed { transition-delay: 240ms; }
.break-card:nth-child(5).is-revealed { transition-delay: 0ms; }    /* nouvelle row, on relance le compteur */
.break-card:nth-child(6).is-revealed { transition-delay: 80ms; }
.break-card:nth-child(7).is-revealed { transition-delay: 160ms; }
.break-card:nth-child(8).is-revealed { transition-delay: 240ms; }
/* Accessibilité · prefers-reduced-motion désactive l'animation,
   les cards apparaissent directement en place sans transition. */
@media (prefers-reduced-motion: reduce) {
  .break-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.break-card:hover { border-color: var(--ink-900); }
.break-card .num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); }
.break-card h4 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.break-card .desc { font-size: 13px; color: var(--ink-500); line-height: 1.45; margin-top: auto; }
.break-vis { flex: 1; background: var(--ink-50); border-radius: 12px; padding: 12px; border: 1px solid var(--ink-100); display:flex; flex-direction: column; gap: 6px; min-height: 110px; overflow: hidden; position: relative; }

/* mini vis primitives */
.v-error { font-family: var(--font-mono); font-size: 11px; color: var(--danger-700); background: rgba(239,68,68,0.08); border: 1px dashed rgba(239,68,68,0.4); border-radius: 6px; padding: 7px 9px; line-height: 1.4; }
.v-perf { display:flex; align-items: end; gap: 4px; height: 56px; padding-top: 8px; }
.v-perf i { flex:1; background: var(--ink-200); border-radius: 3px 3px 0 0; }
.v-perf i.bad { background: var(--danger-500); }
.v-section { background: var(--ink-200); height: 12px; border-radius: 4px; }
.v-section.hot { background: var(--danger-500); }
.v-leak { display:flex; gap: 6px; align-items: center; font-size: 11px; color: var(--ink-500); font-family: var(--font-mono); }
.v-leak::before { content: "→"; color: var(--danger-500); }
.v-hier { display:flex; flex-direction: column; gap: 6px; }
.v-hier .h-row { display:flex; gap: 6px; align-items: center; font-size: 11px; }
.v-hier .h-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); }
.v-hier .h-row.muted { opacity: 0.4; }
.v-hier .h-row.bad .dot { background: var(--danger-500); }
.v-abnormal { display:flex; flex-direction: column; gap: 4px; font-size: 11px; }
.v-abnormal i { display:block; height: 6px; background: var(--ink-300); border-radius: 999px; }
.v-abnormal i.spike { background: var(--danger-500); height: 14px; }
.v-mobile { display:flex; align-items: center; gap: 10px; }
.v-mobile-frame { width: 36px; height: 58px; border: 2px solid var(--ink-900); border-radius: 6px; position: relative; flex-shrink: 0; }
.v-mobile-frame::after { content:""; position:absolute; left: 4px; right: 4px; top: 30px; bottom: 6px; background: var(--danger-500); border-radius: 2px; opacity: 0.5; }
.v-tracking { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--ink-700); }
.v-tracking s { color: var(--danger-500); }

/* ───────── sec 4 · parcours complet (light) ───────── */

.story-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap: 14px; position: relative; }
@media (max-width: 1100px) { .story-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .story-grid { grid-template-columns: 1fr; } }
.frame-card {
  background: var(--dark-800); border:1px solid var(--dark-border);
  border-radius: 20px; padding: 18px;
  display:flex; flex-direction:column; gap: 14px; min-height: 240px;
  background-image: radial-gradient(ellipse 240px 160px at 100% 100%, rgba(197,243,59,0.10), transparent 60%);
}
.frame-num { font-family: var(--font-mono); font-size: 11px; color: var(--lime-500); font-weight: 600; letter-spacing: 0.1em; }
.frame-title { color: white; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin: 0; }
.frame-body { color: rgba(255,255,255,0.55); font-size: 12.5px; line-height: 1.45; margin-top: auto; }

/* ───────── sec 4 · parcours · timeline verticale workflow ───────── */
.vflow {
  position: relative;
  margin-top: 24px;
}

/* rail vertical neutre derrière les milestones */
.vflow-rail {
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--ink-200);
  z-index: 0;
  border-radius: 2px;
}

/* chaque étape : milestone à gauche, carte (texte + illus) à droite */
.vflow-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 32px;
  padding: 28px 0;
  z-index: 1;
  cursor: default;
  /* Reveal au scroll · état initial : invisible + légèrement décalé vers le bas.
     Transition cubic-bezier(0.16, 1, 0.3, 1) = ease-out doux, pattern Linear/Stripe.
     Quand l'étape entre dans le viewport, JS ajoute .is-revealed → retour à 0/1. */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s cubic-bezier(0.16, 1, 0.3, 1),
              transform .75s cubic-bezier(0.16, 1, 0.3, 1);
}
.vflow-step:first-of-type { padding-top: 0; }
.vflow-step:last-of-type { padding-bottom: 0; }
.vflow-step.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger · 100 ms entre étapes pour cascade visible quand plusieurs sont
   simultanément dans le viewport. .vflow-rail occupe :nth-child(1), donc les
   6 étapes vont de :nth-child(2) à :nth-child(7). */
.vflow-step:nth-child(2).is-revealed { transition-delay: 0ms; }
.vflow-step:nth-child(3).is-revealed { transition-delay: 100ms; }
.vflow-step:nth-child(4).is-revealed { transition-delay: 200ms; }
.vflow-step:nth-child(5).is-revealed { transition-delay: 300ms; }
.vflow-step:nth-child(6).is-revealed { transition-delay: 400ms; }
.vflow-step:nth-child(7).is-revealed { transition-delay: 500ms; }
@media (prefers-reduced-motion: reduce) {
  .vflow-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* milestone (cercle 01-06) — tous identiques : bg ink-900, écriture paper */
.vflow-marker {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink-900);
  border: 2px solid var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  font: 800 16px/1 var(--font-mono);
  color: var(--paper);
  box-shadow: 0 0 0 6px var(--ink-50);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition: color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* hover : étape s'ouvre — écriture passe en lime, marker grossit, illus se lève */
.vflow-step:hover .vflow-marker {
  color: var(--lime-500);
  box-shadow: 0 0 0 6px var(--ink-50), 0 10px 22px rgba(10, 10, 10, 0.18);
  transform: scale(1.06);
}
.vflow-step:hover .illus {
  border-color: var(--ink-900);
  box-shadow: 0 14px 36px rgba(10, 10, 10, 0.09), 0 2px 6px rgba(10, 10, 10, 0.05);
  transform: translateY(-3px);
}
.vflow-step:hover .vflow-title {
  letter-spacing: -0.022em;
}

/* carte = texte (gauche) + illus (droite) */
.vflow-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
}

/* responsive : stack en colonne */
@media (max-width: 1000px) {
  .vflow-card {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 700px) {
  .vflow-step {
    grid-template-columns: 44px 1fr;
    gap: 20px;
    padding: 22px 0;
  }
  .vflow-marker {
    width: 44px; height: 44px;
    font-size: 14px;
    box-shadow: 0 0 0 4px var(--ink-50);
  }
  .vflow-rail {
    left: 21px;
  }
}

/* ─── bloc texte ─── */
.vflow-eyebrow {
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-500);
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 10px;
}
.vflow-eyebrow::before {
  content: ""; width: 18px; height: 1px;
  background: var(--ink-300);
  display: inline-block;
}
.vflow-title {
  font: 700 26px/1.15 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 14px;
  text-wrap: balance;
  max-width: 22ch;
}
@media (max-width: 700px) {
  .vflow-title { font-size: 22px; }
}
.vflow-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0 0 18px;
  max-width: 48ch;
}
.vflow-body b { color: var(--ink-900); font-weight: 600; }
.vflow-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.vflow-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  font: 600 11px/1 var(--font-mono);
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vflow-chip::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-500);
  display: inline-block;
}

/* ─── bloc illustration ─── */
.vflow-illus { position: relative; min-width: 0; }

/* carte commune aux 6 illustrations */
.illus {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 24px rgba(10,10,10,0.05), 0 1px 2px rgba(10,10,10,0.03);
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* ─── 01 · Suivi · tracker campagnes (hiérarchie plateforme→pub) ─── */
.illus-tracker { padding: 0; overflow: hidden; }
.tracker-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-200);
  font: 700 10.5px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.tracker-head-title { color: var(--ink-900); }
.tracker-head-meta { color: var(--ink-500); }

/* grille à 4 colonnes : Source · Vis · Conv · Engagement (avec barre + %) */
.tracker-cols,
.tracker-row {
  display: grid;
  grid-template-columns: 1fr 52px 52px 120px;
  gap: 8px;
  padding: 8px 14px;
}
.tracker-cols {
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
  font: 600 9px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-500);
}
.tracker-cols span:not(:first-child) { text-align: right; }
.tracker-engage-head {
  color: var(--ink-900) !important;
  font-weight: 800 !important;
}
.tracker-row {
  font: 600 12px/1.2 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
  border-bottom: 1px solid var(--ink-100);
  align-items: center;
}
.tracker-row span:not(.tracker-cell-name):not(.tracker-engage) { text-align: right; }
.tracker-row:last-of-type { border-bottom: none; }

.tracker-cell-name {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tracker-row-plat .tracker-cell-name { font-weight: 800; }
.tracker-row-camp .tracker-cell-name { padding-left: 22px; color: var(--ink-700); font-weight: 700; font-size: 11.5px; }
.tracker-row-adset .tracker-cell-name { padding-left: 34px; color: var(--ink-700); font-weight: 600; font-size: 11.5px; }
.tracker-row-ad .tracker-cell-name { padding-left: 46px; color: var(--ink-700); font-weight: 500; font-size: 11.5px; }

.tracker-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 10px;
  font: 700 9px/1 var(--font-mono);
  color: var(--ink-500);
  flex-shrink: 0;
}
.tracker-row-open .tracker-caret { color: var(--ink-900); }

.tracker-platform-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
  overflow: hidden;
}
.tracker-platform-tag svg { width: 14px; height: 14px; display: block; }

/* engagement = barre de progression + % (la métrique-pivot) */
.tracker-engage {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
}
.tracker-bar {
  flex: 1;
  height: 6px;
  background: var(--ink-100);
  border-radius: 3px;
  overflow: hidden;
  min-width: 0;
}
.tracker-bar-fill {
  display: block;
  height: 100%;
  background: var(--ink-900);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.tracker-bar-bad { background: #B91C1C; }
.tracker-engage-pct {
  font: 700 11.5px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
  min-width: 32px;
  text-align: right;
  flex-shrink: 0;
}

.tracker-row-anomaly {
  background: rgba(239, 68, 68, 0.05);
  border-bottom-color: rgba(239, 68, 68, 0.18);
}
.tracker-row-anomaly .tracker-cell-name {
  color: #B91C1C;
  font-weight: 700;
}
.tracker-flag {
  color: #B91C1C;
  font-size: 13px;
  flex-shrink: 0;
}
.tracker-cell-bad { color: #B91C1C; font-weight: 700; }

/* ─── Tracker · compactage mobile ───
   La grille desktop (1fr 52px 52px 120px) réclame ~276px incompressibles :
   sur un écran étroit la colonne « nom » (1fr) s'écrase à zéro et tout se tronque.
   On resserre la grille et on réduit les retraits de hiérarchie pour rendre de la
   place à la colonne « nom ». */
@media (max-width: 700px) {
  /* En-tête de la carte : police réduite pour tenir titre + méta sur une ligne */
  .tracker-head { padding: 10px 10px; font-size: 9px; }

  /* Colonnes resserrées + padding latéral réduit (10px au lieu de 14px) */
  .tracker-cols,
  .tracker-row {
    grid-template-columns: 1fr 40px 44px 74px;
    gap: 6px;
    padding: 7px 10px;
  }

  /* En-tête de colonnes : « Engagement funnel » peut passer sur 2 lignes proprement */
  .tracker-cols {
    font-size: 8px;
    letter-spacing: 0.03em;
    line-height: 1.3;
    align-items: center;
  }

  /* Hiérarchie : retraits ~÷2 pour rendre de la place aux noms de campagnes/pubs */
  .tracker-row-camp  .tracker-cell-name { padding-left: 12px; }
  .tracker-row-adset .tracker-cell-name { padding-left: 22px; }
  .tracker-row-ad    .tracker-cell-name { padding-left: 30px; }

  /* % d'engagement compact mais lisible */
  .tracker-engage-pct { min-width: 24px; font-size: 11px; }
}


/* primitive : pastille avatar 20px */
.illus-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 9px/1 var(--font-mono);
  color: white;
  flex-shrink: 0;
}

/* ▸ 01 · Détection · alerte + sparkline */
.illus-alert-head {
  display: flex; align-items: center; gap: 10px;
  font: 700 10.5px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.illus-alert-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.18);
  animation: illus-pulse 2s infinite;
}
@keyframes illus-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(239,68,68,0.18); }
  50% { box-shadow: 0 0 0 7px rgba(239,68,68,0.06); }
}
.illus-alert-tag { color: #B91C1C; }
.illus-alert-time { color: var(--ink-500); margin-left: auto; }
.illus-friction-ctx {
  margin-top: 14px;
  font-size: 13px; color: var(--ink-700);
  line-height: 1.5;
}
.illus-friction-ctx code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--ink-100); padding: 2px 6px; border-radius: 4px;
  color: var(--ink-900); font-weight: 600;
}

/* liste des frictions détectées */
.illus-frictions {
  display: flex; flex-direction: column; gap: 8px;
  margin: 14px 0;
}
.illus-friction {
  display: flex; align-items: center; gap: 12px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 10px 12px;
}
.illus-friction-icon {
  color: var(--ink-300);
  font-size: 14px;
  flex-shrink: 0;
}
.illus-friction-body { flex: 1; min-width: 0; }
.illus-friction-name {
  font: 700 13px/1.2 var(--font-sans);
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.illus-friction-meta {
  font: 500 11px/1.3 var(--font-mono);
  color: var(--ink-500);
  margin-top: 3px;
}
.illus-friction-pct {
  font: 800 15px/1 var(--font-sans);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.illus-alert-foot {
  display: flex; justify-content: space-between; align-items: center;
  font: 600 11px/1 var(--font-mono);
  color: var(--ink-500);
  padding-top: 12px;
  border-top: 1px solid var(--ink-200);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.illus-alert-cta { color: var(--ink-900); font-weight: 700; }

/* ▸ 02 · Tâche · ticket card */
.illus-ticket-head {
  display: flex; align-items: center; justify-content: space-between;
  font: 700 10.5px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.illus-ticket-id { color: var(--ink-500); }
.illus-ticket-status {
  color: #B45309;
  background: rgba(245,158,11,0.18);
  padding: 5px 10px; border-radius: 999px;
}
.illus-ticket-title {
  font: 700 18px/1.3 var(--font-sans);
  color: var(--ink-900);
  margin: 14px 0 14px;
  letter-spacing: -0.015em;
}

/* ─ bloc signaux pattern (preuves stats que c'est pas isolé) ─ */
.illus-signals {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.illus-signals-head {
  display: flex; align-items: center; gap: 8px;
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-700);
  margin-bottom: 12px;
}
.illus-signals-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #15803D;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  flex-shrink: 0;
}
.illus-signals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.illus-signal-val {
  font: 700 14px/1.1 var(--font-sans);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.illus-signal-vs {
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.illus-signal-lbl {
  font: 600 10px/1.3 var(--font-mono);
  color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.illus-signal-cta {
  display: inline-flex; align-items: center;
  margin-top: 6px;
  font: 700 10.5px/1 var(--font-mono);
  color: var(--ink-900);
  text-transform: uppercase; letter-spacing: 0.05em;
  text-decoration: underline;
  text-decoration-color: var(--ink-300);
  text-underline-offset: 3px;
  cursor: pointer;
}
.illus-signal-cta:hover {
  text-decoration-color: var(--ink-900);
}

.illus-ticket-meta {
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--ink-200);
  padding-top: 14px;
}
.illus-meta-row {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px;
}
.illus-meta-lbl {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-500);
  min-width: 64px;
}
.illus-meta-val { color: var(--ink-700); display: inline-flex; align-items: center; gap: 8px; }
.illus-meta-val code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--ink-100); padding: 2px 6px; border-radius: 4px;
  color: var(--ink-900);
}
.illus-meta-strong { color: var(--ink-900); font-weight: 600; }

/* ▸ 03 · Équipe · thread */
.illus-thread-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-200);
}
.illus-avatars { display: flex; }
.illus-avatars .illus-avatar {
  width: 28px; height: 28px;
  font-size: 10px;
  margin-left: -6px;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink-200);
}
.illus-avatars .illus-avatar:first-child { margin-left: 0; }
.illus-thread-count {
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-500);
}
.illus-msg {
  display: flex; gap: 12px;
  margin-top: 14px;
}
.illus-msg .illus-avatar {
  width: 30px; height: 30px;
  font-size: 11px;
}
.illus-msg-body { flex: 1; min-width: 0; }
.illus-msg-meta {
  font: 600 11px/1 var(--font-mono);
  color: var(--ink-500);
  margin-bottom: 5px;
}
.illus-msg-meta b { color: var(--ink-900); font-weight: 700; }
.illus-msg-text {
  font-size: 13.5px; line-height: 1.45;
  color: var(--ink-700);
}
.illus-link {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-color: var(--ink-300);
  text-underline-offset: 3px;
  font-weight: 600;
}
.illus-mention {
  background: var(--lime-100);
  color: var(--ink-900);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}

/* ▸ 04 · Pistes · hypothesis cards */
.illus-ideas-head {
  font: 700 10.5px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-500);
  margin-bottom: 14px;
}
.illus-ideas-head code {
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--ink-100); padding: 2px 6px; border-radius: 4px;
  color: var(--ink-900); text-transform: none; letter-spacing: 0;
}
.illus-idea {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 11px 13px;
  margin-top: 8px;
}
.illus-idea:first-of-type { margin-top: 0; }
.illus-idea-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.illus-idea-dot { color: var(--ink-300); font-size: 15px; flex-shrink: 0; }
.illus-idea-text { font-size: 13px; color: var(--ink-700); line-height: 1.4; }

/* ▸ 05 · Correctif · snapshot capture */
.illus-snap-head {
  display: flex; justify-content: space-between; align-items: center;
  font: 700 10.5px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.illus-snap-tag {
  color: var(--ink-900);
  background: var(--lime-100);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(197,243,59,0.5);
}
.illus-snap-time { color: var(--ink-500); }
/* auteur du fix (avatar + nom + meta) */
.illus-snap-author {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 14px 0;
}
.illus-snap-author .illus-avatar {
  width: 32px; height: 32px;
  font-size: 11px;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink-200);
}
.illus-snap-author-name {
  font: 700 13px/1.1 var(--font-sans);
  color: var(--ink-900);
}
.illus-snap-author-meta {
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-500);
  margin-top: 4px;
}

/* avant / après · 2 cells avec flèche entre */
.illus-snap-ab {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
}
.illus-snap-ab-cell {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.illus-snap-ab-after {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.28);
}
.illus-snap-ab-lbl {
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-500);
  display: flex; align-items: center; gap: 8px;
}
.illus-snap-ab-delta {
  font: 700 10px/1 var(--font-mono);
  color: #15803D;
  background: rgba(22, 163, 74, 0.14);
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.illus-snap-ab-val {
  font: 800 22px/1 var(--font-sans);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.illus-snap-ab-after .illus-snap-ab-val {
  color: #15803D;
}
.illus-snap-ab-sub {
  font: 500 10.5px/1.3 var(--font-mono);
  color: var(--ink-500);
  margin-top: 2px;
}
.illus-snap-ab-arrow {
  display: flex; align-items: center;
  font: 800 18px/1 var(--font-mono);
  color: var(--ink-300);
}

/* story-foot conservé (utilisé en pied de la section parcours) */
.story-foot { margin-top: 56px; text-align: center; color: var(--ink-500); font-size: 14px; }
.story-foot .mono { color: var(--ink-500); }

/* ───────── sec 6 · pour aller plus loin · 6 features analyse ───────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
/* Tablette : 2 colonnes (2×3). Mobile (≤560px) : 1 colonne empilée (1×6). */
@media (max-width: 1000px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
  .features-grid { grid-template-columns: 1fr; }
}

.feature-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Reveal au scroll · pattern identique aux break-cards / vflow-step / plans. */
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .75s cubic-bezier(0.16, 1, 0.3, 1),
    transform .75s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.feature-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger 80 ms · cascade visible quand les 6 cards arrivent dans le viewport */
.feature-card:nth-child(1).is-revealed { transition-delay: 0ms; }
.feature-card:nth-child(2).is-revealed { transition-delay: 80ms; }
.feature-card:nth-child(3).is-revealed { transition-delay: 160ms; }
.feature-card:nth-child(4).is-revealed { transition-delay: 0ms; }   /* nouvelle row · reset compteur */
.feature-card:nth-child(5).is-revealed { transition-delay: 80ms; }
.feature-card:nth-child(6).is-revealed { transition-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
  .feature-card {
    opacity: 1;
    transform: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }
}
.feature-card:hover {
  border-color: var(--ink-900);
  box-shadow: 0 10px 28px rgba(10, 10, 10, 0.06), 0 2px 4px rgba(10, 10, 10, 0.04);
}

/* ───── Card · h3 + p + viz pushed bottom (pattern V1 .infra-card sans label mono) ───── */

/* viz container · "capture app" dark · accent lime/red/green autorisé sur surface dark.
   Hauteur fixe pour cohérence visuelle. Tous les 6 viz ont les mêmes dimensions.
   Padding 0 (chaque viz gère son propre padding interne via cap-bar/contenu). */
.feature-viz {
  margin-top: auto;
  height: 168px;
  border: 1px solid var(--dark-border);
  border-radius: 10px;
  background: var(--ink-900);
  padding: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
@media (max-width: 700px) {
  .feature-viz { height: 142px; border-radius: 8px; }
  .feature-card { padding: 14px; gap: 8px; }
}

/* ════════════ Header bar commun à tous les viz (style capture app) ════════════ */
.cap-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
.cap-bar-tag {
  font: 700 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lime-500);
}
.cap-bar-meta {
  font: 500 9px/1 var(--font-mono);
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
}

/* ════════════ 1. viz-score · table mini campagnes (pattern CampaignsTopList) ════════════ */
.feature-viz-score {
  display: flex; flex-direction: column;
}
.cap-trow {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cap-trow:last-child { border-bottom: none; }
.cap-plat {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cap-plat svg { width: 12px; height: 12px; display: block; }
.cap-tname {
  font: 500 11.5px/1 var(--font-mono);
  color: rgba(255,255,255,0.85);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0;
}
.cap-tval {
  font: 700 13px/1 var(--font-sans);
  color: white;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.cap-tval-suf {
  font: 500 10px/1 var(--font-mono);
  color: rgba(255,255,255,0.45);
  margin-left: 2px;
}
.cap-tval-hi { color: var(--lime-500); }
.cap-tval-hi .cap-tval-suf { color: rgba(197,243,59,0.5); }
.cap-tval-lo { color: #FCA5A5; }
.cap-tval-lo .cap-tval-suf { color: rgba(252,165,165,0.5); }

/* ════════════ 2. viz-audit · 3 niveaux (pattern SectionScoreRow + ScorePill) ════════════ */
.feature-viz-audit {
  display: flex; flex-direction: column;
}
.cap-arow {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cap-arow:last-child { border-bottom: none; }
.cap-arow-i1 { padding-left: 26px; }
.cap-arow-i2 { padding-left: 40px; }
.cap-pill {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/1 var(--font-mono);
  flex-shrink: 0;
}
.cap-pill-good { background: rgba(197,243,59,0.18); color: var(--lime-500); }
.cap-pill-mid { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85); }
.cap-pill-bad { background: rgba(239,68,68,0.16); color: #FCA5A5; }
.cap-ameta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cap-alvl {
  font: 700 8px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.40);
}
.cap-aname {
  font: 600 11.5px/1 var(--font-sans);
  color: rgba(255,255,255,0.90);
  letter-spacing: -0.005em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cap-alift {
  font: 700 10.5px/1 var(--font-mono);
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.cap-alift-up { color: var(--lime-500); }
.cap-alift-down { color: #FCA5A5; }

/* ════════════ 3. viz-patterns · comparaison side-by-side (pattern AuditView WireframePanel) ════════════ */
.feature-viz-patterns {
  display: flex; flex-direction: column;
}
.cap-chead {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 8px;
  padding: 6px 12px 4px;
}
.cap-clbl-c {
  font: 700 8px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  text-align: right;
}
.cap-clbl-c-bad { color: #FCA5A5; }
.cap-crow {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 5px 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.cap-clbl {
  font: 700 9.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
}
.cap-cval {
  font: 700 12px/1 var(--font-sans);
  text-align: right;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.cap-cval-bad { color: #FCA5A5; }
.cap-cval-ok { color: var(--lime-500); }

/* ════════════ 4. viz-replay · player + sessions list + timeline (pattern ReplayModal) ════════════ */
.feature-viz-replay {
  display: flex; flex-direction: column;
}
.cap-rgrid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 8px;
  padding: 8px 12px 6px;
  flex: 1;
  min-height: 0;
}
.cap-rscreen {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--dark-border);
  border-radius: 6px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.cap-rplay {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--lime-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(197,243,59,0.08), 0 4px 12px rgba(197,243,59,0.25);
}
.cap-rplay svg { width: 10px; height: 10px; margin-left: 1px; }
.cap-rdevice {
  position: absolute;
  bottom: 5px;
  left: 8px;
  font: 600 8px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
}
.cap-rsessions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}
.cap-rsess {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
}
.cap-rsess-active {
  background: rgba(197,243,59,0.10);
  border: 1px solid rgba(197,243,59,0.25);
  padding: 3px 7px;
}
.cap-rsess-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.cap-rsess-active .cap-rsess-dot { background: var(--lime-500); }
.cap-rsess-meta {
  font: 600 9px/1 var(--font-mono);
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
}
.cap-rtl {
  position: relative;
  height: 5px;
  margin: 0 12px 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  flex-shrink: 0;
}
.cap-rtl-prog {
  display: block;
  height: 100%;
  background: var(--lime-500);
  border-radius: 999px;
}
.cap-rtl-mk {
  position: absolute;
  top: -2px;
  width: 6px; height: 9px;
  background: #B91C1C;
  border-radius: 1px;
  border: 1.5px solid var(--ink-900);
  transform: translateX(-3px);
}

/* ════════════ 5. viz-heatmap · jour × heure (pattern PulseFooter + V1 .viz-grid) ════════════ */
.feature-viz-heatmap {
  display: flex; flex-direction: column;
}
.cap-hm {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  justify-content: center;
}
.cap-hm-cols {
  display: grid;
  grid-template-columns: 28px repeat(6, 1fr);
  gap: 3px;
  font: 700 8px/1 var(--font-mono);
  color: rgba(255,255,255,0.40);
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 2px;
}
.cap-hm-row {
  display: grid;
  grid-template-columns: 28px repeat(6, 1fr);
  gap: 3px;
  align-items: center;
}
.cap-hm-d {
  font: 700 8.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.40);
}
.cap-hm-c {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: rgba(197, 243, 59, var(--a, 0.1));
  min-height: 0;
}
.cap-hm-c-peak {
  box-shadow: 0 0 0 1px var(--lime-500);
}

/* ════════════ 6. viz-digest · email preview (pattern DigestWeeklyEmail + EmailMetricBox) ════════════ */
.feature-viz-digest {
  display: flex; flex-direction: column;
}
.cap-dh1 {
  font: 700 14px/1.2 var(--font-sans);
  color: white;
  letter-spacing: -0.015em;
  padding: 9px 12px 4px;
}
.cap-dstabilo {
  background: var(--lime-500);
  padding: 1px 5px;
  color: var(--ink-900);
  border-radius: 3px;
  font-weight: 800;
}
.cap-dbox {
  margin: 0 12px 10px;
  border: 1px solid var(--dark-border);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.cap-drow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.cap-drow:first-child { border-top: none; }
.cap-dlbl {
  font: 700 8.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.50);
}
.cap-dval {
  font: 700 11.5px/1 var(--font-sans);
  color: white;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.cap-dval-good { color: var(--lime-500); }

/* ═══════════════════════════════════════════════════════════════════════
   Section 07 · Fiabilité · 3 features tech (icon + num + h3 + body)
   Pattern V1 .feat porté en V2 (pas de lime sur clair, tokens ink, pastille ink-900)
   ═══════════════════════════════════════════════════════════════════════ */
.rel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 700px) {
  .rel-grid { grid-template-columns: 1fr; gap: 14px; }
}

.rel-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Reveal pattern partagé avec break-cards / vflow-step / plans / feature-card */
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .75s cubic-bezier(0.16, 1, 0.3, 1),
    transform .75s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.rel-card.is-revealed { opacity: 1; transform: translateY(0); }
.rel-card:nth-child(1).is-revealed { transition-delay: 0ms; }
.rel-card:nth-child(2).is-revealed { transition-delay: 80ms; }
.rel-card:nth-child(3).is-revealed { transition-delay: 160ms; }
.rel-card:nth-child(4).is-revealed { transition-delay: 240ms; }
.rel-card:hover {
  border-color: var(--ink-900);
  box-shadow: 0 10px 28px rgba(10, 10, 10, 0.06), 0 2px 4px rgba(10, 10, 10, 0.04);
}
@media (prefers-reduced-motion: reduce) {
  .rel-card {
    opacity: 1; transform: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }
}

.rel-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ink-900);
  color: var(--lime-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rel-ic svg { width: 22px; height: 22px; display: block; }

.rel-title {
  font: 700 18px/1.3 var(--font-sans);
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0;
}
.rel-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}
.rel-body em {
  font-style: italic;
  color: var(--ink-900);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   Section 08 · Pour qui · 6 cards profils (code + h3 + body + tags)
   Pattern V1 .target porté en V2
   ═══════════════════════════════════════════════════════════════════════ */
.cible-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 1000px) {
  .cible-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 640px) {
  .cible-grid { grid-template-columns: 1fr; gap: 12px; }
}

.cible-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
  /* Reveal partagé */
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .75s cubic-bezier(0.16, 1, 0.3, 1),
    transform .75s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.cible-card.is-revealed { opacity: 1; transform: translateY(0); }
.cible-card:nth-child(1).is-revealed { transition-delay: 0ms; }
.cible-card:nth-child(2).is-revealed { transition-delay: 80ms; }
.cible-card:nth-child(3).is-revealed { transition-delay: 160ms; }
.cible-card:nth-child(4).is-revealed { transition-delay: 0ms; }
.cible-card:nth-child(5).is-revealed { transition-delay: 80ms; }
.cible-card:nth-child(6).is-revealed { transition-delay: 160ms; }
.cible-card:hover {
  border-color: var(--ink-900);
  box-shadow: 0 10px 28px rgba(10, 10, 10, 0.06), 0 2px 4px rgba(10, 10, 10, 0.04);
}
@media (prefers-reduced-motion: reduce) {
  .cible-card {
    opacity: 1; transform: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }
}

.cible-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ink-900);
  color: var(--lime-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cible-ic svg { width: 22px; height: 22px; display: block; }
.cible-title {
  font: 700 18px/1.3 var(--font-sans);
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0;
}
.cible-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
  flex: 1;
}
.cible-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.cible-tags span {
  font: 600 10.5px/1 var(--font-mono);
  color: var(--ink-700);
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  padding: 5px 9px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* ─── FAQ · accordéon natif <details> (zéro JS, accessible) ─── */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: var(--paper);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item:hover { border-color: var(--ink-300); }
.faq-item[open] {
  border-color: var(--ink-900);
  box-shadow: 0 8px 24px -12px rgba(10, 10, 10, 0.10);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font: 600 16px/1.4 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-a {
  padding: 0 24px 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-700);
}
.faq-a p { margin: 0; max-width: 66ch; }
.faq-a b { color: var(--ink-900); font-weight: 600; }
/* Icône + (fermé) → − (ouvert) */
.faq-ic { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.faq-ic::before,
.faq-ic::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: var(--ink-500);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, background 0.2s ease;
}
.faq-ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-ic::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item[open] .faq-ic::before,
.faq-item[open] .faq-ic::after { background: var(--ink-900); }
@media (max-width: 700px) {
  .faq-item summary { padding: 16px 18px; font-size: 15px; }
  .faq-a { padding: 0 18px 16px; font-size: 14.5px; }
}

.feature-title {
  font: 700 16px/1.3 var(--font-sans);
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0;
}
@media (max-width: 700px) {
  .feature-title { font-size: 14.5px; }
}

.feature-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-700);
  margin: 0;
}
.feature-body b { color: var(--ink-900); font-weight: 600; }
@media (max-width: 700px) {
  .feature-body { font-size: 12.5px; }
  .feature-card { padding: 14px; gap: 10px; }
}

/* ───────── split (sec 5 + 7) ───────── */
.split { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.split.reverse { grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 1000px) { .split, .split.reverse { grid-template-columns: 1fr; gap: 32px; } }
.split-text h2 { font-size: 44px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; max-width: 14ch; margin: 14px 0 20px; }
.split-text p.lead { font-size: 17px; color: var(--ink-700); line-height: 1.55; max-width: 52ch; }
.split-bullets { margin-top: 24px; padding: 0; list-style: none; display:flex; flex-direction: column; gap: 12px; }
.split-bullets li { display:flex; gap: 14px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--ink-700); }
.split-bullets li::before { content: "→"; font-family: var(--font-mono); color: var(--lime-600); font-weight: 600; flex: none; }
.split-bullets li b { color: var(--ink-900); font-weight: 600; }

/* ───────── sec 5 · replays ───────── */
.replay-player {
  background: var(--ink-900);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.replay-screen {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #FFFFFF, #F1F1F3);
  position: relative;
  overflow: hidden;
}
.replay-fake-page { padding: 24px; display:flex; flex-direction:column; gap: 10px; }
.replay-fake-page .h { height: 14px; background: var(--ink-900); border-radius: 4px; width: 32%; }
.replay-fake-page .l { height: 8px; background: var(--ink-200); border-radius: 4px; }
.replay-fake-page .l.s { width: 64%; }
.replay-fake-page .l.m { width: 86%; }
.replay-fake-page .cta { margin-top: 14px; height: 42px; width: 180px; background: var(--ink-900); border-radius: 12px; box-shadow: 0 0 0 4px rgba(197,243,59,0.35); position: relative; }
.replay-fake-page .cta::after { content:"Ajouter au panier"; color: white; font-size: 12px; font-weight: 600; position: absolute; inset: 0; display:flex; align-items: center; justify-content: center; }
.replay-cursor { position:absolute; width: 28px; height: 28px; border-radius: 50%; background: rgba(197,243,59,0.25); border: 2px solid var(--lime-500); top: 62%; left: 24%; box-shadow: 0 0 20px var(--lime-500); }
.replay-cursor::after { content:""; position: absolute; inset: 8px; border-radius: 50%; background: var(--lime-500); }
.replay-friction { position: absolute; top: 14px; right: 14px; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35); color: var(--danger-700); padding: 6px 12px; border-radius: 999px; font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }

.replay-controls { background: var(--dark-800); padding: 16px; border-top: 1px solid var(--dark-border); }
.replay-timeline { height: 36px; background: var(--ink-900); border-radius: 10px; position: relative; overflow: hidden; }
.replay-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 58%; background: rgba(197,243,59,0.10); }
.replay-progress::after { content:""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--lime-500); box-shadow: 0 0 12px var(--lime-500); }
.replay-event { position: absolute; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; }
.replay-event.rage   { background: var(--danger-500); box-shadow: 0 0 10px rgba(239,68,68,0.6); }
.replay-event.dead   { background: var(--warn-500); }
.replay-event.scroll { background: var(--info-500); }
.replay-meta-row { display:flex; justify-content: space-between; margin-top: 12px; font: 600 11px/1 var(--font-mono); color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; }
.replay-legend { display:flex; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.replay-legend span { display:inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,0.65); }
.replay-legend i { width: 8px; height: 8px; border-radius: 50%; }
.replay-filter { background: var(--dark-800); border-top: 1px solid var(--dark-border); padding: 14px 16px; display:flex; gap: 10px; align-items: center; font-size: 12px; color: rgba(255,255,255,0.55); flex-wrap: wrap; }
.replay-filter .chip { padding: 4px 12px; border-radius: 999px; background: rgba(197,243,59,0.15); color: var(--lime-500); font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }

/* ───────── sec 6 · snapshot avant/après ───────── */
.snapshot { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .snapshot { grid-template-columns: 1fr; } }
.kpi-snap { background: var(--paper); border:1px solid var(--ink-200); border-radius: 24px; padding: 28px; display:flex; flex-direction: column; gap: 14px; min-height: 280px; }
.kpi-snap.before { background: var(--ink-100); border-color: var(--ink-200); }
.kpi-snap.after  { background: var(--lime-100); border-color: rgba(197,243,59,0.4); }
.kpi-snap .meta { display:flex; justify-content: space-between; align-items: center; }
.kpi-snap .label { font-size: 13px; color: var(--ink-500); font-weight: 500; }
.kpi-snap .num-big { font: 900 80px/1 var(--font-sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.kpi-snap.before .num-big { color: var(--danger-500); }
.kpi-snap.after  .num-big { color: var(--success-600); }
.kpi-snap .chart { height: 60px; display:flex; align-items: end; gap: 5px; }
.kpi-snap .chart i { flex: 1; border-radius: 4px 4px 0 0; }
.kpi-snap.before .chart i { background: rgba(239,68,68,0.35); }
.kpi-snap.before .chart i:nth-child(4),
.kpi-snap.before .chart i:nth-child(5) { background: var(--danger-500); }
.kpi-snap.after .chart i { background: rgba(22,163,74,0.35); }
.kpi-snap.after .chart i:nth-child(4),
.kpi-snap.after .chart i:nth-child(5) { background: var(--success-500); }
.kpi-snap .foot { display:flex; justify-content: space-between; font: 600 12px/1 var(--font-mono); color: var(--ink-500); }

.verdict-bar {
  margin-top: 16px;
  padding: 22px 28px; border-radius: 24px;
  background: var(--ink-900); color: white;
  display:flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.verdict-stamp { display:inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(197,243,59,0.15); border: 1px solid rgba(197,243,59,0.35); border-radius: 999px; color: var(--lime-500); font: 700 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.verdict-stamp::before { content: "✓"; }
.verdict-text { font-size: 15px; color: rgba(255,255,255,0.75); max-width: 60ch; }
.verdict-text b { color: white; font-weight: 600; }
.verdict-tl { display:flex; align-items: center; gap: 8px; font: 600 11px/1 var(--font-mono); color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; }
.verdict-tl .seg { width: 50px; height: 2px; background: rgba(255,255,255,0.15); position: relative; }
.verdict-tl .seg.mark::after { content:""; position: absolute; left: 50%; top: -4px; transform: translateX(-50%); width: 10px; height: 10px; background: var(--lime-500); border-radius: 50%; box-shadow: 0 0 12px var(--lime-500); }
.verdict-tl .seg.mark { background: rgba(197,243,59,0.4); }

/* ───────── sec 7 · collab ───────── */
.task-card { background: var(--paper); border:1px solid var(--ink-200); border-radius: 24px; box-shadow: var(--shadow-pop); overflow: hidden; }
.task-head { padding: 22px 24px; border-bottom: 1px solid var(--ink-200); display:flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.task-head .t-id { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.1em; }
.task-head h4 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; margin: 6px 0 0; }
.task-status { display:inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; background: rgba(245,158,11,0.14); color: var(--warn-700); }
.task-status::before { content: ""; width: 6px; height: 6px; background: var(--warn-500); border-radius: 50%; }

.task-meta { padding: 18px 24px; display:flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--ink-200); }
.task-meta-row { display:flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-700); }
.task-meta-row b { color: var(--ink-900); font-weight: 600; }
.task-meta-row .lbl { width: 90px; color: var(--ink-500); font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.avatars { display:flex; align-items: center; }
.avatars i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--paper); margin-left: -8px; display: inline-flex; align-items: center; justify-content: center; font: 600 11px/1 var(--font-mono); color: white; }
.avatars i:first-child { margin-left: 0; }

.task-checklist { padding: 16px 24px; border-bottom: 1px solid var(--ink-200); }
.check { display:flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-900); padding: 6px 0; }
.check input { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--ink-200); border-radius: 5px; position: relative; cursor: pointer; flex-shrink: 0; }
.check input:checked { background: var(--ink-900); border-color: var(--ink-900); }
.check input:checked::after { content: "✓"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--lime-500); font-size: 12px; font-weight: 700; }
.check.done span { color: var(--ink-500); text-decoration: line-through; }

.task-thread { padding: 16px 24px; background: var(--ink-50); }
.thread-msg { display:flex; gap: 12px; padding: 10px 0; align-items: flex-start; }
.thread-msg .av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display:inline-flex; align-items:center; justify-content: center; font: 600 11px/1 var(--font-mono); color: white; }
.thread-msg .bub { background: var(--paper); border: 1px solid var(--ink-200); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; color: var(--ink-700); line-height: 1.5; }
.thread-msg .bub .who { font-weight: 600; color: var(--ink-900); }
.thread-msg .bub .mention { color: var(--ink-900); background: var(--lime-500); padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.thread-msg .ts { font: 600 10px/1 var(--font-mono); color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }

/* ───────── sec 8 · tracker tree ───────── */
.tree {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.tree-head, .tree-row {
  display:grid;
  grid-template-columns: 1fr 90px 110px 100px 140px;
  gap: 10px;
  padding: 12px 14px;
  align-items: center;
}
.tree-head { font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); border-bottom: 1px solid var(--ink-200); padding-bottom: 10px; }
.tree-row { font-size: 13.5px; border-bottom: 1px solid var(--ink-100); transition: background .15s; }
.tree-row:last-child { border-bottom: 0; }
.tree-row:hover { background: var(--ink-50); }
.tree-row .label { display:flex; align-items: center; gap: 8px; }
.tree-row.l1 { font-weight: 600; color: var(--ink-900); }
.tree-row.l2 .label { padding-left: 22px; color: var(--ink-700); }
.tree-row.l3 .label { padding-left: 44px; color: var(--ink-700); }
.tree-row.l4 .label { padding-left: 66px; color: var(--ink-700); }
.tree-row .label::before { content: "▾"; font-family: var(--font-mono); color: var(--ink-300); font-size: 10px; }
.tree-row.l4 .label::before { content: "·"; font-size: 18px; }
.tree-row .num, .tree-row .ca { font-family: var(--font-mono); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.tree-row .ca { color: var(--ink-500); font-weight: 500; }
.tree-row .score { display:flex; align-items: center; gap: 8px; justify-content: flex-end; font: 600 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.score-bar { width: 44px; height: 6px; border-radius: 999px; background: var(--ink-100); overflow: hidden; }
.score-bar i { display:block; height: 100%; background: var(--success-500); border-radius: 999px; }
.score-bar i.mid { background: var(--warn-500); }
.score-bar i.low { background: var(--danger-500); }
.tree-row.deviant { background: rgba(239,68,68,0.04); }
.tree-row.deviant:hover { background: rgba(239,68,68,0.08); }
.tree-row .alert-pill { display:inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(239,68,68,0.12); color: var(--danger-700); font: 700 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; justify-self: end; }
.tree-row .alert-pill::before { content: "⚠"; }
@media (max-width: 800px) {
  .tree-head, .tree-row { grid-template-columns: 1fr 70px 90px; }
  .h-ca, .tree-row .ca, .h-alert, .tree-row .alert-cell { display: none; }
}

.tree-note { margin-top: 16px; padding: 14px 18px; background: var(--ink-100); border-radius: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-700); text-align: center; }
.tree-note b { color: var(--danger-700); }

/* ───────── sec 9 · du micro au macro + score ───────── */
.pyramid { display:flex; flex-direction: column; gap: 6px; align-items: stretch; }
.py-row { border-radius: 16px; padding: 18px 22px; display:flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--paper); border: 1px solid var(--ink-200); transition: transform .2s ease; }
.py-row:hover { transform: translateX(4px); }
.py-row .l { font-weight: 600; font-size: 16px; }
.py-row .l small { display:block; color: var(--ink-500); font-weight: 400; font-size: 12px; margin-top: 2px; font-family: var(--font-mono); }
.py-row .r { font: 600 14px/1 var(--font-mono); color: var(--ink-700); font-variant-numeric: tabular-nums; }
.py-row.l2 { width: 88%; align-self: flex-start; background: var(--ink-50); }
.py-row.l3 { width: 70%; align-self: flex-start; background: var(--ink-100); }
.py-row.l4 { width: 50%; align-self: flex-start; background: var(--ink-900); color: white; border-color: var(--ink-900); }
.py-row.l4 .l small { color: rgba(255,255,255,0.5); }
.py-row.l4 .r { color: var(--lime-500); }

.score-callout {
  margin-top: 32px; padding: 28px 32px; border-radius: 24px;
  background: var(--ink-900); color: white;
  display:flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap;
  background-image: radial-gradient(ellipse 500px 240px at 100% 100%, rgba(197,243,59,0.18), transparent 60%);
}
.score-gauge .score-num { font: 900 72px/1 var(--font-sans); letter-spacing: -0.04em; color: var(--lime-500); font-variant-numeric: tabular-nums; }
.score-gauge .score-num small { color: rgba(255,255,255,0.4); font-size: 24px; letter-spacing: -0.02em; }
.score-gauge .score-label { font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-top: 8px; }
.score-callout .right { flex: 1; min-width: 260px; max-width: 540px; }
.score-callout .right p { color: rgba(255,255,255,0.7); font-size: 15px; margin: 0; line-height: 1.55; }
.score-callout .right p b { color: white; font-weight: 600; }
.score-meter { width: 100%; height: 8px; background: var(--dark-border); border-radius: 999px; overflow: hidden; margin-top: 14px; }
.score-meter i { display:block; height: 100%; background: linear-gradient(90deg, var(--danger-500), var(--warn-500), var(--lime-500)); width: 72%; border-radius: 999px; }

/* ───────── sec 10 · remplace 5 outils (dark) ───────── */
.converge { position: relative; height: 520px; max-width: 980px; margin: 0 auto; }
@media (max-width: 800px) { .converge { height: auto; max-width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } }
.tool-tile {
  position: absolute;
  background: var(--dark-800);
  border: 1px solid var(--dark-border);
  border-radius: 16px;
  padding: 14px 18px;
  width: 210px;
  color: white;
  box-shadow: 0 12px 30px -16px rgba(0,0,0,0.5);
}
@media (max-width: 800px) { .tool-tile { position: static; width: auto; } }
.tool-tile .role { font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); }
.tool-tile .name { font-size: 17px; font-weight: 600; margin-top: 6px; color: rgba(255,255,255,0.6); text-decoration: line-through; text-decoration-color: var(--danger-500); }
.tool-tile.t1 { top: 6%;  left: 0; }
.tool-tile.t2 { top: 6%;  right: 0; }
.tool-tile.t3 { top: 56%; left: 0; }
.tool-tile.t4 { top: 56%; right: 0; }
.tool-tile.t5 { top: 84%; left: 50%; transform: translateX(-50%); }

.center-tile {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--dark-800);
  border: 1.5px solid var(--lime-500);
  border-radius: 24px;
  padding: 28px 32px;
  text-align: center;
  box-shadow: 0 0 60px rgba(197,243,59,0.3), 0 20px 40px -20px rgba(0,0,0,0.6);
  width: 280px;
}
@media (max-width: 800px) { .center-tile { position: static; transform: none; width: auto; grid-column: 1 / -1; order: -1; } }
.center-tile .logo-mark { width: 36px; height: 36px; margin: 0 auto 14px; border-radius: 10px; }
.center-tile h3 { color: white; font-size: 24px; font-weight: 700; }
.center-tile p { color: rgba(255,255,255,0.6); font-size: 13px; margin: 6px 0 0; }

.converge svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 800px) { .converge svg.lines { display: none; } }
.converge svg.lines path { stroke: var(--lime-500); stroke-width: 1.2; fill: none; stroke-dasharray: 3 5; opacity: 0.5; }
.converge svg.lines circle { fill: var(--lime-500); }

.consol-foot { margin-top: 56px; text-align: center; font: 600 12px/1.5 var(--font-mono); color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; }
.consol-foot b { color: var(--lime-500); }

/* ───────── sec 04 · comment ça marche (snippet + steps + integ) ───────── */
.title-code { font-family: var(--font-mono); font-size: 0.78em; font-weight: 600; background: var(--ink-100); padding: 0.06em 0.32em; border-radius: 12px; vertical-align: 0.12em; letter-spacing: -0.01em; }

.howit-split {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 980px) { .howit-split { grid-template-columns: 1fr; } }

.howit-steps-col { display: flex; flex-direction: column; gap: 14px; }
.howit-illu-col  { display: flex; flex-direction: column; gap: 14px; }

.howit-mini {
  position: relative;
  border: 1px solid var(--ink-200);
  border-radius: 18px;
  padding: 22px 22px 22px 28px;
  background: var(--paper);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px 18px;
  align-items: start;
  flex: 1;
}
.howit-mini .n {
  grid-row: 1 / span 3;
  font: 700 13px/1 var(--font-mono);
  color: var(--ink-500);
  letter-spacing: 0.04em;
  padding-top: 4px;
  border-right: 1px solid var(--ink-200);
  padding-right: 10px;
  align-self: stretch;
}
.howit-mini h4 {
  font-size: 19px; font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.2; margin: 0;
}
.howit-mini p { color: var(--ink-500); font-size: 13.5px; line-height: 1.55; margin: 0; }
.howit-mini .tag-mono {
  justify-self: start;
  font: 600 11px/1.3 var(--font-mono);
  color: var(--ink-900);
  background: var(--ink-100);
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--ink-200);
}
.howit-mini .tag-mono.lime { background: var(--lime-100); border-color: rgba(197,243,59,0.5); }
.howit-mini .tag-mono.dark { background: var(--ink-900); color: var(--lime-500); border-color: var(--ink-900); }

/* tech badges row sous le snippet (au-dessus de la ligne d'intégrations) */
.howit-tech-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.howit-tech {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.howit-tech .ic {
  font: 700 11px/1 var(--font-mono);
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--lime-500); color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.howit-tech .t { font: 700 13.5px/1.2 var(--font-sans); color: var(--ink-900); }
.howit-tech .d { font: 400 11.5px/1.45 var(--font-sans); color: var(--ink-500); }

/* subtle inline integration row, sous les badges */
.integ-inline {
  display: flex; align-items: center; gap: 18px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ink-200);
  flex-wrap: wrap;
}
.integ-inline .label {
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-500);
  display: inline-flex; align-items: center; gap: 8px;
}
.integ-inline .label::after {
  content: ""; width: 1px; height: 14px; background: var(--ink-200);
  margin-left: 4px;
}
.integ-inline .logos {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.integ-inline .logos .ic {
  width: 24px; height: 24px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--font-mono); color: white;
  filter: saturate(0.85);
}
.integ-inline .logos .ic.dark-on { color: var(--ink-900); }
.integ-inline .more {
  font: 600 11px/1 var(--font-mono);
  color: var(--ink-500);
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--ink-100);
}

/* Conteneur principal section "Comment ça marche" · centré + max-width */
.howit-illu-col-full {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}
.howit-illu-col-full .snippet { flex: initial; }

/* Layout snippet à gauche + 3 cards tech à droite (en colonne, mêmes hauteurs) */
.howit-snippet-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.howit-snippet-row .snippet {
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.howit-snippet-row .snippet pre {
  flex: 1;
}
/* Override de .howit-tech-row repeat(3, 1fr) horizontal en mode colonne :
   3 cards empilées, chacune flex:1 pour couvrir équitablement la hauteur
   du snippet à gauche. */
.howit-snippet-row .howit-tech-col {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 10px;
}
.howit-snippet-row .howit-tech-col .howit-tech {
  flex: 1;
  justify-content: center;
}

/* 4e card · intégrations natives avec logos SVG officiels.
   Pas d'icône ic (initiale) en haut comme les autres, juste titre + grille de logos. */
.howit-tech-integ {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.howit-tech-integ .t {
  font: 700 13.5px/1.2 var(--font-sans);
  color: var(--ink-900);
}
.howit-tech-logos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ht-logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, border-color .15s;
}
.ht-logo:hover {
  transform: translateY(-1px);
  border-color: var(--ink-900);
}
.ht-logo svg { width: 14px; height: 14px; display: block; }
.ht-logo-more {
  font: 600 10px/1 var(--font-mono);
  color: var(--ink-500);
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
}

/* Mobile · repasse en stack vertical (snippet au-dessus, tech 3 cols en bas) */
@media (max-width: 900px) {
  .howit-snippet-row { grid-template-columns: 1fr; }
  .howit-snippet-row .howit-tech-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .howit-snippet-row .howit-tech-col .howit-tech { flex: initial; }
}
@media (max-width: 560px) {
  .howit-snippet-row .howit-tech-col { grid-template-columns: 1fr; }
}

/* snippet in column — full width, grows to fill */
.howit-illu-col .snippet {
  max-width: none;
  margin: 0;
  flex: 1;
  display: flex; flex-direction: column;
  padding: 22px 28px 28px;
}
.howit-illu-col .snippet pre {
  flex: 1;
  font-size: 15px;
  line-height: 1.95;
}

.snippet { background: var(--ink-900); border-radius: 24px; padding: 22px 28px 28px; box-shadow: var(--shadow-pop); max-width: 920px; margin: 0 auto; }
.snippet-head { display:flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--dark-border); margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.snippet-head .l { display:flex; align-items: center; gap: 12px; min-width: 0; }
.snippet-head .r { display:flex; align-items: center; gap: 10px; flex-shrink: 0; }
.snippet-head .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--dark-border); display: inline-block; margin-right: 4px; }
.snippet-head .file { font: 600 12px/1 var(--font-mono); color: rgba(255,255,255,0.55); white-space: nowrap; }
.snippet-head .size { font: 700 11px/1 var(--font-mono); padding: 6px 11px; background: var(--lime-500); color: var(--ink-900); border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.snippet pre { margin: 0; font: 500 14px/1.7 var(--font-mono); color: rgba(255,255,255,0.85); white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }
.snippet pre .sx-tag  { color: #93C5FD; }
.snippet pre .sx-attr { color: #FCD34D; }
.snippet pre .sx-str  { color: var(--lime-500); }
.snippet pre .sx-com  { color: rgba(255,255,255,0.4); }
.snippet-copy { background: var(--dark-800); border: 1px solid var(--dark-border); color: rgba(255,255,255,0.7); padding: 6px 12px; border-radius: 8px; font: 600 11px/1 var(--font-mono); cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.snippet-copy:hover { color: var(--lime-500); border-color: var(--lime-500); }

.install-features { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; max-width: 920px; margin-left: auto; margin-right: auto; }
@media (max-width: 800px) { .install-features { grid-template-columns: 1fr; } }
.install-feat { display:flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--ink-200); border-radius: 16px; }
.install-feat .ic { font: 700 12px/1 var(--font-mono); color: var(--ink-900); background: var(--lime-500); width: 36px; height: 36px; border-radius: 10px; display:flex; align-items: center; justify-content: center; flex-shrink: 0; }
.install-feat .t { font-size: 14.5px; font-weight: 600; color: var(--ink-900); }
.install-feat .d { font-size: 13px; color: var(--ink-500); margin-top: 4px; line-height: 1.5; }

.integ-strip { margin-top: 48px; padding: 32px; background: var(--ink-50); border-radius: 24px; border: 1px solid var(--ink-200); }
.integ-strip-head { font-size: 13px; color: var(--ink-500); text-align: center; margin-bottom: 22px; }
.integ-strip-head .mono { color: var(--ink-900); font-weight: 600; }
.integ-strip-grid { display:flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.integ {
  display:inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px;
  background: var(--paper); border: 1px solid var(--ink-200); border-radius: 999px;
  transition: border-color .15s, transform .12s;
  white-space: nowrap;
}
.integ:hover { border-color: var(--ink-900); transform: translateY(-1px); }
.integ .ic { width: 26px; height: 26px; border-radius: 7px; display:flex; align-items: center; justify-content: center; font: 700 12px/1 var(--font-mono); color: white; flex-shrink: 0; }
.integ .nm { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }

/* ───────── sec 12 · tarifs ───────── */
.billing-toggle { display:inline-flex; align-items: center; gap: 0; background: var(--ink-100); border-radius: 999px; padding: 4px; margin-top: 16px; }
.billing-toggle button { padding: 8px 18px; border: 0; background: transparent; cursor: pointer; font: 500 13px/1 var(--font-sans); color: var(--ink-500); border-radius: 999px; }
.billing-toggle button[aria-pressed="true"] { background: var(--paper); color: var(--ink-900); box-shadow: var(--shadow-card); font-weight: 600; }
.billing-toggle .badge { display:inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--lime-500); color: var(--ink-900); font: 700 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px; }

.plans { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.plan {
  background: var(--paper); border: 1px solid var(--ink-200); border-radius: 24px; padding: 28px;
  display:flex; flex-direction: column; gap: 18px;
  /* Reveal au scroll · état initial : invisible + légèrement décalée vers le bas.
     Pattern Linear/Stripe identique aux break-cards et vflow-step. */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s cubic-bezier(0.16, 1, 0.3, 1),
              transform .75s cubic-bezier(0.16, 1, 0.3, 1);
}
.plan.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.plan:nth-child(1).is-revealed { transition-delay: 0ms; }
.plan:nth-child(2).is-revealed { transition-delay: 120ms; }
.plan:nth-child(3).is-revealed { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .plan {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.plan.featured { background: var(--ink-900); border-color: var(--ink-900); color: white; box-shadow: var(--shadow-pop); position: relative; }
.plan.featured .plan-name { color: rgba(255,255,255,0.5); }
.plan.featured .tagline { color: rgba(255,255,255,0.55); }
.plan.featured .price { color: white; }
.plan.featured .price small, .plan.featured .price-volume { color: rgba(255,255,255,0.5); }
.plan.featured ul li { color: rgba(255,255,255,0.75); }
.plan.featured ul li::before { color: var(--lime-500); }
.featured-pill { position: absolute; top: -13px; left: 28px; padding: 5px 12px; border-radius: 999px; background: var(--lime-500); color: var(--ink-900); font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.plan-name { font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-500); }
.plan .tagline { font-size: 13.5px; color: var(--ink-500); margin-top: -10px; line-height: 1.5; }
.price { font: 900 56px/1 var(--font-sans); letter-spacing: -0.04em; color: var(--ink-900); display:flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.price small { font-size: 14px; color: var(--ink-500); font-weight: 500; letter-spacing: 0; }
.price-volume { font: 600 11px/1 var(--font-mono); color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.08em; margin-top: -10px; }
.plan ul { list-style: none; padding: 0; margin: 0; display:flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--ink-700); }
.plan ul li { padding-left: 22px; position: relative; line-height: 1.45; }
.plan ul li::before { content: "✓"; position: absolute; left: 0; color: var(--success-500); font-weight: 700; }
.plan .btn { justify-content: center; margin-top: auto; }

/* ───────── sec 13 · cta final ───────── */
.cta-final { background: var(--ink-900); color: white; padding: 120px 64px; position: relative; overflow: hidden; text-align: center; }
.cta-final::before {
  content:""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 120%; height: 700px;
  background: radial-gradient(ellipse 700px 400px at center, rgba(197,243,59,0.18), transparent 60%);
  pointer-events: none;
}
.cta-final > * { position: relative; z-index: 1; }
/* Mobile-first : min réduit à 28px pour respecter les petits écrans (320-375px). */
.cta-final h2 { font-size: clamp(28px, 4.5vw + 0.5rem, 64px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; margin: 14px auto 0; max-width: 22ch; }
.cta-final h2 .acid { background: var(--lime-500); color: var(--ink-900); padding: 0 12px; border-radius: 10px; display: inline-block; transform: rotate(-1.5deg); }
.cta-final p.lead { color: rgba(255,255,255,0.7); font-size: 18px; margin: 22px auto 0; max-width: 56ch; }
.cta-final-meta { display:flex; gap: 22px; justify-content: center; margin-top: 24px; color: rgba(255,255,255,0.5); font: 600 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; flex-wrap: wrap; }
.cta-final-meta span { display:inline-flex; align-items: center; gap: 8px; }
.cta-final-meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime-500); box-shadow: 0 0 10px var(--lime-500); }

/* ───────── footer ───────── */
.foot {
  padding: 64px; background: var(--ink-900); color: rgba(255,255,255,0.6);
  background-image: radial-gradient(ellipse 600px 240px at 90% 100%, rgba(197,243,59,0.12), transparent 60%);
}
.foot-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .foot { padding: 48px 24px; } }
@media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } }
.foot-col h5 { font: 700 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.45); margin: 0 0 14px; }
.foot-col a { display:block; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 14px; padding: 5px 0; }
.foot-col a:hover { color: white; }
.foot-col .logo { color: white; }
.foot-tag { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 10px; max-width: 26ch; line-height: 1.5; }
.foot-bottom { border-top: 1px solid var(--dark-border); margin-top: 48px; padding-top: 24px; display:flex; justify-content: space-between; font: 600 11px/1 var(--font-mono); color: rgba(255,255,255,0.4); flex-wrap: wrap; gap: 14px; text-transform: uppercase; letter-spacing: 0.08em; }

/* ═══════════════════════════════════════════════════════
   parcours étapes — fond blanc, premium (sec 06 → 11)
   ═══════════════════════════════════════════════════════ */
section.sec.etape { background: var(--paper); }

/* small pill aligning visually with .star-pill but light-bg */
.etape-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--lime-100);
  border: 1px solid rgba(197,243,59,0.5);
  color: var(--ink-900);
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.etape-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime-500);
  box-shadow: 0 0 0 3px rgba(197,243,59,0.25);
}

/* sec-badge · pastille lime plein pour remplacer un sec-num (sans dot, sans tiret) */
.sec-badge {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--lime-500);
  color: var(--ink-900);
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* hero visual container */
.etape-hero {
  background: linear-gradient(180deg, var(--ink-50) 0%, var(--paper) 100%);
  border: 1px solid var(--ink-200);
  border-radius: 24px;
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.etape-hero::before {
  content: ""; position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 600px 200px at 100% 0%, rgba(197,243,59,0.08), transparent 70%);
  pointer-events: none;
}
.etape-hero > * { position: relative; z-index: 1; }

/* variante "flat" pour quand l'enfant a déjà sa propre chrome (task-card) */
.etape-hero-flat {
  background: transparent;
  border: 0;
  padding: 0;
}
.etape-hero-flat::before { display: none; }
.etape-hero-flat > .task-card { max-width: 820px; margin: 0 auto; }

/* supporting features row */
.etape-supports {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-top: 28px;
}
@media (max-width: 900px) { .etape-supports { grid-template-columns: 1fr; } }
.etape-sup {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.etape-sup .ic {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--ink-900); color: var(--lime-500);
  font: 800 12px/1 var(--font-mono);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.etape-sup h5 { font-size: 14.5px; font-weight: 700; color: var(--ink-900); margin: 0; letter-spacing: -0.005em; }
.etape-sup p { font-size: 13px; color: var(--ink-500); margin: 0; line-height: 1.5; }

/* ─── sec 06 · Détection ─── */
.ed-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 980px) { .ed-grid { grid-template-columns: 1fr; } }

.ed-chart {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 18px 18px 24px;
  display: flex; flex-direction: column;
  position: relative;
  min-height: 320px;
}
.ed-chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.ed-chart-head .ed-tab {
  font: 700 12px/1 var(--font-mono);
  color: var(--ink-900);
  background: var(--ink-100);
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--ink-200);
}
.ed-chart-head .ed-period {
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-500);
}
.ed-chart .ed-y {
  display: flex; justify-content: space-between;
  font: 500 10px/1 var(--font-mono); color: var(--ink-500);
  padding-right: 4px;
}
.ed-svg-wrap {
  flex: 1;
  position: relative;
  margin-top: 14px;
}
.ed-svg-wrap svg { width: 100%; height: 100%; display: block; min-height: 180px; }
.ed-anno {
  position: absolute; right: 18px; top: 50px;
  background: var(--ink-900); color: var(--lime-500);
  font: 700 11px/1 var(--font-mono);
  padding: 6px 10px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.ed-anno::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime-500);
  box-shadow: 0 0 0 3px rgba(197,243,59,0.3);
  animation: ed-pulse 1.8s infinite;
}
@keyframes ed-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(197,243,59,0.3); }
  50% { box-shadow: 0 0 0 7px rgba(197,243,59,0.1); }
}
.ed-chart .ed-x {
  display: flex; justify-content: space-between;
  font: 500 10px/1 var(--font-mono); color: var(--ink-500);
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--ink-200);
}

.ed-alert {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.12);
}
.ed-alert::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--danger-500), var(--warn-500));
  border-radius: 16px 16px 0 0;
}
.ed-alert-head {
  display: flex; align-items: center; gap: 10px;
  font: 700 11px/1 var(--font-mono);
  color: var(--danger-500);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.ed-alert-head .ago { margin-left: auto; color: var(--ink-500); font-weight: 500; text-transform: none; }
.ed-alert h4 {
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  line-height: 1.25; margin: 0;
}
.ed-fields {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.ed-fields li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--ink-200);
  font-size: 13px;
}
.ed-fields li:last-child { border-bottom: 0; }
.ed-fields li > span:first-child {
  color: var(--ink-500);
  font: 500 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ed-fields li b { color: var(--ink-900); font-weight: 700; font-family: var(--font-mono); font-size: 12px; }
.ed-cta {
  display: flex; gap: 8px; margin-top: 4px;
  flex-wrap: wrap;
}
.ed-cta .btn { padding: 9px 14px; font-size: 12.5px; }

/* ─── sec 07 · Tâche ─── */
.et-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 18px;
  padding: 28px 30px;
  position: relative;
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.15);
}
.et-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--lime-500), rgba(197,243,59,0.3));
  border-radius: 18px 0 0 18px;
}
.et-head {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 14px;
}
.et-head .et-id {
  font: 700 12px/1 var(--font-mono);
  color: var(--ink-700);
  background: var(--ink-100);
  padding: 5px 10px; border-radius: 6px;
}
.et-head .et-status {
  font: 700 10px/1 var(--font-mono);
  color: var(--warn-700);
  background: rgba(245,158,11,0.14);
  padding: 5px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.et-head .et-priority {
  font: 700 10px/1 var(--font-mono);
  color: var(--danger-700);
  background: rgba(239,68,68,0.12);
  padding: 5px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.et-head .et-auto {
  margin-left: auto;
  font: 600 11px/1 var(--font-mono);
  color: var(--ink-700);
  background: var(--lime-100);
  border: 1px solid rgba(197,243,59,0.5);
  padding: 5px 10px 5px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.et-head .et-auto::before { content: "✦"; color: var(--lime-600); }
.et-title {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 22px; line-height: 1.15;
}
.et-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 700px) { .et-fields { grid-template-columns: repeat(2, 1fr); } }
.et-f {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.et-f label {
  font: 500 10px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-500);
}
.et-f b {
  font-size: 13.5px; color: var(--ink-900); font-weight: 700;
  font-family: var(--font-mono);
}
.et-attach {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-top: 18px; border-top: 1px dashed var(--ink-200);
}
.et-attach-tag {
  font: 600 11px/1 var(--font-mono);
  color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.et-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--font-mono);
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--ink-200);
  padding: 7px 11px; border-radius: 999px;
  cursor: pointer; transition: border-color .15s;
}
.et-pill:hover { border-color: var(--ink-900); }
.et-pill.replay { color: var(--ink-900); background: var(--lime-100); border-color: rgba(197,243,59,0.5); }
.et-pill.replay::before { content: "▶"; color: var(--lime-600); }
.et-card-foot {
  display: flex; gap: 14px; align-items: center;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--ink-200);
  font-size: 13px; color: var(--ink-500);
}
.et-card-foot .arrow {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-900); font-weight: 600;
}

/* ─── sec 08 · replay inline dans la task-meta ─── */
.task-replay {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  background: var(--ink-900);
  border: 1px solid var(--ink-900);
  border-radius: 999px;
  text-decoration: none;
  transition: transform .15s;
  position: relative;
  overflow: hidden;
}
.task-replay:hover { transform: translateY(-1px); }
.task-replay .play {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--lime-500);
  color: var(--ink-900);
  font: 800 10px/1 var(--font-mono);
  display: inline-flex; align-items: center; justify-content: center;
  padding-left: 2px;
  flex: none;
}
.task-replay .thumb {
  display: inline-flex; gap: 2px; align-items: end;
  height: 18px;
}
.task-replay .thumb i {
  width: 3px; background: rgba(255,255,255,0.35); border-radius: 1px;
}
.task-replay .thumb i:nth-child(1) { height: 40%; }
.task-replay .thumb i:nth-child(2) { height: 75%; background: var(--lime-500); }
.task-replay .thumb i:nth-child(3) { height: 100%; background: var(--danger-500); }
.task-replay .thumb i:nth-child(4) { height: 55%; }
.task-replay .meta {
  font: 600 12px/1.1 var(--font-sans);
  color: white;
}
.task-replay .dur {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.15);
}

/* ─── sec 09 · Pistes (hypothèses causales) ─── */
.ei-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 800px) { .ei-grid { grid-template-columns: 1fr; } }
.ei-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 22px 24px 20px;
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
}
.ei-card.high {
  border-color: rgba(197,243,59,0.6);
  background: linear-gradient(180deg, var(--lime-100) 0%, var(--paper) 28%);
}
.ei-card.high::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--lime-500);
}
.ei-card.medium::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--warn-500); opacity: 0.55;
}
.ei-card.dismissed {
  background: var(--ink-50);
  opacity: 0.7;
}
.ei-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.ei-num {
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-500);
}
.ei-confidence {
  font: 700 10px/1 var(--font-mono);
  padding: 5px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.08em;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink-100); color: var(--ink-700);
}
.ei-confidence::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.ei-confidence.high { background: var(--ink-900); color: var(--lime-500); }
.ei-confidence.medium { background: rgba(245,158,11,0.14); color: var(--warn-700); }
.ei-confidence.low { background: var(--ink-100); color: var(--ink-700); }
.ei-confidence.dismissed { background: var(--ink-100); color: var(--ink-500); }
.ei-confidence b { font-weight: 800; }
.ei-card h4 {
  font-size: 19px; font-weight: 700; letter-spacing: -0.015em;
  margin: 0; line-height: 1.2;
}
.ei-card.dismissed h4 { color: var(--ink-700); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ink-300); }
.ei-card p {
  font-size: 13.5px; color: var(--ink-700); line-height: 1.55;
  margin: 0;
}
.ei-card.dismissed p { color: var(--ink-500); }
.ei-evidence {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--ink-200);
}
.ei-sig {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1.3 var(--font-mono);
  color: var(--ink-700);
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  padding: 5px 9px; border-radius: 6px;
}
.ei-actions {
  display: flex; gap: 8px; margin-top: 2px;
  flex-wrap: wrap;
}
.ei-actions .btn { padding: 7px 12px; font-size: 12px; }

/* ─── CTA pair · 2 boutons intégrés en pied de chaque section (sections 01-07) ─── */
.section-ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 56px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .section-ctas { margin-top: 40px; gap: 10px; }
  .section-ctas .btn { width: 100%; justify-content: center; }
}

/* ─── CTA strip · banner inserted between sections ─── */
.cta-strip {
  background: var(--ink-900);
  color: white;
  padding: 36px 64px;
  border-bottom: 1px solid var(--dark-border);
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px) { .cta-strip { padding: 28px 24px; } }
.cta-strip::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 700px 240px at 90% 50%, rgba(197,243,59,0.14), transparent 60%);
  pointer-events: none;
}
.cta-strip-inner {
  display: flex; align-items: center; gap: 32px;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.cta-strip-inner > .l { flex: 1; min-width: 280px; }
.cta-strip-inner h3 {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  margin: 4px 0 0;
  color: white;
  line-height: 1.2;
  text-wrap: balance;
  max-width: 32ch;
}
.cta-strip-inner .sub {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-top: 8px;
}
.cta-strip-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* small inline CTA helper below snippet etc */
.inline-cta {
  display: flex; justify-content: center; align-items: center;
  gap: 18px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.inline-cta .hint {
  font: 600 12px/1.4 var(--font-mono);
  color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ─── sec 04 · Tracker campagnes (heatmap matriciel, dark) ─── */
.hm-wrap {
  background: var(--dark-800);
  border: 1px solid var(--dark-border);
  border-radius: 18px;
  padding: 20px 22px 22px;
  overflow-x: auto;
}
.hm-toolbar {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dark-border);
  margin-bottom: 16px;
  color: rgba(255,255,255,0.5);
  font: 600 11px/1 var(--font-mono);
  flex-wrap: wrap;
}
.hm-toolbar .filter {
  padding: 5px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--dark-border);
  color: rgba(255,255,255,0.7);
  display: inline-flex; align-items: center; gap: 6px;
}
.hm-toolbar .filter.active { background: var(--lime-500); border-color: var(--lime-500); color: var(--ink-900); }
.hm-toolbar .grow { flex: 1; }

.hm-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}
.hm-table th,
.hm-table td {
  padding: 8px 10px;
  text-align: center;
  font: 600 12px/1 var(--font-mono);
  color: rgba(255,255,255,0.85);
  border: 1px solid transparent;
}
.hm-table th {
  color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700;
  padding-bottom: 12px;
  font-size: 10px;
}
.hm-table th.spent, .hm-table td.spent { text-align: right; color: rgba(255,255,255,0.55); }
.hm-table th.name, .hm-table td.name {
  text-align: left; padding-right: 14px; font-size: 12.5px; min-width: 200px;
}
.hm-table td.name { color: white; font-weight: 600; }
.hm-table tbody tr.lv2 td.name { padding-left: 22px; color: rgba(255,255,255,0.8); font-weight: 500; }
.hm-table tbody tr.lv3 td.name { padding-left: 36px; color: rgba(255,255,255,0.7); font-weight: 500; font-size: 11.5px; }
.hm-table tbody tr.lv4 td.name {
  padding-left: 50px; color: rgba(255,255,255,0.55); font-weight: 500;
  font-size: 11.5px; font-family: var(--font-mono);
}
.hm-table tbody tr.lv1 { border-top: 1px solid var(--dark-border); }
.hm-table tbody tr.lv1 td { padding-top: 12px; padding-bottom: 12px; background: rgba(255,255,255,0.02); }

.hm-cell {
  display: inline-block;
  min-width: 56px;
  padding: 5px 8px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.hm-cell.s5 { background: var(--lime-500); color: var(--ink-900); font-weight: 700; }
.hm-cell.s4 { background: rgba(197,243,59,0.55); color: var(--ink-900); font-weight: 700; }
.hm-cell.s3 { background: rgba(197,243,59,0.18); color: var(--lime-500); }
.hm-cell.s2 { background: rgba(245,158,11,0.25); color: #FCD34D; }
.hm-cell.s1 { background: rgba(239,68,68,0.25); color: #FCA5A5; }
.hm-cell.s0 { background: rgba(239,68,68,0.55); color: white; font-weight: 700; }
.hm-cell.deviant { box-shadow: 0 0 0 1.5px var(--danger-500); animation: hm-pulse 1.6s infinite; }
@keyframes hm-pulse {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--danger-500); }
  50% { box-shadow: 0 0 0 1.5px var(--danger-500), 0 0 12px rgba(239,68,68,0.4); }
}

.hm-legend {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--dark-border);
  color: rgba(255,255,255,0.45);
  font: 600 11px/1 var(--font-mono);
  flex-wrap: wrap;
}
.hm-legend .scale { display: flex; gap: 2px; }
.hm-legend .scale i { width: 22px; height: 12px; border-radius: 2px; display: inline-block; }
.hm-legend .grow { flex: 1; }

.hm-insight {
  margin-top: 16px;
  background: rgba(197,243,59,0.06);
  border: 1px solid rgba(197,243,59,0.25);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  display: flex; gap: 12px; align-items: center;
}
.hm-insight .ico {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--lime-500); color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  font: 800 14px/1 var(--font-sans);
  flex: none;
}
.hm-insight b { color: var(--lime-500); }

/* ─── sec 10 · Correctif (deploy + timeline) ─── */
.ef-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 900px) { .ef-grid { grid-template-columns: 1fr; } }

.ef-deploy {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 26px 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.ef-deploy::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--lime-500);
  border-radius: 16px 0 0 16px;
}
.ef-h {
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-500);
}
.ef-deploy h3 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 6px; line-height: 1.2;
}
.ef-rows { display: flex; flex-direction: column; gap: 8px; }
.ef-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  font-size: 13px;
}
.ef-row label {
  font: 500 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-500);
}
.ef-row b {
  color: var(--ink-900); font-weight: 700; font-family: var(--font-mono); font-size: 12.5px;
}
.ef-row .commits {
  display: flex; gap: 4px;
}
.ef-row .commits i {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 9px/1 var(--font-mono);
  color: white; border: 2px solid var(--paper);
}
.ef-cta {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px;
  background: var(--ink-900);
  border-radius: 12px;
}
.ef-cta .btn { align-self: flex-start; }
.ef-cta .hint {
  font: 500 11px/1.4 var(--font-mono);
  color: rgba(255,255,255,0.55);
}

.ef-timeline {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.ef-tl-head {
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-500);
  margin-bottom: 4px;
}
.ef-tl-list {
  display: flex; flex-direction: column;
  position: relative;
}
.ef-tl-list::before {
  content: ""; position: absolute;
  left: 11px; top: 8px; bottom: 8px;
  width: 2px; background: var(--ink-200);
}
.ef-tl-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  position: relative;
  z-index: 1;
}
.ef-tl-item::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink-300);
  margin-left: 4px;
}
.ef-tl-item.done::before {
  background: var(--lime-500); border-color: var(--lime-500);
}
.ef-tl-item.done::after {
  content: "✓"; position: absolute; left: 8px;
  color: var(--ink-900); font: 800 10px/1 var(--font-mono);
}
.ef-tl-item.active::before {
  background: var(--ink-900); border-color: var(--ink-900);
  box-shadow: 0 0 0 4px rgba(10,10,10,0.1);
}
.ef-tl-item.future::before {
  background: var(--paper); border-color: var(--ink-200);
  border-style: dashed;
}
.ef-tl-item .label {
  font-size: 13.5px; color: var(--ink-900); font-weight: 600;
}
.ef-tl-item.future .label { color: var(--ink-500); font-weight: 500; }
.ef-tl-item .ts {
  font: 500 11px/1 var(--font-mono); color: var(--ink-500);
}

/* ─── sec 11 · Mesure (premium snapshot avant/après) ─── */
.em-compare {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .em-compare { grid-template-columns: 1fr; }
  .em-arrow { display: none; }
}
.em-card {
  background: var(--paper);
  border-radius: 18px;
  padding: 26px 28px 24px;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--ink-200);
}
.em-card.before {
  background: linear-gradient(180deg, var(--ink-900) 0%, #1a1414 100%);
  color: white;
  border-color: rgba(239,68,68,0.2);
  box-shadow: 0 12px 32px -16px rgba(239,68,68,0.25);
}
.em-card.after {
  background: linear-gradient(180deg, var(--paper) 0%, #f8fce8 100%);
  border-color: rgba(197,243,59,0.5);
  box-shadow: 0 12px 32px -16px rgba(197,243,59,0.4);
}
.em-card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.em-tag {
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 6px 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.em-tag.danger { background: rgba(239,68,68,0.18); color: #FCA5A5; }
.em-tag.success { background: var(--lime-100); color: var(--success-600); border: 1px solid rgba(197,243,59,0.5); }
.em-period {
  font: 600 11px/1 var(--font-mono);
  color: rgba(255,255,255,0.5);
}
.em-card.after .em-period { color: var(--ink-500); }

.em-label {
  font-size: 13px; color: rgba(255,255,255,0.6);
  margin: 0;
}
.em-card.after .em-label { color: var(--ink-500); }
.em-label b {
  font-family: var(--font-mono); font-size: 13px;
  color: white;
}
.em-card.after .em-label b { color: var(--ink-900); }

.em-num {
  font: 900 96px/0.9 var(--font-sans);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: white;
  display: flex; align-items: baseline; gap: 4px;
  margin: 4px 0;
}
.em-num sup {
  font-size: 36px;
  font-weight: 700;
  vertical-align: top;
  margin-top: 12px;
  opacity: 0.6;
}
.em-card.after .em-num { color: var(--ink-900); }
.em-num.improved { color: var(--success-600); }

.em-chart {
  display: flex; align-items: end; gap: 6px;
  height: 60px;
  padding: 0 2px;
}
.em-chart i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: rgba(255,255,255,0.15);
  position: relative;
}
.em-chart i.peak { background: var(--danger-500); }
.em-card.before .em-chart i.peak { background: var(--danger-500); box-shadow: 0 0 14px rgba(239,68,68,0.5); }
.em-card.after .em-chart i { background: var(--ink-200); }
.em-card.after .em-chart i.peak { background: var(--success-500); }

.em-foot {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.em-card.after .em-foot { border-top-color: var(--ink-200); }
.em-foot > div { display: flex; flex-direction: column; gap: 4px; }
.em-foot label {
  font: 500 10px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.4);
}
.em-card.after .em-foot label { color: var(--ink-500); }
.em-foot b {
  font: 700 14px/1 var(--font-mono);
  color: white;
}
.em-card.after .em-foot b { color: var(--ink-900); }
.em-foot b.loss { color: var(--danger-500); }
.em-foot b.gain { color: var(--success-600); }

.em-arrow {
  display: flex; align-items: center; justify-content: center;
  font: 900 32px/1 var(--font-mono);
  color: var(--ink-300);
}
.em-arrow .lime { color: var(--lime-600); font-size: 11px; margin-top: 4px; }

/* verdict bar — premium */
.em-verdict {
  margin-top: 22px;
  background: var(--ink-900);
  color: white;
  border-radius: 18px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.em-verdict::before {
  content: ""; position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 600px 240px at 20% 50%, rgba(197,243,59,0.18), transparent 60%);
  pointer-events: none;
}
.em-verdict > * { position: relative; z-index: 1; }

.em-verdict-stamp {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 22px;
  background: var(--lime-500);
  color: var(--ink-900);
  border-radius: 14px;
  text-align: center;
  transform: rotate(-3deg);
  box-shadow: 0 8px 20px -6px rgba(197,243,59,0.4);
}
.em-verdict-stamp .stamp-tag {
  font: 800 18px/1 var(--font-sans);
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 6px;
}
.em-verdict-stamp .stamp-tag::before { content: "✓"; }
.em-verdict-stamp .stamp-conf {
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0.7;
}

.em-verdict-body { display: flex; flex-direction: column; gap: 14px; }
.em-verdict-text {
  font-size: 16px; line-height: 1.45;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
.em-verdict-text b { color: white; font-weight: 700; }
.em-verdict-text b.gain { color: var(--lime-500); }
.em-timeline {
  display: flex; align-items: center; gap: 4px;
  font: 600 11px/1 var(--font-mono);
  color: rgba(255,255,255,0.55);
}
.em-timeline .bar {
  flex: 1; height: 6px; border-radius: 3px;
}
.em-timeline .bar.before {
  background: linear-gradient(90deg, transparent, var(--danger-500));
  opacity: 0.5;
}
.em-timeline .bar.after {
  background: linear-gradient(90deg, var(--lime-500), transparent);
}
.em-timeline .mark {
  padding: 5px 10px;
  background: var(--lime-500);
  color: var(--ink-900);
  border-radius: 6px;
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.em-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.em-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 14px 16px;
}
.em-stat label {
  font: 500 10px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  display: block; margin-bottom: 6px;
}
.em-stat b {
  font: 700 18px/1 var(--font-sans);
  color: white;
  letter-spacing: -0.01em;
}
.em-stat b.gain { color: var(--lime-500); }

/* ═══════════════════════════════════════════════════════════════════
   Mobile-first responsive hardening — Ali 2026-05-26
   ────────────────────────────────────────────────────────────────────
   Patch consolidé qui durcit les points non-couverts par les media
   queries existantes. Chaque règle cible un problème identifié pendant
   l'audit responsive du template original (paddings massifs, dimensions
   fixes, débordement à 320px, etc.).
   Le CSS d'origine est desktop-first — ce bloc ajoute les bascules
   manquantes pour garantir une adaptation correcte à tout écran.
   ═══════════════════════════════════════════════════════════════════ */

/* ── (page wrapper full-bleed désormais global — voir .page plus haut,
       la règle mobile spécifique n'est plus nécessaire) ── */

/* ── Topbar : padding fluide + autoriser le wrap proprement sur mobile ── */
@media (max-width: 720px) {
  .topbar {
    padding: 14px 16px;
    gap: 10px;
  }
  .topbar-right { gap: 6px; }
}

/* ── Hero : padding fluide + reserve d'espace pour le funnel-stage ── */
@media (max-width: 720px) {
  .hero { padding: 48px 16px 0; }
  .hero-lead { font-size: 16px; margin-top: 22px; }
  .hero-ctas { gap: 8px; margin-top: 28px; }
  .hero-meta-row { gap: 14px; margin-top: 18px; }
  .funnel-stage { margin-top: 56px; }
}

/* ── Sections génériques · réduire encore plus le padding à très petit écran ── */
@media (max-width: 560px) {
  section.sec { padding: 40px 16px; }
  section.sec.tight { padding-top: 32px; padding-bottom: 32px; }
  .sec-head { margin-bottom: 36px; gap: 18px; }
  .sec-desc { font-size: 16px; }
}

/* ── CTA strip (banner entre sections) sur très petit écran ── */
@media (max-width: 560px) {
  .cta-strip { padding: 24px 16px; }
  .cta-strip-inner { gap: 18px; }
  .cta-strip-inner h3 { font-size: 22px; }
}

/* ── CTA final : padding massif 120/64 → cassé sur mobile ── */
@media (max-width: 900px) {
  .cta-final { padding: 80px 24px; }
}
@media (max-width: 560px) {
  .cta-final { padding: 56px 16px; }
  .cta-final p.lead { font-size: 16px; margin-top: 18px; }
  .cta-final-meta { gap: 14px; margin-top: 20px; font-size: 11px; }
}

/* ── Footer : padding fluide sur très petit écran ── */
@media (max-width: 560px) {
  .foot { padding: 40px 16px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .foot-bottom { margin-top: 32px; padding-top: 20px; }
}

/* ── Hero h1 .acid : transform: rotate(-1.5deg) peut décaler hors écran
       sur 320 px quand l'élément est gros. Atténuer la rotation. ── */
@media (max-width: 560px) {
  .hero h1 .acid,
  .cta-final h2 .acid { transform: rotate(-0.8deg); padding: 0 8px; border-radius: 8px; }
}

/* ── Verdict bar (sec 06) · padding fluide ── */
@media (max-width: 560px) {
  .verdict-bar { padding: 18px 20px; gap: 16px; }
  .verdict-text { font-size: 14px; }
  .num-hero { font-size: 56px; }
  .num-mid { font-size: 32px; }
  .kpi-snap .num-big { font-size: 56px; }
}

/* ── Score callout (sec 09) · scale du nombre énorme ── */
@media (max-width: 560px) {
  .score-callout { padding: 20px 18px; gap: 18px; }
  .score-gauge .score-num { font-size: 52px; }
  .score-callout .right { min-width: 0; }
}

/* ── Plans tarifs · padding interne adapté ── */
@media (max-width: 560px) {
  .plan { padding: 22px; gap: 14px; }
  .price { font-size: 44px; }
}

/* ── Snippet : la <pre> doit pouvoir s'enrouler sur mobile (déjà
       white-space: pre-wrap ligne 1069, on durcit le padding) ── */
@media (max-width: 560px) {
  .snippet { padding: 16px 16px 18px; }
  .snippet pre { font-size: 12px; line-height: 1.7; }
  .snippet-head { padding-bottom: 12px; margin-bottom: 14px; gap: 10px; }
}

/* ── How-it-works mini : padding/grid plus serré sur mobile ── */
@media (max-width: 560px) {
  .howit-mini { padding: 18px; grid-template-columns: 32px 1fr; gap: 12px 14px; }
  .howit-mini h4 { font-size: 17px; }
}

/* ── Pyramid pseudo-décor : forcer 100 % de largeur sur mobile pour
       éviter les barres décoratives à 50/70/88 % qui paraissent cassées ── */
@media (max-width: 560px) {
  .py-row.l2, .py-row.l3, .py-row.l4 { width: 100%; }
  .py-row { padding: 14px 16px; gap: 12px; }
  .py-row .l { font-size: 14px; }
}

/* ── Star pill / eyebrows · espacement réduit ── */
@media (max-width: 560px) {
  .eyebrow { font-size: 10px; gap: 8px; }
  .etape-pill { padding: 5px 10px; font-size: 10px; }
}

/* ── Tree (sec 08) · padding réduit + scroll horizontal de secours
       si la grille à 3 colonnes serre trop ── */
@media (max-width: 560px) {
  .tree { padding: 14px; }
  .tree-head, .tree-row { padding: 10px 8px; gap: 6px; }
  .tree-row.l2 .label { padding-left: 14px; }
  .tree-row.l3 .label { padding-left: 28px; }
  .tree-row.l4 .label { padding-left: 42px; }
}

/* ── Compare cards (sec 02) · réduire min-height qui crée des cartes
       très hautes mais quasi-vides sur mobile ── */
@media (max-width: 560px) {
  .compare-card { padding: 22px; min-height: 0; gap: 14px; }
  .compare-card h3 { font-size: 22px; }
  .compare-card.v2 { min-height: 0; }
}

/* ── Break cards · compression mobile (grid 2 cols à 320-560 px).
   À 320 px : 137 px de large par card → internals très serrés mais
   lisibles. À 560 px : 268 px de large par card, confortable. ── */
@media (max-width: 560px) {
  .break-card {
    padding: 12px;
    min-height: 0;
    gap: 8px;
    border-radius: 14px;
  }
  .break-card .num { font-size: 9.5px; }
  .break-card h4 { font-size: 12.5px; line-height: 1.25; }
  .break-card .desc { font-size: 11px; line-height: 1.4; }
  .break-vis {
    min-height: 70px;
    padding: 8px;
    border-radius: 8px;
  }
  /* Compress des visualisations internes pour rester lisibles à 137 px */
  .v-error { font-size: 9px; padding: 5px 6px; line-height: 1.3; }
  .v-perf { height: 40px; gap: 2px; }
  .v-section { height: 9px; }
  .v-leak { font-size: 9px; }
  .v-hier .h-row { font-size: 9px; gap: 4px; }
  .v-hier .h-row .dot { width: 5px; height: 5px; }
  .v-abnormal i { height: 5px; }
  .v-abnormal i.spike { height: 11px; }
  .v-mobile { gap: 7px; }
  .v-mobile-frame { width: 28px; height: 44px; }
  .v-mobile .mono { font-size: 9px !important; }
  .v-tracking { font-size: 9px; line-height: 1.45; }
}
@media (max-width: 380px) {
  .break-card { padding: 10px; gap: 6px; }
  .break-card h4 { font-size: 11.5px; }
  .break-card .desc { font-size: 10.5px; }
}

/* ── Frame cards (sec 04 dark) · idem ── */
@media (max-width: 560px) {
  .frame-card { padding: 14px; min-height: 0; gap: 12px; }
}

/* ── KPI snap (sec 06) · idem ── */
@media (max-width: 560px) {
  .kpi-snap { padding: 20px; min-height: 0; }
}

/* ── (override 1 col < 380 px retiré : remplacé par le layout flex
       horizontal des 5 mini-browsers défini plus haut) ── */

/* ── Card padding générique : .card avec padding 24 → trop pour 320 px ── */
@media (max-width: 560px) {
  .card { padding: 18px; gap: 12px; border-radius: 18px; }
}

/* ── Empêcher tout overflow horizontal accidentel (filet de sécurité) ── */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* ── Tap targets : tous les boutons et liens nav doivent rester ≥ 36 px
       de hauteur tactile sur mobile (WCAG / iOS recommandation) ── */
@media (max-width: 560px) {
  .btn { padding: 12px 18px; }
  .btn-sm { padding: 10px 14px; }
  .btn-lg { padding: 14px 22px; font-size: 14px; }
  .nav-pill { padding: 10px 14px; }
}

/* (Bloc carrousel mobile + dots .compare-dots retiré · section 02 remplacée
   par le Scanner reveal qui n'a pas besoin de carrousel) */

/* Reveal au scroll · TOUTES les sections sauf les intros de haut de page qui
   doivent apparaître immédiatement au load : .hero (landing) et .page-hero
   (pages légales, qui ne chargent aucun JS — sans cette exclusion leur hero
   resterait bloqué à opacity:0). Pattern fade-in + translateY 24 px → 0,
   déclenché par IntersectionObserver (cf. landing-v2.html). Easing cubic-bezier
   doux identique aux break-cards pour cohérence visuelle Linear/Stripe. */
.page > section:not(.hero):not(.page-hero) {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .75s cubic-bezier(0.16, 1, 0.3, 1),
    transform .75s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Spécificité alignée sur la règle masquée ci-dessus (:not(.hero):not(.page-hero))
   pour que .is-revealed gagne bien le calcul de cascade — sinon les sections
   restent à opacity:0 malgré la classe ajoutée par l'IntersectionObserver. */
.page > section:not(.hero):not(.page-hero).is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .page > section:not(.hero):not(.page-hero) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ── Contenu cappé sur desktop (≥ 901 px) ──────────────────────────
   Sans cette règle, sur 1920 px ou 4K, les sections collent quasiment
   aux bords car leur padding latéral est fixe (64 px d'origine).
   Le padding latéral devient fluide : 48 px minimum jusqu'à 1376 px,
   puis croît linéairement de sorte que la zone utile interne reste
   plafonnée à ≈1280 px centrée — confort de lecture sur grand écran
   tout en gardant un fond pleine largeur. ── */
@media (min-width: 901px) {
  section.sec,
  .hero,
  .cta-final,
  .foot,
  .cta-strip,
  .topbar {
    padding-left: max(48px, calc((100vw - 1280px) / 2));
    padding-right: max(48px, calc((100vw - 1280px) / 2));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Pages légales V2 (a-propos, cgu, rgpd, contact)
   Hero clair + prose article — tokens DS V2 (paper + ink, no lime sur clair)
   ═══════════════════════════════════════════════════════════════════════ */

/* Page hero · top intro */
.page-hero {
  padding: 96px 64px 56px;
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
}
.page-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.page-hero-title {
  font-size: clamp(36px, 5vw + 0.5rem, 60px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink-900);
  margin: 6px 0 0;
  text-wrap: balance;
}
.page-hero-lead {
  font-size: 18px;
  color: var(--ink-700);
  line-height: 1.55;
  margin: 0;
  max-width: 64ch;
}
.legal-meta {
  font: 600 12px/1.6 var(--font-mono);
  color: var(--ink-500);
  letter-spacing: 0.04em;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  margin-top: 8px;
  max-width: 64ch;
}
.legal-meta b { color: var(--ink-900); font-weight: 700; }

/* Prose · article body */
.prose {
  padding: 64px 64px 96px;
  background: var(--paper);
}
.prose-inner {
  max-width: 720px;
  margin: 0 auto;
}
.prose h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  margin: 56px 0 18px;
  line-height: 1.2;
  text-wrap: balance;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 32px 0 10px;
}
.prose p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-700);
  margin: 0 0 16px;
}
.prose p strong, .prose li strong { color: var(--ink-900); font-weight: 600; }
.prose p em, .prose li em { font-style: italic; }
.prose ul, .prose ol {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-700);
  padding-left: 24px;
  margin: 0 0 16px;
}
.prose li { margin-bottom: 10px; }
.prose a {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-color: var(--ink-300);
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration-color: var(--ink-900); }
.prose code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--ink-100);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink-900);
}
.prose hr {
  border: none;
  border-top: 1px solid var(--ink-200);
  margin: 48px 0;
}

/* Story steps (a-propos · jour 1, semaine 2, mois 3) */
.story-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0 32px;
}
.story-step {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 18px 20px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 12px;
}
.story-step .when {
  font: 700 11px/1.4 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-500);
}
.story-step .what {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-700);
}
.story-step .what strong { color: var(--ink-900); font-weight: 600; }
.story-step .what em { font-style: italic; }

/* Pillars (a-propos · 4 piliers) */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 32px;
}
.pillar {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pillar .num {
  font: 700 11px/1 var(--font-mono);
  color: var(--ink-500);
  letter-spacing: 0.1em;
}
.pillar .t {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.pillar .d {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-700);
}
.pillar .d strong { color: var(--ink-900); font-weight: 600; }

/* Contact grid (page contact · 4 cards) */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 16px 0 32px;
}
.contact-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-card .c-num {
  font: 700 11px/1 var(--font-mono);
  color: var(--ink-500);
  letter-spacing: 0.1em;
}
.contact-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
  letter-spacing: -0.015em;
}
.contact-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}
.contact-card .c-email {
  margin-top: 4px;
  font: 700 14px/1 var(--font-mono);
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-color: var(--ink-300);
  text-underline-offset: 3px;
}
.contact-card .c-email:hover { text-decoration-color: var(--ink-900); }

/* Hero quote block (a-propos John Wanamaker) */
.hero-quote-block {
  background: var(--ink-900);
  color: var(--paper);
  padding: 80px 64px;
  text-align: center;
}
.hero-quote-block .q-eyebrow {
  display: inline-block;
  font: 700 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--lime-500);
  margin-bottom: 28px;
}
.hero-quote-block q {
  display: block;
  font-style: italic;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--paper);
  font-weight: 400;
  quotes: "«\00a0" "\00a0»";
  max-width: 800px;
  margin: 0 auto;
}
.hero-quote-block q::before { content: open-quote; }
.hero-quote-block q::after { content: close-quote; }
.hero-quote-block .orig {
  display: block;
  margin-top: 18px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
}
.hero-quote-block .who {
  display: block;
  margin-top: 32px;
  font: 700 12px/1.4 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.85);
}
.hero-quote-block .who .role {
  display: block;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255,255,255,0.45);
  margin-top: 6px;
}
.hero-quote-block .punchline {
  margin-top: 48px;
  font-size: 15.5px;
  color: rgba(255,255,255,0.7);
}
.hero-quote-block .punchline .hi {
  color: var(--lime-500);
  font-weight: 600;
}

/* Responsive pages légales */
@media (max-width: 900px) {
  .page-hero { padding: 80px 32px 40px; }
  .prose { padding: 48px 32px 64px; }
  .hero-quote-block { padding: 56px 32px; }
  .pillars, .contact-grid { grid-template-columns: 1fr; }
  .story-step { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
}
@media (max-width: 540px) {
  .page-hero { padding: 64px 20px 32px; }
  .prose { padding: 36px 20px 48px; }
  .page-hero-title { font-size: 32px; }
  .prose h2 { font-size: 22px; }
}