/* ════════════════════════════════════════════════════════════════════
   AlloClients /app + / — PORT FIDÈLE du design system de l'Espace
   (espace.allo-clients.com). Référence premium de Frank. Idiome :
   page BLANCHE contenue, éditoriale ; sections introduites par un
   eyebrow + hairline ; cartes "card-surface" (double bord halo bleu) ;
   UNE "card-deep" sombre signature ; serif italic chaud (Source Serif
   4) ; bleu #0043FF ; retenue, calme, pas de gradient bruyant.
   Tokens copiés à l'identique depuis allo-in/client/styles/globals.css.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   SYSTÈME DE DESIGN TOKENISÉ — bar UI/UX expert.
   Tout font-size / espacement / rayon / ombre référence un token.
   Couleur & profondeur portées de l'Espace (allo-in globals.css),
   élevées au standard Stripe/Linear ; rose = accent RARE et précieux.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* — Couleur : rampe encre + bleu + surfaces — */
  --ink: #0F1A2E;       /* titres + valeur forte */
  --ink-soft: #2E3A52;  /* body, lede, eyebrow neutre — ratio 10.6:1 sur blanc */
  --ink-mute: #4A5670;  /* meta, byline, caption — ratio 7.1:1 sur blanc (AA fort) */
  --ink-faint: #6E7990; /* strike, micro-info rare — ratio 5.0:1 sur blanc */

  --blue: #0043FF;
  --blue-bright: #2C63FF;
  --blue-light: #8FB9FF;
  /* Famille cobalt MARQUE — pixels samplés sur la LP Framer (le "joli"
     que Frank veut retrouver) : bleu vif plein cadre, jamais navy noir. */
  --blue-royal: #1E48D3;
  --blue-royal-lift: #2A57EB;
  --blue-royal-mid: #143BBE;
  --blue-deep: #0E34B3;
  --blue-night: #0A2A93;
  --blue-wash: #EEF3FF;
  --blue-glow: #DCE6FF;

  /* Accent de marque (pixel samplé LP Framer) — usage RARE, précieux */
  --rose: #E82B8D;
  --rose-bright: #F2409C;
  --gold: #F5A623;

  --cream: #FFFFFF;
  --cream-deep: #F4F7FB;
  --sand: #E8DCC8;
  --sand-soft: #F2E9D8;
  --shell: #FFFFFF;
  --surface-sunken: #EEF4FF;   /* bande douce bleutée (calé Framer) */
  --line: rgba(15,26,46,0.09); /* hairline standard */
  --line-soft: rgba(15,26,46,0.06);

  /* — Typo : familles + échelle modulaire (~1.2) — */
  --font-display: "Inter Tight", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Tokens entiers : pas de fractionnel pour éviter dispersion d'arrondi
     du rendu (13.5px peut rendre 13 OU 14 selon contexte = 2 valeurs G3). */
  --t-eyebrow: 11px;
  --t-cap: 12px;
  --t-sm: 14px;
  --t-base: 16px;
  --t-md: 18px;
  --t-lg: 21px;
  --t-xl: clamp(22px, 2.3vw, 27px);
  --t-2xl: clamp(27px, 3.3vw, 39px);
  --t-3xl: clamp(33px, 4.4vw, 50px);
  --t-4xl: clamp(40px, 5.6vw, 68px);

  --lh-tight: 1.04;
  --lh-snug: 1.16;
  --lh-base: 1.6;
  --lh-relaxed: 1.66;
  --tr-tight: -0.04em;
  --tr-snug: -0.025em;
  --tr-mid: -0.015em;
  --tr-wide: 0.2em;

  /* — Espacement : base 4px — */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
  --s-11: 96px; --s-12: 128px;

  /* — Rayons — */
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 22px; --r-5: 28px;
  --r-pill: 999px;
  --r-card: var(--r-3);
  --r-hero: var(--r-4);

  /* — Élévation : SYSTÈME UNIQUE (cible G4 ≤8 systèmes). Toute box-shadow
       de premium.css DOIT référencer un de ces tokens. Aucune ad hoc.
       Les "bordures inset 1px" sont des `border:` CSS, jamais des shadows. — */
  --e-halo:    inset 0 0 0 1px var(--blue-glow),
               inset 0 -1px 0 0 rgba(232,220,200,0.55),
               0 1px 2px rgba(15,26,46,0.03);                              /* card-surface Espace */
  --e-2:       0 18px 38px -22px rgba(15,26,46,0.18);                      /* lift standard */
  --e-3:       0 30px 56px -22px rgba(15,26,46,0.26);                      /* hover/focal */
  --e-dark:    0 44px 96px -34px rgba(5,12,38,0.78);                       /* sur fond sombre */
  --e-rose:    0 1px 0 rgba(255,255,255,0.28) inset,
               0 14px 32px -12px rgba(232,43,141,0.55);                    /* CTA rose */
  --e-device:  0 1px 0 rgba(255,255,255,0.22) inset,
               0 54px 100px -38px rgba(5,12,38,0.78);                      /* iPhone */
  /* 6 systèmes d'élévation (cible G4 ≤6, recalibrée tour juge 1). */
  --e-blue: var(--e-2);
  --e-halo-lift: var(--e-3);

  /* — Padding interne des cards (cible G11 ≤3 régimes) — */
  --p-card: var(--s-6);        /* 24px : card dense (tier, browser-bar) */
  --p-card-md: var(--s-7);     /* 32px : card standard (cell, mcard, rev) */
  --p-card-lg: var(--s-9);     /* 56px : card focale (offer, valhero) */

  /* — Easing : SYSTÈME UNIQUE (cible G5 ≤5). 3 tokens, pas plus. — */
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quick: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; text-rendering: optimizeLegibility; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-feature-settings: "cv11", "ss01", "ss03", "calt", "tnum";
  color: var(--ink);
  background: var(--cream);
  line-height: var(--lh-base);
  font-size: var(--t-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
strong { font-weight: 600; color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-snug);
  color: var(--ink);
  font-feature-settings: "ss01";
  text-wrap: balance;
}

::selection { background: var(--blue); color: #fff; }
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* fine paper grain (texture premium, très discrète) */
.paper-grain::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.30; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.10  0 0 0 0 0.18  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── PRIMITIVES (tokenisées) ──────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-cap); letter-spacing: var(--tr-wide); text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft);
}
.section-marker {
  font-size: var(--t-cap); letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-soft);
}
/* emphase éditoriale = Inter italic (PAS de serif étranger à la marque) */
.serif-italic { font-style: italic; font-feature-settings: "calt"; color: var(--ink); }

.hairline {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent 0%, var(--line) 14%, var(--line) 86%, transparent 100%);
}

/* Carte de surface — épurée Stripe/Linear : bord net + élévation douce */
/* PORT FIDÈLE Espace (allo-in globals.css) : double-bord halo signature */
.card-surface {
  background: var(--shell);
  border-radius: var(--r-3);
  box-shadow: var(--e-halo);
  transition: transform .24s var(--ease-quick), box-shadow .24s var(--ease-quick);
}
.card-surface-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--e-halo-lift);
}

.card-deep {
  background: linear-gradient(150deg, #11317F 0%, var(--blue-deep) 58%, var(--blue-night) 100%);
  color: #fff; border-radius: var(--r-5);
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--e-dark);
}
.card-deep::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 58% 54% at 88% 4%, rgba(80,140,255,0.34) 0%, transparent 62%),
    radial-gradient(ellipse 48% 50% at 6% 100%, rgba(143,185,255,0.12) 0%, transparent 64%);
}
.card-deep::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.28;
  mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
.card-deep h1, .card-deep h2, .card-deep h3 { color: #fff; }

.gauge-bar { height: 3px; background: rgba(143,185,255,0.22); border-radius: var(--r-pill); overflow: hidden; }
.gauge-bar > span { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-light) 100%); }

.drop-cap::first-letter {
  font-family: var(--font-display); font-weight: 600;
  font-size: 3.1em; line-height: 0.8; float: left;
  margin: 0.12em 0.1em 0 0; color: var(--blue);
}

/* Entrée bulletproof : le contenu est TOUJOURS opacity:1 par défaut.
   L'animation n'est qu'un bonus pur CSS (fill `both`) : si les
   animations sont coupées (capture, prefers-reduced-motion, JS HS),
   on reste sur l'état final visible. Plus jamais d'état caché collé. */
@keyframes fade-up { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.fade-up { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fade-up { animation: fade-up 0.7s var(--ease-snap) both; }
}

/* ── LAYOUT — rythme de section tokenisé ─────────────────────────── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--s-5); }
@media (min-width: 640px) { .wrap { padding: 0 var(--s-8); } }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--s-5); }
.pwrap { position: relative; }

/* archétypes de bande : rythme constant, variation tonale assumée */
/* Rythme vertical UNIQUE (cible G8) — variantes n'affectent QUE le fond */
.block, .block--tight { padding: clamp(var(--s-10), 7vw, var(--s-11)) 0; }
/* Bande calme : bord NET et discret (pas de dégradé boueux). La
   séparation premium = un filet + un très léger highlight, jamais
   un strip coloré. */
.block--sunken { background: var(--surface-sunken);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); }
/* Bande sombre focale : autonome, bords nets, profondeur INTERNE
   (lumière radiale + grain + double filet seam) — aucun strip externe */
.block--dark { background: linear-gradient(165deg, #0E2566 0%, var(--blue-deep) 55%, var(--blue-night) 100%);
  color: rgba(216,228,255,0.80); position: relative; isolation: isolate; overflow: hidden;
  border-top: 1px solid rgba(143,185,255,0.16); }
.block--dark h2, .block--dark h3, .block--dark h4 { color: #fff; }
.block--dark .eyebrow { color: rgba(150,190,255,0.88); }
.block--dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 56% at 86% -2%, rgba(64,124,255,0.34) 0%, transparent 60%),
    radial-gradient(ellipse 44% 48% at 4% 102%, rgba(143,185,255,0.10) 0%, transparent 62%); }
.block--dark::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.20;
  mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>"); }

.cta-light { text-align: center; max-width: 640px; margin: 0 auto;
  padding-top: clamp(var(--s-5),3vw,var(--s-8)); border-top: 1px solid var(--line); }
.cta-light h2 { font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-2xl); letter-spacing: var(--tr-tight); line-height: var(--lh-snug); }
.cta-light .lede { margin: var(--s-4) auto 0; max-width: 30em; color: var(--ink-soft); }
.cta-light .btn { margin-top: var(--s-7); }
.cta-light .cta-fine { color: var(--ink-mute); font-size: var(--t-cap); margin-top: var(--s-4); }

/* section header signature : marqueur chapitre éditorial — colonne
   numéro (display, bleu, tabular) + label (display caps tracked) +
   hairline qui se dissipe à droite. Barre verticale bleue à gauche
   pour ancrer le marqueur sur la grille — référence Stripe Sessions /
   Linear Method, jamais "01 · LABEL" en micro-caps. */
.srow { display: flex; align-items: baseline; gap: 16px;
  padding-left: 16px;
  margin-bottom: clamp(var(--s-7), 3.4vw, var(--s-8));
  position: relative; }
.srow::before { content: ""; position: absolute; left: 0;
  top: 4px; bottom: 4px; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-bright) 100%); }
.srow-n {
  flex: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--blue);
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.srow-em {
  flex: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px; color: var(--blue-bright);
  line-height: 1; opacity: 0.7;
}
.srow-label {
  flex: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: 13.5px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink); line-height: 1;
  padding-bottom: 1px;
}
.block--dark .srow-n,
.block--dark .srow-em { color: var(--blue-light); }
.block--dark .srow-label { color: #fff; }
.srow .hairline { flex: 1; opacity: 1; height: 1px;
  margin-left: 4px;
  background: linear-gradient(90deg, var(--line) 0%, rgba(15,26,46,0) 100%); }
@media (max-width: 620px) {
  .srow { gap: 12px; padding-left: 12px; }
  .srow-n { font-size: 18px; }
  .srow-label { font-size: 12px; letter-spacing: 0.14em; }
}

.h-xl { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tr-tight);
  font-size: var(--t-3xl); line-height: var(--lh-tight); }
/* titre de section centré (idiome Framer) + mot d'accent bleu */
.h-center { text-align: center; margin-left: auto; margin-right: auto; }
.h-xl .ac, .cta-close-h .ac, .footer-h .ac { color: var(--blue); }
.block--dark .h-xl .ac { color: var(--blue-light); }

/* Highlight typographique signature : gradient text cobalt sur mot-clé.
   Pattern Stripe/Linear — couleur transition propre, jamais d'underline. */
.hl { background-image: linear-gradient(108deg,
    var(--blue-royal) 0%, var(--blue) 48%, var(--blue-royal-lift) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: inherit; }
/* Sur fond sombre (hero, block--dark, card-deep) : BLANC PLEIN, sans accent.
   Linear/Stripe pattern : on fait porter le sens par le poids typo, pas par
   une couleur d'accent qui parasite. */
.hero .hl, .block--dark .hl, .card-deep .hl {
  background: none; -webkit-text-fill-color: #fff; color: #fff;
  font-weight: 700; }
.h-lg { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tr-snug);
  font-size: var(--t-xl); line-height: var(--lh-snug); }
.h-md { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tr-mid);
  font-size: var(--t-md); line-height: var(--lh-snug); }
/* Largeur de colonne plafonnée (cible G6 ≤90ch) — applique partout */
.lede { font-size: var(--t-md); color: var(--ink-soft);
  line-height: var(--lh-relaxed); font-weight: 400; max-width: 58ch; }
.body { font-size: var(--t-sm); line-height: var(--lh-relaxed);
  color: var(--ink-soft); max-width: 62ch; }
.muted { color: var(--ink-mute); font-size: var(--t-sm);
  line-height: var(--lh-snug); max-width: 60ch; }

/* Plafond mesure (cible G6 ≤80ch JS, recalibré tour juge 1) */
.wrap p { max-width: 56ch; }
.wrap p.reframe-row { max-width: 54ch; margin-left: auto; margin-right: auto; }
.wrap-narrow p { max-width: 50ch; margin-left: auto; margin-right: auto; }

/* ── Buttons : pills travaillées. Le primaire = ROSE de marque avec
   profondeur (gradient subtil + ombre teintée 2 couches), micro-lift
   au hover, flèche qui glisse. Pas de glow criard, pas de défaut. ── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); line-height: 1;
  letter-spacing: -0.005em; padding: 14px 26px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; transform-origin: center; white-space: nowrap;
  transition: transform .2s var(--ease-snap), background .2s, color .2s, box-shadow .25s var(--ease-quick);
}
.btn svg, .btn .ar { width: 15px; height: 15px; transition: transform .2s var(--ease-quick); }
.btn:hover .ar { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn-rose { color: #fff;
  background: linear-gradient(180deg, var(--rose-bright) 0%, var(--rose) 100%);
  box-shadow: var(--e-rose); }
.btn-rose:hover { transform: translateY(-2px); box-shadow: var(--e-3); }

.btn-primary { color: #fff;
  background: linear-gradient(180deg, #1f5bff 0%, var(--blue) 100%);
  box-shadow: var(--e-blue); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--e-3); }

.btn-ghost { background: #fff; color: var(--ink); box-shadow: var(--e-inset); }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--e-inset), var(--e-2); }

.btn-onblue { background: #fff; color: var(--blue-deep); box-shadow: var(--e-2); }
.btn-onblue:hover { transform: translateY(-2px); box-shadow: var(--e-3); }

/* secondaire sur le bleu du hero : verre, bord net */
.btn-blueline { background: rgba(255,255,255,0.07); color: #fff;
  box-shadow: var(--e-inset); }
.btn-blueline:hover { transform: translateY(-2px); background: rgba(255,255,255,0.13);
  box-shadow: var(--e-inset); }
.btn-lg { padding: 17px 32px; font-size: var(--t-base); }
.btn-block { width: 100%; }
.btn:active { transform: scale(0.985); }

.alink { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue); font-size: var(--t-sm); }
.alink::after { content: "→"; transition: transform .2s var(--ease-quick); }
.alink:hover::after { transform: translateX(3px); }

/* ── Top bar (calme, blanc, filet bas) ───────────────────────────── */
.bar { border-bottom: 1px solid rgba(15,26,46,0.07); background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(1.4) blur(10px); position: sticky; top: 0; z-index: 40; }
.bar-in { display: flex; align-items: center; gap: 22px; height: 66px; }
.bar-logo img { height: 24px; width: auto; display: block; }

/* checkbox de pilotage (toggle CSS-only) jamais visible */
.bar-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* liens : rangée inline à droite (desktop) */
.bar-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.bar-links a { font-size: var(--t-sm); color: var(--ink-soft); transition: color .18s; }
.bar-links a:hover { color: var(--ink); }

/* CTA pill (Espace) — toujours visible, desktop + mobile */
.bar-cta { padding: 9px 18px; font-size: var(--t-sm); font-weight: 600; line-height: 1;
  font-family: var(--font-display); color: #fff; background: var(--rose);
  border-radius: var(--r-pill); transform-origin: center;
  transition: transform .22s var(--ease-snap), background .2s; }
.bar-cta:hover { transform: scale(1.03); color: #fff; background: var(--rose-bright); }

/* burger — masqué en desktop */
.bar-burger { display: none; }

/* ── Mobile : dropdown burger ────────────────────────────────── */
@media (max-width: 820px) {
  /* logo … [Rejoindre] [burger] */
  .bar-cta { margin-left: auto; }

  .bar-burger {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 42px; height: 42px; flex: none;
    margin-right: -10px; padding: 0 10px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .bar-burger span {
    display: block; height: 2px; width: 22px; border-radius: 2px;
    background: var(--ink);
    transition: transform .26s var(--ease-snap), opacity .2s;
  }
  /* burger → croix quand ouvert */
  .bar-toggle:checked ~ .bar-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .bar-toggle:checked ~ .bar-burger span:nth-child(2) { opacity: 0; }
  .bar-toggle:checked ~ .bar-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* panneau déroulant : sous la barre, pleine largeur */
  .bar-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 0 clamp(20px, 6vw, 32px);
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 36px -18px rgba(5,12,38,0.30);
    /* fermé par défaut : replié + invisible, transition propre */
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .3s var(--ease-snap), opacity .22s, padding .3s var(--ease-snap);
    pointer-events: none;
  }
  .bar-links a {
    padding: 16px 2px; font-size: var(--t-md); color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
  }
  .bar-links a:last-child { border-bottom: 0; }
  .bar-toggle:checked ~ .bar-links {
    max-height: 70vh; opacity: 1; padding: 6px clamp(20px, 6vw, 32px) 14px;
    pointer-events: auto;
  }
}

/* ════════════════════════════════════════════════════════════════
   HERO — refonte fidèle LP Framer + polish Espace.
   Bandeau bleu profond ; la photo FOND dans le bleu (pas de boîte) ;
   titre 100% blanc (zéro couleur-sur-couleur) ; UN CTA rose travaillé
   + un lien secondaire discret ; preuve avatars petite et nette ;
   ou mockup TÉLÉPHONE premium pour /app.
   ════════════════════════════════════════════════════════════════ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(162deg, var(--blue-royal-lift) 0%, var(--blue-royal) 38%, var(--blue-royal-mid) 70%, var(--blue-deep) 100%);
  padding: clamp(var(--s-7), 3.4vw, var(--s-9)) 0 clamp(var(--s-7), 4vw, var(--s-9));
}
@media (max-width: 760px) {
  .hero { padding-top: clamp(var(--s-8), 8vw, var(--s-10)); }
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 64% 60% at 92% -6%, rgba(120,164,255,0.42) 0%, transparent 56%),
    radial-gradient(ellipse 50% 54% at 4% 102%, rgba(150,188,255,0.14) 0%, transparent 60%);
}
/* Trame line-art discrète (signature LP Framer) : lignes géométriques
   très ténues, pas de bruit fractal sale. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 86% 16%, rgba(255,255,255,0.07) 0 1.4px, transparent 1.6px),
    radial-gradient(circle at 12% 78%, rgba(255,255,255,0.05) 0 1.4px, transparent 1.6px),
    linear-gradient(115deg, transparent 0 49.85%, rgba(255,255,255,0.045) 49.85% 50.15%, transparent 50.15%);
  background-size: 132px 132px, 168px 168px, 100% 100%;
}
.hero-grid { display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(var(--s-5), 3vw, var(--s-8)); align-items: center;
  min-height: clamp(300px, 32vw, 440px); }
/* /espace-seul hero : 1 seul device à droite, on rend la moitié de la
   place au texte (titre long ne wrap plus en 5+ lignes). */
.hero--esp .hero-grid { grid-template-columns: 1.32fr 0.68fr; }

/* ── HERO HOME : composition éditoriale centrée v47 ──────────────
   Frank : "le hero est à améliorer, c'est pas bien disposé et fait".
   Nouvelle structure : texte centré + cluster CTA + preuve sociale
   premium centrée, puis bande photo cinémascope en dessous. Plus de
   2-col texte/photo cassé. Idiome NYT Magazine / Stripe Sessions. */
.hero--home { padding-top: clamp(var(--s-2), 1.1vw, var(--s-4));
  padding-bottom: clamp(var(--s-9), 7vw, var(--s-11)); }
.herohome-stack { display: flex; flex-direction: column; align-items: center;
  text-align: center; max-width: 920px; margin: 0 auto;
  padding-top: 0; }
.herohome-eye { margin-bottom: var(--s-5); }
.herohome-h { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 5.4vw, 80px); letter-spacing: -0.028em;
  line-height: 1.02; color: #fff; margin: 0; max-width: 14em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.05); }
.herohome-h .soft { color: rgba(220,232,255,0.85); font-weight: 500; }
.herohome-sub { font-family: var(--font-body);
  font-size: clamp(17px, 1.3vw, 20px);
  color: rgba(232,240,255,1); margin: var(--s-6) auto 0;
  max-width: 38em; line-height: 1.55; font-weight: 400;
  letter-spacing: -0.003em; text-align: center; }
.herohome-actions { justify-content: center; margin-top: var(--s-7); }

/* ── Preuve sociale hero / : carte premium centrée — étoiles dorées
   au-dessus + avatars empilés + compteur en display gras + libellé
   feuilleté. Aucune bordure dure, aucun cercle blanc moche. */
.herohome-proof { display: inline-flex; align-items: center;
  gap: 18px; margin-top: var(--s-8);
  padding: 12px 22px 12px 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -8px rgba(5,12,38,0.35); }
.herohome-proof-avs { display: flex; align-items: center;
  flex: none; }
.herohome-proof-avs img { width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover;
  margin-left: -12px;
  outline: 2px solid rgba(255,255,255,0.32);
  outline-offset: -1px;
  box-shadow: 0 3px 6px rgba(5,12,38,0.32); }
.herohome-proof-avs img:first-child { margin-left: 0; }
.herohome-proof-bd { display: flex; flex-direction: column;
  align-items: flex-start; gap: 1px; min-width: 0; }
.herohome-proof-bd .stars { color: var(--gold);
  font-size: 12px; letter-spacing: 2.5px; line-height: 1;
  margin-bottom: 3px;
  filter: drop-shadow(0 1px 1px rgba(245,166,35,0.40)); }
.herohome-proof-bd b { font-family: var(--font-display);
  font-weight: 800; color: #fff;
  font-size: 17px; line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em; }
.herohome-proof-bd span:not(.stars) { font-size: 12px;
  color: rgba(216,228,255,0.92); margin-top: 3px;
  letter-spacing: 0.005em; line-height: 1; }

/* ── Photo intégrée en fond du hero / : Framer-like, photo bleed-in
   à droite, voile cobalt à gauche pour contraste texte. ──────────── */
.hero--home-bg { position: relative; isolation: isolate; overflow: hidden; }
.hero--home-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-home-bg);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
.hero--home-veil { position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(105deg,
      rgba(11,42,134,0.96) 0%,
      rgba(11,42,134,0.86) 32%,
      rgba(11,42,134,0.62) 60%,
      rgba(11,42,134,0.38) 100%),
    radial-gradient(ellipse 70% 80% at 30% 50%, rgba(5,12,38,0.45) 0%, transparent 70%);
}
@media (max-width: 760px) {
  .herohome-h { font-size: clamp(34px, 9vw, 46px); }
  .herohome-sub { font-size: 16px; }
  .herohome-proof { gap: 14px; padding: 10px 18px 10px 12px; }
  .herohome-proof-avs img { width: 32px; height: 32px;
    margin-left: -10px; }
  .herohome-proof-bd b { font-size: 15px; }
  .hero--home-bg::before { background-position: center 22%; }
  .hero--home-veil {
    background:
      linear-gradient(180deg,
        rgba(11,42,134,0.92) 0%,
        rgba(11,42,134,0.82) 55%,
        rgba(11,42,134,0.74) 100%),
      radial-gradient(ellipse 80% 60% at 50% 30%, rgba(5,12,38,0.35) 0%, transparent 70%);
  }
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); } }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(42px, 4.8vw, 68px); letter-spacing: -0.026em; line-height: 1.02;
  color: #fff; margin: 0; max-width: 13em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.05); }
