/* ════════════════════════════════════════════════════════════
   QUALiBOX · Accueil storyline — feuille de style
   Acte 1 hero particules · Acte 2 frise horizontale · Acte 3 vertical
   ════════════════════════════════════════════════════════════ */

:root{
  --blue:#5C8DFF; --blue-hover:#3F6FE0; --blue-deep:#2F56BB; --navy:#1B2541;
  --orange:#FF9F43; --green:#22C55E; --amber:#F59E0B; --red:#EF4444;
  --ink:#1B2541; --muted:#6B7280; --border:#E5E9F2;
  --blue-50:#F5F8FF; --blue-100:#EAF1FF; --blue-200:#DCE7FF;
  --shadow-sm:0 1px 2px rgba(27,37,65,.04), 0 4px 16px rgba(27,37,65,.05);
  --shadow-md:0 10px 30px rgba(27,37,65,.08), 0 2px 8px rgba(27,37,65,.04);
  --shadow-lg:0 24px 60px rgba(47,86,187,.14), 0 6px 18px rgba(27,37,65,.06);
  --accent:var(--blue);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#FAFCFF 0%, #F2F6FF 100%);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{ letter-spacing:-.02em; font-weight:800; color:var(--navy); line-height:1.1; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:8px; }

.grad{
  background:linear-gradient(115deg, var(--blue) 0%, var(--blue-hover) 52%, var(--orange) 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ─── Boutons ─── */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:inherit;
  font-size:15px; font-weight:700; letter-spacing:-.01em;
  padding:14px 26px; border-radius:13px; cursor:pointer; border:none;
  transition:transform .22s cubic-bezier(.34,1.4,.5,1), box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.btn svg{ width:17px; height:17px; transition:transform .2s ease; }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{ color:#fff; background:linear-gradient(122deg, var(--blue), var(--blue-hover)); box-shadow:0 10px 26px rgba(63,111,224,.34); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(63,111,224,.45); }
.btn-primary:active{ transform:translateY(0) scale(.98); }
.btn-ghost{ color:var(--navy); background:#fff; border:1.5px solid var(--border); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--blue); background:var(--blue-50); }

/* ════════ HEADER — design moderne (glass + floating pill) ════════ */
.site-header{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:90;
  width:calc(100% - 28px); max-width:1320px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(232,236,243,.85);
  border-radius:18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 10px 30px -12px rgba(27,37,65,.10),
    0 2px 6px rgba(27,37,65,.04);
  transition:top .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease, transform .3s ease;
}
.site-header.compact{
  top:8px;
  background:rgba(255,255,255,.85);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 14px 40px -14px rgba(27,37,65,.18),
    0 4px 10px rgba(27,37,65,.06);
  border-color:rgba(220,226,238,.9);
}
.header-inner{
  max-width:1280px; margin:0 auto; padding:0 22px;
  height:70px; display:flex; align-items:center; justify-content:space-between;
  transition:height .3s ease;
  gap:18px;
}
.site-header.compact .header-inner{ height:60px; }
.brand{ display:inline-flex; align-items:center; transition:transform .25s ease; }
.brand:hover{ transform:translateY(-1px); }
.brand-logo{ height:30px; width:auto; transition:height .3s ease; }
.site-header.compact .brand-logo{ height:26px; }

.nav{ display:flex; align-items:center; gap:6px; }
.nav a, .nav .nav-item{
  position:relative; font-size:14px; font-weight:600; color:#475068;
  padding:9px 14px; border-radius:10px;
  transition:color .2s ease, background .2s ease;
}
.nav a:hover, .nav .nav-item:hover{ color:var(--navy); background:rgba(92,141,255,.08); }
.nav a.active, .nav .nav-item.active{ color:var(--navy); background:rgba(92,141,255,.12); }

.header-cta{ display:flex; align-items:center; gap:10px; }
.header-cta .login{
  font-size:14px; font-weight:600; color:var(--navy);
  padding:9px 14px; border-radius:10px;
  transition:background .2s ease, color .2s ease;
}
.header-cta .login:hover{ background:rgba(27,37,65,.06); }

.btn-demo, .hdr-primary{
  position:relative; overflow:hidden;
  font-family:inherit; font-size:14px; font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(122deg, var(--blue) 0%, var(--blue-hover) 60%, #6E9BFF 100%);
  background-size:200% 100%; background-position:0% 50%;
  border:none; border-radius:12px; padding:11px 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 8px 20px -6px rgba(63,111,224,.55),
    0 2px 6px rgba(63,111,224,.18);
  transition:transform .25s ease, box-shadow .25s ease, background-position .5s ease;
}
.btn-demo:hover, .hdr-primary:hover{
  transform:translateY(-2px); background-position:100% 50%;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 14px 28px -8px rgba(63,111,224,.6),
    0 4px 10px rgba(63,111,224,.22);
}
.btn-demo:active, .hdr-primary:active{ transform:translateY(0) scale(.985); }

.hdr-ghost{
  background:transparent; color:var(--navy);
  border:1px solid rgba(27,37,65,.12);
  border-radius:12px; padding:10px 16px; font-weight:600;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.hdr-ghost:hover{ border-color:var(--blue); color:var(--blue); background:rgba(92,141,255,.06); }

@media(max-width:980px){
  .site-header{ top:10px; width:calc(100% - 20px); border-radius:16px; }
  .nav{ display:none; } .header-cta .login, .header-cta .hdr-ghost{ display:none; }
  .header-inner{ height:62px; padding:0 16px; }
}

/* ════════ ACTE 1 — HERO ════════ */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:120px 24px 80px; overflow:hidden;
}
#hero-canvas{ position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; }
.hero-fade{ position:absolute; left:0; right:0; bottom:0; height:220px; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, transparent, #F2F6FF 88%); }
.hero-inner{ position:relative; z-index:2; max-width:880px; display:flex; flex-direction:column; align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  padding:8px 16px; border-radius:999px; background:rgba(234,241,255,.8);
  border:1px solid var(--blue-200); backdrop-filter:blur(8px);
  font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--blue-hover);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.78)} }
.hero h1{ font-size:clamp(42px, 6.4vw, 84px); letter-spacing:-.035em; margin-bottom:24px; }
.hero-lead{ font-size:clamp(17px,1.6vw,21px); color:#4a5468; max-width:620px; margin-bottom:40px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.hero-trust{ margin-top:30px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  font-size:13px; font-weight:600; color:var(--muted); }
.hero-trust .sep{ width:4px; height:4px; border-radius:50%; background:var(--blue-200); }

/* Transition vers la frise */
.hero-transition{ position:relative; z-index:2; margin-top:60px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero-transition .t-eyebrow{ text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:800; color:var(--blue-hover); }
.hero-transition .t-text{ font-size:14.5px; color:var(--muted); font-weight:600; }
.scroll-cue{ width:26px; height:42px; border-radius:14px; border:2px solid var(--blue-200); position:relative; margin-top:4px; }
.scroll-cue::before{ content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; border-radius:3px; background:var(--blue); transform:translateX(-50%); animation:cue 1.7s ease-in-out infinite; }
@keyframes cue{ 0%{opacity:0; transform:translate(-50%,0)} 30%{opacity:1} 60%{opacity:1; transform:translate(-50%,12px)} 100%{opacity:0; transform:translate(-50%,12px)} }

/* ════════ ACTE 2 — FRISE HORIZONTALE ════════ */
.storyline{ position:relative; }
.storyline-intro{ max-width:800px; margin:0 auto; padding:90px 24px 16px; text-align:center; }
.eyebrow-line{ display:inline-flex; align-items:center; gap:11px; margin-bottom:18px;
  text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:800; color:var(--blue-hover); }
.eyebrow-line::before, .eyebrow-line::after{ content:""; width:26px; height:2px; background:var(--blue); border-radius:2px; }
.storyline-intro h2{ font-size:clamp(30px,4.4vw,52px); letter-spacing:-.03em; }
.storyline-intro p{ font-size:clamp(16px,1.4vw,19px); color:#4a5468; margin-top:18px; }

.storyline-pin{ position:relative; height:100vh; overflow:hidden; }
.storyline-track{ display:flex; height:100%; will-change:transform; align-items:center; }

.story-panel{
  flex:0 0 min(940px, 76vw); height:100%;
  display:flex; align-items:center; padding:0 clamp(20px,4vw,56px);
}
.panel-inner{ width:100%; max-width:900px; margin:0 auto;
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,56px); align-items:center; }
.panel-text{ max-width:480px; }
.panel-pill{ display:inline-block; font-size:12.5px; font-weight:700; padding:7px 15px; border-radius:999px; margin-bottom:16px;
  background:color-mix(in srgb, var(--step,#5C8DFF) 14%, #fff);
  color:color-mix(in srgb, var(--step,#5C8DFF) 72%, var(--navy));
  border:1px solid color-mix(in srgb, var(--step,#5C8DFF) 24%, transparent); }
.panel-num{ display:flex; align-items:center; gap:12px; font-size:13px; font-weight:800; letter-spacing:.16em; color:var(--step,#5C8DFF); margin-bottom:12px; }
.panel-num::after{ content:""; flex:1; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--step,#5C8DFF), transparent); max-width:70px; }
.panel-text h3{ font-size:clamp(26px,3.2vw,40px); margin-bottom:14px; }
.panel-text > p{ font-size:clamp(15px,1.3vw,17.5px); color:#4a5468; margin-bottom:20px; }
.panel-list{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.panel-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; font-weight:600; color:#3a4255; }
.panel-list li::before{ content:""; flex-shrink:0; width:10px; height:10px; margin-top:6px; border-radius:50%;
  background:var(--step,#5C8DFF); box-shadow:0 0 0 4px color-mix(in srgb, var(--step,#5C8DFF) 18%, transparent); }
.panel-note{ margin-top:18px; font-size:13px; font-weight:600; color:var(--muted);
  background:var(--blue-50); border:1px dashed var(--blue-200); border-radius:12px; padding:11px 15px; }

/* Visuel clay (panneaux standards) */
.panel-visual{ position:relative; display:grid; place-items:center; justify-self:center; width:100%; max-width:400px; }
.visual-stage{ position:relative; aspect-ratio:1/1; width:100%; display:grid; place-items:center; }
.visual-disc{ position:absolute; width:84%; height:84%; border-radius:42% 58% 56% 44% / 50% 46% 54% 50%;
  background:radial-gradient(120% 120% at 32% 28%, color-mix(in srgb, var(--step,#5C8DFF) 30%, #fff) 0%, color-mix(in srgb, var(--step,#5C8DFF) 13%, #fff) 45%, #fff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), var(--shadow-lg);
  border:1px solid color-mix(in srgb, var(--step,#5C8DFF) 22%, var(--border)); }
.visual-ring{ position:absolute; width:96%; height:96%; border-radius:50%; border:1px dashed color-mix(in srgb, var(--step,#5C8DFF) 30%, transparent); opacity:.5; }
.visual-img{ position:relative; z-index:2; width:72%; filter:drop-shadow(0 26px 34px color-mix(in srgb, var(--step,#5C8DFF) 38%, rgba(27,37,65,.2))); animation:floatY 6.5s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.visual-tag{ position:absolute; z-index:3; bottom:7%; right:6%; display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.94); border:1px solid var(--border); box-shadow:var(--shadow-md);
  border-radius:11px; padding:8px 12px; font-size:12px; font-weight:700; color:var(--navy); }
.visual-tag .vdot{ width:8px; height:8px; border-radius:50%; background:var(--step,#5C8DFF); }

/* Panneau pleine-largeur (scènes 3D) */
.story-panel--scene{ flex:0 0 min(1180px, 92vw); }
.story-panel--scene .panel-inner{ display:block; max-width:none; position:relative; height:78vh; }
.scene-host{ position:relative; width:100%; height:100%; border-radius:28px; overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-lg);
  background:radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, #F4F8FF 100%); }
.scene-host canvas{ display:block; width:100%; height:100%; }
.scene-caption{ position:absolute; left:28px; top:26px; z-index:3; max-width:340px; pointer-events:none; }
.scene-caption .panel-pill{ pointer-events:auto; }
.scene-caption h3{ font-size:clamp(24px,2.6vw,34px); margin:6px 0 8px; }
.scene-caption p{ font-size:14.5px; color:#4a5468; font-weight:500; }
.scene-hint{ position:absolute; right:24px; bottom:22px; z-index:3; font-size:12px; font-weight:600; color:var(--muted);
  background:rgba(255,255,255,.82); border:1px solid var(--border); border-radius:999px; padding:7px 14px; backdrop-filter:blur(6px); }

/* Qualiomètre overlay (score) */
.qm-readout{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:2; text-align:center; pointer-events:none; }
.qm-score{ font-size:clamp(64px,9vw,116px); font-weight:800; line-height:.92; letter-spacing:-.04em; color:var(--navy); }
.qm-slash{ font-size:14px; font-weight:600; color:#8A93A6; }
.qm-level{ margin-top:10px; font-size:clamp(14px,2vw,18px); font-weight:800; color:var(--green); }
.qm-sub{ margin-top:5px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#9AA3B2; }

/* HUD frise */
.storyline-hud{ position:absolute; left:0; right:0; bottom:30px; z-index:6; max-width:1080px; margin:0 auto; padding:0 32px; }
.frise{ position:relative; display:flex; align-items:center; gap:16px; }
.frise-counter{ font-size:14px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; flex-shrink:0; }
.frise-counter .cur{ color:var(--accent); font-size:18px; }
.frise-counter .sep{ color:var(--blue-200); margin:0 3px; }
.frise-line{ position:relative; flex:1; height:30px; display:flex; align-items:center; }
.frise-rail{ position:absolute; left:0; right:0; height:3px; border-radius:99px; background:var(--blue-100); }
.frise-fill{ position:absolute; left:0; height:3px; width:0%; border-radius:99px; background:var(--frise-color, var(--blue)); transition:background .45s ease; }
.frise-nodes{ position:relative; flex:1; display:flex; justify-content:space-between; }
.frise-node{ position:relative; width:13px; height:13px; border-radius:50%; background:#fff; border:2px solid var(--blue-200); cursor:pointer;
  transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.frise-node::after{ content:attr(data-label); position:absolute; bottom:165%; left:50%; transform:translateX(-50%);
  font-size:10.5px; font-weight:700; color:var(--muted); white-space:nowrap; opacity:0; transition:opacity .2s ease; pointer-events:none; }
.frise-node:hover::after{ opacity:1; }
.frise-node.done{ border-color:var(--accent); background:var(--accent); }
.frise-node.active{ border-color:var(--accent); background:#fff; transform:scale(1.45); box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.frise-node.active::before{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent); }
.frise-dir{ display:flex; gap:8px; flex-shrink:0; color:#aab3cd; }
.frise-dir button{ background:none; border:none; cursor:pointer; color:inherit; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; transition:color .2s, background .2s; }
.frise-dir button:hover{ color:var(--accent); background:var(--blue-100); }
.frise-dir svg{ width:19px; height:19px; }

/* ════════ ACTE 3 — VERTICAL ════════ */
.section{ max-width:1180px; margin:0 auto; padding:clamp(70px,8vw,110px) 28px; }
.section-head{ text-align:center; max-width:760px; margin:0 auto 56px; }
.section-head h2{ font-size:clamp(28px,3.6vw,46px); letter-spacing:-.03em; }
.section-head p{ font-size:clamp(16px,1.4vw,18px); color:#4a5468; margin-top:16px; }

/* Offre */
.offer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.offer-card{ background:#fff; border:1px solid var(--border); border-radius:22px; padding:30px 28px; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.offer-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--blue-200); }
.offer-ico{ width:64px; height:64px; margin-bottom:18px; }
.offer-ico img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(47,86,187,.22)); }
.offer-card h3{ font-size:21px; margin-bottom:10px; }
.offer-card p{ font-size:15px; color:#4a5468; }
@media(max-width:880px){ .offer-grid{ grid-template-columns:1fr; } }

/* Tarifs */
.pricing-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:840px; margin:0 auto; }
.price-card{ position:relative; background:#fff; border:1px solid var(--border); border-radius:24px; padding:34px 30px; box-shadow:var(--shadow-sm); }
.price-card.featured{ background:linear-gradient(180deg,#1E2A4A,#1B2541); border-color:transparent; color:#fff; box-shadow:var(--shadow-lg); }
.price-tier{ font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-hover); }
.price-card.featured .price-tier{ color:#9fc0ff; }
.price-amount{ font-size:48px; font-weight:800; letter-spacing:-.03em; margin:10px 0 4px; }
.price-amount .per{ font-size:16px; font-weight:600; color:var(--muted); }
.price-card.featured .price-amount .per{ color:#aeb9d6; }
.price-feats{ list-style:none; margin:22px 0 26px; display:flex; flex-direction:column; gap:12px; }
.price-feats li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; font-weight:600; color:#3a4255; }
.price-card.featured .price-feats li{ color:#cdd6ee; }
.price-feats li::before{ content:""; flex-shrink:0; width:18px; height:18px; margin-top:2px; border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.price-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(120deg,var(--orange),#ff8c1a); color:#fff;
  font-size:11.5px; font-weight:800; letter-spacing:.04em; padding:6px 16px; border-radius:999px; box-shadow:0 8px 20px rgba(255,140,26,.4); }
.price-card .btn{ width:100%; justify-content:center; }
@media(max-width:760px){ .pricing-grid{ grid-template-columns:1fr; } }

/* CTA bande */
.cta-band{ position:relative; margin:0 24px; border-radius:32px; overflow:hidden;
  background:radial-gradient(140% 130% at 50% -10%, #2A3C68 0%, #1B2541 55%, #141d36 100%); }
.cta-band-inner{ position:relative; z-index:1; text-align:center; padding:clamp(60px,7vw,96px) 28px; max-width:760px; margin:0 auto; }
.cta-band::before{ content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:760px; height:760px; border-radius:50%;
  background:radial-gradient(circle, rgba(92,141,255,.32), transparent 60%); filter:blur(50px); }
.cta-band h2{ color:#fff; font-size:clamp(28px,3.6vw,46px); letter-spacing:-.03em; }
.cta-band p{ color:#aeb9d6; font-size:clamp(16px,1.4vw,19px); margin:16px auto 30px; max-width:560px; }
.cta-band .btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.2); }
.cta-band .btn-ghost:hover{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.4); }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* FAQ */
.faq{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; }
.faq-item[open]{ border-color:var(--blue-200); box-shadow:var(--shadow-sm); }
.faq-item summary{ list-style:none; cursor:pointer; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:16.5px; font-weight:700; color:var(--navy); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ flex-shrink:0; width:22px; height:22px; color:var(--blue); transition:transform .25s ease; }
.faq-item[open] summary .chev{ transform:rotate(180deg); }
.faq-item .faq-body{ padding:0 24px 22px; font-size:15px; color:#4a5468; }

/* Footer */
.site-footer{ background:#0f1730; color:#aeb9d6; margin-top:40px; }
.footer-inner{ max-width:1180px; margin:0 auto; padding:64px 28px 30px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer-brand img{ height:30px; margin-bottom:16px; }
.footer-brand p{ font-size:14px; max-width:280px; }
.footer-col h4{ color:#fff; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; font-weight:700; }
.footer-col a{ display:block; font-size:14px; margin-bottom:11px; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:20px 28px; text-align:center; font-size:13px; color:#7a86a8; }
@media(max-width:880px){ .footer-inner{ grid-template-columns:1fr 1fr; gap:30px; } }

/* ─── Constellation : nœuds DOM superposés ─── */
.cst-overlay{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.cst-node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px; will-change:left,top; transition:opacity .4s ease; }
.cst-ico{ position:relative; display:grid; place-items:center; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.cst-ico img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(47,86,187,.24)); -webkit-user-drag:none; user-select:none; }
.cst-cap{ font-size:11.5px; font-weight:600; color:rgba(80,90,110,.92); white-space:nowrap; padding:2px 6px; border-radius:20px; transition:.25s; }
.cst-node.hovered .cst-ico{ transform:scale(1.2) translateY(-4px); }
.cst-node.hovered .cst-cap{ color:var(--blue-deep); font-weight:700; background:var(--blue-100); padding:3px 11px; box-shadow:0 3px 12px rgba(63,111,224,.2); }
.cst-node.dim{ opacity:.5; }

/* ─── Reveals (IntersectionObserver) ─── */
html.js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
html.js [data-reveal].in{ opacity:1; transform:none; }

/* ─── Mobile / reduced-motion : empilement vertical ─── */
@media(max-width:899px){
  .storyline-pin{ height:auto; overflow:visible; }
  .storyline-track{ flex-direction:column; height:auto; will-change:auto; }
  .story-panel{ flex:none; width:auto; height:auto; padding:46px 24px; }
  .story-panel--scene .panel-inner{ height:70vh; }
  .panel-inner{ grid-template-columns:1fr; gap:30px; }
  .panel-visual{ order:-1; max-width:280px; }
  .storyline-hud{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .storyline-pin{ height:auto; overflow:visible; }
  .storyline-track{ flex-direction:column; height:auto; will-change:auto; }
  .story-panel{ flex:none; width:auto; height:auto; padding:50px 24px; }
  .panel-inner{ grid-template-columns:1fr; gap:32px; max-width:820px; }
  .story-panel--scene .panel-inner{ max-width:none; }
  .panel-visual{ order:-1; }
  .storyline-hud{ display:none; }
  .visual-img,.scroll-cue::before,.eyebrow .dot{ animation:none !important; }
  html.js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}