/* =============================================================
   MYSTIC — Landing page
   Direction artistique : « Signal in the Dark »
   Le noir est du vide instrumenté ; le vert n'apparaît
   que là où le système perçoit quelque chose.
   ============================================================= */

/* ---------- 0. POLICES ----------
   Auto-hébergées (licence SIL OFL) : aucune requête vers un tiers, donc
   aucune adresse IP transmise à Google. Polices variables, sous-ensembles
   latin et latin-ext uniquement (français, espagnol).                  */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('../fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- 1. TOKENS ---------- */
:root{
  /* Profondeur */
  --void:        #03060A;
  --abyss:       #05090E;
  --surface:     #080D13;
  --surface-2:   #0B1219;
  --surface-3:   #0F1822;
  --line:        #16212B;
  --line-soft:   #111a23;

  /* Signal */
  --signal:      #00E887;
  --signal-lo:   #00A862;
  --signal-hi:   #7CFFC4;
  --flux:        #2BE8F5;
  --neural:      #7C5CFF;
  --warn:        #FFB020;
  --crit:        #FF4D6D;

  /* Texte */
  --fg:          #E8F2EC;
  --fg-2:        #A8B6C2;
  --muted:       #6F7F8C;
  --faint:       #46535E;

  /* Dégradés signature */
  --grad-signal: linear-gradient(100deg, var(--signal-hi) 0%, var(--signal) 42%, var(--flux) 78%, var(--neural) 100%);
  --grad-soft:   linear-gradient(135deg, rgba(0,232,135,.14), rgba(43,232,245,.08) 55%, rgba(124,92,255,.12));

  /* Lueurs */
  --glow-signal: 0 0 0 1px rgba(0,232,135,.20), 0 8px 30px -8px rgba(0,232,135,.45), 0 0 60px -20px rgba(0,232,135,.6);
  --glow-soft:   0 20px 60px -30px rgba(0,232,135,.35);

  /* Typo */
  --f-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Rythme */
  --gut: clamp(20px, 4vw, 40px);
  --sec-y: clamp(80px, 11vw, 168px);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Courbes */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-io:   cubic-bezier(.65,0,.35,1);

  --nav-h: 72px;
  color-scheme: dark;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family: var(--f-body);
  font-size: clamp(15px, .38vw + 14px, 17px);
  line-height: 1.65;
  color: var(--fg-2);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,canvas{ display:block; max-width:100%; }
svg{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; padding:0; }
h1,h2,h3,h4{ font-family: var(--f-display); color: var(--fg); line-height:1.08; letter-spacing:-.022em; font-weight:600; }
::selection{ background: rgba(0,232,135,.26); color:#fff; }

:focus-visible{
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. UTILITAIRES ---------- */
.container{ width:min(1240px, 100% - (var(--gut) * 2)); margin-inline:auto; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.skip-link{
  position:fixed; top:10px; left:10px; z-index:200;
  transform: translateY(-160%);
  background: var(--signal); color:#031109; font-weight:600;
  padding:10px 18px; border-radius:8px;
  transition: transform .25s var(--ease);
}
.skip-link:focus{ transform:none; }

.grad{
  background: var(--grad-signal);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family: var(--f-mono); font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color: var(--signal); margin-bottom:22px;
}
.eyebrow__bar{
  width:34px; height:1px; flex:none;
  background: linear-gradient(90deg, var(--signal), transparent);
}
.sec-head{ max-width:62ch; margin-bottom: clamp(44px, 6vw, 76px); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .eyebrow{ justify-content:center; }
.sec-head h2{ font-size: clamp(30px, 4.4vw, 56px); }
.sec-lead{ margin-top:20px; font-size: clamp(16px, 1.05vw, 18.5px); color: var(--fg-2); max-width:58ch; }
.sec-head--center .sec-lead{ margin-inline:auto; }
.sec-lead a{ color:var(--signal); border-bottom:1px solid rgba(0,232,135,.3); }

.section{ padding-block: var(--sec-y); position:relative; }

/* Boutons */
.btn{
  --bh: 46px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height: var(--bh); padding:0 22px;
  font-family: var(--f-body); font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  border-radius: 999px; white-space:nowrap; isolation:isolate;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn svg{ width:16px; height:16px; flex:none; transition: transform .35s var(--ease-out); }
.btn:hover svg{ transform: translateX(3px); }
.btn--sm{ --bh:40px; padding:0 18px; font-size:13.5px; }
.btn--lg{ --bh:54px; padding:0 30px; font-size:15.5px; }
.btn--full{ width:100%; }

.btn--primary{
  color:#02130B;
  background: var(--grad-signal);
  background-size: 180% 100%;
  background-position: 0% 50%;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 34px -14px rgba(0,232,135,.85);
}
.btn--primary:hover{
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 16px 44px -14px rgba(0,232,135,.95);
}
.btn--primary:active{ transform: translateY(0); }

.btn--ghost{
  color: var(--fg);
  border:1px solid var(--line);
  background: rgba(255,255,255,.015);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover{
  border-color: rgba(0,232,135,.45);
  background: rgba(0,232,135,.07);
  color:#fff;
  transform: translateY(-2px);
}

.live-dot{
  width:6px; height:6px; border-radius:50%; background:var(--signal); display:inline-block; flex:none;
  box-shadow:0 0 8px var(--signal);
  animation: breathe 2s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.45; transform:scale(.82);} }
.blink{ animation: blink 1.1s steps(1) infinite; }
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px; margin-top:32px;
  font-weight:600; font-size:15px; color: var(--signal);
}
.link-arrow svg{ width:15px; transition: transform .35s var(--ease-out); }
.link-arrow:hover svg{ transform: translateX(4px); }

/* Révélation au scroll */
.reveal{
  opacity:0; transform: translateY(22px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: calc(var(--rd, 0) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- 4. EFFETS GLOBAUX ---------- */
.fx-grain{
  /* -20 % suffit : le pas le plus large du déplacement fait 3 %. À -50 %
     le calque couvrait quatre fois la surface de l'écran. */
  position:fixed; inset:-20%; z-index:60; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
  will-change: transform;          /* calque dédié : les 6 pas ne repeignent plus la page dessous */
  contain: layout paint style;
}
/* Un calque plein écran par-dessus tout le site, pour 2,8 % d'opacité :
   sur mobile on paie le plus cher ce qui se voit le moins. */
@media (pointer: coarse){ .fx-grain{ display:none; } }
@keyframes grain{
  0%{transform:translate(0,0)} 16%{transform:translate(-3%,2%)} 33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,-2%)} 66%{transform:translate(3%,1%)} 83%{transform:translate(-1%,3%)} 100%{transform:translate(0,0)}
}
.fx-vignette{
  position:fixed; inset:0; z-index:59; pointer-events:none;
  background: radial-gradient(130% 90% at 50% 0%, transparent 42%, rgba(0,0,0,.55) 100%);
}
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120; pointer-events:none;
  background: rgba(255,255,255,.04);
}
.scroll-progress i{
  display:block; height:100%; width:0%;
  background: var(--grad-signal);
  box-shadow:0 0 14px rgba(0,232,135,.7);
}

/* ---------- 5. NAVIGATION ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  /* backdrop-filter retiré de la transition : animer un rayon de flou
     impose une repasse complète du fond à chaque image. */
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background: rgba(4,7,11,.93);
  border-bottom-color: var(--line-soft);
}
/* La barre est fixe : son flou d'arrière-plan est recalculé à chaque image
   de défilement. On le réserve au pointeur fin ; ailleurs, un fond plus
   opaque rend le même service pour zéro coût. */
@media (pointer: fine){
  .nav.is-stuck{
    background: rgba(4,7,11,.72);
    backdrop-filter: blur(16px) saturate(140%);
  }
}
.nav__inner{ height: var(--nav-h); display:flex; align-items:center; gap:28px; }

.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand__mark{ width:30px; height:30px; display:block; }
.brand__mark svg{ width:100%; height:100%; overflow:visible; }
.brand__mark svg > *{ transition: opacity .4s; }
.brand:hover .brand__mark svg{ animation: markScan 1.1s var(--ease) 1; }
@keyframes markScan{ 0%{ filter:drop-shadow(0 0 0 rgba(0,232,135,0)) } 45%{ filter:drop-shadow(0 0 7px rgba(0,232,135,.9)) } 100%{ filter:drop-shadow(0 0 0 rgba(0,232,135,0)) } }
.brand__word{
  font-family: var(--f-display); font-weight:700; font-size:18px;
  letter-spacing:.14em; color:#fff;
}
.brand__tag{
  font-family: var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  color: var(--signal); opacity:.75; align-self:flex-end; margin-bottom:4px;
}

.nav__links{ display:flex; align-items:center; gap:4px; margin-left:12px; }
.nav__links a{
  position:relative; padding:8px 14px; font-size:14.5px; color: var(--fg-2);
  border-radius:8px; transition: color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px; height:1px;
  background: var(--signal); transform:scaleX(0); transform-origin:left;
  transition: transform .4s var(--ease-out);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after, .nav__links a.is-current::after{ transform:scaleX(1); }
.nav__links a.is-current{ color:#fff; }

.nav__actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.kbd{
  font-family: var(--f-mono); font-size:10.5px; line-height:1;
  padding:5px 6px; border-radius:5px; color: var(--muted);
  border:1px solid var(--line); background: rgba(255,255,255,.03);
}


/* Sélecteur de langue */
.lang{
  display:flex; align-items:center; gap:2px; padding:3px; flex:none;
  border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.02);
}
.lang__opt{
  display:block; padding:5px 10px; border-radius:999px;
  font-family: var(--f-mono); font-size:11px; letter-spacing:.1em; color: var(--muted);
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.lang__opt:hover{ color: var(--fg); }
.lang__opt.is-active{ color:#02130B; background: var(--grad-signal); font-weight:700; }

.burger{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); padding:0 10px; }
.burger i{ display:block; height:1.5px; background:var(--fg); margin:4px 0; border-radius:2px; transition: transform .35s var(--ease), opacity .25s; }
.burger[aria-expanded="true"] i:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

.nav__mobile{
  display:none; flex-direction:column; gap:2px; padding: 12px var(--gut) 28px;
  background: rgba(4,7,11,.96); backdrop-filter: blur(20px);
  border-bottom:1px solid var(--line-soft);
}
.nav__mobile a{ padding:14px 4px; font-size:17px; color:var(--fg); border-bottom:1px solid var(--line-soft); }
.nav__mobile .btn{ margin-top:18px; }

/* ---------- 6. HERO ---------- */
.hero{
  position:relative; isolation:isolate;
  padding-top: calc(var(--nav-h) + clamp(56px, 9vw, 116px));
  padding-bottom: clamp(108px, 9vw, 124px);   /* laisse la place à l'indicateur « scroll » */
  min-height: min(1000px, 100svh);
  display:flex; flex-direction:column; justify-content:center;
}
.hero__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }

.hero__aurora{
  position:absolute; inset:-30% -10% auto -10%; height:150%;
  background:
    radial-gradient(48% 42% at 22% 14%, rgba(0,232,135,.16), transparent 62%),
    radial-gradient(42% 38% at 82% 26%, rgba(43,232,245,.11), transparent 65%),
    radial-gradient(52% 46% at 58% 82%, rgba(124,92,255,.13), transparent 68%);
  filter: blur(18px);
  /* L'aurore est mise à l'échelle en boucle. Sans calque dédié, chaque
     nouvelle échelle refait le flou sur une surface plein écran ; promue,
     la texture est floutée une fois puis simplement transformée. */
  will-change: transform;
  animation: aurora 22s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-2.5%,1.5%,0) scale(1.06); }
  100%{ transform: translate3d(2%,-1%,0) scale(1.02); }
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.034) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.034) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(100% 72% at 50% 34%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(100% 72% at 50% 34%, #000 0%, transparent 72%);
  opacity:.75;
}
.hero__particles{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }

/* Voile de contraste : le texte doit rester lisible par-dessus l'empreinte */
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(56% 44% at 50% 42%, rgba(3,6,10,.72) 0%, rgba(3,6,10,.48) 48%, transparent 74%),
    linear-gradient(180deg, rgba(3,6,10,.5) 0%, transparent 16%, transparent 74%, var(--void) 100%);
}
.fingerprint--hot{ isolation:isolate; }

/* --- Empreinte numérique --- */
.fingerprint{
  position:absolute; top:50%; left:50%;
  width: clamp(560px, 78vw, 1080px); aspect-ratio: 760/900;
  transform: translate3d(-50%,-50%,0);
  opacity:1;
  --px:0; --py:0;
}
.fingerprint svg{ width:100%; height:100%; overflow:visible; }
.fp-layer{
  vector-effect: non-scaling-stroke;
  transform: translate3d(calc(var(--px) * 12px), calc(var(--py) * 12px), 0);
  transition: transform .9s var(--ease-out);
}
.fp-layer--idle{ opacity:.85; animation: fpIdle 9s ease-in-out infinite; }
@keyframes fpIdle{ 0%,100%{opacity:.7} 50%{opacity:.95} }

/* Lueur par empilement de contours : un filter SVG animé coûterait
   une repasse de rastérisation à chaque frame du balayage. */
.fp-layer--hot{ opacity:1; }
/* Trois calques promus d'un SVG de 760 × 860 : c'est le prix du parallaxe
   au pointeur, et ce parallaxe n'existe pas au doigt (voir main.js, § 1).
   Sans pointeur fin, on ne paie donc pas la mémoire GPU correspondante. */
@media (pointer: fine){
  .fp-layer--hot, .fp-layer--bloom, .fp-layer--bloom2{ will-change: transform; }
}
.fp-minutiae circle{ fill: #EAFFF4; }
.fp-minutiae circle.halo{ fill: var(--signal); opacity:.28; }

/* Le balayage est un masque CSS : un <mask> SVG dont le contenu est
   animé en CSS n'est pas réinvalidé par le moteur de rendu. */
.fingerprint--hot{
  -webkit-mask-image: var(--sweep); mask-image: var(--sweep);
  -webkit-mask-size: 100% 55%;      mask-size: 100% 55%;
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: 0% -60%;   mask-position: 0% -60%;
  --sweep: linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,.18) 14%, rgba(0,0,0,.72) 30%,
      #000 44%, #000 56%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.18) 86%, transparent 100%);
  animation: fpSweep 3s var(--ease-io) infinite;
}
@keyframes fpSweep{
  0%, 5%   { -webkit-mask-position: 0% -60%; mask-position: 0% -60%; }
  55%,100% { -webkit-mask-position: 0% 160%; mask-position: 0% 160%; }
}
.scan-line{
  transform-box: view-box; transform-origin:0 0;
  animation: fpScanLine 3s var(--ease-io) infinite;
  opacity:0;
}
@keyframes fpScanLine{
  0%, 5%   { transform: translateY(-8px); opacity:0; }
  13%      { opacity:.95; }
  47%      { opacity:.8; }
  55%,100% { transform: translateY(912px); opacity:0; }
}
.hero__halo{
  position:absolute; top:50%; left:50%;
  width: clamp(420px, 56vw, 820px); aspect-ratio:1;
  transform: translate3d(-50%,-50%,0);
  background: radial-gradient(circle at 50% 50%, rgba(0,232,135,.3), rgba(43,232,245,.09) 44%, transparent 70%);
  filter: blur(46px);
  animation: haloPulse 3s var(--ease-io) infinite;
  pointer-events:none;
}
@keyframes haloPulse{ 0%,8%{opacity:.12} 42%{opacity:.8} 72%,100%{opacity:.12} }

.hero__inner{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero__title{
  margin-top:26px;
  font-size: clamp(32px, 7.4vw, 86px);
  font-weight:700; letter-spacing:-.035em; line-height:1.03;
  text-wrap: balance;
  text-shadow: 0 0 60px rgba(0,0,0,.6);
}
.strike-scan{ position:relative; display:inline-block; color:#fff; }
.strike-scan::after{
  content:""; position:absolute; left:-4px; right:-4px; bottom:.1em; height:2px;
  background: var(--grad-signal); border-radius:2px;
  transform-origin:left; transform: scaleX(0);
  box-shadow: 0 0 14px rgba(0,232,135,.8);
  animation: strikeSweep 3s var(--ease-io) infinite;
}
@keyframes strikeSweep{
  0%,10%{ transform:scaleX(0); opacity:0 }
  22%{ opacity:1 }
  48%{ transform:scaleX(1); opacity:1 }
  62%{ transform:scaleX(1); opacity:.15 }
  70%,100%{ transform:scaleX(1); opacity:0 }
}

.hero__lead{
  margin-top:26px; max-width:66ch; font-size: clamp(16px, 1.15vw, 19px);
  color: var(--fg-2);
  text-shadow: 0 2px 18px rgba(3,6,10,.95), 0 0 42px rgba(3,6,10,.8);
}
.hero__lead strong{ color:var(--fg); font-weight:600; }
.hero__cta{ margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.hero__micro{
  margin-top:24px; display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
  font-family: var(--f-mono); font-size:11.5px; letter-spacing:.06em; color: var(--muted);
}
.hero__micro span{ display:flex; align-items:center; gap:8px; }
.hero__micro span::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--signal-lo); }

.hero__stats{
  margin-top: clamp(44px, 6vw, 72px);
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: clamp(20px, 5vw, 64px);
  padding: 22px clamp(20px,4vw,44px);
  border:1px solid var(--line-soft); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.005));
  backdrop-filter: blur(10px);
}
.hstat{ text-align:center; min-width:130px; }
.hstat b, .hstat .unit{
  font-family: var(--f-display); font-weight:700; font-size: clamp(26px,3.2vw,38px);
  color:#fff; letter-spacing:-.03em; font-variant-numeric: tabular-nums;
}
.hstat .unit{ color: var(--signal); margin-left:2px; }
.hstat small{ display:block; margin-top:6px; font-size:12.5px; color: var(--muted); }

.hero__scroll{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family: var(--f-mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color: var(--faint);
}
.hero__scroll-line{ width:1px; height:42px; background: linear-gradient(180deg, transparent, var(--signal)); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; inset:0; background: var(--signal-hi);
  animation: scrollCue 2.2s var(--ease-io) infinite;
}
@keyframes scrollCue{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) } }

/* ---------- 7. TERMINAL ---------- */
.section--demo{ background: linear-gradient(180deg, transparent, rgba(0,232,135,.018) 40%, transparent); }
.section--demo .sec-head{ text-align:center; margin-inline:auto; }
.section--demo .eyebrow{ justify-content:center; }
.section--demo .sec-lead{ margin-inline:auto; }

.terminal-wrap{ position:relative; max-width:960px; margin-inline:auto; }
.terminal__glow{
  position:absolute; inset:8% 4% -6%; z-index:-1; border-radius:50%;
  background: radial-gradient(60% 50% at 50% 50%, rgba(0,232,135,.22), transparent 70%);
  filter: blur(60px);
}
.terminal{
  border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden;
  background: linear-gradient(180deg, #0A1016, #070B10);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.terminal__bar{
  display:flex; align-items:center; gap:14px; padding:13px 18px;
  border-bottom:1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent);
}
.dots{ display:flex; gap:7px; }
.dots i{ width:10px; height:10px; border-radius:50%; background:#1b2732; }
.dots i:nth-child(1){ background:#2a3642; }
.terminal__title{ font-family:var(--f-mono); font-size:12px; color:var(--muted); letter-spacing:.02em; }
.terminal__badge{
  margin-left:auto; display:flex; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--signal); padding:4px 10px; border-radius:999px;
  border:1px solid rgba(0,232,135,.25); background: rgba(0,232,135,.06);
}
.terminal__tabs{ display:flex; gap:2px; padding:10px 14px 0; border-bottom:1px solid var(--line-soft); overflow-x:auto; scrollbar-width:none; }
.terminal__tabs::-webkit-scrollbar{ display:none; }
.terminal__tabs button{
  position:relative; padding:9px 16px 12px; white-space:nowrap;
  font-family:var(--f-mono); font-size:12px; color: var(--muted);
  transition: color .25s;
}
.terminal__tabs button::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px;
  background: var(--grad-signal); border-radius:2px 2px 0 0;
  transform:scaleX(0); transition: transform .4s var(--ease-out);
}
.terminal__tabs button:hover{ color: var(--fg-2); }
.terminal__tabs button.is-active{ color: var(--signal-hi); }
.terminal__tabs button.is-active::after{ transform:scaleX(1); }

.terminal__body{
  font-family: var(--f-mono); font-size: clamp(11.5px, 1.05vw, 13.5px); line-height:1.85;
  padding: 22px clamp(16px,2.4vw,26px);
  height: clamp(320px, 42vh, 430px);
  overflow-y:auto; scroll-behavior:smooth;
  background-image: radial-gradient(90% 60% at 50% 0%, rgba(0,232,135,.05), transparent 60%);
}
.terminal__body::-webkit-scrollbar{ width:6px; }
.terminal__body::-webkit-scrollbar-thumb{ background:#1a2530; border-radius:3px; }
.t-line{ display:block; white-space:pre-wrap; word-break:break-word; animation: lineIn .35s var(--ease-out) both; }
@keyframes lineIn{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:none } }
.t-cmd{ color: var(--fg); }
.t-cmd .prompt{ color: var(--signal); }
.t-cmd .flag{ color: var(--flux); }
.t-out{ color: var(--muted); }
.t-ok{ color: var(--signal); }
.t-warn{ color: var(--warn); }
.t-crit{ color: var(--crit); font-weight:500; }
.t-info{ color: var(--flux); }
.t-dim{ color: var(--faint); }
.t-key{ color:#8fa2b3; }
.t-val{ color: var(--signal-hi); }
.t-box{
  display:block; margin:10px 0; padding:12px 14px;
  border-left:2px solid var(--signal); border-radius:0 8px 8px 0;
  background: rgba(0,232,135,.06); color: var(--fg);
}
.t-box--crit{ border-left-color: var(--crit); background: rgba(255,77,109,.07); }
.caret{
  display:inline-block; width:8px; height:1.05em; vertical-align:-2px;
  background: var(--signal); margin-left:2px;
  animation: blink 1s steps(1) infinite;
}
.t-bar{ color: var(--signal); letter-spacing:-1px; }

.terminal__foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 18px; border-top:1px solid var(--line-soft);
  background: rgba(255,255,255,.012);
}
.terminal__hint{ font-family:var(--f-mono); font-size:11px; color:var(--faint); }
.terminal__replay{
  display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); font-size:12.5px; color:var(--fg-2);
  transition: border-color .3s, color .3s, background-color .3s;
}
.terminal__replay svg{ width:14px; }
.terminal__replay:hover{ border-color: rgba(0,232,135,.45); color:var(--signal); background: rgba(0,232,135,.06); }