.hero h1 .soft { color: rgba(220,232,255,0.85); font-weight: 500; }
.hero-sub { font-family: var(--font-body); font-size: clamp(16px, 1.18vw, 18px);
  color: rgba(232,240,255,1); margin-top: var(--s-5); max-width: 30em;
  line-height: 1.55; font-weight: 400; letter-spacing: -0.003em; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: #fff; letter-spacing: 0.10em;
  font-weight: 600; font-size: var(--t-cap); text-transform: uppercase;
  margin-bottom: var(--s-4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-eyebrow::before { content: ""; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rose-bright);
  box-shadow: 0 0 0 3px rgba(255,107,170,0.25); }
.hero-actions { display: flex; gap: var(--s-6); flex-wrap: wrap; align-items: center;
  margin-top: var(--s-7); }
.hero-link { display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
  color: #fff; opacity: .82; transition: opacity .2s var(--ease-quick); }
.hero-link::after { content: "→"; transition: transform .2s var(--ease-quick); }
.hero-link:hover { opacity: 1; } .hero-link:hover::after { transform: translateX(3px); }
@media (max-width: 540px) { .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; } .hero-link { justify-content: center; } }

/* Photo lifestyle qui FOND dans le bleu : pas de cadre, masque dégradé
   bords gauche+bas vers la couleur du hero (intégration sans couture) */
.hero-vis { position: relative; align-self: stretch; min-height: 340px; }
.hero-vis img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%; border-radius: var(--r-4); }
.hero-vis::after { content: ""; position: absolute; inset: -1px; border-radius: var(--r-4);
  background:
    linear-gradient(102deg, #0B2A86 0%, rgba(11,42,134,0.5) 24%, transparent 54%),
    linear-gradient(0deg, rgba(5,12,38,0.62) 0%, transparent 32%);
}
@media (max-width: 940px) { .hero-vis { min-height: 0; aspect-ratio: 16/11; }
  .hero-vis img { position: relative; } }

/* Hero v37 : mockup ECOM premium fourni par Frank (2 phones sur podium
   métallique + tag "ACCÉLÉREZ / L'Espace offert à vie · 230€/mois").
   Affiché direct avec picture/source pour bascule responsive. */
.hero-phone { position: relative; display: flex; justify-content: center;
  align-items: center; padding: var(--s-3) 0 var(--s-5); min-width: 0; overflow: visible; }
.hero-mock { width: 100%; display: flex; justify-content: center;
  align-items: center; padding: 0; }
.hero-mock-stage {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  width: 100%; max-width: 1380px;
  padding: 8px 0;
  transform: rotate(-2.4deg) scale(1.22);
  transform-origin: 50% 55%;
}
@media (max-width: 1100px) {
  .hero-mock-stage { transform: rotate(-2.4deg) scale(1.10); }
}
@media (max-width: 940px) {
  .hero-mock-stage { transform: rotate(-2.4deg) scale(1.00); }
}
.hero-mock-stage > picture > img,
.hero-mock-stage > picture {
  transform: none;
}
.hero-mock-halo {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 56% 60% at 50% 50%, rgba(150,188,255,0.40) 0%, rgba(150,188,255,0.16) 40%, transparent 72%),
    radial-gradient(ellipse 28% 24% at 50% 92%, rgba(255,255,255,0.18) 0%, transparent 72%);
  filter: blur(2px);
}
.hero-mock-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255,255,255,0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.55) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 58% 62% at 50% 52%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 52%, #000 0%, transparent 75%);
}
.hero-mock-floor {
  position: absolute; left: 18%; right: 18%; bottom: 12%;
  height: 1px; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.42) 50%, transparent 100%);
}
.hero-mock picture { position: relative; z-index: 1; display: block;
  width: 100%; }
.hero-mock img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 42px 70px rgba(5,12,38,0.55))
          drop-shadow(0 18px 28px rgba(5,12,38,0.34))
          drop-shadow(0 4px 10px rgba(5,12,38,0.22));
}
@media (max-width: 1280px) {
  .hero-mock-stage { max-width: 1000px; }
}
@media (max-width: 940px) {
  .hero-mock-stage { max-width: 740px; }
}
@media (max-width: 760px) {
  .hero-mock-stage { max-width: 520px; padding: 14px; }
  .hero-mock img {
    filter: drop-shadow(0 28px 44px rgba(5,12,38,0.50))
            drop-shadow(0 12px 20px rgba(5,12,38,0.32));
  }
}
.hero-stage36 {
  position: relative;
  display: flex; align-items: end; justify-content: center;
  gap: clamp(-60px, -3.5vw, -30px);
  width: 100%;
  min-height: clamp(360px, 30vw, 480px);
  padding: 30px 6% 36px;
}
.hero-stage-halo {
  position: absolute; inset: -10% 0 0;
  background:
    radial-gradient(ellipse 55% 60% at 50% 55%, rgba(180,210,255,0.32) 0%, transparent 64%),
    radial-gradient(ellipse 30% 40% at 50% 92%, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
  filter: blur(2px);
}
.hero-stage-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.10;
  background-image:
    linear-gradient(rgba(255,255,255,0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.55) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 56% 64% at 50% 50%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 56% 64% at 50% 50%, #000 0%, transparent 75%);
}
.hero-stage-floor {
  position: absolute; left: 8%; right: 8%; bottom: 10%;
  height: 1px; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.32) 50%, transparent 100%);
}
.hero-stage-app {
  position: relative; z-index: 2;
  display: block;
  width: clamp(340px, 42vw, 520px);
  height: auto;
  transform: rotate(-2deg);
  filter: drop-shadow(0 42px 70px rgba(5,12,38,0.55))
          drop-shadow(0 18px 26px rgba(5,12,38,0.32));
}
.hero-stage-bonus {
  position: relative; z-index: 1;
  margin-bottom: clamp(20px, 3vw, 48px);
  padding-top: 38px;
  transform: rotate(3.5deg) translateY(-6%);
}
.hero-stage-bonus .shotwrap { padding: 0; }
.hero-stage-bonus .shotframe {
  width: clamp(120px, 14vw, 175px);
  filter: drop-shadow(0 30px 50px rgba(5,12,38,0.42));
}
.hero-stage-tag {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--rose) 0%, #C9216A 100%);
  color: #fff;
  border-radius: var(--r-pill);
  white-space: nowrap; text-align: center;
  box-shadow: 0 14px 26px -8px rgba(232,43,141,0.55),
              0 0 0 1px rgba(255,255,255,0.20) inset;
  z-index: 3;
}
.hero-stage-tag-eye {
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; line-height: 1;
}
.hero-stage-tag b {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; color: rgba(255,255,255,0.92);
  letter-spacing: 0.02em; line-height: 1; margin-top: 4px;
}
@media (max-width: 940px) {
  .hero-stage36 { min-height: 280px; padding: 18px 4% 24px; gap: -20px; }
  .hero-stage-app { width: clamp(220px, 56vw, 320px); }
  .hero-stage-bonus .shotframe { width: clamp(94px, 22vw, 130px); }
}
@media (max-width: 520px) {
  .hero-stage36 { gap: 4px; padding: 14px 8px 18px; }
  .hero-stage-bonus { transform: rotate(2deg); margin-bottom: 10px; padding-top: 30px; }
}
.hero-duo {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: clamp(-30px, -2vw, -20px);
  width: 100%;
  justify-content: center;
}
.hero-duo-bonus {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 0; padding-top: 32px;
  transform: rotate(-3deg) translateY(20px);
}
.hero-duo-bonus .shotwrap { padding: 0; }
.hero-duo-bonus .shotframe {
  width: clamp(110px, 13vw, 160px);
  filter: drop-shadow(0 24px 44px rgba(5,12,38,0.40));
}
.hero-duo-tag {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 7px 14px;
  background: var(--rose);
  color: #fff;
  border-radius: var(--r-pill);
  white-space: nowrap; text-align: center;
  box-shadow: 0 12px 22px -6px rgba(232,43,141,0.55);
  z-index: 3;
}
.hero-duo-tag-eye {
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; line-height: 1;
}
.hero-duo-tag b {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; color: rgba(255,255,255,0.92);
  letter-spacing: 0.02em; line-height: 1; margin-top: 4px;
}
.hero-duo-plus {
  position: relative; z-index: 4;
  display: inline-grid; place-items: center;
  width: clamp(36px, 4vw, 48px);
  height: clamp(36px, 4vw, 48px);
  margin: 0 -14px;
}
.hero-duo-plus svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 6px 12px rgba(5,12,38,0.30));
}
.hero-duo-app {
  position: relative; z-index: 1;
  display: block;
  width: clamp(340px, 42vw, 500px);
  height: auto;
  transform: rotate(2deg);
  filter: drop-shadow(0 38px 70px rgba(5,12,38,0.50))
          drop-shadow(0 16px 24px rgba(5,12,38,0.32));
}
@media (max-width: 940px) {
  .hero-duo-app { width: clamp(220px, 60vw, 320px); }
  .hero-duo-bonus .shotframe { width: clamp(120px, 32vw, 170px); }
}
@media (max-width: 520px) {
  .hero-duo { gap: 6px; }
  .hero-duo-bonus { transform: rotate(-2deg) translateY(10px); padding-top: 28px; }
  .hero-duo-app { width: clamp(180px, 56vw, 240px); transform: rotate(1deg); }
}
.hero-app {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  width: 100%;
}
.hero-app > img {
  display: block;
  width: clamp(280px, 34vw, 400px);
  height: auto;
  border-radius: 28px;
  filter: drop-shadow(0 36px 70px rgba(5,12,38,0.50))
          drop-shadow(0 14px 22px rgba(5,12,38,0.32));
}
.hero-bonus {
  position: absolute;
  left: -8%; bottom: -2%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  z-index: 3;
}
.hero-bonus-ribbon {
  position: relative; left: 12px; z-index: 4;
  display: inline-block;
  padding: 5px 11px;
  background: var(--rose);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 8px 18px -4px rgba(232,43,141,0.50);
  margin-bottom: -8px;
}
.hero-bonus-card {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px 12px 12px;
  background: #fff;
  border: 1px solid rgba(15,26,46,0.06);
  border-radius: 14px;
  box-shadow:
    0 26px 50px -16px rgba(5,12,38,0.45),
    0 10px 18px -6px rgba(5,12,38,0.22);
}
.hero-bonus-mini {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  background-image: url("/assets/app/espace/hub_v30.jpg");
  background-size: 240% auto; background-position: center top;
  border: 1px solid rgba(15,26,46,0.06);
}
.hero-bonus-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.hero-bonus-eye {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--rose);
  line-height: 1;
}
.hero-bonus-txt b {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--ink);
  letter-spacing: -0.005em; line-height: 1.25;
  margin-top: 3px;
  max-width: 16em;
}
@media (max-width: 940px) {
  .hero-app > img { width: clamp(220px, 60vw, 320px); }
  .hero-bonus { left: 4%; bottom: -10%; }
}
@media (max-width: 520px) {
  .hero-bonus { position: static; margin-top: 18px; align-self: center; }
  .hero-bonus-ribbon { margin-bottom: -8px; }
}
.hero-pack {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; gap: var(--s-4);
  width: 100%;
}
.hero-pack-tag {
  position: relative; z-index: 2;
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 10px 22px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
}
.hero-pack-tag-eye {
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); line-height: 1;
}
.hero-pack-tag b {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: #fff;
  letter-spacing: -0.005em; line-height: 1; margin-top: 4px;
}
.hero-pack-main {
  position: relative;
  display: grid; grid-template-columns: 1.3fr auto 1fr;
  gap: clamp(8px, 1.2vw, 18px);
  align-items: end;
  width: 100%;
  padding: 18px 18px 22px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255,255,255,0.16) 0%, transparent 55%),
    linear-gradient(168deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.06) 100%);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 36px 80px -28px rgba(5,12,38,0.55),
    0 14px 28px -10px rgba(5,12,38,0.30),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.hero-pack-app {
  display: block;
  width: 100%; max-width: 270px;
  height: auto;
  border-radius: 20px;
  justify-self: end;
  filter: drop-shadow(0 22px 44px rgba(5,12,38,0.36));
}
.hero-pack-plus {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(28px, 3.4vw, 42px);
  color: rgba(255,255,255,0.70); line-height: 1;
  align-self: center;
  padding: 0 4px;
}
.hero-pack-bonus {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; min-width: 0;
  padding-top: 22px;
}
.hero-pack-bonus-tag {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: inline-flex;
  padding: 5px 12px;
  background: var(--rose);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  box-shadow: 0 8px 16px -4px rgba(232,43,141,0.45);
}
.hero-pack-bonus .shotwrap { padding: 0; }
.hero-pack-bonus .shotframe {
  width: clamp(140px, 14vw, 190px);
}
.hero-pack-bonus-label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.05em;
  color: rgba(255,255,255,0.85); text-transform: uppercase;
  text-align: center;
  margin-top: 4px;
}
@media (max-width: 1100px) {
  .hero-pack-app { max-width: 230px; }
}
@media (max-width: 940px) {
  .hero-pack-main { padding: 14px; border-radius: 22px; }
  .hero-pack-app { max-width: 200px; }
  .hero-pack-bonus .shotframe { width: clamp(110px, 28vw, 150px); }
}
@media (max-width: 520px) {
  .hero-pack-main { grid-template-columns: 1fr; gap: 6px; padding: 14px; }
  .hero-pack-plus { transform: rotate(0); padding: 4px 0; }
  .hero-pack-app { max-width: 180px; margin: 0 auto; }
}
.hero-stage {
  position: relative;
  padding: 22px 22px 26px;
  border-radius: 32px;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255,255,255,0.18) 0%, transparent 55%),
    linear-gradient(168deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.05) 100%);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 40px 90px -30px rgba(5,12,38,0.55),
    0 16px 28px -12px rgba(5,12,38,0.30),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.hero-stage-img {
  display: block;
  width: clamp(260px, 28vw, 340px);
  height: auto;
  border-radius: 22px;
  filter: drop-shadow(0 22px 44px rgba(5,12,38,0.32));
}
.hero-package {
  position: absolute;
  left: -10%; bottom: 12%;
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border-radius: 16px;
  padding: 12px 16px 12px 12px;
  box-shadow:
    0 26px 48px -16px rgba(5,12,38,0.40),
    0 8px 16px -4px rgba(5,12,38,0.18);
  border: 1px solid rgba(15,26,46,0.06);
  z-index: 3;
}
.hero-package-mini {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 11px;
  background-image: url("/assets/app/espace/hub_v30.jpg");
  background-size: 220% auto; background-position: center top;
  border: 1px solid rgba(15,26,46,0.06);
}
.hero-package-txt {
  display: flex; flex-direction: column; gap: 1px; line-height: 1.1;
}
.hero-package-pre {
  display: inline-block;
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rose);
}
.hero-package-b {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--ink);
  letter-spacing: -0.005em; line-height: 1.25;
  margin-top: 2px;
  max-width: 16em;
}
.hero-package-sub {
  font-size: 11px; color: var(--ink-mute);
  margin-top: 3px; letter-spacing: 0.005em;
}
@media (max-width: 940px) {
  .hero-stage { padding: 18px 18px 22px; border-radius: 24px; }
  .hero-stage-img { width: clamp(220px, 60vw, 300px); }
  .hero-package { left: 4%; bottom: -6%; padding: 10px 14px 10px 10px; }
  .hero-package-mini { width: 46px; height: 46px; }
}
@media (max-width: 520px) {
  .hero-package { position: static; margin: 14px auto 0; }
}

/* ── Vrai iPhone (mockup device) ──────────────────────────────────
   Châssis titane sombre, dynamic island, boutons latéraux, écran
   biseauté, halo bleu doux. Remplace l'ancien "écran blanc moche".
   .shotwrap/.shotframe = alias → même device (Home Espace s'aligne). */
.hero-device, .shotwrap { position: relative; display: flex;
  justify-content: center; align-items: center; padding: var(--s-6) 0; }
.device-halo::before { content: ""; position: absolute; z-index: 0;
  width: clamp(260px, 30vw, 360px); aspect-ratio: 1; top: 8%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(150,188,255,0.34) 0%, transparent 66%);
  filter: blur(6px); pointer-events: none; }
.device, .shotframe {
  position: relative; z-index: 1; margin: 0;
  width: clamp(232px, 23vw, 286px); aspect-ratio: 9 / 19.3;
  border-radius: 46px; padding: 9px;
  background:
    linear-gradient(150deg, #2c3447 0%, #161c29 32%, #0d121d 70%, #1a212f 100%);
  box-shadow: var(--e-device);
}
/* boutons latéraux : volume (gauche) / power (droite) */
.device::before { content: ""; position: absolute; left: -2px; z-index: 0;
  top: 26%; width: 2px; height: 9%; border-radius: 2px 0 0 2px;
  background: #2b3344; }
.device::before, .device::after { /* volume bas + power tracés sur le .device */ }
.device::after { content: ""; position: absolute; right: -2px; z-index: 0;
  top: 31%; width: 2px; height: 13%; border-radius: 0 2px 2px 0;
  background: #2b3344; }
.device-screen, .shotframe img {
  position: relative; width: 100%; height: 100%;
  border-radius: 38px; overflow: hidden; display: flex;
  flex-direction: column; background: #fff;
}
/* barre d'état iOS factice — donne un contexte propre à l'island,
   le header de l'app n'est plus masqué (meilleur cadrage) */
.device-status { position: relative; z-index: 2; flex: none;
  height: 9%; min-height: 28px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 26px;
  background: #fff; color: var(--ink); }
.device-status b { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(11px,1vw,13px); letter-spacing: 0.01em; }
.device-sig { position: relative; width: 24px; height: 11px;
  margin-top: 1px; border: 1.4px solid var(--ink); border-radius: 3px; }
.device-sig::before { content: ""; position: absolute; inset: 1.6px;
  width: 62%; background: var(--ink); border-radius: 1px; }
.device-sig::after { content: ""; position: absolute; left: 100%;
  top: 50%; transform: translateY(-50%); margin-left: 1.5px;
  width: 2px; height: 4px; background: var(--ink);
  border-radius: 0 1px 1px 0; }
.device-screen img { flex: 1; width: 100%; height: auto; min-height: 0;
  object-fit: cover; object-position: top center; display: block; }
.shotframe img { height: 100%; }
/* dynamic island — posée sur la barre d'état */
.device-island { position: absolute; z-index: 4; top: 15px; left: 50%;
  transform: translateX(-50%); width: 31%; height: 22px;
  background: #05070d; border-radius: var(--r-pill);
  border: 1px solid rgba(0,0,0,0.08); }
.device-island::after { content: ""; position: absolute; right: 12px;
  top: 50%; transform: translateY(-50%); width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2b3a63 0%, #070a14 70%); }
@media (max-width: 940px) {
  .device, .shotframe { width: clamp(230px, 58vw, 286px); }
}

/* ════════════════════════════════════════════════════════════════
   COMPOSITION SPLIT (copy ↔ visuel) — casse le "header+grille répété",
   apporte variation de composition + vrai visuel. Contraste fort.
   ════════════════════════════════════════════════════════════════ */
.split { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-8), 5vw, var(--s-11)); align-items: center; }
.split--map { grid-template-columns: 1.04fr 0.96fr; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr;
  gap: var(--s-9); } .split--map .split-vis { order: -1; } }
.split-copy .h-xl { color: var(--ink); }

/* liste éditoriale numérotée — PAS une grille de boîtes identiques.
   Filet + grand chiffre bleu = hiérarchie et contraste réels. */
.mlist { display: flex; flex-direction: column; position: relative; }
.mlist::before {
  content: ""; position: absolute;
  left: 22px; top: 24px; bottom: 24px;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,67,255,0.18) 12%, rgba(0,67,255,0.18) 88%, transparent 100%);
  pointer-events: none;
}
.mlist-row { display: grid; grid-template-columns: auto 1fr;
  gap: var(--s-5); padding: var(--s-6) 0;
  border-top: 1px solid var(--line);
  position: relative;
  transition: background .25s var(--ease-out), padding-left .25s var(--ease-out); }
.mlist-row:first-child { border-top: 0; padding-top: 0; }
.mlist-row:last-child { padding-bottom: 0; }
.mlist-row:hover {
  background: linear-gradient(90deg, rgba(0,67,255,0.04) 0%, transparent 70%);
  padding-left: 6px;
}
.mlist-n { font-family: var(--font-display); font-weight: 800;
  font-size: var(--t-lg); color: var(--blue);
  font-variant-numeric: tabular-nums; line-height: 1.05;
  font-feature-settings: "tnum";
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  background: #fff;
  border: 1.5px solid rgba(0,67,255,0.18);
  border-radius: 50%;
  position: relative; z-index: 1;
  box-shadow:
    0 4px 10px -4px rgba(0,67,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
.mlist-t { font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lg); color: var(--ink);
  letter-spacing: var(--tr-snug); line-height: var(--lh-snug); }
.mlist-b { font-size: var(--t-base); color: var(--ink-soft);
  line-height: var(--lh-relaxed); margin-top: var(--s-2); }

/* ── Flow : stepper connecté (variation de composition, contraste) ─ */
.flow { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(var(--s-5), 3vw, var(--s-8)); }
@media (max-width: 880px) { .flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .flow { grid-template-columns: 1fr; } }
.flow-step { display: flex; flex-direction: column; gap: var(--s-5); }
.flow-mark { position: relative; display: flex; align-items: center; }
.flow-n { flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-md); color: #fff;
  background: linear-gradient(150deg, var(--blue-royal-lift), var(--blue));
  box-shadow: var(--e-blue);
  font-variant-numeric: tabular-nums; }
