:root{--bg:#000;--tx:#e8e8ee;--mu:#8b8b97;--ln:rgba(255,255,255,.14);--pn:rgba(255,255,255,.035);--wh:#fff;--d:'Michroma',sans-serif;--b:'Manrope',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--tx);font:400 1.02rem/1.7 var(--b);overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit}
#stars{position:fixed;inset:0;z-index:-1;width:100%;height:100%}
:focus-visible{outline:2px solid var(--wh);outline-offset:3px}
.wrap{width:min(1120px,92%);margin:auto}
h1,h2,h3{font-family:var(--d);font-weight:400;line-height:1.15;color:var(--wh);letter-spacing:.01em}
h1{font-size:clamp(2.2rem,5.5vw,4.2rem)}h2{font-size:clamp(1.5rem,3.2vw,2.3rem);margin-bottom:1rem}h3{font-size:1rem}
p.lead{color:var(--mu);max-width:56ch;font-size:1.1rem}
/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:.3s}
nav.sc{background:rgba(0,0,0,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--ln)}
.nv{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font:400 1rem var(--d);color:var(--wh)}
.brand img{width:34px;height:34px;border-radius:8px}
.links{display:flex;gap:1.8rem;align-items:center;list-style:none}
.links a{text-decoration:none;color:var(--mu);font-size:.93rem;transition:.2s}.links a:hover{color:var(--wh)}
.btn{display:inline-block;padding:.8rem 1.5rem;border-radius:999px;border:1px solid var(--wh);background:var(--wh);color:#000!important;font-weight:700;text-decoration:none;font-size:.93rem;transition:.25s;position:relative;overflow:hidden}
.btn:hover{background:transparent;color:var(--wh)!important;box-shadow:0 0 30px rgba(255,255,255,.35)}
.btn.ghost{background:transparent;color:var(--wh)!important;border-color:var(--ln)}.btn.ghost:hover{border-color:var(--wh)}
.burger{display:none;background:none;border:1px solid var(--ln);color:#fff;border-radius:8px;padding:.45rem .7rem;font-size:1.1rem;cursor:pointer}
/* hero */
.hero{min-height:100vh;display:flex;align-items:center;padding:110px 0 60px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center}
.hero p.lead{margin:1.4rem 0 2rem}.cta{display:flex;gap:.9rem;flex-wrap:wrap}
.hero h1 span{display:block;background:linear-gradient(90deg,#fff,#777,#fff);background-size:200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sh 6s linear infinite}
@keyframes sh{to{background-position:200% 0}}
.orb{position:relative;aspect-ratio:1;width:100%;max-width:520px;margin:auto;animation:fl 7s ease-in-out infinite}
.orb img{width:100%;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle,#000 55%,transparent 72%);mask-image:radial-gradient(circle,#000 55%,transparent 72%)}
.orb i{position:absolute;inset:-4%;border-radius:50%;border:1px dashed var(--ln);animation:sp 40s linear infinite}
.orb i:nth-child(2){inset:-14%;animation-duration:70s;animation-direction:reverse}
.orb i::after{content:"";position:absolute;top:8%;left:50%;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 14px 3px #fff}
@keyframes sp{to{transform:rotate(360deg)}}@keyframes fl{50%{transform:translateY(-16px)}}
.in{opacity:0;transform:translateY(24px);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.in:nth-child(2){animation-delay:.15s}.in:nth-child(3){animation-delay:.3s}.in:nth-child(4){animation-delay:.45s}
@keyframes up{to{opacity:1;transform:none}}
/* sections */
section{padding:7rem 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--ln);padding:2.4rem 0}
.stats div{text-align:center;border-left:1px solid var(--ln)}.stats div:first-child{border:0}
.stats b{display:block;font:400 2rem var(--d);color:var(--wh)}.stats span{color:var(--mu);font-size:.9rem}
.feat{display:grid;grid-template-columns:repeat(3,1fr);margin-top:3rem;border:1px solid var(--ln);border-radius:20px;overflow:hidden}
.f{padding:2.2rem;border:1px solid var(--ln);margin:-.5px;position:relative;background:radial-gradient(300px circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.1),transparent 60%);transition:.3s}
.f svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.5;margin-bottom:1.3rem}
.f h3{margin-bottom:.7rem}.f p{color:var(--mu);font-size:.95rem}
.tabs{display:flex;gap:.6rem;margin:2.4rem 0 1.4rem;flex-wrap:wrap}
.tabs button{background:none;border:1px solid var(--ln);color:var(--mu);padding:.6rem 1.3rem;border-radius:999px;cursor:pointer;font:600 .9rem var(--b);transition:.2s}
.tabs button.on,.tabs button:hover{color:#000;background:#fff;border-color:#fff}
.cmds{display:none;border:1px solid var(--ln);border-radius:16px;background:var(--pn)}.cmds.on{display:block;animation:up .5s forwards;opacity:0}
.cmd{display:grid;grid-template-columns:210px 1fr;gap:1rem;padding:1.05rem 1.6rem;border-bottom:1px solid var(--ln)}.cmd:last-child{border:0}
.cmd code{font:600 .95rem ui-monospace,monospace;color:#fff}.cmd span{color:var(--mu)}
details{border-bottom:1px solid var(--ln);padding:1.3rem 0}summary{cursor:pointer;font-weight:700;color:#fff;list-style:none;display:flex;justify-content:space-between}
summary::after{content:"+";font-size:1.4rem;line-height:1;transition:.3s}details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--mu);margin-top:.8rem;max-width:70ch}
.end{text-align:center;padding:9rem 0;background:linear-gradient(#000,rgba(0,0,0,.45) 40%,#000),url(assets/banner.png) center/cover}
.end p.lead{margin:0 auto 2rem}
footer{border-top:1px solid var(--ln);padding:2.5rem 0;color:var(--mu);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}footer a{margin-left:1.4rem;text-decoration:none}footer a:hover{color:#fff}
.rv{opacity:0;transform:translateY(30px);transition:1s cubic-bezier(.2,.7,.2,1)}.rv.v{opacity:1;transform:none}
/* legal */
.legal{padding:140px 0 5rem;max-width:780px}.legal h1{font-size:clamp(1.7rem,4vw,2.6rem)}
.legal .up{color:var(--mu);margin:.8rem 0 2.5rem;font-size:.9rem}
.legal h2{font-size:1.1rem;margin:2.4rem 0 .7rem;padding-top:1.6rem;border-top:1px solid var(--ln)}
.legal p,.legal li{color:#c4c4cc;margin-bottom:.7rem}.legal ul{padding-left:1.3rem}.legal a{text-decoration:underline}
@media(max-width:860px){
.hero .wrap,.feat{grid-template-columns:1fr}.orb{max-width:340px;order:-1}.hero{padding-top:100px}
.stats{grid-template-columns:1fr 1fr;gap:1.6rem 0}.stats div:nth-child(3){border-left:0}
.cmd{grid-template-columns:1fr;gap:.2rem}section{padding:4.5rem 0}
.burger{display:block}.links{position:absolute;top:70px;left:0;right:0;flex-direction:column;background:#000;padding:1.5rem;border-bottom:1px solid var(--ln);display:none}.links.o{display:flex}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.in,.rv{opacity:1;transform:none}}
.chain{display:flex;align-items:center;margin:2.4rem 0 1rem;flex-wrap:wrap;gap:.5rem}
.node{padding:.9rem 1.5rem;border:1px solid var(--ln);border-radius:12px;font:600 .95rem var(--b);color:var(--mu);animation:lit 8s infinite}
.node:nth-child(3){animation-delay:2s}.node:nth-child(5){animation-delay:4s}.node:nth-child(7){animation-delay:6s}
.chain s{flex:0 0 36px;height:1px;background:var(--ln)}
@keyframes lit{0%,22%{color:#fff;border-color:#fff;box-shadow:0 0 24px rgba(255,255,255,.3)}28%,100%{color:var(--mu);border-color:var(--ln);box-shadow:none}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.tech{list-style:none}.tech li{padding:1rem 0;border-bottom:1px solid var(--ln);color:var(--mu)}.tech b{color:#fff;display:block}
.hp{border:1px solid var(--ln);border-radius:14px;background:var(--pn);padding:1.4rem 1.6rem;font-size:.95rem}.hp b{color:#fff}.hp p{color:var(--mu);margin:.2rem 0 .9rem}
.hp div{padding:.35rem 0;color:var(--mu)}.hp div em{font-style:normal;background:rgba(255,255,255,.12);color:#fff;border-radius:6px;padding:0 .45rem;margin-left:.3rem;font-size:.85rem}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:2rem}.chain s{display:none}}
/* vérification */
.vwrap{max-width:640px;padding:130px 0 5rem}
.vcard{border:1px solid var(--ln);border-radius:20px;background:var(--pn);padding:2.4rem}
.vcard h1{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:.5rem}
.vcard .sub{color:var(--mu)}
.steps{display:flex;gap:.5rem;margin:1.6rem 0;flex-wrap:wrap}
.steps span{flex:1;min-width:130px;border:1px solid var(--ln);border-radius:10px;padding:.5rem .7rem;color:var(--mu);font-size:.82rem;text-align:center;transition:.3s}
.steps span.on{color:#000;background:#fff;border-color:#fff;font-weight:700}
.vlead{color:var(--tx);margin-bottom:1rem}
.captcha{display:flex;gap:.8rem;align-items:center;margin:.6rem 0 1.2rem;flex-wrap:wrap}
.captcha span{display:inline-flex;border:1px solid var(--ln);border-radius:8px;overflow:hidden}
.captcha span svg{display:block}
#formulaire{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.vinput{background:#0a0a0f;border:1px solid var(--ln);border-radius:10px;color:#fff;padding:.75rem 1rem;font:600 1rem ui-monospace,monospace;letter-spacing:.3em;text-transform:uppercase;width:190px}
.btn.mini{padding:.55rem .95rem;font-size:.9rem}
.vmsg{display:none;border:1px solid var(--ln);border-left:3px solid #fff;border-radius:10px;padding:.9rem 1.1rem;margin-top:1.4rem;font-size:.95rem}
.vmsg.ok{display:block;border-left-color:#57f287}
.vmsg.no{display:block;border-left-color:#ed4245}
.vnote{color:var(--mu);font-size:.83rem;margin-top:1.6rem}
@media(max-width:860px){.vcard{padding:1.6rem}.vinput{width:100%}}