/* Polices auto-hébergées (règle de marque : jamais de CDN fonts) — servies
   depuis /fonts/ (client/public/fonts, pipeline Vite existant). Le proto
   design/landing-v2 chargeait Google Fonts ; mêmes familles, fichiers locaux. */
@font-face{font-family:'Instrument Sans';src:url('/fonts/instrument-sans-latin-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-latin-400.woff2') format('woff2');font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-latin-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Spectral';src:url('/fonts/spectral-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ============================================================
   CHLLM — Landing page
   Tokens issus de la maquette « CHLLM - Maquettes » (nuit-clair)
   ============================================================ */
:root, [data-theme="nuit-clair"]{
  --bg:#FAFAFB; --bg-raised:#FFFFFF; --bg-inset:#F0F1F4;
  --border:#E4E5EA; --border-strong:#C9CBD6;
  --text:#0E1020; --text-2:#565A6E; --text-3:#8A8DA0;
  --accent:#2E3CF2; --accent-strong:#2430D8; --accent-ink:#FFFFFF; --accent-soft:#E9EBFE;
  --ok:#1B7F4B; --err:#C22F2A;
  --shadow:0 1px 2px rgba(14,16,32,0.06);
  --shadow-lg:0 12px 40px rgba(14,16,32,0.12);
  --ch-bg:#101218; --ch-bg-2:#15171F; --ch-text:#ECEDF2; --ch-text-2:#9CA1B2;
  --ch-border:#2A2D3A; --ch-logo:#7D89FF;   /* chrome ARDOISE : neutre froid, la couleur ne vit que dans l'accent */
  --chrome-rgb:16,18,24; --chrome-solid:#131520;
  --band-bg:var(--ch-bg-2); --band-text:var(--ch-text-2); --band-link:var(--ch-logo);
  --coral:#E8562F; --coral-soft:#FFF3EE; --coral-border:#FFD3C4;
  --coral-vif:#FF6B4A; --coral-crest:#FF8A63;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:64px; --sp-6:96px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tight:cubic-bezier(.75,0,.18,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html{overflow-x:clip;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Instrument Sans',-apple-system,sans-serif;
  font-size:16px; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
a{color:inherit;}
.mono{font-family:'IBM Plex Mono',monospace;}
.wrap{max-width:1440px;margin:0 auto;}

/* ---------- Grain (tue l'aplat numérique) ---------- */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Bandeau beta ---------- */
.beta-band{
  background:var(--band-bg); color:var(--band-text);
  font-size:13.5px; text-align:center; padding:9px 24px;
}
.beta-band a{color:var(--band-link); text-decoration:none; font-weight:500;}
.beta-band a:hover{text-decoration:underline;}

/* ---------- Nav (sticky, verre fumé) ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(var(--chrome-rgb),.88);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:box-shadow .35s ease, background .35s ease;
}
.nav.scrolled{box-shadow:0 8px 30px rgba(14,16,32,.25); background:rgba(var(--chrome-rgb),.94);}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 72px; max-width:1440px; margin:0 auto;
  position:relative; z-index:2; /* au-dessus du panneau mobile */
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.brand span{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:16px; letter-spacing:.14em; color:var(--ch-text);}
.nav-links{display:flex; align-items:center; gap:22px;}
.nav-links a{color:var(--ch-text-2); text-decoration:none; font-size:14.5px; transition:color .25s;}
.nav-links a:hover{color:var(--ch-text);}
.nav-links .login{color:var(--ch-text); font-weight:500;}
.nav-links .login:hover{color:var(--ch-logo);}
.nav-links a.active{color:var(--ch-text); text-decoration:underline; text-underline-offset:7px; text-decoration-color:var(--ch-logo); text-decoration-thickness:1.5px;}
.lang{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ch-text-2); border:1px solid var(--ch-border); border-radius:6px; padding:4px 9px;}

/* Burger + menu mobile plein écran */
.burger{display:none; background:transparent; border:0; cursor:pointer; padding:8px 2px; flex-direction:column; gap:5px;}
.burger span{display:block; width:21px; height:1.6px; background:var(--ch-text); border-radius:2px; transition:transform .35s var(--ease-out), opacity .25s;}
.burger.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);}
.mobile-menu{
  position:fixed; top:0; left:0; right:0; z-index:1;
  padding:78px 28px 28px; background:var(--chrome-solid); /* opaque : le backdrop-filter imbriqué n'est pas fiable */
  border-bottom:1px solid var(--ch-border);
  display:flex; flex-direction:column;
  transform:translateY(-12px); opacity:0; pointer-events:none; visibility:hidden;
  transition:transform .4s var(--ease-out), opacity .35s var(--ease-out), visibility 0s .4s;
}
.mobile-menu.open{transform:none; opacity:1; pointer-events:auto; visibility:visible; transition:transform .4s var(--ease-out), opacity .35s var(--ease-out);}
.mobile-menu a{
  color:var(--ch-text); text-decoration:none; font-size:19px; font-weight:500;
  padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.07);
}
.mobile-menu a.active{color:var(--ch-logo);}
.nav-links a.btn-primary, .mobile-menu a.btn-primary{color:#fff;}   /* .nav-links a écrasait le blanc du CTA */
.mobile-menu .mm-login{color:var(--ch-text-2); font-size:16px;}
.mobile-menu .mm-cta{margin-top:18px; border-bottom:none; justify-content:center;}

/* ---------- Boutons ---------- */
.btn{
  border:none; font-family:inherit; font-weight:600; cursor:pointer;
  border-radius:10px; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .25s, border-color .25s, color .25s;
  position:relative; overflow:hidden;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{background:var(--ch-logo); color:#fff;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(94,109,255,.35);}
.btn-primary::after{ /* reflet balayant au survol */
  content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.25), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn-primary:hover::after{left:130%;}
.btn-ghost{background:transparent; border:1px solid var(--ch-border); color:var(--ch-text); font-weight:400;}
.btn-ghost:hover{border-color:var(--ch-logo); transform:translateY(-2px);}
.btn-nav{font-size:14.5px; padding:10px 18px; border-radius:9px;}
.btn-lg{font-size:16px; padding:14px 24px;}

/* ---------- Hero ---------- */
.hero{
  position:relative; background:var(--ch-bg);
  border-bottom:1px solid var(--border); overflow:hidden;
}
.hero-halo{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.hero-halo i{
  position:absolute; border-radius:50%; display:block;
  background:radial-gradient(closest-side, rgba(94,109,255,.22), transparent 72%);
}
.hero-halo i:nth-child(1){width:900px; height:900px; top:-380px; left:-180px; animation:drift1 26s ease-in-out infinite alternate;}
.hero-halo i:nth-child(2){width:700px; height:700px; bottom:-420px; right:-120px; background:radial-gradient(closest-side, rgba(46,60,242,.18), transparent 70%); animation:drift2 32s ease-in-out infinite alternate;}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(120px,60px,0) scale(1.15);}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.05);} to{transform:translate3d(-100px,-70px,0) scale(.95);}}