/* ---------- 7b. LE FILM (relais du terminal) ----------
   Un fil descend du terminal, une commande s'y tape, l'écran s'allume façon
   tube cathodique sur un aperçu muet en ×2. Le film complet, avec le son, ne
   se charge qu'au clic. Les chapitres servent aussi de barre de progression.
   Sans JS : un <video controls> ordinaire, tout le reste est en [hidden]. */
/* Le lecteur entier (barre, image, commandes, chapitres) doit tenir dans la
   hauteur d'un écran de portable : la largeur se déduit de la hauteur utile. */
.film{ position:relative; max-width: min(1080px, max(640px, calc((100svh - 280px) * 16 / 9))); margin-inline:auto; }

.film__relay{ display:flex; flex-direction:column; align-items:center; }
.film__wire{
  --wh: clamp(54px, 7vw, 86px);
  position:relative; width:1px; height:var(--wh); overflow:hidden;
  background: linear-gradient(180deg, transparent, rgba(0,232,135,.4));
}
.film__wire::after{
  content:""; position:absolute; left:-1px; top:-24px; width:3px; height:24px; border-radius:2px;
  background: linear-gradient(180deg, transparent, var(--signal-hi));
  box-shadow: 0 0 10px var(--signal);
  animation: wirePulse 2.6s var(--ease-io) infinite;
}
@keyframes wirePulse{ 0%{ transform:translateY(0) } 65%,100%{ transform:translateY(calc(var(--wh) + 24px)) } }
.film__cmd{
  margin-top:14px; min-height:1.85em; text-align:center;
  font-family:var(--f-mono); font-size: clamp(11.5px, 1.05vw, 13px); line-height:1.85;
}
.film__lead{ margin: 6px auto clamp(30px, 4vw, 46px); text-align:center; color:var(--muted); font-size:15px; }

