/* ============================================================================
   Oltanis — Landing page de conversion (B2B).
   S'appuie strictement sur les tokens de colors_and_type.css.
   Charte : trois tons (blanc / encre / cobalt), Bricolage condensé display,
   Geist texte, Geist Mono étiquettes. Pas d'ombre (sauf header au scroll,
   demandé au brief), angles vifs, esthétique tableau / filets hairline.
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Lien d'évitement — accessibilité clavier (visible uniquement au focus) */
.skip-link { position: absolute; left: 12px; top: -64px; z-index: 200; background: var(--encre); color: var(--blanc); font-family: var(--font-sans); font-weight: 500; font-size: 14px; padding: 10px 16px; border-radius: var(--radius-ui); text-decoration: none; transition: top var(--dur-ui) var(--ease); }
.skip-link:focus { top: 12px; }

.page { width: 100%; max-width: var(--max-page); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (min-width: 768px) { .page { padding-left: 48px; padding-right: 48px; } }
@media (min-width: 1100px) { .page { padding-left: 64px; padding-right: 64px; } }
.w-full { width: 100%; }

/* ---- Reconstructed wordmark ---- */
.wm { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; text-transform: uppercase; display: inline-flex; align-items: baseline; user-select: none; line-height: 0.95; }
.wm .accent-i { font-style: italic; color: var(--cobalt); }

/* ---- Mono kicker helper ---- */
.kick { font-family: var(--font-mono); font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--encre-60); }
.section-encre .kick, .footer .kick { color: var(--blanc-60); }

/* ===========================================================================
   Buttons
   ========================================================================== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-ui); font-family: var(--font-sans); font-weight: 500; line-height: 1; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease-spring); }
.btn:active { transform: translateY(1px) scale(0.99); }
@media (prefers-reduced-motion: no-preference) { .btn .arrow { transition: transform 220ms var(--ease-spring); } }
.btn:hover .arrow { transform: translateX(4px); }
.btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.btn:focus-visible .arrow { transform: translateX(4px); }
.btn-md { height: 42px; padding: 0 20px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 30px; font-size: 16px; }
.btn-primary { background: var(--grad-cobalt); color: var(--blanc); box-shadow: 0 4px 14px -6px rgba(24,70,220,0.5); }
.btn-primary:hover { box-shadow: var(--shadow-cobalt); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn-ghost:hover { background: var(--encre); color: var(--blanc); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-reverse { background: var(--blanc); color: var(--encre); }
.btn-reverse:hover { background: var(--cobalt); color: var(--blanc); transform: translateY(-2px); box-shadow: var(--shadow-cobalt); }
.btn-ghost-light { background: transparent; color: var(--blanc); border-color: var(--blanc-20); }
.btn-ghost-light:hover { background: var(--blanc); color: var(--encre); transform: translateY(-2px); }

/* ===========================================================================
   Header — sticky, shrinks + subtle shadow on scroll
   ========================================================================== */
.header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,0.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--hairline); transition: box-shadow var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease); }
.header.is-scrolled { box-shadow: var(--shadow-md); background: rgba(255,255,255,0.85); }
/* Barre de progression de lecture (injectée par landing.js, présente sur toutes les pages) */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 80; background: var(--grad-cobalt); transform: scaleX(0); transform-origin: 0 50%; transition: transform 80ms linear; will-change: transform; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; transition: height var(--dur-ui) var(--ease); }
.header.is-scrolled .header-bar { height: 62px; }
.header-brand { display: inline-flex; align-items: center; gap: 0; font-size: 22px; }
.nav { display: none; align-items: center; gap: 30px; }
.nav a { font-size: 14px; color: var(--encre-85); text-decoration: none; position: relative; padding: 4px 0; transition: color var(--dur-fast) var(--ease); }
/* Soulignement en transform (compositor) : entre par la gauche, sort par la droite */
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--cobalt); transform: scaleX(0); transform-origin: 100% 50%; }
@media (prefers-reduced-motion: no-preference) { .nav a::after { transition: transform var(--dur-ui) var(--ease); } }
.nav a:hover { color: var(--encre); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.header-cta { display: none; }
.burger { display: inline-flex; height: 42px; width: 42px; align-items: center; justify-content: center; border: 1px solid var(--encre); background: transparent; border-radius: var(--radius-ui); font-family: var(--font-mono); font-size: 17px; cursor: pointer; color: var(--encre); }
/* Bascule desktop : placée APRÈS les bases pour que la cascade s'applique. */
@media (min-width: 940px) { .nav { display: flex; } .header-cta { display: inline-flex; } .burger { display: none; } }
.nav-mobile { display: none; flex-direction: column; gap: 4px; padding: 12px 0 24px; border-top: 1px solid var(--hairline); }
.nav-mobile.is-open { display: flex; }
.nav-mobile a { font-size: 17px; padding: 12px 4px; text-decoration: none; border-bottom: 1px solid var(--hairline); }
.nav-mobile .btn { margin-top: 16px; }

/* ===========================================================================
   Sections
   ========================================================================== */
.section { padding-top: 88px; padding-bottom: 88px; background: var(--blanc); color: var(--encre); }
@media (min-width: 768px) { .section { padding-top: 128px; padding-bottom: 128px; } }
@media (min-width: 1200px) { .section { padding-top: 112px; padding-bottom: 112px; } }
/* Respiration renforcée réservée aux sections d'ouverture et de clôture. */
@media (min-width: 1200px) { .section-cobalt, #probleme, #faq { padding-top: 144px; padding-bottom: 144px; } }
.section-encre { background: var(--encre); color: var(--blanc); }
.section-cobalt { background: var(--cobalt); color: var(--blanc); }
.section-tight { padding-top: 56px; padding-bottom: 56px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--hairline); padding-bottom: 18px; margin-bottom: 56px; }
@media (min-width: 1200px) { .section-head { margin-bottom: 68px; } }
.section-encre .section-head { border-color: var(--blanc-20); }
.section-head-left { max-width: 60ch; }
.section-title { margin: 16px 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; font-size: clamp(34px, 5vw, 60px); line-height: 1.0; }
.section-intro { margin: 24px 0 0; max-width: 60ch; font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--encre-80); }
.section-encre .section-intro { color: var(--blanc-80); }
.section-pag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--encre-60); white-space: nowrap; }
.section-encre .section-pag { color: var(--blanc-60); }

/* ===========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; border-bottom: 1px solid var(--hairline); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -10% -5% auto auto; width: 70%; height: 120%; background: var(--glow-cobalt); pointer-events: none; z-index: 0; }
.hero-inner { position: relative; z-index: 1; padding-top: 64px; padding-bottom: 72px; }
/* Entrée échelonnée du hero (motion premium) */
@media (prefers-reduced-motion: no-preference) {
  .hero-eyebrow[data-reveal] { transition-delay: 40ms; }
  .hero-title[data-reveal]   { transition-delay: 120ms; }
  .hero-lead[data-reveal]    { transition-delay: 220ms; }
  .hero-actions[data-reveal] { transition-delay: 320ms; }
  .hero-trust[data-reveal]   { transition-delay: 400ms; }
  .hero-visual[data-reveal]  { transition-delay: 260ms; }
}
@media (min-width: 768px) { .hero-inner { padding-top: 88px; padding-bottom: 96px; } }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 64px; } }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; padding: 7px 14px; border: 1px solid var(--hairline); border-radius: 999px; }
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); }
@media (prefers-reduced-motion: no-preference) { .hero-eyebrow .dot { animation: pulse 2.4s ease-in-out infinite; } }
.hero-title { margin: 28px 0 0; max-width: 16ch; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; font-size: clamp(44px, 7vw, 82px); line-height: 0.94; }
.hero-title .accent-i { color: var(--cobalt); font-style: italic; }
.hero-lead { margin: 28px 0 0; max-width: 46ch; font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--encre-80); }
.hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-trust { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hero-trust span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-60); display: inline-flex; align-items: center; gap: 8px; }
.hero-trust span::before { content: "—"; color: var(--cobalt); }