.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:72px 72px 160px 72px; max-width:1440px; margin:0 auto;
}
.hero-copy{display:flex; flex-direction:column; gap:26px;}
.hero-copy h1{
  font-size:clamp(34px, 3.4vw, 49px); font-weight:700; line-height:1.12;
  letter-spacing:-.015em; color:var(--ch-text);
}
.hero-copy h1 .grad{
  color:var(--ch-logo);
  background:linear-gradient(92deg, #5E6DFF 0%, #8B96FF 55%, #5E6DFF 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:gradShift 7s ease-in-out infinite;
}
@keyframes gradShift{0%,100%{background-position:0% 0;} 50%{background-position:100% 0;}}
.hero-copy p{font-size:17.5px; line-height:1.65; color:var(--ch-text-2); max-width:520px;}
.hero-cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.hero-meta{display:flex; align-items:center; gap:16px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ch-text-2); flex-wrap:wrap;}
.hero-meta .dot{opacity:.4;}

/* ECG / logo : flux lumineux continu à pointe corail — ligne entière, zéro pointillé */
.ecg{overflow:visible; width:min(360px,100%); height:auto;}
.hero-copy{min-width:0;}
.proof{min-width:0;}
.brand svg polyline, .hero .ecg polyline, footer .left svg polyline{stroke:url(#lgFlux);}
.hero .ecg polyline{filter:drop-shadow(0 0 6px rgba(94,109,255,.3));}

/* Entrée orchestrée du hero */
.enter{opacity:0; transform:translateY(26px); animation:fadeUp 1s var(--ease-out) forwards;}
.enter.d1{animation-delay:.1s;} .enter.d2{animation-delay:.22s;}
.enter.d3{animation-delay:.34s;} .enter.d4{animation-delay:.46s;} .enter.d5{animation-delay:.58s;}
@keyframes fadeUp{to{opacity:1; transform:none;}}

/* ---------- Carte rapport (preuve produit) ---------- */
.proof{position:relative;}
.report{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.report-head{display:flex; align-items:center; gap:8px; padding:14px 20px; border-bottom:1px solid var(--border);}
.chip{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-3);}
.chip.blue{color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:3px 8px;}
.report-tag{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:var(--text-3);}
.report-body{padding:26px 28px 30px 28px; display:flex; flex-direction:column; gap:14px;}
.report-body h3{font-size:19px; font-weight:600; line-height:1.35;}
.report-body .excerpt{font-family:'Spectral',serif; font-size:16px; line-height:1.75; color:var(--text);}
.cite{
  color:var(--accent); border-bottom:1px dotted var(--accent); cursor:pointer;
  border-radius:3px; padding:0 2px;
  transition:background .35s, border-color .35s, box-shadow .35s, color .35s;
}
.cite.active{
  background:var(--accent); color:#fff; border-bottom:1px solid var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft), 0 2px 10px rgba(46,60,242,.35);
}
.cite-hint{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-3); letter-spacing:.04em;}
.cite-hint .mob{display:none;}

/* Popover de source — ancré sous la citation active, se déplace avec elle */
.popover{
  position:absolute; top:0; left:0; width:360px; z-index:5;
  background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:16px 18px;
  display:flex; flex-direction:column; gap:8px;
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out),
             left .65s var(--ease-out), top .65s var(--ease-out);
  pointer-events:none;
}
.popover::before{ /* flèche vers la citation */
  content:""; position:absolute; top:-6.5px; left:var(--caret-x,40px);
  width:11px; height:11px; background:var(--bg-raised);
  border-left:1px solid var(--border-strong); border-top:1px solid var(--border-strong);
  transform:rotate(45deg);
  transition:left .65s var(--ease-out);
}
.popover.show{opacity:1; transform:none; pointer-events:auto;}
.popover .src-line{display:flex; align-items:center; gap:8px;}
.popover .domain{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; color:var(--text-3);}
.popover .verified{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ok); display:flex; align-items:center; gap:5px;}
.popover .verified::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pulse-ok 2s ease-in-out infinite;}
@keyframes pulse-ok{0%,100%{box-shadow:0 0 0 0 rgba(27,127,75,.35);} 50%{box-shadow:0 0 0 4px rgba(27,127,75,0);}}
.popover .src-title{font-size:14.5px; font-weight:600; line-height:1.4;}
.popover .quote{font-family:'Spectral',serif; font-style:italic; font-size:13.5px; line-height:1.6; color:var(--text-2);}
.popover .open-src{font-size:13px; color:var(--accent); font-weight:500; text-decoration:none;}
.popover .open-src:hover{text-decoration:underline;}
.popover-content{display:flex; flex-direction:column; gap:8px; transition:opacity .25s ease;}
.popover-content.swap{opacity:0;}

/* Étiquette de démo (mobile) */
.demo-tag{
  display:none; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ch-logo); margin-bottom:12px;
}
.demo-tag i{width:6px; height:6px; border-radius:50%; background:var(--ch-logo); animation:blinkdot 2s ease-in-out infinite;}
@keyframes blinkdot{50%{opacity:.25;}}

/* ---------- Sections claires ---------- */
section{position:relative;}
.section-pad{padding:120px 72px 84px 72px; max-width:1440px; margin:0 auto;}
.kicker{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.2em; color:var(--accent);}
.section-head{display:flex; flex-direction:column; gap:12px; max-width:640px;}
.section-head h2{font-size:34px; font-weight:700; letter-spacing:-.01em;}
.section-head p{font-size:16.5px; line-height:1.6; color:var(--text-2);}