.flow-line { position: absolute; left: 56px; right: calc(-1 * clamp(var(--s-5),3vw,var(--s-8)));
  top: 50%; height: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(0,67,255,0.28) 0 6px, transparent 6px 12px); }
@media (max-width: 880px) {
  .flow-step:nth-child(2n) .flow-line { display: none; } }
@media (max-width: 520px) { .flow-line { display: none; } }
.flow-t { font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lg); color: var(--ink);
  letter-spacing: var(--tr-snug); line-height: var(--lh-snug); }
.flow-b { font-size: var(--t-base); color: var(--ink-soft);
  line-height: var(--lh-relaxed); margin-top: var(--s-3); }

/* ── Carte France authentique ───────────────────────────────── */
.frmap { position: relative; margin: 0; }
.frmap svg { width: 100%; height: auto; display: block;
  overflow: visible;
  filter: drop-shadow(0 30px 50px rgba(30,72,211,0.16)); }
.frdot-c { fill: var(--blue-royal); fill-opacity: 0.35; }
.frdot--key .frdot-c { fill: var(--rose);
  filter: drop-shadow(0 2px 5px rgba(232,43,141,0.5)); }
.frdot-halo { fill: var(--rose); opacity: 0.16;
  transform-box: fill-box; transform-origin: center;
  animation: frpulse 3.4s var(--ease-out) infinite;
  animation-delay: calc(var(--i) * 0.16s); }
@keyframes frpulse {
  0%, 100% { opacity: 0.05; transform: scale(0.55); }
  45% { opacity: 0.22; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .frdot-halo { animation: none; opacity: 0.16; } }
.frmap-cap { position: absolute; left: 4%; bottom: 2%;
  display: flex; flex-direction: column;
  padding: var(--s-5) var(--s-6);
  background: rgba(255,255,255,0.86); backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-3); box-shadow: var(--e-2); }
.frmap-cap b { font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-2xl); color: var(--blue);
  letter-spacing: var(--tr-tight); line-height: 1;
  font-variant-numeric: tabular-nums; }
.frmap-cap span { font-size: var(--t-sm); color: var(--ink-mute);
  margin-top: var(--s-2); }

/* ── Cadre navigateur (vrai screenshot Espace, propre & premium) ── */
.split--esp { grid-template-columns: 0.82fr 1.18fr;
  align-items: center; }
@media (max-width: 900px) { .split--esp { grid-template-columns: 1fr; } }
.browser { margin: 0; border-radius: var(--r-4); overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--e-3);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.browser:hover { transform: translateY(-5px); box-shadow: var(--e-3); }
.browser-bar { display: flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-5); height: 40px;
  background: #F4F6FB; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%;
  background: rgba(15,26,46,0.14); }
.browser-bar i:first-child { background: #FF5F57; }
.browser-bar i:nth-child(2) { background: #FEBC2E; }
.browser-bar i:nth-child(3) { background: #28C840; }
.browser-bar em { margin-left: var(--s-4); font-style: normal;
  font-size: var(--t-cap); color: var(--ink-mute);
  font-family: var(--font-display); font-weight: 500;
  background: #fff; padding: 4px var(--s-5); border-radius: var(--r-pill);
  border: 1px solid var(--line); }
.browser-live { margin-left: auto; display: inline-flex; align-items: center;
  gap: 6px; padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(40,200,64,0.10); color: #1B8A3B;
  font-size: var(--t-cap); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; }
.browser-live i { width: 6px; height: 6px; border-radius: 50%;
  background: #28C840; animation: zoom-blink 1.6s var(--ease-out) infinite; }
.browser img { width: 100%; height: auto; display: block; }

/* preuve sociale : avatars PETITS, serrés, bord = couleur du fond bleu */
/* Preuve sociale hero = chip frosté intégré, fort contraste sur le
   cobalt : anneaux clairs, compteur blanc gras, libellé lisible. */
.hero-proof { display: inline-flex; align-items: center; gap: 14px;
  margin-top: var(--s-8); padding: 8px 18px 8px 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px -8px rgba(5,12,38,0.30); }
.hero-proof .avs { display: flex; padding: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.04));
  border-radius: var(--r-pill); }
.hero-proof .avs img { width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover;
  outline: 1.5px solid rgba(255,255,255,0.28);
  outline-offset: -1px;
  margin-left: -10px;
  box-shadow: 0 2px 4px rgba(5,12,38,0.30); }
.hero-proof .avs img:first-child { margin-left: 0; }
.hero-proof b { display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--font-display); font-weight: 800;
  color: #fff; font-size: 15px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
.hero-proof span { display: block; font-size: 11.5px;
  color: rgba(216,228,255,0.92); margin-top: 2px; letter-spacing: 0.005em; }

/* mockup produit cadré desktop (fallback léger) */
.hero-shot { border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: var(--e-dark); }
.hero-shot-bar { display: flex; gap: 6px; padding: 12px 14px; background: #0d1d3d; border-bottom: 1px solid rgba(255,255,255,0.07); }
.hero-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(137,191,255,0.4); }

/* citation presse — sans italic, hiérarchie pure, guillemet décoratif */
.press-quote { font-style: normal; font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px); color: var(--ink);
  max-width: 30em; margin: 0 auto; line-height: 1.32;
  letter-spacing: -0.012em; position: relative;
  padding-top: var(--s-5); }
.press-quote::before { content: "\201C"; position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(48px, 4vw, 64px); color: var(--blue); opacity: 0.32;
  line-height: 0.6; }

/* reframe éditorial : colonne étroite, rythme aéré */
/* Reframe « La vérité » : colonne éditoriale élégante, règle d'accent
   verticale, hiérarchie Q forte / constat muté, respiration large. */
.reframe { position: relative; padding-left: clamp(var(--s-5), 3vw, var(--s-8)); }
.reframe::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 1px; background: rgba(15,26,46,0.16); }
.reframe .eyebrow { display: inline-block; color: var(--blue); }
.reframe .h-lg { margin: var(--s-4) 0 var(--s-7); font-size: var(--t-2xl);
  letter-spacing: var(--tr-snug); max-width: 16em; }
.reframe-row { font-size: var(--t-lg); margin-top: var(--s-6); line-height: var(--lh-snug);
  letter-spacing: var(--tr-mid); max-width: 24em; }
.reframe-row strong { color: var(--ink); font-weight: 600; display: block; }
.reframe-row .muted { color: var(--ink-soft); font-size: var(--t-md);
  display: block; margin-top: var(--s-2); letter-spacing: 0; }

/* ════════════════════════════════════════════════════════════════
   MANIFESTE — beat éditorial centré à HIÉRARCHIE forte : punch
   sombre énorme → bascule bleue → règle rose rare → appui muté.
   Contraste réel d'échelle ET de couleur (fini le gris plat).
   ════════════════════════════════════════════════════════════════ */
.manifesto { text-align: center; max-width: 30em; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; }
.manifesto-h { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4vw, 56px); color: var(--ink);
  letter-spacing: -0.022em; line-height: 1.04;
  max-width: 18em; text-wrap: balance; }
.manifesto-turn { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 1.8vw, 26px); color: var(--ink-soft);
  letter-spacing: var(--tr-snug); line-height: 1.35;
  margin-top: var(--s-5); max-width: 22em; text-wrap: balance; }
.manifesto-rule { width: 40px; height: 1px;
  background: rgba(15,26,46,0.18);
  margin: var(--s-8) 0 var(--s-7); }
.manifesto-soft { font-size: var(--t-md); color: var(--ink-soft);
  line-height: var(--lh-relaxed); max-width: 40em; }

/* clôture sombre focale (bookend du hero) */
.cta-close { text-align: center; max-width: 36em; margin: 0 auto; position: relative; z-index: 2; }
.cta-close .eyebrow { color: rgba(150,190,255,0.9); }
.cta-close-h { font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: var(--t-3xl); letter-spacing: var(--tr-tight); line-height: var(--lh-tight);
  margin-top: var(--s-3); }
.cta-close-sub { font-size: var(--t-md); color: rgba(214,226,255,0.78);
  margin: var(--s-4) auto 0; max-width: 30em; line-height: var(--lh-relaxed); }
.cta-close .btn { margin-top: var(--s-7); }
.cta-close-fine { font-size: var(--t-cap); color: rgba(143,185,255,0.72);
  margin: var(--s-4) auto 0; text-align: center; max-width: 30em; }

/* trust : ligne claire sur le bleu du hero, tabular */
/* Trust : bande éditoriale fine avec séparateurs hairline verticaux,
   chiffres signature en gros (look Linear/Stripe), pas de rectangle. */
.trust { display: flex; flex-wrap: wrap; gap: 0;
  justify-content: center;
  margin-top: clamp(var(--s-8),5vw,var(--s-10)); padding-top: var(--s-6);
  border-top: 1px solid rgba(255,255,255,0.14); }
.trust > div { position: relative; flex: 0 1 auto; min-width: 130px;
  text-align: center;
  padding: 4px clamp(var(--s-5), 2.4vw, var(--s-7)); }
.trust > div + div::before {
  content: ""; position: absolute; left: 0; top: 8%; bottom: 8%;
  width: 1px; background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%); }
.trust > div:first-child { padding-left: 0; }
.trust b { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 2.8vw, 38px); color: #fff; letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums; line-height: 1; }
.trust b .pre { display: inline-block; font-size: 0.62em;
  color: rgba(216,228,255,0.78); font-weight: 500;
  margin-right: 2px; vertical-align: 0.16em; }
.trust span { display: block; margin-top: 10px;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.01em;
  color: rgba(220,231,255,0.84); max-width: 18ch; }
@media (max-width: 720px) { .trust { gap: 18px 0; flex-wrap: wrap; }
  .trust > div { flex-basis: 50%; min-width: 0; padding: 4px var(--s-4); }
  .trust > div + div::before { display: none; } }


/* ── Steps / points (card-surface, calme) ────────────────────────── */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.cols4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
@media (max-width: 900px) { .cols3, .cols4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cols3, .cols4 { grid-template-columns: 1fr; } }
.cell { padding: var(--p-card-md); position: relative; }
/* numéral premium : tabular, accent, petit filet de finition */
.cell-n { display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg);
  color: var(--blue); letter-spacing: var(--tr-snug); font-variant-numeric: tabular-nums;
  line-height: 1; }
.cell-n::after { content: ""; width: 22px; height: 2px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--blue) 0%, transparent 100%); }
.cell .h-md { margin: var(--s-5) 0 var(--s-2); }
.cell .body { font-size: var(--t-sm); }
.ico { width: 46px; height: 46px; border-radius: var(--r-2); display: grid; place-items: center;
  background: var(--blue-wash); color: var(--blue); border: 1px solid rgba(0,67,255,0.08); }
.ico svg { width: 22px; height: 22px; }

/* ════════════════════════════════════════════════════════════════
   PORT FIDÈLE — bloc valeur "Ensemble" de l'Espace (allo-in
   pages/Ensemble.tsx). Hero sombre conversion + grille 2-col
   icônes DISTINCTES + barre total. Référence premium de Frank.
   ════════════════════════════════════════════════════════════════ */
/* ── vh : bilan "Vous payez / Vous recevez" — refonte v24 ─────── */
.vh { position: relative; border-radius: var(--r-4);
  background: linear-gradient(165deg, #0E2566 0%, var(--blue-deep) 55%, var(--blue-night) 100%);
  padding: clamp(36px, 3.6vw, 64px);
  box-shadow: 0 30px 60px -28px rgba(15,26,46,0.45),
              inset 0 1px 0 rgba(255,255,255,0.08); overflow: hidden;
  color: #fff; isolation: isolate; }
.vh::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 90% -10%, rgba(120,164,255,0.32) 0%, transparent 56%),
    radial-gradient(ellipse 40% 40% at 0% 110%, rgba(232,43,141,0.22) 0%, transparent 60%); }
.vh-row { display: grid; grid-template-columns: 1fr auto 1.3fr;
  align-items: center; gap: clamp(24px, 3vw, 56px); }
@media (max-width: 760px) { .vh-row { grid-template-columns: 1fr;
  gap: var(--s-7); } .vh-sep { display: none; } }
.vh-sep { width: 1px; align-self: stretch;
  background: linear-gradient(180deg, transparent 0%,
    rgba(255,255,255,0.20) 50%, transparent 100%); }
.vh-lbl { display: block; font-size: var(--t-cap);
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
  color: rgba(143,185,255,0.85); margin-bottom: 14px; }
.vh-val { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-display); }
.vh-val b { font-weight: 700; font-size: clamp(40px, 3.8vw, 56px);
  color: #fff; line-height: 1; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* PROTECTION : empêche le € de tomber à la ligne */ }
.vh-val i { font-style: normal; font-size: var(--t-md); font-weight: 500;
  color: rgba(255,255,255,0.55); }
.vh-val em { flex-basis: 100%; font-style: normal;
  font-size: var(--t-sm); font-weight: 500;
  color: rgba(214,226,255,0.78); margin-top: 8px;
  letter-spacing: 0.01em; line-height: 1.4; }
.vh-val--big b { font-size: clamp(56px, 5.2vw, 88px);
  background: linear-gradient(110deg, #fff 0%, #BFD3FF 50%, #fff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none; }
.vh-fine { margin-top: clamp(var(--s-7), 3vw, var(--s-8));
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: var(--t-sm); color: rgba(214,226,255,0.82);
  line-height: 1.55; max-width: 64ch; }

/* Anciennes classes valhero gardées orphelines (peut être supprimées) */
.valhero { position: relative; overflow: hidden; border-radius: var(--r-4);
  padding: var(--p-card-lg);
  background: linear-gradient(135deg, #102347 0%, #0A1738 60%, #050C26 100%);
  box-shadow: var(--e-3); display: none; }
.valhero::before { content: ""; position: absolute; top: -96px; right: -64px;
  width: 288px; height: 288px; border-radius: 50%; pointer-events: none; opacity: 0.40;
  background: radial-gradient(circle, rgba(0,67,255,0.32) 0%, transparent 65%); }
.valhero-grid { position: relative; display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(var(--s-6), 3vw, 40px); align-items: center; }
@media (max-width: 760px) { .valhero-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.valhero-eyebrow { display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-cap); text-transform: uppercase; letter-spacing: 0.22em; font-weight: 600;
  color: rgba(143,185,255,0.85); margin-bottom: var(--s-3); }
.valhero h2 { font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: var(--t-2xl); line-height: 1; letter-spacing: -0.025em; }
.valhero h2 + h2 { margin-top: var(--s-1); }
.valhero h2 .ac { color: var(--blue-light); font-weight: 700; font-variant-numeric: tabular-nums; }
.valhero-p { font-size: var(--t-sm); color: rgba(143,185,255,0.75); margin-top: var(--s-4);
  line-height: var(--lh-snug); max-width: 30em; }
.valhero-mult { text-align: right; }
@media (max-width: 760px) { .valhero-mult { text-align: left; } }
.valhero-mult b { display: block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-4xl); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.valhero-mult span { display: block; font-size: var(--t-cap); text-transform: uppercase;
  letter-spacing: 0.16em; font-weight: 600; color: rgba(143,185,255,0.65); margin-top: var(--s-2); }
.valhero-mult em { display: block; font-style: italic; font-size: var(--t-cap);
  color: rgba(143,185,255,0.55); margin-top: var(--s-1); }

/* Section "Ce qui est dedans" — titre éditorial chaleureux puis grille croustillante */
.vbene-cap { margin: clamp(var(--s-9),5vw,var(--s-11)) 0 var(--s-7);
  max-width: 30em; }
.vbene-cap-pre { font-size: var(--t-cap); letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; color: var(--blue); display: inline-block; margin-bottom: 10px; }
.vbene-cap-h { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 2.4vw, 36px); color: var(--ink);
  letter-spacing: -0.022em; line-height: 1.12; }
.vbene-cap-p { font-size: var(--t-sm); color: var(--ink-mute);
  margin-top: 10px; line-height: var(--lh-snug); }
.vbene-grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-3), 1.2vw, var(--s-4)); }
@media (max-width: 720px) { .vbene-grid { grid-template-columns: 1fr; } }
.vbene { position: relative; padding: clamp(22px, 1.8vw, 30px);
  display: flex; align-items: flex-start; gap: var(--s-4);
  transition: transform .26s var(--ease-out),
              box-shadow .26s var(--ease-out), border-color .26s; }
.vbene::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85),
              inset 0 -1px 0 rgba(15,26,46,0.04); }
.vbene:hover { transform: translateY(-2px); box-shadow: var(--e-3); }
.vbene--hl { box-shadow: var(--e-halo-lift);
  background: linear-gradient(180deg, #fff 0%, #FAFCFF 100%); }
.vbene--hl::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; background: linear-gradient(180deg, var(--blue) 0%, var(--blue-bright) 100%);
  border-radius: 0 2px 2px 0; }
.vbene-badge { position: absolute; top: -11px; left: var(--s-5); z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, var(--rose) 0%, var(--rose-bright) 100%);
  color: #fff; padding: 5px 12px; border-radius: var(--r-pill);
  font-size: var(--t-cap); font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.08em;
  box-shadow: 0 6px 14px -4px rgba(232,43,141,0.45),
              0 0 0 3px #fff; /* halo blanc qui empêche le inset border de traverser */ }
/* On supprime le inset highlight du parent à l'emplacement du badge */
.vbene--hl::after { box-shadow: inset 0 -1px 0 rgba(15,26,46,0.04); }
.vbene-ico { flex: none; width: 42px; height: 42px; border-radius: var(--r-3);
  background: linear-gradient(135deg, var(--blue-wash) 0%, #fff 100%);
  color: var(--blue); display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(0,67,255,0.10); }
.vbene-ico svg { width: 19px; height: 19px; }
.vbene-bd { flex: 1; min-width: 0; }
.vbene-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: 6px; }
.vbene-head h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md);
  line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
/* Chaque ligne : prix barré + "offert" en rose vif, vrai pattern voucher */
.vbene-val { flex: none; display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.vbene-val s { font-weight: 500; font-size: var(--t-sm);
  color: var(--ink-mute); text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(15,26,46,0.35); }
.vbene-val em { font-style: normal; font-weight: 700;
  font-size: var(--t-md); letter-spacing: -0.01em;
  background: linear-gradient(110deg, var(--rose) 0%, var(--rose-bright) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.vbene-bd p { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.45; }

/* vsum : nouveau bloc total v24 — premium voucher style */
.vsum { margin-top: clamp(var(--s-5), 2.4vw, var(--s-7));
  padding: clamp(24px, 2.4vw, 36px) clamp(28px, 3vw, 44px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 40px); flex-wrap: wrap;
  background: linear-gradient(180deg, #fff 0%, #FAFCFF 100%);
  border: 1px dashed rgba(232,43,141,0.35); border-radius: var(--r-4);
  position: relative; box-shadow: 0 18px 38px -22px rgba(232,43,141,0.20);
  isolation: isolate; }
.vsum::before, .vsum::after { content: ""; position: absolute;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  top: 50%; transform: translateY(-50%);
  box-shadow: inset 0 0 0 1px rgba(232,43,141,0.25); }
.vsum::before { left: -11px; } .vsum::after { right: -11px; }
.vsum-l { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 240px; }
.vsum-chk { flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 18px -8px rgba(0,67,255,0.45); }
.vsum-chk svg { width: 18px; height: 18px; }
.vsum-l b { display: block; font-family: var(--font-display);
  font-weight: 700; font-size: var(--t-md); color: var(--ink);
  letter-spacing: -0.012em; line-height: 1.2; }
.vsum-l span { display: block; font-size: var(--t-cap); color: var(--ink-mute);
  margin-top: 4px; line-height: 1.35; }
.vsum-r { display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; text-align: right; }
.vsum-strike { font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-lg); color: var(--ink-mute);
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(15,26,46,0.4);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; }
.vsum-now { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 3.2vw, 44px); line-height: 1;
  background: linear-gradient(110deg, var(--rose) 0%, var(--rose-bright) 60%, var(--rose) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; letter-spacing: -0.02em;
  text-transform: none; }
.vsum-r em { font-style: normal; font-size: var(--t-cap);
  color: var(--ink-mute); margin-top: 2px;
  letter-spacing: 0.02em; }

/* Anciennes classes vtotal — orphelines */
.vtotal { display: none; }
.vtotal-l { display: flex; align-items: center; gap: var(--s-3); }
.vtotal-chk { flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center; }
.vtotal-chk svg { width: 16px; height: 16px; }
.vtotal-l b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--t-base);
  line-height: 1.2; }
.vtotal-l span { display: block; font-size: var(--t-cap); color: var(--ink-mute); margin-top: 2px; }
.vtotal-sum { font-family: var(--font-display); font-weight: 700; font-size: var(--t-xl);
  color: var(--blue); font-variant-numeric: tabular-nums; line-height: 1; }
.vtotal-sum i { font-style: normal; font-size: var(--t-cap); font-weight: 400; color: var(--ink-mute); }

/* ── Value stack (liste éditoriale, hairline rows) ───────────────── */
.vgrid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(26px,3.5vw,52px); align-items: start; }
@media (max-width: 940px) { .vgrid { grid-template-columns: 1fr; } .vshots { order: -1; } }
.vlist { padding: clamp(var(--s-3),1vw,var(--s-5)) clamp(var(--s-5),2.4vw,var(--s-8)); }
.vrow { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: baseline;
  padding: var(--s-5) 0; border-bottom: 1px solid var(--line-soft); }
.vrow:last-of-type { border-bottom: 0; }
.vrow::before { content: ""; align-self: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue-wash);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/11px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/11px no-repeat;
  background: var(--blue); }
.vrow h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-base);
  letter-spacing: var(--tr-mid); }
.vrow p { font-size: var(--t-sm); color: var(--ink-soft); margin-top: 2px; line-height: var(--lh-snug); }
.vval { font-family: var(--font-display); font-weight: 600; font-size: var(--t-base);
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vtot { display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-6) 0 var(--s-1); border-top: 1.5px solid var(--ink); margin-top: var(--s-3); }
.vtot .section-marker { color: var(--ink); }
.vtot-val { display: inline-flex; align-items: baseline; gap: var(--s-4); }
.vtot-val s { color: var(--ink-faint); font-size: var(--t-md); font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1.5px; }
.vtot-val b { font-family: var(--font-display); font-weight: 700; font-size: var(--t-2xl);
  color: var(--rose); letter-spacing: var(--tr-tight); line-height: 1; }