.film__frame{ position:relative; isolation:isolate; }
.film__frame::before{ /* lueur de repli, avant que l'ambilight n'ait une image */
  content:""; position:absolute; inset:10% 6% -4%; z-index:-2; border-radius:50%;
  background: radial-gradient(60% 50% at 50% 50%, rgba(0,232,135,.16), transparent 70%);
  filter: blur(60px);
}
/* Ambilight : la vidéo réduite à 32×18 px, agrandie et floutée derrière l'écran */
.film__ambi{
  position:absolute; left:3%; top:7%; width:94%; height:90%; z-index:-1;
  filter: blur(56px) saturate(1.5); opacity:0; transition: opacity 1.4s var(--ease);
  pointer-events:none;
}
.film.is-ambi .film__ambi{ opacity:.62; }

.film__win{
  border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden;
  background: linear-gradient(180deg, #0A1016, #070B10);
  box-shadow: 0 50px 120px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.02) inset;
  transform-origin: 50% 100%;
}
.film__badge{ white-space:nowrap; transition: color .3s, border-color .3s, background-color .3s; }
.film__badge .live-dot{ margin-right:1px; }

.film__stage{ position:relative; aspect-ratio:16/9; background:#020406; overflow:hidden; }
.film__stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.film__teaser{ transition: opacity .6s var(--ease); }
.film__video{ transition: opacity .6s var(--ease); }
.film [hidden]{ display:none !important; }
/* Tant que le film charge, l'aperçu et la couverture restent en place */
.film.is-enhanced .film__video{ opacity:0; }
.film.is-started:not(.is-loading) .film__video{ opacity:1; }
.film.is-started:not(.is-loading) .film__teaser{ opacity:0; }

.film__fx{ /* lignes de balayage + vignette : seulement sur l'aperçu */
  position:absolute; inset:0; pointer-events:none; transition: opacity .6s var(--ease);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.film.is-started:not(.is-loading) .film__fx{ opacity:0; }

/* Allumage cathodique : le contenu est pincé sur une ligne, puis s'ouvre */
.film.is-armed .film__stage > *{ clip-path: inset(50% 0 50% 0); }
.film.is-booted .film__stage > *{ clip-path: inset(0); transition: clip-path .85s var(--ease-out) .22s; }
.film__stage::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; z-index:6;
  background: var(--signal-hi); box-shadow: 0 0 18px var(--signal), 0 0 3px #fff;
  opacity:0; pointer-events:none;
}
.film.is-booted .film__stage::after{ animation: crtLine 1s var(--ease-out) both; }
@keyframes crtLine{
  0%{ opacity:1; transform:scaleX(0) }
  28%{ opacity:1; transform:scaleX(1) scaleY(1) }
  100%{ opacity:0; transform:scaleX(1) scaleY(70) }
}

/* Couverture : bouton de lecture à anneau de texte tournant */
.film__cover{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  background: radial-gradient(42% 60% at 50% 50%, rgba(3,6,10,.62), rgba(3,6,10,.3) 72%, rgba(3,6,10,.5));
  transition: opacity .5s var(--ease), visibility .5s;
}
.film.is-started:not(.is-loading) .film__cover{ opacity:0; visibility:hidden; }
.film__play{
  position:relative; display:grid; place-items:center; border-radius:50%;
  width: clamp(112px, 15vw, 164px); aspect-ratio:1;
  transition: transform .5s var(--ease-out);
}
.film__play::before{
  content:""; position:absolute; inset:7%; border-radius:50%;
  background: rgba(3,6,10,.5); border:1px solid rgba(124,255,196,.16);
  backdrop-filter: blur(6px);
}
.film__ring{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  font-family:var(--f-mono); font-size:13px; font-weight:500; fill: var(--signal-hi);
  animation: ringSpin 18s linear infinite;
}
@keyframes ringSpin{ to{ transform:rotate(360deg) } }
.film__core{
  position:relative; display:grid; place-items:center; width:44%; aspect-ratio:1; border-radius:50%;
  color:#02130B; background: var(--grad-signal); background-size:180% 100%;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 12px 40px -10px rgba(0,232,135,.9);
  transition: transform .45s var(--ease-out), background-position .6s var(--ease);
}
.film__core svg{ width:40%; margin-left:7%; }
.film__core::before{
  content:""; position:absolute; inset:-9px; border-radius:50%;
  border:1px solid rgba(0,232,135,.55);
  animation: filmPulse 2.6s var(--ease-out) infinite;
}
@keyframes filmPulse{ 0%{ transform:scale(.86); opacity:.9 } 100%{ transform:scale(1.55); opacity:0 } }
.film__play:hover{ transform: scale(1.04); }
.film__play:hover .film__core{ transform: scale(1.1); background-position:100% 50%; }
.film__play:focus-visible{ outline-offset:6px; border-radius:50%; }
/* chargement du film : le triangle laisse place à un anneau qui tourne */
.film.is-loading .film__core svg{ opacity:0; }
.film.is-loading .film__core::after{
  content:""; position:absolute; inset:30%; border-radius:50%;
  border:2px solid rgba(2,19,11,.25); border-top-color:#02130B;
  animation: ringSpin .8s linear infinite;
}

/* Fin du film */
.film__end{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: clamp(14px, 2.4vw, 26px); padding:20px; text-align:center;
  background: rgba(3,6,10,.74); backdrop-filter: blur(8px);
  animation: lineIn .6s var(--ease-out) both;
}
.film__end-title{ font-family:var(--f-display); font-weight:600; color:var(--fg); line-height:1.15; letter-spacing:-.02em; font-size: clamp(19px, 3vw, 36px); }
.film__end-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* Barre de commandes */
.film__controls{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  border-top:1px solid var(--line-soft); background: rgba(255,255,255,.012);
  font-family:var(--f-mono); font-size:12px;
}
.film__btn{
  flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:999px;
  border:1px solid var(--line); color:var(--fg-2);
  transition: border-color .3s, color .3s, background-color .3s;
}
.film__btn svg{ width:18px; height:18px; }
.film__btn:hover{ border-color: rgba(0,232,135,.45); color:var(--signal); background: rgba(0,232,135,.06); }
.film__btn--toggle{ color:var(--signal); border-color: rgba(0,232,135,.35); background: rgba(0,232,135,.08); }
.film__btn .i-pause, .film__btn .i-muted, .film__btn .i-fs-exit{ display:none; }
.film.is-playing .film__btn .i-play, .film.is-muted .film__btn .i-sound, .film.is-fs .film__btn .i-fs{ display:none; }
.film.is-playing .film__btn .i-pause, .film.is-muted .film__btn .i-muted, .film.is-fs .film__btn .i-fs-exit{ display:block; }
.film__time{ flex:none; color:var(--fg-2); font-variant-numeric: tabular-nums; }
.film__now{ flex:1 1 auto; min-width:0; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.film__now::before{ content:"▸ "; color:var(--signal); }
.film__link{
  flex:none; display:inline-flex; align-items:center; gap:6px; margin-right:6px;
  font-family:var(--f-body); font-size:13px; font-weight:600; color:var(--signal); white-space:nowrap;
}
.film__link svg{ width:13px; transition: transform .35s var(--ease-out); }
.film__link:hover svg{ transform: translate(2px,-2px); }

/* Chapitres = barre de progression segmentée */
.film__chapters{ position:relative; display:grid; grid-template-columns: repeat(9, minmax(0,1fr)); border-top:1px solid var(--line-soft); }
.film__chapters li{ display:flex; }
.film__chapters li + li{ border-left:1px solid var(--line-soft); }
.film__chapters button{
  position:relative; flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:14px 12px 13px; text-align:left; color:var(--muted);
  transition: color .3s, background-color .3s;
}
.film__chapters b{ font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; color:var(--faint); transition: color .3s; }
.film__chapters span{ font-size:12.5px; line-height:1.3; hyphens:auto; overflow-wrap:break-word; max-width:100%; }
/* La largeur du lecteur suit la hauteur d'écran : on règle les chapitres sur elle, pas sur le viewport */
.film__win{ container-type:inline-size; }
@container (max-width: 900px){
  .film__chapters button{ padding:12px 9px 11px; }
  .film__chapters span{ font-size:11.5px; }
}
.film__chapters button:hover{ color:var(--fg-2); background: rgba(255,255,255,.018); }
.film__chapters button.is-done b{ color: var(--signal-lo); }
.film__chapters button[aria-current="true"]{ color:var(--fg); background: rgba(0,232,135,.05); }
.film__chapters button[aria-current="true"] b{ color:var(--signal); }
.film__fill{ position:absolute; left:0; right:0; top:-1px; height:2px; background: rgba(255,255,255,.05); }
.film__fill::after{
  content:""; position:absolute; inset:0; background: var(--grad-signal);
  transform: scaleX(var(--p, 0)); transform-origin:0 50%;
}

/* Plein écran : on garde l'habillage, la vidéo s'adapte à l'espace restant */
.film__win:fullscreen{ display:flex; flex-direction:column; border:0; border-radius:0; background:#000; animation:none; transform:none; }
.film__win:fullscreen .film__stage{ flex:1 1 auto; aspect-ratio:auto; }
.film__win:fullscreen .film__stage video{ object-fit:contain; }

/* Entrée pilotée par le scroll : l'écran se redresse en arrivant */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .film__frame.reveal{ opacity:1; transform:none; transition:none; }
    .film__win{ animation: filmRise linear both; animation-timeline: view(); animation-range: entry 5% cover 40%; }
  }
}
@keyframes filmRise{
  from{ transform: perspective(1800px) rotateX(18deg) scale(.9); opacity:.25; }
  to{ transform:none; opacity:1; }
}

/* ---------- 8. PLATEFORME + LAPTOP ---------- */
.cockpit{ text-align:center; }
.cockpit .sec-head{ margin-bottom: clamp(38px,5vw,64px); }
.cockpit .sec-head h2{ font-size: clamp(28px,3.8vw,50px); }
.cockpit .sec-lead strong{ color:#fff; font-weight:600; }
.cockpit__foot{ margin-top: clamp(32px,4.5vw,54px); }
.cockpit__foot .link-arrow{ margin-top:0; }

/* Laptop */
.platform__device{ perspective:1600px; max-width:768px; margin-inline:auto; }
.laptop{
  position:relative; width:100%; max-width:720px; margin-inline:auto;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx,8deg)) rotateY(var(--ry,-3deg)) translateZ(0);
  transition: transform .5s var(--ease-out);
}
.laptop__lid{
  position:relative; padding:12px 12px 16px; border-radius:16px 16px 6px 6px;
  background: linear-gradient(160deg, #1b2530 0%, #0d141b 45%, #161f28 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 1px 0 rgba(255,255,255,.12) inset,
    0 40px 90px -30px rgba(0,0,0,.95);
}
.laptop__cam{
  position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:#0a0f14; box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.laptop__screen{
  position:relative; aspect-ratio:16/10.2; border-radius:8px; overflow:hidden;
  background: radial-gradient(120% 100% at 50% 0%, #0b1219, #05080c);
  box-shadow: 0 0 0 1px rgba(0,232,135,.12), 0 0 40px -6px rgba(0,232,135,.16) inset;
}
.laptop__glare{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(118deg, rgba(255,255,255,.09) 0%, transparent 28%, transparent 68%, rgba(43,232,245,.05) 100%);
  mix-blend-mode: screen;
}
.laptop__base{
  height:14px; margin:0 -3.5%; border-radius:0 0 14px 14px;
  background: linear-gradient(180deg,#232e39,#0e151c 60%,#070b0f);
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 24px 40px -22px rgba(0,0,0,.9);
  position:relative;
}
.laptop__notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:12%; height:5px; border-radius:0 0 6px 6px; background:#050809;
}
.laptop__shadow{
  position:absolute; left:8%; right:8%; bottom:-42px; height:60px; border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.85), transparent 70%);
  filter: blur(18px);
}
.laptop__beam{
  position:absolute; left:-6%; right:-6%; bottom:-70px; height:120px; z-index:-1;
  background: radial-gradient(50% 60% at 50% 0%, rgba(0,232,135,.3), transparent 70%);
  filter: blur(40px); opacity:.8;
  animation: beam 5s ease-in-out infinite;
}
@keyframes beam{ 0%,100%{opacity:.55} 50%{opacity:.95} }