/* Hero dashboard mock — pure CSS, hairline / table aesthetic, gentle float */
.dash-float { will-change: transform; }
@media (prefers-reduced-motion: no-preference) { .dash-float { animation: floaty 7s ease-in-out infinite; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.dash { border: 1px solid var(--encre); background: var(--blanc); }
.dash-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); background: var(--encre); color: var(--blanc); }
.dash-bar .wm { font-size: 16px; color: var(--blanc); }
.dash-bar .wm .accent-i { color: var(--cobalt); }
.dash-live { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; display: inline-flex; align-items: center; gap: 8px; color: var(--blanc-70); }
.dash-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .dash-live .dot { animation: pulse 2.4s ease-in-out infinite; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); }
.dash-kpi { padding: 18px 16px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.dash-kpi:nth-child(3) { border-right: none; }
.dash-kpi .k-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-60); }
.dash-kpi .k-val { margin-top: 8px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; font-size: 30px; line-height: 1; }
.dash-kpi .k-val .unit { font-size: 14px; color: var(--encre-50); margin-left: 2px; }
.dash-rows { padding: 6px 0; }
.dash-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 11px 16px; }
.dash-row + .dash-row { border-top: 1px solid var(--hairline); }
.dash-row .r-idx { font-family: var(--font-mono); font-size: 11px; color: var(--encre-50); }
.dash-row .r-name { font-size: 14px; font-weight: 500; }
.dash-row .r-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-50); }
.dash-row .r-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.dash-row .r-tag.ok { color: var(--cobalt); border: 1px solid var(--cobalt); }
.dash-row .r-tag.muted { color: var(--encre-60); border: 1px solid var(--hairline); }

/* ===========================================================================
   Targets band
   ========================================================================== */
.targets { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--blanc); }
.targets-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 0; padding: 26px 0; }
.targets-lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-60); padding-right: 28px; }
.targets-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; flex: 1; }
.targets-item { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(22px, 3vw, 34px); line-height: 1; padding: 0 clamp(16px, 3vw, 36px); color: var(--encre); transition: color var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease); cursor: default; }
.targets-item:hover { color: var(--cobalt); transform: translateY(-2px); }
.targets-item + .targets-item { border-left: 1px solid var(--hairline); }

/* ---- Bande de garanties / confiance (proof strip) ---------------------- */
.trustband { border-bottom: 1px solid var(--hairline); background: var(--blanc); overflow-x: clip; }
.trustband-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 18px 0; }
.trustband-lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-60); }
.trustband-list { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.trustband-item { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-80); }
.trustband-item svg { flex: none; width: 15px; height: 15px; color: var(--cobalt); }
@media (max-width: 640px) { .trustband-inner { gap: 10px 18px; } .trustband-lab { width: 100%; } }

/* ===========================================================================
   Problème → Solution
   ========================================================================== */
.ps-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--blanc-20); }
@media (min-width: 860px) { .ps-grid { grid-template-columns: 1fr 1fr; } }
.ps-col { padding: 36px; }
@media (min-width: 768px) { .ps-col { padding: 48px; } }
.ps-col + .ps-col { border-top: 1px solid var(--blanc-20); }
@media (min-width: 860px) { .ps-col + .ps-col { border-top: none; border-left: 1px solid var(--blanc-20); } }
.ps-col.is-sol { background: var(--cobalt); }
.ps-h { margin: 18px 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; font-size: clamp(26px, 3vw, 36px); line-height: 1.02; }
.ps-list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ps-list li { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; font-size: 16px; line-height: 1.5; color: var(--blanc-80); border-top: 1px solid var(--blanc-15); }
.ps-list li .m { font-family: var(--font-mono); font-size: 12px; color: var(--blanc-60); flex: none; width: 16px; }
.ps-col.is-sol .ps-list li { color: var(--blanc-90); border-color: var(--blanc-20); }
.ps-col.is-sol .ps-list li .m { color: var(--blanc); }

/* ===========================================================================
   Bénéfices
   ========================================================================== */
.benef-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 640px) { .benef-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .benef-grid { grid-template-columns: repeat(4, 1fr); } }
.benef { position: relative; background: var(--blanc); padding: 32px; display: flex; flex-direction: column; min-height: 240px; transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease); }
.benef:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); z-index: 1; }
.benef-num { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; font-size: 30px; line-height: 1; color: var(--cobalt); }
.benef-t { margin: 22px 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: 23px; line-height: 1.05; }
.benef-b { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--encre-80); }

/* ===========================================================================
   Modules — tabs + grid
   ========================================================================== */
.mod-count { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin-bottom: 40px; }
@media (min-width: 720px) { .mod-count { grid-template-columns: repeat(4, 1fr); } }
.mod-count .cell { background: var(--blanc); padding: 24px 28px; }
.mod-count .num { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; font-size: clamp(40px, 5vw, 56px); line-height: 1; }
.mod-count .num .accent-i { color: var(--cobalt); }
.mod-count .lab { margin-top: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-60); }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.tab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 15px; border: 1px solid var(--hairline); background: var(--blanc); color: var(--encre-70); border-radius: 999px; cursor: pointer; transition: background var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease); }
.tab:hover { border-color: var(--encre); color: var(--encre); }
.tab.is-active { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.tab .c { opacity: 0.55; margin-left: 7px; }

.module-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 560px) { .module-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .module-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .module-grid { grid-template-columns: repeat(4, 1fr); } }
.module-card { position: relative; background: var(--blanc); padding: 24px; min-height: 196px; display: flex; flex-direction: column; justify-content: space-between; cursor: default; transition: background var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease); }
.module-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); z-index: 1; }
.module-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.module-icon { width: 54px; height: 54px; flex: none; display: block; }
.module-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.module-idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--encre-60); }
.module-cat { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cobalt); }
.module-name { margin: 18px 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; font-size: clamp(26px, 3vw, 31px); line-height: 1.05; }
.module-desc { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--encre-80); }
/* stagger reveal for grid cells */
@media (prefers-reduced-motion: no-preference) {
  /* Entrée en vague : chaque carte monte et se pose (léger zoom), le décalage
     par carte est posé en inline par landing.js (render → transition-delay).
     Scopé .js-on (posé par initModules) : sans JS, la grille pré-rendue dans
     le HTML reste visible — crawlers IA et visiteurs no-JS voient tout. */
  .module-grid.js-on .module-card { opacity: 0; transform: translateY(16px) scale(0.985); }
  .module-grid.js-on.is-in .module-card { opacity: 1; transform: none; transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out); }
}

/* ===========================================================================
   Comment ça marche
   ========================================================================== */
/* Démarrage — timeline horizontale dynamique (badges + trait cobalt qui se trace) */
.steps { position: relative; display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .steps::before, .steps::after { content: ""; position: absolute; top: 26px; left: 9%; right: 9%; height: 2px; z-index: 0; }
  .steps::before { background: var(--blanc-20); }
  .steps::after { background: var(--cobalt); transform-origin: left center; transform: scaleX(0); }
}
@media (min-width: 820px) and (prefers-reduced-motion: no-preference) { .steps::after { transition: transform 1000ms var(--ease-out) 250ms; } }
.steps.is-revealed::after { transform: scaleX(1); }
.step { position: relative; z-index: 1; background: none; padding: 0; min-height: auto; display: flex; flex-direction: column; align-items: flex-start; }
.step-num { width: 54px; height: 54px; flex: none; border-radius: 999px; border: 2px solid var(--cobalt); background: var(--encre); color: var(--blanc); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.04em; }
.step-t { margin: 22px 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: 24px; line-height: 1.06; }
.step-b { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--blanc-80); }

/* ===========================================================================
   Réassurance
   ========================================================================== */
/* Confiance — cartes premium (bordées, accent cobalt, élévation + spotlight au survol) */
.assure-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .assure-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .assure-grid { grid-template-columns: repeat(4, 1fr); } }
.assure { position: relative; overflow: hidden; background: var(--blanc); border: 1px solid var(--hairline); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; min-height: 210px; transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease); }
.assure::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-ui) var(--ease); }
.assure:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--encre); z-index: 1; }
.assure:hover::before { transform: scaleX(1); }
.assure-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cobalt); }
.assure-t { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: 21px; line-height: 1.08; }
.assure-b { font-size: 14px; line-height: 1.55; color: var(--encre-80); margin-top: auto; }

/* ===========================================================================
   Tarifs
   ========================================================================== */
