/* =========================================================
   VAERONYX V43 — Partie publique "Espace"
   Nouveau fichier : n'affecte ni l'admin, ni les profils NFC.
   ========================================================= */
:root{
  --void:#010207;
  --void-2:#050914;
  --hull:rgba(6,12,28,.66);
  --hull-solid:#070d1d;
  --line:rgba(80,140,255,.2);
  --line-2:rgba(160,190,255,.3);
  --bone:#eef3ff;
  --mist:#9eabc6;
  --signal:#3d8bff;
  --volt:#1f6fff;
  --chrome:#c3cddb;
  --display:'Unbounded','Arial Black',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --radius:24px;
  --gutter:max(18px, env(safe-area-inset-left, 0px));
  --gutter-r:max(18px, env(safe-area-inset-right, 0px));
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--void);-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--void);color:var(--bone);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh}
img{max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:var(--signal);color:var(--void)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:6px}
.wrap{max-width:1320px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
h1,h2,h3,h4{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.02em;line-height:1.05}
p{margin:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--bone);color:var(--void);padding:10px 16px;border-radius:0 0 10px 0}
.skip:focus{left:0}
main,footer{position:relative;z-index:1}

/* ---------- Background ---------- */
#vx-space{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.vx-nebula{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 80% 12%,rgba(31,111,255,.16),transparent 70%),radial-gradient(50% 40% at 0% 90%,rgba(61,139,255,.08),transparent 70%)}

/* ---------- Loader (accueil, 1re visite) ---------- */
#vx-loader{position:fixed;inset:0;z-index:100;background:var(--void);display:flex;flex-direction:column;justify-content:space-between;padding:max(24px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px))}
#vx-loader .top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
#vx-loader .count{font-family:var(--display);font-weight:800;font-size:clamp(90px,22vw,300px);line-height:.85;font-variant-numeric:tabular-nums}
#vx-loader .bar{height:1px;background:var(--line);position:relative;overflow:hidden;margin-top:16px}
#vx-loader .bar i{position:absolute;inset:0;background:var(--signal);transform-origin:left;transform:scaleX(0)}
#vx-loader .ld-logo{position:absolute;left:50%;top:50%;width:min(620px,82vw);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
#vx-loader .skip-intro{position:absolute;right:max(24px,env(safe-area-inset-right,0px));bottom:max(70px,calc(env(safe-area-inset-bottom,0px) + 70px));background:none;border:1px solid var(--line);color:var(--mist);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;border-radius:999px;cursor:pointer;min-height:44px}

/* ---------- Cursor ---------- */
.vx-cursor{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;border:1px solid var(--bone);pointer-events:none;z-index:90;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s;display:none}
.vx-cursor.big{width:72px;height:72px;background:rgba(255,255,255,.9)}
@media (hover:hover) and (pointer:fine){.vx-cursor{display:block}}