/* Interface dans l'écran */
.ui{
  position:absolute; inset:0; padding: 2.2% 2.6%;
  display:flex; flex-direction:column; gap:1.6%;
  font-size: clamp(6px, .92vw, 10px);
  font-family: var(--f-mono);
  container-type: inline-size;
}
.ui__top{ display:flex; align-items:center; gap:1.4em; padding-bottom:.9em; border-bottom:1px solid rgba(255,255,255,.06); }
.ui__brand{ display:flex; align-items:center; gap:.6em; font-family:var(--f-display); font-weight:700; letter-spacing:.16em; color:#fff; font-size:1.05em; }
.ui__brand i{ width:.7em; height:.7em; border-radius:50%; background:var(--grad-signal); box-shadow:0 0 8px rgba(0,232,135,.8); }
.ui__tabs{ display:flex; gap:1.3em; color:var(--faint); }
.ui__tabs b{ color:var(--signal); font-weight:500; position:relative; }
.ui__tabs b::after{ content:""; position:absolute; left:0; right:0; bottom:-.75em; height:1px; background:var(--signal); }
.ui__live{ margin-left:auto; display:flex; align-items:center; gap:.5em; color:var(--signal); letter-spacing:.1em; }

.ui__grid{
  flex:1; display:grid; gap:1.4%;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: auto 1fr 1.1fr;
  grid-template-areas: "kpi kpi" "chart radar" "logs logs";
  min-height:0;
}
.ui__kpis{ grid-area:kpi; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2%; }
.kpi{
  padding:.75em .9em; border-radius:.7em; border:1px solid rgba(255,255,255,.055);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  display:flex; flex-direction:column; gap:.15em;
}
.kpi small{ color:var(--faint); font-size:.85em; letter-spacing:.05em; }
.kpi b{ color:#fff; font-size:1.5em; font-family:var(--f-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.spark{ font-size:.8em; color:var(--signal); }
.spark.down{ color:var(--flux); }

.ui__chart{
  grid-area:chart; position:relative; padding:.8em .9em .4em;
  border-radius:.7em; border:1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.015); min-height:0; display:flex; flex-direction:column;
}
.ui__chart figcaption{ color:var(--faint); font-size:.9em; margin-bottom:.4em; }
.ui__chart svg{ flex:1; width:100%; min-height:0; }
.ui__chart .line{ stroke-dasharray:1000; stroke-dashoffset:1000; }
.is-in-view .ui__chart .line{ animation: drawLine 2.4s var(--ease-out) forwards; }
@keyframes drawLine{ to{ stroke-dashoffset:0 } }
.ui__chart .area{ opacity:0; }
.is-in-view .ui__chart .area{ animation: fadeArea 1.4s 1.1s var(--ease-out) forwards; }
@keyframes fadeArea{ to{ opacity:1 } }
.pulse-dot{ animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse{ 0%,100%{ r:2.5; opacity:1 } 50%{ r:4.2; opacity:.6 } }
.ui__threshold{
  position:absolute; right:.9em; top:38%; font-size:.78em; color:var(--warn); opacity:.7;
}

.ui__radar{
  grid-area:radar; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em;
  border-radius:.7em; border:1px solid rgba(255,255,255,.055); background: rgba(255,255,255,.015); min-height:0; padding:.6em;
}
.ui__radar small{ color:var(--faint); font-size:.85em; }
.radar{
  position:relative; aspect-ratio:1; height:min(100%, 9em); border-radius:50%;
  background: radial-gradient(circle, rgba(0,232,135,.10), transparent 70%);
  border:1px solid rgba(0,232,135,.2); overflow:hidden; flex:none;
}
.radar__ring{ position:absolute; inset:14%; border-radius:50%; border:1px solid rgba(0,232,135,.13); }
.radar__ring:nth-of-type(3){ inset:30%; }
.radar__ring:nth-of-type(4){ inset:44%; }
.radar__sweep{
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, rgba(0,232,135,.42), rgba(0,232,135,.05) 55deg, transparent 90deg);
  animation: radarSpin 3.6s linear infinite;
}
@keyframes radarSpin{ to{ transform:rotate(360deg) } }
.blip{
  position:absolute; left:var(--x); top:var(--y); width:.45em; height:.45em; border-radius:50%;
  background:var(--signal-hi); box-shadow:0 0 6px var(--signal);
  animation: blipPulse 3.6s var(--ease-io) infinite; animation-delay:var(--d);
}
.blip--hot{ background:var(--crit); box-shadow:0 0 8px var(--crit); }
@keyframes blipPulse{ 0%{ transform:scale(.4); opacity:0 } 8%{ transform:scale(1.5); opacity:1 } 45%{ opacity:.7 } 100%{ transform:scale(.8); opacity:0 } }

.ui__logs{
  grid-area:logs; border-radius:.7em; border:1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.015); padding:.7em .9em; min-height:0; display:flex; flex-direction:column; overflow:hidden;
}
.ui__logs-head{ display:flex; justify-content:space-between; color:var(--faint); font-size:.85em; padding-bottom:.45em; border-bottom:1px solid rgba(255,255,255,.05); }
.ui__logs ul{ flex:1; overflow:hidden; display:flex; flex-direction:column; gap:.18em; padding-top:.4em; }
.ui__logs li{
  display:flex; align-items:center; gap:.7em; color:var(--muted); font-size:.92em;
  animation: logIn .5s var(--ease-out) both; white-space:nowrap;
}
.ui__logs li span:first-child{ color:var(--faint); }
.ui__logs li .lg-msg{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.ui__logs li .lg-sev{ font-size:.85em; padding:.05em .5em; border-radius:.4em; }
.sev-hi{ color:var(--crit); background:rgba(255,77,109,.12); }
.sev-md{ color:var(--warn); background:rgba(255,176,32,.12); }
.sev-lo{ color:var(--signal); background:rgba(0,232,135,.1); }
@keyframes logIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }


/* ---------- 8b. CARROUSEL 3D DES GARANTIES ---------- */
.prism{
  --r: clamp(178px, 26vw, 266px);
  --dur: 30s;
  --cardw: min(430px, 80vw);
  --cardh: 252px;
  position:relative; margin-top: clamp(46px,7vw,90px); padding-block:16px;
  perspective: 1500px; perspective-origin: 50% 42%;
}
.prism::before{                      /* socle lumineux sous le carrousel */
  content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:min(560px,88%); height:120px; border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,232,135,.2), transparent 70%);
  filter: blur(34px); pointer-events:none;
}
.prism__stage{
  position:relative; height: var(--cardh);
  transform-style: preserve-3d;
  animation: prismSpin var(--dur) linear infinite;
}
@keyframes prismSpin{
  from{ transform: rotateX(-8deg) rotateY(0deg); }
  to  { transform: rotateX(-8deg) rotateY(-360deg); }
}
.prism__face{
  position:absolute; inset:0; margin:auto;
  width: var(--cardw); height: var(--cardh);
  transform: rotateY(calc(var(--i) * 90deg)) translateZ(var(--r));
  backface-visibility: hidden;
}
.prism__card{
  box-sizing:border-box; height:100%;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:9px;
  padding:25px 27px; border-radius: var(--r-lg);
  border:1px solid var(--line-soft);
  background: linear-gradient(168deg, #0d141b 0%, #090e14 60%, #0b1219 100%);
  /* chaque carte s'allume quand elle passe devant : décalage = sa position sur le cylindre */
  animation: prismLit var(--dur) linear infinite;
  animation-delay: calc(var(--i) * var(--dur) / 4 - var(--dur));
}
@keyframes prismLit{
  0%, 7%    { opacity:1; border-color: rgba(0,232,135,.42); box-shadow: 0 26px 60px -34px rgba(0,232,135,.9); }
  22%, 78%  { opacity:.4;  border-color: var(--line-soft);   box-shadow: none; }
  93%, 100% { opacity:1; border-color: rgba(0,232,135,.42); box-shadow: 0 26px 60px -34px rgba(0,232,135,.9); }
}
.prism__idx{ font-family: var(--f-mono); font-size:11px; letter-spacing:.14em; color: var(--signal); }
.prism__idx span{ color: var(--faint); }
.prism__card h3{ font-size:19px; letter-spacing:-.02em; }
.prism__card p{ flex:1; font-size:14.3px; color: var(--fg-2); }
.prism__card em{ color: var(--signal-hi); font-style:italic; }
.prism__meta{
  width:100%; padding-top:12px; border-top:1px solid var(--line-soft);
  font-family: var(--f-mono); font-size:10.5px; letter-spacing:.07em; color: var(--faint);
}
.prism__hint{
  margin-top:20px; font-family: var(--f-mono); font-size:10px;
  letter-spacing:.24em; text-transform:uppercase; color: var(--faint);
}
/* Sans survol, la consigne n'a plus d'objet : la rotation ne s'arrête plus. */
@media (hover: none){ .prism__hint{ display:none; } }
/* La pause au survol n'existe que là où un survol peut prendre fin : sur
   tactile, le :hover reste collé au dernier élément touché et la rotation
   ne repartait jamais. Le focus clavier, lui, se relâche partout. */
@media (hover: hover) and (pointer: fine){
  .prism:hover .prism__stage, .prism:hover .prism__card{ animation-play-state: paused; }
}
.prism:focus-within .prism__stage, .prism:focus-within .prism__card{ animation-play-state: paused; }
.section--platform:not(.is-in-view) .prism__stage,
.section--platform:not(.is-in-view) .prism__card{ animation-play-state: paused; }

/* ---------- 9. TICKER ---------- */
.ticker-band{
  border-block:1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(0,232,135,.03), transparent);
  padding:16px 0; overflow:hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker{ display:flex; }
.ticker__track{
  display:flex; gap:48px; flex:none; padding-right:48px;
  animation: tickerRun 46s linear infinite;
}
@media (hover: hover) and (pointer: fine){
  .ticker:hover .ticker__track{ animation-play-state:paused; }
}
@keyframes tickerRun{ to{ transform: translateX(-50%) } }
.ticker__track span{
  display:flex; align-items:center; gap:10px; flex:none;
  font-family:var(--f-mono); font-size:12px; color:var(--muted); letter-spacing:.02em;
}
.sev{ width:6px; height:6px; border-radius:2px; flex:none; }
.sev--hi{ background:var(--crit); box-shadow:0 0 8px rgba(255,77,109,.7); }
.sev--md{ background:var(--warn); box-shadow:0 0 8px rgba(255,176,32,.6); }
.sev--lo{ background:var(--signal); box-shadow:0 0 8px rgba(0,232,135,.6); }

/* ---------- 10. CARTES ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:18px; }
.card{
  position:relative; padding:30px 28px 26px; border-radius: var(--r-lg);
  border:1px solid var(--line-soft); overflow:hidden; isolation:isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.006));
  transition: transform .45s var(--ease-out), border-color .45s var(--ease);
}
.card::before{ /* halo qui suit le curseur */
  content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(0,232,135,.16), transparent 62%);
  opacity:0; transition: opacity .4s var(--ease);
}
.card::after{ /* liseré supérieur */
  content:""; position:absolute; top:0; left:18%; right:18%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,232,135,.55), transparent);
  opacity:0; transition: opacity .45s var(--ease);
}
.card:hover{ transform: translateY(-5px); border-color: rgba(0,232,135,.26); }
.card:hover::before, .card:hover::after{ opacity:1; }
.card__idx{
  position:absolute; top:22px; right:24px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--faint);
}
.card__icon{
  display:grid; place-items:center; width:46px; height:46px; border-radius:13px; margin-bottom:22px;
  color: var(--signal);
  border:1px solid rgba(0,232,135,.22);
  background: linear-gradient(145deg, rgba(0,232,135,.14), rgba(43,232,245,.05));
  box-shadow: 0 10px 26px -14px rgba(0,232,135,.8);
  transition: transform .45s var(--ease-out), box-shadow .45s;
}
.card__icon svg{ width:23px; height:23px; }
.card:hover .card__icon{ transform: translateY(-2px) scale(1.04); box-shadow:0 14px 30px -12px rgba(0,232,135,.95); }
.card h3{ font-size:19px; margin-bottom:11px; letter-spacing:-.02em; }
.card p{ font-size:14.6px; color:var(--fg-2); }
.card__meta{
  display:block; margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--faint);
}

/* ---------- 10b. SERVICES — GALERIE ÉLASTIQUE ----------
   Six panneaux en accordéon : l'actif prend 4 parts, les autres 1.
   Le contenu du panneau ouvert est dimensionné sur sa largeur FINALE
   (--eg-open, en unités cqw de la galerie) : pendant l'ouverture, le
   texte est rogné par le panneau, jamais recomposé ligne à ligne.     */
.eg{
  --eg-gap: 14px;
  --eg-open: calc((100cqw - var(--eg-gap) * 5) * 4 / 9);
  container-type: inline-size;
  display:flex; gap: var(--eg-gap);
  height: clamp(520px, 46vw, 620px);
}
.eg__item{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden; isolation:isolate;
  border-radius: var(--r-lg); border:1px solid var(--line-soft);
  background: var(--surface);
  transition: flex-grow .7s cubic-bezier(.25,1,.5,1), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.eg__item::after{ /* liseré supérieur, comme les cartes */
  content:""; position:absolute; top:0; left:14%; right:14%; height:1px; z-index:1;
  background: linear-gradient(90deg, transparent, rgba(0,232,135,.7), transparent);
  opacity:0; transition: opacity .5s var(--ease);
}
.eg__item.is-active{
  flex-grow:4;
  border-color: rgba(0,232,135,.3);
  box-shadow: 0 34px 90px -46px rgba(0,232,135,.6);
}
.eg__item.is-active::after{ opacity:1; }

.eg__media{ position:absolute; inset:0; z-index:-2; }
.eg__media img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.1); filter: brightness(.5) saturate(.8);
  transition: transform 1s var(--ease-out), filter .7s var(--ease);
}
.eg__item:hover .eg__media img{ filter: brightness(.75) saturate(.9); }
.eg__item.is-active .eg__media img{ transform:none; filter:none; }

.eg__shade{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(to top, rgba(3,6,10,.95) 0%, rgba(3,6,10,.72) 30%, rgba(3,6,10,.12) 62%, transparent 80%);
  opacity:.55; transition: opacity .5s var(--ease);
}
.eg__item.is-active .eg__shade{ opacity:1; }

.eg__body{
  position:absolute; left:0; bottom:0;
  width: calc(var(--eg-open) - 2px);   /* bordure du panneau */
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding: clamp(22px, 2.6vw, 34px);
  opacity:0; transform: translateY(48px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.eg__item.is-active .eg__body{ opacity:1; transform:none; transition-delay:.2s; }
.eg__tag{
  padding:5px 11px; border-radius:999px;
  font-family: var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color: var(--signal-hi); border:1px solid rgba(0,232,135,.32); background: rgba(3,6,10,.5);
  backdrop-filter: blur(8px);
}
.eg__title{
  /* le mot le plus long (« automatisation ») doit tenir dans le panneau ouvert */
  font-size: clamp(22px, calc(var(--eg-open) * .085), 44px);
  font-weight:700; text-transform:uppercase; line-height:.98; letter-spacing:-.02em;
  color:#fff; text-wrap:balance; overflow-wrap:break-word;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.eg__desc{ max-width:44ch; font-size:14.5px; line-height:1.55; color: var(--fg-2); }
.eg__cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--signal);
}
.eg__cta svg{ width:15px; height:15px; transition: transform .35s var(--ease-out); }
.eg__item:hover .eg__cta svg{ transform: translate(2px,-2px); }

/* Panneau fermé : titre vertical, précédé de son numéro */
.eg__label{
  position:absolute; left:50%; bottom: clamp(22px, 2.6vw, 32px);
  display:flex; align-items:center; gap:14px;
  writing-mode: vertical-rl; transform: translateX(-50%);
  font-family: var(--f-display); font-size:16px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--fg); white-space:nowrap;
  transition: opacity .5s var(--ease) .5s, transform .5s var(--ease) .5s;
}
.eg__label b{ font-family: var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.12em; color: var(--signal); }
.eg__item.is-active .eg__label{ opacity:0; transform: translateX(-50%) scale(.5); transition-delay:0s; }

.eg__hint{
  margin-top:22px; text-align:center; font-family: var(--f-mono); font-size:10px;
  letter-spacing:.24em; text-transform:uppercase; color: var(--faint);
}
.eg__hint-touch{ display:none; }
@media (hover: none){
  .eg__hint-hover{ display:none; }
  .eg__hint-touch{ display:inline; }
}