.price-toggle { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--hairline); border-radius: 999px; padding: 4px; }
.price-toggle button { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 16px; border: none; background: transparent; color: var(--encre-60); border-radius: 999px; cursor: pointer; transition: background var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
.price-toggle button.is-active { background: var(--encre); color: var(--blanc); }
.price-save { margin-left: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cobalt); }
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 680px)  { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .pricing-grid { grid-template-columns: repeat(4, 1fr); } }
.pcol { position: relative; display: flex; flex-direction: column; border: 1px solid var(--hairline); background: var(--blanc); padding: 32px 28px; transition: border-color var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease); }
.pcol:hover { border-color: var(--encre); transform: translateY(-6px); box-shadow: var(--shadow-lg); z-index: 1; }
.pcol-dark { background: var(--grad-ink); color: var(--blanc); border-color: var(--encre); }
.pcol-dark:hover { border-color: var(--cobalt); box-shadow: var(--shadow-cobalt); }
/* Business IA : accent cobalt + liseré supérieur (carte « nouveau ») */
.pcol-ia { border-color: rgba(60, 99, 242, 0.55); }
.pcol-ia-olto { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.pcol-ia-olto .olto-ava { flex: none; width: 52px; height: 52px; border-radius: 14px; background: #fff; object-fit: contain; border: 1px solid var(--hairline); }
.pcol-ia-olto span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-60); line-height: 1.35; }
.pcol-ia-olto strong { color: var(--encre-85); }
.pcol-ia::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--grad-cobalt); }
.pcol-ia:hover { border-color: var(--cobalt); box-shadow: var(--shadow-cobalt); }
.pcol-top { display: flex; align-items: center; justify-content: space-between; }
.pcol-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre-60); }
.pcol-dark .pcol-name { color: var(--blanc-70); }
.pcol-reco { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cobalt); }
.pcol-price { margin-top: 26px; }
.pcol-amount { display: inline-flex; align-items: flex-start; white-space: nowrap; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(42px, 4vw, 54px); line-height: 1; }
.pcol-cur { font-size: 0.4em; font-weight: 700; letter-spacing: 0; margin-left: 6px; margin-top: 0.16em; }
.pcol-amount--text { font-size: clamp(30px, 2.7vw, 38px); letter-spacing: -0.02em; }
.pcol-unit { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-60); }
.pcol-dark .pcol-unit { color: var(--blanc-60); }
.pcol-bill { margin-top: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-60); min-height: 14px; }
.pcol-dark .pcol-bill { color: var(--blanc-60); }
.pcol-desc { margin-top: 18px; font-size: 15px; line-height: 1.55; color: var(--encre-80); }
.pcol-dark .pcol-desc { color: var(--blanc-80); }
.pcol-feat { list-style: none; margin: 26px 0 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.pcol-feat li { display: flex; gap: 12px; align-items: baseline; }
.pcol-feat li .tick { flex: none; margin-top: 7px; width: 16px; height: 1px; background: var(--encre-50); }
.pcol-dark .pcol-feat li .tick { background: var(--blanc-60); }
.pcol-feat li span:last-child { color: var(--encre-85); }
.pcol-dark .pcol-feat li span:last-child { color: var(--blanc-90); }
/* Halo cobalt de la carte Business IA (élément dédié : le ::after sert déjà au
   spotlight). Ne respire QU'en vue, classe .is-live posée par landing.js. */
.pcol-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
/* ---- Phase 4 : tarifs — les tirets se cochent, le prix pop, la carte IA respire */
@media (prefers-reduced-motion: no-preference) {
  .pcol-feat li .tick { transform: scaleX(0); transform-origin: left center; transition: transform 300ms var(--ease-out); }
  .pricing-grid.is-revealed .pcol-feat li .tick { transform: scaleX(1); }
  .pcol-feat li:nth-child(1) .tick { transition-delay: 200ms; }
  .pcol-feat li:nth-child(2) .tick { transition-delay: 262ms; }
  .pcol-feat li:nth-child(3) .tick { transition-delay: 324ms; }
  .pcol-feat li:nth-child(4) .tick { transition-delay: 386ms; }
  .pcol-feat li:nth-child(5) .tick { transition-delay: 448ms; }
  .pcol-feat li:nth-child(6) .tick { transition-delay: 510ms; }
  .pcol-feat li:nth-child(7) .tick { transition-delay: 572ms; }
  .pcol-amount { transform-origin: left center; }
  .pricing-grid.is-revealed .pcol-amount { animation: pcolPricePop 560ms var(--ease-spring) 160ms both; }
  @keyframes pcolPricePop { from { transform: translateY(7px) scale(0.94); } to { transform: none; } }
  .pcol-ia.is-live .pcol-glow { animation: pcolBreathe 4.4s ease-in-out infinite; }
  @keyframes pcolBreathe { 0%, 100% { box-shadow: 0 0 24px -8px rgba(60,99,242,0.4); opacity: 0.6; } 50% { box-shadow: 0 0 42px -4px rgba(60,99,242,0.62); opacity: 1; } }
}
.pcol .btn { margin-top: 30px; }
.pcol-foot { margin-top: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-60); }
.pcol-dark .pcol-foot { color: var(--blanc-60); }

/* CTA diagnostic (section "constat", fond encre) */
.probleme-cta { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--blanc-20); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.probleme-cta-t { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.1; color: var(--blanc); margin: 0; }
.probleme-cta-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blanc-60); }

/* Demo banner (inside pricing area) */
.demo-banner { margin-top: 16px; border: 1px solid var(--encre); background: var(--encre); color: var(--blanc); padding: 32px; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 760px) { .demo-banner { flex-direction: row; align-items: center; justify-content: space-between; padding: 36px 44px; } }
.demo-banner-t { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(26px, 3vw, 38px); line-height: 1.02; max-width: 22ch; }
.demo-banner-t .accent-i { color: var(--cobalt); font-style: italic; }
.demo-banner-sub { margin: 12px 0 0; max-width: 36ch; font-size: 14px; line-height: 1.5; color: var(--blanc-70); }

/* ===========================================================================
   FAQ
   ========================================================================== */
.faq { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; background: none; border: none; text-align: left; cursor: pointer; color: inherit; transition: color var(--dur-ui) var(--ease); font-family: inherit; }
.faq-q:hover { color: var(--cobalt); }
.faq-qt { font-size: clamp(17px, 2vw, 20px); font-weight: 500; }
.faq-plus { font-family: var(--font-mono); font-size: 20px; line-height: 1; flex: none; transition: transform var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
.faq-item.is-open .faq-plus { transform: rotate(45deg); color: var(--cobalt); }
.faq-panel { display: grid; grid-template-rows: 0fr; }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-panel > div { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .faq-panel { transition: grid-template-rows 320ms var(--ease); }
  /* Le texte de réponse suit le panneau : fondu + légère montée, même tempo */
  .faq-a { opacity: 0; transform: translateY(-4px); transition: opacity 260ms var(--ease-out) 60ms, transform 260ms var(--ease-out) 60ms; }
  .faq-item.is-open .faq-a { opacity: 1; transform: none; }
}
.faq-a { margin: 0; padding: 0 52px 26px 0; font-size: 16px; line-height: 1.6; color: var(--encre-80); }

/* ===========================================================================
   Final CTA
   ========================================================================== */
.cta-inner { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 820px) { .cta-inner { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.cta-title { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; font-size: clamp(44px, 7vw, 84px); line-height: 0.94; max-width: 14ch; }
.cta-lead { margin: 24px 0 0; max-width: 42ch; font-size: clamp(17px, 2vw, 19px); line-height: 1.55; color: var(--blanc-90); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--encre); color: var(--blanc); }
.footer .page { padding-top: 72px; padding-bottom: 48px; }
@media (min-width: 768px) { .footer .page { padding-top: 96px; } }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px 32px; }
@media (min-width: 560px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .footer-grid--5 { grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; } .footer-brand { grid-column: auto; } }
.footer-brand .wm { font-size: 40px; color: var(--blanc); }
.footer-brand .wm .accent-i { color: var(--cobalt); }
.footer-tag { margin: 22px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.55; color: var(--blanc-80); }
.footer-coords { margin-top: 28px; display: flex; flex-direction: column; gap: 5px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--blanc-70); }
.footer-coords p { margin: 0; }
.footer-col-t { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blanc-60); }
.footer-col ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 14px; color: var(--blanc-90); text-decoration: none; position: relative; transition: color var(--dur-fast) var(--ease); }
/* #6e8cff (cobalt clair, déjà utilisé par le hub des flux) : le cobalt plein
   est sous 3:1 sur le footer noir — insuffisant pour un indicateur d'état. */