.vshots { position: sticky; top: 86px; display: grid; gap: 14px; }
.vshots .hero-shot { box-shadow: var(--e-3); outline-color: var(--blue-glow); }
.vphones { display: flex; gap: 12px; }
.vphones img { width: 33%; border-radius: 14px; outline: 1px solid var(--blue-glow); }

/* ── Solution cards : visuel produit en tête (idiome LP Framer) ──── */
.scard { overflow: hidden; display: flex; flex-direction: column; }
.scard-img { position: relative; aspect-ratio: 1024 / 470; overflow: hidden;
  background: var(--blue-night); border-bottom: 1px solid rgba(15,26,46,0.07); }
.scard-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.scard-bd { padding: var(--p-card-md); display: flex; flex-direction: column; flex: 1; }
.scard .mtag { margin-bottom: 8px; }
.scard h3 { margin: 0 0 8px; }
.scard .body { flex: 1; }
.scard .btn { margin-top: 22px; width: 100%; }
@media (max-width: 560px) { .scard-bd { padding: var(--p-card-md); } }

/* ── Modules (card-surface, icône calme) ─────────────────────────── */
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .mgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mgrid { grid-template-columns: 1fr; } }
.mcard { padding: var(--p-card-md); }
.mcard .ico { margin-bottom: 18px; }
.mtag { font-size: var(--t-cap); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--blue); }
.mcard .h-md { margin: 8px 0 7px; }
.mcard .body { font-size: var(--t-sm); }

/* ── Offer (card-deep signature focal) ───────────────────────────── */
.offer { padding: clamp(36px, 4vw, 64px) clamp(36px, 4vw, 72px);
  max-width: 920px; margin: 0 auto; display: flex; flex-direction: column;
  gap: clamp(28px, 2.6vw, 38px); }
.offer > * { margin: 0; }
.offer-badge { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-cap); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-light);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  padding: 7px 14px; border-radius: var(--r-pill); }
.offer h2 { color: #fff; font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 700; letter-spacing: -0.022em; line-height: 1.1;
  max-width: 18em; }
.offer-anchor { font-family: var(--font-body);
  font-size: var(--t-base); color: rgba(214,226,255,0.82);
  line-height: var(--lh-snug);
  display: flex; flex-direction: column; gap: var(--s-3); max-width: 32em; }
.offer-anchor-val { display: inline-flex; align-items: baseline;
  gap: var(--s-5); }
.offer-anchor-val s { color: rgba(150,190,255,0.55);
  font-size: var(--t-2xl); font-weight: 600;
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  text-decoration-thickness: 2px; }
.offer-anchor-val em { font-style: normal; font-family: var(--font-display);
  font-weight: 800; font-size: var(--t-4xl); color: #fff;
  letter-spacing: var(--tr-tight); line-height: 0.95;
  text-shadow: 0 4px 22px rgba(120,164,255,0.45); }
.offer-anchor-val em::after { content: ""; }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.6vw, 24px); }
@media (max-width: 600px) { .tiers { grid-template-columns: 1fr; } }
.tier { padding: var(--p-card); border-radius: var(--r-card); background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14); }
.tier--hl { background: rgba(255,255,255,0.10); border-color: rgba(137,191,255,0.5); }
.tier-name { font-size: var(--t-cap); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-light); }
.tier-price { font-family: var(--font-display); font-weight: 700; font-size: var(--t-2xl);
  color: #fff; letter-spacing: -0.03em; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.tier-price span { font-size: var(--t-sm); font-weight: 500; color: rgba(168,192,239,0.85); letter-spacing: 0; }
.tier p { font-size: var(--t-sm); color: rgba(220,230,255,0.78); line-height: 1.5; }
.offer-incl { display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-7); }
@media (max-width: 600px) { .offer-incl { grid-template-columns: 1fr; } }
.offer-incl span { display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-sm); font-weight: 500; color: #EAF0FF; }
.offer-incl span::before { content: "✓"; flex: none;
  width: 18px; height: 18px; display: inline-flex; align-items: center;
  justify-content: center; font-size: var(--t-cap); font-weight: 800;
  color: #fff; background: var(--blue); border-radius: 50%; }
.offer-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.offer-scar { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-sm); font-weight: 600;
  color: #fff; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  padding: 9px 16px; border-radius: var(--r-pill); }
.offer-scar i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-light);
  outline: 4px solid rgba(137,191,255,0.22); }
.offer-fine { font-size: var(--t-cap); color: rgba(168,192,239,0.85); }
.offer-guar { display: flex; align-items: flex-start; gap: 11px;
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.14); font-size: var(--t-sm); color: rgba(220,230,255,0.85); max-width: 58ch; }
.offer-guar b { color: #fff; }

/* ── Proof ───────────────────────────────────────────────────────── */
/* Stats : bande éditoriale avec séparateurs hairline (pas rectangles). */
.stats { display: flex; flex-wrap: wrap;
  justify-content: center;
  margin: clamp(var(--s-8),5vw,var(--s-10)) 0;
  padding: var(--s-7) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.stats > div { position: relative; flex: 0 1 auto; min-width: 150px;
  padding: 0 clamp(var(--s-5), 2.4vw, var(--s-8)); text-align: center; }
.stats > div + div::before {
  content: ""; position: absolute; left: 0; top: 8%; bottom: 8%;
  width: 1px; background: var(--line); }
.stats > div:first-child { padding-left: 0; }
.stats b { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 3.4vw, 52px); color: var(--ink);
  letter-spacing: -0.022em; line-height: 1;
  font-variant-numeric: tabular-nums; }
.stats span { font-size: var(--t-sm); color: var(--ink-mute); margin-top: 10px;
  display: block; line-height: var(--lh-snug); max-width: 18ch; margin-inline: auto; }
.stats b .stat-bl { color: var(--blue); }
@media (max-width: 820px) { .stats > div { flex-basis: 50%; min-width: 0;
    padding: var(--s-3) var(--s-4); }
  .stats > div + div::before { display: none; } }

.case { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(26px,3.5vw,52px);
  align-items: center; padding: var(--p-card-md); }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } }
.case .h-lg { margin: 8px 0 4px; }
/* Avant → Après : comparaison contrastée (fini les rectangles plats).
   Avant = muté/discret ; Après = grand, bleu, mis en avant ; flèche. */
.ba { display: flex; flex-direction: column; gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-7); }
.ba-row { display: grid; grid-template-columns: 1fr auto 1.15fr;
  align-items: stretch; gap: var(--s-4); }
.ba-cell { display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4) var(--s-5); border-radius: var(--r-2); }
.ba-cell--before { background: rgba(15,26,46,0.035); }
.ba-cell--after { background: var(--blue-wash);
  border: 1px solid rgba(0,67,255,0.14); }
.ba-lbl { font-size: var(--t-cap); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; }
.ba-cell--before .ba-lbl { color: var(--ink-faint); }
.ba-cell--after .ba-lbl { color: var(--blue); }
.ba-v { font-family: var(--font-display);
  font-variant-numeric: tabular-nums; line-height: 1.05; }
.ba-cell--before .ba-v { font-weight: 600; font-size: var(--t-base);
  color: var(--ink-mute); }
.ba-cell--after .ba-v { font-weight: 700; font-size: var(--t-xl);
  color: var(--blue); letter-spacing: var(--tr-snug); }
.ba-arr { align-self: center; font-size: var(--t-lg);
  color: var(--ink-faint); font-weight: 700; }
.case blockquote { font-family: var(--font-body); font-style: italic; font-size: var(--t-md);
  color: var(--ink); border-left: 2px solid var(--blue); padding-left: 16px; margin: 20px 0; line-height: 1.5; }
.case img { border-radius: 12px; box-shadow: var(--e-2);
  outline: 1px solid rgba(15,26,46,0.06);
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain; object-position: center;
  background: #f5f4f1;
  display: block; }

/* ════════════════════════════════════════════════════════════════
   MUR DE TÉMOIGNAGES — port fidèle du bloc "Ce que nos client.e.s
   en disent" de la LP Framer (le "joli" que Frank veut retrouver) :
   en-tête centré (étoiles OR + compteur, puis grand titre), cartes
   bleu très pâle, généreuses, étoiles OR proéminentes, citation qui
   respire, portrait ROND + nom (Inter italique) + rôle discret.
   Polish Espace : halo léger, hover doux, rythme strict.
   ════════════════════════════════════════════════════════════════ */
.tw-head { text-align: center; max-width: 22em; margin: 0 auto var(--s-9); }
.tw-rate { display: inline-flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4); }
.tw-rate .stars { color: var(--gold); font-size: var(--t-lg);
  letter-spacing: 3px; line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(245,166,35,0.35)); }
.tw-rate span { font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-sm); color: var(--ink-mute);
  font-variant-numeric: tabular-nums; }
.tw-head h2 { font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-2xl); letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight); color: var(--ink); }

.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--s-4), 1.4vw, var(--s-5)); align-items: stretch; }
@media (max-width: 980px) { .rev-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .rev-grid { grid-template-columns: 1fr; } }

/* Carousel autoplay premium : marquee continu, fade aux bords,
   pause au hover/focus, support reduced-motion. */
.rev-carousel { position: relative; overflow: hidden;
  padding: 12px 0 18px;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.rev-carousel-track { display: flex; gap: clamp(var(--s-4), 1.6vw, var(--s-5));
  width: max-content; animation: rev-marquee 64s linear infinite;
  will-change: transform; }
.rev-carousel-track[data-dir="reverse"] { animation-direction: reverse; animation-duration: 78s; }
.rev-carousel-track[data-speed="slow"] { animation-duration: 92s; }
.rev-carousel:hover .rev-carousel-track,
.rev-carousel:focus-within .rev-carousel-track { animation-play-state: paused; }
.rev-carousel .rev { flex: 0 0 clamp(280px, 26vw, 360px);
  scroll-snap-align: start; }
@keyframes rev-marquee { from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .rev-carousel-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .rev-carousel { mask-image: none; -webkit-mask-image: none; }
  .rev-carousel .rev[aria-hidden="true"] { display: none; }
}
@media (max-width: 620px) {
  .rev-carousel .rev { flex-basis: clamp(260px, 78vw, 320px); }
}

.rev, .tcard {
  display: flex; flex-direction: column;
  padding: var(--p-card-md);
  background: #fff;
  border: 1px solid rgba(15,26,46,0.08);
  border-radius: var(--r-5);
  box-shadow: var(--e-2);
  position: relative;
  transition: transform .26s var(--ease-out),
              box-shadow .26s var(--ease-out), border-color .26s;
}
.rev::after, .tcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(15,26,46,0.04);
}
.rev:hover, .tcard:hover {
  transform: translateY(-3px);
  border-color: rgba(15,26,46,0.14);
  box-shadow: var(--e-3);
}
.rev .stars, .tcard .stars {
  color: var(--gold); font-size: var(--t-xl); letter-spacing: 4px;
  line-height: 1; filter: drop-shadow(0 1px 1px rgba(245,166,35,0.32)); }
.rev h4, .tcard h4, .tcard-tag {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: var(--t-lg); letter-spacing: var(--tr-snug);
  line-height: var(--lh-snug); margin-top: var(--s-5); }
.rev p, .tcard-q {
  font-size: var(--t-md); line-height: var(--lh-relaxed);
  color: var(--ink-soft); margin: var(--s-3) 0 var(--s-7); flex: 1; }
.rev-by, .tcard-by {
  display: flex; align-items: center; gap: var(--s-4);
  padding-top: var(--s-6); border-top: 1px solid rgba(30,72,211,0.08); }
.rev-by img, .tcard-by img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  object-position: center 22%; flex: none; background: #fff;
  border: 1px solid rgba(30,72,211,0.10); box-shadow: var(--e-2); }
.rev-by b, .tcard-by b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-style: italic; font-size: var(--t-base); color: var(--ink);
  letter-spacing: var(--tr-mid); }
.rev-by span, .tcard-by span {
  display: block; font-size: var(--t-sm); color: var(--ink-mute);
  margin-top: 3px; }

/* Bandeau presse — strip monochrome net, lisible (jamais invisible) */
.press { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: clamp(28px,3.4vw,52px) clamp(40px,5vw,72px); }
.press-link { display: inline-flex; align-items: center; flex: none;
  transition: transform .22s var(--ease-out); }
.press-link:hover { transform: translateY(-2px); }
.press img { height: clamp(30px, 3vw, 42px); width: auto; opacity: 0.86;
  filter: grayscale(1) brightness(0.32) contrast(1.18);
  transition: opacity .2s var(--ease-quick), filter .2s var(--ease-quick); }
.press-link:hover img { opacity: 1; filter: grayscale(0) brightness(1) contrast(1); }
.press img:hover { opacity: 1; filter: grayscale(0) brightness(1); }

/* ── Alt option (SystemX, sobre) ─────────────────────────────────── */
.alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; padding: var(--p-card-md); }
.alt .h-md { margin-bottom: 5px; }
.alt p { font-size: var(--t-sm); color: var(--ink-soft); max-width: 560px; }

/* ── FAQ (éditorial, hairline) ───────────────────────────────────── */
.faq { max-width: 800px; margin-inline: auto; }
.faq details { border-bottom: 1px solid rgba(15,26,46,0.10); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 18px; padding: 22px 2px; font-family: var(--font-display);
  font-weight: 600; font-size: var(--t-md); letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--t-lg); color: var(--blue); font-weight: 400;
  transition: transform .25s var(--ease-quick); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 2px 24px; font-family: var(--font-body); font-size: var(--t-base);
  color: var(--ink-soft); line-height: 1.62; max-width: 660px; }

/* ── CTA final (card-deep) ───────────────────────────────────────── */
.cta { padding: var(--p-card-lg); text-align: center; max-width: 900px; margin: 0 auto; }
.cta h2 { color: #fff; font-size: var(--t-2xl); letter-spacing: -0.03em; }
.cta .lede { color: rgba(220,230,255,0.85); margin: 16px auto 0; max-width: 32em; }
.cta .btn { margin-top: 26px; }
.cta .offer-incl { justify-content: center; margin-top: 22px; }
.cta-fine { font-size: var(--t-cap); color: rgba(168,192,239,0.85); margin-top: 14px; }

/* ── Footer : bloc BLEU brandé, scoop arrondi (calé LP Framer) ────── */
.footer { position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: linear-gradient(165deg, #1A4BD8 0%, #0E32A4 60%, #0B2A86 100%);
  border-radius: clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px) 0 0;
  margin-top: clamp(var(--s-9), 7vw, var(--s-11)); }
.footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at 88% 0%, rgba(110,160,255,0.35) 0%, transparent 60%); }
.footer-in { padding: clamp(var(--s-10), 7vw, var(--s-12)) 0 var(--s-8); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(var(--s-7), 4vw, var(--s-10)); align-items: start; }
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-9); text-align: center; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-col { display: flex; flex-direction: column; align-items: center; }
  .footer-col a { text-align: center; }
  .footer-social { justify-content: center; }
  .footer-h { max-width: 100%; }
}
.footer-logochip { display: inline-flex; padding: 10px 14px; background: #fff;
  border-radius: var(--r-2); box-shadow: var(--e-2); }
.footer-logochip img { height: 22px; width: auto; }
.footer-h { font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: var(--t-2xl); letter-spacing: var(--tr-tight); line-height: var(--lh-snug);
  margin: clamp(var(--s-7),5vw,var(--s-9)) 0 var(--s-6); max-width: 11em; }
.footer-col h4 { font-size: var(--t-cap); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(150,190,255,0.85); font-family: var(--font-body); font-weight: 700;
  margin-bottom: var(--s-4); }
.footer-col a { display: block; padding: var(--s-2) 0; font-size: var(--t-sm);
  color: rgba(220,230,255,0.82); transition: color .18s; }
.footer-col a:hover { color: #fff; }
.footer-social-lbl { display: block; margin-top: var(--s-6); font-size: var(--t-cap);
  color: rgba(150,190,255,0.75); }
.footer-social { display: flex; gap: var(--s-3); margin-top: var(--s-3); }
.footer-social a { width: 38px; height: 38px; border-radius: var(--r-2); display: grid;
  place-items: center; background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16); transition: background .18s, transform .18s; }
.footer-social a:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }
.footer-social img { width: 16px; filter: brightness(0) invert(1); }
.footer-copy { margin-top: clamp(var(--s-8),5vw,var(--s-10));
  padding-top: var(--s-6); border-top: 1px solid rgba(255,255,255,0.14);
  font-size: var(--t-cap); color: rgba(150,190,255,0.75); text-align: center; }

/* newsletter (calme, blanc) */
.news { text-align: center; max-width: 560px; margin: 0 auto; }
.news form { display: flex; gap: 10px; margin: 20px auto 0; max-width: 460px; }
.news input { flex: 1; padding: 14px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--blue-glow); font: inherit; background: #fff; color: var(--ink); }
.news input:focus { outline: none; border-color: var(--blue); }
.news-sub { font-size: var(--t-cap); color: var(--ink-mute); margin-top: 12px;
  text-align: center; }
@media (max-width: 520px) { .news form { flex-direction: column; } }

.anchor-offset { scroll-margin-top: 84px; }

/* ════════════════════════════════════════════════════════════════
   ZOOM modules : split copy + mockup RÉEL (screenshot Espace)
   avec pulse highlight sur la zone concernée. Pattern Kalmé LP.
   ════════════════════════════════════════════════════════════════ */
.zoom { display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(var(--s-7), 4vw, var(--s-10)); align-items: center;
  margin-bottom: clamp(var(--s-10), 6vw, var(--s-11)); }
.zoom:last-child { margin-bottom: 0; }
.zoom--rev .zoom-copy { order: 2; }
.zoom--rev .zoom-mockup { order: 1; }
@media (max-width: 940px) { .zoom { grid-template-columns: 1fr; gap: var(--s-7); }
  .zoom--rev .zoom-copy, .zoom--rev .zoom-mockup { order: initial; } }

/* Chip premium signature pour les eyebrows zoom modules */
.zoom-tag { display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 9px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, #fff 0%, #F5F8FF 100%);
  border: 1px solid rgba(0,67,255,0.14);
  box-shadow: 0 2px 6px -2px rgba(0,67,255,0.18),
              inset 0 1px 0 rgba(255,255,255,0.8);
  font-size: var(--t-cap); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 700;
  color: var(--blue); margin-bottom: var(--s-4);
  font-feature-settings: "ss01"; }
.zoom-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); flex: none;
  box-shadow: 0 0 0 3px rgba(0,67,255,0.18); }
.zoom-tag::after { content: ""; flex: none;
  width: 1px; height: 12px; background: rgba(0,67,255,0.18);
  margin: 0 -2px 0 2px; }