/* ---------- Header ---------- */
.vx-header{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.vx-header.scrolled{background:rgba(1,2,7,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.vx-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.vx-logo{display:block;text-decoration:none;flex:none}
.vx-logo img{height:38px;width:auto;display:block;filter:drop-shadow(0 0 10px rgba(31,111,255,.45))}
.vx-links{display:flex;gap:26px;font-size:14px;font-weight:500;align-items:center}
.vx-links a{text-decoration:none;color:var(--bone);position:relative;padding-block:6px}
.vx-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--signal);transform:scaleX(0);transform-origin:right;transition:transform .4s}
.vx-links a:hover::after,.vx-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.vx-links a[aria-current="page"]{color:#fff}
.vx-links .vx-cta{background:var(--volt);color:#fff;padding:10px 18px;border-radius:999px;box-shadow:0 0 24px -6px rgba(31,111,255,.8)}
.vx-links .vx-cta::after{display:none}
.vx-burger{display:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:rgba(1,2,7,.5);color:var(--bone);cursor:pointer;align-items:center;justify-content:center;position:relative;z-index:70}
.vx-burger span{position:absolute;left:14px;right:14px;height:1.5px;background:currentColor;transition:transform .4s,opacity .3s}
.vx-burger span:nth-child(1){transform:translateY(-5px)}.vx-burger span:nth-child(2){transform:translateY(5px)}
.menu-open .vx-burger span:nth-child(1){transform:rotate(45deg)}.menu-open .vx-burger span:nth-child(2){transform:rotate(-45deg)}
.vx-mobile{position:fixed;inset:0;z-index:65;background:rgba(1,2,7,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:calc(env(safe-area-inset-top,0px) + 90px) var(--gutter-r) calc(env(safe-area-inset-bottom,0px) + 32px) var(--gutter);clip-path:circle(0 at calc(100% - 42px) 42px);transition:clip-path .7s cubic-bezier(.7,0,.2,1);visibility:hidden}
.menu-open .vx-mobile{clip-path:circle(150% at calc(100% - 42px) 42px);visibility:visible}
.vx-mobile a{font-family:var(--display);font-weight:600;font-size:clamp(28px,8vw,44px);text-decoration:none;color:var(--bone);padding-block:6px;display:flex;align-items:baseline;gap:14px;opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s}
.vx-mobile a small{font-family:var(--mono);font-size:11px;color:var(--signal);letter-spacing:.1em}
.menu-open .vx-mobile a{opacity:1;transform:none}
.vx-mobile .vx-mfoot{margin-top:28px;display:flex;flex-direction:column;gap:4px}
.vx-mobile .vx-mfoot a{font-family:var(--mono);font-size:14px;color:var(--mist);letter-spacing:.04em;padding-block:4px}
html.menu-open,html.menu-open body{overflow:hidden}
@media (max-width:980px){.vx-links{display:none}.vx-burger{display:inline-flex}.vx-logo img{height:32px}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid var(--line-2);color:var(--bone);background:rgba(1,2,7,.45);backdrop-filter:blur(6px);cursor:pointer;font-family:var(--body);transition:background .3s,color .3s,border-color .3s,box-shadow .3s;text-align:center}
.btn:hover{border-color:var(--bone)}
.btn.solid{background:linear-gradient(180deg,#f6f9fd,var(--chrome));color:var(--void);border-color:var(--chrome);box-shadow:0 0 30px -6px rgba(61,139,255,.6)}
.btn.solid:hover{background:var(--volt);color:#fff;border-color:var(--signal)}
.btn.blue{background:var(--volt);color:#fff;border-color:var(--signal);box-shadow:0 0 30px -6px rgba(31,111,255,.8)}
.btn.blue:hover{background:linear-gradient(180deg,#f6f9fd,var(--chrome));color:var(--void)}
.btn svg{flex:none}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:520px){.ctas .btn{flex:1 1 100%}}

/* ---------- Generic sections ---------- */
.section{padding-block:clamp(72px,10vw,140px) 0}
.section:last-of-type{padding-bottom:clamp(72px,10vw,140px)}
.s-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:clamp(32px,5vw,56px)}
.s-head h2{font-size:clamp(32px,5vw,68px);font-weight:800;text-transform:uppercase;max-width:16ch;line-height:.98}
.s-head h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.3px var(--bone)}
.s-head p{max-width:42ch;color:var(--mist)}
.s-head .mono{display:block;margin-bottom:16px}
.glass{border:1px solid var(--line);background:var(--hull);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--radius)}

/* ---------- Page hero (sous-pages) ---------- */
.p-hero{position:relative;padding-block:calc(env(safe-area-inset-top,0px) + 150px) 40px;overflow:hidden}
.p-hero .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:40px;align-items:center}
.p-hero h1{font-weight:800;font-size:clamp(40px,7vw,104px);line-height:.92;text-transform:uppercase}
.p-hero h1 .line{display:block;overflow:hidden;padding-bottom:.05em}
.p-hero h1 .ch,.home-hero h1 .ch{display:inline-block}
.p-hero h1 .o{color:transparent;-webkit-text-stroke:1.5px var(--bone)}
.p-hero h1 .g{color:#fff;text-shadow:0 0 30px rgba(61,139,255,.8)}
.p-hero .lede{max-width:52ch;color:var(--mist);font-size:clamp(17px,1.4vw,20px);margin-top:26px}
.p-hero .ctas{margin-top:34px}
.p-hero .crumb{display:flex;gap:12px;align-items:center;margin-bottom:24px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--signal);animation:ping 2.2s infinite;flex:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,139,255,.6)}80%,100%{box-shadow:0 0 0 14px rgba(61,139,255,0)}}
.p-orb{position:relative;width:min(380px,100%);aspect-ratio:1;justify-self:center}
.p-orb .planet{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 32% 28%,#9cc2ff 0%,#1f6fff 26%,#062063 52%,#020718 72%);box-shadow:0 0 100px -10px rgba(31,111,255,.6),inset -30px -24px 60px rgba(0,0,0,.75)}
.p-orb .planet::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(-18deg,transparent 0 16px,rgba(255,255,255,.05) 16px 22px);mix-blend-mode:overlay}
.p-orb .planet.silver{background:radial-gradient(circle at 32% 28%,#ffffff 0%,#aab6c6 26%,#3a4556 55%,#0b0f17 75%);box-shadow:0 0 100px -10px rgba(195,205,219,.4),inset -30px -24px 60px rgba(0,0,0,.75)}
.p-orb .planet.deep{background:radial-gradient(circle at 32% 28%,#6fa8ff 0%,#0b3fb8 30%,#02092a 62%,#01030b 80%)}
.p-orb .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(61,139,255,.4);transform:rotateX(74deg) rotateZ(-16deg)}
.p-orb .ring .sat{position:absolute;inset:0;animation:spin 9s linear infinite}
.p-orb .ring .sat i{position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 18px 5px rgba(61,139,255,.95)}
.p-orb img{position:absolute;left:28%;top:28%;width:44%;filter:drop-shadow(0 0 20px rgba(31,111,255,.7))}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:860px){.p-hero .wrap{grid-template-columns:minmax(0,1fr)}.p-orb{width:min(240px,70%);order:-1;justify-self:start;margin-bottom:-10px}.p-hero{padding-top:calc(env(safe-area-inset-top,0px) + 110px)}}

/* ---------- Home hero ---------- */
.home-hero{position:relative;min-height:min(980px,100svh);display:flex;align-items:center;padding-block:calc(env(safe-area-inset-top,0px) + 110px) 40px}
.home-grid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:40px;align-items:center;width:100%}
.home-hero h1{font-weight:800;font-size:clamp(42px,6.4vw,104px);line-height:.92;text-transform:uppercase}
.home-hero h1 .line{display:block;overflow:hidden;padding-bottom:.05em}
.home-hero h1 .o{color:transparent;-webkit-text-stroke:1.5px var(--bone)}
.home-hero h1 .g{color:#fff;text-shadow:0 0 30px rgba(61,139,255,.8)}
.home-hero .lede{max-width:46ch;color:var(--mist);font-size:clamp(17px,1.4vw,20px);margin-top:28px}
.home-hero .crumb{display:flex;gap:12px;align-items:center;margin-bottom:24px}
.home-hero .ctas{margin-top:34px}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.stat{border:1px solid var(--line);background:var(--hull);backdrop-filter:blur(8px);border-radius:16px;padding:12px 18px;flex:1 1 120px}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:26px;line-height:1.15}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
@media (max-width:980px){.home-grid{grid-template-columns:minmax(0,1fr)}.home-hero{min-height:0}}

/* multi-support scene */
.scene{position:relative;width:100%;aspect-ratio:1.28;max-width:100%;container-type:inline-size;perspective:1600px}
.scene::before{content:"";position:absolute;left:8%;right:4%;top:2%;bottom:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(31,111,255,.28),transparent 75%);filter:blur(10px)}
.ring-wrap{position:absolute;inset:-6% -4%;display:grid;place-items:center;pointer-events:none}
.ring-wrap .ring{width:100%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(61,139,255,.28);transform:rotateX(76deg) rotateZ(-12deg);box-shadow:0 0 40px rgba(31,111,255,.18);position:relative}
.ring-wrap .sat{position:absolute;inset:0;animation:spin 11s linear infinite}
.ring-wrap .sat i{position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 0 22px 6px rgba(61,139,255,.95)}
.obj{position:absolute;transform-style:preserve-3d}
.par,.float,.lift{transform-style:preserve-3d;width:100%}
.float{animation:float 7s ease-in-out infinite}
.lift{transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s;position:relative}
@media (hover:hover){.obj:hover .lift{transform:translateY(-2.2cqw) scale(1.04);filter:drop-shadow(0 0 3cqw rgba(61,139,255,.55))}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4cqw)}}
.obj img{display:block}
.metal{background:repeating-linear-gradient(100deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),linear-gradient(150deg,#1b212c,#07090e 60%,#11161f)}
.rim{box-shadow:0 0 0 1px rgba(160,190,255,.18),0 2cqw 5cqw -1cqw rgba(0,0,0,.9),0 0 3cqw -1cqw rgba(61,139,255,.6)}
.o-laptop{left:2%;top:7%;width:58%}
.o-laptop .screen{aspect-ratio:16/10;border-radius:1.4cqw;border:.7cqw solid #0b0e15;outline:1px solid #2a3344;background:radial-gradient(120% 90% at 50% 0%,#0a1430,#02040a 70%);overflow:hidden;position:relative}
.o-laptop .bar{display:flex;justify-content:space-between;align-items:center;padding:1.4cqw 2cqw}
.o-laptop .bar img{height:1.9cqw;width:auto}
.o-laptop .bar i{display:block;width:2cqw;height:.25cqw;background:var(--chrome);box-shadow:0 .6cqw 0 var(--chrome),0 -.6cqw 0 var(--chrome)}
.o-laptop .hero-logo{width:62%;margin:3% auto 0;position:relative;z-index:1}
.o-laptop .horizon{position:absolute;left:-20%;right:-20%;top:58%;height:80%;border-radius:50%;background:radial-gradient(60% 40% at 50% 0%,#14244d,#02040a 70%);box-shadow:0 -.4cqw 2.4cqw rgba(61,139,255,.9),inset 0 .3cqw .6cqw rgba(140,190,255,.8)}
.o-laptop .thumbs{position:absolute;left:4%;right:4%;bottom:5%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4cqw}
.o-laptop .thumbs span{aspect-ratio:16/9;border-radius:.6cqw;border:1px solid rgba(160,190,255,.2);background:linear-gradient(135deg,#0c1938,#03060e 60%);animation:blink 4s ease-in-out infinite}
.o-laptop .thumbs span:nth-child(2){background:linear-gradient(160deg,#102a66 0%,#03060e 45%,#1f6fff 46%,#03060e 49%);animation-delay:1.3s}
.o-laptop .thumbs span:nth-child(3){background:radial-gradient(80% 60% at 70% 100%,#1c3570,#03060e 70%);animation-delay:2.6s}
@keyframes blink{0%,100%{box-shadow:none}50%{box-shadow:0 0 1.4cqw rgba(61,139,255,.7);border-color:rgba(120,170,255,.6)}}
.o-laptop .base{height:2cqw;margin:0 -7%;background:linear-gradient(180deg,#c8d0dc,#5e6776 55%,#1b1f27);clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);border-radius:0 0 1cqw 1cqw}
.o-phone{left:57%;top:16%;width:19.5%}
.o-phone .body{aspect-ratio:9/19;border-radius:3.2cqw;border:.6cqw solid #1a1f2a;outline:1px solid #3a4456;background:radial-gradient(120% 60% at 50% 0%,#0b1838,#02040a 60%);padding:3.4cqw 1.6cqw 2cqw;display:flex;flex-direction:column;align-items:center;gap:1cqw;position:relative;overflow:hidden}
.o-phone .body::before{content:"";position:absolute;top:1.2cqw;left:50%;width:30%;height:1.4cqw;margin-left:-15%;border-radius:1cqw;background:#000}
.o-phone .plogo{width:52%;margin-top:1.6cqw}
.o-phone .pword{width:84%;margin-bottom:.8cqw}
.o-phone .link{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1cqw 1.3cqw;border-radius:.9cqw;background:rgba(80,130,255,.08);border:1px solid rgba(160,190,255,.16);color:var(--bone)}
.o-phone .link svg{width:1.8cqw;height:1.8cqw}
.o-phone .tap{position:absolute;left:50%;top:62%;width:60%;aspect-ratio:1;margin:-30% 0 0 -30%;border-radius:50%;border:2px solid var(--signal);opacity:0;pointer-events:none}
.o-phone .ok{position:absolute;left:8%;right:8%;bottom:4%;padding:1cqw;border-radius:1cqw;background:var(--volt);color:#fff;font-weight:600;font-size:max(7px,1.15cqw);text-align:center;opacity:0;box-shadow:0 0 2cqw rgba(31,111,255,.8)}
.o-flyer{left:76%;top:0%;width:22%}
.o-flyer .sheet{aspect-ratio:1/1.414;border-radius:.6cqw;background:radial-gradient(120% 70% at 50% 15%,#0c1a3c,#02040a 65%);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:16%;transform:rotateY(-14deg);border:1px solid rgba(160,190,255,.2)}
.o-flyer .back{position:absolute;left:0;top:0;width:100%;aspect-ratio:1/1.414;transform:translate(14%,8%) rotateY(-14deg);border-radius:.6cqw;background:linear-gradient(160deg,#0a1430,#02040a);border:1px solid rgba(160,190,255,.12)}
.o-flyer .flogo{width:56%}
.o-flyer .fword{width:88%;margin-top:1cqw}
.o-flyer .planetarc{position:absolute;left:-30%;right:-30%;bottom:-62%;height:100%;border-radius:50%;background:radial-gradient(60% 50% at 40% 10%,#2d4a90,#060c1c 60%);box-shadow:0 -.4cqw 2.4cqw rgba(61,139,255,.9)}
.o-cards{left:3%;top:63%;width:30%}
.bc{aspect-ratio:85.6/54;border-radius:1.2cqw;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.bc .bcl{width:72%}
.o-cards .stack{position:absolute;inset:0;border-radius:1.2cqw;transform:translate(-7%,-14%) rotate(-4deg);box-shadow:0 .6cqw 0 #0b0e15,0 1.2cqw 0 #0e121a,0 1.25cqw 1cqw rgba(61,139,255,.5)}
.o-nfc{left:37%;top:67%;width:28%}
.o-nfc .bc{transform:rotate(-5deg)}
.o-nfc .wave{position:absolute;top:10%;right:7%;width:3cqw;height:3cqw;color:var(--chrome)}
.o-review{left:72%;top:55%;width:21%}
.o-review .disc{aspect-ratio:1;border-radius:50%;border:.7cqw solid #aeb9c8;background:radial-gradient(circle at 50% 35%,#0b1838,#02040a 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6cqw;box-shadow:0 0 0 1px #5b6677,0 0 3cqw rgba(61,139,255,.75),inset 0 0 2cqw rgba(61,139,255,.35)}
.o-review .disc img{width:52%}
.o-review .stars{display:flex;gap:.3cqw;color:#5aa0ff}
.o-review .stars svg{width:1.9cqw;height:1.9cqw}
.o-review .foot{width:56%;height:1.6cqw;margin:-.6cqw auto 0;border-radius:50%;background:linear-gradient(180deg,#aeb9c8,#2a313c)}
.screen::after,.bc::after,.o-flyer .sheet::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(190,215,255,.16) 50%,transparent 58%);transform:translateX(-70%);animation:sweep 5.5s ease-in-out infinite;pointer-events:none}
.o-nfc .bc::after{animation-delay:1.2s}.o-flyer .sheet::after{animation-delay:2.4s}
@keyframes sweep{0%,55%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
.chip-l{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:.8em;font-family:var(--display);font-weight:600;font-size:max(8.5px,1.25cqw);letter-spacing:.14em;color:var(--bone);background:rgba(2,6,18,.78);backdrop-filter:blur(6px);border:1px solid rgba(160,190,255,.3);border-radius:.8em;padding:.8em 1.1em;white-space:nowrap}
.chip-l::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--signal);box-shadow:0 0 .8em var(--signal)}
.c1{left:0;top:13%}.c2{right:0;top:44%}.c3{right:6%;top:93%}
.scene-foot{display:flex;justify-content:center;gap:1.2em;align-items:center;margin-top:10px}
.scene-foot i{width:28px;height:1px;background:var(--line)}

/* ---------- Planets (home univers) ---------- */
.univers{position:relative;overflow:hidden}
.univers .s-head{padding-top:clamp(72px,10vw,140px)}
.hscroll{display:flex;gap:22px;padding-left:var(--gutter);padding-right:var(--gutter-r);padding-bottom:40px;will-change:transform}
.panel-p{flex:0 0 min(540px,80vw);min-height:520px;border-radius:28px;border:1px solid var(--line);background:var(--hull);backdrop-filter:blur(10px);padding:38px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;position:relative;overflow:hidden;text-decoration:none;isolation:isolate}
.orb{position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;z-index:-1;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.panel-p:hover .orb{transform:scale(1.15) translate(-20px,20px)}
.orb.p1{background:radial-gradient(circle at 30% 30%,#9cc2ff,#1f6fff 40%,#04123a 75%);box-shadow:0 0 80px -10px rgba(61,139,255,.6),inset -30px -20px 60px rgba(0,0,0,.65)}
.orb.p2{background:radial-gradient(circle at 30% 30%,#ffffff,#aab6c6 35%,#2b3442 75%);box-shadow:0 0 80px -10px rgba(195,205,219,.35),inset -30px -20px 60px rgba(0,0,0,.65)}
.orb.p3{background:radial-gradient(circle at 30% 30%,#6fa8ff,#0b3fb8 45%,#020a24 78%);box-shadow:0 0 80px -10px rgba(31,111,255,.6),inset -30px -20px 60px rgba(0,0,0,.65)}
.orb.p4{background:radial-gradient(circle at 30% 30%,#dfe8f5,#5d82c4 40%,#0c1a38 75%);box-shadow:0 0 80px -10px rgba(120,160,230,.45),inset -30px -20px 60px rgba(0,0,0,.65)}
.panel-p h3{font-size:clamp(28px,3vw,42px);font-weight:600;margin-top:16px}
.panel-p p{color:var(--mist);max-width:34ch;margin-top:14px}
.tags{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:13px;border:1px solid var(--line);padding:6px 12px;border-radius:999px;color:var(--bone);background:rgba(1,2,7,.4)}
.price-row{display:flex;align-items:baseline;gap:10px}
.price-row b{font-family:var(--display);font-weight:600;font-size:38px}
.arrow{width:54px;height:54px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;margin-left:auto;align-self:center;transition:background .3s,transform .4s,color .3s;flex:none}
.panel-p:hover .arrow{background:var(--bone);color:var(--void);transform:rotate(-45deg)}
@media (max-width:820px){.hscroll{flex-direction:column}.panel-p{flex-basis:auto;min-height:0;padding:28px}.orb{width:200px;height:200px;right:-60px;top:-60px}}

/* ---------- Manifesto ---------- */
.manifesto p{font-family:var(--display);font-weight:300;font-size:clamp(26px,4.2vw,58px);line-height:1.18;max-width:22ch;text-wrap:balance;margin-top:28px}
.manifesto em{font-style:normal;color:var(--signal);font-weight:600}
.js-anim .manifesto .w{opacity:.2}

/* ---------- Offers ---------- */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.g3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.g2,.g4{grid-template-columns:minmax(0,1fr)}}
.offer{position:relative;padding:34px;display:flex;flex-direction:column;gap:22px;overflow:hidden;isolation:isolate}
.offer::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--x,-500px) var(--y,-500px),rgba(61,139,255,.2),transparent 60%)}
.offer.hot{border-color:var(--signal);box-shadow:0 0 80px -30px rgba(61,139,255,.8)}
.badge{position:absolute;top:26px;right:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:var(--volt);color:#fff;padding:6px 10px;border-radius:999px}
.offer h3{font-size:20px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding-right:120px}
.offer .sub{color:var(--mist);margin-top:6px;font-size:15px}
.amount{font-family:var(--display);font-weight:800;font-size:clamp(46px,5vw,60px);line-height:1;font-variant-numeric:tabular-nums}
.amount small{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--mist);letter-spacing:.06em;margin-left:6px}
.feat{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;flex-grow:1;font-size:15px}
.feat li{display:flex;gap:12px;align-items:flex-start;padding-bottom:11px;border-bottom:1px solid var(--line)}
.feat li:last-child{border-bottom:0;padding-bottom:0}
.feat li svg{flex:none;margin-top:5px;color:var(--signal)}
.save{font-family:var(--mono);font-size:12px;color:var(--signal);letter-spacing:.08em}
.thrust{display:flex;gap:4px;margin-bottom:12px}
.thrust i{width:22px;height:4px;border-radius:2px;background:var(--line)}
.thrust i.on{background:var(--signal);box-shadow:0 0 10px var(--signal)}
.tiers{display:flex;flex-direction:column;gap:8px}
.tiers div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(1,2,7,.4)}
.tiers b{font-family:var(--display);font-weight:600;font-size:22px;font-variant-numeric:tabular-nums}
.formats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.formats div{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(1,2,7,.4)}
.formats b{display:block;font-size:15px}
.formats span{font-size:13px;color:var(--mist)}
.note{margin-top:22px;color:var(--mist);font-size:15px;display:flex;gap:10px;align-items:center}
.note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);flex:none}
.band{margin-top:18px;padding:30px 34px;display:flex;flex-wrap:wrap;gap:20px 30px;justify-content:space-between;align-items:center}
.band h3{font-size:22px;font-weight:600}
.band p{color:var(--mist);margin-top:6px;max-width:56ch}
.band b{font-family:var(--display);font-weight:600;font-size:32px}
@media (max-width:520px){.offer{padding:26px}.band{padding:26px}.offer h3{padding-right:0}.badge{position:static;align-self:flex-start;order:-1}}

/* ---------- Hub cards ---------- */
.hub{padding:30px;display:flex;flex-direction:column;gap:14px;text-decoration:none;min-height:240px;position:relative;overflow:hidden;transition:border-color .3s}
.hub:hover{border-color:var(--signal)}
.hub h3{font-size:24px;font-weight:600}
.hub p{color:var(--mist);flex-grow:1}
.hub .go{display:flex;justify-content:space-between;align-items:center;font-weight:600}
.hub .go span{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:transform .4s,background .3s,color .3s}
.hub:hover .go span{background:var(--bone);color:var(--void);transform:rotate(-45deg)}

/* ---------- Steps ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.steps li{padding-top:22px;border-top:1px solid var(--line-2);position:relative}
.steps li::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:var(--fill,0%);background:var(--signal);box-shadow:0 0 12px var(--signal)}
.steps h3{font-size:20px;font-weight:600;margin:12px 0 8px}
.steps p{color:var(--mist);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- Portfolio ---------- */
.status{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.work{overflow:hidden;display:flex;flex-direction:column}
.work .visual{aspect-ratio:16/10;background:radial-gradient(90% 80% at 50% 0%,#0c1a3c,#02040a 70%);display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.work .visual img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.work:hover .visual img{transform:scale(1.05)}
.work .fallback{font-family:var(--display);font-weight:800;font-size:clamp(40px,6vw,64px);color:transparent;-webkit-text-stroke:1.3px var(--chrome)}
.work .body{padding:26px;display:flex;flex-direction:column;gap:12px;flex-grow:1}
.work h3{font-size:22px;font-weight:600}
.work p{color:var(--mist);font-size:15px}
.work .tags{margin-top:2px}
.work .link{margin-top:auto;font-weight:600;display:inline-flex;gap:8px;align-items:center;text-decoration:none;color:var(--signal);padding-top:8px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.c-side{padding:34px;display:flex;flex-direction:column;gap:22px}
.c-side h2{font-size:clamp(28px,3.4vw,42px);font-weight:700}
.c-side p{color:var(--mist)}
.points{display:flex;flex-direction:column;gap:10px}
.points span{display:flex;gap:12px;align-items:center}
.points span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal);flex:none}
.direct{display:flex;flex-direction:column;gap:10px}
.direct button,.direct a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:0 20px;border-radius:16px;border:1px solid var(--line-2);background:rgba(1,2,7,.5);color:var(--bone);font-family:var(--mono);font-size:15px;cursor:pointer;text-decoration:none;text-align:left;width:100%}
.direct small{font-size:10.5px;color:var(--mist);letter-spacing:.12em;text-transform:uppercase}
.direct button:hover,.direct a:hover{border-color:var(--bone)}
.form{padding:34px;display:flex;flex-direction:column;gap:18px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:620px){.row2{grid-template-columns:minmax(0,1fr)}.form,.c-side{padding:24px}}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600}
.field input,.field select,.field textarea{width:100%;font:inherit;font-weight:400;font-size:16px;color:var(--bone);background:rgba(1,2,7,.6);border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;min-height:52px;transition:border-color .3s,box-shadow .3s;appearance:none;-webkit-appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c3cddb' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.field select option,.field select optgroup{background:#07101f;color:var(--bone)}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px rgba(61,139,255,.18)}
.form .btn{align-self:flex-start}
@media (max-width:520px){.form .btn{align-self:stretch}}
.form-note{font-size:14px;color:var(--mist)}
.form-note.is-error{color:#ffb4a8}
.form-privacy{font-size:13px;color:var(--mist)}
.form-privacy a{color:var(--bone)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{border:1px solid var(--line);border-radius:18px;background:var(--hull);backdrop-filter:blur(8px);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:22px 26px;font-weight:600;font-size:17px;display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:24px;color:var(--signal);transition:transform .3s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 26px 22px;color:var(--mist)}
.faq .a a{color:var(--bone)}

/* ---------- Big CTA ---------- */
.cta{text-align:center;border-top:1px solid var(--line);position:relative;overflow:hidden;padding-block:clamp(80px,12vw,150px)}
.cta h2{font-size:clamp(42px,10vw,170px);font-weight:800;line-height:.88;text-transform:uppercase}
.cta h2 .o{color:transparent;-webkit-text-stroke:1.5px var(--bone)}
.magnet{margin:52px auto 0;width:170px;height:170px;border-radius:50%;background:var(--volt);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:18px;text-decoration:none;transition:background .3s,color .3s;box-shadow:0 0 0 12px rgba(61,139,255,.14),0 0 0 26px rgba(61,139,255,.07),0 0 100px rgba(31,111,255,.6)}
.magnet:hover{background:linear-gradient(180deg,#f6f9fd,var(--chrome));color:var(--void)}
.copyline{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:52px}
.copy{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--line-2);background:rgba(1,2,7,.5);color:var(--bone);font-family:var(--mono);font-size:14px;cursor:pointer}
.copy:hover{border-color:var(--bone)}
.copy small{color:var(--mist);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Legal pages ---------- */
.legal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.legal > section{border:1px solid var(--line);background:var(--hull);backdrop-filter:blur(8px);border-radius:20px;padding:28px;min-width:0;overflow-wrap:anywhere}
.legal h2{font-size:20px;font-weight:600;margin-bottom:14px;letter-spacing:0}
.legal h3{font-size:16px;font-weight:600;margin:16px 0 8px;letter-spacing:0}
.legal p,.legal li{color:var(--mist);font-size:15.5px}
.legal p+p{margin-top:12px}
.legal strong{color:var(--bone)}
.legal a{color:var(--bone)}
.legal ul{padding-left:20px;margin:10px 0}
.legal .note{display:block;border:1px solid rgba(255,190,120,.35);background:rgba(255,170,90,.06);border-radius:12px;padding:14px;color:#ffd7b0;margin-top:14px}
.legal .note::before{display:none}
.legal .updated{font-family:var(--mono);font-size:12px;margin-top:16px}
.legal .codebox{border:1px dashed var(--line-2);border-radius:14px;padding:18px;background:rgba(1,2,7,.5);margin:12px 0}
.legal table{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto}
.legal th,.legal td{border:1px solid var(--line);padding:8px 10px;text-align:left;color:var(--mist)}
@media (max-width:860px){.legal{grid-template-columns:minmax(0,1fr)}.legal > section{padding:22px}}

/* ---------- Footer ---------- */
.vx-footer{border-top:1px solid var(--line);padding-block:56px calc(env(safe-area-inset-bottom,0px) + 28px);background:rgba(1,2,7,.75)}
.f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:32px}
@media (max-width:900px){.f-top{grid-template-columns:repeat(2,minmax(0,1fr))}.f-top > div:first-child{grid-column:1/-1}}
.f-top h4{font-family:var(--body);font-size:14px;font-weight:600;margin-bottom:12px;letter-spacing:0}
.f-top a,.f-top p{display:block;color:var(--mist);text-decoration:none;font-size:15px;margin-bottom:6px;overflow-wrap:anywhere}
.f-top a:hover{color:var(--bone)}
.f-top .vx-logo img{height:44px}
.f-legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:13px;color:var(--mist)}
.f-legal nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.f-legal a{color:var(--mist);text-decoration:none}
.f-legal a:hover{color:var(--bone)}

/* ---------- Floating CTA (mobile) ---------- */
.float-cta{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);z-index:55;display:none;align-items:center;gap:10px;min-height:50px;padding:0 22px;border-radius:999px;background:var(--volt);color:#fff;text-decoration:none;font-weight:600;box-shadow:0 10px 40px -8px rgba(31,111,255,.9);transition:opacity .4s,transform .4s;white-space:nowrap}
.float-cta.away{opacity:0;transform:translate(-50%,30px);pointer-events:none}
@media (max-width:980px){.float-cta{display:inline-flex}}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 80px);transform:translateX(-50%);background:var(--bone);color:var(--void);padding:12px 20px;border-radius:999px;font-weight:600;font-size:14px;z-index:95}

.split .wd{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.split .c{display:inline-block}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-anim .manifesto .w{opacity:1}
}
.legal mark{background:rgba(255,190,120,.16);color:#ffd7b0;padding:0 4px;border-radius:4px}
main{overflow-x:clip}

/* ---------- Choix du papier (cartes de visite) ---------- */
.paper{display:flex;flex-direction:column;gap:12px}
.paper-list{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.paper-list legend{padding:0;margin-bottom:10px;width:100%}
.paper-list label{position:relative;cursor:pointer}
.paper-list input{position:absolute;opacity:0;width:1px;height:1px}
.paper-list label span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:rgba(1,2,7,.5);font-size:14px;font-weight:600;color:var(--bone);transition:background .25s,border-color .25s,box-shadow .25s,color .25s}
.paper-list label:hover span{border-color:var(--bone)}
.paper-list input:checked+span{background:var(--volt);border-color:var(--signal);color:#fff;box-shadow:0 0 22px -6px rgba(31,111,255,.9)}
.paper-list input:focus-visible+span{outline:2px solid var(--signal);outline-offset:3px}
.paper-detail{font-size:14px;color:var(--mist)}
.tiers b.flash{animation:vxFlash .6s ease}
@keyframes vxFlash{0%{color:#fff;text-shadow:0 0 18px var(--signal)}100%{text-shadow:none}}

/* ---------- Configurateurs cartes / flyers ---------- */
.cfg-stack{display:flex;flex-direction:column;gap:18px}
.cfg{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0;overflow:visible;padding:0}
.cfg-opts{padding:34px;display:flex;flex-direction:column;gap:22px;min-width:0}
.cfg-title{font-size:clamp(24px,2.6vw,32px);font-weight:600;margin-top:10px}
.cfg .sub{color:var(--mist);margin-top:6px;font-size:15px}
.cfg-price{padding:34px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:16px;background:linear-gradient(180deg,rgba(31,111,255,.07),transparent 60%);border-radius:0 var(--radius) var(--radius) 0;align-self:stretch}
.cfg-price .tiers b{font-size:24px}
.cfg-price .tiers b.devis{font-family:var(--body);font-size:15px;color:var(--mist);font-weight:600}
.cfg-price .feat{flex-grow:0}
.cf-sum{font-size:14px;color:var(--bone);line-height:1.5}
.cf-group{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.cf-group legend{padding:0;margin-bottom:10px}
.cf-fins{display:flex;flex-direction:column;gap:20px;padding-top:6px;border-top:1px solid var(--line)}
.cf-fins .cf-group:first-child{padding-top:18px}
.cf-pills{display:flex;flex-wrap:wrap;gap:8px}
.cf-pills label{position:relative;cursor:pointer}
.cf-pills input{position:absolute;opacity:0;width:1px;height:1px}
.cf-pills span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:rgba(1,2,7,.5);font-size:14px;font-weight:600;color:var(--bone);transition:background .25s,border-color .25s,box-shadow .25s,color .25s}
.cf-pills label.sm span{min-height:40px;padding:0 14px;font-size:13.5px;font-weight:500}
.cf-pills label:hover span{border-color:var(--bone)}
.cf-pills input:checked+span{background:var(--volt);border-color:var(--signal);color:#fff;box-shadow:0 0 22px -6px rgba(31,111,255,.9)}
.cf-pills input:focus-visible+span{outline:2px solid var(--signal);outline-offset:3px}
@media (min-width:981px){.cfg-price{position:sticky;top:96px;align-self:start;border-radius:0 var(--radius) var(--radius) 0;min-height:100%}}
@media (max-width:980px){.cfg{grid-template-columns:minmax(0,1fr)}.cfg-price{border-left:0;border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius)}}
@media (max-width:520px){.cfg-opts,.cfg-price{padding:24px}.cf-pills label.sm span{font-size:13px;padding:0 12px}}

/* ---------- Supports sur demande ---------- */
.sup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:980px){.sup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.sup-grid{grid-template-columns:minmax(0,1fr)}}
.sup{padding:26px;display:flex;flex-direction:column;gap:16px}
.sup h3{font-size:18px;font-weight:600}
.sup-list{display:flex;flex-wrap:wrap;gap:8px}
.sup-list a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(1,2,7,.45);color:var(--bone);text-decoration:none;font-size:14px;transition:border-color .25s,background .25s,color .25s}
.sup-list a::after{content:"↗";font-size:12px;color:var(--signal);transition:transform .3s}
.sup-list a:hover{border-color:var(--signal);background:rgba(31,111,255,.15)}
.sup-list a:hover::after{transform:translate(2px,-2px)}
.cf-live{display:none;font-weight:600;color:var(--bone);padding:12px 16px;border-radius:14px;background:rgba(31,111,255,.14);border:1px solid var(--line-2);font-size:14.5px}
@media (max-width:980px){.cf-live{display:block}}