.footer-col a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: #6e8cff; transform: scaleX(0); transform-origin: 100% 50%; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .footer-col a::after { transition: transform var(--dur-ui) var(--ease); } }
.footer-col a:hover { color: var(--cobalt); }
.footer-col a:hover::after, .footer-col a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.footer-base { margin-top: 64px; border-top: 1px solid var(--blanc-15); padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 760px) { .footer-base { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-base .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blanc-60); }
.footer-social { display: flex; gap: 18px; }
.footer-social a { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blanc-70); text-decoration: none; position: relative; transition: color var(--dur-fast) var(--ease); }
.footer-social a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: #6e8cff; transform: scaleX(0); transform-origin: 100% 50%; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .footer-social a::after { transition: transform var(--dur-ui) var(--ease); } }
.footer-social a:hover { color: var(--cobalt); }
.footer-social a:hover::after, .footer-social a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ===========================================================================
   Scroll reveal (sober: fade + 8px translate)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal]:not([data-stagger]) { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
  [data-reveal]:not([data-stagger]).is-revealed { opacity: 1; transform: translateY(0); }
  /* staggered groups: the children animate individually */
  [data-stagger] > * { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
  [data-stagger] > *.is-revealed { opacity: 1; transform: translateY(0); }

  /* ---- Phase 2 : entrées chorégraphiées ------------------------------------
     Garanties : chaque ✓ se DESSINE (stroke-dashoffset via pathLength=1) juste
     après l'apparition de son libellé, en cascade. */
  .trustband-item svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 420ms var(--ease-out); }
  .trustband-item.is-revealed svg path { stroke-dashoffset: 0; }
  .trustband-item[data-reveal]:nth-child(1) svg path { transition-delay: 210ms; }
  .trustband-item[data-reveal]:nth-child(2) svg path { transition-delay: 280ms; }
  .trustband-item[data-reveal]:nth-child(3) svg path { transition-delay: 350ms; }
  .trustband-item[data-reveal]:nth-child(4) svg path { transition-delay: 420ms; }
  .trustband-item[data-reveal]:nth-child(5) svg path { transition-delay: 490ms; }

  /* Bénéfices : le réseau de la carte maîtresse se « connecte » — le nœud
     central pulse en premier, les liens se tracent du centre vers l'extérieur,
     puis les nœuds périphériques apparaissent. Déclenché quand la carte est
     révélée (elle mène la cascade en tant que 1er enfant du bento). */
  .bv-lines line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 520ms var(--ease-out); }
  .bv-nodes circle { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform 360ms var(--ease-spring); }
  .bento-cell.is-lg.is-revealed .bv-lines line { stroke-dashoffset: 0; }
  .bento-cell.is-lg.is-revealed .bv-nodes circle { transform: scale(1); }
  .bv-nodes circle:nth-child(1) { transition-delay: 120ms; }
  .bv-lines line:nth-child(1) { transition-delay: 220ms; }
  .bv-lines line:nth-child(2) { transition-delay: 300ms; }
  .bv-lines line:nth-child(3) { transition-delay: 380ms; }
  .bv-lines line:nth-child(4) { transition-delay: 460ms; }
  .bv-nodes circle:nth-child(2) { transition-delay: 560ms; }
  .bv-nodes circle:nth-child(3) { transition-delay: 620ms; }
  .bv-nodes circle:nth-child(4) { transition-delay: 680ms; }
  .bv-nodes circle:nth-child(5) { transition-delay: 740ms; }
}

/* Toast for fake CTA actions */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 200; background: var(--encre); color: var(--blanc); border: 1px solid var(--encre); border-left: 3px solid var(--cobalt); padding: 14px 20px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease); max-width: calc(100vw - 32px); }
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ===========================================================================
   Offre de lancement + essai (section Tarifs)
   ========================================================================== */
.promo-band { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; border: 1px solid var(--cobalt); border-left: 3px solid var(--cobalt); padding: 14px 18px; margin-bottom: 24px; }
.promo-band .promo-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cobalt); white-space: nowrap; }
.promo-band .promo-text { font-size: 14px; line-height: 1.5; color: var(--encre-85); }
.price-trial { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-60); }
.price-model { margin: -12px 0 30px; max-width: 72ch; font-size: 14px; line-height: 1.55; color: var(--encre-70); }
.price-model strong { color: var(--encre-85); }

/* ===========================================================================
   Olto — assistant IA (section dédiée)
   ========================================================================== */
.olto { position: relative; overflow: hidden; }
.olto::before { content: ""; position: absolute; inset: -25% -8% auto auto; width: 58%; height: 130%; background: radial-gradient(closest-side, rgba(60, 99, 242, 0.20), transparent 70%); pointer-events: none; z-index: 0; }
.olto > .page { position: relative; z-index: 1; }
.olto-grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
@media (min-width: 920px) { .olto-grid { grid-template-columns: 1.04fr 0.96fr; gap: 56px; } }
.olto-feats { display: flex; flex-direction: column; gap: 26px; }
.olto-feat { display: flex; gap: 18px; align-items: flex-start; }
.olto-num { flex: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--cobalt); border: 1px solid var(--cobalt); border-radius: 999px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.olto-feat-t { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(19px, 2.1vw, 24px); line-height: 1.1; color: var(--blanc); }
.olto-feat-b { margin: 9px 0 0; font-size: 15px; line-height: 1.55; color: var(--blanc-80); max-width: 48ch; }

/* Mini-conversation (illustration) */
.olto-chat { background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)); border: 1px solid var(--blanc-20); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 80px -42px rgba(0,0,0,0.85), 0 0 0 1px rgba(60,99,242,0.12); }
.olto-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--blanc-20); margin-bottom: 2px; }
.olto-avatar { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #fff; object-fit: contain; border: 1px solid var(--blanc-20); box-shadow: var(--glow-cobalt); }
.olto-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--blanc); font-size: 16px; line-height: 1.1; }
.olto-status { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blanc-60); display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.olto-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #36d399; display: inline-block; }
.olto-msg { max-width: 86%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.olto-msg.user { align-self: flex-end; background: rgba(255,255,255,0.08); color: var(--blanc-90); border-bottom-right-radius: 4px; }
.olto-msg.bot { align-self: flex-start; background: rgba(60,99,242,0.18); border: 1px solid rgba(60,99,242,0.42); color: var(--blanc); border-bottom-left-radius: 4px; }
/* Chat joué en direct (assets/olto-chat.js) : messages révélés 1 par 1, bulle
   « en train d'écrire » avant chaque réponse d'Olto. */
@media (prefers-reduced-motion: no-preference) {
  .olto-chat.is-playing .olto-msg { display: none; }
  .olto-chat.is-playing .olto-msg.is-in { display: block; animation: oltoMsgIn 340ms var(--ease-out) both; }
  .olto-typing { align-self: flex-start; display: inline-flex; gap: 5px; align-items: center;
    background: rgba(60,99,242,0.18); border: 1px solid rgba(60,99,242,0.42); border-radius: 14px; border-bottom-left-radius: 4px; padding: 13px 15px; animation: oltoMsgIn 220ms var(--ease-out) both; }
  .olto-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--blanc-70); animation: oltoTypeDot 1.2s ease-in-out infinite; }
  .olto-typing span:nth-child(2) { animation-delay: .18s; }
  .olto-typing span:nth-child(3) { animation-delay: .36s; }
  @keyframes oltoMsgIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  @keyframes oltoTypeDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
}
.olto-cta { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.olto-cta-note { font-size: 15px; color: var(--blanc-80); }
.olto-cta-note strong { color: var(--blanc); }
@media (max-width: 560px) { .olto-chat { padding: 16px; } .olto-msg { max-width: 92%; } }

/* ===========================================================================
   Formulaire de démo (dans le bandeau encre)
   ========================================================================== */
.demo-form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 540px; }
.demo-form .demo-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .demo-form .demo-row { grid-template-columns: 1fr 1fr; } }
.demo-form input, .demo-form textarea { width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--blanc); background: transparent; border: 1px solid var(--blanc-20); border-radius: var(--radius-ui); padding: 12px 14px; }
.demo-form input::placeholder, .demo-form textarea::placeholder { color: var(--blanc-60); }
.demo-form input:focus, .demo-form textarea:focus { border-color: var(--cobalt); }
.demo-form input:focus-visible, .demo-form textarea:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.demo-form textarea { resize: vertical; }
.demo-form .demo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.demo-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--blanc-70); }
.demo-reassure { margin: 4px 0 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blanc-60); }
.demo-consent a { color: var(--blanc-90); text-decoration: underline; }
.demo-consent input { width: 16px; height: 16px; flex: none; margin-top: 2px; accent-color: var(--cobalt); }
.demo-form button { align-self: flex-start; }
.demo-status { font-size: 13px; line-height: 1.4; margin: 2px 0 0; min-height: 1em; color: var(--blanc-80); }
.demo-status.ok { color: var(--blanc); border-left: 3px solid var(--cobalt); padding-left: 10px; }
.demo-status.err { color: var(--blanc); border-left: 3px solid var(--blanc-60); padding-left: 10px; }
.demo-alt { font-size: 13px; line-height: 1.45; margin: 14px 0 0; color: var(--blanc-70); }
.demo-alt a { color: var(--blanc); text-decoration: underline; text-underline-offset: 2px; }

/* ===========================================================================
   Spotlight offre commerçant (bandeau cliquable sur l'accueil)
   ========================================================================== */