/* ---------- 11. MÉTHODE ---------- */
.steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px;
  position:relative; counter-reset:step;
}
.steps::before{ /* rail horizontal */
  content:""; position:absolute; top:34px; left:6%; right:6%; height:1px;
  background: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.steps::after{ /* rail rempli au scroll */
  content:""; position:absolute; top:34px; left:6%; height:1px;
  width: calc(var(--fill, 0) * (88%));
  background: var(--grad-signal);
  box-shadow: 0 0 12px rgba(0,232,135,.7);
  transition: width 1.2s var(--ease-out);
}
.step{ position:relative; padding-top:64px; }
.step__num{
  position:absolute; top:19px; left:0;
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  font-family:var(--f-mono); font-size:11px; color:var(--signal);
  border:1px solid rgba(0,232,135,.3); background: var(--void);
  box-shadow:0 0 0 5px var(--void), 0 0 18px -4px rgba(0,232,135,.7);
}
.step h3{ font-size:20px; margin-bottom:10px; }
.step p{ font-size:14.6px; }
.step__time{
  display:inline-block; margin-top:16px; padding:4px 11px; border-radius:999px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--fg-2);
  border:1px solid var(--line); background:rgba(255,255,255,.02);
}

/* ---------- 12. PREUVE ---------- */
.section--proof{ position:relative; }
.section--proof::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(60% 50% at 50% 50%, rgba(124,92,255,.07), transparent 70%);
}
.compliance{
  margin-top: clamp(40px,5vw,64px); padding-top:30px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 34px;
}
.compliance > span{ font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.compliance ul{ display:flex; flex-wrap:wrap; gap:10px; }
.compliance li{
  padding:7px 15px; border-radius:999px; border:1px solid var(--line);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; color:var(--fg-2);
  background: rgba(255,255,255,.018);
  transition: border-color .3s, color .3s;
}
.compliance li:hover{ border-color: rgba(0,232,135,.4); color:var(--signal); }

/* ---------- 14. FAQ ---------- */
.faq{ display:grid; grid-template-columns: .82fr 1.18fr; gap: clamp(30px,5vw,70px); align-items:start; }
.faq .sec-head{ margin-bottom:0; position:sticky; top: calc(var(--nav-h) + 30px); }
.faq h2{ font-size: clamp(27px,3.3vw,42px); }
.accordion{ display:grid; gap:10px; }
.qa{
  border:1px solid var(--line-soft); border-radius: var(--r-md);
  background: rgba(255,255,255,.014);
  transition: border-color .35s var(--ease), background-color .35s;
}
.qa[open]{ border-color: rgba(0,232,135,.26); background: rgba(0,232,135,.035); }
.qa summary{
  display:flex; align-items:center; gap:18px; padding:20px 22px; cursor:pointer; list-style:none;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary h3{ font-size:16.5px; font-weight:600; flex:1; letter-spacing:-.015em; }
.qa__sign{ position:relative; width:14px; height:14px; flex:none; }
.qa__sign::before, .qa__sign::after{
  content:""; position:absolute; inset:0; margin:auto; background: var(--signal);
  transition: transform .4s var(--ease-out), opacity .3s;
}
.qa__sign::before{ width:14px; height:1.5px; }
.qa__sign::after{ width:1.5px; height:14px; }
.qa[open] .qa__sign::after{ transform: rotate(90deg); opacity:0; }
.qa__body{ padding:0 22px 22px; }
.qa__body p{ font-size:14.8px; color:var(--fg-2); max-width:64ch; }
.qa__body b{ color:var(--signal-hi); font-weight:600; }
.qa__body i{ color:var(--fg); font-style:italic; }
/* animation d'ouverture */
.qa[open] .qa__body{ animation: qaOpen .45s var(--ease-out); }
@keyframes qaOpen{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* ---------- 15. CTA ---------- */
.section--cta{ padding-bottom: clamp(90px,10vw,150px); }
.cta{ position:relative; isolation:isolate; padding-block: clamp(60px,8vw,110px); text-align:center; overflow:hidden; }
.cta::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background: radial-gradient(70% 90% at 50% 100%, rgba(0,232,135,.18), transparent 62%),
              radial-gradient(50% 60% at 50% 0%, rgba(124,92,255,.12), transparent 70%);
}
.cta::after{ /* liseré haut */
  content:""; position:absolute; top:0; left:10%; right:10%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,232,135,.5), transparent);
}
.cta__fp{
  position:absolute; inset:auto 0 -46%; height:110%; z-index:-1; opacity:.5;
  background:
    repeating-radial-gradient(circle at 50% 100%,
      transparent 0 16px, rgba(0,232,135,.13) 16px 17px, transparent 17px 34px);
  mask-image: radial-gradient(60% 80% at 50% 100%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(60% 80% at 50% 100%, #000, transparent 72%);
  animation: fpEcho 3s var(--ease-io) infinite;
}
@keyframes fpEcho{ 0%,10%{ opacity:.22; transform:scale(1) } 45%{ opacity:.6; transform:scale(1.03) } 80%,100%{ opacity:.22; transform:scale(1) } }
.cta__inner .eyebrow{ justify-content:center; }
.cta h2{ font-size: clamp(30px,4.6vw,58px); text-wrap:balance; }
.cta .sec-lead{ margin-inline:auto; }
.cta__form{
  margin: 38px auto 0; max-width:620px;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; position:relative;
}
.cta__form input,
.cta__form select,
.cta__form textarea{
  flex:1 1 260px; min-height:54px; padding:0 22px; border-radius:999px;
  border:1px solid var(--line); background-color: rgba(255,255,255,.028);
  color:var(--fg); font-size:15px;
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
/* deux champs par ligne, puis le message et le bouton sur toute la largeur */
.cta__form input,
.cta__form select{ flex-basis: calc(50% - 5px); }
.cta__form textarea{
  flex-basis:100%; min-height:132px; padding:16px 22px; border-radius:22px;
  font-family:inherit; line-height:1.55; resize:vertical;
}
.cta__form textarea::placeholder{ color:var(--faint); }
.cta__form select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%236F7F8C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 22px center; background-size:12px;
}
.cta__form select:invalid{ color:var(--faint); } /* option d'invite encore affichée */
.cta__form option{ color:var(--fg); background-color:var(--abyss); }
.cta__form input::placeholder{ color:var(--faint); }
.cta__form input:focus,
.cta__form select:focus,
.cta__form textarea:focus{
  outline:none; border-color: rgba(0,232,135,.55);
  background-color: rgba(0,232,135,.05);
  box-shadow: 0 0 0 4px rgba(0,232,135,.1);
}
.cta__form [aria-invalid="true"]{ border-color: rgba(255,77,109,.6); box-shadow:0 0 0 4px rgba(255,77,109,.1); }
.cta__form .cta__hp{ display:none; } /* piège à robots */
.cta__form .btn{ --bh:54px; padding:0 28px; }
.cta__status{
  position:absolute; top:calc(100% + 12px); left:0; right:0;
  font-family:var(--f-mono); font-size:12px; color:var(--signal); min-height:1.2em;
}
.cta__status[data-state="error"]{ color: var(--crit); }
.cta__status a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.cta__micro{ margin-top:46px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.05em; color:var(--faint); }

/* ---------- 16. FOOTER ---------- */
.footer{ border-top:1px solid var(--line-soft); background: var(--abyss); padding-top: clamp(50px,6vw,78px); }
.footer__grid{ display:grid; grid-template-columns: 1.7fr repeat(3, .8fr); gap: clamp(28px,4vw,56px); }
.footer__brand p{ margin-top:18px; font-size:14px; color:var(--muted); max-width:42ch; }
.footer__status{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 9px; margin-top:20px !important; font-family:var(--f-mono); font-size:11.5px; color:var(--fg-2) !important; }
.footer__status a{ color:var(--signal); }
.footer__col h2{ font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); font-weight:500; margin-bottom:18px; }
.footer__col li{ margin-bottom:11px; }
.footer__col a{ font-size:14.2px; color:var(--fg-2); transition: color .25s, padding-left .3s var(--ease-out); }
.footer__col a:hover{ color:var(--signal); padding-left:4px; }
.footer__bottom{
  margin-top: clamp(44px,5vw,70px); padding-block:24px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--faint);
}
.footer__bottom ul{ display:flex; flex-wrap:wrap; gap:22px; }
.footer__bottom a:hover{ color:var(--fg-2); }

/* ---------- 17. PALETTE DE COMMANDES ---------- */
.palette{ position:fixed; inset:0; z-index:150; display:grid; place-items:start center; padding-top:14vh; }
.palette[hidden]{ display:none; }
.palette__scrim{ position:absolute; inset:0; background: rgba(2,4,7,.72); backdrop-filter: blur(6px); animation: fadeIn .25s var(--ease); }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.palette__panel{
  position:relative; width:min(600px, calc(100% - 32px));
  border:1px solid rgba(0,232,135,.25); border-radius: var(--r-md); overflow:hidden;
  background: linear-gradient(180deg, #0A1016, #070B0F);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.95), 0 0 60px -30px rgba(0,232,135,.6);
  animation: paletteIn .32s var(--ease-out);
}
@keyframes paletteIn{ from{ opacity:0; transform: translateY(-12px) scale(.98) } to{ opacity:1; transform:none } }
.palette__field{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line-soft); }
.palette__prompt{ font-family:var(--f-mono); color:var(--signal); }
.palette__field input{ flex:1; background:none; border:0; outline:none; font-family:var(--f-mono); font-size:14px; color:var(--fg); }
.palette__field input::placeholder{ color:var(--faint); }
.palette__list{ max-height:46vh; overflow-y:auto; padding:8px; }
.palette__list li{
  display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:9px; cursor:pointer;
  font-size:14px; color:var(--fg-2);
}
.palette__list li .p-icon{ font-family:var(--f-mono); font-size:11px; color:var(--faint); width:22px; }
.palette__list li .p-sub{ margin-left:auto; font-family:var(--f-mono); font-size:11px; color:var(--faint); }
.palette__list li.is-active{ background: rgba(0,232,135,.1); color:#fff; box-shadow: inset 2px 0 0 var(--signal); }
.palette__list li.is-active .p-icon{ color:var(--signal); }
.palette__empty{ padding:24px; text-align:center; font-family:var(--f-mono); font-size:12.5px; color:var(--faint); }
.palette__foot{
  display:flex; gap:18px; align-items:center; padding:11px 16px; border-top:1px solid var(--line-soft);
  font-size:11.5px; color:var(--faint);
}
.palette__foot span:last-child{ margin-left:auto; font-family:var(--f-mono); }

/* ---------- 17b. ÉTUDES DE CAS ----------
   Styles prêts mais non utilisés : la section Réalisations est à écrire
   (cf. TODO.md). Le balisage type est conservé dans TODO.md.            */
.cases{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:18px; }
.case{
  position:relative; display:flex; flex-direction:column;
  padding:30px 28px; border-radius: var(--r-lg);
  border:1px solid var(--line-soft); overflow:hidden; isolation:isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.006));
  transition: transform .45s var(--ease-out), border-color .45s var(--ease);
}
.case::before{
  content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit;
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,0%), rgba(0,232,135,.15), transparent 62%);
  opacity:0; transition: opacity .4s var(--ease);
}
.case:hover{ transform: translateY(-5px); border-color: rgba(0,232,135,.26); }
.case:hover::before{ opacity:1; }
.case__tag{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:20px;
  font-family: var(--f-mono); font-size:11px; letter-spacing:.05em; color: var(--faint);
}
.case__tag span{
  padding:4px 11px; border-radius:999px; color: var(--signal);
  border:1px solid rgba(0,232,135,.25); background: rgba(0,232,135,.07);
  letter-spacing:.12em; text-transform:uppercase;
}
.case h3{ font-size:20px; margin-bottom:12px; letter-spacing:-.02em; }
.case__body{ font-size:14.6px; color: var(--fg-2); flex:1; }
.case__metrics{ display:grid; gap:13px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft); }
.case__metrics li{ display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:14px; }
.case__metrics b{
  min-width:88px; font-family: var(--f-display); font-weight:700; font-size:24px;
  color:#fff; letter-spacing:-.03em; font-variant-numeric: tabular-nums;
}
.case__metrics small{ font-size:12.8px; color: var(--muted); }