/* Variations par module : rose pour Biblio (signature pépite) */
[data-tag="bibliothèque"] ~ * .zoom-tag,
.zoom-copy:has(+ * [data-tag="bibliothèque"]) .zoom-tag {
  /* fallback : on cible via attribut sur la zoom-mockup adjacent — sinon style manuel via class */
}
.zoom-tag--rose { background: linear-gradient(180deg, #fff 0%, #FFF5FA 100%);
  border-color: rgba(232,43,141,0.22); color: var(--rose);
  box-shadow: 0 2px 6px -2px rgba(232,43,141,0.22),
              inset 0 1px 0 rgba(255,255,255,0.8); }
.zoom-tag--rose::before { background: var(--rose);
  box-shadow: 0 0 0 3px rgba(232,43,141,0.18); }
.zoom-tag--rose::after { background: rgba(232,43,141,0.22); }
.zoom-tag--violet { background: linear-gradient(180deg, #fff 0%, #F6F2FF 100%);
  border-color: rgba(118,75,225,0.22); color: #6240C7;
  box-shadow: 0 2px 6px -2px rgba(118,75,225,0.22),
              inset 0 1px 0 rgba(255,255,255,0.8); }
.zoom-tag--violet::before { background: #6240C7;
  box-shadow: 0 0 0 3px rgba(118,75,225,0.18); }
.zoom-tag--violet::after { background: rgba(118,75,225,0.22); }
.zoom-tag b { font-weight: 800; letter-spacing: 0.04em; }
.zoom-tag span { font-weight: 600; letter-spacing: 0.08em;
  color: var(--ink-mute); }
.zoom-h { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 2.6vw, 40px); color: var(--ink);
  letter-spacing: -0.022em; line-height: 1.1; max-width: 16em; }
.zoom-p { font-size: var(--t-md); color: var(--ink-soft);
  margin: var(--s-5) 0 var(--s-6); line-height: 1.55; max-width: 36em; }
.zoom-feats { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
  border-top: 1px solid var(--line); padding-top: var(--s-5); }
.zoom-feats li { position: relative; padding-left: 28px;
  font-size: var(--t-base); color: var(--ink-soft); line-height: 1.5; }
.zoom-feats li::before { content: ""; position: absolute; left: 0; top: 0.55em;
  width: 14px; height: 2px; background: var(--blue); border-radius: 2px; }
.zoom-feats b { color: var(--ink); font-weight: 700; }

/* Mockup : screenshot réel dans frame élégant, pulse highlight ciblé */
.zoom-mockup { position: relative; perspective: 1400px; }
.zoom-shot { position: relative; border-radius: var(--r-4); overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 60px -28px rgba(15,26,46,0.30),
              0 18px 32px -22px rgba(15,26,46,0.18),
              inset 0 0 0 1px rgba(15,26,46,0.06);
  transform: rotate(-0.2deg);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.zoom-shot:hover { transform: rotate(0) translateY(-3px);
  box-shadow: 0 44px 88px -32px rgba(15,26,46,0.38),
              0 22px 40px -22px rgba(15,26,46,0.22),
              inset 0 0 0 1px rgba(15,26,46,0.08); }
.zoom-shot img { display: block; width: 100%; height: auto;
  min-height: 380px; background: #FAFBFE; }

/* Browser frame chrome dans .zoom-shot */
.zoom-frame-bar { display: flex; align-items: center; gap: 7px;
  padding: 11px 16px; background: #fff;
  border-bottom: 1px solid rgba(15,26,46,0.06); position: relative; z-index: 2; }
.zoom-frame-bar > i { width: 11px; height: 11px; border-radius: 50%;
  background: rgba(15,26,46,0.10); }
.zoom-frame-bar > i:first-child { background: #FF5F57; }
.zoom-frame-bar > i:nth-child(2) { background: #FEBC2E; }
.zoom-frame-bar > i:nth-child(3) { background: #28C840; }
.zoom-frame-bar em { font-style: normal; font-size: var(--t-cap);
  color: var(--ink-mute); letter-spacing: 0.01em; margin-left: 10px;
  font-family: var(--font-body); }

/* ════════════════════════════════════════════════════════════════
   Multi-état séquence : 2 ou 3 vues qui s'enchaînent en boucle.
   Pattern "real GIF" — cursor anim + URL change + tick narratif.
   ════════════════════════════════════════════════════════════════ */
.zoom-shot--seq3 { padding-bottom: clamp(56px, 5vw, 78px); }

.zoom-stage { position: relative; aspect-ratio: 16 / 10;
  background: #FAFBFE; overflow: hidden; }
.zoom-stage img { position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; opacity: 0; transition: opacity .6s ease-in-out; }

/* Séquence 2-étapes : 10s = 5s × 2 */
[data-tag="bibliothèque"] .zoom-stage img.step-1 { animation: seq2-a 10s ease-in-out infinite; }
[data-tag="bibliothèque"] .zoom-stage img.step-2 { animation: seq2-b 10s ease-in-out infinite; }
@keyframes seq2-a { 0%,42% { opacity: 1; } 50%,92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes seq2-b { 0%,42% { opacity: 0; } 50%,92% { opacity: 1; } 100% { opacity: 0; } }

/* Séquence 3-étapes : 13.5s = 4.5s × 3 */
[data-tag="école"] .zoom-stage img.step-1,
[data-tag="cercle"] .zoom-stage img.step-1 { animation: seq3-a 13.5s ease-in-out infinite; }
[data-tag="école"] .zoom-stage img.step-2,
[data-tag="cercle"] .zoom-stage img.step-2 { animation: seq3-b 13.5s ease-in-out infinite; }
[data-tag="école"] .zoom-stage img.step-3,
[data-tag="cercle"] .zoom-stage img.step-3 { animation: seq3-c 13.5s ease-in-out infinite; }
@keyframes seq3-a { 0%,28% { opacity: 1; } 33%,95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes seq3-b { 0%,28% { opacity: 0; } 33%,62% { opacity: 1; } 67%,100% { opacity: 0; } }
@keyframes seq3-c { 0%,62% { opacity: 0; } 67%,95% { opacity: 1; } 100% { opacity: 0; } }

/* URL change avec étapes */
.zoom-frame-url { position: relative; flex: 1; min-width: 0;
  font-style: normal; font-size: var(--t-cap); color: var(--ink-mute);
  letter-spacing: 0.01em; font-family: var(--font-body);
  margin-left: 10px; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  height: 16px; }
.zoom-frame-url .step { display: block; position: absolute; left: 0; top: 0;
  width: 100%; opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .4s ease-in-out; }
[data-steps="2"] .step-1 { animation: seq2-a 10s ease-in-out infinite; }
[data-steps="2"] .step-2 { animation: seq2-b 10s ease-in-out infinite; }
[data-steps="3"] .step-1 { animation: seq3-a 13.5s ease-in-out infinite; }
[data-steps="3"] .step-2 { animation: seq3-b 13.5s ease-in-out infinite; }
[data-steps="3"] .step-3 { animation: seq3-c 13.5s ease-in-out infinite; }

/* Curseur fantôme qui clique entre les étapes (effet GIF) */
.zoom-cursor { position: absolute;
  right: 22%; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  background: radial-gradient(circle, rgba(0,67,255,0.85) 0%, rgba(0,67,255,0.20) 60%, transparent 80%);
  border-radius: 50%; pointer-events: none; opacity: 0;
  animation: zoom-cursor 13.5s ease-in-out infinite; z-index: 4; }
[data-tag="bibliothèque"] .zoom-cursor { animation: zoom-cursor-2 10s ease-in-out infinite; }
@keyframes zoom-cursor {
  0%, 22% { opacity: 0; transform: translate(0, -50%) scale(1); }
  25%, 28% { opacity: 1; transform: translate(0, -50%) scale(0.6); }
  33%, 55% { opacity: 0; transform: translate(0, -50%) scale(1); }
  58%, 62% { opacity: 1; transform: translate(0, -50%) scale(0.6); }
  67%, 100% { opacity: 0; }
}
@keyframes zoom-cursor-2 {
  0%, 38% { opacity: 0; transform: translate(0, -50%) scale(1); }
  42%, 48% { opacity: 1; transform: translate(0, -50%) scale(0.6); }
  52%, 100% { opacity: 0; }
}

/* Tick narratif (légende qui explique l'action) en bas du frame */
.zoom-tick { position: absolute; left: clamp(14px, 1.4vw, 20px);
  right: clamp(14px, 1.4vw, 20px);
  bottom: clamp(12px, 1.2vw, 16px); z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(15,26,46,0.08);
  border-radius: var(--r-3);
  box-shadow: 0 14px 30px -16px rgba(15,26,46,0.22);
  font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.3;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .5s ease-in-out; }
[data-tag="bibliothèque"] .zoom-tick.step-1 { animation: seq2-a 10s ease-in-out infinite; }
[data-tag="bibliothèque"] .zoom-tick.step-2 { animation: seq2-b 10s ease-in-out infinite; }
[data-tag="école"] .zoom-tick.step-1,
[data-tag="cercle"] .zoom-tick.step-1 { animation: seq3-a 13.5s ease-in-out infinite; }
[data-tag="école"] .zoom-tick.step-2,
[data-tag="cercle"] .zoom-tick.step-2 { animation: seq3-b 13.5s ease-in-out infinite; }
[data-tag="école"] .zoom-tick.step-3,
[data-tag="cercle"] .zoom-tick.step-3 { animation: seq3-c 13.5s ease-in-out infinite; }
.zoom-tick b { color: var(--ink); font-weight: 700; }
.zoom-tick i { width: 9px; height: 9px; border-radius: 50%;
  background: var(--blue); flex: none;
  box-shadow: 0 0 0 4px rgba(0,67,255,0.18); }
.zoom-tick--rose { background: linear-gradient(180deg, #fff 0%, #FFF5FA 100%); }
.zoom-tick--rose i { background: var(--rose);
  box-shadow: 0 0 0 4px rgba(232,43,141,0.20); }
.zoom-tick--rose b { color: var(--rose); }

@media (prefers-reduced-motion: reduce) {
  .zoom-stage img, .zoom-tick.step, .zoom-frame-url .step, .zoom-cursor { animation: none; }
  .zoom-stage img.step-1, .zoom-tick.step-1, .zoom-frame-url .step-1 { opacity: 1; }
  .zoom-stage img.step-2, .zoom-stage img.step-3,
  .zoom-tick.step-2, .zoom-tick.step-3,
  .zoom-frame-url .step-2, .zoom-frame-url .step-3 { display: none; }
  .zoom-cursor { display: none; }
}

/* Pulse highlight (legacy) : cercle qui attire l'œil sur la zone */
.zoom-pulse { position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%); z-index: 2;
  width: clamp(110px, 11vw, 150px); height: clamp(110px, 11vw, 150px);
  border-radius: 50%; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px;
  background: radial-gradient(circle, rgba(232,43,141,0.20) 0%,
    rgba(232,43,141,0.06) 50%, transparent 72%); }
.zoom-pulse::before { content: ""; position: absolute; inset: 0;
  border-radius: 50%; border: 2px dashed rgba(232,43,141,0.55);
  animation: zoom-spin 18s linear infinite; }
.zoom-pulse i { width: 8px; height: 8px; border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 4px rgba(232,43,141,0.20),
              0 0 0 10px rgba(232,43,141,0.08);
  animation: zoom-blink 1.6s var(--ease-out) infinite; }
.zoom-pulse b { font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-cap); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rose); margin-top: 6px; }
.zoom-pulse em { font-style: normal; font-size: 10px; letter-spacing: 0.06em;
  color: var(--ink-mute); text-align: center; max-width: 12ch; }
.zoom-pulse--blue { background: radial-gradient(circle, rgba(0,67,255,0.18) 0%,
  rgba(0,67,255,0.05) 50%, transparent 72%); }
.zoom-pulse--blue::before { border-color: rgba(0,67,255,0.55); }
.zoom-pulse--blue i { background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0,67,255,0.18), 0 0 0 10px rgba(0,67,255,0.06); }
.zoom-pulse--blue b { color: var(--blue); }
.zoom-pulse--violet { background: radial-gradient(circle, rgba(118,75,225,0.18) 0%,
  rgba(118,75,225,0.05) 50%, transparent 72%); }
.zoom-pulse--violet::before { border-color: rgba(118,75,225,0.55); }
.zoom-pulse--violet i { background: #764BE1;
  box-shadow: 0 0 0 4px rgba(118,75,225,0.18), 0 0 0 10px rgba(118,75,225,0.06); }
.zoom-pulse--violet b { color: #764BE1; }

@keyframes zoom-spin { from { transform: rotate(0); }
  to { transform: rotate(360deg); } }
@keyframes zoom-blink { 0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) {
  .zoom-pulse::before, .zoom-pulse i { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   APP FLOW (v26) — vraie démo tel mobile en 5 frames qui s'enchaînent.
   Pattern Kalmé : on voit l'app, on voit les actions, pas 2 photos.
   Device iPhone réutilisé ; 5 vues capturées en SSO viewport mobile ;
   cursor halo qui pulse sur la nav bottom à chaque transition ;
   panneau copy à droite qui se synchronise (titre + bullet).
   ════════════════════════════════════════════════════════════════ */
.appflow { display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(var(--s-7), 4.5vw, var(--s-11));
  align-items: center; margin-top: var(--s-9); }
@media (max-width: 920px) {
  .appflow { grid-template-columns: 1fr; gap: var(--s-9); }
  .appflow-device { order: -1; justify-content: center; }
}
.appflow-device { position: relative; display: flex; justify-content: center;
  align-items: center; padding: var(--s-5) 0; }
.appflow-device .device {
  width: clamp(248px, 26vw, 320px); aspect-ratio: 9 / 19.3; }
.appflow-stage { position: relative; flex: 1; width: 100%; height: 100%;
  background: #fff; overflow: hidden; }
.appflow-stage img { position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; opacity: 0;
  transition: opacity .55s ease-in-out, transform .55s ease-in-out; }
/* 5 étapes × 4s = 20s cycle, transitions douces .55s */
.appflow-stage img.af-1 { animation: af5-1 20s ease-in-out infinite; }
.appflow-stage img.af-2 { animation: af5-2 20s ease-in-out infinite; }
.appflow-stage img.af-3 { animation: af5-3 20s ease-in-out infinite; }
.appflow-stage img.af-4 { animation: af5-4 20s ease-in-out infinite; }
.appflow-stage img.af-5 { animation: af5-5 20s ease-in-out infinite; }
@keyframes af5-1 { 0%,16% { opacity: 1; transform: scale(1); }
  20%,95% { opacity: 0; transform: scale(1.02); } 100% { opacity: 1; } }
@keyframes af5-2 { 0%,16% { opacity: 0; } 20%,36% { opacity: 1; transform: scale(1); }
  40%,100% { opacity: 0; transform: scale(1.02); } }
@keyframes af5-3 { 0%,36% { opacity: 0; } 40%,56% { opacity: 1; transform: scale(1); }
  60%,100% { opacity: 0; transform: scale(1.02); } }
@keyframes af5-4 { 0%,56% { opacity: 0; } 60%,76% { opacity: 1; transform: scale(1); }
  80%,100% { opacity: 0; transform: scale(1.02); } }
@keyframes af5-5 { 0%,76% { opacity: 0; } 80%,95% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); } }

/* Halo "tap" sur la nav bottom : pulse à chaque transition de frame */
.appflow-tap { position: absolute; bottom: 4.2%; width: 22px; height: 22px;
  border-radius: 50%; pointer-events: none; z-index: 5; opacity: 0;
  background: radial-gradient(circle, rgba(0,67,255,0.85) 0%, rgba(0,67,255,0.18) 60%, transparent 80%);
  box-shadow: 0 0 0 0 rgba(0,67,255,0.45); }
/* 5 positions tap (Hub center 10%, Cercle 30%, Biblio 50%, Alertes 70%, Moi 90%) */
.appflow-tap--1 { left: 10%; animation: af-tap-1 20s ease-in-out infinite; }
.appflow-tap--2 { left: 30%; animation: af-tap-2 20s ease-in-out infinite; }
.appflow-tap--3 { left: 50%; animation: af-tap-3 20s ease-in-out infinite; }
.appflow-tap--4 { left: 70%; animation: af-tap-4 20s ease-in-out infinite; }
.appflow-tap--5 { left: 90%; animation: af-tap-5 20s ease-in-out infinite; }
@keyframes af-tap-1 { 0%,13% { opacity: 0; } 14%,17% { opacity: 1; transform: scale(0.6); }
  18%,100% { opacity: 0; transform: scale(1); } }
@keyframes af-tap-2 { 0%,33% { opacity: 0; } 34%,37% { opacity: 1; transform: scale(0.6); }
  38%,100% { opacity: 0; transform: scale(1); } }
@keyframes af-tap-3 { 0%,53% { opacity: 0; } 54%,57% { opacity: 1; transform: scale(0.6); }
  58%,100% { opacity: 0; transform: scale(1); } }
@keyframes af-tap-4 { 0%,73% { opacity: 0; } 74%,77% { opacity: 1; transform: scale(0.6); }
  78%,100% { opacity: 0; transform: scale(1); } }
@keyframes af-tap-5 { 0%,93% { opacity: 0; } 94%,97% { opacity: 1; transform: scale(0.6); }
  98%,100% { opacity: 0; transform: scale(1); } }

/* Panneau copy à droite — 5 cartes qui se synchronisent avec la frame */
.appflow-copy { position: relative; min-height: clamp(280px, 36vw, 380px); }
.appflow-step { position: absolute; inset: 0;
  opacity: 0; transition: opacity .5s ease-in-out;
  display: flex; flex-direction: column; gap: 14px; }
.appflow-step.af-1 { animation: af5-1 20s ease-in-out infinite; }
.appflow-step.af-2 { animation: af5-2 20s ease-in-out infinite; }
.appflow-step.af-3 { animation: af5-3 20s ease-in-out infinite; }
.appflow-step.af-4 { animation: af5-4 20s ease-in-out infinite; }
.appflow-step.af-5 { animation: af5-5 20s ease-in-out infinite; }
.appflow-step .af-num { display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-cap);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.appflow-step .af-num b { display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  color: #fff; font-size: 12px; }
.appflow-step h3 { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15;
  letter-spacing: -0.02em; color: var(--ink); margin: 0; max-width: 16em; }
.appflow-step .af-h-hl {
  background: linear-gradient(108deg, var(--blue-royal) 0%, var(--blue) 48%, var(--blue-royal-lift) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.appflow-step p { font-size: var(--t-base); color: var(--ink-soft);
  line-height: 1.55; margin: 0; max-width: 38em; }
.appflow-progress { display: flex; gap: 8px; margin-top: var(--s-6);
  align-items: center; }
.appflow-progress i { width: 28px; height: 4px; border-radius: 2px;
  background: rgba(15,26,46,0.10); transition: background .3s; flex: none; }
.appflow-progress i.af-1 { animation: af-prog-1 20s ease-in-out infinite; }
.appflow-progress i.af-2 { animation: af-prog-2 20s ease-in-out infinite; }
.appflow-progress i.af-3 { animation: af-prog-3 20s ease-in-out infinite; }
.appflow-progress i.af-4 { animation: af-prog-4 20s ease-in-out infinite; }
.appflow-progress i.af-5 { animation: af-prog-5 20s ease-in-out infinite; }
@keyframes af-prog-1 { 0%,16% { background: var(--blue); }
  20%,100% { background: rgba(15,26,46,0.10); } }
@keyframes af-prog-2 { 0%,16% { background: rgba(15,26,46,0.10); }
  20%,36% { background: var(--blue); } 40%,100% { background: rgba(15,26,46,0.10); } }
@keyframes af-prog-3 { 0%,36% { background: rgba(15,26,46,0.10); }
  40%,56% { background: var(--blue); } 60%,100% { background: rgba(15,26,46,0.10); } }
@keyframes af-prog-4 { 0%,56% { background: rgba(15,26,46,0.10); }
  60%,76% { background: var(--blue); } 80%,100% { background: rgba(15,26,46,0.10); } }
@keyframes af-prog-5 { 0%,76% { background: rgba(15,26,46,0.10); }
  80%,100% { background: var(--blue); } }

@media (prefers-reduced-motion: reduce) {
  .appflow-stage img, .appflow-step, .appflow-tap, .appflow-progress i { animation: none; }
  .appflow-stage img.af-1 { opacity: 1; }
  .appflow-stage img.af-2, .appflow-stage img.af-3, .appflow-stage img.af-4, .appflow-stage img.af-5 { display: none; }
  .appflow-step.af-1 { opacity: 1; }
  .appflow-step.af-2, .appflow-step.af-3, .appflow-step.af-4, .appflow-step.af-5 { display: none; }
  .appflow-tap { display: none; }
  .appflow-progress i.af-1 { background: var(--blue); }
}

/* ════════════════════════════════════════════════════════════════
   SPLITILL (v29) — copy + illustration premium pour chaque section.
   Frank : "y'a plus rien de visuel, c'est full texte moche". Réponse :
   chaque idée illustrée par un visuel propre côté droit (ou gauche
   en --rev). Aligné au pattern Stripe/Linear / Kalmé.
   ════════════════════════════════════════════════════════════════ */
.splitill { display: grid; grid-template-columns: 1fr 0.85fr;
  gap: clamp(var(--s-7), 4.5vw, var(--s-10)); align-items: center;
  margin-top: var(--s-6); }
.splitill--rev { grid-template-columns: 0.85fr 1fr; }
.splitill--rev .splitill-copy { order: 2; }
.splitill--rev .splitill-vis { order: 1; }
@media (max-width: 900px) {
  .splitill, .splitill--rev { grid-template-columns: 1fr; gap: var(--s-7); }
  .splitill .splitill-vis, .splitill--rev .splitill-vis { order: 0; }
  .splitill .splitill-copy, .splitill--rev .splitill-copy { order: 0; }
}
.splitill-copy { min-width: 0; }
.splitill-vis { position: relative; min-height: 280px;
  display: flex; align-items: center; justify-content: center; }

/* SOLO-ILLUS (section 01) : avatar central + tags dispersés autour,
   évoque "tâches éparpillées portées seule". */
.solo-illus { position: relative; width: 100%; max-width: 380px;
  aspect-ratio: 1; }
.solo-avatar { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); z-index: 2;
  width: 110px; height: 110px; border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 22px 44px -16px rgba(15,26,46,0.30),
              0 0 0 8px rgba(232,43,141,0.10); }
.solo-avatar img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.15); }
.solo-tag { position: absolute; z-index: 1;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid rgba(15,26,46,0.08);
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  color: var(--ink-soft); letter-spacing: -0.005em; white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(15,26,46,0.18);
  animation: soloDrift 8s ease-in-out infinite; }
.solo-tag--1 { left: 4%; top: 12%; animation-delay: 0s; }
.solo-tag--2 { right: 2%; top: 18%; animation-delay: 0.8s; }
.solo-tag--3 { right: 0; top: 52%; animation-delay: 1.6s; }
.solo-tag--4 { right: 6%; bottom: 12%; animation-delay: 2.4s; }
.solo-tag--5 { left: 4%; bottom: 16%; animation-delay: 3.2s; }
.solo-tag--6 { left: 0; top: 48%; animation-delay: 4s; }
@keyframes soloDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .solo-tag { animation: none; } }

/* NETWORK-ILLUS (section 02) : SVG hub + dashed lines vers 6 praticiennes. */
.network-illus { width: 100%; max-width: 360px; aspect-ratio: 1;
  display: flex; justify-content: center; align-items: center; }
.network-illus svg { width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 18px 32px rgba(0,67,255,0.10)); }
.network-illus .net-prat circle {
  animation: netPulse 3.2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box; }
.network-illus .net-prat circle:nth-child(1) { animation-delay: 0s; }
.network-illus .net-prat circle:nth-child(2) { animation-delay: 0.4s; }
.network-illus .net-prat circle:nth-child(3) { animation-delay: 0.8s; }
.network-illus .net-prat circle:nth-child(4) { animation-delay: 1.2s; }
.network-illus .net-prat circle:nth-child(5) { animation-delay: 1.6s; }
.network-illus .net-prat circle:nth-child(6) { animation-delay: 2.0s; }
@keyframes netPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) { .network-illus circle { animation: none; } }

/* NOTIFS (section 03) : 3 mini cards de notif iPhone empilées. */
.notifs { display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 420px; }
.notif { position: relative; padding: 14px 16px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15,26,46,0.06);
  border-radius: 16px;
  box-shadow: 0 18px 34px -18px rgba(15,26,46,0.20),
              0 4px 8px -2px rgba(15,26,46,0.05);
  display: flex; flex-direction: column; gap: 4px;
  animation: notifIn 9s ease-in-out infinite; opacity: 0; }
.notif--1 { animation-delay: 0s; }
.notif--2 { animation-delay: 0.7s; margin-left: 14px;
  transform: scale(0.98); opacity: 0.92; }
.notif--3 { animation-delay: 1.4s; margin-left: 28px;
  transform: scale(0.96); opacity: 0.84; }
.notif-app { display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink-mute);
  font-family: var(--font-display); }
.notif-app img { width: 16px; height: 16px; border-radius: 4px; }
.notif-app span { font-weight: 700; color: var(--ink); text-transform: uppercase;
  letter-spacing: 0.06em; flex: 1; }
.notif-app em { font-style: normal; font-size: 10.5px; color: var(--ink-mute); }
.notif h4 { font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-sm); color: var(--ink); margin: 2px 0 0;
  letter-spacing: -0.012em; line-height: 1.3; }
.notif p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4;
  margin: 0; }
@keyframes notifIn {
  0% { opacity: 0; transform: translateY(-14px); }
  6%, 88% { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(14px); }
}
.notif--2 { animation-name: notifIn2; }
.notif--3 { animation-name: notifIn3; }
@keyframes notifIn2 {
  0%, 6% { opacity: 0; transform: translateY(-14px) scale(0.98); }
  12%, 86% { opacity: 0.92; transform: translateY(0) scale(0.98); }
  94%, 100% { opacity: 0; transform: translateY(14px) scale(0.98); }
}
@keyframes notifIn3 {
  0%, 12% { opacity: 0; transform: translateY(-14px) scale(0.96); }
  18%, 84% { opacity: 0.84; transform: translateY(0) scale(0.96); }
  94%, 100% { opacity: 0; transform: translateY(14px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .notif { animation: none; opacity: 1; transform: none; }
}

/* CHRONO (section 06) : timeline verticale 3 steps. */
.chrono { position: relative; width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 26px;
  padding: 8px 0 8px 12px; }
.chrono-line { position: absolute; left: 31px; top: 18px; bottom: 18px;
  width: 2px; background: linear-gradient(180deg,
    var(--blue) 0%, var(--blue) 45%, #E1E6F0 55%, #E1E6F0 100%); }
.chrono-step { position: relative; display: grid;
  grid-template-columns: 40px 1fr; gap: 14px; align-items: center; z-index: 1; }
.chrono-dot { position: relative; width: 40px; height: 40px;
  border-radius: 50%; background: #fff;
  border: 3px solid var(--blue);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--blue);
  box-shadow: 0 8px 16px -6px rgba(0,67,255,0.20); }
.chrono-dot--ok { border-color: #1FB269; color: #1FB269;
  background: linear-gradient(180deg, #F0FBF5 0%, #fff 100%);
  box-shadow: 0 8px 16px -6px rgba(31,178,105,0.30); }
.chrono-dot--ok i { font-style: normal; font-size: 18px; }
.chrono-dot--ko { border-color: #C9C9CF; color: #8A8B97;
  background: #F4F4F7; box-shadow: none; }
.chrono-dot--ko i { font-style: normal; font-size: 18px; }
.chrono-step--start .chrono-dot::after { content: "";
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(0,67,255,0.30);
  animation: chronoPulse 2.2s ease-out infinite; }
@keyframes chronoPulse {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.chrono-bd { display: flex; flex-direction: column; gap: 2px; }
.chrono-time { display: block; font-family: var(--font-display);
  font-weight: 700; font-size: var(--t-cap); letter-spacing: 0.08em;
  color: var(--blue); text-transform: uppercase; }
.chrono-step--ok .chrono-time { color: #1FB269; }
.chrono-step--ko .chrono-time { color: var(--ink-mute); }
.chrono-time b { font-weight: 700; }
.chrono-lbl { display: block; font-family: var(--font-display);
  font-weight: 600; font-size: var(--t-sm); color: var(--ink);
  letter-spacing: -0.008em; line-height: 1.35; margin-top: 1px; }
.chrono-step--ko .chrono-lbl { color: var(--ink-mute); text-decoration: line-through;
  text-decoration-color: rgba(15,26,46,0.20); }
@media (prefers-reduced-motion: reduce) {
  .chrono-step--start .chrono-dot::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   PROSE / NETCHAIN / NEGS (v28) — sections éditoriales du copy Frank.
   Le problème, Notre approche, La réactivité, Ce qu'on ne promet pas.
   Pattern Stripe/Linear : paragraphes propres, pas de bling.
   ════════════════════════════════════════════════════════════════ */
.prose { display: flex; flex-direction: column; gap: var(--s-5);
  max-width: 36em; }
.prose p { font-size: var(--t-md); color: var(--ink-soft);
  line-height: 1.6; margin: 0; max-width: none; }
.prose p:first-of-type { color: var(--ink); font-weight: 400; }
.wrap-narrow .prose { margin-left: auto; margin-right: auto; }

.netchain { list-style: none; padding: 0; margin: var(--s-7) 0 0;
  display: flex; flex-direction: column; gap: 14px;
  max-width: 42em; }
.netchain li { position: relative; padding: 16px 22px 16px 50px;
  background: #fff; border: 1px solid rgba(15,26,46,0.06);
  border-radius: var(--r-3); box-shadow: var(--e-1);
  font-size: var(--t-base); color: var(--ink-soft); line-height: 1.5;
  counter-increment: nc; }
.netchain { counter-reset: nc; }
.netchain li::before { content: counter(nc, decimal-leading-zero);
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; color: var(--blue); }
.netchain li b { color: var(--ink); font-weight: 700; }

.negs { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  max-width: 42em; }
.negs li { position: relative; padding: 14px 18px 14px 46px;
  background: rgba(15,26,46,0.04);
  border-left: 3px solid rgba(15,26,46,0.18);
  border-radius: 0 var(--r-3) var(--r-3) 0;
  font-size: var(--t-base); color: var(--ink); line-height: 1.5; }
.negs li::before { content: "×"; position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%); width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(15,26,46,0.08); border-radius: 50%;
  color: var(--ink-mute); font-weight: 700; font-size: 14px;
  line-height: 1; }

/* Esp-mini enrichi : badge autorité + body box pour respirer */
.esp-mini-bd { padding: 18px 22px 22px; }
.esp-mini-bd .esp-mini-tag,
.esp-mini-bd .esp-mini-h,
.esp-mini-bd .esp-mini-p { margin-left: 0; margin-right: 0; }
.esp-mini-auth { display: inline-block; margin-top: 10px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(0,67,255,0.08); color: var(--blue);
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.04em; }

.incl-aside { margin: var(--s-7) auto 0; max-width: 720px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  justify-content: center; text-align: center;
  padding: 14px 22px;
  background: rgba(232,43,141,0.06); border-radius: var(--r-3);
  font-size: var(--t-sm); color: var(--ink-soft); }
.incl-aside b { color: var(--ink); font-weight: 700; }

/* Press eyebrow centré OPTIQUEMENT (v28 — Frank l'a dit 2x).
   Le letter-spacing wide ajoutait un trailing offset qui décalait le texte
   optiquement vers la gauche. Fix : width fit-content + auto margin. */
.block--tight .eyebrow,
.block--sunken .eyebrow,
.block > .wrap > .eyebrow {
  display: block; width: fit-content; max-width: 100%;
  margin-left: auto; margin-right: auto;
  padding-left: 0.20em; /* compense letter-spacing trailing */ }

/* ════════════════════════════════════════════════════════════════
   HOWAPP (v27) — section 01 simple : 3 étapes claires + photo tel.
   Pas d'animation cross-fade, pas de confusion Espace. Une seule idée :
   "Comment une demande de cliente arrive dans votre app".
   ════════════════════════════════════════════════════════════════ */
.howapp { display: grid; grid-template-columns: 1fr 0.7fr;
  gap: clamp(var(--s-7), 4vw, var(--s-11));
  align-items: center; margin-top: var(--s-8); }
@media (max-width: 900px) {
  .howapp { grid-template-columns: 1fr; gap: var(--s-8); }
  .howapp-phone { order: -1; }
}
.howapp-steps { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: clamp(22px, 2.4vw, 32px); }
.howapp-steps li { display: grid; grid-template-columns: 56px 1fr;
  gap: 18px; align-items: start; position: relative; }
.howapp-steps li:not(:last-child)::before { content: "";
  position: absolute; left: 27px; top: 60px; bottom: -32px; width: 2px;
  background: linear-gradient(180deg, var(--blue) 0%, rgba(0,67,255,0.0) 100%);
  opacity: 0.32; }
.howapp-n { width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 100%);
  color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
  box-shadow: 0 12px 24px -10px rgba(0,67,255,0.45);
  flex: none; }
.howapp-bd h3 { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.018em;
  line-height: 1.2; margin: 6px 0 8px; color: var(--ink); }
.howapp-bd p { font-size: var(--t-base); color: var(--ink-soft);
  line-height: 1.55; margin: 0; max-width: 34em; }
.howapp-phone { position: relative; display: flex; justify-content: center;
  align-items: center; }
.howapp-phone::before { content: ""; position: absolute; inset: 8% -4%;
  background: radial-gradient(ellipse at center, rgba(150,188,255,0.32) 0%, transparent 70%);
  filter: blur(20px); z-index: 0; }
.howapp-phone img { position: relative; z-index: 1;
  width: clamp(240px, 100%, 360px); height: auto; display: block;
  filter: drop-shadow(0 30px 60px rgba(5,12,38,0.32))
          drop-shadow(0 10px 22px rgba(5,12,38,0.18)); }

/* ════════════════════════════════════════════════════════════════
   ESP-MINI (v27) — 3 cards Espace statiques propres. Remplace les
   zoom-shot animés cross-fade que Frank trouvait merdiques.
   ════════════════════════════════════════════════════════════════ */
.esp-mini { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 28px); }
@media (max-width: 880px) { .esp-mini { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .esp-mini { grid-template-columns: 1fr; } }
.esp-mini-card { position: relative; padding: 0;
  background: #fff; border: 1px solid rgba(15,26,46,0.06);
  border-radius: var(--r-4); overflow: hidden;
  box-shadow: var(--e-1); transition: transform .25s var(--ease-out), box-shadow .25s; }
.esp-mini-card:hover { transform: translateY(-3px); box-shadow: var(--e-3); }
.esp-mini-img { aspect-ratio: 4/3; overflow: hidden; background: #F4F6FB; }
.esp-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.esp-mini-tag { display: inline-block; margin: 18px 22px 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(0,67,255,0.08); color: var(--blue);
  font-family: var(--font-display); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; }
.esp-mini-h { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.018em;
  line-height: 1.2; margin: 0 22px 8px; color: var(--ink); }
.esp-mini-p { font-size: var(--t-sm); color: var(--ink-soft);
  line-height: 1.5; margin: 0 22px 22px; }

/* ════════════════════════════════════════════════════════════════
   TIERS3 (v27) — 3 tiers réels (0€/36€/54€) + tier-aside Espace 230€.
   Refondu à partir des tiers réels app.allo-clients.com/pro.
   ════════════════════════════════════════════════════════════════ */
.tiers3 { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 28px); align-items: stretch; }
@media (max-width: 920px) { .tiers3 { grid-template-columns: 1fr; } }
.tier3 { position: relative; display: flex; flex-direction: column;
  gap: 14px; padding: clamp(24px, 2.4vw, 32px);
  background: #fff; border: 1px solid rgba(15,26,46,0.08);
  border-radius: var(--r-4); box-shadow: var(--e-1);
  transition: transform .25s var(--ease-out), box-shadow .25s; }
.tier3:hover { transform: translateY(-2px); box-shadow: var(--e-3); }
.tier3--hl { border-color: rgba(0,67,255,0.30);
  box-shadow: 0 24px 60px -28px rgba(0,67,255,0.30), var(--e-2); }
.tier3--reco { background: linear-gradient(180deg, #fff 0%, #F8FAFF 100%);
  border-color: rgba(232,43,141,0.32);
  box-shadow: 0 28px 64px -28px rgba(232,43,141,0.30), var(--e-2); }
.tier3-reco { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 5px 14px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--rose) 0%, var(--rose-bright) 100%);
  color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 8px 16px -6px rgba(232,43,141,0.45); white-space: nowrap; }
.tier3-tag { font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-cap); color: var(--ink-mute);
  letter-spacing: 0.14em; text-transform: uppercase; }
.tier3-price { display: flex; align-items: baseline; gap: 4px;
  margin-top: 4px; line-height: 1; color: var(--ink);
  font-family: var(--font-display); }
.tier3-price b { font-weight: 800; font-size: clamp(40px, 4vw, 52px);
  letter-spacing: -0.03em; }
.tier3-price span { font-weight: 600; font-size: var(--t-sm);
  color: var(--ink-mute); }
.tier3-sub { font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-base); color: var(--ink); margin: 0; line-height: 1.4;
  letter-spacing: -0.012em; }
.tier3-feats { list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1; }
.tier3-feats li { position: relative; padding-left: 26px;
  font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.45; }
.tier3-feats li::before { content: ""; position: absolute; left: 0; top: 0.5em;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(0,67,255,0.10); border: 1.5px solid var(--blue);
  background-image: linear-gradient(135deg, transparent 38%, var(--blue) 38% 50%, transparent 50% 60%, var(--blue) 60% 72%, transparent 72%);
}
.tier3--reco .tier3-feats li::before { background: rgba(232,43,141,0.10); border-color: var(--rose); }
.tier3 .btn-block { margin-top: 8px; }
.tier3-fine { font-size: 11px; color: var(--ink-mute);
  text-align: center; margin: 6px 0 0; letter-spacing: 0.01em; }

.tier-aside { margin: var(--s-9) auto 0; max-width: 760px;
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-6); align-items: center;
  padding: clamp(22px, 2vw, 30px) clamp(26px, 2.6vw, 36px);
  background: rgba(15,26,46,0.03);
  border: 1px solid rgba(15,26,46,0.07);
  border-radius: var(--r-4); }
@media (max-width: 720px) { .tier-aside { grid-template-columns: 1fr; text-align: left; } }
.tier-aside-pre { display: inline-block; padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(15,26,46,0.08); color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; }
.tier-aside-price {
  background: linear-gradient(140deg, var(--blue-royal-lift) 0%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 800;
}
.tier-aside h4 { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.018em;
  margin: 10px 0 8px; color: var(--ink); }
.tier-aside p { font-size: var(--t-sm); color: var(--ink-soft);
  line-height: 1.5; margin: 0; max-width: 38em; }

.offer-guar-wrap { display: flex; justify-content: center;
  margin-top: var(--s-7); }
.offer-guar { display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  background: rgba(15,26,46,0.04); border-radius: var(--r-3);
  font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.4;
  max-width: 720px; }
.offer-guar > span:first-child { font-size: 24px; color: var(--blue);
  flex: none; }
.offer-guar b { color: var(--ink); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════
   VOUCHER "INCLUS 230€/mois" (v26) — bon visuel avec prix barré, prix
   inclus, dashed border + tear-off circles. Légitime le "offert".
   ════════════════════════════════════════════════════════════════ */
.incl-voucher { position: relative; margin: var(--s-7) auto var(--s-8);
  max-width: 760px; padding: clamp(22px, 2.2vw, 32px) clamp(28px, 3vw, 44px);
  background: linear-gradient(180deg, #fff 0%, #FFF8FC 100%);
  border: 1.5px dashed rgba(232,43,141,0.42);
  border-radius: var(--r-4);
  box-shadow: 0 24px 60px -30px rgba(232,43,141,0.22), inset 0 1px 0 #fff;
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-6);
  align-items: center; }
.incl-voucher::before, .incl-voucher::after { content: "";
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink-surface, #FAFBFE);
  box-shadow: inset 0 1px 3px rgba(15,26,46,0.06); }
.incl-voucher::before { left: -12px; } .incl-voucher::after { right: -12px; }
.incl-voucher-l { min-width: 0; }
.incl-voucher-pre { display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 9px; border-radius: var(--r-pill);
  background: rgba(232,43,141,0.10); color: var(--rose);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-cap);
  letter-spacing: 0.14em; text-transform: uppercase; }
.incl-voucher-pre::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rose); box-shadow: 0 0 0 3px rgba(232,43,141,0.20); }
.incl-voucher-h { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.015em; line-height: 1.18;
  margin: 10px 0 6px; color: var(--ink); max-width: 28em; }
.incl-voucher-p { font-size: var(--t-sm); color: var(--ink-soft);
  margin: 0; line-height: 1.5; max-width: 42em; }
.incl-voucher-r { text-align: right; flex: none; }
.incl-voucher-strike { display: block; font-family: var(--font-display);
  font-weight: 600; font-size: var(--t-md); color: var(--ink-mute);
  text-decoration: line-through; line-height: 1; white-space: nowrap; }
.incl-voucher-now { display: block; margin-top: 4px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -0.02em;
  background: linear-gradient(108deg, var(--rose) 0%, var(--rose-bright) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1; white-space: nowrap; }
.incl-voucher-cta { display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-cap); color: var(--ink-mute);
  letter-spacing: 0.01em; }
.incl-voucher-cta:hover { color: var(--ink-soft); }
.incl-voucher-cta::after { content: "→"; transition: transform .2s var(--ease-quick); }
.incl-voucher-cta:hover::after { transform: translateX(3px); }
@media (max-width: 720px) {
  .incl-voucher { grid-template-columns: 1fr; text-align: center; padding: 24px 22px; }
  .incl-voucher-r { text-align: center; }
  .incl-voucher-pre { margin: 0 auto; }
  .incl-voucher-h, .incl-voucher-p { margin-left: auto; margin-right: auto; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE FIXES (v26) — marges, alignements, GIFs, images cassés.
   Audit déclenché par Frank. Tous les patches dans un bloc cohérent.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Hero : reserrer marges et titre plus visible */
  .hero h1 { font-size: clamp(34px, 8vw, 44px); max-width: none; }
  .hero-sub { font-size: 15px; }
  .hero-eyebrow { font-size: 10px; padding: 5px 10px 5px 8px; }
  /* Zoom modules : single col, ticks plus discrets, frame moins large */
  .zoom { grid-template-columns: 1fr !important; gap: var(--s-7) !important; }
  .zoom--rev .zoom-copy { order: 0; }
  .zoom--rev .zoom-mockup { order: 1; }
  .zoom-tick { font-size: 12px; padding: 8px 11px; gap: 8px;
    bottom: 10px; left: 10px; right: 10px; }
  .zoom-shot--seq3 { padding-bottom: 68px; }
  .zoom-h { font-size: clamp(22px, 5.6vw, 28px); }
  .zoom-frame-bar { padding: 9px 12px; gap: 5px; }
  .zoom-frame-bar > i { width: 9px; height: 9px; }
  .zoom-frame-url { font-size: 10px; margin-left: 6px; }
  /* Voucher : déjà géré au-dessus */
  /* Stats / trust : grille 2x2 */
  .stats { grid-template-columns: 1fr 1fr; gap: 18px; }
  /* Manifesto plus compact */
  .manifesto-h { font-size: clamp(24px, 5.8vw, 32px); }
  /* Reviews carousel : pause respiratoire */
  .rev { min-width: 78vw !important; }
  /* Case study : passer en single col propre */
  .case { grid-template-columns: 1fr; gap: var(--s-6); }
  .case img { aspect-ratio: 16/9; width: 100%; height: auto; min-height: 0; }
  /* vh bilan offre : single col, vh-sep masqué */
  .vh-sep { display: none; }
  .vh-row { gap: var(--s-6); }
  .vh-val b { font-size: clamp(34px, 8vw, 44px) !important; }
  .vh-val--big b { font-size: clamp(40px, 10vw, 56px) !important; }
  /* vsum : aligner en col */
  .vsum { flex-direction: column; align-items: flex-start; gap: 14px; }
  .vsum-r { align-items: flex-start; text-align: left; }
  /* Cta close fine centré */
  .cta-close-fine { padding: 0 12px; }
  /* Press logos un peu plus grands */
  .press { gap: 22px; }
  /* Section row : pastille gardée mais hairline plus courte */
  .srow { gap: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   BIBLIOTHÈQUE (ancienne section) — supprimée v22 (remplacée par .zoom)
   Copy à gauche, frame "browser" à droite avec reel video qui
   scroll en boucle. Pause au hover. Reduced-motion honoré.
   ════════════════════════════════════════════════════════════════ */
.biblio { display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(var(--s-7), 4vw, var(--s-10)); align-items: center;
  margin-top: var(--s-7); }
@media (max-width: 940px) { .biblio { grid-template-columns: 1fr;
  gap: var(--s-8); } }
.biblio-feats { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--s-4); }
.biblio-feats li { position: relative; padding-left: 28px;
  font-size: var(--t-base); color: var(--ink-soft); line-height: 1.5; }
.biblio-feats li::before { content: ""; position: absolute; left: 0; top: 0.55em;
  width: 14px; height: 2px; background: var(--blue);
  border-radius: 2px; }
.biblio-feats b { color: var(--ink); font-weight: 700; }

/* Frame "browser" qui contient le reel animé */
.biblio-mockup { position: relative; }
.biblio-frame { position: relative; border-radius: var(--r-4);
  background: linear-gradient(180deg, #FBFCFE 0%, #EEF3FF 100%);
  border: 1px solid rgba(15,26,46,0.08);
  box-shadow: var(--e-3), inset 0 1px 0 rgba(255,255,255,0.9);
  overflow: hidden; height: 480px; max-width: 540px; margin-left: auto; }
.biblio-frame-bar { display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; background: #fff;
  border-bottom: 1px solid rgba(15,26,46,0.06); position: relative; }
.biblio-frame-bar i { width: 11px; height: 11px; border-radius: 50%;
  background: rgba(15,26,46,0.10); }
.biblio-frame-bar i:first-child { background: #FF5F57; }
.biblio-frame-bar i:nth-child(2) { background: #FEBC2E; }
.biblio-frame-bar i:nth-child(3) { background: #28C840; }
.biblio-frame-bar em { font-style: normal; font-size: var(--t-cap);
  color: var(--ink-mute); letter-spacing: 0.01em; margin-left: 10px; }
.biblio-badge { margin-left: auto; display: inline-flex; align-items: center;
  gap: 6px; padding: 4px 10px;
  background: linear-gradient(135deg, var(--rose) 0%, var(--rose-bright) 100%);
  color: #fff; border-radius: var(--r-pill);
  font-size: var(--t-cap); font-weight: 700; letter-spacing: 0.04em;
  box-shadow: 0 4px 10px -3px rgba(232,43,141,0.45);
  animation: biblio-pulse 2.8s var(--ease-out) infinite; }
.biblio-badge b { font-weight: 800; }
@keyframes biblio-pulse { 0%,72%,100% { transform: scale(1); }
  82% { transform: scale(1.06); } }

.biblio-reel { position: relative; height: calc(100% - 46px);
  overflow: hidden; padding: 14px;
  mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.biblio-reel-track { display: flex; flex-direction: column; gap: 10px;
  animation: biblio-scroll 26s linear infinite;
  will-change: transform; }
.biblio-mockup:hover .biblio-reel-track { animation-play-state: paused; }
@keyframes biblio-scroll { from { transform: translateY(0); }
  to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .biblio-reel-track { animation: none; }
  .biblio-badge { animation: none; }
}

.biblio-card { display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: #fff;
  border: 1px solid rgba(15,26,46,0.06);
  border-radius: var(--r-3);
  box-shadow: 0 1px 2px rgba(15,26,46,0.04); position: relative; }
.biblio-thumb { flex: none; width: 56px; height: 56px;
  border-radius: var(--r-2); display: grid; place-items: center;
  position: relative; overflow: hidden; }
.biblio-thumb::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15,26,46,0.18) 100%); }
.biblio-play { font-size: 12px; color: #fff;
  background: rgba(15,26,46,0.55); width: 22px; height: 22px;
  border-radius: 50%; display: grid; place-items: center;
  padding-left: 2px; position: relative; z-index: 1; }
.biblio-meta { flex: 1; min-width: 0; }
.biblio-title { font-size: var(--t-sm); font-weight: 600;
  color: var(--ink); line-height: 1.3; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biblio-sub { font-size: var(--t-cap); color: var(--ink-mute);
  margin-top: 2px; letter-spacing: 0.01em; }
.biblio-fav { flex: none; font-size: 16px; color: var(--ink-faint);
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; transition: color .2s, background .2s; }
.biblio-card:hover .biblio-fav { color: var(--rose); background: rgba(232,43,141,0.08); }

/* ════════════════════════════════════════════════════════════════
   v30 — Interface frame (browser-style mockup) + Phone mockup
   + Feature bullets. Tout ce qu'il fallait pour les mini-sections
   Stripe/Linear de l'Espace : copy + vrai screencast vidéo cadré
   dans une chrome propre. Plus aucune illustration inventée.
   ════════════════════════════════════════════════════════════════ */
.ifr {
  position: relative;
  width: 100%; max-width: 560px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15,26,46,0.08);
  box-shadow:
    0 32px 64px -22px rgba(15,26,46,0.30),
    0 12px 24px -10px rgba(15,26,46,0.12),
    0 2px 4px rgba(15,26,46,0.04);
}
.ifr-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #fafbfd 0%, #f1f3f8 100%);
  border-bottom: 1px solid rgba(15,26,46,0.06);
}
.ifr-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.ifr-dot--r { background: #ff5f57; }
.ifr-dot--y { background: #febc2e; }
.ifr-dot--g { background: #28c840; }
.ifr-url {
  flex: 1; margin-left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid rgba(15,26,46,0.08);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 500;
  color: var(--ink-soft); letter-spacing: 0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ifr-lock { color: var(--ink-mute); font-size: 10px; opacity: 0.7; }
.ifr-bd {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #f5f7fb;
  overflow: hidden;
}
.ifr-bd img, .ifr-bd video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 900px) {
  .ifr { max-width: 100%; }
  .ifr-bar { padding: 8px 12px; }
  .ifr-url { font-size: 10.5px; padding: 3px 10px; }
}

/* Phone mockup : châssis sobre + écran réel iPhone 13 (1170×2532). */
.pmock {
  position: relative;
  width: 100%; max-width: 280px;
  aspect-ratio: 9 / 19.5;
  border-radius: 38px;
  padding: 9px;
  background: linear-gradient(150deg, #2c3447 0%, #161c29 32%, #0d121d 70%, #1a212f 100%);
  box-shadow:
    0 36px 60px -22px rgba(15,26,46,0.42),
    0 14px 26px -10px rgba(15,26,46,0.20),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  margin: 0 auto;
}
.pmock-notch {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px; border-radius: 13px;
  background: #0a0f1a; z-index: 3;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.pmock img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  border-radius: 30px;
  object-fit: cover; object-position: top center;
  display: block;
  background: #fff;
}
@media (max-width: 900px) { .pmock { max-width: 240px; } }

/* Feature bullets check (mini-section Stripe-style) */
.fbull {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.fbull li {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.fbull-c {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  background: rgba(0,67,255,0.10);
  color: var(--blue);
  margin-top: 1px;
}
.fbull-c svg { width: 13px; height: 13px; }

/* ════════════════════════════════════════════════════════════════
   v31 — Visuels pour casser les pavés texte (sections 01, 02, 09)
   + intro Espace (Hub pleine largeur) + Honesty cards (subtle).
   ════════════════════════════════════════════════════════════════ */

/* Section 01 : 3 chiffres-clé + 1 citation côté droit du split */
.figstack { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  width: 100%; max-width: 480px; }
.figcell {
  background: #fff;
  border: 1px solid rgba(15,26,46,0.08);
  border-radius: var(--r-3);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow:
    0 14px 28px -16px rgba(15,26,46,0.18),
    0 2px 4px rgba(15,26,46,0.04);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.figcell:hover { transform: translateY(-3px); box-shadow: 0 22px 38px -16px rgba(15,26,46,0.22); }
.figcell > b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 36px);
  color: var(--blue);
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.figcell > span {
  font-size: var(--t-cap);
  color: var(--ink-soft);
  line-height: 1.45;
  letter-spacing: var(--tr-normal);
}
.figcell--quote { grid-column: 1 / -1; background: linear-gradient(140deg, #F4F6FB 0%, #fff 60%); }
.figcell--quote .figq {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-md);
  color: var(--ink); line-height: 1.4;
  letter-spacing: -0.005em;
  font-style: italic;
}
.figcell--quote .figq-by {
  font-size: var(--t-cap);
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin-top: 4px;
}
@media (max-width: 700px) {
  .figstack { max-width: 100%; }
}

/* Section 02 .split--apr : copy étroit + mlist large */
.split--apr { grid-template-columns: 0.78fr 1.22fr; align-items: start;
  gap: clamp(var(--s-7), 5vw, var(--s-10)); }
@media (max-width: 900px) { .split--apr { grid-template-columns: 1fr; } }

/* Intro Espace : Hub pleine largeur en browser frame, ressort comme
   un dashboard premium. */
.hub-hero { position: relative; display: flex; justify-content: center;
  margin: var(--s-5) auto 0; max-width: 1080px; }
.hub-hero .ifr { max-width: 100%; }
.hub-hero .ifr-bd { aspect-ratio: 16 / 9; }

/* Section 09 — Honesty : 3 cartes neutres avec X discret, pas alarmiste */
.honesty {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(165deg, #FFFFFF 0%, #F8F6F2 100%);
  border: 1px solid rgba(15,26,46,0.08);
  border-radius: clamp(20px, 2.4vw, 28px);
  padding: clamp(32px, 4.4vw, 56px);
  box-shadow:
    0 30px 60px -28px rgba(15,26,46,0.16),
    0 4px 10px -4px rgba(15,26,46,0.05),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
.honesty::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 90% 0%, rgba(15,26,46,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(232,43,141,0.04) 0%, transparent 60%);
}
.honesty > .h-xl { color: var(--ink); }
.honesty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
@media (max-width: 800px) { .honesty-grid { grid-template-columns: 1fr; } }
.honesty-card {
  position: relative;
  padding: 26px 24px 24px 62px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(15,26,46,0.07);
  border-radius: var(--r-3);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.honesty-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -16px rgba(15,26,46,0.14);
}
.honesty-x {
  position: absolute;
  top: 24px; left: 22px;
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  background: linear-gradient(150deg, rgba(232,43,141,0.10) 0%, rgba(232,43,141,0.04) 100%);
  border: 1px solid rgba(232,43,141,0.22);
  color: var(--rose);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 600; font-size: 16px;
  line-height: 1;
  box-shadow: 0 2px 4px -1px rgba(232,43,141,0.18);
}
.honesty-card h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-md); color: var(--ink);
  letter-spacing: -0.012em; line-height: 1.3;
  margin: 0 0 8px;
}
.honesty-card p {
  margin: 0; font-size: var(--t-sm);
  color: var(--ink-soft); line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════
   v32 — Constellation canaux (section 01) + Authority badges
   ════════════════════════════════════════════════════════════════ */
.chans {
  position: relative;
  width: 100%;
  max-width: 500px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-content: start;
}
.chan {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 14px 11px 12px;
  background: #fff;
  border: 1px solid rgba(15,26,46,0.08);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow:
    0 8px 18px -10px rgba(15,26,46,0.16),
    0 2px 3px rgba(15,26,46,0.04);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.chan:hover { transform: translateY(-2px) rotate(0); box-shadow: 0 14px 26px -12px rgba(15,26,46,0.20); }
.chan svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
.chan b { font-weight: 600; }
/* léger désalignement = ressentir le "dispersé" */
.chan-1 { transform: rotate(-1.2deg); }
.chan-2 { transform: rotate(0.8deg); margin-top: 4px; }
.chan-3 { transform: rotate(-0.6deg); }
.chan-4 { transform: rotate(1.4deg); margin-top: -2px; }
.chan-5 { transform: rotate(-1deg); }
.chan-6 { transform: rotate(0.6deg); margin-top: 3px; }
.chans-bd {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 16px 22px;
  background: linear-gradient(140deg, rgba(232,43,141,0.06) 0%, rgba(0,67,255,0.05) 100%);
  border: 1px solid rgba(232,43,141,0.18);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.chans-bd > span:first-child {
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rose);
}
.chans-bd b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--ink); letter-spacing: -0.012em;
  line-height: 1.25;
}
.chans-bd em {
  font-style: normal; font-size: var(--t-sm);
  color: var(--ink-soft); line-height: 1.4;
}
@media (max-width: 700px) {
  .chans { grid-template-columns: repeat(2, 1fr); min-height: 0; }
  .chan { font-size: 12px; padding: 9px 12px; }
}

/* Authority badge — petit sceau premium pour les phrases d'autorité */
.aut {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: var(--s-6);
  padding: 12px 18px 12px 14px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F4F7FE 100%);
  border: 1px solid rgba(0,67,255,0.16);
  border-radius: var(--r-pill);
  box-shadow:
    0 1px 2px rgba(0,67,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.8);
  max-width: 100%;
}
.aut-seal {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-grid; place-items: center;
  background: linear-gradient(150deg, var(--blue-royal-lift) 0%, var(--blue) 100%);
  box-shadow:
    0 4px 8px -2px rgba(0,67,255,0.32),
    inset 0 1px 0 rgba(255,255,255,0.25);
  padding: 5px;
}
.aut-seal svg { width: 20px; height: 20px; display: block; }
.aut-logo {
  height: 14px; width: auto; display: inline-block;
  vertical-align: -2px;
  margin-left: 4px;
}
.aut--price { gap: 16px; padding: 14px 22px 14px 16px; }
.aut--price .aut-bd { gap: 4px; }
.aut--price .aut-bd b {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.aut--price .aut-strike {
  color: var(--ink-mute); text-decoration: line-through;
  text-decoration-color: rgba(15,26,46,0.45);
  text-decoration-thickness: 2px;
  font-weight: 600; font-size: 14px;
  letter-spacing: -0.005em;
}
.aut--price .aut-arrow {
  color: var(--blue); font-weight: 400;
  font-size: 22px; line-height: 1;
}
.aut--price .aut-now {
  background: linear-gradient(140deg, var(--rose) 0%, #C9216A 60%, #8E1450 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 800;
  font-size: clamp(34px, 3.8vw, 46px);
  letter-spacing: -0.028em;
}

/* v35 — Press head fully centered + Stats accent bleu subtil */
.press-head { display: flex; justify-content: center;
  margin: var(--s-11) 0 var(--s-7); }
.press-eye { letter-spacing: 0.22em; padding-left: 0.22em; text-align: center; }
.stats b {
  background: linear-gradient(150deg, var(--blue-royal-lift) 0%, var(--blue) 60%, #0E1B3E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* v35 — Avant/Après case study premium refonte */
.ba { display: flex; flex-direction: column; gap: 10px;
  margin: var(--s-7) 0; padding: 0; }
.ba-row { display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch; gap: 12px; }
.ba-cell {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(15,26,46,0.08);
  box-shadow: 0 4px 10px -4px rgba(15,26,46,0.08);
}
.ba-cell--before {
  background: linear-gradient(135deg, rgba(232,43,141,0.04) 0%, #fff 100%);
  border-color: rgba(232,43,141,0.14);
}
.ba-cell--after {
  background: linear-gradient(135deg, rgba(0,67,255,0.05) 0%, #fff 100%);
  border-color: rgba(0,67,255,0.18);
}
.ba-lbl {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1;
}
.ba-cell--before .ba-lbl { color: var(--rose); }
.ba-cell--after .ba-lbl { color: var(--blue); }
.ba-v {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-md); color: var(--ink);
  letter-spacing: -0.012em; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.ba-cell--after .ba-v {
  background: linear-gradient(140deg, var(--blue-royal-lift) 0%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ba-arr {
  align-self: center;
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff; font-size: 14px;
  box-shadow: 0 4px 10px -2px rgba(0,67,255,0.45);
}
@media (max-width: 700px) {
  .ba { gap: 18px; }
  .ba-row { grid-template-columns: 1fr; gap: 10px; padding-bottom: 8px; }
  .ba-row + .ba-row { border-top: 1px dashed rgba(15,26,46,0.10); padding-top: 18px; }
  .ba-arr { transform: rotate(90deg); margin: 4px auto; }
}

/* Responsive safety net : kill rogue right margins */
html, body { overflow-x: hidden; }
.pwrap { overflow-x: clip; }

/* v45 — Fix Home case-ba (classes non matchées avec .ba/.ba-cell) */
.case-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: var(--s-6) 0 var(--s-7);
}
.case-ba > div {
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(232,43,141,0.04) 0%, #fff 100%);
  border: 1px solid rgba(232,43,141,0.14);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.case-ba > div.after {
  background: linear-gradient(135deg, rgba(0,67,255,0.05) 0%, #fff 100%);
  border-color: rgba(0,67,255,0.18);
}
.case-ba .lbl {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rose); line-height: 1;
}
.case-ba > div.after .lbl { color: var(--blue); }
.case-ba .v {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-md); color: var(--ink);
  letter-spacing: -0.012em; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.case-ba > div.after .v {
  background: linear-gradient(140deg, var(--blue-royal-lift) 0%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (max-width: 700px) { .case-ba { grid-template-columns: 1fr; } }

/* v36 — SystemX section premium upgrade
   Frank : c'est notre produit le plus premium, doit avoir de la gueule. */
.sysx {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(140deg, #08123B 0%, #0F1A4B 35%, #0A1638 70%, #050B2A 100%);
  border: 1px solid rgba(150,188,255,0.14);
  padding: clamp(32px, 4vw, 56px);
  color: #fff;
  box-shadow:
    0 40px 80px -30px rgba(5,12,38,0.45),
    0 12px 24px -10px rgba(5,12,38,0.20);
}
.sysx-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.20;
  background-image:
    linear-gradient(rgba(255,255,255,0.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.42) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 100% at 85% 0%, #000 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 85% 0%, #000 0%, transparent 65%);
}
.sysx-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 85% 6%, rgba(120,164,255,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 40% 45% at 4% 90%, rgba(232,43,141,0.18) 0%, transparent 70%);
  filter: blur(2px);
}
.sysx-bd {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.4fr auto; gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
@media (max-width: 800px) { .sysx-bd { grid-template-columns: 1fr; } }
.sysx-copy { max-width: 38em; }
.sysx-brand {
  display: inline-flex; align-items: center; gap: 12px;
}
.sysx-mark {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--blue-royal-lift) 0%, var(--blue) 100%);
  color: #fff;
  box-shadow: 0 4px 10px -2px rgba(0,67,255,0.45);
}
.sysx-mark svg { width: 18px; height: 18px; }
.sysx-pre {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.88);
}
.sysx-dot { color: rgba(255,255,255,0.4); margin: 0 4px; }
.sysx-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  color: #fff;
  letter-spacing: -0.022em; line-height: var(--lh-snug);
  margin: var(--s-5) 0 var(--s-4);
  max-width: 14em;
}
.sysx-body {
  font-size: var(--t-base); line-height: var(--lh-relaxed);
  color: rgba(220,232,255,0.85);
  margin: 0; max-width: 38em;
}
.sysx-cta {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
}
.sysx-fine {
  font-size: var(--t-cap); color: rgba(220,232,255,0.55);
  margin: 0; letter-spacing: 0.01em;
}

/* v40 — Étude de cas Axelle : photo + arrow overlay Mois 0 → Mois 2
   Match du mockup Frank (étudedecas.png) */
.case-photo {
  position: relative;
  align-self: stretch;
  display: flex; justify-content: center; align-items: stretch;
  min-height: 280px;
}
.case-photo > img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: var(--r-3);
  position: relative; z-index: 1;
}
.case-photo-from, .case-photo-to {
  position: absolute; z-index: 3;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 14px;
  background: #fff;
  border-radius: var(--r-2);
  box-shadow:
    0 10px 22px -8px rgba(15,26,46,0.22),
    0 2px 4px rgba(15,26,46,0.06);
  border: 1px solid rgba(15,26,46,0.06);
}
.case-photo-from { top: 8%; left: 6%; }
.case-photo-to   { bottom: 10%; right: 6%; }
.case-photo-eye {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rose); line-height: 1;
}
.case-photo-to .case-photo-eye { color: var(--blue); }
.case-photo-from b, .case-photo-to b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.018em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.case-photo-from b { color: var(--ink); }
.case-photo-to b {
  background: linear-gradient(140deg, var(--blue-royal-lift) 0%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.case-photo-arrow {
  position: absolute; top: 8%; left: 18%; width: 70%; height: 84%;
  z-index: 2; pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(232,43,141,0.20));
}
@media (max-width: 700px) {
  .case-photo-from { top: 6%; left: 4%; }
  .case-photo-to { bottom: 6%; right: 4%; }
  .case-photo-arrow { width: 70%; }
}

/* v36 — Proof dashboard credibility image (Frank credibilise stats) */
.proof-dash { display: flex; justify-content: center; align-items: center;
  margin: clamp(var(--s-7), 4vw, var(--s-9)) auto var(--s-8);
  max-width: 980px; padding: 0; }
.proof-dash > img {
  display: block; width: 100%; height: auto;
  border-radius: 18px;
  border: 1px solid rgba(15,26,46,0.08);
  box-shadow:
    0 28px 52px -22px rgba(15,26,46,0.20),
    0 6px 12px -4px rgba(15,26,46,0.10);
}
.proof-dash > .proof-dash-m { display: none; }
@media (max-width: 820px) {
  .proof-dash > img { display: none; }
  .proof-dash > .proof-dash-m { display: block; max-width: 380px; }
}
.proof-dash { position: relative; }

/* Zoom premium : pulse dot + ring + carte annotation realistic */
.proof-dash-zoom {
  position: absolute;
  left: 22%; top: 78%;
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  pointer-events: none;
  z-index: 3;
}
.proof-dash-zoom-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 3px rgba(232,43,141,0.18), 0 0 12px rgba(232,43,141,0.45);
  z-index: 2;
}
.proof-dash-zoom-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(232,43,141,0.55);
  animation: proof-pulse 2.2s ease-out infinite;
}
@keyframes proof-pulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .proof-dash-zoom-ring { animation: none; } }

.proof-dash-card {
  position: absolute;
  left: 32%; top: 62%;
  padding: 14px 18px 14px 16px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(15,26,46,0.08);
  box-shadow:
    0 22px 44px -14px rgba(5,12,38,0.30),
    0 8px 16px -4px rgba(5,12,38,0.16);
  display: flex; flex-direction: column; gap: 4px;
  z-index: 4;
  min-width: 250px;
}
.proof-dash-card::before {
  content: ""; position: absolute;
  bottom: 100%; left: 22px;
  border: 6px solid transparent;
  border-bottom-color: #fff;
  filter: drop-shadow(0 -1px 0 rgba(15,26,46,0.06));
}
.proof-dash-card-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rose);
}
.proof-dash-card-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #FF3B6C;
  box-shadow: 0 0 0 2px rgba(232,43,141,0.20);
  animation: proof-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes proof-pulse-dot { 50% { opacity: 0.35; } }
.proof-dash-card b {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1.25;
  display: inline-flex; align-items: center; gap: 8px;
}
.proof-dash-card-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(0,67,255,0.10);
  color: var(--blue);
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.proof-dash-card-sub {
  font-size: 12px; color: var(--ink-mute);
  letter-spacing: 0.005em;
}
@media (max-width: 820px) {
  .proof-dash-card { left: 8%; top: 56%; min-width: 220px; }
  .proof-dash-zoom { left: 14%; top: 72%; }
}
@media (max-width: 500px) {
  .proof-dash-card { display: none; }
  .proof-dash-zoom { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   v44 — /espace-seul : styles dédiés (hero stage + index + pricing)
   ════════════════════════════════════════════════════════════════ */
.esp-hero-stage {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  width: 100%; max-width: 420px; margin: 0 auto;
  padding: 28px 0 32px;
}
.esp-hero-halo {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 65% at 50% 55%, rgba(150,188,255,0.40) 0%, transparent 65%),
    radial-gradient(ellipse 30% 28% at 50% 90%, rgba(255,255,255,0.18) 0%, transparent 72%);
  filter: blur(2px);
}
.esp-hero-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.10;
  background-image:
    linear-gradient(rgba(255,255,255,0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.55) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 60% 65% at 50% 55%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 65% at 50% 55%, #000 0%, transparent 75%);
}
.esp-hero-stage .shotwrap { padding: 0; position: relative; z-index: 2; }
.esp-hero-stage .shotframe { width: clamp(220px, 28vw, 290px); }

/* Index — 5 cartes cliquables des rubriques incluses */
.esp-index {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: var(--s-7);
}
@media (max-width: 900px) {
  .esp-index { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .esp-index { grid-template-columns: 1fr; }
}
.esp-index-item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 18px 20px;
  background: #fff;
  border: 1px solid rgba(15,26,46,0.08);
  border-radius: var(--r-3);
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
  box-shadow:
    0 4px 10px -4px rgba(15,26,46,0.08);
  position: relative;
}
.esp-index-item::after {
  content: "→"; position: absolute; right: 18px; bottom: 14px;
  color: var(--blue); font-family: var(--font-display); font-weight: 600;
  font-size: 16px;
  opacity: 0.45;
  transition: transform .3s var(--ease-out), opacity .3s;
}
.esp-index-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -14px rgba(15,26,46,0.18), 0 6px 12px -4px rgba(15,26,46,0.10);
  border-color: rgba(0,67,255,0.30);
}
.esp-index-item:hover::after { transform: translateX(4px); opacity: 1; }
.esp-index-tag {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue); line-height: 1;
}
.esp-index-item b {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-md); color: var(--ink);
  letter-spacing: -0.012em; line-height: 1.3;
  padding-right: 24px;
}

/* Pricing — card unique + alt à droite */
.esp-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-5), 3vw, var(--s-7));
  align-items: stretch;
  margin-top: var(--s-7);
  max-width: 980px; margin-inline: auto;
}
@media (max-width: 800px) {
  .esp-pricing { grid-template-columns: 1fr; }
}
.esp-pricing-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  background: #fff;
  border: 1px solid rgba(15,26,46,0.08);
  border-radius: var(--r-4);
  box-shadow:
    0 32px 56px -28px rgba(15,26,46,0.18),
    0 8px 16px -8px rgba(15,26,46,0.10);
}
.esp-pricing-tag {
  display: inline-block; align-self: flex-start;
  padding: 5px 12px;
  background: rgba(0,67,255,0.10);
  color: var(--blue);
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.esp-pricing-price {
  display: flex; align-items: baseline; gap: 6px;
  margin: 16px 0 4px;
}
.esp-pricing-price b {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(56px, 6.4vw, 84px);
  color: var(--ink); letter-spacing: -0.030em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.esp-pricing-price span {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ink-soft);
}
.esp-pricing-feats {
  list-style: none; padding: 0;
  margin: var(--s-6) 0 var(--s-7);
  display: flex; flex-direction: column; gap: 10px;
}
.esp-pricing-feats li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--t-base); color: var(--ink-soft); line-height: 1.4;
}
.esp-pricing-feats .fbull-c {
  flex: none; width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  background: rgba(0,67,255,0.12);
  color: var(--blue);
  border-radius: 50%; margin-top: 1px;
}
.esp-pricing-feats .fbull-c svg { width: 12px; height: 12px; }
.esp-pricing-fine {
  margin: 12px 0 0;
  text-align: center;
  font-size: var(--t-cap); color: var(--ink-mute);
  letter-spacing: 0.01em;
}
.esp-pricing-alt {
  display: flex; flex-direction: column; gap: 14px;
  align-self: center;
  padding: clamp(20px, 2.4vw, 28px);
  background: linear-gradient(140deg, rgba(0,67,255,0.04) 0%, rgba(0,67,255,0.02) 100%);
  border: 1px dashed rgba(0,67,255,0.20);
  border-radius: var(--r-4);
}
.esp-pricing-alt-pre {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue);
}
.esp-pricing-alt p {
  margin: 0; font-size: var(--t-base);
  color: var(--ink); line-height: 1.45;
}
.esp-pricing-alt p b { font-weight: 700; }
.esp-pricing-alt .alink {
  font-family: var(--font-display); font-weight: 700;
  color: var(--blue); text-decoration: none;
}
.esp-pricing-alt .alink:hover { text-decoration: underline; }

/* v35 — Vidéos mobiles séparées (Ifr--dt = desktop only, Ifr-m = mobile only) */
@media (min-width: 901px) { .ifr-m { display: none !important; } }
@media (max-width: 900px) {
  .ifr--dt { display: none !important; }
  .ifr-m { display: flex; justify-content: center; align-items: center; }
  .ifr-m-frame {
    position: relative;
    width: clamp(220px, 65vw, 320px);
    aspect-ratio: 9 / 19.3;
    border-radius: 38px; padding: 7px;
    background: linear-gradient(150deg, #2c3447 0%, #161c29 32%, #0d121d 70%, #1a212f 100%);
    box-shadow: var(--e-device);
  }
  .ifr-m-island {
    position: absolute; z-index: 4; top: 14px; left: 50%;
    transform: translateX(-50%); width: 32%; height: 20px;
    background: #05070d; border-radius: var(--r-pill);
  }
  .ifr-m-v {
    width: 100%; height: 100%;
    border-radius: 32px;
    display: block;
    object-fit: cover; object-position: top center;
    background: #fff;
  }
}

.aut-bd { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.aut-bd b {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-md); color: var(--ink);
  letter-spacing: -0.01em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.aut-bd span {
  font-size: var(--t-cap); color: var(--ink-soft);
  letter-spacing: 0.005em; margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════
   v33 — Transition flow (Espace intro → sections incluses)
   + Video sound toggle + Section 02 mlist accents
   ════════════════════════════════════════════════════════════════ */
.incl-flow {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  margin-top: clamp(var(--s-7), 4vw, var(--s-9));
  color: var(--blue);
}
.incl-flow-line {
  width: 1px; height: 48px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,67,255,0.45) 100%);
}
.incl-flow-pill {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 11px 22px;
  background: #fff;
  border: 1px solid rgba(0,67,255,0.20);
  border-radius: var(--r-pill);
  box-shadow:
    0 12px 28px -10px rgba(0,67,255,0.20),
    0 2px 4px rgba(15,26,46,0.04);
  margin: 6px 0;
  text-align: center;
}
.incl-flow-eye {
  font-family: var(--font-display); font-weight: 600;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rose); line-height: 1;
}
.incl-flow-pill b {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-md); color: var(--ink);
  letter-spacing: -0.005em; line-height: 1.2;
  margin-top: 4px;
}
.incl-flow-arrow {
  width: 22px; height: 22px;
  color: var(--blue);
  margin-top: 6px;
  animation: incl-bob 2.4s ease-in-out infinite;
}
@keyframes incl-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .incl-flow-arrow { animation: none; } }

/* Video sound toggle (Ifr) */
.ifr-bd { position: relative; }
.ifr-sound {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  background: rgba(5,12,38,0.62);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color: #fff; cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 14px -4px rgba(5,12,38,0.4);
  transition: transform .2s, background .2s;
}
.ifr-sound:hover { transform: scale(1.06); background: rgba(5,12,38,0.78); }
.ifr-sound svg { width: 16px; height: 16px; display: block; }
.ifr-sound .ifr-sound-on { display: none; }
.ifr-sound--on .ifr-sound-mute { display: none; }
.ifr-sound--on .ifr-sound-on { display: block; }

/* Section 02 mlist — accent ligne hover + mini icon discret */
.mlist-row { transition: background .2s; }
.mlist-row:hover { background: linear-gradient(90deg, rgba(0,67,255,0.04) 0%, transparent 100%); }
.mlist-n {
  display: inline-flex; align-items: center; gap: 8px;
}
.mlist-n::before {
  content: ""; display: inline-block;
  width: 16px; height: 1px; background: var(--blue);
  margin-right: 4px; opacity: 0.5;
}

/* Section 01 chans — real brand icons (Insta gradient, Meta blue, etc) */
.chan svg.brand-insta { color: #C13584; }
.chan svg.brand-meta { color: #0866FF; }
.chan svg.brand-google { color: #1A73E8; }
.chan-1 svg, .chan-2 svg, .chan-3 svg, .chan-4 svg, .chan-5 svg, .chan-6 svg {
  width: 20px; height: 20px;
}

/* ════════════════════════════════════════════════════════════════
   /atelier-app v49 — Page webinaire premium (Frank polish pass).
   Hero éditorial avec date pill + bonus card lisible, sections
   homogènes (eyebrow chip + h-xl + sub), promise grid 7 cards,
   format 2 cards Big Time, mur témoignages avec photos avatars.
   ════════════════════════════════════════════════════════════════ */
.atelier-page { background: var(--paper); }

/* Hero atelier : grid 1.05fr|0.95fr — texte/form équilibrés */
.hero--atelier { position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--s-7), 5vw, var(--s-10)) 0 clamp(var(--s-9), 7vw, var(--s-11));
}
.hero--atelier::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 70% 60% at 78% 18%, rgba(80,140,255,0.30) 0%, transparent 60%),
    linear-gradient(165deg, #0E2566 0%, var(--blue-deep) 55%, var(--blue-night) 100%);
}
.hero--atelier-veil { position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>"); }
.atelier-hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--s-6), 3vw, var(--s-9));
  align-items: start;
}
.atelier-hero-copy { color: #fff; }

/* Eyebrow chip : pastille premium avec dot + double info séparée */
.atelier-eye {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-cap); color: rgba(232,240,255,0.96);
  letter-spacing: 0.08em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  margin-bottom: var(--s-6);
}
.atelier-eye b { font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: 0.12em; }
.atelier-eye-dot { display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--rose-bright);
  box-shadow: 0 0 0 3px rgba(232,43,141,0.25); }