/* Révélation au scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);}
.reveal.in{opacity:1; transform:none;}

/* Titres : chaque mot se lève depuis sa ligne (masque + décalage) */
.section-head h2 .wo{display:inline-block; overflow:hidden; vertical-align:bottom;}
.section-head h2 .w{display:inline-block; transform:translateY(108%); transition:transform .75s var(--ease-out);}
.section-head.in h2 .w{transform:none;}

/* Manifeste : le texte se lit au rythme du scroll (mot à mot, scrub) */
.scrollread .w{opacity:.2; transition:opacity .22s linear;}
.scrollread .w.lit{opacity:1;}
[data-stagger] > *{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
[data-stagger].in > *{opacity:1; transform:none;}

/* ---------- Comparaison ---------- */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px;}
.card-flat{
  background:var(--bg-inset); border:1px solid var(--border); border-radius:14px;
  padding:28px 30px; display:flex; flex-direction:column; gap:18px;
}
.card-hero{
  background:var(--bg-raised); border:1px solid var(--accent); border-radius:14px;
  padding:28px 30px; display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow);
  position:relative; transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.card-hero:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(46,60,242,.14);}
.card-title{font-size:17px; font-weight:600; color:var(--text-2);}
.card-hero .card-title{color:var(--accent);}
.list{display:flex; flex-direction:column; gap:12px;}
.list .row{display:flex; gap:12px; align-items:baseline;}
.list .x{color:var(--err); font-family:'IBM Plex Mono',monospace; font-size:13px;}
.list .v{color:var(--ok); font-family:'IBM Plex Mono',monospace; font-size:13px;}
.list .row span:last-child{font-size:15.5px;}
.card-flat .row span:last-child{color:var(--text-2);}

/* ---------- Stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  border-top:1px solid var(--border); padding-top:36px; margin-top:44px;
}
.stat{display:flex; flex-direction:column; gap:6px;}
.stat .num{font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:500; color:var(--accent); font-variant-numeric:tabular-nums;}
.stat .label{font-size:14px; line-height:1.5; color:var(--text-2);}
.stats-note{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-3); margin-top:12px; display:block;}

/* ---------- Modes ---------- */
.modes-band{background:var(--bg-inset); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.modes-band .section-pad{padding:84px 72px;}
.modes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px;}
.mode-card{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:12px;
  padding:20px 22px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s;
}
.mode-card:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:0 10px 26px rgba(14,16,32,.08);}
.mode-card .name{font-size:16px; font-weight:600;}
.mode-card .srcs{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-3);}
.mode-card.custom{background:transparent; border:1px dashed var(--border-strong); box-shadow:none; justify-content:center;}
.mode-card.custom .name{color:var(--accent);}
.mode-card.custom .srcs{font-family:'Instrument Sans',sans-serif; font-size:13px; color:var(--text-2);}
.modes-note{font-size:15px; line-height:1.6; color:var(--text-2); max-width:680px; margin-top:36px;}

/* ---------- Deux cartes valeurs ---------- */
.values{padding:84px 72px; display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1440px; margin:0 auto;}
.value-card{
  border:1px solid var(--border); border-radius:14px; padding:30px 32px;
  display:flex; flex-direction:column; gap:14px; background:var(--bg-raised); box-shadow:var(--shadow);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.value-card:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(14,16,32,.09);}
.value-card .t{font-size:19px; font-weight:600;}
.value-card p{font-size:15.5px; line-height:1.65; color:var(--text-2);}

/* ---------- Processus (nuit) ---------- */
.process{background:var(--ch-bg); position:relative;}
.process .section-pad{padding:88px 72px;}
.process h2{color:var(--ch-text);}
.process .kicker{color:var(--ch-logo);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px;}
.step{display:flex; flex-direction:column; gap:12px; padding-top:20px; position:relative;}
.step::before{
  content:""; position:absolute; top:0; left:0; height:1px; width:0%;
  background:linear-gradient(90deg, var(--ch-logo), var(--ch-border));
  transition:width 1.2s var(--ease-out);
}
.steps.in .step::before{width:100%;}
.steps.in .step:nth-child(2)::before{transition-delay:.25s;}
.steps.in .step:nth-child(3)::before{transition-delay:.5s;}
.step .n{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ch-logo);}
.step .t{font-size:18px; font-weight:600; color:var(--ch-text);}
.step p{font-size:15px; line-height:1.65; color:var(--ch-text-2);}
.cta-band{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--ch-bg-2); border:1px solid var(--ch-border); border-radius:14px;
  padding:26px 30px; margin-top:44px;
}
.cta-band .t{font-size:17px; font-weight:600; color:var(--ch-text); display:block;}
.cta-band .s{font-size:14.5px; color:var(--ch-text-2);}

/* ---------- Footer ---------- */
footer{padding:44px 72px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); max-width:1440px; margin:0 auto; flex-wrap:wrap; gap:18px;}
footer .left{display:flex; align-items:center; gap:10px;}
footer .left .logo-txt{font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.14em;}
footer .left .meta{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-3); margin-left:10px;}
footer .links{display:flex; align-items:center; gap:24px; font-size:14px; color:var(--text-2);}
footer .links a{text-decoration:none; transition:color .25s;}
footer .links a:hover{color:var(--text);}

/* ---------- Démonstration : l'enquête en direct — « la salle des machines » (V7, globe + beams) ---------- */
.enq-block{margin-top:48px;}
.enq-title{display:flex; align-items:baseline; gap:14px; margin-bottom:16px; flex-wrap:wrap;}
.enq-title h3{font-size:22px; font-weight:700; letter-spacing:-.01em;}
.enq-title .note{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-3);}
.enq-replay{
  margin-left:auto; border:1px solid var(--border); background:transparent; color:var(--text-2);
  font-family:'IBM Plex Mono',monospace; font-size:11px; border-radius:7px; padding:6px 12px; cursor:pointer;
  transition:color .25s, border-color .25s;
}
.enq-replay:hover{color:var(--accent); border-color:var(--accent);}

