/* ===================================================================================================================== v10 (2026-10-18) — owner: "j'aime vraiment leur site (vtweaks.com), surtout les animations 3D pour la vente, inspire-toi à 100 %". Black + white only (2026-10-18: "passe tout en noir et blanc") — no violet anywhere on the site. Loaded LAST on every page (body.v10). Blocks wrapped in .vx are excluded from the v9 "flat" rule (see top of v9.css). The 3D "cinema" (hero + product cards) is driven by public/js/vx.js; without JS it shows the first real screen, straight. ===================================================================================================================== */ :root{ --z-bg:#000;--z-s:#0d0d0d;--z-s2:#141414;--z-ln:#1d1d1f;--z-ln2:#2e2e31;--z-tx:#fff;--z-mu:rgba(255,255,255,.62);--z-fa:rgba(255,255,255,.42); --x-line:rgba(255,255,255,.09);--x-line2:rgba(255,255,255,.18);--x-soft:rgba(255,255,255,.62);--x-dim:rgba(255,255,255,.42);--x-faint:rgba(255,255,255,.28); --x-card:#0d0d0d;--x-ease:cubic-bezier(.16,1,.3,1);--x-f:"Inter","Segoe UI",system-ui,sans-serif; } body.v10{background:#000!important} .v10 ::selection{background:#fff;color:#000} /* white main buttons everywhere (other pages + checkout keep their markup) */ .v10 .s9-btn:not(.s9-btn-2),.v10 .btn-accent,.v10 .btn-primary,.v10 .btn-light{background:#fff!important;border-color:#fff!important;color:#000!important;font-weight:700!important} .v10 .s9-btn:not(.s9-btn-2):hover,.v10 .btn-accent:hover,.v10 .btn-primary:hover,.v10 .btn-light:hover{background:#e9e9ea!important;border-color:#e9e9ea!important} .v10 .ck-box{background:#0d0d0d!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:18px!important} /* ------------------------------------------------------------------ base */ .vx,.vx *,.vx *::before,.vx *::after{box-sizing:border-box} .vx{font-family:var(--x-f);color:#fff;-webkit-font-smoothing:antialiased} .vx a{text-decoration:none;color:inherit} .vx-wrap{max-width:1120px;margin:0 auto;padding:0 20px} .vx-home{overflow-x:clip} .vx-sec{padding:72px 0;position:relative} .vx-anchor{position:absolute;top:-80px} .v10 .vx h1,.v10 .vx h2,.v10 .vx h3,.v10 .vx h4{font-family:var(--x-f)!important;margin:0;color:#fff} .vx p{margin:0} .vx-arr{display:inline-block;font-weight:700;transition:transform .3s var(--x-ease)} .vx-btn:hover .vx-arr{transform:translateX(3px)} .vx-sec-h{text-align:center;max-width:640px;margin:0 auto 42px} .v10 .vx-sec-h h2{font-size:clamp(28px,3.8vw,42px)!important;font-weight:800!important;letter-spacing:-.04em!important;line-height:1.08!important;margin-bottom:10px} .vx-sec-h p{font-size:15px;color:var(--x-dim)} .vx-sec-h p a{color:#fff;font-weight:600} .vx-hl{background:linear-gradient(180deg,#fff 0%,#7a7a7a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .vx-small{text-align:center;font-size:13px;color:var(--x-dim);margin-top:22px!important} .vx-small b{color:#fff} /* buttons */ .vx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:12px;font:700 14.5px/1 var(--x-f);letter-spacing:-.01em; cursor:pointer;border:0;white-space:nowrap;transition:transform .25s var(--x-ease),background .2s,border-color .2s,box-shadow .3s} .vx-btn:active{transform:scale(.97)} .vx-btn-w{background:#fff;color:#000!important;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 8px 30px rgba(255,255,255,.08)} .vx-btn-w:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.3),0 10px 40px rgba(255,255,255,.18)} .vx-btn-g{background:transparent;color:#fff!important;border:1px solid var(--x-line2)} .vx-btn-g:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.04)} .vx-btn-sm{height:38px;padding:0 16px;border-radius:10px;font-size:13.5px} /* reveal on scroll (only once the JS has started — without it everything is visible) */ html.js .vx-rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--x-ease),transform .7s var(--x-ease);transition-delay:var(--d,0ms)} html.js .vx-rv.in{opacity:1;transform:none} /* ------------------------------------------------------------------ header (every page) */ .vx-nav{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s} .vx-nav.scrolled,.vx-nav.is-scrolled{border-bottom-color:rgba(255,255,255,.07);background:rgba(0,0,0,.78)} .vx-nav-in{display:flex;align-items:center;gap:18px;height:68px;padding:0 28px;max-width:1440px;margin:0 auto} .vx-brand{display:inline-flex;align-items:center;gap:10px;flex:1 1 0;min-width:0} .vx-brand img{width:30px;height:30px;border-radius:50%} .vx-brand span{font:800 16px var(--x-f);letter-spacing:-.03em;color:#fff} .v10 .vx-links{display:flex;align-items:center;gap:2px;padding:5px;margin:0;border-radius:14px;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 1px 0 rgba(255,255,255,.05) inset} .v10 .vx-links>a{display:inline-flex;align-items:center;height:34px;padding:0 15px!important;border-radius:10px!important;font:500 14px var(--x-f)!important;color:rgba(255,255,255,.62)!important;background:transparent!important;transition:color .2s,background .2s} .v10 .vx-links>a:hover{color:#fff!important} .v10 .vx-links>a.on{color:#fff!important;background:rgba(255,255,255,.1)!important;box-shadow:0 1px 0 rgba(255,255,255,.08) inset} .v10 .vx-links>a.only-m{display:none} .vx-nav-r{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:10px} .vx-icb{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#fff;transition:border-color .2s,background .2s} .vx-icb:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.07)} .vx-icb .ic{width:18px;height:18px} .vx-me{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 6px;border-radius:10px;border:1px solid rgba(255,255,255,.12);font:600 13.5px var(--x-f);color:#fff} .vx-me img{width:26px;height:26px;border-radius:50%} .vx-burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;align-items:center;justify-content:center;cursor:pointer} .vx-burger .ic{width:18px;height:18px} @media (max-width:980px){ .vx-nav-in{padding:0 16px;height:60px} .vx-burger{display:inline-flex} .vx .hide-s,.vx-nav .hide-s{display:none!important} .v10 .vx-links{position:absolute;top:60px;left:12px;right:12px;flex-direction:column;align-items:stretch;padding:8px;background:#0b0b0b!important;border-radius:14px; box-shadow:0 30px 60px rgba(0,0,0,.7);opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .25s,transform .25s var(--x-ease)} .v10 .vx-links.open{opacity:1;pointer-events:auto;transform:none} .v10 .vx-links>a,.v10 .vx-links>a.only-m{display:flex;height:44px} .vx-me span{display:none} } /* ------------------------------------------------------------------ hero */ .vx-hero{position:relative;text-align:center;padding:86px 0 0;overflow:hidden} .vx-hero-bg{position:absolute;inset:0;pointer-events:none} .vx-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:54px 54px;-webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 32%,#000 8%,transparent 74%);mask-image:radial-gradient(ellipse 75% 60% at 50% 32%,#000 8%,transparent 74%); animation:vxGrid 22s linear infinite} @keyframes vxGrid{to{background-position:0 54px,54px 0}} .vx-hero-glow{position:absolute;top:-20%;left:50%;width:1100px;height:600px;transform:translateX(-50%);background:radial-gradient(ellipse 55% 55% at center,rgba(255,255,255,.09),transparent 68%)} .vx-hero-fade{position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,transparent,#000)} .vx-hero-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center} .vx-new{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 14px 0 5px;margin-bottom:24px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04); font:500 13px var(--x-f);color:rgba(255,255,255,.75);transition:border-color .2s} .vx-new:hover{border-color:rgba(255,255,255,.3)} .vx-new b{height:22px;padding:0 9px;border-radius:999px;background:#fff;color:#000;font-size:11.5px;display:inline-flex;align-items:center} .v10 .vx-h1{font-size:clamp(46px,7.4vw,92px)!important;font-weight:800!important;letter-spacing:-.055em!important;line-height:.98!important;margin-bottom:20px;perspective:700px} .vx-w{display:inline-block} html.js .vx-h1 .vx-w{opacity:0;transform:translateY(40px) rotateX(-70deg);transform-origin:50% 100%;filter:blur(8px);transition:opacity .9s var(--x-ease),transform .9s var(--x-ease),filter .9s var(--x-ease)} html.js .vx-h1.in .vx-w{opacity:1;transform:none;filter:none} .vx-l{display:inline-block;white-space:nowrap} .vx-h1 .vx-w:nth-child(2){transition-delay:.08s}.vx-h1 .vx-l+.vx-l .vx-w:nth-child(1){transition-delay:.16s}.vx-h1 .vx-l+.vx-l .vx-w:nth-child(2){transition-delay:.24s} .vx-dim{background:linear-gradient(180deg,#fff 10%,#6d6d72 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .vx-sub{font-size:17px;line-height:1.55;color:var(--x-soft);max-width:560px;margin:0 auto 30px!important} .vx-alert{margin:-10px 0 20px!important;padding:8px 14px;border:1px solid rgba(255,255,255,.18);border-radius:10px;font-size:14px;color:#fff} .vx-ctas{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:16px} .vx-risk{font-size:13px;font-weight:500;color:var(--x-dim);margin-bottom:14px} .vx-rating{display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px;color:var(--x-soft)} .vx-rating b{color:#fff} .vx-faces{display:inline-flex} .vx-faces img{width:26px;height:26px;border-radius:50%;border:2px solid #000;margin-left:-8px;background:#1a1a1a} .vx-faces img:first-child{margin-left:0} /* cinema frame with the spinning light (like their trailer frame) */ .vx-cinema{position:relative;z-index:2;max-width:980px;margin:52px auto 0} .vx-cinema::after{content:"";position:absolute;inset:-50px -40px;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(255,255,255,.12) 0%,rgba(255,255,255,.05) 40%,transparent 68%);filter:blur(40px);pointer-events:none;z-index:0} .vx-beam{position:relative;z-index:1;border-radius:22px;padding:1px;overflow:hidden;isolation:isolate;animation:vxFloat 7s ease-in-out infinite alternate} .vx-beam::before,.vx-glow::before{content:"";position:absolute;top:50%;left:50%;width:240%;aspect-ratio:1/1;transform:translate(-50%,-50%); background:conic-gradient(transparent 0deg,transparent 290deg,rgba(255,255,255,.9) 330deg,transparent 360deg);animation:vxSpin 5.5s linear infinite;z-index:0} .vx-beam-in{position:relative;z-index:1;border-radius:21px;overflow:hidden;background:#050505;border:1px solid rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 40px 100px rgba(0,0,0,.75)} @keyframes vxFloat{from{transform:translateY(0)}to{transform:translateY(-10px)}} @keyframes vxSpin{to{transform:translate(-50%,-50%) rotate(360deg)}} /* ------------------------------------------------------------------ 3D cinema scene */ .vx-cine{position:relative;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(ellipse 80% 70% at 50% 38%,#151515 0%,#080808 55%,#030303 100%);perspective:1100px;user-select:none} .vx-cine-fx{position:absolute;inset:0;pointer-events:none} .vx-cine-glow{position:absolute;left:50%;top:52%;width:70%;height:60%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,transparent 70%);filter:blur(30px);animation:vxPulse 6s ease-in-out infinite alternate} @keyframes vxPulse{from{opacity:.65;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1.08)}} .vx-cine-floor{position:absolute;left:-60%;right:-60%;bottom:-38%;height:78%;transform:perspective(500px) rotateX(74deg);transform-origin:50% 0; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:60px 60px; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 60%,transparent 100%);animation:vxFloor 3.2s linear infinite} @keyframes vxFloor{to{background-position:0 60px,0 0}} .vx-cine-dust{position:absolute;inset:0} .vx-cine-dust i{position:absolute;width:var(--s,2px);height:var(--s,2px);border-radius:50%;background:#fff;box-shadow:0 0 6px #fff,0 0 14px rgba(255,255,255,.6);opacity:0;animation:vxDust var(--t,7s) linear var(--dl,0s) infinite} @keyframes vxDust{0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}15%{opacity:var(--o,.9)}70%{opacity:var(--o,.9)}100%{opacity:0;transform:translate3d(var(--dx,20px),-90px,0) scale(1.1)}} .vx-cine-3d{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;padding-top:7%} .vx-cine-win{position:relative;width:68%;border-radius:12px;overflow:hidden;transform-style:preserve-3d;border:1px solid rgba(255,255,255,.14);background:#0a0a0a; box-shadow:0 30px 80px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.6),0 0 60px rgba(255,255,255,.06);will-change:transform,opacity} .vx-cine-win img{display:block;width:100%;height:auto} .vx-cine-sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.13) 48%,transparent 60%);transform:translateX(-120%);pointer-events:none} .vx-cine-win.play .vx-cine-sheen{animation:vxSheen 2.6s .5s var(--x-ease) both} @keyframes vxSheen{to{transform:translateX(120%)}} /* camera moves: each scene gets one (data from vx.js) */ .vx-cine-win.cam-a{animation:vxCamA var(--dur,4.8s) cubic-bezier(.2,.75,.2,1) both} .vx-cine-win.cam-b{animation:vxCamB var(--dur,4.8s) cubic-bezier(.2,.75,.2,1) both} .vx-cine-win.cam-c{animation:vxCamC var(--dur,4.8s) cubic-bezier(.2,.75,.2,1) both} .vx-cine-win.cam-d{animation:vxCamD var(--dur,4.8s) cubic-bezier(.2,.75,.2,1) both} @keyframes vxCamA{0%{opacity:0;transform:translate3d(-14%,6%,-420px) rotateY(38deg) rotateX(16deg)}22%{opacity:1}35%{transform:translate3d(-2%,1%,-40px) rotateY(12deg) rotateX(7deg)}100%{opacity:1;transform:translate3d(2%,0,20px) rotateY(4deg) rotateX(5deg)}} @keyframes vxCamB{0%{opacity:0;transform:translate3d(14%,8%,-420px) rotateY(-38deg) rotateX(18deg)}22%{opacity:1}35%{transform:translate3d(2%,1%,-40px) rotateY(-12deg) rotateX(8deg)}100%{opacity:1;transform:translate3d(-2%,0,20px) rotateY(-4deg) rotateX(5deg)}} @keyframes vxCamC{0%{opacity:0;transform:translate3d(0,26%,-300px) rotateX(58deg)}22%{opacity:1}35%{transform:translate3d(0,3%,-30px) rotateX(16deg)}100%{opacity:1;transform:translate3d(0,0,30px) rotateX(9deg) rotateZ(-1deg)}} @keyframes vxCamD{0%{opacity:0;transform:translate3d(0,0,-700px) rotateX(10deg) rotateZ(-6deg)}22%{opacity:1}35%{transform:translate3d(0,0,-60px) rotateX(6deg) rotateZ(-1deg)}100%{opacity:1;transform:translate3d(0,0,40px) rotateX(4deg) rotateZ(0)}} .vx-cine-win.out{animation:vxCamOut .55s cubic-bezier(.5,0,.75,0) both} @keyframes vxCamOut{to{opacity:0;transform:translate3d(0,-4%,260px) rotateX(-8deg);filter:blur(6px)}} /* flying title */ .vx-cine-title{position:absolute;left:0;right:0;top:6.5%;z-index:3;text-align:center;perspective:520px;white-space:nowrap; font:900 clamp(22px,5.2vw,58px)/1 var(--x-f);letter-spacing:.06em;text-transform:uppercase;color:#fff;pointer-events:none} .vx-cine-title span{display:inline-block;opacity:0;text-shadow:0 0 18px rgba(255,255,255,.55),0 0 42px rgba(255,255,255,.35);transform-origin:50% 100%; animation:vxLetIn .9s var(--x-ease) calc(var(--i)*55ms + 150ms) both} .vx-cine-title span.sp{width:.38em} .vx-cine-title.out span{animation:vxLetOut .45s cubic-bezier(.5,0,.75,0) calc(var(--i)*22ms) both} @keyframes vxLetIn{0%{opacity:0;transform:translate3d(0,40px,-520px) rotateX(-85deg);filter:blur(10px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}} @keyframes vxLetOut{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-14px,260px) rotateX(40deg);filter:blur(6px)}} .vx-cine-cap{position:absolute;left:0;right:0;bottom:5.5%;z-index:3;text-align:center;font:500 clamp(10px,1.25vw,14px)/1 var(--x-f);letter-spacing:.06em;color:rgba(255,255,255,.62); opacity:0;transform:translateY(8px);transition:opacity .6s var(--x-ease) .7s,transform .6s var(--x-ease) .7s} .vx-cine-cap.on{opacity:1;transform:none} .vx-cine-cap::before,.vx-cine-cap::after{color:rgba(255,255,255,.3)} .vx-cine-cap::before{content:"[ "}.vx-cine-cap::after{content:" ]"} .vx-cine.static .vx-cine-win{transform:rotateX(6deg)} /* small version in the product cards */ .vx-cine.mini{perspective:800px;aspect-ratio:16/10.6} .vx-cine.mini .vx-cine-win{width:66%;border-radius:8px} .vx-cine.mini .vx-cine-3d{padding-top:17%} .vx-cine.mini .vx-cine-title{top:46px;font-size:clamp(15px,1.7vw,20px);letter-spacing:.1em} .vx-cine.mini .vx-cine-cap{font-size:10.5px;bottom:4.5%} .vx-cine.mini .vx-cine-floor{background-size:36px 36px} /* ------------------------------------------------------------------ trust bar */ .vx-trust{position:relative;z-index:3;padding:0 0 20px} .vx-trust-bar{display:flex;align-items:stretch;justify-content:space-between;margin-top:-34px;padding:24px 10px;border-radius:18px; background:linear-gradient(180deg,rgba(16,16,16,.88),rgba(6,6,6,.88));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1); box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 60px rgba(0,0,0,.55)} .vx-trust-cell{flex:1;text-align:center;position:relative;padding:2px 8px} .vx-trust-cell+.vx-trust-cell::before{content:"";position:absolute;left:0;top:15%;bottom:15%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.14),transparent)} .vx-trust-num{font-size:clamp(20px,2.6vw,27px);font-weight:800;letter-spacing:-.04em;margin-bottom:4px} .vx-trust-lab{font-size:12.5px;font-weight:500;color:var(--x-dim)} @media (max-width:720px){.vx-trust-bar{flex-wrap:wrap;gap:16px 0;padding:20px 6px;margin-top:-20px}.vx-trust-cell{flex:1 1 33%}.vx-trust-cell+.vx-trust-cell::before{display:none}} /* ------------------------------------------------------------------ cards (shared) + 3D tilt */ .vx [data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .5s var(--x-ease),border-color .35s,box-shadow .35s} .vx [data-tilt].tilting{transition:transform .12s linear,border-color .35s,box-shadow .35s} .vx [data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 45%);z-index:4} .vx [data-tilt]:hover::after{opacity:1} .vx-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#1a1a1a,#0e0e0e);border:1px solid var(--x-line2); box-shadow:0 1px 0 rgba(255,255,255,.08) inset;transition:box-shadow .35s var(--x-ease),border-color .35s,transform .35s var(--x-ease)} .vx-ico .ic{width:20px;height:20px;color:#fff} /* why */ .vx-blurbs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .vx-blurb{position:relative;background:var(--x-card);border:1px solid var(--x-line);border-radius:16px;padding:30px 20px 26px;text-align:center} .vx-blurb .vx-ico{margin:0 auto 16px} .vx-blurb:hover{border-color:var(--x-line2);--ty:-3px} .vx-blurb:hover .vx-ico{border-color:rgba(255,255,255,.4);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 0 22px rgba(255,255,255,.25);transform:scale(1.06)} .vx-blurb h4{font-size:16px!important;font-weight:700!important;letter-spacing:-.02em!important;margin-bottom:7px!important} .vx-blurb p{font-size:13.5px;color:var(--x-soft);line-height:1.55} @media (max-width:900px){.vx-blurbs{grid-template-columns:repeat(2,1fr)}} @media (max-width:480px){.vx-blurbs{grid-template-columns:1fr}} /* products */ .vx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch} .vx-grid>div{display:flex} .vx-pc{position:relative;width:100%;background:var(--x-card);border:1px solid var(--x-line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column} .vx-pc:hover{border-color:var(--x-line2);--ty:-4px;box-shadow:0 24px 60px rgba(0,0,0,.6)} .vx-glow{position:relative;border-radius:17px;padding:1px;overflow:hidden;isolation:isolate;width:100%} .vx-glow::before{animation-duration:4.5s;width:260%} .vx-glow::after{content:"";position:absolute;inset:0;border-radius:17px;box-shadow:0 0 44px rgba(255,255,255,.06) inset;pointer-events:none;z-index:2} .vx-glow .vx-pc{z-index:1;border-color:rgba(255,255,255,.14);height:100%} .vx-pc-off{position:absolute;top:12px;left:12px;z-index:5;background:#fff;color:#000;font-size:11px;font-weight:800;letter-spacing:.02em;border-radius:7px;padding:5px 9px} .vx-pc-stock{position:absolute;top:12px;right:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.6);border:1px solid var(--x-line);color:var(--x-soft); font-size:11px;font-weight:600;border-radius:7px;padding:5px 9px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .vx-pc-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:vxBlink 2s ease-in-out infinite} @keyframes vxBlink{50%{opacity:.35}} .vx-pc-media{position:relative;border-bottom:1px solid var(--x-line)} .vx-pc-body{padding:18px 18px 18px;display:flex;flex-direction:column;flex:1} .vx-pc-body h3{font-size:18px!important;font-weight:750!important;letter-spacing:-.03em!important} .vx-pc-sold{font-size:12px;color:var(--x-faint);margin-top:3px} .vx-pc-desc{font-size:13.5px;color:var(--x-soft);line-height:1.55;margin-top:10px!important} .vx-pc-feats{list-style:none;margin:14px 0 18px;padding:0;display:flex;flex-direction:column;gap:8px} .vx-pc-feats li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--x-soft)} .vx-pc-feats .ic{width:14px;height:14px;color:#fff;stroke-width:2.6;flex-shrink:0} .vx-pc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto} .vx-pc-price{display:flex;align-items:baseline;gap:8px} .vx-pc-now{font-size:24px;font-weight:800;letter-spacing:-.04em} .vx-pc-was{font-size:14px;font-weight:600;color:var(--x-faint);text-decoration:line-through} .vx-pc-once{font-size:13px;font-weight:500;color:var(--x-faint)} .vx-btn-buy{height:42px;padding:0 18px;border-radius:11px;font-size:13.5px} @media (max-width:960px){.vx-grid{grid-template-columns:1fr 1fr}.vx-grid>div:first-child{order:3;grid-column:1/-1}} @media (max-width:640px){.vx-grid{grid-template-columns:1fr}.vx-grid>div:first-child{grid-column:auto}.vx-grid>.vx-glow,.vx-grid>div.vx-glow{order:-1}} /* OS Custom bar (their "1-on-1 session" bar) */ .vx-ms{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-top:18px;padding:24px 26px;background:var(--x-card);border:1px solid var(--x-line2);border-radius:16px;position:relative;overflow:hidden} .vx-ms::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)} .vx-ms-l{min-width:0;flex:1 1 420px} .vx-ms-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} .vx-ms-t h3{font-size:18px!important;font-weight:800!important;letter-spacing:-.03em!important} .vx-ms-badge{background:#fff;color:#000;font-size:11px;font-weight:800;border-radius:7px;padding:4px 9px} .vx-ms-l>p{font-size:14px;color:var(--x-soft);line-height:1.55;margin-bottom:14px!important;max-width:560px} .vx-ms-pros{display:flex;align-items:center;gap:12px} .vx-ms-pros .vx-faces img{width:28px;height:28px;border-color:var(--x-card)} .vx-ms-names{font-size:12.5px;color:var(--x-dim);line-height:1.45} .vx-ms-names b{display:block;font-size:12px;font-weight:600;color:var(--x-faint)} /* 2026-10-29: HKTweaks Drag Edit block (its own app) */ .vx-de .vx-de-shot{width:360px;max-width:100%;height:auto;flex:none;overflow:hidden;border-radius:12px;border:1px solid var(--x-line2);box-shadow:0 20px 50px rgba(0,0,0,.5)} .vx-de .vx-de-shot .vx-vid{border-radius:0} /* 2026-10-29: HK Macro preview video (was a still image) */ @media (max-width:760px){.vx-de .vx-de-shot{width:100%}} @media (max-width:620px){.vx-ms{padding:20px}.vx-ms-btn{width:100%}} /* compare table (v9 markup, re-skinned) */ .vx .s9-cmp{margin:26px auto 0;max-width:820px;border:1px solid var(--x-line);border-radius:14px;background:var(--x-card);overflow:hidden} .vx .s9-cmp summary{cursor:pointer;list-style:none;padding:16px 20px;font:600 14px var(--x-f);color:#fff;display:flex;justify-content:space-between} .vx .s9-cmp summary::-webkit-details-marker{display:none} .vx .s9-cmp summary::after{content:"+";color:var(--x-dim);font-size:18px;line-height:1} .vx .s9-cmp[open] summary::after{content:"−"} .vx .s9-cmp table{width:100%;border-collapse:collapse;font-size:13.5px} .vx .s9-cmp th,.vx .s9-cmp td{padding:10px 20px;text-align:left;border-top:1px solid var(--x-line);color:var(--x-soft)} .vx .s9-cmp th{color:#fff;font-weight:600} .vx .s9-cmp td+td,.vx .s9-cmp th+th{text-align:center;width:22%} .vx .s9-cmp tr.g td{color:#fff;font-weight:700;background:rgba(255,255,255,.025)} .vx .s9-cmp .y .ic{width:15px;height:15px;color:#fff} .vx .s9-cmp .n{color:var(--x-faint)} /* modules */ .vx-mods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .vx-mod{position:relative;background:var(--x-card);border:1px solid var(--x-line);border-radius:16px;padding:22px 20px 20px;overflow:hidden} .vx-mod::before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:150%;height:90%;pointer-events:none;background:radial-gradient(ellipse 55% 55% at center,rgba(255,255,255,.09),transparent 68%);opacity:0;transition:opacity .4s var(--x-ease)} .vx-mod:hover{--ty:-4px;border-color:rgba(255,255,255,.26);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.55),0 0 46px rgba(255,255,255,.07)} .vx-mod:hover::before{opacity:1} .vx-mod-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px} .vx-mod .vx-ico{width:42px;height:42px;border-radius:11px} .vx-mod .vx-ico .ic{width:19px;height:19px} .vx-mod:hover .vx-ico{border-color:rgba(255,255,255,.4);transform:scale(1.06);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 0 22px rgba(255,255,255,.28)} .vx-mod-num{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.22);transition:color .35s} .vx-mod:hover .vx-mod-num{color:rgba(255,255,255,.55)} .vx-mod h3{font-size:16px!important;font-weight:700!important;letter-spacing:-.02em!important;margin-bottom:8px!important} .vx-mod p{font-size:13.5px;color:var(--x-soft);line-height:1.55;margin-bottom:16px!important} .vx-tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--x-soft);border:1px solid var(--x-line2);border-radius:999px;padding:5px 11px} .vx-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7)} @media (max-width:1024px){.vx-mods{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.vx-mods{grid-template-columns:1fr}} /* games marquee */ .vx-games{padding:56px 0 30px} .vx-games .vx-sec-h{margin-bottom:28px} .vx-gm{display:flex;flex-direction:column;gap:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .vx-gm-row{overflow:hidden} .vx-gm-track{display:flex;gap:12px;width:max-content;animation:vxMarq 46s linear infinite} .vx-gm-row.rev .vx-gm-track{animation-direction:reverse;animation-duration:52s} .vx-gm-dup{display:flex;gap:12px} .vx-gm:hover .vx-gm-track{animation-play-state:paused} .vx-gc{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 9px;border-radius:13px;border:1px solid var(--x-line);background:var(--x-card);font:600 14px var(--x-f);color:#fff;white-space:nowrap} .vx-gc img{width:34px;height:34px;border-radius:8px} @keyframes vxMarq{to{transform:translateX(calc(-50% - 6px))}} /* reviews */ .vx-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .vx-rev{margin:0;background:var(--x-card);border:1px solid var(--x-line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;animation:vxRevIn .5s var(--x-ease) both} .vx-rev[hidden]{display:none} @keyframes vxRevIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .vx-rev-top{display:flex;align-items:center;gap:11px;margin-bottom:12px} .vx-rev-av{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#1c1c1c,#0e0e0e);border:1px solid var(--x-line2); font-size:11px;font-weight:800;color:rgba(255,255,255,.85);object-fit:cover} .vx-rev-id{min-width:0;display:flex;flex-direction:column;gap:1px} .vx-rev-id b{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vx-rev-id time{font-size:11.5px;color:var(--x-faint)} .vx-rev blockquote{margin:0;font-size:14px;color:var(--x-soft);line-height:1.58} .vx-rev figcaption{margin-top:auto;padding-top:12px;font-size:11.5px;color:var(--x-faint)} .vx-pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px} .vx-rp{width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid var(--x-line2);transition:all .25s var(--x-ease)} .vx-rp:hover:not(:disabled){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35)} .vx-rp:disabled{opacity:.3;cursor:default} .vx-rp svg{width:16px;height:16px;stroke:#fff;stroke-width:2.2;fill:none} .vx-rp-n{font-size:13.5px;font-weight:600;color:var(--x-dim);min-width:48px;text-align:center} @media (max-width:900px){.vx-revs{grid-template-columns:1fr 1fr}} @media (max-width:600px){.vx-revs{grid-template-columns:1fr}} /* FAQ */ .vx-faqs{max-width:720px;margin:0 auto} .vx-faq{border:1px solid var(--x-line);border-radius:13px;margin-bottom:9px;background:var(--x-card);overflow:hidden;transition:border-color .3s} .vx-faq[open]{border-color:var(--x-line2)} .vx-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 19px;cursor:pointer;font:600 15px var(--x-f);color:#fff;letter-spacing:-.01em} .vx-faq summary::-webkit-details-marker{display:none} .vx-pl{position:relative;width:12px;height:12px;flex-shrink:0} .vx-pl::before,.vx-pl::after{content:"";position:absolute;background:rgba(255,255,255,.6);border-radius:2px;transition:transform .35s var(--x-ease),opacity .3s} .vx-pl::before{top:5px;left:0;width:12px;height:2px} .vx-pl::after{top:0;left:5px;width:2px;height:12px} .vx-faq[open] .vx-pl::after{transform:rotate(90deg);opacity:0} .vx-faq-a{overflow:hidden} .vx-faq[open] .vx-faq-a{animation:vxFaq .4s var(--x-ease)} @keyframes vxFaq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .vx-faq-a p{padding:0 19px 17px;font-size:14px;color:var(--x-soft);line-height:1.62} .vx-faq-more{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:18px;padding:22px 24px;background:var(--x-card);border:1px solid var(--x-line2);border-radius:16px} .vx-faq-more h3{font-size:17px!important;font-weight:700!important;letter-spacing:-.02em!important;margin-bottom:4px!important} .vx-faq-more p{font-size:13.5px;color:var(--x-soft);max-width:430px} /* closing CTA */ .vx-end-sec{padding-bottom:96px} .vx-end{position:relative;text-align:center;background:var(--x-card);border:1px solid var(--x-line);border-radius:20px;padding:58px 26px;overflow:hidden} .vx-end::before{content:"";position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)} .vx-end::after{content:"";position:absolute;left:50%;top:-60%;width:700px;height:400px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(255,255,255,.07),transparent 65%);pointer-events:none} .v10 .vx-end h2{font-size:clamp(28px,3.8vw,42px)!important;font-weight:800!important;letter-spacing:-.045em!important;margin-bottom:10px!important;position:relative} .vx-end p{font-size:15px;color:var(--x-soft);margin-bottom:26px!important;position:relative} .vx-end-btn{position:relative;min-width:290px;height:50px} .vx-end-meta{position:relative;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:12.5px;color:var(--x-faint)} .vx-end-meta span::before{content:"✓ ";color:rgba(255,255,255,.6)} /* phone buy bar (site.js keeps using #s9dock) */ .vx-dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:55;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border-radius:14px; background:rgba(13,13,13,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);font:500 14px var(--x-f);color:var(--x-soft); transform:translateY(140%);transition:transform .35s var(--x-ease)} .vx-dock b{color:#fff} .vx-dock.on{transform:none} @media (max-width:760px){.vx-dock{display:flex}} /* HEIKO18 pop-up (their sale modal) */ .vx-sale-veil{position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .4s} .vx-sale-veil.on{opacity:1} .vx-sale{position:fixed;top:50%;left:50%;z-index:9991;width:min(360px,calc(100vw - 40px));background:#0d0d0d;border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:32px 26px 24px;text-align:center; font-family:var(--x-f);color:#fff;box-shadow:0 40px 100px rgba(0,0,0,.8);transform:translate(-50%,-50%) scale(.92);opacity:0;transition:transform .45s var(--x-ease),opacity .45s var(--x-ease)} .vx-sale.on{transform:translate(-50%,-50%) scale(1);opacity:1} .vx-sale-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)} .vx-sale-x:hover{background:rgba(255,255,255,.12)} .vx-sale-x svg{width:12px;height:12px;stroke:#fff;stroke-width:2.4;fill:none} .v10 .vx-sale h3{font:800 23px var(--x-f)!important;letter-spacing:-.03em!important;margin:0 0 6px;color:#fff} .vx-sale p{margin:0;font-size:13.5px;color:rgba(255,255,255,.55)} .vx-sale-code{width:100%;margin:18px 0 0;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.32);border-radius:12px;padding:14px 16px;cursor:pointer;color:#fff;transition:all .25s} .vx-sale-code:hover{border-color:rgba(255,255,255,.65)} .vx-sale-code span{font:800 18px var(--x-f);letter-spacing:.24em} .vx-sale-code .ic{width:16px;height:16px;color:rgba(255,255,255,.6)} .vx-sale-code.copied{border-style:solid;border-color:#fff;background:#fff;color:#000} .vx-sale-code.copied .ic{color:#000} .vx-sale .vx-sale-foot{margin-top:12px;font-size:11.5px;color:rgba(255,255,255,.32)} /* ------------------------------------------------------------------ footer (every page) */ .vx-foot{border-top:1px solid rgba(255,255,255,.08);padding:56px 0 28px;background:#000;font-family:var(--x-f)} .vx-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px} .vx-foot-about p{margin:14px 0 0;font-size:13.5px;color:var(--x-dim);line-height:1.6;max-width:330px} .vx-foot-about p a{color:#fff} .vx-foot .vx-brand{flex:none} .v10 .vx-foot h4{font:600 13px var(--x-f)!important;letter-spacing:0!important;color:#fff;margin:4px 0 14px!important} .vx-foot-grid>div>a{display:block;font-size:13.5px;color:var(--x-dim);padding:4px 0;transition:color .2s} .vx-foot-grid>div>a:hover{color:#fff} .vx-foot-bot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.07);font-size:12.5px;color:var(--x-faint)} .vx-ok{display:inline-flex;align-items:center;gap:8px;color:var(--x-dim)} .vx-ok i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80;animation:vxBlink 2.4s ease-in-out infinite} @media (max-width:800px){.vx-foot-grid{grid-template-columns:1fr 1fr}.vx-foot-about{grid-column:1/-1}} /* ------------------------------------------------------------------ phones */ @media (max-width:640px){ .vx-hero{padding-top:56px} .vx-sub{font-size:15.5px} .vx-ctas{flex-direction:column;align-items:stretch;width:100%} .vx-ctas .vx-btn{width:100%} .vx-rating{flex-direction:column;gap:8px} .vx-cinema{margin-top:38px} .vx-beam,.vx-beam-in{border-radius:14px} .vx-cine-win{width:80%} .vx-sec{padding:56px 0} .vx-faq-more .vx-btn{width:100%} .vx-end-btn{min-width:0;width:100%} } /* v9 scroll progress line: white */ .v10 .s9-prog{background:#fff!important} .v10 .vx-links>a::after,.v10 .vx-links>a::before{display:none!important} .vx-cine-cap{text-shadow:0 0 6px #000,0 0 14px #000,0 0 22px #000} .v10 .vx-links>a{border:0!important;text-decoration:none!important} .vx .s9-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .vx-foot-grid>div>a.vx-brand{display:inline-flex;padding:0} .vx-foot-grid>div>a.vx-brand span{color:#fff} .v10 .vx-links>a{box-shadow:none!important} .v10 .vx-links>a.on{box-shadow:0 1px 0 rgba(255,255,255,.08) inset!important} /* ------------------------------------------------------------------ 2026-10-18 "passe tout en noir et blanc": every v9 / older accent becomes white */ :root{--z-ac:#fff;--z-ac2:#e5e5e5;--z-ac-tx:#fff;--z-v1:#fff;--z-v2:#e5e5e5;--z-v3:#d4d4d4;--z-v4:#a3a3a3;--z-vbg:#141414;--z-vbg2:#1a1a1a} body.v10{--ac:#fff;--ac2:#e5e5e5;--ac3:#fff;--on-ac:#000;--ac-soft:rgba(255,255,255,.08);--ac-line:rgba(255,255,255,.3);--accent:#fff;--accent-h:#e5e5e5;--accent-l:#fff;--acc:#fff} .v10 ::selection{background:#fff;color:#000} .v10 :focus-visible{outline-color:#fff} .v10 .btn-discord{background:#fff!important;border-color:#fff!important;color:#000!important} .v10 .btn-discord:hover{background:#e5e5e5!important;border-color:#e5e5e5!important} /* the app screens in the 3D showcases + the rest of the site: shown in black and white too */ .vx-cine-win img,.v10 img[src^="/img/h5-"]{filter:grayscale(1) contrast(1.05)} .vx-faces img,img.vx-rev-av{filter:grayscale(1)} /* 2026-10-18: game logos in their REAL colours (owner: "met les vraies couleurs des jeux") */ .vx-gc img{filter:none} /* 2026-10-18 — edited preview videos (like vtweaks): hero trailer + product-card previews (vxVideo() in lib/render.js, heiko-videos › src/trailer) */ .vx-vid{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000} .vx-vid video{display:block;width:100%;height:100%;object-fit:cover;background:#000} .vx-vid-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%,transparent 80%,rgba(0,0,0,.35));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} .vx-vid.mini{aspect-ratio:16/9} .vx-pc:hover .vx-vid.mini video{filter:brightness(1.08)} /* 2026-10-18 (v2: brighter, faster, light wave, dots light up under the mouse, light running on the arcs) — animated page background like vtweaks (public/js/bgfield.js): drifting clouds of dots + top arcs + top glow, behind every page */ .hk-field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .hk-field canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.42} .hk-arcs{position:absolute;left:0;right:0;top:0;height:100%} .hk-arcs svg{width:100%;height:100%} .hk-glow{position:absolute;inset:0;background:radial-gradient(60% 32% at 50% -10%,rgba(255,255,255,.09),transparent 70%);animation:hkGlow 7s ease-in-out infinite} @keyframes hkGlow{50%{opacity:.55}} /* a short light running along 3 of the arcs */ .hk-run{stroke-dasharray:7 93;stroke-opacity:.3;filter:drop-shadow(0 0 4px #fff);animation:hkRun 9s linear infinite} .hk-run.r1{animation-duration:13s;animation-direction:reverse;stroke-opacity:.22}.hk-run.r2{animation-duration:17s;stroke-opacity:.16} @keyframes hkRun{to{stroke-dashoffset:-100}} body.hk-field-on .vx-hero-grid,body.hk-field-on .vx-hero-fade{display:none} @media (max-width:700px){.hk-field canvas{opacity:.3}} /* 2026-10-18 — /app product page (utilityPage in lib/render.js), like vtweaks.com/tweaking-utility: gallery of 18 real screens + Premium card + 3 steps */ .vu{padding:28px 0 90px} .vu-strip{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:13px 18px;border:1px solid var(--x-line);border-radius:14px;background:rgba(255,255,255,.02);font-size:14px;color:#e5e5e5;margin-bottom:26px} .vu-ok{width:22px;height:22px;border-radius:50%;background:#fff;display:grid;place-items:center}.vu-ok svg{width:13px;height:13px;stroke:#000;stroke-width:3} .vu-dim{color:#8a8a8a} .vu-chips{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:#9a9a9a} .vu-chips i{width:5px;height:5px;border-radius:50%;background:#4ade80;margin-left:10px} .vu-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:34px;align-items:start} .vu-main{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--x-line2);background:#0a0a0a;box-shadow:0 30px 80px rgba(0,0,0,.6)} .vu-main>img{display:block;width:100%;height:auto;aspect-ratio:1600/1032;transition:opacity .25s} .vu-main>img.swap{opacity:.25} .vu-count{position:absolute;top:14px;right:14px;padding:5px 10px;border-radius:9px;background:rgba(10,10,10,.8);border:1px solid #2e2e2e;font:700 12px "Geist Mono",ui-monospace,monospace;color:#e5e5e5} .vu-cap{position:absolute;left:14px;bottom:14px;padding:6px 11px;border-radius:9px;background:rgba(10,10,10,.82);border:1px solid #2e2e2e;font-size:12.5px;font-weight:600;color:#f2f2f2} .vu-brand{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:9px;background:rgba(10,10,10,.82);border:1px solid #2e2e2e;font-size:12.5px;font-weight:700;color:#fff} .vu-arr{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid #333;background:rgba(10,10,10,.75);color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s} .vu-arr.l{left:12px}.vu-arr.r{right:12px}.vu-main:hover .vu-arr{opacity:1} .vu-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin} .vu-th{flex:none;width:118px;padding:0;border-radius:10px;overflow:hidden;border:1px solid #262626;background:#0a0a0a;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s} .vu-th img{display:block;width:100%;height:auto} .vu-th:hover{opacity:.85}.vu-th.on{opacity:1;border-color:#e5e5e5} .vu-kick{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:#e5e5e5}.vu-kick span{font:500 12px "Geist Mono",ui-monospace,monospace;color:#7a7a7a} .vu-info h1{margin:14px 0 12px;font:800 clamp(34px,4vw,50px)/1.05 var(--x-f);letter-spacing:-.03em;color:#fff} .vu-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:13.5px;color:#8a8a8a;margin-bottom:16px}.vu-meta b{color:#f2f2f2}.vu-meta a{color:inherit;text-decoration:none}.vu-meta a:hover b{text-decoration:underline} .vu-desc{font-size:15.5px;line-height:1.6;color:#a3a3a3;margin:0 0 22px} .vu-price{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:20px 22px;border:1px solid var(--x-line2);border-radius:16px;background:linear-gradient(180deg,#121212,#0d0d0d);margin-bottom:22px} .vu-now{font:800 42px/1 var(--x-f);letter-spacing:-.03em;color:#fff}.vu-once{display:block;margin-top:6px;font-size:12.5px;color:#8a8a8a} .vu-tag{margin-left:auto;padding:6px 11px;border-radius:999px;border:1px solid #3a3a3a;font-size:12px;font-weight:700;color:#e5e5e5} .vu-price small{flex-basis:100%;font-size:12.5px;color:#7a7a7a}.vu-price small b{color:#e5e5e5} .vu-inc-t{font-size:13px;font-weight:700;color:#e5e5e5;margin-bottom:10px} .vu-inc{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:22px} .vu-inc span{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--x-line);border-radius:12px;background:rgba(255,255,255,.015);font-size:13px;color:#d4d4d4} .vu-inc svg{flex:none;width:15px;height:15px;stroke:#4ade80;stroke-width:2.6} .vu-buy{width:100%;justify-content:center;height:54px;font-size:15px} .vu-or{display:flex;align-items:center;gap:12px;margin:14px 0;color:#5f5f5f;font-size:12px}.vu-or::before,.vu-or::after{content:"";flex:1;height:1px;background:#222} .vu-free{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--x-line2);border-radius:14px;color:#f2f2f2;text-decoration:none;transition:border-color .2s,background .2s} .vu-free:hover{border-color:#3a3a3a;background:rgba(255,255,255,.02)} .vu-fi{width:36px;height:36px;border-radius:10px;background:#1a1a1a;border:1px solid #2a2a2a;display:grid;place-items:center}.vu-fi svg{width:16px;height:16px} .vu-free b{display:block;font-size:14px}.vu-free small{display:block;font-size:12px;color:#8a8a8a;margin-top:2px}.vu-free .vx-arr{margin-left:auto} .vu-sec{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px} .vu-sec span{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:12px 8px;border:1px solid var(--x-line);border-radius:12px} .vu-sec svg{width:17px;height:17px;stroke:#d4d4d4;margin-bottom:3px}.vu-sec b{font-size:12.5px;color:#f2f2f2}.vu-sec small{font-size:11px;color:#7a7a7a} .vu-how{margin-top:90px;text-align:center} .vu-how .vx-eyebrow{display:inline-block;padding:6px 13px;border-radius:999px;border:1px solid var(--x-line2);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#bdbdbd} .vu-how h2{margin:16px 0 10px;font:800 clamp(30px,3.6vw,44px)/1.1 var(--x-f);letter-spacing:-.03em;color:#fff} .vu-how>p{max-width:560px;margin:0 auto 34px;color:#8a8a8a;font-size:15.5px;line-height:1.6} .vu-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left} .vu-step{padding:24px;border:1px solid var(--x-line);border-radius:18px;background:var(--x-card)} .vu-sn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#1a1a1a;border:1px solid #2c2c2c;font:800 14px "Geist Mono",ui-monospace,monospace;color:#fff;margin-bottom:16px} .vu-step h3{margin:0 0 8px;font-size:17px;color:#fff}.vu-step p{margin:0;font-size:14px;line-height:1.6;color:#8f8f8f} .vu-stats{display:flex;justify-content:center;gap:56px;margin-top:34px} .vu-stats span{display:flex;flex-direction:column;font-size:12.5px;color:#7a7a7a}.vu-stats b{font:800 28px/1.1 var(--x-f);color:#fff} @media (max-width:960px){.vu-grid{grid-template-columns:1fr}.vu-chips{margin-left:0}.vu-steps{grid-template-columns:1fr}.vu-stats{gap:28px}.vu-inc{grid-template-columns:1fr}} /* ---- checkout product picker (2026-10-29, owner: "pour sélectionner fais un truc plus beau"): our own list instead of the native