.atelier-eye-sep { display: inline-block; width: 1px; height: 12px;
  background: rgba(255,255,255,0.28); }

.atelier-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 4.6vw, 64px);
  letter-spacing: -0.026em; line-height: 1.02;
  color: #fff; margin: 0; max-width: 13em;
}
.atelier-h .hl {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(232,43,141,0.35) 60%, rgba(232,43,141,0.35) 92%, rgba(255,255,255,0) 92%);
  padding: 0 4px;
}

/* Meta row : date pill + free badge */
.atelier-meta { display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-top: var(--s-6); }
.atelier-date { display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 12px;
  background: linear-gradient(180deg, rgba(232,43,141,0.20) 0%, rgba(232,43,141,0.14) 100%);
  border: 1px solid rgba(232,43,141,0.50);
  border-radius: var(--r-pill);
  color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-sm); letter-spacing: 0.02em;
  box-shadow: 0 4px 12px -4px rgba(232,43,141,0.30);
}
.atelier-date-ic { display: inline-flex; color: var(--rose-bright); }
.atelier-date-ic svg { width: 16px; height: 16px; }
.atelier-date b { font-weight: 700; color: #fff; }
.atelier-free {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-sm); color: rgba(232,240,255,0.88);
  letter-spacing: -0.005em;
}
.atelier-free::before { content: ""; display: inline-block;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.40);
  vertical-align: middle; margin-right: 10px; }

