:root{--bg:#ffffff;--bg2:#f7f3f3;--ink:#1c1214;--mute:#5e5255;--line:#e8dcde;--sig:#be1522;--ok:#12805c;--bad:#be1522;--mid:#b86b00;--on-sig:#ffffff;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 "Manrope",system-ui,sans-serif}
h1,h2,h3{font-family:"Manrope",system-ui,sans-serif;line-height:1.08;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--sig);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;gap:20px;height:60px}
.logo{display:flex;align-items:center;gap:10px;font:800 1.35rem "Manrope",system-ui,sans-serif;text-decoration:none;margin-right:auto}
.logo i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--sig);margin-right:8px;animation:pulse 2s infinite}
nav a.l{text-decoration:none;color:var(--mute);font-size:.95rem}
nav a.l:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--sig);color:var(--on-sig);font:700 1rem "Manrope",system-ui,sans-serif;padding:12px 22px;border:0;border-radius:6px;cursor:pointer;text-decoration:none}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
@keyframes pulse{50%{opacity:.35}}
.cyber-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1;opacity:.75}.cyber-grid{position:absolute;inset:-20%;background-image:linear-gradient(rgba(190,21,34,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(190,21,34,.055) 1px,transparent 1px);background-size:44px 44px;transform:perspective(520px) rotateX(62deg) translateY(18%);transform-origin:center bottom;mask-image:linear-gradient(to bottom,transparent 0%,black 45%,transparent 100%);animation:gridDrift 14s linear infinite}.cyber-glow{position:absolute;width:42vw;height:42vw;max-width:560px;max-height:560px;right:-8%;top:3%;border-radius:50%;background:radial-gradient(circle,rgba(190,21,34,.12),rgba(190,21,34,.035) 42%,transparent 70%);filter:blur(2px);animation:glowPulse 5s ease-in-out infinite}.cyber-ring{position:absolute;right:7%;top:16%;width:min(35vw,390px);aspect-ratio:1;border:1px solid rgba(190,21,34,.14);border-radius:50%;box-shadow:0 0 0 28px rgba(190,21,34,.025),0 0 0 58px rgba(190,21,34,.018);animation:ringSpin 24s linear infinite}.cyber-ring:before,.cyber-ring:after{content:"";position:absolute;inset:11%;border:1px dashed rgba(190,21,34,.13);border-radius:50%}.cyber-ring:after{inset:31%;border-style:solid;border-color:rgba(190,21,34,.18) transparent}.cyber-beam{position:absolute;right:6%;top:16%;width:min(37vw,410px);height:2px;background:linear-gradient(90deg,transparent,rgba(190,21,34,.7),transparent);box-shadow:0 0 18px rgba(190,21,34,.35);transform-origin:right center;animation:radarSweep 4.5s linear infinite}.cyber-node{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--sig);box-shadow:0 0 0 5px rgba(190,21,34,.08),0 0 18px rgba(190,21,34,.45);animation:nodePulse 2.2s ease-in-out infinite}.cyber-node.n1{right:24%;top:27%}.cyber-node.n2{right:15%;top:43%;animation-delay:.7s}.cyber-node.n3{right:31%;top:58%;animation-delay:1.2s}.cyber-label{position:absolute;right:10%;top:64%;font:600 .66rem ui-monospace,monospace;letter-spacing:.16em;color:rgba(190,21,34,.48);text-transform:uppercase}.hero{position:relative;isolation:isolate}.hero h1{position:relative;text-wrap:balance}.hero h1:after{content:"";position:absolute;left:0;bottom:-7px;width:72px;height:2px;background:var(--sig);box-shadow:0 0 14px rgba(190,21,34,.45);transform-origin:left;animation:lineReveal 1.1s .55s both}.feed{position:relative;box-shadow:0 18px 50px rgba(28,18,20,.08),0 0 0 1px rgba(190,21,34,.03);transition:transform .45s ease,box-shadow .45s ease}.feed:hover{transform:translateY(-5px) rotateX(1deg) rotateY(-1deg);box-shadow:0 25px 65px rgba(28,18,20,.13),0 0 30px rgba(190,21,34,.08)}.feed:before{content:"";position:absolute;left:0;right:0;top:62px;height:2px;background:linear-gradient(90deg,transparent,var(--sig),transparent);box-shadow:0 0 14px rgba(190,21,34,.55);opacity:.65;animation:scanFeed 3.2s linear infinite;z-index:2}#log div{animation:threatIn .38s ease both}.tab{position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease,background .25s ease}.tab:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);transition:transform .5s}.tab:hover{transform:translateY(-2px);border-color:rgba(190,21,34,.35)}.tab:hover:after{transform:translateX(120%)}.panel{position:relative;overflow:hidden;box-shadow:0 15px 45px rgba(28,18,20,.055);transition:box-shadow .4s ease,transform .4s ease}.panel:after{content:"SECURE // ACTIVE";position:absolute;right:18px;top:14px;font:600 .58rem ui-monospace,monospace;letter-spacing:.13em;color:rgba(190,21,34,.45)}.panel:hover{transform:translateY(-4px);box-shadow:0 22px 55px rgba(28,18,20,.09)}.panel .art{position:relative;overflow:hidden;border-radius:8px}.panel .art:after{content:"";position:absolute;left:0;right:0;top:-20%;height:2px;background:linear-gradient(90deg,transparent,var(--sig),transparent);box-shadow:0 0 18px rgba(190,21,34,.45);animation:artScan 4s linear infinite}.stat{position:relative;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease}.stat:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(190,21,34,.05),transparent 65%);transform:translateX(-100%);transition:transform .8s}.stat:hover{transform:translateY(-5px);box-shadow:0 18px 45px rgba(28,18,20,.08)}.stat:hover:before{transform:translateX(100%)}.quiz{position:relative;overflow:hidden}.quiz:before{content:"";position:absolute;right:-80px;top:-80px;width:180px;height:180px;border:1px solid rgba(190,21,34,.12);border-radius:50%;box-shadow:0 0 0 22px rgba(190,21,34,.025),0 0 0 44px rgba(190,21,34,.015);animation:ringSpin 18s linear infinite}@keyframes gridDrift{to{transform:perspective(520px) rotateX(62deg) translateY(12%)}}@keyframes glowPulse{50%{transform:scale(1.08);opacity:.7}}@keyframes ringSpin{to{transform:rotate(360deg)}}@keyframes radarSweep{0%{transform:rotate(-18deg)}50%,100%{transform:rotate(342deg)}}@keyframes nodePulse{50%{transform:scale(1.45);box-shadow:0 0 0 9px rgba(190,21,34,.03),0 0 24px rgba(190,21,34,.65)}}@keyframes lineReveal{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}@keyframes scanFeed{0%{top:62px;opacity:0}15%{opacity:.7}85%{opacity:.7}100%{top:calc(100% - 3px);opacity:0}}@keyframes threatIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}@keyframes artScan{0%{top:-10%}100%{top:110%}}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:64px 0 56px}
.hero h1{font-size:clamp(2.2rem,5.4vw,3.9rem);font-weight:800;letter-spacing:-.02em}
.hero p{color:var(--mute);max-width:46ch;margin:20px 0 28px;font-size:1.1rem}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.feed{background:var(--bg2);border:1px solid var(--line);border-radius:10px;overflow:hidden;font:.82rem/1.5 ui-monospace,Menlo,Consolas,monospace}
.feed .top{display:flex;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-family:"Manrope",system-ui,sans-serif;font-size:.9rem}
.feed .top b{color:var(--ok);font-variant-numeric:tabular-nums}
#log{height:290px;overflow:hidden;padding:10px 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px}
#log div{display:flex;gap:10px;white-space:nowrap;overflow:hidden}
#log .t{color:var(--mute)}#log .ok{color:var(--ok)}#log .bad{color:var(--bad)}
section{padding:64px 0;border-top:1px solid var(--line)}
section h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700;margin-bottom:12px;max-width:20ch}
.lead{color:var(--mute);max-width:58ch;margin:0 0 32px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.tab{background:none;border:1px solid var(--line);color:var(--mute);padding:9px 16px;border-radius:999px;cursor:pointer;font:500 .95rem "Manrope",system-ui,sans-serif}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.panel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:28px}
.service-transition>*{animation:service-content-in .6s cubic-bezier(.2,.75,.25,1) both;backface-visibility:hidden}
.service-transition>*:nth-child(2){animation-delay:.07s}
@keyframes service-content-in{from{opacity:0;transform:perspective(900px) rotateY(-12deg) translateZ(-24px)}to{opacity:1;transform:perspective(900px) rotateY(0) translateZ(0)}}
.panel h3{font-size:1.5rem;margin-bottom:10px}
.panel p{margin:0;color:var(--mute)}
.art img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:8px}.panel ul{margin:16px 0 0;padding-left:18px}
.panel li{margin-bottom:8px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.stat{border-left:3px solid var(--sig);padding-left:16px}
.stat b{display:block;font:800 2.4rem "Manrope",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.stat span{color:var(--mute)}
.quiz{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:28px;max-width:720px}
.bar{height:6px;background:var(--line);border-radius:3px;margin-bottom:22px;overflow:hidden}
.bar div{height:100%;width:0;background:var(--sig);transition:width .3s}
.quiz h3{font-size:1.35rem;margin-bottom:18px}
.opts{display:grid;gap:10px}
.opt{text-align:left;background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:13px 16px;border-radius:8px;cursor:pointer;font:400 1rem "Manrope",system-ui,sans-serif}
.opt:hover{border-color:var(--sig)}
.score{font:800 4rem "Manrope",system-ui,sans-serif;line-height:1}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px}
form{display:grid;gap:14px}
label{display:grid;gap:6px;font-weight:500;font-size:.95rem}
input,select,textarea{background:var(--bg2);border:1px solid var(--line);color:var(--ink);padding:12px;border-radius:6px;font:inherit}
#ok{display:none;border:1px solid var(--ok);color:var(--ok);padding:14px;border-radius:6px}
footer{border-top:1px solid rgba(190,21,34,.12);padding:42px 0 24px;color:var(--mute);font-size:.9rem;background:radial-gradient(circle at top left,rgba(190,21,34,.18),transparent 28%),linear-gradient(180deg,#1b1112 0%,#140d0e 100%);color:#f3eaea;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr) minmax(0,1.05fr);gap:32px;align-items:flex-start}
.footer-brand,.footer-column{display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:100%}
.footer-column{min-width:0;width:100%}
.footer-brand{padding-right:16px}
.footer-brand .logo{color:#fff;margin-right:0;display:inline-flex;align-items:center;max-width:100%}
.footer-brand .logo-mark{display:inline-flex;align-items:center;gap:0}
.footer-brand .logo img{filter:brightness(1.08);max-width:100%;height:auto}
.footer-brand p{margin:0;color:rgba(243,234,234,.78);max-width:36ch;line-height:1.7}
.footer-badge{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:7px 10px;border-radius:999px;border:1px solid rgba(190,21,34,.26);background:rgba(190,21,34,.08);color:#ffdfe0;font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.footer-badge:before{content:"";display:block;width:7px;height:7px;border-radius:50%;background:var(--sig);box-shadow:0 0 12px rgba(190,21,34,.9)}
.footer-column h3{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:4px}
.footer-links,.footer-contacts{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;height:auto;min-width:0}
.footer-links a,.footer-contacts a{display:inline-flex;align-items:center;gap:10px;min-height:42px;width:100%;padding:9px 12px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(255,255,255,.02);color:rgba(243,234,234,.8);text-decoration:none;transition:color .2s ease,transform .2s ease,border-color .2s ease,background .2s ease;overflow-wrap:anywhere;word-break:break-word}
.footer-links a:hover,.footer-contacts a:hover,.footer-links a:focus-visible,.footer-contacts a:focus-visible{color:#fff;transform:translateX(2px);border-color:rgba(190,21,34,.35);background:rgba(190,21,34,.08);text-decoration:none}
.footer-contacts i{width:1.1em;color:var(--sig);text-align:center;flex-shrink:0}
.footer-contacts .fa-whatsapp{color:#25d366}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;margin-top:20px;border-top:1px solid rgba(255,255,255,.08);color:rgba(243,234,234,.72)}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr;gap:22px}.footer-bottom{flex-direction:column;align-items:flex-start}} 
@media(max-width:700px){.footer-links,.footer-contacts{gap:8px}.footer-bottom{padding-top:14px;margin-top:14px}.footer-links a,.footer-contacts a{padding:8px 10px}.footer-badge{letter-spacing:.08em;font-size:.58rem}} 
@media (max-width:820px){.hero,.panel,.contact{grid-template-columns:1fr}.stats{grid-template-columns:1fr}nav a.l{display:none}.hero{padding-top:36px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Animations et survols */
main,footer{position:relative;z-index:1}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;display:grid;grid-template-columns:repeat(var(--c,1),1fr);grid-template-rows:repeat(var(--r,1),1fr)}
#bg i{width:5px;height:5px;border-radius:50%;background:var(--sig);opacity:.16;justify-self:center;align-self:center}
#trace{position:fixed;right:8px;top:0;width:28px;height:100vh;z-index:2;pointer-events:none;display:none}
@media (min-width:1180px){#trace{display:block}}
.js .rv,.js .hero p,.js .hero .cta,.js .feed{opacity:0}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em}
.w span{display:inline-block}
.btn{transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px -8px var(--sig)}
.btn:active{transform:translateY(0)}
.btn.ghost:hover{border-color:var(--sig);color:var(--sig);box-shadow:none}
nav a.l{background:linear-gradient(var(--sig),var(--sig)) 0 100%/0 2px no-repeat;padding-bottom:3px;transition:background-size .25s,color .2s}
nav a.l:hover{background-size:100% 2px}
.logo img{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.logo:hover img{transform:rotate(-10deg) scale(1.12)}
.tab{transition:all .2s}
.tab:hover{border-color:var(--sig);color:var(--ink);transform:translateY(-2px)}
.art{overflow:hidden;border-radius:8px}
.art img{transition:transform .7s}
.panel:hover .art img{transform:scale(1.06)}
.stat{transition:border-color .2s,transform .25s}
.stat b{transition:color .2s}
.stat:hover{transform:translateX(6px)}
.stat:hover b{color:var(--sig)}
.feed{transition:border-color .25s,box-shadow .25s}
.feed:hover{border-color:var(--sig);box-shadow:0 12px 30px -14px var(--sig)}
.opt{transition:transform .2s,border-color .2s,background .2s}
.opt:hover{transform:translateX(8px);background:var(--bg2)}
input,select,textarea{transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sig);box-shadow:0 0 0 4px color-mix(in srgb,var(--sig) 22%,transparent)}



/* Menu cyber premium */
header{background:rgba(255,255,255,.82);border-bottom:1px solid rgba(232,220,222,.9);transition:box-shadow .35s,background .35s,transform .35s}
header.scrolled{background:rgba(255,255,255,.94);box-shadow:0 12px 40px rgba(28,18,20,.08)}
.main-nav{height:68px;gap:22px}
.logo{gap:11px;position:relative;font-size:1.32rem;letter-spacing:-.03em}
.logo>span:last-child>span{color:var(--sig)}
.logo-mark{position:relative;width:31px;height:31px;display:inline-block;border:1px solid rgba(190,21,34,.28);border-radius:9px;overflow:hidden;transform:rotate(-4deg);transition:transform .45s cubic-bezier(.2,1.5,.4,1),border-color .25s,box-shadow .25s}
.logo-mark:before{content:"";position:absolute;inset:5px;border:1px dashed rgba(190,21,34,.32);border-radius:6px;animation:logoOrbit 6s linear infinite}
.logo-mark i,.logo-mark b,.logo-mark em{position:absolute;display:block;border-radius:50%;background:var(--sig);box-shadow:0 0 10px rgba(190,21,34,.55)}
.logo-mark i{width:5px;height:5px;left:7px;top:8px}
.logo-mark b{width:4px;height:4px;right:6px;top:14px;animation:logoBlink 1.8s infinite}
.logo-mark em{width:4px;height:4px;left:13px;bottom:6px}
.logo:hover .logo-mark{transform:rotate(5deg) scale(1.08);border-color:var(--sig);box-shadow:0 0 24px rgba(190,21,34,.2)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links .l{position:relative;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--mute);font-size:.82rem;font-weight:600;letter-spacing:.02em;padding:10px 13px;border-radius:9px;overflow:hidden;transition:color .25s,background .25s,transform .25s}
.nav-links .l span{font:600 .57rem ui-monospace,SFMono-Regular,monospace;color:rgba(190,21,34,.55);letter-spacing:.08em;transition:color .25s}
.nav-links .l:before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sig);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nav-links .l:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(190,21,34,.08) 50%,transparent 70%);transform:translateX(-120%);transition:transform .5s}
.nav-links .l:hover,.nav-links .l.active{color:var(--ink);background:rgba(190,21,34,.055);transform:translateY(-1px)}
.nav-links .l:hover:before,.nav-links .l.active:before{transform:scaleX(1)}
.nav-links .l:hover:after{transform:translateX(120%)}
.nav-links .l.active span{color:var(--sig)}
.nav-cta{position:relative;display:flex;align-items:center;gap:9px;margin-left:6px;padding:10px 13px 10px 12px;color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:9px;text-decoration:none;font-size:.78rem;font-weight:700;overflow:hidden;transition:transform .25s,box-shadow .25s,background .25s}
.nav-cta:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.16) 48%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.nav-cta:hover{transform:translateY(-2px);background:var(--sig);border-color:var(--sig);box-shadow:0 10px 28px rgba(190,21,34,.22)}
.nav-cta:hover:before{transform:translateX(120%)}
.nav-cta b{font-size:1rem;line-height:1;transition:transform .25s}
.nav-cta:hover b{transform:translate(2px,-2px)}
.nav-status{width:6px;height:6px;border-radius:50%;background:#43d69a;box-shadow:0 0 0 4px rgba(67,214,154,.12),0 0 10px rgba(67,214,154,.7);animation:statusPulse 1.8s infinite}
.menu-toggle{display:none;width:44px;height:44px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer;position:relative;z-index:12}
.menu-toggle span{display:block;height:2px;width:21px;margin:4px auto;background:var(--ink);transition:transform .3s,opacity .2s,width .3s}
.menu-toggle[aria-expanded=true]{background:var(--ink);border-color:var(--ink)}
.menu-toggle[aria-expanded=true] span{background:#fff}
.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0;width:8px}
.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-scan{position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden;pointer-events:none}
.nav-scan:after{content:"";position:absolute;width:18%;height:1px;background:linear-gradient(90deg,transparent,var(--sig),transparent);box-shadow:0 0 12px var(--sig);animation:navScan 4.5s linear infinite}
@keyframes navScan{from{left:-20%}to{left:110%}}
@keyframes logoOrbit{to{transform:rotate(360deg)}}
@keyframes logoBlink{50%{opacity:.25;transform:scale(.65)}}
@keyframes statusPulse{50%{box-shadow:0 0 0 7px rgba(67,214,154,.04),0 0 15px rgba(67,214,154,.9)}}

@media(max-width:820px){
  header{backdrop-filter:blur(14px)}
  .main-nav{height:64px}
  .nav-cta{display:none}
  .menu-toggle{display:block;margin-left:4px}
  .nav-links{position:absolute;top:calc(100% + 8px);left:16px;right:16px;display:grid;gap:5px;margin:0;padding:9px;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 60px rgba(28,18,20,.14);clip-path:inset(0 0 100% 0 round 14px);opacity:0;pointer-events:none;transform:translateY(-8px) scale(.98);transition:clip-path .35s ease,opacity .25s,transform .35s}
  .nav-links.open{clip-path:inset(0 0 0 0 round 14px);opacity:1;pointer-events:auto;transform:none}
  .nav-links .l{padding:13px 14px;font-size:.9rem;border-radius:9px}
  .nav-links .l span{font-size:.6rem}
  .nav-links .l:before{left:10px;right:auto;width:22px}
}
@media(max-width:600px){.logo-mark{width:28px;height:28px}.logo{font-size:1.18rem}}
@media(prefers-reduced-motion:reduce){.logo-mark:before,.logo-mark b,.nav-scan:after,.nav-links .l:after{animation:none!important}.nav-links,.menu-toggle span,.nav-cta,.nav-links .l{transition:none!important}}

/* Optimisations performance + accessibilité */
img{max-width:100%;height:auto}
section{content-visibility:auto;contain-intrinsic-size:700px}
#bg{display:none}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.js .rv.is-visible{opacity:1;transform:none}
.js .rv.title-reveal{filter:blur(7px);transform:translateY(26px) scale(.98);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.25,1),filter .8s ease}
.js .rv.title-reveal.is-visible{filter:blur(0);transform:none}
.js section h2.title-reveal:after{display:block;width:0;height:3px;margin-top:14px;background:var(--sig);content:"";transition:width .7s .2s cubic-bezier(.2,.75,.25,1)}
.js section h2.title-reveal.is-visible:after{width:56px}
.hero-in{animation:hero-in .65s ease both}
@keyframes hero-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (hover:none){.btn:hover,.tab:hover,.opt:hover,.stat:hover{transform:none}.panel:hover .art img{transform:none}}
@media (max-width:600px){
  .wrap{padding-inline:16px}
  .hero{gap:28px;padding:36px 0 44px}
  section{padding:48px 0}
  .panel{padding:20px}
  .quiz{padding:20px}
  .stats{gap:16px}
}
@media(max-width:700px){.cyber-ring,.cyber-beam,.cyber-label,.cyber-node{display:none}.cyber-grid{opacity:.5}.feed:hover,.panel:hover,.stat:hover{transform:none}}@media(prefers-reduced-motion:reduce){.cyber-grid,.cyber-glow,.cyber-ring,.cyber-beam,.cyber-node,.feed:before,.panel .art:after,.quiz:before{animation:none}.tab,.feed,.panel,.stat{transition:none}#log div{animation:none}}

.whatsapp-float{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:20;display:grid;width:60px;height:60px;place-items:center;border:2px solid #fff;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.22);transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.whatsapp-float svg{width:34px;height:34px}
.whatsapp-float:hover{transform:translateY(-3px);background:#1fba59;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.whatsapp-float:focus-visible{outline:3px solid #111;outline-offset:4px}
@media(max-width:600px){.whatsapp-float{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:56px;height:56px}}
@media(prefers-reduced-motion:reduce){.whatsapp-float{transition:none}}
@media(prefers-reduced-motion:reduce){.service-transition>*{animation:none}}

#cursor-ring,#cursor-dot{display:none;position:fixed;top:0;left:0;z-index:30;border-radius:50%;pointer-events:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  #cursor-ring{display:block;width:34px;height:34px;border:1px solid rgba(190,21,34,.6);opacity:0;transform:translate3d(-100px,-100px,0);transition:width .2s ease,height .2s ease,border-color .2s ease,background .2s ease,opacity .2s ease}
  #cursor-dot{display:block;width:5px;height:5px;background:var(--sig);opacity:0;transform:translate3d(-100px,-100px,0)}
  body.cursor-active #cursor-ring,body.cursor-active #cursor-dot{opacity:1}
  body.cursor-hover #cursor-ring{width:48px;height:48px;border-color:var(--sig);background:rgba(190,21,34,.08)}
}

#creature-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#creature {
  font-size: .2vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150em;
  height: 150em;
  flex-wrap: wrap;
}
#creature div {
  transform-style: preserve-3d;
  position: relative;
  width: 4em;
  height: 4em;
  margin: 3em;
  border-radius: 2em;
  will-change: transform;
  mix-blend-mode: plus-lighter;
  /*mix-blend-mode: screen;*/
  /*mix-blend-mode: lighten;*/
  background: var(--red);
}