/* ===== Couche premium futuriste — noir / bleu foncé / blanc (2026-11-09) ===== */
:root{--fx-blue:hsl(224 92% 46%);--fx-deep:hsl(226 90% 24%);--fx-ice:hsl(220 30% 88%)}

/* Grain de film : texture premium, imperceptible mais riche */
body::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;transform:translateZ(0);will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Barre de progression de lecture */
.fx-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:101;transform-origin:0 50%;transform:scaleX(0);will-change:transform;
  background:linear-gradient(90deg,var(--fx-deep),var(--fx-blue) 70%,#fff);box-shadow:0 0 12px hsl(224 92% 50%/.7)}

/* Nav : filet lumineux quand on défile */
.nav-bar{position:relative}
.nav-bar::after{content:"";position:absolute;left:10%;right:10%;bottom:-1px;height:1px;opacity:0;transition:opacity .4s;
  background:linear-gradient(90deg,transparent,hsl(224 92% 55%/.9),#fff8,hsl(224 92% 55%/.9),transparent)}
.nav.scrolled .nav-bar::after{opacity:1}

/* HERO — aurores bleu nuit qui respirent (profondeur sans bleu clair) */
.hero::before{background:radial-gradient(closest-side,hsl(224 95% 38%/.42),hsl(226 90% 22%/.18) 55%,transparent 72%);
  inset:-25% -12% auto auto;animation:fx-drift1 18s ease-in-out infinite alternate;will-change:transform}
.hero::after{background:radial-gradient(closest-side,hsl(226 90% 30%/.32),transparent 70%);
  animation:fx-drift2 22s ease-in-out infinite alternate;will-change:transform}
@keyframes fx-drift1{to{transform:translate(-120px,80px) scale(1.12)}}
@keyframes fx-drift2{to{transform:translate(160px,-90px) scale(1.18)}}
/* Projecteur qui suit la souris + grille qui s'allume dessous */
.fx-spot{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,70%) var(--my,35%),hsl(224 92% 45%/.16),transparent 65%)}
.fx-gridlit{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(hsl(224 92% 60%/.35) 1px,transparent 1px),linear-gradient(90deg,hsl(224 92% 60%/.35) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(260px circle at var(--mx,70%) var(--my,35%),#000,transparent 70%);
          mask-image:radial-gradient(260px circle at var(--mx,70%) var(--my,35%),#000,transparent 70%)}

/* Titre : bleu royal profond + reflet argent + halo */
.hero h1 .grad{background:linear-gradient(100deg,hsl(224 92% 52%) 0%,hsl(224 92% 52%) 35%,hsl(220 40% 92%) 50%,hsl(224 92% 52%) 65%,hsl(226 88% 44%) 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:shine 7s linear infinite}
.grad{background:linear-gradient(100deg,hsl(224 92% 52%) 30%,hsl(0 0% 96%) 130%);-webkit-background-clip:text;background-clip:text}

/* Badge : point qui pulse + bord lumineux */
.badge{border-color:hsl(224 92% 50%/.45);background:linear-gradient(90deg,hsl(224 92% 45%/.14),hsl(224 92% 45%/.04));
  box-shadow:0 0 24px -6px hsl(224 92% 45%/.5) inset}

/* Vidéo hero : bordure de lumière qui tourne + halo bleu nuit qui respire */
.hero-video .frame{padding:1.5px;overflow:hidden;background:hsl(0 0% 100%/.06)}
.hero-video .frame::before{content:"";position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;margin:-100% 0 0 -100%;
  background:conic-gradient(transparent 0 62%,hsl(226 90% 30%) 72%,hsl(224 92% 55%) 82%,#fff 88%,transparent 94%);
  animation:fx-spin 6s linear infinite;will-change:transform}
@keyframes fx-spin{to{transform:rotate(360deg)}}
.hero-video .glow{inset:4% -18%;background:radial-gradient(closest-side,hsl(224 95% 40%/.55),hsl(226 90% 22%/.25) 60%,transparent);
  filter:blur(40px);animation:fx-breathe 5s ease-in-out infinite;will-change:opacity}
@keyframes fx-breathe{50%{opacity:.6}}
.hero-video .vcard{box-shadow:0 0 0 1px hsl(0 0% 100%/.08),0 50px 120px -30px hsl(0 0% 0%/.9),0 30px 90px -40px hsl(224 92% 40%/.6)}
.hero-video .chip{animation:fx-float 6s ease-in-out infinite;will-change:transform}.hero-video .chip.c2{animation-delay:-3s}
@keyframes fx-float{50%{transform:translateY(-10px)}}
/* Bulles (citation, stats) en verre */
.chip{backdrop-filter:none;-webkit-backdrop-filter:none;background:hsl(225 30% 6%/.92)!important;border-color:hsl(0 0% 100%/.12)!important;box-shadow:0 20px 50px -20px #000,0 0 0 1px hsl(224 92% 50%/.12) inset}

/* Boutons : dégradé profond, reflet qui balaie, halo au survol */
.btn-primary{position:relative;overflow:hidden;background:linear-gradient(180deg,hsl(224 92% 52%),hsl(226 90% 40%));
  box-shadow:0 1px 0 hsl(0 0% 100%/.25) inset,0 0 0 1px hsl(224 92% 60%/.5),0 12px 36px -10px hsl(224 92% 45%/.8)}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:0;transform:translateX(-160%) skewX(-20deg);will-change:transform;
  background:linear-gradient(90deg,transparent,hsl(0 0% 100%/.35),transparent);animation:fx-sheen 4.5s ease-in-out infinite}
@keyframes fx-sheen{0%,60%{transform:translateX(-160%) skewX(-20deg)}100%{transform:translateX(330%) skewX(-20deg)}}
.btn-primary:hover{box-shadow:0 1px 0 hsl(0 0% 100%/.3) inset,0 0 0 1px hsl(224 92% 65%/.7),0 16px 50px -8px hsl(224 92% 50%/.9)}
.btn-ghost{background:hsl(0 0% 100%/.02)}
.btn-ghost:hover{border-color:hsl(224 92% 55%/.6);box-shadow:0 0 30px -10px hsl(224 92% 50%/.7)}
.logo-mark{background:linear-gradient(135deg,hsl(224 92% 55%),hsl(226 90% 28%));box-shadow:0 0 0 1px hsl(0 0% 100%/.18) inset,0 8px 26px -6px hsl(224 92% 45%/.8)}

/* Sections : filet de lumière entre chaque, lueur nuit en haut */
section+section::before{content:"";position:absolute;top:0;left:50%;width:min(900px,80%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,hsl(224 92% 50%/.55),hsl(0 0% 100%/.5),hsl(224 92% 50%/.55),transparent)}
section+section::after{content:"";position:absolute;top:0;left:50%;width:min(700px,70%);height:220px;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at top,hsl(224 92% 40%/.16),transparent 70%)}
section{isolation:isolate}

/* Eyebrows : petite ligne lumineuse */
.sec-head .eyebrow{display:inline-flex!important;align-items:center;gap:12px;color:hsl(224 80% 66%)}
.sec-head .eyebrow::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,hsl(224 92% 60%));box-shadow:0 0 8px hsl(224 92% 55%)}

/* Cartes : projecteur qui suit la souris + bord qui s'allume */
.fx-card{position:relative;isolation:isolate}
.fx-card>.fx-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx) var(--my),hsl(224 92% 50%/.16),transparent 45%)}
.fx-card>.fx-edge{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .35s;padding:1px;
  background:radial-gradient(260px circle at var(--mx) var(--my),hsl(224 92% 62%),hsl(0 0% 100%/.4) 25%,transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fx-card:hover>.fx-glow,.fx-card:hover>.fx-edge{opacity:1}
.fx-card>*:not(.fx-glow):not(.fx-edge){position:relative;z-index:1}
.pillar,.testi,.kpi{background:linear-gradient(180deg,hsl(225 20% 6%/.9),hsl(0 0% 3%/.9))}
.pillar .ico{background:linear-gradient(135deg,hsl(224 92% 45%/.25),hsl(226 90% 20%/.15));border-color:hsl(224 92% 55%/.4);box-shadow:0 0 24px -6px hsl(224 92% 45%/.6)}
.dash{box-shadow:0 60px 140px -50px hsl(224 92% 35%/.7),0 0 0 1px hsl(224 92% 50%/.12),0 1px 0 hsl(0 0% 100%/.06) inset}
.excl{border-color:hsl(224 92% 50%/.45);background:radial-gradient(120% 140% at 100% 0%,hsl(224 92% 40%/.28),transparent 55%),radial-gradient(80% 100% at 0% 100%,hsl(226 90% 25%/.25),transparent 60%),var(--card)}
.strip span::after{color:hsl(224 92% 58%);text-shadow:0 0 10px hsl(224 92% 50%)}
.strip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

/* Apparitions : flou → net, montée, en cascade */
.rv,.fx-rv{opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--fx-d,0s)}
.rv.in,.fx-rv.in{opacity:1;transform:none}

/* Hero hors écran = animations en pause (zéro travail pendant qu'on lit le reste) */
.hero.fx-off::before,.hero.fx-off::after,.hero.fx-off .frame::before,.hero.fx-off .glow,.hero.fx-off .chip,.hero.fx-off .grad{animation-play-state:paused}
@media (max-width:760px){.fx-spot,.fx-gridlit{display:none}}
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.hero-video .chip,.hero-video .frame::before,.hero-video .glow,.btn-primary::after,.hero h1 .grad{animation:none!important}
  .rv,.fx-rv{opacity:1;transform:none;filter:none;transition:none}}

/* ===== Mobile : finitions (2026-11-09) ===== */
@media (max-width:640px){
  .logo{gap:10px;font-size:16px;letter-spacing:.12em}
  .logo-text span{display:inline!important}
  .logo-mark{width:34px;height:34px;font-size:13px}
  .badge{font-size:10px;letter-spacing:.08em;padding:8px 12px 8px 9px;gap:8px;white-space:nowrap;max-width:100%}
  .hero .ctas{flex-direction:column;align-items:stretch}
  .hero .ctas .btn{width:100%;justify-content:center;height:56px}
  .hero-note{gap:10px 16px}
  summary,.faq summary{min-height:44px;display:flex;align-items:center}
  .crumbs a{display:inline-block;padding:12px 4px;margin:-12px -4px}
  .sec-head .eyebrow::before{width:20px}
  section+section::after{height:160px}
  .hero::before{width:600px;height:600px}
}
@media (max-width:380px){
  .logo{font-size:14px;letter-spacing:.1em}
  .nav .btn{padding:0 12px;font-size:11px}
  .badge{font-size:9px}
}
/* Mobile : aucun survol, pas d'effets de carte inutiles */
@media (hover:none){.fx-glow,.fx-edge{display:none}}
.faces{flex-shrink:0}.faces img{flex-shrink:0}