/* ---------- 17c. CALCULATEUR DE ROI ---------- */
.roi{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items:center; }
.roi__copy h2{ font-size: clamp(28px,3.6vw,46px); }
.roi__caveat{
  margin-top:26px; padding:16px 18px; border-radius: var(--r-md);
  border:1px solid var(--line-soft); background: rgba(255,255,255,.015);
  font-size:13.6px; color: var(--muted);
}
.roi__caveat b{ color: var(--fg-2); }

.roi__panel{
  padding: clamp(24px,3vw,36px); border-radius: var(--r-lg);
  border:1px solid rgba(0,232,135,.22);
  background: linear-gradient(170deg, rgba(0,232,135,.075), rgba(124,92,255,.05) 62%, rgba(255,255,255,.012));
  box-shadow: 0 34px 80px -50px rgba(0,232,135,.85);
}
.roi__field{ display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:6px 12px; margin-bottom:20px; }
.roi__field label{ font-size:13.5px; color: var(--fg-2); }
.roi__field output{
  font-family: var(--f-display); font-weight:700; font-size:19px; color:#fff;
  letter-spacing:-.02em; font-variant-numeric: tabular-nums;
}
.roi__field input[type="range"]{
  grid-column:1 / -1; width:100%; height:20px; cursor:grab;
  accent-color: var(--signal); background:transparent;
}
.roi__field input[type="range"]:active{ cursor:grabbing; }

.roi__result{
  display:grid; gap:1px; margin:28px 0 18px; overflow:hidden;
  border:1px solid var(--line-soft); border-radius: var(--r-md); background: var(--line-soft);
}
.roi__result div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:15px 18px; background: rgba(4,8,12,.88);
}
.roi__result small{ font-size:13px; color: var(--muted); }
.roi__result b{
  font-family: var(--f-display); font-weight:700; font-size: clamp(19px,2.1vw,25px);
  color:#fff; letter-spacing:-.03em; white-space:nowrap; font-variant-numeric: tabular-nums;
}
.roi__note{
  min-height:3.6em; margin-bottom:22px; padding-left:14px;
  border-left:2px solid var(--signal); font-size:13.4px; color: var(--fg-2);
}

/* ---------- 17d. PAGES ANNEXES (légal, éditorial) ---------- */
.doc{
  position:relative;
  padding-top: calc(var(--nav-h) + clamp(38px,6vw,72px));
  padding-bottom: var(--sec-y);
}
.doc::before{
  content:""; position:absolute; inset:0 0 auto; height:520px; z-index:-1;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,232,135,.07), transparent 70%),
              radial-gradient(40% 70% at 85% 0%, rgba(124,92,255,.07), transparent 70%);
}
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:26px;
  font-family: var(--f-mono); font-size:11.5px; letter-spacing:.04em; color: var(--faint);
}
.crumb a{ color: var(--muted); transition: color .25s; }
.crumb a:hover{ color: var(--signal); }

.doc__head{ max-width:64ch; margin-bottom: clamp(34px,5vw,58px); }
.doc__head h1{ font-size: clamp(29px,4.4vw,52px); letter-spacing:-.035em; text-wrap:balance; }
.doc__lead{ margin-top:20px; font-size: clamp(16px,1.05vw,18.5px); color: var(--fg-2); }
.doc__meta{
  margin-top:22px; font-family: var(--f-mono); font-size:11.5px;
  letter-spacing:.06em; color: var(--faint);
}
.doc__grid{ display:grid; grid-template-columns:232px minmax(0,1fr); gap: clamp(28px,4vw,64px); align-items:start; }
.doc__toc{ position:sticky; top: calc(var(--nav-h) + 26px); }
.doc__toc h2{
  font-family: var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--faint); font-weight:500; margin-bottom:14px;
}
.doc__toc ol{ display:grid; gap:2px; }
.doc__toc a{
  display:block; padding:6px 0 6px 13px; font-size:13.3px; color: var(--muted);
  border-left:1px solid var(--line); transition: color .25s, border-color .25s;
}
.doc__toc a:hover{ color: var(--signal); border-left-color: var(--signal); }

.doc__body{ max-width:80ch; }
.doc__body > section + section{ margin-top: clamp(34px,4vw,54px); }
.doc__body h2{
  font-size: clamp(20px,2.2vw,27px); margin-bottom:16px;
  scroll-margin-top: calc(var(--nav-h) + 22px);
}
.doc__body h3{ font-size:16.5px; margin:26px 0 10px; }
.doc__body p{ font-size:15.2px; margin-bottom:14px; }
.doc__body p:last-child{ margin-bottom:0; }
.doc__body ul, .doc__body ol{ display:grid; gap:10px; margin:14px 0 18px; }
.doc__body li{ position:relative; padding-left:21px; font-size:15px; color: var(--fg-2); }
.doc__body ul li::before{
  content:""; position:absolute; left:2px; top:.64em;
  width:5px; height:5px; border-radius:1px; background: var(--signal-lo);
}
.doc__body ol{ counter-reset: oli; }
.doc__body ol li{ counter-increment: oli; }
.doc__body ol li::before{
  content: counter(oli); position:absolute; left:0; top:0;
  font-family: var(--f-mono); font-size:11.5px; color: var(--signal);
}
.doc__body a{ color: var(--signal); border-bottom:1px solid rgba(0,232,135,.3); }
.doc__body strong, .doc__body b{ color: var(--fg); font-weight:600; }
.doc__body dl{ margin:14px 0 18px; }
.doc__body dt{ font-weight:600; color: var(--fg); font-size:15px; margin-top:14px; }
.doc__body dd{ margin:4px 0 0; font-size:14.8px; }

.doc__table{ overflow-x:auto; margin:18px 0 22px; border:1px solid var(--line-soft); border-radius: var(--r-md); }
.doc__table table{ width:100%; border-collapse:collapse; font-size:13.8px; min-width:540px; }
.doc__table th{
  text-align:left; padding:13px 16px; font-family: var(--f-mono); font-size:10.5px;
  letter-spacing:.11em; text-transform:uppercase; color: var(--faint); font-weight:500;
  background: rgba(255,255,255,.02); border-bottom:1px solid var(--line-soft);
}
.doc__table td{ padding:13px 16px; border-bottom:1px solid var(--line-soft); color: var(--fg-2); vertical-align:top; }
.doc__table tr:last-child td{ border-bottom:0; }

.doc__note{
  margin:20px 0; padding:18px 20px; border-radius: var(--r-md);
  border:1px solid var(--line-soft); background: rgba(255,255,255,.015); font-size:14.2px;
}
.doc__note--signal{ border-color: rgba(0,232,135,.25); background: rgba(0,232,135,.05); }
.doc__note--warn{ border-color: rgba(255,176,32,.28); background: rgba(255,176,32,.05); }
.doc__note p:first-child{ margin-top:0; }

/* Marqueur des informations que l'entreprise doit fournir */
mark.todo{
  background: rgba(255,176,32,.14); color: var(--warn);
  border:1px dashed rgba(255,176,32,.5); border-radius:5px;
  padding:1px 7px; font-family: var(--f-mono); font-size:.86em;
}
.doc__cta{
  margin-top: clamp(38px,5vw,60px); padding-top:30px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
}

/* ---------- 17e. PAGES SERVICE ----------
   Une page par service (services/*.html, es/servicios/*.html). Elles
   réutilisent .card, .steps, .qa et .cta : seuls le héros, les cas
   d'usage et la navigation vers les autres services sont propres.   */
.svc-hero{
  position:relative; isolation:isolate;
  padding-top: calc(var(--nav-h) + clamp(38px,6vw,72px));
  padding-bottom: clamp(40px,6vw,80px);
  /* Le halo .svc-hero__glow déborde de 8 % de chaque côté du visuel : sur mobile,
     où le visuel occupe toute la largeur, cela élargissait la page de 8 px.
     clip et non hidden, pour ne pas créer de conteneur de défilement et laisser
     le halo déborder verticalement comme prévu. */
  overflow-x: clip;
}
.svc-hero::before{
  content:""; position:absolute; inset:0 0 auto; height:680px; z-index:-1;
  background: radial-gradient(55% 100% at 28% 0%, rgba(0,232,135,.08), transparent 70%),
              radial-gradient(40% 70% at 82% 12%, rgba(124,92,255,.09), transparent 70%);
}
.svc-hero__grid{
  display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: clamp(32px,5vw,80px); align-items:center;
}
.svc-hero h1{ font-size: clamp(32px,4.6vw,60px); letter-spacing:-.035em; text-wrap:balance; }
.svc-hero__claim{
  margin-top:20px; max-width:34ch;
  font-family: var(--f-display); font-size: clamp(19px,1.7vw,24px); line-height:1.3;
  letter-spacing:-.015em; color: var(--fg);
}
.svc-hero__lead{ margin-top:16px; max-width:58ch; font-size: clamp(15.5px,1.05vw,17.5px); color: var(--fg-2); }
.svc-hero__cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
.svc-chips{ margin-top:30px; display:flex; flex-wrap:wrap; gap:8px; }
.svc-chips li{
  padding:6px 13px; border-radius:999px; border:1px solid var(--line);
  background: rgba(255,255,255,.018);
  font-family: var(--f-mono); font-size:11.5px; letter-spacing:.05em; color: var(--fg-2);
}
.svc-hero__media{ position:relative; margin:0; justify-self:center; width:min(100%, 470px); }
.svc-hero__media img{
  width:100%; height:auto; aspect-ratio: 2/3; object-fit:cover;
  border-radius: var(--r-xl); border:1px solid rgba(0,232,135,.22);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.95), 0 30px 80px -50px rgba(0,232,135,.6);
}
.svc-hero__glow{
  position:absolute; inset:10% -8% -6%; z-index:-1; border-radius:50%;
  background: radial-gradient(55% 50% at 50% 50%, rgba(0,232,135,.2), transparent 70%);
  filter: blur(50px);
}