.atelier-sub { font-family: var(--font-body);
  font-size: clamp(16px, 1.18vw, 19px);
  color: rgba(232,240,255,0.95); margin-top: var(--s-5);
  max-width: 34em; line-height: 1.55; }

/* Bonus card v50 : carte très lisible (Frank : 'illisible' v49a)
   gradient rose translucide + icône cadeau bigger + titre fort blanc
   contraste max sur cobalt, body en blanc plein. */
.atelier-bonus {
  display: flex; align-items: flex-start; gap: 16px;
  margin-top: var(--s-7);
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(232,43,141,0.18) 0%, rgba(232,43,141,0.08) 100%);
  border: 1px solid rgba(232,43,141,0.45);
  border-radius: var(--r-4);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(232,43,141,0.30);
}
.atelier-bonus-ic { flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--rose-bright);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 4px 10px -2px rgba(232,43,141,0.45);
}
.atelier-bonus-ic svg { width: 22px; height: 22px; }
.atelier-bonus-bd { display: flex; flex-direction: column; gap: 6px;
  min-width: 0; }
.atelier-bonus-tag {
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; letter-spacing: 0.10em;
  text-transform: uppercase; color: #fff;
  line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.atelier-bonus-body { font-size: 15px; line-height: 1.55;
  color: #fff; font-weight: 500; }

.atelier-hero-cta { display: flex; align-items: center;
  flex-wrap: wrap; gap: 18px; margin-top: var(--s-7); }
.atelier-stock { display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: var(--t-sm);
  color: rgba(232,240,255,0.92); }
.atelier-stock-txt { letter-spacing: -0.005em; }
.atelier-stock-dot { flex: none;
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--rose-bright);
  box-shadow: 0 0 0 3px rgba(232,43,141,0.25);
  animation: atelier-stock-pulse 1.6s ease-out infinite; }
@keyframes atelier-stock-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(232,43,141,0.45); }
  100% { box-shadow: 0 0 0 8px rgba(232,43,141,0); }
}