/* ── Le panneau « salle des machines » : la machine sombre à gauche, le document clair à droite ── */
.enq{
  position:relative;
  display:grid; grid-template-columns:1.08fr 1fr;
  background:var(--ch-bg); border:1px solid var(--ch-border); border-radius:18px;
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.enq::before{ /* respiration lumineuse en haut de la scène */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(58% 44% at 30% 0%, rgba(125,137,255,.10), transparent 70%);
}
.enq-scene{position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; padding:16px 16px 44px; min-height:568px;}
.enq-act{
  position:absolute; top:14px; left:16px; z-index:8; pointer-events:none;
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.2em; color:var(--ch-text-2);
  display:flex; align-items:center; gap:7px; opacity:0; transition:opacity .45s;
}
.enq-act.on{opacity:1;}
.enq-act::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--ch-logo); box-shadow:0 0 8px rgba(125,137,255,.9); flex-shrink:0;}
.enq-act.coral::before{background:var(--coral-vif); box-shadow:0 0 8px rgba(255,107,74,.9);}

.enq-q{
  align-self:center; margin-top:24px; width:min(430px, 94%); text-align:center;
  background:var(--ch-bg-2); border:1px solid var(--ch-border); border-radius:11px;
  padding:11px 14px; font-size:12.5px; line-height:1.5; color:var(--ch-text);
  opacity:0; translate:0 10px; transition:opacity .5s var(--ease-out), translate .5s var(--ease-out);
  position:relative; z-index:4;
}
.enq-q.on{opacity:1; translate:0 0;}
.enq-q .lbl, .enq-sq .lbl{display:block; font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.14em; color:var(--ch-logo); margin-bottom:4px;}
.enq-sqs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; position:relative; z-index:4;}
.enq-sq{
  background:rgba(21,23,31,.92); border:1px solid var(--ch-border); border-radius:10px;
  padding:9px 11px; font-size:10.5px; line-height:1.45; color:var(--ch-text-2);
  opacity:0; translate:0 10px;
  transition:opacity .5s var(--ease-out), translate .5s var(--ease-out), border-color .35s, box-shadow .35s, color .35s;
}
.enq-sq.on{opacity:1; translate:0 0;}
.enq-sq.hot{border-color:rgba(125,137,255,.75); box-shadow:0 0 18px rgba(125,137,255,.22); color:var(--ch-text);}
.enq-sq .st{display:block; font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.05em; color:var(--ch-text-2); margin-top:5px; opacity:.85;}
.enq-sq .st.done{color:#3DCF8E;}
.enq-sq.newq{border-color:rgba(255,107,74,.55); background:rgba(26,20,19,.92);}
.enq-sq.newq .lbl{color:var(--coral-vif);}
.enq-sq.newq.hot{border-color:var(--coral-vif); box-shadow:0 0 18px rgba(255,107,74,.25);}

/* Le globe : port canvas du composant « Interactive Globe » (21st.dev) */
.enq-globe-wrap{position:relative; flex:1; min-height:300px; z-index:2;}
#enqGlobe{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:pan-y;}
#enqGlobe:active{cursor:grabbing;}

/* Faisceaux (port du « Animated Beam » MagicUI) par-dessus la scène */
.enq-beams{position:absolute; inset:0; z-index:5; pointer-events:none; overflow:visible;}

/* Flux des sources trouvées, au-dessus du globe */
.enq-feed{
  position:absolute; left:12px; bottom:6px; z-index:6; pointer-events:none;
  display:flex; flex-direction:column-reverse; gap:6px; max-width:62%;
}
.fchip{
  display:flex; align-items:center; gap:7px; width:fit-content;
  background:rgba(16,18,24,.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--ch-border); border-radius:7px; padding:4px 9px;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:#B9BECF; white-space:nowrap;
  animation:fchipin .38s var(--ease-out) backwards;
  transition:opacity .5s;
}
.fchip::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--ch-logo); box-shadow:0 0 7px rgba(125,137,255,.8); flex-shrink:0;}
.fchip.coral::before{background:var(--coral-vif); box-shadow:0 0 7px rgba(255,107,74,.8);}
.fchip.old{opacity:.34;}
@keyframes fchipin{from{opacity:0; transform:translateY(7px) scale(.94);}}

/* Nouvelles questions découvertes : surgissent au-dessus du globe */
.enq-nqs{position:absolute; right:8px; top:6px; z-index:6; display:flex; flex-direction:column; gap:8px; width:min(200px, 48%);}
.enq-nqs .enq-sq{font-size:10px;}

.enq-status{
  position:absolute; left:50%; transform:translateX(-50%); bottom:13px; width:92%; z-index:8; pointer-events:none;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em;
  color:var(--ch-text-2); text-align:center; transition:color .4s;
}
.enq-status.done{color:#3DCF8E;}
.enq-status.coral{color:var(--coral-crest);}

/* ── Colonne document : le rapport propre qui sort de la machine ── */
.enq-build{position:relative; z-index:1; background:var(--bg-raised); border-left:1px solid var(--ch-border); padding:18px 20px 20px; display:flex; flex-direction:column; gap:11px;}
.enq-bh{
  display:flex; align-items:baseline; gap:10px; font-family:'IBM Plex Mono',monospace;
  font-size:10px; letter-spacing:.16em; color:var(--text-3);
  padding-bottom:9px; border-bottom:1px solid var(--border);
}
.enq-bh b{color:var(--accent); font-weight:500; margin-left:auto;}
.enq-sec{position:relative; border:1px solid var(--border); border-radius:10px; padding:10px 12px; opacity:0; transition:border-color .4s, opacity .4s;}
.enq-sec .bt{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text);}
.enq-sec .bt .mk{font-family:'IBM Plex Mono',monospace; font-size:10px; width:13px; color:var(--text-3); transition:color .3s;}
.enq-sec.writing{opacity:1; border-color:rgba(46,60,242,.35);}
.enq-sec.done{opacity:1;}
.enq-sec.done .bt .mk{color:var(--ok);}
.enq-sec.zap{border-color:var(--accent);}
.enq-sec .cites{display:flex; gap:5px; margin-top:8px; flex-wrap:wrap; opacity:0; transition:opacity .5s;}
.enq-sec.done .cites{opacity:1;}
.enq-sec .cites span{font-family:'IBM Plex Mono',monospace; font-size:8.5px; color:var(--accent); border:1px solid var(--border); border-radius:5px; padding:2px 6px;}