.spot { display: flex; flex-direction: column; gap: 32px; background: var(--encre); color: var(--blanc); border: 1px solid var(--encre); padding: 36px; text-decoration: none; overflow: hidden; }
@media (min-width: 860px) { .spot { flex-direction: row; align-items: center; gap: 48px; padding: 48px; } }
.spot-main { flex: 1; min-width: 0; }
.spot-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blanc-60); }
.spot-t { margin: 14px 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.02; }
.spot-t .accent-i { color: var(--cobalt); font-style: italic; }
.spot-b { margin: 14px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.55; color: var(--blanc-80); }
.spot-b strong { color: var(--blanc); }
.spot-meta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.spot-meta span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blanc-70); display: inline-flex; align-items: center; gap: 8px; }
.spot-meta span::before { content: "—"; color: var(--cobalt); }
.spot-cta { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; background: var(--blanc); color: var(--encre); border-radius: var(--radius-ui); padding: 0 28px; height: 50px; font-family: var(--font-sans); font-weight: 500; font-size: 16px; }
.spot:hover .spot-cta { background: var(--cobalt); color: var(--blanc); }
.spot .arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .spot .arrow { transition: transform 220ms var(--ease-spring); } }
.spot:hover .arrow, .spot:focus-visible .arrow { transform: translateX(4px); }

/* ===========================================================================
   Affinages responsive (tablette + smartphone)
   ========================================================================== */
html { scroll-padding-top: 84px; }      /* ancres non masquées par le header sticky */
body { overflow-wrap: break-word; }     /* pas de débordement (emails, mots longs) */

/* En-tête de section empilé : la pagination n'écrase plus le titre */
@media (max-width: 640px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 40px; }
  .faq-a { padding-right: 0; }
  .faq-q { gap: 16px; }
}

/* Bande « Pensé pour » : séparateurs propres au retour à la ligne */
@media (max-width: 600px) {
  .targets-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .targets-lab { padding-right: 0; }
  .targets-list { gap: 4px 22px; }
  .targets-item { padding: 0; }
  .targets-item + .targets-item { border-left: none; }
}

/* Cibles tactiles plus généreuses (toggle tarifs, onglets modules) */
@media (max-width: 768px) {
  .tab { padding: 11px 16px; }
  .price-toggle button { padding: 11px 18px; }
}

/* Mock tableau de bord du héros : compact sur smartphone */
@media (max-width: 480px) {
  .dash-bar { padding: 10px 12px; }
  .dash-kpi { padding: 14px 12px; }
  .dash-kpi .k-val { font-size: 24px; }
  .dash-row { padding: 10px 12px; gap: 10px; }
  .dash-row .r-name { font-size: 13px; }
}

/* Spotlight commerçant : CTA pleine largeur (pas de débordement) sur mobile */
@media (max-width: 560px) {
  .spot { padding: 28px 22px; }
  .spot-cta { width: 100%; justify-content: center; height: auto; min-height: 50px; padding: 14px 20px; }
}

/* Respiration verticale réduite sur petits téléphones */
@media (max-width: 520px) {
  .section { padding-top: 60px; padding-bottom: 60px; }
  .section-tight { padding-top: 44px; padding-bottom: 44px; }
  .hero-inner { padding-top: 48px; padding-bottom: 56px; }
  .ps-col, .step { padding: 28px 24px; }
  .pcol { padding: 28px 24px; }
  .benef, .assure, .module-card { padding: 24px; }
  .demo-banner { padding: 26px 22px; }
}

/* ===========================================================================
   Motion & finitions modernes (v2) — tout désactivé sous reduced-motion
   ========================================================================== */

/* Spotlight cobalt : halo suivant le curseur sur les cartes (premium, discret) */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .pcol, .benef, .module-card, .relcard, .assure { position: relative; }
  .pcol::after, .benef::after, .module-card::after, .relcard::after, .assure::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(24,70,220,0.10), transparent 60%);
    transition: opacity var(--dur-ui) var(--ease);
  }
  .pcol-dark::after { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(60,99,242,0.22), transparent 62%); }
  .pcol:hover::after, .benef:hover::after, .module-card:hover::after, .relcard:hover::after, .assure:hover::after { opacity: 1; }
  .pcol > *, .benef > *, .module-card > *, .relcard > *, .assure > * { position: relative; z-index: 1; }
}

/* Compteurs accentués : petit "pop" + flash cobalt à la fin du count-up */
@media (prefers-reduced-motion: no-preference) {
  [data-count].is-counted { animation: countPop 520ms var(--ease-spring); }
  @keyframes countPop { 0% { color: var(--cobalt); transform: scale(1.10); } 60% { color: var(--cobalt); } 100% { transform: scale(1); } }
}

/* Onglets modules : indicateur cobalt qui glisse sous l'onglet actif */
.tabs { position: relative; }
.tab-indicator { position: absolute; height: 2px; border-radius: 2px; background: var(--grad-cobalt); left: 0; width: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  /* 320ms ease-out : l'indicateur doit être posé AVANT le re-render de la
     grille (déclenché à t=200ms par landing.js) — un easing plus long ou à
     rebond ferait tomber sa phase la plus visible sur cet à-coup layout. */
  .tab-indicator { transition: left 320ms var(--ease-out), width 320ms var(--ease-out), top 320ms var(--ease-out); }
  /* Fondu enchaîné de la grille au changement de catégorie */
  .module-grid { transition: opacity 200ms var(--ease); }
  .module-grid.is-swapping { opacity: 0; }
}

/* Bande de garanties : apparition en cascade (délais par item) */
@media (prefers-reduced-motion: no-preference) {
  .trustband-item[data-reveal] { transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
  .trustband-item[data-reveal]:nth-child(1) { transition-delay: 60ms; }
  .trustband-item[data-reveal]:nth-child(2) { transition-delay: 130ms; }
  .trustband-item[data-reveal]:nth-child(3) { transition-delay: 200ms; }
  .trustband-item[data-reveal]:nth-child(4) { transition-delay: 270ms; }
  .trustband-item[data-reveal]:nth-child(5) { transition-delay: 340ms; }
}

/* Shimmer cobalt : un reflet passe une fois sur le mot accent du hero */
.hero-title .accent-i {
  background-image: linear-gradient(100deg, var(--cobalt) 38%, #6f8cff 50%, var(--cobalt) 62%);
  background-size: 220% 100%; background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-title .accent-i { animation: heroShimmer 2.4s var(--ease-out) 900ms 1 forwards; }
  @keyframes heroShimmer { from { background-position: 120% 0; } to { background-position: -40% 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title .accent-i { background: none; -webkit-text-fill-color: var(--cobalt); }
}

/* Dashboard du hero : les lignes "streamées" une à une (effet Live) */
@media (prefers-reduced-motion: no-preference) {
  .dash-row { animation: dashRowIn 520ms var(--ease-out) both; }
  .dash-row:nth-child(1) { animation-delay: 520ms; }
  .dash-row:nth-child(2) { animation-delay: 660ms; }
  .dash-row:nth-child(3) { animation-delay: 800ms; }
  .dash-row:nth-child(4) { animation-delay: 940ms; }
  @keyframes dashRowIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
}

/* Menu mobile : entrée échelonnée des liens à l'ouverture */
@media (prefers-reduced-motion: no-preference) {
  .nav-mobile.is-open > * { animation: navItemIn 320ms var(--ease-out) both; }
  .nav-mobile.is-open > *:nth-child(1) { animation-delay: 30ms; }
  .nav-mobile.is-open > *:nth-child(2) { animation-delay: 70ms; }
  .nav-mobile.is-open > *:nth-child(3) { animation-delay: 110ms; }
  .nav-mobile.is-open > *:nth-child(4) { animation-delay: 150ms; }
  .nav-mobile.is-open > *:nth-child(5) { animation-delay: 190ms; }
  .nav-mobile.is-open > *:nth-child(6) { animation-delay: 230ms; }
  @keyframes navItemIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}

/* ===========================================================================
   "Wow" — hero spectaculaire (titre cinétique, aurora, 3D, magnétique)
   ========================================================================== */

/* Titre cinétique : chaque mot monte depuis derrière un masque */
.hero-kinetic .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero-kinetic .wi { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-kinetic .wi { animation: wordUp 0.72s var(--ease-out) both; }
  .hero-kinetic .w:nth-child(1) .wi { animation-delay: 0.12s; }
  .hero-kinetic .w:nth-child(2) .wi { animation-delay: 0.20s; }
  .hero-kinetic .w:nth-child(3) .wi { animation-delay: 0.28s; }
  .hero-kinetic .w:nth-child(4) .wi { animation-delay: 0.36s; }
  .hero-kinetic .w:nth-child(5) .wi { animation-delay: 0.44s; }
  .hero-kinetic .w:nth-child(6) .wi { animation-delay: 0.52s; }
  .hero-kinetic .w:nth-child(7) .wi { animation-delay: 0.60s; }
  @keyframes wordUp { from { transform: translateY(115%); } to { transform: translateY(0); } }
}

/* Halo "aurora" du hero : dérive lente et respiration */
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: auroraDrift 16s ease-in-out infinite alternate; }
  @keyframes auroraDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-5%,4%,0) scale(1.16); } }
}