.svc-sec{ padding-block: clamp(56px,7vw,110px); }

.svc-uses{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px,5vw,70px); align-items:start; }
.svc-uses .sec-head{ margin-bottom:0; }
.svc-uses__list{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.svc-uses__list li{
  display:flex; align-items:flex-start; gap:12px; padding:16px 18px;
  border-radius: var(--r-md); border:1px solid var(--line-soft); background: rgba(255,255,255,.014);
  font-size:14.6px; color: var(--fg-2);
  transition: border-color .3s var(--ease), color .3s;
}
.svc-uses__list li::before{
  content:""; flex:none; width:6px; height:6px; margin-top:.62em; border-radius:2px;
  background: var(--signal); box-shadow: 0 0 8px rgba(0,232,135,.6);
}
.svc-uses__list li:hover{ border-color: rgba(0,232,135,.3); color: var(--fg); }

.svc-more__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:12px; }
.svc-tile{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  aspect-ratio: 3/4; padding:18px; overflow:hidden; isolation:isolate;
  border-radius: var(--r-md); border:1px solid var(--line-soft);
  transition: border-color .4s var(--ease), transform .45s var(--ease-out);
}
.svc-tile img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  filter: brightness(.55) saturate(.85); transform: scale(1.06);
  transition: transform .8s var(--ease-out), filter .5s var(--ease);
}
.svc-tile::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(to top, rgba(3,6,10,.94), rgba(3,6,10,.25) 62%, transparent);
}
.svc-tile:hover{ border-color: rgba(0,232,135,.35); transform: translateY(-4px); }
.svc-tile:hover img{ transform:none; filter:none; }
.svc-tile__num{ font-family: var(--f-mono); font-size:11px; letter-spacing:.14em; color: var(--signal); }
.svc-tile__title{ font-family: var(--f-display); font-weight:600; font-size:17px; line-height:1.15; letter-spacing:-.01em; color:#fff; }

.cta__actions{ margin-top:36px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

/* ---------- 18. RESPONSIVE ---------- */
@container (max-width: 520px){
  .ui__tabs{ display:none; }
}

@media (max-width: 1080px){
  .svc-uses{ grid-template-columns:1fr; }
  .roi{ grid-template-columns:1fr; }
  /* minmax(0,1fr) et non 1fr : sinon la colonne ne peut pas descendre sous la
     largeur mini du tableau (540 px), qui élargit alors la page entière. */
  .doc__grid{ grid-template-columns:minmax(0,1fr); }
  .doc__toc{ position:static; }
  .faq{ grid-template-columns:1fr; }
  .faq .sec-head{ position:static; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width: 880px){
  .nav__links, .nav__login{ display:none; }
  .burger{ display:block; }
  .nav.is-open{ background: rgba(4,7,11,.96); backdrop-filter: blur(18px); }
  .nav__mobile{ display:flex; }
  .nav__mobile[hidden]{ display:none; }
  .steps::before, .steps::after{ display:none; }
  .step{ padding-top:0; padding-left:56px; }
  .step__num{ top:2px; }
  .steps{ gap:34px; }
  .hero{ min-height:auto; }

  /* Galerie : les panneaux s'empilent, le titre du panneau fermé passe à l'horizontale */
  .eg{ --eg-gap:8px; --eg-open:100cqw; flex-direction:column; height:620px; }
  .eg__desc{ display:none; }
  .eg__media img{ object-position: 50% 58%; }
  .eg__label{
    writing-mode: horizontal-tb; left:20px; top:50%; bottom:auto;
    transform: translateY(-50%); font-size:14px; gap:12px;
  }
  .eg__item.is-active .eg__label{ transform: translateY(-50%) scale(.5); }

  .svc-hero__grid{ grid-template-columns:1fr; }
  .svc-hero__media{ justify-self:stretch; width:100%; max-width:560px; }
  .svc-hero__media img{ aspect-ratio: 4/3; object-position: 50% 60%; }

  /* Film : les chapitres défilent à l'horizontale, l'actif est ramené en vue */
  .film__chapters{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .film__chapters::-webkit-scrollbar{ display:none; }
  .film__chapters li{ flex:0 0 auto; min-width:118px; scroll-snap-align:start; }
}

@media (max-width: 560px){
  /* Le header n'a plus la place : le CTA vit dans le menu */
  .brand__tag{ display:none; }
  .nav__actions .btn--primary{ display:none; }
  .nav__inner{ gap:14px; }
}

@media (max-width: 480px){
  /* la place manque : la barre de chapitres suffit à dire où l'on en est */
  .film__time{ display:none; }
}

@media (max-width: 620px){
  :root{ --sec-y: 76px; }
  .prism{ --cardw:min(322px,86vw); --cardh:296px; --r:clamp(150px,40vw,190px); }
  .prism__card{ padding:22px 20px; }
  .hero__stats{ gap:20px 28px; padding:20px; width:100%; }
  .hstat{ min-width:0; flex:1 1 40%; }
  .hero__cta .btn{ width:100%; }
  .terminal__body{ height:340px; }
  .film__host, .film__now{ display:none; }
  .film__win{ border-radius: var(--r-md); }
  .film__controls{ gap:8px; padding:8px 10px; }
  .film__link{ margin-left:auto; }
  .film__end{ gap:10px; padding:12px; }
  .film__end .btn{ --bh:36px; padding:0 14px; font-size:12.5px; }
  .film__end .btn svg{ width:14px; height:14px; }
  .compliance{ flex-direction:column; align-items:flex-start; }
  .footer__grid{ grid-template-columns:1fr; gap:34px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .fingerprint{ width:150%; opacity:.55; }
  .cta__form{ flex-direction:column; }
  /* en colonne, flex-basis porterait sur la hauteur : on la laisse au contenu */
  .cta__form input, .cta__form select, .cta__form textarea{ flex:none; }
  .cta__form .btn{ width:100%; }
  .svc-hero__cta .btn, .cta__actions .btn{ width:100%; }
  .svc-uses__list{ grid-template-columns:1fr; }
  .svc-more__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ---------- 19. MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .fp-layer--hot{ opacity:.55; }
  .fingerprint--hot{ -webkit-mask-image:none; mask-image:none; opacity:.55; }
  .scan-line{ display:none; }
  .fx-grain{ display:none; }
  .ui__chart .line{ stroke-dashoffset:0; }
  .ui__chart .area{ opacity:1; }
  /* le carrousel redevient une grille plane, sans rotation */
  .prism{ perspective:none; }
  .prism::before{ display:none; }
  .prism__stage{
    height:auto; transform:none; animation:none; transform-style:flat;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:16px;
  }
  .prism__face{ position:static; inset:auto; margin:0; width:auto; height:auto; transform:none; }
  .prism__card{ animation:none; opacity:1; height:100%; }
  .prism__hint{ display:none; }
}

/* ---------- 19b. PAGE 404 ---------- */
.err404{
  min-height: calc(100vh - var(--nav-h));
  display:flex; align-items:center;
  padding-block: clamp(80px,14vh,160px); text-align:center;
  position:relative; overflow:hidden;
}
.err404::before{ /* même lueur douce que les sections sombres, sans image */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(60% 50% at 50% 30%, rgba(0,232,135,.10), transparent 70%);
}
.err404__inner{ max-width:680px; margin-inline:auto; }
.err404__eyebrow{ justify-content:center; }
.err404__code{
  font-family: var(--f-display); font-weight:700; line-height:.9;
  font-size: clamp(96px, 20vw, 220px); letter-spacing:-.04em;
  margin:.1em 0 .05em;
}
.err404__title{ font-size: clamp(24px,3.4vw,40px); letter-spacing:-.02em; }
.err404__lead{ margin:18px auto 0; }
.err404__cta{ margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- 20. IMPRESSION ---------- */
@media print{
  .nav, .hero__bg, .fx-grain, .fx-vignette, .scroll-progress, .palette, .ticker-band{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ---------- 21. MISE EN PAUSE HORS-ÉCRAN (perf) ---------- */

/* Le navigateur saute entièrement la mise en page et le dessin des sections
   sorties du champ. Les hauteurs de repli sont mesurées, pas estimées : une
   valeur fausse ferait dériver la hauteur du document, donc sauter la barre
   de progression pendant le premier défilement. Le mot-clé « auto » fait
   mémoriser la taille réelle dès qu'une section a été rendue une fois.
   Le bandeau techno (54 px) n'y gagnerait rien et n'y figure pas.

   #contact en est exclu volontairement : content-visibility implique
   contain:paint, qui rogne la lueur basse de .cta et son écho d'empreinte
   (.cta__fp déborde de 420 px sous .cta). Comparaison pixel par pixel à
   l'appui — c'était la seule section concernée. */
#demo, #services, #cockpit, #methode, #roi, #faq{ content-visibility: auto; }
#demo    { contain-intrinsic-size: auto 2201px; }   /* terminal + film, mesuré à 1440×900 */
#services{ contain-intrinsic-size: auto  996px; }
#cockpit { contain-intrinsic-size: auto 1291px; }
#methode { contain-intrinsic-size: auto  821px; }
#roi     { contain-intrinsic-size: auto  666px; }
#faq     { contain-intrinsic-size: auto  647px; }

@media (max-width: 880px){
  #demo    { contain-intrinsic-size: auto 1523px; }   /* mesuré à 375×812 */
  #services{ contain-intrinsic-size: auto 1004px; }
  #cockpit { contain-intrinsic-size: auto  984px; }
  #methode { contain-intrinsic-size: auto 1494px; }
  #roi     { contain-intrinsic-size: auto 1093px; }
  #faq     { contain-intrinsic-size: auto 1136px; }
}


/* Une section franchement sortie du champ n'anime plus rien. La liste est
   explicite plutôt qu'un « * » : le sélecteur universel faisait remonter le
   recalcul de style à chaque bascule, ce qui reprenait d'une main ce qu'on
   gagnait de l'autre. Ce sont les seules animations « infinite » vivant dans
   une section — celles du héros passent par body.hero-out, plus bas. */
[data-section].is-off :is(
  .live-dot, .blink, .caret, .laptop__beam, .pulse-dot,
  .radar__sweep, .blip, .prism__stage, .prism__card,
  .ticker__track, .cta__fp, .film__ring
){ animation-play-state: paused; }
[data-section].is-off .film__wire::after,
[data-section].is-off .film__core::before{ animation-play-state: paused; }

body.hero-out .fingerprint--hot,
body.hero-out .scan-line,
body.hero-out .hero__halo,
body.hero-out .fp-layer--idle,
body.hero-out .hero__aurora,
body.hero-out .strike-scan::after,
body.hero-out .hero__scroll-line::after{
  animation-play-state: paused;
}