/* Border Beam (port MagicUI) : la lumière qui court le long du chapitre en rédaction */
.enq-sec .bbeam{
  pointer-events:none; position:absolute; inset:0; border-radius:inherit;
  border:1.5px solid transparent; opacity:0; transition:opacity .35s;
  -webkit-mask:linear-gradient(transparent,transparent), linear-gradient(#fff,#fff);
  mask:linear-gradient(transparent,transparent), linear-gradient(#fff,#fff);
  -webkit-mask-clip:padding-box, border-box; mask-clip:padding-box, border-box;
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.enq-sec .bbeam::after{
  content:""; position:absolute; aspect-ratio:1; width:90px;
  background:linear-gradient(to left, var(--coral-crest), var(--accent), transparent);
  offset-path:rect(0 auto auto 0 round 10px); offset-anchor:90% 50%;
  animation:enqbbeam 3.2s linear infinite paused;
}
.enq-sec.writing .bbeam{opacity:1;}
.enq-sec.writing .bbeam::after{animation-play-state:running;}
@keyframes enqbbeam{to{offset-distance:100%;}}
@supports not (offset-path: rect(0px 0px auto auto)){
  .enq-sec .bbeam{display:none;}
  .enq-sec.writing{border-color:var(--accent);}
}

.enq-final{
  text-align:center; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  color:var(--text); border:1px solid var(--accent); border-radius:8px; padding:10px; margin-top:auto;
  opacity:0; transition:opacity .6s;
}
.enq-final.on{opacity:1; box-shadow:0 0 22px rgba(46,60,242,.15);}
.enq-final .okk{color:var(--ok);}

/* Version mobile : le plan du rapport, sous la scène sombre */
.enq-mob{display:none; background:var(--bg-raised); border-top:1px solid var(--ch-border); padding:14px 14px 16px;}
.enq-mob-head{
  display:flex; align-items:baseline; gap:10px; font-family:'IBM Plex Mono',monospace;
  font-size:10px; letter-spacing:.14em; color:var(--text-3);
  padding:2px 2px 10px; border-bottom:1px solid var(--border); margin-bottom:12px;
}
.enq-mob-head b{color:var(--accent); font-weight:500; margin-left:auto;}
.enq-plan{display:flex; flex-direction:column; gap:6px;}
.plan-row{
  display:flex; align-items:center; gap:9px;
  border:1px solid var(--border); border-radius:8px; padding:8px 11px;
  font-size:12.5px; color:var(--text-2); opacity:.4;
  transition:opacity .5s, background .5s, border-color .5s, color .5s;
}
.plan-row .mk{font-family:'IBM Plex Mono',monospace; font-size:10px; width:13px; color:var(--text-3); flex-shrink:0;}
.plan-row.on{
  opacity:1; background:var(--accent-soft); border-color:transparent; color:var(--text);
  animation:rowpop .5s var(--ease-out);
}
.plan-row.on .mk{color:var(--ok);}
@keyframes rowpop{from{transform:scale(.96);}}
.plan-final{
  margin-top:12px; text-align:center; font-family:'IBM Plex Mono',monospace;
  font-size:10.5px; letter-spacing:.08em; color:var(--text);
  border:1px solid var(--accent); border-radius:8px; padding:10px;
  opacity:0; transition:opacity .6s;
}
.plan-final.on{opacity:1; box-shadow:0 0 18px rgba(46,60,242,.15);}
.plan-final .okk{color:var(--ok);}
/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .scrollread{font-size:18px; line-height:1.7;}
  .nav-inner{padding:14px 28px;}
  .nav-links{gap:14px;}
  .nav-links a:not(.login){display:none;}
  .burger{display:flex;}
  .hero-grid{grid-template-columns:1fr; padding:56px 28px 72px 28px; gap:44px;}
  /* Démo clairement encadrée sur mobile */
  .proof{border:1px solid var(--ch-border); border-radius:18px; padding:16px; background:rgba(46,60,242,.05);}
  .demo-tag{display:flex !important;}
  .popover{position:relative; top:auto !important; left:auto !important; width:auto; margin-top:14px; transform:none;}
  .popover::before{left:40px !important;}
  .popover:not(.show){display:none;}
  .cite-hint .desk{display:none;}
  .cite-hint .mob{display:inline;}
  .section-pad, .modes-band .section-pad, .process .section-pad{padding:72px 28px 56px 28px;}
  .values{padding:56px 28px; grid-template-columns:1fr;}
  .compare{grid-template-columns:1fr;}
  .enq{grid-template-columns:1fr;}
  .enq-scene{min-height:0; padding-bottom:40px;}
  .enq-globe-wrap{min-height:min(80vw, 350px);}
  .enq-build{display:none;}
  .enq-mob{display:block;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .modes-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr;}
  .cta-band{flex-direction:column; align-items:flex-start;}
  footer{padding:36px 28px;}
}
@media (max-width:640px){
  .stats{grid-template-columns:1fr;}
  .modes-grid{grid-template-columns:1fr;}
  .hero-copy h1{font-size:32px;}
}

/* ============================================================
   REFONTE V2 — fraîcheur DA : particules, spotlight, offre
   ============================================================ */

/* ---------- Barre de progression de lecture ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2.5px; width:0%; z-index:200;
  background:linear-gradient(90deg, var(--ch-logo), var(--coral-vif));
  box-shadow:0 0 12px rgba(255,107,74,.5);
  transition:width .1s linear;
}

/* ---------- Halo qui suit le curseur (visible seulement sur les zones sombres via screen) ---------- */
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; z-index:3;
  margin:-260px 0 0 -260px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(110,123,255,.16), rgba(110,123,255,.05) 45%, transparent 72%);
  mix-blend-mode:screen; opacity:0; transition:opacity .5s ease;
  will-change:transform;
}
.cursor-glow.on{opacity:1;}

/* ---------- Champ de particules du hero (flow-field) ---------- */
#heroField{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.9; mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
}

/* ---------- Logo « dust » (emblème du hero, particules Three.js) ---------- */
.dust-logo{
  position:relative; width:min(500px,100%); height:132px; margin:-8px 0 2px -6px;
}
.dust-logo canvas{display:block; width:100%; height:100%;}
.dust-fallback{position:absolute; left:6px; top:50%; transform:translateY(-50%); width:min(360px,88%); height:auto; opacity:1; transition:opacity .8s ease;}
.dust-logo.live .dust-fallback{opacity:0;}