/* Dashboard 3D : inclinaison au curseur (la transition est posée par landing.js) */
.hero-visual { perspective: 1100px; }
.dash { transform-style: preserve-3d; }

/* Le mot accent garde son shimmer EN PLUS de l'entrée cinétique (combiné) */
@media (prefers-reduced-motion: no-preference) {
  .hero-kinetic .wi.accent-i { animation: wordUp 0.72s var(--ease-out) 0.44s both, heroShimmer 2.2s var(--ease-out) 1.5s 1 forwards; }
}

/* Sparkline trésorerie (dashboard) — tracé qui se dessine */
.dash-spark { padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.dash-spark-lab { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-60); margin-bottom: 7px; }
.dash-spark svg { display: block; width: 100%; height: 40px; }
.dash-spark .line { fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dash-spark .area { fill: rgba(24,70,220,0.08); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .dash-spark .line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: sparkDraw 1500ms var(--ease-out) 850ms forwards; }
  .dash-spark .area { opacity: 0; animation: sparkArea 900ms var(--ease-out) 1700ms forwards; }
  @keyframes sparkDraw { to { stroke-dashoffset: 0; } }
  @keyframes sparkArea { to { opacity: 1; } }
}

/* Marquee cinétique des 30 modules — défilement infini, fondu aux bords */
.marquee { margin-top: 8px; overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 16px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-item { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(20px, 2.3vw, 30px); color: var(--encre); padding: 0 26px; }
.marquee-item::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt); margin-left: 26px; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marqueeScroll 48s linear infinite; }
  /* La décélération douce au survol + la pause hors écran sont pilotées par
     landing.js (WAAPI playbackRate) — pas de pause sèche en CSS. */
  @keyframes marqueeScroll { to { transform: translateX(-50%); } }
}

/* ===========================================================================
   Finitions motion (v3) — accents de section, CTA final, icônes modules
   ========================================================================== */

/* Trait cobalt qui se trace sous le titre de section (scroll-driven, fallback statique) */
.section-head { position: relative; }
.section-head::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 64px; background: var(--cobalt); transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section-head::after { transform: scaleX(0); animation: sectionLine linear both; animation-timeline: view(); animation-range: entry 5% cover 22%; }
    @keyframes sectionLine { to { transform: scaleX(1); } }
  }
}

/* CTA final (section cobalt) — halo clair qui dérive doucement */
.section-cobalt { position: relative; overflow: hidden; }
.section-cobalt > * { position: relative; z-index: 1; }
.section-cobalt::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(48% 60% at 18% 22%, rgba(255,255,255,0.18), transparent 62%); }
@media (prefers-reduced-motion: no-preference) {
  .section-cobalt::before { animation: ctaGlow 13s ease-in-out infinite alternate; }
  @keyframes ctaGlow { from { transform: translate(0,0) scale(1); } to { transform: translate(46%,22%) scale(1.25); } }
}

/* Icône de module : petit "pop" quand la carte est survolée */
.module-icon { transition: transform var(--dur-ui) var(--ease-spring); }
.module-card:hover .module-icon { transform: scale(1.08) rotate(-3deg); }

/* Quand GSAP pilote le dashboard (parallaxe scroll), on coupe le float CSS pour éviter le conflit de transform */
.gsap-ready .dash-float { animation: none !important; }
.gsap-ready .dash-row { animation: none !important; }  /* GSAP pilote l'assemblage au scroll (hero pin) */

/* Accent WebGL du hero (Three.js) — canvas en fond, sous le contenu */
#hero3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.hero3d-on .hero::before { opacity: 0.72; }   /* on atténue un peu l'aurora quand la 3D est active */

/* ===========================================================================
   Bento grid — section bénéfices (premium, dynamique, charte hairline/nette)
   ========================================================================== */
.bento { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(150px, auto); }
  .bento-cell.is-lg   { grid-column: span 4; grid-row: span 2; }
  .bento-cell.is-md   { grid-column: span 2; }
  .bento-cell:not(.is-lg):not(.is-wide) { grid-column: span 2; }
  .bento-cell.is-wide { grid-column: span 6; }
}
.bento-cell { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start;
  background: var(--blanc); border: 1px solid var(--hairline); padding: 28px;
  transition: transform var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease); }
.bento-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); z-index: 1; border-color: var(--encre); }
.bento-cell .benef-num { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; font-size: 26px; line-height: 1; color: var(--cobalt); }
.bento-t { margin: 18px 0 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: 22px; line-height: 1.05; }
.bento-b { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--encre-80); max-width: 46ch; }
.bento-cell.is-lg { padding: 36px; justify-content: space-between; }
.bento-cell.is-lg .benef-num { font-size: 32px; }
.bento-cell.is-lg .bento-t { font-size: clamp(28px, 3.2vw, 40px); margin-top: 20px; }
.bento-cell.is-lg .bento-b { font-size: 17px; max-width: 42ch; }
.bento-viz { position: absolute; right: 20px; bottom: 16px; width: clamp(120px, 16vw, 180px); height: auto; color: var(--cobalt); opacity: 0.16; pointer-events: none; }
/* Cellule large sombre (contraste premium) */
.bento-cell.is-wide { flex-direction: column; gap: 18px; }
@media (min-width: 760px) { .bento-cell.is-wide { flex-direction: row; align-items: center; justify-content: space-between; } }
.bento-cell.is-dark { background: var(--grad-ink); border-color: var(--encre); color: var(--blanc); }
.bento-cell.is-dark .bento-b { color: var(--blanc-80); }
.bento-cell.is-dark:hover { border-color: var(--cobalt); box-shadow: var(--shadow-cobalt); }
.bento-wide-main { max-width: 62ch; }
.bento-link { flex: none; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--font-sans); font-weight: 500; font-size: 15px; color: var(--blanc); border: 1px solid var(--blanc-20); border-radius: var(--radius-ui); padding: 12px 20px; text-decoration: none; transition: background var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
.bento-link:hover { background: var(--blanc); color: var(--encre); }
@media (prefers-reduced-motion: no-preference) { .bento-link .arrow { transition: transform 220ms var(--ease-spring); } }
.bento-link:hover .arrow, .bento-link:focus-visible .arrow { transform: translateX(4px); }

/* Spotlight curseur aussi sur les cellules bento */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .bento-cell::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(24,70,220,0.10), transparent 60%);
    transition: opacity var(--dur-ui) var(--ease); }
  .bento-cell.is-dark::after { background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(60,99,242,0.22), transparent 62%); }
  .bento-cell:hover::after { opacity: 1; }
  .bento-cell > * { position: relative; z-index: 1; }
  .bento-viz { z-index: 0; }
}

/* Mini-nav de progression latérale (points) — desktop uniquement */
.section-nav { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 70; display: none; flex-direction: column; gap: 16px; }
@media (min-width: 1100px) { .section-nav { display: flex; } }
@media (prefers-reduced-motion: reduce) { .section-nav { display: none; } }
.section-dot { position: relative; width: 11px; height: 11px; border-radius: 999px; border: 1.5px solid rgba(120,120,120,0.65); background: transparent; transition: background var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease-spring); }
.section-dot:hover { border-color: var(--cobalt); transform: scale(1.25); }
.section-dot.is-active { background: var(--cobalt); border-color: var(--cobalt); transform: scale(1.35); }
.section-dot-l { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre); background: var(--blanc); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); padding: 5px 9px; border-radius: var(--radius-ui); opacity: 0; pointer-events: none; transition: opacity var(--dur-ui) var(--ease); }
.section-dot:hover .section-dot-l { opacity: 1; }

/* 9 pôles — scroll horizontal pinné (desktop + GSAP uniquement ; sinon masqué, la grille couvre tout) */
.poles { display: none; }
@media (min-width: 980px) { .gsap-ready .poles { display: block; overflow: hidden; margin: 10px 0 0; } }
.poles-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.poles-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cobalt); }
.poles-track { display: flex; gap: 16px; width: max-content; }
.pole-card { flex: 0 0 340px; border: 1px solid var(--hairline); background: var(--blanc); padding: 28px; min-height: 300px; display: flex; flex-direction: column; transition: border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease); }
.pole-card:hover { border-color: var(--encre); box-shadow: var(--shadow-md); }
.pole-top { display: flex; align-items: baseline; justify-content: space-between; }
.pole-idx { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.04em; color: var(--cobalt); }
.pole-count { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-60); }
.pole-name { margin: 16px 0 14px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: 26px; line-height: 1.05; }
.pole-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pole-list li { font-size: 14px; color: var(--encre-80); position: relative; padding-left: 16px; }
.pole-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--cobalt); }