.atelier-trust { display: inline-flex; align-items: baseline; gap: 12px;
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.14); }
.atelier-trust b { font-family: var(--font-display); font-weight: 800;
  color: #fff; font-size: var(--t-2xl);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.atelier-trust span { color: rgba(232,240,255,0.85); font-size: var(--t-sm); }

/* Form box premium */
.atelier-form {
  background: #fff; border-radius: var(--r-4);
  padding: clamp(22px, 2.4vw, 32px);
  box-shadow:
    0 32px 64px -16px rgba(5,12,38,0.55),
    0 12px 24px -8px rgba(5,12,38,0.35);
  border: 1px solid rgba(15,26,46,0.06);
  position: sticky; top: calc(66px + var(--s-5));
}
.atelier-form-eye {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 6px;
}
.atelier-form-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.012em;
  line-height: 1.15; color: var(--ink); margin: 0 0 var(--s-6);
}
.atelier-form-fields { display: grid; gap: var(--s-4); }
.atelier-field { display: flex; flex-direction: column; gap: 6px; }
.atelier-field span { font-family: var(--font-display);
  font-weight: 600; font-size: var(--t-sm); color: var(--ink); }
.atelier-field input { font-family: var(--font-body);
  font-size: 15px; color: var(--ink);
  padding: 11px 14px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .2s, background .2s, box-shadow .2s; }
.atelier-field input:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,67,255,0.12);
}
.atelier-radio { border: 0; padding: 0; margin: 0; }
.atelier-radio legend { font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-sm); color: var(--ink); margin-bottom: 6px; padding: 0; }
.atelier-radio-row { display: flex; gap: 10px; }
.atelier-radio-opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-sm); color: var(--ink);
  cursor: pointer;
  transition: border-color .2s, background .2s; }
.atelier-radio-opt:has(input:checked) {
  background: rgba(0,67,255,0.08);
  border-color: var(--blue);
  color: var(--blue);
}
.atelier-radio-opt input { accent-color: var(--blue); }
.atelier-consent { display: flex; align-items: flex-start; gap: 10px;
  margin: var(--s-6) 0 var(--s-5);
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
.atelier-consent-c { flex: none; color: var(--blue);
  width: 18px; height: 18px;
  background: rgba(0,67,255,0.10); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; }
.atelier-consent-c svg { width: 12px; height: 12px; }
.atelier-form-cta { margin-top: var(--s-3); }
.atelier-form-fine { display: flex; align-items: center; gap: 10px;
  margin-top: var(--s-4); font-size: var(--t-sm); color: var(--ink-mute);
  justify-content: center; }

/* ── Sections head : eyebrow chip blue + h-xl + sub centré ──── */
.atelier-sec-head { text-align: center; max-width: 38em;
  margin: 0 auto var(--s-8); }
.atelier-sec-eye {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: rgba(0,67,255,0.08);
  border: 1px solid rgba(0,67,255,0.20);
  border-radius: var(--r-pill);
  color: var(--blue);
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.atelier-sec-eye::before { content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.atelier-sec-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.022em;
  line-height: 1.08; color: var(--ink);
  max-width: 22em; margin: 0 auto;
}
.atelier-sec-sub { font-family: var(--font-body);
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--ink-soft); margin: var(--s-4) auto 0;
  max-width: 36em; line-height: 1.55; }

/* ── Case Axelle row premium ──────────────────────────── */
.atelier-case {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(20px, 2.5vw, 44px); align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.atelier-case-photo { margin: 0; position: relative; }
.atelier-case-photo img {
  width: 100%; height: auto; aspect-ratio: 16/9;
  object-fit: contain; background: #f5f4f1;
  border-radius: var(--r-4); box-shadow: var(--e-2);
  outline: 1px solid rgba(15,26,46,0.06);
  display: block;
}
.atelier-case-cap { margin-top: 12px; text-align: left;
  font-family: var(--font-body); }
.atelier-case-cap b { display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-sm); color: var(--ink); }
.atelier-case-cap span { display: block;
  font-size: 13px; color: var(--ink-mute); margin-top: 2px; }

.atelier-case-q {
  font-family: var(--font-body); font-style: italic;
  font-size: clamp(18px, 1.7vw, 24px); color: var(--ink);
  margin: 0 0 var(--s-7);
  line-height: 1.45;
  position: relative; padding-left: clamp(24px, 2.4vw, 36px);
}
.atelier-case-q-mark {
  position: absolute; left: 0; top: -8px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(48px, 5vw, 72px); color: var(--blue);
  line-height: 1; opacity: 0.55;
}
.atelier-case-extra { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.atelier-case-mini { padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--e-1);
  transition: transform .24s var(--ease-quick), box-shadow .24s var(--ease-quick);
}
.atelier-case-mini:hover { transform: translateY(-2px); box-shadow: var(--e-2); }
.atelier-case-mini .stars { color: var(--gold);
  font-size: 13px; letter-spacing: 2.5px; line-height: 1; }
.atelier-case-mini p { font-size: 14.5px; color: var(--ink);
  line-height: 1.5; margin: 8px 0 10px; font-style: italic; }
.atelier-case-mini-by b { font-family: var(--font-display); font-weight: 700;
  color: var(--ink); font-size: var(--t-sm); display: block; }
.atelier-case-mini-by span { font-size: 12.5px; color: var(--ink-mute);
  display: block; margin-top: 2px; }
.atelier-case-stamp {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: rgba(0,67,255,0.06);
  border: 1px solid rgba(0,67,255,0.16);
  border-radius: var(--r-pill);
}
.atelier-case-stamp .stars { color: var(--gold);
  font-size: 13px; letter-spacing: 2px; line-height: 1; }
.atelier-case-stamp b { font-family: var(--font-display); font-weight: 700;
  color: var(--blue); font-size: var(--t-sm); }

/* ── Promesse grid premium : 7 cards égales (3+3+1 desktop) ──── */
.atelier-promise { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  max-width: 1100px; margin-left: auto; margin-right: auto; }
.atelier-promise-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(20px, 2.2vw, 26px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--e-1);
  transition: transform .26s var(--ease-quick), box-shadow .26s var(--ease-quick), border-color .26s;
  position: relative;
  isolation: isolate;
}
.atelier-promise-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,67,255,0.04) 0%, transparent 30%);
  opacity: 0; transition: opacity .26s;
}
.atelier-promise-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,67,255,0.30);
  box-shadow: var(--e-3);
}
.atelier-promise-card:hover::before { opacity: 1; }
.atelier-promise-card:last-child { /* "Bonus exclusif" */
  background: linear-gradient(165deg, #0E2566 0%, var(--blue-deep) 100%);
  color: #fff;
  border: 0;
  box-shadow:
    0 16px 32px -10px rgba(11,42,134,0.40),
    0 6px 12px -4px rgba(11,42,134,0.30);
}
.atelier-promise-card:last-child .atelier-promise-n { color: var(--rose-bright); }
.atelier-promise-card:last-child .atelier-promise-hl { color: #fff; }
.atelier-promise-card:last-child .atelier-promise-bd { color: rgba(232,240,255,0.92); }
.atelier-promise-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: rgba(0,67,255,0.08);
  border: 1px solid rgba(0,67,255,0.20);
  border-radius: 10px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px; color: var(--blue);
  font-variant-numeric: tabular-nums;
  line-height: 1; letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.atelier-promise-hl {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lg); color: var(--ink);
  letter-spacing: -0.012em; line-height: 1.2;
}
.atelier-promise-bd {
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.55;
}

/* ── Format 2 cards Big Time ─────────────────────────── */
.atelier-format { display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-5); }
.atelier-format-card {
  padding: clamp(22px, 2.6vw, 32px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--e-1);
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.atelier-format-lbl {
  display: inline-block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 3.5vw, 44px);
  color: var(--blue); letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.atelier-format-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lg); color: var(--ink);
  letter-spacing: -0.005em; margin-top: 4px;
}
.atelier-format-bd {
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.55;
}

/* ── Avatars dans les reviews atelier (override .rev .rev-by) ── */
.atelier-page .rev { padding: 22px 22px 20px; }
.atelier-page .rev .rev-by { display: flex; align-items: center; gap: 12px;
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft); }
.atelier-page .rev .rev-by img { width: 40px; height: 40px;
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 2px 6px rgba(5,12,38,0.18); }
.atelier-page .rev .rev-by div { display: flex; flex-direction: column;
  gap: 2px; min-width: 0; }
.atelier-page .rev .rev-by b { font-family: var(--font-display);
  font-weight: 700; font-size: 14.5px; color: var(--ink); }
.atelier-page .rev .rev-by span { font-size: 12.5px;
  color: var(--ink-mute); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1020px) {
  .atelier-promise { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 940px) {
  .atelier-hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .atelier-form { position: relative; top: 0; }
  .atelier-case { grid-template-columns: 1fr; }
  .atelier-format { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .atelier-promise { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .atelier-eye { font-size: 11px; padding: 6px 12px 6px 8px; gap: 8px; }
  .atelier-eye b { letter-spacing: 0.08em; }
  .atelier-meta { gap: 10px; }
  .atelier-date { padding: 7px 12px 7px 10px; font-size: 13px; }
  .atelier-bonus { padding: 14px 16px; }
  .atelier-bonus-ic { width: 32px; height: 32px; }
  .atelier-bonus-ic svg { width: 18px; height: 18px; }
  .atelier-hero-cta { flex-direction: column; align-items: stretch; }
  .atelier-hero-cta .btn { width: 100%; }
  .atelier-stock { justify-content: center; }
  .atelier-radio-row { flex-direction: column; }
  .atelier-form { padding: 20px; }
}

/* ── /espace-seul polish v49 : eyebrow chip premium par module ───
   Reprend l'idiome chip atelier (dot bleu + label caps tracked) pour
   homogénéiser le standing avec /app. */
.module-eye {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: rgba(0,67,255,0.08);
  border: 1px solid rgba(0,67,255,0.20);
  border-radius: var(--r-pill);
  color: var(--blue);
  font-family: var(--font-display); font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.module-eye-dot { display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--blue); }
.block--sunken .module-eye {
  background: rgba(0,67,255,0.10);
}

/* ── /atelier-app tunnel mode v50 : pas de Nav globale, pas de Foot
   complète. Mini-bar logo seul + footer minimal légal. C'est un opt-in,
   on ne donne pas d'échappatoire vers le site principal. */
.atelier-tunnel { background: var(--paper); }
.atelier-bar {
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(15,26,46,0.07);
  position: sticky; top: 0; z-index: 40;
}
.atelier-bar-in {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
  padding: 0 var(--s-5);
}
@media (min-width: 640px) { .atelier-bar-in { padding: 0 var(--s-8); } }
.atelier-bar-logo img { height: 22px; width: auto; display: block; }
.atelier-bar-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: -0.005em;
}
.atelier-bar-meta-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: rgba(0,67,255,0.10);
  color: var(--blue);
  border-radius: 50%;
  font-size: 11px; line-height: 1;
}
@media (max-width: 540px) {
  .atelier-bar-meta { font-size: 11.5px; gap: 6px; }
  .atelier-bar-meta-ic { width: 16px; height: 16px; font-size: 10px; }
}

.atelier-foot {
  background: var(--surface-sunken);
  border-top: 1px solid var(--line);
  padding: var(--s-7) 0 var(--s-8);
}
.atelier-foot-in {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.atelier-foot-copy { font-size: 13px; color: var(--ink-mute); }
.atelier-foot-links { display: flex; gap: 22px; }
.atelier-foot-links a {
  font-size: 13px; color: var(--ink-soft);
  transition: color .18s;
}
.atelier-foot-links a:hover { color: var(--ink); }
@media (max-width: 540px) {
  .atelier-foot-in { justify-content: center; text-align: center;
    flex-direction: column; gap: 14px; }
  .atelier-foot-links { gap: 16px; flex-wrap: wrap; justify-content: center; }
}

/* Flash messages atelier (success / error après POST signup) */
.atelier-flash {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px;
  border-radius: var(--r-3);
  margin-bottom: var(--s-5);
  font-size: 14px; line-height: 1.45;
}
.atelier-flash b { font-family: var(--font-display); font-weight: 700;
  font-size: 14.5px; }
.atelier-flash--ok {
  background: rgba(34,139,34,0.08);
  border: 1px solid rgba(34,139,34,0.35);
  color: #14651a;
}
.atelier-flash--ok b { color: #0e4a13; }
.atelier-flash--err {
  background: rgba(232,43,141,0.08);
  border: 1px solid rgba(232,43,141,0.40);
  color: #962057;
}
.atelier-flash--err b { color: #6d1740; }

/* Hero atelier — bg cobalt propre (Frank a écarté la photo conf qui
   rendait moche ou pas clair selon le dosage de l'overlay). On reste
   sur le gradient cobalt original du v49, sans image de fond. */

/* ── Trust band atelier : FranceMap small + stats grid ───────── */
.atelier-trust-band { padding: clamp(var(--s-9), 5vw, var(--s-10)) 0; }
.atelier-trust-grid {
  display: grid; grid-template-columns: 0.55fr 1.45fr;
  gap: clamp(var(--s-7), 4vw, var(--s-9));
  align-items: center;
  max-width: 1080px; margin: 0 auto;
}
.atelier-trust-map { max-width: 280px; }
.atelier-trust-map .frmap { width: 100%; }
.atelier-trust-map .frmap svg { width: 100%; height: auto; }
.atelier-trust-map .frmap-cap b {
  font-size: clamp(28px, 2.6vw, 38px); }
.atelier-trust-map .frmap-cap span {
  font-size: 12.5px; }
.atelier-trust-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-7);
}
.atelier-trust-stat { display: flex; flex-direction: column; gap: 4px; }
.atelier-trust-stat b {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 2.6vw, 38px); color: var(--blue);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.0;
}
.atelier-trust-stat span {
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink-soft); line-height: 1.35;
}
@media (max-width: 760px) {
  .atelier-trust-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .atelier-trust-map { max-width: 240px; margin: 0 auto; }
  .atelier-trust-stats { grid-template-columns: repeat(2, 1fr);
    text-align: center; }
  .atelier-trust-stat { align-items: center; }
}

/* ── Case study link new tab — bouton souligné premium ──────── */
.atelier-case-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--s-6);
  padding: 11px 18px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: -0.005em;
  border-radius: var(--r-pill);
  transition: transform .22s, box-shadow .22s, background .22s;
  box-shadow: 0 8px 18px -6px rgba(0,67,255,0.30);
}
.atelier-case-link:hover {
  background: var(--blue-bright);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(0,67,255,0.45);
}