/* Titre hero : dégradé plus riche + respiration */
.hero-copy h1 .grad{
  background:linear-gradient(96deg, #6E7BFF 0%, #A7B0FF 42%, #C9CFFF 52%, #A7B0FF 62%, #6E7BFF 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ---------- Boutons : lueur magnétique du primaire ---------- */
.btn-primary{background:linear-gradient(180deg, #6E7BFF, var(--ch-logo)); box-shadow:0 6px 20px rgba(94,109,255,.28);}
.btn-primary:hover{box-shadow:0 14px 34px rgba(94,109,255,.42);}
.btn.magnetic{transition:transform .18s var(--ease-out), box-shadow .3s var(--ease-out), background .25s;}

/* ---------- Section OFFRE (nuit, moment « découverte » corail) ---------- */
.offer{background:var(--ch-bg); position:relative; overflow:hidden; border-top:1px solid var(--ch-border);}
.offer::before{ /* halo corail diffus */
  content:""; position:absolute; width:760px; height:760px; top:-40%; left:50%;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,107,74,.14), transparent 70%);
}
.offer .section-pad{padding:104px 72px 112px; position:relative; z-index:2;}
.offer-head{max-width:680px; margin:0 auto; text-align:center; align-items:center;}
.offer-head .kicker{color:var(--coral-vif); letter-spacing:.24em;}
.offer-head h2{color:var(--ch-text); font-size:clamp(30px,3vw,40px);}
.offer-head p{color:var(--ch-text-2); font-size:17px;}

.voucher{
  display:grid; grid-template-columns:290px 1fr; margin:52px auto 0; max-width:860px;
  background:linear-gradient(180deg, #151A45, #10143A);
  border:1px solid var(--ch-border); border-radius:var(--r-xl);
  box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative; overflow:hidden;
}
.voucher::after{ /* liseré corail supérieur */
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--coral-vif) 30%, var(--coral-crest) 50%, var(--coral-vif) 70%, transparent);
}
/* Stub gauche : le grand chiffre */
.voucher-stub{
  position:relative; padding:44px 30px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; text-align:center;
  background:radial-gradient(120% 90% at 50% 20%, rgba(255,107,74,.16), transparent 68%);
}
.voucher-stub .vs-label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.22em; color:var(--coral-vif); margin-bottom:8px;}
.voucher-stub .vs-num{
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:104px; line-height:.9;
  color:var(--ch-text); font-variant-numeric:tabular-nums;
  text-shadow:0 0 40px rgba(255,107,74,.35);
}
.voucher-stub .vs-unit{font-family:'IBM Plex Mono',monospace; font-size:15px; letter-spacing:.14em; color:var(--ch-text-2); text-transform:uppercase;}
/* Perforation de ticket */
.voucher-stub::after{
  content:""; position:absolute; top:14px; bottom:14px; right:-1px; width:2px;
  background-image:radial-gradient(circle, var(--ch-border) 1.4px, transparent 1.5px);
  background-size:2px 13px; background-repeat:repeat-y;
}
/* Corps droit : valeur + CTA */
.voucher-body{padding:38px 40px; display:flex; flex-direction:column; gap:14px; justify-content:center;}
.vb-value{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.vb-approx{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em; color:var(--ch-text-2); text-transform:uppercase;}
.vb-eur{font-size:34px; font-weight:700; color:var(--coral-vif); letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
.vb-eur .strike{color:var(--ch-text-2); font-weight:400; font-size:19px; text-decoration:line-through; margin-left:4px; opacity:.6;}
.vb-note{font-size:14px; color:var(--ch-text-2);}
.vb-desc{font-size:15px; line-height:1.6; color:var(--ch-text-2); max-width:420px;}
.vb-cta{margin-top:6px; align-self:flex-start; background:linear-gradient(180deg, var(--coral-crest), var(--coral-vif)); box-shadow:0 8px 26px rgba(255,107,74,.34);}
.vb-cta:hover{box-shadow:0 16px 40px rgba(255,107,74,.5);}
.vb-foot{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-3); letter-spacing:.03em; color:var(--ch-text-2); opacity:.7;}

@media (max-width:760px){
  .offer .section-pad{padding:72px 24px 84px;}
  .voucher{grid-template-columns:1fr; max-width:440px;}
  .voucher-stub{padding:34px 24px 26px;}
  .voucher-stub .vs-num{font-size:84px;}
  .voucher-stub::after{top:auto; bottom:-1px; left:14px; right:14px; width:auto; height:2px; background-image:radial-gradient(circle, var(--ch-border) 1.4px, transparent 1.5px); background-size:13px 2px; background-repeat:repeat-x;}
  .voucher-body{padding:30px 26px 32px;}
  .dust-logo{height:112px;}
  .vb-cta{align-self:stretch; justify-content:center;}
}

/* ============================================================
   INTRO — voyage scrollé : cosmos fixe qui avance + dust qui se forme,
   puis la landing (#page) remonte réellement par le bas.
   ============================================================ */
#space{position:fixed; inset:0; z-index:1; background:#05070E;}
#space canvas{display:block; width:100%; height:100%;}
#dustStage{position:fixed; inset:0; z-index:4; pointer-events:none; display:flex; align-items:center; justify-content:center; will-change:transform,opacity;}
#voyageLogo{width:min(1120px,96vw); height:min(52vh,470px);}
#voyageLogo canvas{display:block; width:100%; height:100%;}
#introScroll{position:relative; z-index:0; height:540vh; background:#05070E;}   /* salle de scroll sombre de l'intro */
#page{position:relative; z-index:2; background:var(--bg);}       /* la landing (au-dessus du cosmos) remonte par le bas */
.intro-skip{
  position:fixed; top:24px; right:28px; z-index:6;
  background:rgba(8,11,21,.5); border:1px solid rgba(125,137,255,.38); color:#B7C0FF;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em;
  padding:8px 15px; border-radius:7px; cursor:pointer; transition:all .25s;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.intro-skip:hover{border-color:#7D89FF; color:#fff; background:rgba(125,137,255,.16);}
.intro-hint{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:6; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.3em; color:#6B7392; pointer-events:none; transition:opacity .6s ease;}
.intro-hint::after{content:""; display:block; width:1px; height:26px; margin:8px auto 0; background:linear-gradient(#6B7392, transparent);}
html.intro-done #space, html.intro-done #dustStage, html.intro-done #acts, html.intro-done .intro-skip, html.intro-done .intro-hint{display:none !important;}
html.no-intro #space, html.no-intro #dustStage, html.no-intro #acts, html.no-intro .intro-skip, html.no-intro .intro-hint{display:none !important;}
html.no-intro #introScroll{height:0 !important;}
#pageDust{position:fixed; inset:0; z-index:3; pointer-events:none;}
#pageDust canvas{display:block; width:100%; height:100%;}
html.intro-done #pageDust, html.no-intro #pageDust{display:none !important;}
/* Panneau de réglage (dev) — visible seulement en ?intro, masqué à l'arrivée */
#tuner{position:fixed; left:20px; bottom:20px; z-index:7; display:none; width:246px; padding:14px 16px 12px;
  background:rgba(8,11,21,.82); border:1px solid rgba(125,137,255,.28); border-radius:12px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-family:'IBM Plex Mono',monospace; color:#B7C0FF; box-shadow:0 12px 40px rgba(0,0,0,.5);}
#tuner.on{display:block;}
#tuner h4{font-size:10px; letter-spacing:.2em; color:#7D89FF; margin:0 0 12px; font-weight:500;}
#tuner .row{margin-bottom:11px;}
#tuner .row label{display:flex; justify-content:space-between; font-size:10.5px; color:#9AA3C8; margin-bottom:5px;}
#tuner .row label b{color:#EAECFB; font-weight:500;}
#tuner input[type=range]{width:100%; accent-color:#7D89FF; height:4px; cursor:pointer;}
#tuner .btns{display:flex; gap:8px; margin:2px 0 8px;}
#tuner .btns button{flex:1; font-family:inherit; font-size:10px; letter-spacing:.06em; color:#EAECFB; background:rgba(125,137,255,.16); border:1px solid rgba(125,137,255,.35); border-radius:6px; padding:8px 4px; cursor:pointer; transition:all .2s;}
#tuner .btns button:hover{background:rgba(125,137,255,.28); border-color:#7D89FF;}
#tuner .btns .prim{background:linear-gradient(180deg,#A7B0FF,#7D89FF); color:#0B0F1A; border:none; font-weight:500;}
#tuner .copy{width:100%; font-family:inherit; font-size:9.5px; letter-spacing:.06em; color:#9AA3C8; background:transparent; border:1px solid rgba(125,137,255,.22); border-radius:6px; padding:6px 4px; cursor:pointer;}
#tuner .copy:hover{color:#EAECFB; border-color:#7D89FF;}


/* ============================================================
   IDENTITÉ « LE DOSSIER » — papier, cotes, surligneur, rail
   ============================================================ */
.scroll-progress{background:var(--accent); box-shadow:none;}
.btn{border-radius:8px;}
.btn-primary{background:var(--accent); box-shadow:0 4px 16px rgba(46,60,242,.22);}
.btn-primary:hover{background:var(--accent-strong); box-shadow:0 10px 26px rgba(46,60,242,.3);}
.btn-ghost-ink{background:transparent; border:1px solid var(--border-strong); color:var(--text); font-weight:500;}
.btn-ghost-ink:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}

/* Têtes de section : filet + cote + serif */
.section-pad .section-head{border-top:1px solid var(--border-strong); padding-top:20px; max-width:820px;}
.section-head h2{font-family:'Spectral',serif; font-weight:300; font-size:clamp(30px,3.4vw,44px); letter-spacing:0; line-height:1.16; max-width:22ch;}
.section-head .kicker{font-size:11px; letter-spacing:.22em;}

/* Le geste de marque : surlignage bleu balayé */
.hl{background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat;
  background-size:0% 92%; background-position:0 55%; padding:0 8px; margin:0 -2px; border-radius:3px;
  transition:background-size .7s var(--ease-out) .45s, color .25s ease .8s;}
.in .hl{background-size:100% 92%; color:#fff;}

/* Rail-sommaire du dossier (desktop) */
.rail{position:fixed; left:24px; top:50%; transform:translateY(-50%); z-index:50; display:none; flex-direction:column; gap:13px;}
html.intro-done .rail, html.no-intro .rail{display:flex;}
@media (max-width:1279px){.rail{display:none !important;}}
.rail a{display:flex; align-items:center; gap:9px; text-decoration:none;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; color:var(--text-3); transition:color .25s;}
.rail a i{display:block; width:16px; height:1px; background:var(--border-strong); transition:width .25s, background .25s;}
.rail a:hover{color:var(--text-2);}
.rail a.active{color:var(--accent);}
.rail a.active i{background:var(--accent); width:28px;}

/* Actes flottants de l'ouverture */
#acts{position:fixed; inset:0; z-index:3; pointer-events:none;}
.vact{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 24px; opacity:0; will-change:transform,opacity;}
.vact .vt{font-family:'Spectral',serif; font-weight:300; font-size:clamp(32px,5.6vw,68px); line-height:1.18; letter-spacing:-.01em; color:#EAECFB;}
.vact .vmark{background:var(--accent); color:#fff; padding:0 14px; border-radius:5px;}
.vact .vs{margin-top:24px; font-size:clamp(14.5px,1.7vw,18px); line-height:1.6; color:#8A93BE; max-width:620px;}
.vact .vm{margin-top:18px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.24em; color:#7D89FF;}
html.intro-done #acts, html.no-intro #acts{display:none !important;}

/* Couverture du dossier (pièce 01) */
.cover{background:var(--bg); border-bottom:1px solid var(--border);}
.cover-pad{padding:92px 72px 108px; max-width:1440px; margin:0 auto;}
.cover-grid{display:grid; grid-template-columns:1.04fr 1fr; gap:64px; align-items:center;}
.cover-copy{display:flex; flex-direction:column; gap:24px;}
.cover-copy h1{font-family:'Spectral',serif; font-weight:300; font-size:clamp(34px,3.8vw,54px); line-height:1.14; letter-spacing:-.01em; color:var(--text);}
.cover-copy p{font-size:17px; line-height:1.66; color:var(--text-2); max-width:54ch;}
.cover-cta{display:flex; gap:14px; flex-wrap:wrap;}
.cover-meta{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-3); letter-spacing:.04em;}

/* Processus sur papier */
.process-doc .section-pad{padding:96px 72px 88px;}
.process-doc .step::before{background:linear-gradient(90deg,var(--accent),var(--border));}
.process-doc .step .n{color:var(--accent);}
.process-doc .step .t{color:var(--text);}
.process-doc .step p{color:var(--text-2);}
.process-doc .cta-band{background:var(--bg-inset); border:1px solid var(--border);}
.process-doc .cta-band .t{color:var(--text);}
.process-doc .cta-band .s{color:var(--text-2);}

/* Garanties (pièce 05) */
.gar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px;}

/* Bordereau d'essai (pièce 06) */
.bordereau{display:grid; grid-template-columns:auto 1fr auto; gap:48px; align-items:center; margin-top:44px;
  background:var(--bg-raised); border:1px solid var(--border-strong); border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0; padding:40px 46px;}
.bd-num{display:flex; flex-direction:column; align-items:center; gap:6px; padding-right:44px; border-right:1px dashed var(--border-strong);}
.bd-num .n{font-family:'IBM Plex Mono',monospace; font-size:100px; line-height:.9; color:var(--accent); font-variant-numeric:tabular-nums;}
.bd-num .u{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em; color:var(--text-3); text-transform:uppercase;}
.bd-line{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.bd-approx{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.18em; color:var(--text-3);}
.bd-eur{font-size:34px; font-weight:700; color:var(--accent); letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
.bd-note{font-size:14px; color:var(--text-2);}
.bd-desc{font-size:15px; line-height:1.6; color:var(--text-2); max-width:48ch; margin-top:10px;}
.bd-foot{display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-3); margin-top:12px;}
.bd-side{display:flex; flex-direction:column; align-items:center; gap:18px;}
.bd-stamp{transform:rotate(-5deg); border:1.5px solid var(--accent); color:var(--accent); border-radius:6px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.2em; text-align:center; padding:10px 14px; line-height:1.7;}
@media (max-width:900px){
  .bordereau{grid-template-columns:1fr; gap:26px; text-align:center; padding:32px 24px;}
  .bd-num{border-right:none; border-bottom:1px dashed var(--border-strong); padding:0 0 22px;}
  .bd-line{justify-content:center;}
  .bd-desc{margin-left:auto; margin-right:auto;}
  .bd-side{width:100%;}
  .bd-side .btn{width:100%; justify-content:center;}
}

/* FAQ (pièce 07) */
.faq-list{max-width:780px; margin-top:40px; border-top:1px solid var(--border);}
.faq-list details{border-bottom:1px solid var(--border);}
.faq-list summary{cursor:pointer; font-weight:600; font-size:15.5px; color:var(--text);
  padding:18px 40px 18px 0; list-style:none; position:relative;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color:var(--accent); font-family:'IBM Plex Mono',monospace; font-size:20px;}
.faq-list details[open] summary::after{content:'−';}
.faq-list p{color:var(--text-2); font-size:15px; line-height:1.68; padding:0 44px 20px 0; max-width:68ch;}

@media (max-width:1100px){
  .cover-pad{padding:60px 28px 72px;}
  .cover-grid{grid-template-columns:1fr; gap:44px;}
  .gar-grid{grid-template-columns:1fr; gap:16px;}
}

/* ---------- Démo enquête : texte génératif (mots défloutés) + odomètre ---------- */
.enq-sec .etext{font-family:'Spectral',serif; font-size:12.5px; line-height:1.62; color:var(--text-2); margin-top:7px; min-height:2.7em;}
.enq-sec .etext .ew{opacity:0; filter:blur(5px); display:inline-block; transform:translateY(2px);
  transition:opacity .38s ease, filter .38s ease, transform .38s ease;}
.enq-sec .etext .ew.on{opacity:1; filter:blur(0); transform:none;}
.enq-sec.writing .etext::after{content:"▍"; color:var(--accent); font-size:11px; animation:ecaret 1s steps(1) infinite;}
@keyframes ecaret{50%{opacity:0;}}
.enq-sec .cites span{opacity:0; transform:translateY(4px); transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);}
.enq-sec.done .cites span{opacity:1; transform:none;}
.enq-sec.done .cites span:nth-child(2){transition-delay:.12s;}
.enq-sec.done .cites span:nth-child(3){transition-delay:.24s;}
.odo{display:inline-flex; height:1em; overflow:hidden; vertical-align:-0.14em; font-variant-numeric:tabular-nums;}
.odo i{display:block; font-style:normal; transition:transform .55s cubic-bezier(.3,1.35,.45,1);}
.odo i span{display:block; height:1em; line-height:1em;}
.enq-final.on{animation:rowpop .5s var(--ease-out);}
/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important;}
  html{scroll-behavior:auto;}
  .enter, .reveal, [data-stagger] > *{opacity:1; transform:none;}
  #heroField, .cursor-glow, .scroll-progress{display:none !important;}
  .dust-fallback{opacity:1 !important;}
}

/* ── Ajouts d'intégration (hors proto) ─────────────────────────────────── */
/* Switch de langue FR/EN (repris de la landing v1, palette nav sombre) */
.lang-switcher{position:relative;display:inline-flex}
.lang-flag{font-size:17px;line-height:1}
.lang-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--ch-text-2);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:color .15s,background .15s}
.lang-btn:hover,.lang-btn:focus-visible{color:var(--ch-text);background:var(--ch-bg-2);outline:none}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:70;display:flex;flex-direction:column;gap:2px;min-width:160px;padding:4px;background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);color:var(--text)}
.lang-option{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:7px;font-size:14px;color:var(--text)}
.lang-option:hover{background:var(--bg-inset)}
.lang-option.active{color:var(--accent);font-weight:600}
/* Bandeau maintenance (admin) */
.maintenance-strip{display:flex;align-items:center;justify-content:center;gap:8px;background:#7f1d1d;color:#fff;font-size:13px;font-weight:500;text-align:center;padding:10px 16px}
/* L'attribut hidden doit gagner sur display:flex (fix menu de langue bloqué ouvert) */
.lang-menu[hidden]{display:none}
/* La carte « Créez le vôtre » est un lien : pas de soulignement ni de couleur lien */
a.mode-card{text-decoration:none;color:inherit}

/* Lien « guide complet » sous les étapes du processus → page /comment-ca-marche */
.steps-more{margin-top:26px; font-size:15px;}
.steps-more a{color:var(--accent); text-decoration:none; font-weight:600;}
.steps-more a:hover{text-decoration:underline;}