/* ===========================================================================
   Hero SOMBRE immersif — le glow WebGL + aurora y ressortent (Phase 4)
   ========================================================================== */
.hero { background: var(--grad-ink); border-bottom-color: var(--encre); }
.hero .hero-eyebrow { border-color: var(--blanc-20); }
.hero .hero-eyebrow .kick { color: var(--blanc-70); }
.hero .hero-title { color: var(--blanc); }
.hero .hero-lead { color: var(--blanc-80); }
.hero .hero-trust span { color: var(--blanc-60); }
.hero .hero-trust span::before { color: var(--cobalt); }
.hero .btn-ghost { color: var(--blanc); border-color: var(--blanc-20); }
.hero .btn-ghost:hover { background: var(--blanc); color: var(--encre); }
.hero .dash { box-shadow: var(--shadow-lg); }
.hero::before { opacity: 1; }   /* aurora plus présent sur fond sombre */

/* FAQ premium en 2 colonnes (desktop) */
@media (min-width: 860px) {
  .faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; max-width: none; border-top: none; align-items: start; }
  .faq-item { border-top: 1px solid var(--hairline); border-bottom: none; }
}

/* Micro-interaction : pop du message de statut (succès / erreur) sur les formulaires */
@media (prefers-reduced-motion: no-preference) {
  .demo-status.ok, .demo-status.err { animation: statusIn 360ms var(--ease-out); }
  @keyframes statusIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
}
.demo-status.ok { display: flex; align-items: center; gap: 8px; }
.demo-status.ok::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 999px; background: var(--cobalt);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }

/* ===========================================================================
   THÈME SOMBRE GLOBAL — bascule clair → sombre (tokens texte/filets en clair
   + surfaces blanches assombries). Le dashboard reste blanc (il ressort).
   ========================================================================== */
