/* Couche "verre et néon" : surcharge style.css (chargée après). */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
:root{
  --bg:rgba(8,18,46,.5);--surface:rgba(18,38,86,.42);--line:rgba(125,180,255,.2);
  --text:#EAF1FF;--muted:#A3B6DB;--cyan:#5FD4FF;--glow:#4DA3FF;
  color-scheme:dark;
}
html{scrollbar-color:#2A4A8A #050B1D}
::selection{background:rgba(77,163,255,.45);color:#fff}
body{background:#040916;color:var(--text)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(900px 600px at 12% 8%,rgba(37,99,235,.30),transparent 60%),
  radial-gradient(800px 620px at 92% 28%,rgba(14,165,233,.18),transparent 60%),
  radial-gradient(900px 700px at 50% 105%,rgba(99,102,241,.20),transparent 60%)}
#fx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.cursor-glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,rgba(77,163,255,.17),transparent 62%);pointer-events:none;z-index:0;opacity:0;transition:opacity .4s;will-change:transform}
.cursor-glow.on{opacity:1}
main,.footer{position:relative;z-index:1}
a{color:var(--cyan)}a:hover{color:#fff}

/* sections translucides */
.hero{background:transparent}
.section--tint,.section--white{background:transparent}
.section--white{background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(95,160,255,.045))}
.section--dark{background:rgba(3,8,22,.38)}
.section+.section{border-top:1px solid rgba(125,180,255,.09)}
.footer{background:rgba(3,7,18,.7)}
.eyebrow{color:var(--cyan)}
h2{color:#fff;text-shadow:0 0 44px rgba(77,163,255,.28)}
.grad{background:linear-gradient(100deg,#93C5FD,#38BDF8,#A5B4FC,#93C5FD);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:220% 0}}

/* reveal sans verrouiller transform (hover libre) */
.js .reveal{opacity:0;transform:none;translate:0 26px;filter:blur(8px);
  transition:opacity .85s var(--ease),translate .85s var(--ease),filter .85s var(--ease),transform .35s var(--ease),border-color .35s,box-shadow .35s,background-color .35s}
.js .reveal.is-in{opacity:1;transform:none;translate:0 0;filter:none}

/* verre */
.card,.step,.principle,.skill,.faq details,.facts__box,.form{
  background:linear-gradient(150deg,rgba(60,110,220,.20),rgba(14,30,72,.46));
  border:1px solid rgba(135,185,255,.24);
  box-shadow:0 18px 50px rgba(0,8,30,.45),inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.card,.step,.skill,.principle{position:relative}
.step,.skill,.principle{transition:transform .35s var(--ease),border-color .35s,box-shadow .35s,background-color .35s}

/* bordure néon qui tourne au survol */
.card::after,.step::after,.skill::after,.principle::after,.faq details::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 55%,var(--cyan) 78%,#818CF8 90%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .4s;animation:spin 3.2s linear infinite paused}
.faq details{position:relative}
.card:hover::after,.step:hover::after,.skill:hover::after,.principle:hover::after,.faq details:hover::after,.faq details[open]::after{opacity:1;animation-play-state:running}
@keyframes spin{to{--ang:360deg}}

/* cartes : relief 3D + reflet */
.card::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(95,212,255,.22),transparent 60%)}
.card,.skill,.step{transform-style:preserve-3d}
.card:hover,.skill:hover,.step:hover{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px);
  border-color:rgba(95,212,255,.55);
  box-shadow:0 34px 70px rgba(20,70,200,.38),0 0 44px rgba(77,163,255,.28),inset 0 1px 0 rgba(255,255,255,.2)}
.principle:hover{transform:translateY(-5px) scale(1.015);border-color:rgba(95,212,255,.5);box-shadow:0 22px 50px rgba(20,70,200,.32),0 0 30px rgba(77,163,255,.22)}
.card__icon{background:linear-gradient(145deg,rgba(95,212,255,.28),rgba(37,99,235,.22));color:#BFE9FF;border:1px solid rgba(160,215,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 22px rgba(77,163,255,.25);transition:transform .45s var(--ease),box-shadow .45s}
.card:hover .card__icon{transform:translateY(-3px) scale(1.12) rotate(-7deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 34px rgba(95,212,255,.65)}
.card h3{color:#fff}
.tag{background:rgba(95,212,255,.15);color:var(--cyan);border:1px solid rgba(95,212,255,.35)}
.audience .card a.more{color:var(--cyan)}

/* chiffres */
.fact__num{color:#B5DCFF;text-shadow:0 0 28px rgba(95,212,255,.55)}
.fact{transition:background-color .3s}
.fact:hover{background:rgba(95,212,255,.07)}
.fact:hover .fact__num{text-shadow:0 0 38px rgba(95,212,255,.95)}

/* boutons */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s,border-color .3s,translate .25s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%)}
.btn:hover::after{transform:translateX(130%);transition:transform .85s var(--ease)}
.btn--primary{background:linear-gradient(135deg,#2563EB,#38A3FF);box-shadow:0 10px 30px rgba(37,99,235,.55),0 0 28px rgba(77,163,255,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.btn--primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 44px rgba(37,99,235,.7),0 0 46px rgba(95,212,255,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.btn--ghost{background:rgba(120,170,255,.10);border-color:rgba(150,200,255,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--ghost:hover{background:rgba(95,212,255,.16);border-color:rgba(95,212,255,.7);box-shadow:0 0 30px rgba(95,212,255,.35);transform:translateY(-3px)}
.btn:active{transform:translateY(0) scale(.98)}

/* navigation */
.site-header{background:rgba(5,12,32,.62)}
.nav__links a{position:relative;transition:color .25s,text-shadow .25s,background-color .25s}
.nav__links a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);transform:scaleX(0);transition:transform .35s var(--ease);box-shadow:0 0 10px var(--cyan)}
.nav__links a:hover{color:#fff;text-shadow:0 0 14px rgba(95,212,255,.8)}
.nav__links a:hover::after{transform:scaleX(1)}
.brand img{transition:transform .5s var(--ease),box-shadow .4s}
.brand:hover img{transform:rotate(-10deg) scale(1.1);box-shadow:0 0 22px rgba(95,212,255,.6)}

/* puces, onglets, démos */
.chips li{background:rgba(95,160,255,.12);border-color:rgba(150,200,255,.25);color:#D3E6FF}
.chips li:hover{border-color:var(--cyan);color:#fff;box-shadow:0 0 18px rgba(95,212,255,.5);transform:translateY(-3px) scale(1.05)}
.skill h3 .i,.principle .i,.checks--light .i{color:var(--cyan)}
.checks--light li{color:var(--text)}
.tab{background:rgba(120,170,255,.08);border-color:rgba(150,200,255,.22)}
.tab:hover{transform:translateY(-3px);box-shadow:0 0 24px rgba(95,212,255,.35);border-color:rgba(95,212,255,.6)}
.tab[aria-selected="true"]{background:linear-gradient(135deg,#2563EB,#38A3FF);box-shadow:0 10px 28px rgba(37,99,235,.6),0 0 30px rgba(95,212,255,.4)}
.win{border-color:rgba(135,185,255,.3);box-shadow:0 30px 80px rgba(0,8,30,.6),0 0 70px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.1)}
.rline{transition:transform .3s var(--ease),background-color .3s,border-color .3s}
.rline:hover{transform:translateX(6px);background:rgba(95,212,255,.09);border-color:rgba(95,212,255,.35)}
.file,.msg--bot{transition:transform .3s var(--ease),box-shadow .3s}
.file:hover{transform:translateY(-3px);box-shadow:0 0 26px rgba(95,212,255,.4)}
.folder:hover{box-shadow:0 0 24px rgba(95,212,255,.35)}
.box{transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.box:hover{border-color:rgba(95,212,255,.5);box-shadow:0 0 28px rgba(95,212,255,.22);transform:translateY(-3px)}
.marquee span{transition:color .25s,text-shadow .25s}
.marquee span:hover{color:#fff;text-shadow:0 0 16px rgba(95,212,255,.9)}
.step__n{background:linear-gradient(145deg,#12306E,#0A1A44);color:#BFE9FF;border-color:var(--cyan);box-shadow:0 0 0 0 rgba(95,212,255,.5);animation:ping 3s ease-out infinite;transition:transform .4s var(--ease)}
.step:hover .step__n{transform:scale(1.15) rotate(8deg)}
@keyframes ping{70%{box-shadow:0 0 0 14px rgba(95,212,255,0)}100%{box-shadow:0 0 0 0 rgba(95,212,255,0)}}

/* FAQ */
.faq summary{transition:color .25s}
.faq summary:hover{color:var(--cyan)}
.faq details[open]{box-shadow:0 18px 50px rgba(20,70,200,.3),0 0 34px rgba(77,163,255,.2)}
.faq summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FD4FF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}

/* formulaire */
.form{color:var(--text)}
.input{background:rgba(5,12,34,.62);border-color:rgba(135,185,255,.3);color:#EAF1FF}
.input::placeholder{color:#7F93BD}
.input:hover{border-color:rgba(95,212,255,.6)}
.input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(95,212,255,.18),0 0 26px rgba(95,212,255,.25)}
.input[aria-invalid="true"]{border-color:#F87171;box-shadow:0 0 0 4px rgba(248,113,113,.18)}
select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FB3D9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
select.input option{background:#0A1530;color:#EAF1FF}
.err{color:#FCA5A5}
.consent a{color:var(--cyan)}
.status.is-ok{background:rgba(74,222,128,.12);color:#86EFAC;border-color:rgba(74,222,128,.4)}
.status.is-bad{background:rgba(248,113,113,.12);color:#FCA5A5;border-color:rgba(248,113,113,.4)}
.status.is-info{background:rgba(96,165,250,.12);color:#BFDBFE;border-color:rgba(96,165,250,.4)}

/* ===== scène du héros ===== */
.hero__visual{perspective:none}
.scene{position:relative;width:100%;max-width:640px;margin-inline:auto;aspect-ratio:600/520;--px:0;--py:0}
.scene__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scene__lines path{fill:none;stroke:rgba(125,190,255,.45);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scene__lines .flow{stroke:#9FE3FF;stroke-width:2.5;stroke-dasharray:2 14;animation:flow 1.5s linear infinite;filter:drop-shadow(0 0 5px #5FD4FF)}
@keyframes flow{to{stroke-dashoffset:-32}}
.plat{position:absolute;inset:0}
.ring{position:absolute;left:50%;bottom:var(--b);width:var(--w);height:var(--h);translate:-50% 0;border-radius:50%;border:2px solid rgba(95,212,255,.85);box-shadow:0 0 26px rgba(77,163,255,.75),inset 0 0 26px rgba(77,163,255,.5);animation:ringpulse 4s ease-in-out infinite}
.ring--1{--w:80%;--h:21%;--b:0%;border-color:rgba(95,212,255,.45);background:radial-gradient(ellipse,rgba(20,50,130,.7),rgba(5,12,34,.85))}
.ring--2{--w:64%;--h:16%;--b:2.6%;animation-delay:-1.3s}
.ring--3{--w:46%;--h:10.5%;--b:5.4%;animation-delay:-2.6s;border-color:rgba(160,230,255,.95)}
@keyframes ringpulse{50%{opacity:.55;scale:.97 .97}}
.cyl{position:absolute;left:21%;top:49%;width:58%;height:30%;border:1px solid rgba(170,215,255,.32);border-top:0;border-radius:0 0 50% 50%/0 0 16% 16%;background:linear-gradient(90deg,rgba(130,190,255,.30),rgba(130,190,255,.04) 28%,rgba(130,190,255,.04) 72%,rgba(130,190,255,.30))}
.cyl::before{content:"";position:absolute;left:-1px;right:-1px;top:-8%;height:16%;border-radius:50%;border:1px solid rgba(190,230,255,.55);background:rgba(120,180,255,.10)}
.dome{position:absolute;left:27%;top:4%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 26%,rgba(200,230,255,.38),rgba(80,140,255,.12) 42%,rgba(20,50,130,.08) 70%);border:1px solid rgba(170,215,255,.38);box-shadow:inset 0 0 64px rgba(95,212,255,.25),0 0 90px rgba(77,163,255,.28);translate:calc(var(--px)*5px) calc(var(--py)*4px)}
.dome::after{content:"";position:absolute;inset:5%;border-radius:50%;border:2px solid transparent;border-top-color:rgba(255,255,255,.5);border-left-color:rgba(255,255,255,.22);transform:rotate(-18deg)}
.dome svg{position:absolute;inset:0;width:100%;height:100%;opacity:.55;animation:rot 70s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.robot{position:absolute;left:35%;top:9%;width:30%;translate:calc(var(--px)*12px) calc(var(--py)*9px);filter:drop-shadow(0 10px 20px rgba(0,10,40,.5))}
.robot__in{animation:bob 5s ease-in-out infinite}
.robot svg{display:block;width:100%;height:auto;overflow:visible}
.robot .head{transform-origin:100px 118px;transition:transform .6s var(--ease)}
.robot:hover .head{transform:rotate(-7deg) translateY(-2px)}
.robot .eyes{transform-box:fill-box;transform-origin:center;animation:blink 6s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.12)}}
.robot .ant{animation:antenna 2s ease-in-out infinite}
@keyframes antenna{50%{opacity:.35}}
@keyframes bob{50%{transform:translateY(-9px)}}
.shield{position:absolute;left:35.5%;top:41%;width:29%;translate:calc(var(--px)*16px) calc(var(--py)*12px);filter:drop-shadow(0 16px 26px rgba(0,10,40,.6)) drop-shadow(0 0 20px rgba(77,163,255,.5))}
.shield__in{animation:bob 6s -1.6s ease-in-out infinite;transition:filter .4s}
.shield svg{display:block;width:100%;height:auto}
.shield:hover .shield__in{filter:brightness(1.25) drop-shadow(0 0 26px rgba(95,212,255,.9))}
.tile{position:absolute;left:var(--x);top:var(--y);width:clamp(54px,13.5%,84px);aspect-ratio:1;translate:calc(-50% + var(--px)*var(--k,10)*1px) calc(-50% + var(--py)*var(--k,10)*1px)}
.tile__in{position:relative;width:100%;height:100%;display:grid;place-items:center;border-radius:22%;color:#CFE9FF;cursor:default;
  background:linear-gradient(145deg,rgba(160,205,255,.26),rgba(40,80,170,.20));border:1px solid rgba(170,215,255,.42);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 16px 40px rgba(0,10,40,.5),0 0 30px rgba(77,163,255,.26),inset 0 1px 0 rgba(255,255,255,.4);
  animation:bob 6s ease-in-out infinite;transition:transform .4s var(--ease),box-shadow .4s,color .3s}
.tile--b .tile__in{animation-delay:-1.5s}.tile--c .tile__in{animation-delay:-3s}.tile--d .tile__in{animation-delay:-4.5s}
.tile__in .i{width:42%;height:42%}
.tile__in:hover{transform:scale(1.14);color:#fff;box-shadow:0 20px 50px rgba(0,10,40,.55),0 0 50px rgba(95,212,255,.7),inset 0 1px 0 rgba(255,255,255,.5);animation-play-state:paused}
.tile__in::after{content:attr(data-label);position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 6px;white-space:nowrap;font-size:.74rem;font-weight:600;padding:5px 11px;border-radius:999px;background:rgba(8,18,46,.9);border:1px solid rgba(95,212,255,.45);color:#E7F3FF;opacity:0;pointer-events:none;transition:opacity .25s,translate .3s var(--ease)}
.tile__in:hover::after,.tile__in:focus-visible::after{opacity:1;translate:-50% 0}
.node{position:absolute;left:var(--x);top:var(--y);width:clamp(26px,6%,36px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;display:grid;place-items:center;color:var(--cyan);background:rgba(20,50,120,.55);border:1px solid rgba(160,215,255,.5);box-shadow:0 0 16px rgba(95,212,255,.5);animation:nodepulse 3s ease-in-out infinite}
.node .i{width:54%;height:54%}
@keyframes nodepulse{50%{box-shadow:0 0 28px rgba(95,212,255,.95);scale:1.1}}

/* mobile */
@media (max-width:640px){
  .cursor-glow{display:none}
  .scene{max-width:420px}
}
@media (prefers-reduced-motion:reduce){
  .scene *,.card::after,.step::after,.skill::after,.principle::after,.grad,.step__n,.ring,.node{animation:none!important}
  .js .reveal{filter:none;translate:0 0}
  .cursor-glow,#fx-canvas{display:none}
}