:root { --ink-0:#08080c; --ink-1:#0e0e16; --ink-2:#14141d; --ink-3:#1b1b25; }
body.oltanis {
  --hairline: rgba(255,255,255,0.12);
  --muted: #9aa1ad;
  --encre-85: rgba(255,255,255,0.92);
  --encre-80: rgba(255,255,255,0.82);
  --encre-70: rgba(255,255,255,0.70);
  --encre-60: rgba(255,255,255,0.56);
  --encre-50: rgba(255,255,255,0.44);
  --encre-40: rgba(255,255,255,0.30);
  background: var(--ink-0); color: var(--blanc);
}
/* Sections (alternance de deux noirs) */
.section { background: var(--ink-0); }
.section-encre { background: var(--ink-1); }
.targets, .trustband { background: var(--ink-0); }
.hero { background: var(--grad-ink); }
/* Header : glass sombre */
.header { background: rgba(10,10,14,0.72); border-bottom-color: var(--hairline); }
.header.is-scrolled { background: rgba(10,10,14,0.88); }
.burger { border-color: var(--blanc-20); color: var(--blanc); }
.nav a:hover { color: var(--blanc); }
/* Boutons : ghost devient clair sur sombre */
.btn-ghost { color: var(--blanc); border-color: var(--blanc-20); }
.btn-ghost:hover { background: var(--blanc); color: var(--encre); }
/* Cartes claires → surfaces sombres */
.module-card, .pcol, .assure, .pole-card, .bento-cell, .cell, .tab, .quiz-card { background: var(--ink-2); }
.module-card:hover, .bento-cell:hover, .pole-card:hover { background: var(--ink-3); }
.benef:hover, .module-card:hover { background: var(--ink-3); }
/* Cartes "dark" d'accent : encore plus sombres + filet cobalt pour ressortir */
.pcol-dark, .bento-cell.is-dark { background: #050509; border-color: rgba(24,70,220,0.55); }
/* Onglet actif : pastille claire (inversion) */
.tab.is-active { background: var(--blanc); color: var(--ink-0); border-color: var(--blanc); }
.tab:hover { color: var(--blanc); border-color: var(--blanc-20); }
/* Textes encore en --encre solide (sinon invisibles) */
.targets-item { color: var(--blanc); }
.marquee-item { color: var(--blanc); }
.section-title, .bento-t, .module-name, .assure-t, .pole-name, .featrow-h, .faq-qt { color: var(--blanc); }
/* Le dashboard reste BLANC : on restaure des tokens texte sombres à l'intérieur */
.dash { background: var(--blanc); }
.dash, .dash * {
  --encre-85: rgba(10,10,10,0.85); --encre-80: rgba(10,10,10,0.80);
  --encre-70: rgba(10,10,10,0.70); --encre-60: rgba(10,10,10,0.60);
  --encre-50: rgba(10,10,10,0.50); --hairline: #E6E6E6;
}
/* Boutons blancs (spot-cta, btn-reverse) gardent leur texte encre solide → OK */

/* ===========================================================================
   Fusion des flux — 10 flux → 1 (animation scroll, section problème→solution)
   ========================================================================== */
.flowmerge .fm-stage { margin-top: 6px; }
#fm-stage { position: relative; }
.flowmerge .fm-stage svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Les « tuyaux » : hairline cobalt discrète (tracée au scroll par anim-gsap.js) */
.fm-path { fill: none; stroke: var(--cobalt); stroke-width: 1.4; opacity: 0.30; }
/* Paquets de lumière qui filent en continu vers le hub */
.fm-flow { fill: none; stroke: #9db4ff; stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 5 155; opacity: 0.95; filter: drop-shadow(0 0 5px rgba(126,155,255,0.9)); }
.fm-in { fill: var(--blanc-70); }
.fm-label { fill: var(--blanc-70); font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; }

/* Hub d'unification */
.fm-halo { fill: url(#fmCore); opacity: 0.85; }
.fm-wave { fill: none; stroke: #6e8cff; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fm-out-ring { fill: none; stroke: #6e8cff; stroke-width: 2; opacity: 0.7; }
.fm-out { fill: var(--blanc); filter: drop-shadow(0 0 10px rgba(140,165,255,0.9)); }
.fm-out-label { fill: var(--blanc); font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; }
.fm-caption { max-width: 62ch; margin: 28px 0 0; font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--blanc-80); }

@media (prefers-reduced-motion: no-preference) {
  .fm-stage.is-live .fm-flow { animation: fmFlow 2.1s linear infinite; }
  .fm-stage.is-live .fm-wave { animation: fmWave 3.4s ease-out infinite; }
  .fm-stage.is-live .fm-halo { animation: fmBreathe 4s ease-in-out infinite; }
  .fm-stage.is-live .fm-out  { animation: fmBreathe 3s ease-in-out infinite; }
}
@keyframes fmFlow    { to { stroke-dashoffset: -160; } }
@keyframes fmWave    { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes fmBreathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }

@media (max-width: 640px) { .fm-label { font-size: 13px; } .fm-out-label { font-size: 26px; } }

/* Galaxie 3D en fond de la section modules (derrière le contenu) */
#modules { position: relative; }
#modules > .page { position: relative; z-index: 1; }
/* canvas épinglé en JS (son top suit la vue pendant ~0,5 écran de scroll) :
   le disque se contracte en boule blanche derrière le titre + le compteur de
   modules, puis se libère avant le scroll horizontal des pôles. */
#galaxy3d { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; display: none; pointer-events: none; will-change: top; }
.galaxy3d-on #galaxy3d { display: block; }

/* Correctifs dark (audit) : texte de section en clair par défaut + cellules compteur sombres
   + restauration du texte sombre dans le dashboard blanc (îlot clair). */
.section { color: var(--blanc); }
.mod-count .cell { background: var(--ink-2); }
.dash { color: var(--encre); }


/* ==========================================================================
   FINITION SOMBRE — correctifs de thème (phase 1)
   Le calque décoratif et les ombres avaient été écrits pour la version CLAIRE
   de la landing ; la bascule sombre ne les avait jamais repris.
   ========================================================================== */

/* 1. Le bloc CTA final avait perdu son fond cobalt : `.section` (bloc sombre)
      écrasait `.section-cobalt` à spécificité égale, en arrivant après. */
body.oltanis .section-cobalt { background: var(--cobalt); }
body.oltanis .section-cobalt .section-title,
body.oltanis .section-cobalt .cta-title { color: var(--blanc); }

/* 2. Ombres : rgba(10,10,10,…) est invisible sur #08080c. On repasse sur du
      noir franc, plus large, pour que l'élévation au survol existe vraiment. */
body.oltanis {
  --shadow-sm: 0 2px 8px -2px rgba(0,0,0,0.55);
  --shadow-md: 0 14px 30px -12px rgba(0,0,0,0.70), 0 4px 10px -6px rgba(0,0,0,0.50);
  --shadow-lg: 0 34px 70px -24px rgba(0,0,0,0.80);
}

/* 3. Bordures de survol : var(--encre) = #0A0A0A donnait 1,08:1 — la carte
      PERDAIT son contour au survol. On éclaire au lieu d'assombrir. */
body.oltanis .assure:hover,
body.oltanis .pcol:hover { border-color: rgba(157,180,255,.55); }

/* 4. Anneau de focus : le cobalt plein tombe à 2,6:1 sur fond sombre. */
body.oltanis { --focus-ring: 2px solid #9db4ff; }

/* 5. Décor : marge d'exclusion sur la colonne de texte. Les arcs restent
      visibles côté visuel, mais ne traversent plus titres, chapôs ni boutons. */
body.oltanis .hero > [data-oltbc],
body.oltanis .section-cobalt > [data-oltbc] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0 42%, #000 68%);
          mask-image: linear-gradient(90deg, transparent 0 42%, #000 68%);
}
@media (max-width: 999px) {
  body.oltanis .hero > [data-oltbc],
  body.oltanis .section-cobalt > [data-oltbc] {
    -webkit-mask-image: linear-gradient(180deg, transparent 0 58%, #000 86%);
            mask-image: linear-gradient(180deg, transparent 0 58%, #000 86%);
  }
}
/* Le graphe « réseau » vit dans la moitié droite du viewBox : on le borne
   pour qu'il cesse de recouvrir le texte des étapes (#demarrage) et des listes. */
body.oltanis #probleme > [data-oltbc],
body.oltanis #demarrage > [data-oltbc],
body.oltanis .footer > [data-oltbc] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0 48%, #000 74%);
          mask-image: linear-gradient(90deg, transparent 0 48%, #000 74%);
}

/* 6. Boutons fantômes posés sur du décor : une surface minimale suffit à ce
      qu'aucun trait ne traverse le libellé. */
body.oltanis .hero .btn-ghost { background: rgba(8,8,12,.55); }
body.oltanis .section-cobalt .btn-ghost-light { background: rgba(255,255,255,.10); }

/* 7. Nébuleuse des modules : additive, elle saturait à blanc pur derrière le
      chapô. On la masque sous la zone de texte et on plafonne son intensité. */
body.oltanis #galaxy3d {
  -webkit-mask-image: radial-gradient(78% 62% at 50% 82%, #000 38%, transparent 74%);
          mask-image: radial-gradient(78% 62% at 50% 82%, #000 38%, transparent 74%);
}

/* 8. Héros : les deux colonnes étaient centrées alors qu'elles sont
      déséquilibrées de ~236 px — d'où le vide sous la carte tableau de bord. */
@media (min-width: 1000px) { body.oltanis .hero-grid { align-items: start; } }

/* ==========================================================================
   LONGUEUR — cartes modules en format horizontal compact sur petit écran.
   En une colonne, 46 cartes verticales représentaient 9 349 px : la section
   Modules pesait à elle seule un tiers de la page au doigt. Le contenu est
   identique (aucune carte retirée, aucun texte masqué), seule la disposition
   change : icône à gauche, texte à droite.
   ========================================================================== */
@media (max-width: 559px) {
  .module-card { flex-direction: row; align-items: flex-start; justify-content: flex-start;
                 gap: 14px; min-height: 0; padding: 18px 20px; }
  .module-top { flex-direction: column; align-items: flex-start; justify-content: flex-start;
                gap: 6px; flex: none; width: 56px; }
  .module-icon { width: 40px; height: 40px; }
  .module-cat { font-size: 9px; line-height: 1.2; }
  .module-name { margin: 0; font-size: 20px; line-height: 1.15; }
  .module-desc { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; }
}

/* Fin de grille : le fond du conteneur servait de séparateur, donc les cellules
   vides de la dernière rangée (46 modules ÷ 4 colonnes = 2 restantes) se
   voyaient comme un bloc clair. Ce sont les cartes qui portent les filets. */
body.oltanis .module-grid { background: transparent; gap: 0; border-width: 1px 0 0 1px; }
body.oltanis .module-card { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

/* ==========================================================================
   CARTE MENTALE DES MODULES — 9 pôles repliables
   Sans JavaScript, toutes les branches sont ouvertes : les 46 modules restent
   lisibles par les crawlers et les moteurs de réponse. landing.js ajoute
   .js-mm sur <html>, replie les branches et gère l'ouverture au clic.
   ========================================================================== */
.mm { position: relative; }
.mm-hub { display: none; }
@media (min-width: 1100px) {
  .mm-hub { display: flex; flex-direction: column; align-items: center; justify-content: center;
            position: absolute; left: 0; top: 0; width: 132px; height: 132px;
            border: 1px solid rgba(60,99,242,.55); background: var(--ink-1); }
  .mm-hub-n { font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: -.04em; color: var(--blanc); line-height: 1; }
  .mm-hub-l { margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
              text-transform: uppercase; color: #9db4ff; text-align: center; line-height: 1.4; }
  .mm-groups { margin-left: 172px; }
  /* Tronc : la ligne verticale d'où partent les branches */
  .mm-groups::before { content: ""; position: absolute; left: 66px; top: 132px; bottom: 22px;
                       width: 1px; background: var(--hairline); }
}
.mm-groups { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--hairline); }
.mm-group { position: relative; border-bottom: 1px solid var(--hairline); }
/* Rameau horizontal qui relie le tronc au nœud du pôle */
@media (min-width: 1100px) {
  .mm-group::before { content: ""; position: absolute; left: -106px; top: 33px; width: 106px; height: 1px;
                      background: var(--hairline); }
}

.mm-h { margin: 0; }
.mm-node { display: flex; align-items: center; gap: 18px; width: 100%; padding: 18px 20px 18px 0;
           background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit;
           color: var(--blanc); }
@media (prefers-reduced-motion: no-preference) {
  .mm-node { transition: background var(--dur-ui) var(--ease), padding-left var(--dur-ui) var(--ease); }
}
@media (hover: hover) and (pointer: fine) {
  .mm-node:hover { background: var(--ink-2); padding-left: 10px; }
}
.mm-idx { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: #9db4ff; flex: none; }
.mm-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em;
           font-size: clamp(22px, 3vw, 30px); line-height: 1.1; flex: 1 1 auto; }
.mm-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
            color: var(--blanc-60); flex: none; white-space: nowrap; }
/* Chevron : deux traits qui forment un + fermé et un − ouvert */
.mm-chev { position: relative; flex: none; width: 18px; height: 18px; }
.mm-chev::before, .mm-chev::after { content: ""; position: absolute; left: 50%; top: 50%; background: #9db4ff; }
.mm-chev::before { width: 14px; height: 1px; transform: translate(-50%, -50%); }
.mm-chev::after  { width: 1px; height: 14px; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: no-preference) { .mm-chev::after { transition: transform 350ms var(--ease); } }
.mm-node[aria-expanded="true"] .mm-chev::after { transform: translate(-50%, -50%) scaleY(0); }

.mm-branch { padding: 0 0 22px; }
.mm-cards { display: grid; grid-template-columns: 1fr; gap: 0;
            border: 1px solid var(--hairline); border-bottom: 0; }
@media (min-width: 560px)  { .mm-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .mm-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .mm-cards { grid-template-columns: repeat(4, 1fr); } }
.mm-cards .module-card { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

/* --- Repli : uniquement quand le JS a pris la main ------------------------ */
.js-mm .mm-branch { display: none; }
.js-mm .mm-branch.is-open { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js-mm .mm-branch.is-open .mm-cards { animation: mmOpen 420ms var(--ease) both; }
}
@keyframes mmOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* La nébuleuse était calée sur l'ancienne section Modules (6 995 px). Depuis le
   repli en carte mentale, elle remontait sur les noms de pôles : on la garde
   basse et discrète. */
body.oltanis #galaxy3d {
  -webkit-mask-image: radial-gradient(64% 44% at 50% 96%, #000 26%, transparent 72%);
          mask-image: radial-gradient(64% 44% at 50% 96%, #000 26%, transparent 72%);
  opacity: .5;
}
/* Dans la grille d'une branche, les titres doivent s'aligner d'une carte à
   l'autre : `space-between` les décalait selon la longueur du texte. */
.mm-cards .module-card { justify-content: flex-start; gap: 16px; }
.mm-cards .module-name { margin-top: 0; }