/* Oxly public site, "vitrine" pages (Découvrir, Fonctionnalités, liste d'attente). Charter Sauge du soir / Sauge clair:
   colours only through the tokens of site.css (both themes), no inline <style>, no inline script (strict CSP).
   Loaded after site.css; body.vt cancels the document rules of site.css (section borders, paragraph colours). */

/* ---------- base ---------- */
body.vt{overflow-x:hidden;font-family:var(--f-text);-webkit-tap-highlight-color:transparent}
/* :where() keeps these resets as weak as the site.css rules they cancel, so every .vt- class below still wins */
:where(body.vt) section{scroll-margin-top:84px;padding-top:0;margin-top:0;border-top:0}
:where(body.vt) section p,:where(body.vt) section ul,:where(body.vt) section ol{margin:0;padding:0;color:inherit}
:where(body.vt) section b{color:inherit}
:where(body.vt) section h3{font:inherit;margin:0}
:where(body.vt) a{font-weight:inherit}
.vt-in{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:0 48px;box-sizing:border-box}
.vt-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}
.vt-mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.vt-glass{background:linear-gradient(160deg,var(--glass-hi),var(--glass-lo));border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-shine),0 24px 50px var(--glass-shadow);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3)}
.vt-blob{position:absolute;border-radius:50%;filter:blur(12px);animation:vt-drift 16s ease-in-out infinite;pointer-events:none}
.vt-blob.b2{animation-delay:-7s}
.vt-kick{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--accent-soft-ink);letter-spacing:.12em;text-transform:uppercase}
.vt-kick.peche{color:var(--sc-peche)}
.vt-h2{margin:10px 0 0;font:600 40px/1.08 var(--f-title);color:var(--sc-strong);letter-spacing:-.01em}
.vt-lead{margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--sc-soft);max-width:560px}
.vt-sec{position:relative;padding:112px 0;overflow-x:clip}
.vt-sec.tight{padding:72px 0}

/* buttons: one primary per screen (.vt-cta), the others are glass (.vt-btn) */
.vt-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink)!important;font:800 17px var(--f-text);text-decoration:none;cursor:pointer;box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 35%,transparent);box-sizing:border-box}
.vt-cta:hover{background:var(--accent-hover)}
.vt-cta:focus-visible{outline:2px solid var(--sc-mint);outline-offset:3px}
.vt-cta.shine::after{content:"";position:absolute;top:-20px;bottom:-20px;width:40px;background:color-mix(in srgb,var(--sc-ink) 35%,transparent);filter:blur(6px);animation:vt-shine 3.2s ease-in-out infinite}
.vt-cta[disabled]{opacity:.6;cursor:progress}
.vt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--sc-ink) 12%,transparent);background:color-mix(in srgb,var(--sc-ink) 6%,transparent);color:var(--text);font:700 14px var(--f-text);cursor:pointer;text-decoration:none;box-sizing:border-box}
.vt-btn:hover{background:color-mix(in srgb,var(--sc-ink) 10%,transparent);color:var(--sc-strong)}
.vt-btn.next{background:color-mix(in srgb,var(--accent-soft) 80%,transparent);border-color:color-mix(in srgb,var(--accent) 70%,transparent);color:var(--sc-mint)}
.vt-btn.big{min-height:52px;padding:0 24px;font-size:16px}
.vt-btn:focus-visible,.vt-menu:focus-visible,.vt-down:focus-visible,.vt-fn:focus-visible,.vt-item:focus-visible{outline:2px solid var(--accent-soft-ink);outline-offset:3px}

/* ---------- header ---------- */
/* transparent at the top of the page (the hero glow goes on behind the logo, no visible seam);
   once the page scrolls, frosted glass with a soft fade below instead of a hard edge */
.vt-top{position:sticky;top:0;z-index:20;background:transparent;transition:background .35s ease,backdrop-filter .35s ease}
.vt-top::after{content:"";position:absolute;left:0;right:0;top:100%;height:32px;background:linear-gradient(color-mix(in srgb,var(--bg) 70%,transparent),color-mix(in srgb,var(--bg) 0%,transparent));opacity:0;transition:opacity .35s ease;pointer-events:none}
html.vt-defile .vt-top{background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}
html.vt-defile .vt-top::after{opacity:1}
.vt-top .vt-in{display:flex;align-items:center;gap:16px;min-height:76px}
.vt-logo{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:var(--sc-heart)!important;text-decoration:none}
.vt-logo span{font:600 21px 'Space Grotesk',var(--f-text);letter-spacing:.1em}
.vt-nav{display:flex;align-items:center;gap:2px;margin:0 auto;padding:5px;border-radius:999px}
.vt-nav a,.vt-nav .off{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;color:var(--sc-soft);text-decoration:none;font:700 15px var(--f-text);border:0;background:none}
.vt-nav a:hover{color:var(--sc-strong);background:color-mix(in srgb,var(--sc-ink) 6%,transparent)}
.vt-nav a[aria-current="page"]{color:var(--sc-strong);background:color-mix(in srgb,var(--sc-ink) 9%,transparent)}
.vt-nav .off{color:var(--text-3);cursor:not-allowed}
.vt-nav small{font:600 11px var(--f-text);padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--sc-ink) 7%,transparent)}
.vt-theme{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid color-mix(in srgb,var(--sc-ink) 12%,transparent);background:color-mix(in srgb,var(--sc-ink) 6%,transparent);color:var(--sc-soft);display:grid;place-items:center;cursor:pointer;transition:color .2s,background .2s,transform .4s cubic-bezier(.3,1.4,.5,1)}
.vt-theme:hover{color:var(--sc-strong);background:color-mix(in srgb,var(--sc-ink) 10%,transparent);transform:rotate(-18deg)}
.vt-theme:focus-visible{outline:2px solid var(--accent-soft-ink);outline-offset:3px}
.vt-theme svg{grid-area:1/1;transition:opacity .3s,transform .45s cubic-bezier(.3,1.4,.5,1)}
[data-theme="dark"] .vt-theme .lune,[data-theme="light"] .vt-theme .soleil{opacity:0;transform:rotate(-90deg) scale(.4)}
.vt-menu{display:none;width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--sc-ink) 12%,transparent);background:color-mix(in srgb,var(--sc-ink) 6%,transparent);color:var(--text);place-items:center;cursor:pointer;margin-left:auto}
.vt-menu .x{display:none}
.vt-menu[aria-expanded="true"] .x{display:block}
.vt-menu[aria-expanded="true"] .l{display:none}
/* "Documentation, bientôt": the button wiggles and a bubble pops just under it */
.vt-nav .off{position:relative}
.vt-nav .off.secoue{animation:vt-secoue .5s ease}
.vt-bulle{position:absolute;left:50%;top:calc(100% + 12px);z-index:30;transform:translateX(-50%);padding:9px 14px;border-radius:14px;background:var(--accent);color:var(--accent-ink);font:800 13px var(--f-text);white-space:nowrap;box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 35%,transparent);pointer-events:none;animation:vt-bulle 2.8s cubic-bezier(.3,1.4,.5,1) forwards}
.vt-bulle::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
@keyframes vt-secoue{20%{transform:rotate(-4deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}
@keyframes vt-bulle{0%{opacity:0;transform:translate(-50%,-6px) scale(.6)}12%{opacity:1;transform:translate(-50%,0) scale(1)}85%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-4px) scale(.9)}}
.vt-statut{position:absolute;left:50%;top:70px;transform:translateX(-50%);padding:8px 14px;border-radius:999px;background:var(--sheet);border:1px solid var(--glass-line);color:var(--text);font-size:13px;font-weight:700;white-space:nowrap;animation:vt-sheet .25s ease}
.vt-statut:empty{display:none}
:where(body) [tabindex="-1"]:focus{outline:none}
.vt-voile{position:fixed;inset:0;z-index:18;background:var(--veil);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vt-voile[hidden]{display:none}

/* ---------- footer (completes .foot of site.css) ---------- */
body.vt .foot{position:relative;z-index:1;background:var(--bg)}
.vt-foot-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}

/* phone bottom bar: the primary action stays at hand */
.vt-barre{display:none}

/* ---------- entrance (heart) ---------- */
.vt-entree{display:none}
html.js.vt-entree-on .vt-entree{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;overflow:hidden;background:var(--bg);color:var(--text)}
html.js.vt-entree-on body{overflow:hidden}
html.js.vt-entree-on .cookie-bar{display:none}
.vt-entree.fin{animation:vt-fade .5s ease forwards}
.vt-entree-haut{position:relative;z-index:3;width:100%;max-width:1240px;box-sizing:border-box;padding:18px 16px 0;display:flex;justify-content:space-between;align-items:center}
.vt-son{width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--sc-ink) 12%,transparent);background:color-mix(in srgb,var(--sc-ink) 6%,transparent);color:var(--sc-soft);display:grid;place-items:center;cursor:pointer}
.vt-son .off{display:none}
.vt-son[aria-pressed="false"] .on{display:none}
.vt-son[aria-pressed="false"] .off{display:block}
.vt-son:focus-visible{outline:2px solid var(--accent-soft-ink);outline-offset:4px}
/* no square frame around the heart: no outline, no tap flash; keyboard users get a soft round glow instead */
.vt-coeur,.vt-coeur:focus{outline:none;-webkit-tap-highlight-color:transparent}
.vt-coeur:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-soft-ink) 55%,transparent)}
.vt-scene0{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.vt-halo{position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 38%,transparent),color-mix(in srgb,var(--sc-pressed) 18%,transparent) 55%,transparent);animation:vt-glow 1.15s ease-in-out infinite}
.vt-coeur-wrap{display:grid;place-items:center}
.vt-entree.ouverte .vt-coeur-wrap{animation:vt-open 1.1s cubic-bezier(.6,0,.2,1) forwards}
.vt-coeur{position:relative;display:grid;place-items:center;width:200px;height:200px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.vt-coeur svg{animation:vt-beat 1.15s cubic-bezier(.3,.7,.3,1) infinite;filter:drop-shadow(0 0 28px color-mix(in srgb,var(--accent) 55%,transparent))}
.vt-ring{position:absolute;inset:30px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent-soft-ink) 55%,transparent);animation:vt-ripple 1.15s ease-out infinite}
.vt-ring.two{animation-delay:.42s}
.vt-flood{display:none;position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-soft-ink) 55%,transparent),color-mix(in srgb,var(--accent) 15%,transparent) 60%,transparent);pointer-events:none}
.vt-entree.ouverte .vt-flood{display:block;animation:vt-flood 1.3s ease-out forwards}
.vt-attente{position:absolute;left:0;right:0;bottom:120px;z-index:2;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.vt-attente b{font:600 34px 'Space Grotesk',var(--f-text);letter-spacing:.14em;color:var(--sc-heart)}
.vt-attente span{font-size:15px;color:var(--text-2);animation:vt-hint 2.3s ease-in-out infinite}
.vt-entree.ouverte .vt-attente{display:none}
.vt-bienvenue{display:none}
.vt-entree.ouverte .vt-bienvenue{position:absolute;left:0;right:0;top:calc(50% - 120px);z-index:3;box-sizing:border-box;padding:0 28px;display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center}
.vt-bienvenue .t{margin:0;font:600 56px/1.04 var(--f-title);letter-spacing:-.01em;color:var(--sc-strong)}
.vt-bienvenue .t em{font-style:normal;color:var(--accent-soft-ink)}
.vt-bienvenue p{margin:0;font-size:19px;line-height:1.45;color:var(--sc-soft)}
.vt-w{display:inline-block;opacity:0}
.vt-entree.ouverte .vt-w{animation:vt-word .7s cubic-bezier(.2,.7,.2,1) forwards}

/* ---------- Découvrir ---------- */
.vt-hero{position:relative;overflow-x:clip;padding:56px 0 96px}
.vt-hero .vt-in{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.vt-hero h1{margin:16px 0 0;font:600 52px/1.04 var(--f-title);letter-spacing:-.015em;color:var(--sc-strong)}
.vt-hero h1 em{font-style:normal;color:var(--accent-soft-ink)}
.vt-hero .vt-lead{font-size:17px}
.vt-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.vt-pastille{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 14px;border-radius:999px;background:color-mix(in srgb,var(--accent-soft) 70%,transparent);border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);color:var(--accent-soft-ink);font-size:13px;font-weight:700}
.vt-pastille i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:vt-blink 1.6s ease-in-out infinite}
.vt-carte{position:relative;display:flex;flex-direction:column;gap:10px;max-width:360px;margin-left:auto;animation:vt-float 6s ease-in-out infinite}
.vt-carte .main{padding:20px;border-radius:30px}
.vt-carte .lab{display:flex;justify-content:space-between;align-items:center}
.vt-carte .lab b{font-size:12px;font-weight:800;color:var(--accent-soft-ink);letter-spacing:.04em}
.vt-carte .lab span{font-size:11px;color:var(--text-2)}
.vt-carte .row{display:flex;gap:14px;margin-top:14px}
.vt-carte .pic{position:relative;flex:none;width:76px;height:92px;border-radius:16px;background:linear-gradient(150deg,var(--sc-sable),var(--ill-tan-2));display:grid;place-items:center}
.vt-carte .txt{flex:1;display:flex;flex-direction:column;gap:9px;padding-top:2px}
.vt-carte .nom{font-weight:800;font-size:15px;color:var(--sc-strong)}
.vt-carte .bar{height:8px;border-radius:4px;background:color-mix(in srgb,var(--text) 28%,transparent);animation:vt-line 5s cubic-bezier(.3,.7,.3,1) infinite}
.vt-carte .prix{display:flex;align-items:baseline;gap:6px;animation:vt-price 5s ease infinite}
.vt-carte .prix b{font:500 21px 'JetBrains Mono',ui-monospace,monospace;color:var(--sc-strong)}
.vt-carte .prix span{font-size:11px;font-weight:700;color:var(--accent-soft-ink)}
.vt-carte .go{display:flex;align-items:center;gap:10px;margin-top:16px}
.vt-carte .valider{flex:1;height:46px;border-radius:999px;display:grid;place-items:center;font-weight:800;font-size:14px;animation:vt-press 5s ease infinite}
.vt-carte .ok{width:46px;height:46px;border-radius:50%;background:var(--brand);display:grid;place-items:center;box-shadow:0 0 24px color-mix(in srgb,var(--brand) 60%,transparent);animation:vt-ok 5s ease infinite}
.vt-carte .mini{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vt-carte .mini>div{padding:14px;border-radius:22px}
.vt-carte .k{font-size:11px;font-weight:700;color:var(--text-2)}
.vt-carte .v{font:500 21px 'JetBrains Mono',ui-monospace,monospace;color:var(--sc-strong);margin-top:4px}
.vt-carte .offre{display:flex;flex-direction:column;gap:8px}
.vt-carte .bulle{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--sc-peche) 18%,transparent);display:grid;place-items:center}
.vt-carte .offre b{display:block;font-size:12px;font-weight:800;color:var(--sc-strong)}
.vt-carte .offre span{font-size:11px;color:var(--text-2)}
.vt-carte .exemple{align-self:flex-end;font-size:11px;color:var(--text-3)}
.vt-down-wrap{display:flex;justify-content:center;margin-top:56px}
.vt-down{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:0;background:color-mix(in srgb,var(--sc-ink) 6%,transparent);color:var(--sc-soft);font:700 13px var(--f-text);cursor:pointer;text-decoration:none}
.vt-down:hover{background:color-mix(in srgb,var(--sc-ink) 10%,transparent);color:var(--sc-strong)}
.vt-down svg{animation:vt-bob 1.6s ease-in-out infinite}

.vt-deux{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.vt-nuage{position:relative;height:340px;max-width:460px;width:100%;margin-left:auto}
.vt-mess{position:absolute;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:16px;font-size:13px;font-weight:700;color:var(--text);transform:rotate(var(--r));animation:vt-jit 2.4s ease-in-out infinite}
.vt-mess svg{flex:none}
.vt-mess:nth-child(1){--r:-6deg;left:0;top:6px}
.vt-mess:nth-child(2){--r:5deg;right:0;top:60px;animation-delay:-.6s}
.vt-mess:nth-child(3){--r:3deg;left:6%;top:124px;animation-delay:-1.2s}
.vt-mess:nth-child(4){--r:-4deg;right:4%;top:184px;animation-delay:-.3s}
.vt-mess:nth-child(5){--r:7deg;left:2%;top:240px;animation-delay:-1.8s}
.vt-mess:nth-child(6){--r:-3deg;right:8%;top:292px;animation-delay:-.9s}

.vt-bascule-tete{display:flex;flex-direction:column;align-items:flex-start}
.vt-bascule-tete svg{animation:vt-beat 1.3s ease-in-out infinite;filter:drop-shadow(0 0 24px color-mix(in srgb,var(--accent) 60%,transparent))}
.vt-rows{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.vt-rows li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;background:color-mix(in srgb,var(--sc-ink) 5%,transparent);border:1px solid color-mix(in srgb,var(--sc-ink) 10%,transparent);font-size:14px;color:var(--text);animation:vt-row 7s ease infinite}
.vt-rows li b{color:var(--sc-strong)}
.vt-rows .t{flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand);display:grid;place-items:center;animation:vt-tickin 7s ease infinite}
.vt-rows li:nth-child(2),.vt-rows li:nth-child(2) .t{animation-delay:.25s}
.vt-rows li:nth-child(3),.vt-rows li:nth-child(3) .t{animation-delay:.5s}
.vt-rows li:nth-child(4),.vt-rows li:nth-child(4) .t{animation-delay:.75s}
.vt-rows li:nth-child(5),.vt-rows li:nth-child(5) .t{animation-delay:1s}
.vt-rows li:nth-child(6),.vt-rows li:nth-child(6) .t{animation-delay:1.25s}

.vt-fns{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0 0;padding:0;list-style:none}
.vt-fn{display:block;height:100%;box-sizing:border-box;border-radius:22px;padding:18px;background:color-mix(in srgb,var(--sc-ink) 5%,transparent);border:1px solid color-mix(in srgb,var(--sc-ink) 10%,transparent);text-decoration:none;color:var(--text)!important;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.vt-fn:hover{background:color-mix(in srgb,var(--accent-soft) 60%,transparent);border-color:color-mix(in srgb,var(--accent) 70%,transparent);transform:translateY(-6px);box-shadow:0 18px 40px var(--glass-shadow)}
.vt-fn .vt-ico{transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.vt-fn:hover .vt-ico{transform:rotate(-8deg) scale(1.12)}
.vt-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-soft-ink);flex:none}
.vt-fn b{display:block;margin-top:10px;font:500 18px var(--f-title);color:var(--sc-strong)}
.vt-fn span{display:block;margin-top:2px;font-size:13px;color:var(--text-2)}
.vt-fn .voir{margin-top:10px;font-size:13px;font-weight:700;color:var(--accent-soft-ink)}
.vt-note{margin-top:16px;text-align:center;font-size:14px;color:var(--text-2)}

.vt-pile{display:flex;flex-direction:column;gap:10px;max-width:400px;width:100%;margin-left:auto}
.vt-pile>div{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:22px}
.vt-pile>div:nth-child(1){animation:vt-swipe 6s ease infinite}
.vt-pile>div:nth-child(2){opacity:.85}
.vt-pile>div:nth-child(3){opacity:.65}
.vt-pile .pic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.vt-pile .pic.sable{background:linear-gradient(150deg,var(--sc-sable),var(--ill-tan-2))}
.vt-pile .pic.peche{background:color-mix(in srgb,var(--sc-peche) 18%,transparent)}
.vt-pile .pic.vert{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.vt-pile .txt{flex:1}
.vt-pile b{display:block;font-weight:800;font-size:15px;color:var(--sc-strong)}
.vt-pile span{font-size:13px;color:var(--text-2)}
.vt-pile .badge{flex:none;width:36px;height:36px;border-radius:50%;background:var(--brand);display:grid;place-items:center;animation:vt-badge 6s ease infinite}

.vt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0 0;padding:0;list-style:none}
.vt-stats li{position:relative;overflow:hidden;border-radius:20px;padding:18px;background:color-mix(in srgb,var(--sc-ink) 5%,transparent);border:1px solid color-mix(in srgb,var(--sc-ink) 10%,transparent);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,translate .35s cubic-bezier(.3,.7,.3,1)}
.vt-stats li::after{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:40%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--sc-ink) 12%,transparent),transparent);transform:translateX(-150%) rotate(14deg);pointer-events:none}
.vt-stats li:hover{translate:0 -6px;background:color-mix(in srgb,var(--accent-soft) 60%,transparent);border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 18px 40px var(--glass-shadow)}
.vt-stats li:hover::after{animation:vt-balaye .9s ease}
.vt-stats b{transition:color .3s ease}
.vt-stats li:hover b{color:var(--accent-soft-ink)}
.js .vt-stats li.in b{animation:vt-stat-b 4.8s ease-in-out infinite;animation-delay:calc(var(--d,0s) + .8s)}
@keyframes vt-balaye{to{transform:translateX(350%) rotate(14deg)}}
@keyframes vt-stat-b{0%,82%,100%{transform:none}88%{transform:translateY(-4px)}94%{transform:translateY(1px)}}
.vt-stats b{display:block;font:500 26px 'JetBrains Mono',ui-monospace,monospace;color:var(--sc-strong)}
.vt-stats span{font-size:14px;color:var(--text-2)}
.vt-soirees{margin-top:32px;text-align:center;font:600 30px/1.1 var(--f-title);color:var(--sc-strong)}

.vt-offre{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:stretch}
.vt-panneau{position:relative;overflow:hidden;border-radius:28px;padding:28px;box-sizing:border-box;transition:box-shadow .35s ease,translate .4s cubic-bezier(.3,.7,.3,1)}
.vt-panneau::before{content:"";position:absolute;width:320px;height:320px;right:-120px;top:-140px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%);pointer-events:none;animation:vt-halo 9s ease-in-out infinite}
.vt-panneau+.vt-panneau::before{left:-120px;right:auto;top:auto;bottom:-160px;background:radial-gradient(circle,color-mix(in srgb,var(--sc-peche) 22%,transparent),transparent 70%);animation-delay:-4.5s}
.vt-panneau>*{position:relative}
.vt-panneau:hover{translate:0 -6px;box-shadow:inset 0 1px 0 var(--glass-shine),0 34px 70px var(--glass-shadow)}
@keyframes vt-halo{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.2)}}
.vt-panneau h2{margin:10px 0 0;font:600 30px/1.1 var(--f-title);color:var(--sc-strong)}
.vt-panneau p{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--sc-soft)}
.vt-panneau .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* live count of the waitlist (real number, read on the server) */
.vt-compteur{margin-top:18px}
.vt-compteur .chiffre{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:15px;color:var(--sc-soft)}
.vt-compteur .chiffre b{font:500 34px 'JetBrains Mono',ui-monospace,monospace;color:var(--sc-peche-fort)}
.vt-jauge{height:10px;margin-top:12px;border-radius:999px;background:color-mix(in srgb,var(--sc-ink) 8%,transparent);overflow:hidden}
.vt-jauge i{--c:var(--accent);display:block;position:relative;height:100%;width:0;border-radius:999px;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,transparent),var(--c));box-shadow:0 0 14px color-mix(in srgb,var(--c) 55%,transparent);transition:width 1.4s cubic-bezier(.3,.7,.3,1),background .6s ease,box-shadow .6s ease}
.vt-jauge i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--sc-ink) 45%,transparent),transparent);transform:translateX(-100%);animation:vt-jauge-reflet 2.8s ease-in-out infinite}
.vt-jauge.mi i{--c:var(--sc-jauge-mi)}
.vt-jauge.fin i{--c:var(--sc-jauge-fin)}
.vt-compteur .chiffre b{display:inline-block;font-variant-numeric:tabular-nums}
.vt-compteur .chiffre b.bouge{animation:vt-chiffre .5s ease}
@keyframes vt-jauge-reflet{0%,30%{transform:translateX(-100%)}70%,100%{transform:translateX(100%)}}
@keyframes vt-chiffre{40%{transform:translateY(-3px) scale(1.08)}}
.vt-compteur small{display:block;margin-top:8px;font-size:12px;color:var(--text-3)}
[data-attente-compte][hidden]{display:none}

.vt-faq{max-width:820px}
.vt-faq details{position:relative;background:color-mix(in srgb,var(--sc-ink) 5%,transparent);border:1px solid color-mix(in srgb,var(--sc-ink) 10%,transparent);border-radius:20px;padding:4px 20px;margin-top:10px;overflow:hidden;transition:background .3s ease,border-color .3s ease,translate .35s cubic-bezier(.3,.7,.3,1),box-shadow .3s ease}
.vt-faq details::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--accent);transform:scaleY(0);transition:transform .3s cubic-bezier(.3,.7,.3,1)}
.vt-faq details:hover,.vt-faq details[open]{background:color-mix(in srgb,var(--accent-soft) 55%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.vt-faq details:hover{translate:6px 0;box-shadow:0 14px 34px var(--glass-shadow)}
.vt-faq details:hover::before,.vt-faq details[open]::before{transform:scaleY(1)}
.vt-faq summary{min-height:52px;font-size:16px;list-style:none;gap:14px;justify-content:space-between;transition:color .2s ease}
.vt-faq summary::-webkit-details-marker{display:none}
.vt-faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:500 21px/1 var(--f-title);color:var(--accent-soft-ink);background:color-mix(in srgb,var(--sc-ink) 8%,transparent);transition:transform .35s cubic-bezier(.3,.7,.3,1),background .25s ease,color .25s ease}
.vt-faq details:hover summary{color:var(--sc-strong)}
.vt-faq details:hover summary::after{background:color-mix(in srgb,var(--accent) 30%,transparent);transform:rotate(90deg) scale(1.12)}
.vt-faq details[open] summary::after{background:var(--accent);color:var(--accent-ink);transform:rotate(45deg)}
.vt-faq details p{color:var(--text-2);margin:0 0 14px}
.vt-faq details[open] p{animation:vt-faq-p .45s cubic-bezier(.3,.7,.3,1)}
@keyframes vt-faq-p{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Fonctionnalités ---------- */
.vt-f{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start;margin-top:36px}
.vt-liste{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;position:sticky;top:96px}
.vt-item{display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:0 18px;border-radius:20px;border:1px solid color-mix(in srgb,var(--sc-ink) 10%,transparent);background:color-mix(in srgb,var(--sc-ink) 4%,transparent);color:var(--text)!important;text-decoration:none;box-sizing:border-box;transition:background .2s ease,border-color .2s ease}
.vt-item:hover{background:color-mix(in srgb,var(--sc-ink) 8%,transparent)}
.vt-item[aria-current="true"]{background:color-mix(in srgb,var(--accent-soft) 85%,transparent);border-color:color-mix(in srgb,var(--accent) 80%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
.vt-item[aria-current="true"] .vt-ico{background:var(--accent);color:var(--accent-ink)}
.vt-item .txt{flex:1}
.vt-item b{display:block;font-size:17px;color:var(--sc-strong)}
.vt-item small{font-size:13px;color:var(--text-2)}
.vt-n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--text-3)}
.vt-scenes{min-width:0}
.vt-scene{position:relative;border-radius:34px;padding:36px 40px;box-sizing:border-box;min-height:560px;margin-bottom:20px;overflow:hidden}
.js .vt-scenes .vt-scene{display:none;margin-bottom:0}
.js .vt-scenes .vt-scene.on{display:block;animation:vt-show .45s ease}
.vt-scene-top{display:flex;justify-content:space-between;align-items:center}
.vt-scene-corps{display:grid;grid-template-columns:1fr 346px;gap:44px;align-items:center;margin-top:8px}
.vt-scene h2{margin:10px 0 0;font:600 30px/1.1 var(--f-title);color:var(--sc-strong)}
.vt-pts{list-style:none;margin:16px 0 0!important;padding:0!important;display:flex;flex-direction:column;gap:10px}
.vt-pts li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4;color:var(--sc-soft)}
.vt-pts li::before{content:"";flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}
.vt-scene-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.vt-scene-btns .tout{display:none}
.vt-vis-wrap{display:flex;justify-content:center}
.vt-fin{margin-top:72px;text-align:center}
.vt-fin h2{margin:0;font:600 40px/1.1 var(--f-title);color:var(--sc-strong)}
.vt-fin p{margin:10px auto 0;max-width:520px;color:var(--sc-soft);font-size:17px}
.vt-fin .vt-cta{margin-top:24px}

/* ---------- one screen per part on a computer (Découvrir: one part per screen; Fonctionnalités: the whole page) ---------- */
@media (min-width:901px){
  html:has(body.accueil){scroll-snap-type:y proximity}
  body.accueil .vt-hero,body.accueil .vt-sec{min-height:calc(100svh - 76px);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:40px 0;scroll-snap-align:start;scroll-margin-top:76px}
  body.accueil .vt-hero{padding:16px 0 24px}
  body.accueil .vt-down-wrap{margin-top:28px}
  .vt-sec.vt-ecran{padding:16px 0 24px}
  .vt-ecran .vt-f{grid-template-columns:290px 1fr;grid-template-rows:auto 1fr;gap:14px 24px;margin-top:18px;align-items:stretch}
  .vt-ecran .vt-liste{position:static;grid-column:1;grid-row:1;gap:6px}
  .vt-ecran .vt-item{min-height:52px;padding:0 12px;gap:12px;border-radius:16px}
  .vt-ecran .vt-item .vt-ico{width:34px;height:34px;border-radius:11px}
  .vt-ecran .vt-item b{font-size:15px}
  .vt-ecran .vt-item small{font-size:12px}
  .vt-ecran .vt-scenes{grid-column:2;grid-row:1/3;display:flex;flex-direction:column}
  .vt-ecran .vt-scene{flex:1;min-height:0;padding:22px 30px;border-radius:30px}
  .js .vt-ecran .vt-scenes .vt-scene.on{display:flex;flex-direction:column}
  .vt-ecran .vt-scene-corps{flex:1;grid-template-columns:1fr 320px;gap:32px}
  .vt-ecran .s-vis{max-width:320px}
  .vt-ecran .s3-frame{height:230px}
  .vt-ecran .vt-fin{grid-column:1;grid-row:2;align-self:end;margin:0;padding:18px;border-radius:24px;text-align:left}
  .vt-ecran .vt-fin .vt-pastille{font-size:12px;min-height:28px;padding:0 12px}
  .vt-ecran .vt-fin h2{margin-top:10px;font-size:22px}
  .vt-ecran .vt-fin p{margin:6px 0 0;font-size:13px;line-height:1.45}
  .vt-ecran .vt-fin .vt-cta{display:flex;width:100%;margin-top:14px;min-height:48px;font-size:15px}
}
@media (min-width:901px) and (max-width:1180px){
  .vt-ecran .vt-f{grid-template-columns:250px 1fr}
  .vt-ecran .vt-scene-corps{grid-template-columns:1fr 260px;gap:20px}
  .vt-ecran .s-vis{zoom:.8}
}
/* short computer screens: the extras give way so the page still fits */
@media (min-width:901px) and (max-height:820px){
  .vt-ecran .vt-lead,.vt-ecran .vt-item small,.vt-ecran .vt-fin p{display:none}
  .vt-ecran .vt-item{min-height:44px}
  .vt-ecran .s-vis{zoom:.8}
  body.accueil .vt-sec{padding:24px 0}
}
@media (min-width:901px) and (max-height:690px){
  .vt-ecran>.vt-in>.vt-kick{display:none}
  .vt-ecran .vt-h2{margin:0;font-size:30px}
  .vt-ecran .vt-scene{padding:18px 26px}
}

/* ---------- liste d'attente ---------- */
.vt-attente-page{padding:24px 0 96px}
.vt-attente-page .vt-in{display:grid;grid-template-columns:1fr 480px;gap:56px;align-items:start}
.vt-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--text-2)!important;text-decoration:none;font-size:14px;font-weight:700}
.vt-back:hover{color:var(--text)!important}
.vt-attente-page h1{margin:10px 0 0;font:600 44px/1.06 var(--f-title);color:var(--sc-strong);letter-spacing:-.01em}
.vt-li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4;color:var(--sc-soft)}
.vt-li svg{flex:none;margin-top:2px}
.vt-lis{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.vt-sep{height:1px;background:color-mix(in srgb,var(--sc-ink) 10%,transparent);margin:20px 0}
.vt-form label{display:block;font-size:13px;font-weight:700;color:var(--sc-soft);margin-bottom:8px}
.vt-field{width:100%;box-sizing:border-box;height:56px;border-radius:16px;border:1px solid color-mix(in srgb,var(--sc-ink) 18%,transparent);background:color-mix(in srgb,var(--sc-shadow) 25%,transparent);color:var(--sc-strong);font:600 16px var(--f-text);padding:0 16px;outline:none}
.vt-field::placeholder{color:var(--text-3)}
.vt-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.vt-field[aria-invalid="true"]{border-color:var(--sc-peche)}
.vt-erreur{margin-top:8px;font-size:14px;color:var(--sc-peche)}
.vt-erreur:empty{display:none}
.vt-ts{margin-top:12px}
.vt-ts:empty{display:none}
.vt-form .vt-cta{width:100%;margin-top:14px}
.vt-petit{margin-top:12px;text-align:center;font-size:12px;color:var(--text-3)}
.vt-ok{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 0 6px}
.vt-ok[hidden]{display:none}
.vt-rond{position:relative;width:84px;height:84px;display:grid;place-items:center}
.vt-rond>span{position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent-soft-ink) 60%,transparent);animation:vt-ring 1.6s ease-out infinite}
.vt-rond>div{width:84px;height:84px;border-radius:50%;background:var(--brand);display:grid;place-items:center;box-shadow:0 0 40px color-mix(in srgb,var(--brand) 55%,transparent);animation:vt-pop .6s ease forwards}
.vt-rond.mail>div{background:var(--accent-soft);box-shadow:0 0 40px color-mix(in srgb,var(--accent) 35%,transparent)}
.vt-rond.non>span{display:none}
.vt-rond.non>div{background:color-mix(in srgb,var(--sc-peche) 22%,transparent);box-shadow:none}
.vt-ok h2{margin:20px 0 0;font:600 28px/1.15 var(--f-title);color:var(--sc-strong)}
.vt-ok p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--sc-soft)}
.vt-ok p b{color:var(--accent-soft-ink);word-break:break-all}
.vt-rang{margin-top:18px;display:inline-flex;align-items:baseline;gap:8px;padding:10px 16px;border-radius:16px;background:color-mix(in srgb,var(--sc-brun) 80%,transparent);border:1px solid color-mix(in srgb,var(--sc-peche) 30%,transparent)}
.vt-rang span{font-size:13px;color:var(--sc-peche)}
.vt-rang b{font:500 22px 'JetBrains Mono',ui-monospace,monospace;color:var(--sc-peche-fort)}
.vt-rang[hidden],.vt-ok p[hidden]{display:none}
.vt-ok .vt-btn,.vt-ok .vt-cta{margin-top:22px}
.vt-simple{padding:40px 0 96px}
.vt-simple .vt-panneau{max-width:560px;margin:24px auto 0}

/* ---------- animations ---------- */
@keyframes vt-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-24px)}}
@keyframes vt-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(-.5deg)}}
@keyframes vt-line{0%,8%{width:0}30%,100%{width:var(--w)}}
@keyframes vt-price{0%,34%{opacity:0;transform:translateY(8px)}42%,100%{opacity:1;transform:none}}
@keyframes vt-ok{0%,58%{opacity:0;transform:scale(.6)}66%{opacity:1;transform:scale(1.08)}72%,100%{opacity:1;transform:scale(1)}}
@keyframes vt-press{0%,52%{transform:scale(1);background:var(--accent);color:var(--accent-ink)}56%{transform:scale(.94)}60%,100%{transform:scale(1);background:var(--sc-pressed);color:var(--accent-soft-ink)}}
@keyframes vt-blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes vt-sheet{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes vt-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes vt-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes vt-jit{0%,100%{transform:rotate(var(--r)) translate(0,0)}25%{transform:rotate(calc(var(--r) + 2deg)) translate(2px,-2px)}75%{transform:rotate(calc(var(--r) - 2deg)) translate(-2px,2px)}}
@keyframes vt-row{0%,6%{opacity:0;transform:translateX(-24px)}14%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vt-tickin{0%,10%{transform:scale(0)}18%,88%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes vt-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.14)}24%{transform:scale(.98)}36%{transform:scale(1.08)}56%{transform:scale(1)}}
@keyframes vt-swipe{0%,22%{transform:translateX(0)}34%{transform:translateX(26px)}42%,86%{transform:translateX(0);background:color-mix(in srgb,var(--accent-soft) 90%,transparent);border-color:color-mix(in srgb,var(--accent) 80%,transparent)}100%{transform:translateX(0)}}
@keyframes vt-badge{0%,38%{opacity:0;transform:scale(.6)}46%,86%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes vt-ripple{0%{transform:scale(.7);opacity:.5}100%{transform:scale(2.3);opacity:0}}
@keyframes vt-glow{0%,100%{opacity:.55}12%{opacity:1}40%{opacity:.7}}
@keyframes vt-hint{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes vt-open{0%{transform:scale(1)}30%{transform:scale(1.35)}100%{transform:translateY(-34vh) scale(.42)}}
@keyframes vt-flood{0%{transform:scale(.2);opacity:0}35%{opacity:.9}100%{transform:scale(6);opacity:0}}
@keyframes vt-word{from{opacity:0;transform:translateY(16px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes vt-fade{to{opacity:0;visibility:hidden}}
@keyframes vt-shine{0%{transform:translateX(-120%) rotate(18deg)}60%,100%{transform:translateX(1200%) rotate(18deg)}}
@keyframes vt-pop{0%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes vt-ring{0%{transform:scale(.8);opacity:.6}100%{transform:scale(2.2);opacity:0}}
@keyframes vt-show{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- the six animated scenes (same drawings as the dashboard documentation) ---------- */
.s-vis{width:100%;max-width:346px;display:flex;flex-direction:column;gap:10px}
.s-card{border-radius:22px;padding:14px 16px;box-sizing:border-box}
.s-lab{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--accent-soft-ink)}
.s-mono{font-family:'JetBrains Mono',monospace}
.s-muted{font-size:12px;color:var(--text-2)}
.s-big{font-family:'JetBrains Mono',monospace;font-size:24px;color:var(--sc-strong)}
.s-ck{width:18px;height:18px;border-radius:50%;background:var(--brand);display:grid;place-items:center;flex:none}
@keyframes s-spin{to{transform:rotate(360deg)}}
@keyframes s-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes s-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
/* 1 bonnes affaires, 6s */
@keyframes s1-deal{0%,8%{opacity:0;transform:translateY(10px)}16%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s1-fill{0%,10%{width:0}40%,100%{width:var(--w)}}
@keyframes s1-count{0%,100%{opacity:1}50%{opacity:.7}}
.s1-radar{position:relative;width:104px;height:104px;border-radius:50%;flex:none;overflow:hidden;background:repeating-radial-gradient(circle,color-mix(in srgb,var(--accent-soft-ink) 0%,transparent) 0 16px,color-mix(in srgb,var(--accent-soft-ink) 22%,transparent) 16px 17px),color-mix(in srgb,var(--sc-deep) 70%,transparent);border:1px solid color-mix(in srgb,var(--accent-soft-ink) 35%,transparent)}
.s1-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--accent) 60%,transparent),color-mix(in srgb,var(--accent) 0%,transparent) 28%);animation:s-spin 3s linear infinite}
.s1-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--sc-mint);box-shadow:0 0 10px var(--accent);animation:s-blink 1.8s ease-in-out infinite}
.s1-deal{animation:s1-deal 6s ease infinite}
.s1-row{display:flex;align-items:center;gap:10px;font-size:13px}
.s1-row span:first-child{width:120px;flex:none;color:var(--text);font-weight:700}
.s1-bar{flex:1;height:6px;border-radius:3px;background:color-mix(in srgb,var(--sc-ink) 8%,transparent);overflow:hidden}
.s1-bar i{display:block;height:100%;border-radius:3px;background:var(--accent);animation:s1-fill 6s ease infinite}
.s1-pct{width:44px;text-align:right;font-family:'JetBrains Mono',monospace;color:var(--accent-soft-ink);font-size:12px}
/* 2 annonces, 8s */
@keyframes s2-type{0%,6%{width:0}22%,94%{width:100%}100%{width:0}}
@keyframes s2-bar{0%,22%{width:0}36%,94%{width:var(--w)}100%{width:0}}
@keyframes s2-price{0%,38%{opacity:0;transform:translateY(6px)}46%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s2-t1{0%,14%{opacity:0;transform:scale(.4)}18%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s2-t2{0%,26%{opacity:0;transform:scale(.4)}30%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s2-t3{0%,36%{opacity:0;transform:scale(.4)}40%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s2-t4{0%,46%{opacity:0;transform:scale(.4)}50%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s2-press{0%,58%{background:var(--accent);color:var(--accent-ink);transform:none}62%{transform:scale(.95)}66%,94%{transform:none;background:var(--sc-pressed);color:var(--accent-soft-ink)}100%{background:var(--accent);color:var(--accent-ink)}}
@keyframes s2-ok{0%,64%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}74%,94%{opacity:1;transform:none}100%{opacity:0}}
.s2-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:s2-type 8s steps(22) infinite}
.s2-bar{height:7px;border-radius:4px;background:color-mix(in srgb,var(--text) 28%,transparent);animation:s2-bar 8s ease infinite}
.s2-price{animation:s2-price 8s ease infinite}
.s2-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.s2-chip{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--sc-ink) 6%,transparent);color:var(--sc-soft)}
.s2-chip .s-ck{animation:8s ease infinite}
.s2-btn{flex:1;height:44px;border-radius:999px;display:grid;place-items:center;font-weight:800;font-size:14px;animation:s2-press 8s ease infinite}
.s2-ok{display:flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:999px;background:color-mix(in srgb,var(--brand) 20%,transparent);color:var(--sc-mint);font-size:12px;font-weight:800;animation:s2-ok 8s ease infinite}
/* 3 studio photo, 7s */
@keyframes s3-wipe{0%,12%{clip-path:inset(0 100% 0 0)}50%,84%{clip-path:inset(0 0 0 0)}96%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes s3-line{0%,12%{left:0}50%,84%{left:100%}96%,100%{left:0}}
@keyframes s3-t1{0%,24%{opacity:0;transform:scale(.4)}28%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s3-t2{0%,34%{opacity:0;transform:scale(.4)}38%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s3-t3{0%,44%{opacity:0;transform:scale(.4)}48%,90%{opacity:1;transform:none}100%{opacity:0}}
.s3-frame{position:relative;height:292px;border-radius:24px;overflow:hidden;border:1px solid color-mix(in srgb,var(--sc-ink) 16%,transparent)}
.s3-layer{position:absolute;inset:0;display:grid;place-items:center}
.s3-before{background:repeating-linear-gradient(115deg,color-mix(in srgb,var(--sc-ink) 4%,transparent) 0 10px,transparent 10px 24px),linear-gradient(160deg,var(--ill-before),var(--ill-before-2))}
.s3-after{background:radial-gradient(circle at 50% 38%,var(--ill-after),var(--ill-after-2));animation:s3-wipe 7s cubic-bezier(.5,0,.3,1) infinite}
.s3-line{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--sc-strong);box-shadow:0 0 12px color-mix(in srgb,var(--sc-shadow) 40%,transparent);animation:s3-line 7s cubic-bezier(.5,0,.3,1) infinite}
.s3-knob{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--sc-strong);display:grid;place-items:center;box-shadow:0 4px 14px color-mix(in srgb,var(--sc-shadow) 40%,transparent)}
.s3-tag{position:absolute;bottom:12px;height:26px;padding:0 10px;border-radius:999px;display:flex;align-items:center;font-size:11px;font-weight:800}
.s3-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.s3-checks .s2-chip{justify-content:center;padding:0 6px;font-size:11px}
.s3-checks .s-ck{animation:7s ease infinite}
/* 4 messages, 10s */
@keyframes s4-a{0%,3%{opacity:0;transform:translateY(8px)}8%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s4-typ{0%,10%{opacity:0}14%,24%{opacity:1}27%,100%{opacity:0}}
@keyframes s4-sug{0%,27%{opacity:0;transform:translateY(8px)}32%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s4-press{0%,47%{background:var(--accent);color:var(--accent-ink);transform:none}50%{transform:scale(.94)}53%,94%{transform:none;background:var(--sc-pressed);color:var(--accent-soft-ink)}100%{background:var(--accent);color:var(--accent-ink)}}
@keyframes s4-ok{0%,52%{opacity:0;transform:scale(.5)}56%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s4-rep{0%,58%{opacity:0;transform:translateY(8px)}64%,94%{opacity:1;transform:none}100%{opacity:0}}
.s4-msg{max-width:250px;padding:10px 13px;font-size:13px;line-height:1.4}
.s4-cap{font-size:10px;color:var(--text-3);margin-top:4px}
.s4-in{align-self:flex-start;animation:s4-a 10s ease infinite}
.s4-in .s4-msg{background:color-mix(in srgb,var(--sc-ink) 8%,transparent);border-radius:16px 16px 16px 4px;color:var(--text)}
.s4-slot{display:grid}
.s4-slot>*{grid-area:1/1}
.s4-typ{align-self:start;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);animation:s4-typ 10s ease infinite}
.s4-typ i{width:6px;height:6px;border-radius:50%;background:var(--accent-soft-ink);display:inline-block;animation:s-dot 1s ease-in-out infinite}
.s4-sug{border-radius:16px;padding:10px 12px;background:color-mix(in srgb,var(--sc-brun) 70%,transparent);border:1px dashed color-mix(in srgb,var(--sc-peche) 50%,transparent);animation:s4-sug 10s ease infinite}
.s4-btn{height:34px;padding:0 14px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800}
.s4-val{animation:s4-press 10s ease infinite}
.s4-ok{animation:s4-ok 10s ease infinite}
.s4-out{align-self:flex-end;text-align:right;animation:s4-rep 10s ease infinite}
.s4-out .s4-msg{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 70%,transparent);border-radius:16px 16px 4px 16px;color:var(--sc-strong);text-align:left}
.s4-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.s4-stat{border-radius:18px;padding:10px 14px;background:color-mix(in srgb,var(--sc-ink) 5%,transparent);border:1px solid color-mix(in srgb,var(--sc-ink) 10%,transparent)}
.s4-stat b{display:block;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:20px;color:var(--sc-strong)}
.s4-stat span{font-size:11px;color:var(--text-2)}
/* 5 stock, 9s */
@keyframes s5-st1{0%,28%{opacity:1}31%,95%{opacity:0}98%,100%{opacity:1}}
@keyframes s5-st2{0%,31%{opacity:0}34%,60%{opacity:1}63%,100%{opacity:0}}
@keyframes s5-st3{0%,63%{opacity:0}66%,93%{opacity:1}96%,100%{opacity:0}}
@keyframes s5-glow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}}
@keyframes s5-day{0%,63%{opacity:.25;transform:translateX(10px)}67%{opacity:1;transform:translateX(-3px)}70%,93%{opacity:1;transform:none}97%,100%{opacity:.25;transform:translateX(10px)}}
.s5-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.s5-box{height:66px;box-sizing:border-box;border-radius:14px;padding:8px 10px;background:color-mix(in srgb,var(--sc-ink) 5%,transparent);border:1px solid color-mix(in srgb,var(--sc-ink) 10%,transparent);display:flex;flex-direction:column;justify-content:space-between}
.s5-box .n{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-3)}
.s5-box .t{font-size:12px;font-weight:800;color:var(--sc-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s5-st{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700}
.s5-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.s5-on{color:var(--accent-soft-ink)}.s5-sold{color:var(--sc-peche)}.s5-ship{color:var(--sc-sable)}
.s5-hot{border-color:color-mix(in srgb,var(--accent) 80%,transparent);background:color-mix(in srgb,var(--accent-soft) 70%,transparent);animation:s5-glow 1.8s ease-in-out infinite}
.s5-slot{display:grid}
.s5-slot>*{grid-area:1/1}
.s5-slot .a{animation:s5-st1 9s ease infinite}
.s5-slot .b{animation:s5-st2 9s ease infinite}
.s5-slot .c{animation:s5-st3 9s ease infinite}
.s5-leg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.s5-leg div{border-radius:14px;padding:8px 10px;background:color-mix(in srgb,var(--sc-ink) 5%,transparent);border:1px solid color-mix(in srgb,var(--sc-ink) 10%,transparent)}
.s5-leg b{display:block;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:18px;color:var(--sc-strong)}
.s5-day{animation:s5-day 9s ease infinite}
/* stock: boxes pop in one by one, a magnifier looks for the sold jacket and stops on B2, the counters follow */
.s5-grid{position:relative}
.s5-box{animation:s5-pop .5s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--i,0) * 70ms + 150ms)}
.s5-box:nth-of-type(2){--i:1}.s5-box:nth-of-type(3){--i:2}.s5-box:nth-of-type(4){--i:3}.s5-box:nth-of-type(5){--i:4}.s5-box:nth-of-type(6){--i:5}.s5-box:nth-of-type(7){--i:6}.s5-box:nth-of-type(8){--i:7}.s5-box:nth-of-type(9){--i:8}
.s5-box.s5-hot{animation:s5-pop .5s cubic-bezier(.3,1.4,.5,1) backwards,s5-glow 1.8s ease-in-out infinite;animation-delay:430ms,0s}
.s5-cherche{position:absolute;left:0;top:0;z-index:2;width:calc((100% - 16px) / 3);height:66px;box-sizing:border-box;border-radius:14px;border:2px solid var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent),0 10px 24px color-mix(in srgb,var(--sc-shadow) 30%,transparent);pointer-events:none;color:var(--accent-ink);animation:s5-cherche 9s cubic-bezier(.6,0,.3,1) infinite}
.s5-cherche svg{position:absolute;right:-9px;top:-9px;width:22px;height:22px;padding:4px;box-sizing:border-box;border-radius:50%;background:var(--accent)}
.s5-leg .s5-slot .a{animation:s5-st1 9s ease infinite}
.s5-leg .s5-slot .b{animation:s5-n2 9s ease infinite}
.s5-leg .s5-tard .a{animation:s5-n3 9s ease infinite}
.s5-leg .s5-tard .b{animation:s5-st3 9s ease infinite}
@keyframes s5-pop{0%{opacity:0;transform:translateY(10px) scale(.85)}}
@keyframes s5-cherche{0%{opacity:0;transform:translate(0,0) scale(1.15)}5%,8%{opacity:1;transform:translate(0,0)}14%,16%{transform:translate(calc(200% + 16px),0)}22%,24%{transform:translate(calc(100% + 8px),calc(200% + 16px))}29%{transform:translate(calc(100% + 8px),calc(100% + 8px)) scale(1)}33%{transform:translate(calc(100% + 8px),calc(100% + 8px)) scale(1.08)}37%,58%{opacity:1;transform:translate(calc(100% + 8px),calc(100% + 8px)) scale(1)}64%,100%{opacity:0;transform:translate(calc(100% + 8px),calc(100% + 8px)) scale(.9)}}
@keyframes s5-n2{0%,30%{opacity:0;transform:translateY(-6px)}34%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes s5-n3{0%,63%{opacity:1}66%,93%{opacity:0}96%,100%{opacity:1}}
/* 6 compta, 7s */
@keyframes s6-grow{0%,4%{transform:scaleY(0)}26%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes s6-ok{0%,46%{opacity:0;transform:scale(.5)}52%{opacity:1;transform:scale(1.1)}56%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes s6-ready{0%,46%{opacity:.35}54%,92%{opacity:1}100%{opacity:.35}}
.s6-chart{display:flex;align-items:flex-end;gap:10px;height:120px;margin-top:12px}
.s6-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.s6-col i{display:block;width:100%;border-radius:8px 8px 3px 3px;background:color-mix(in srgb,var(--accent) 55%,transparent);transform-origin:bottom;animation:s6-grow 7s cubic-bezier(.3,.7,.3,1) infinite both}
.s6-col:last-child i{background:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}
.s6-col span{font-size:10px;color:var(--text-3)}
.s6-ready{animation:s6-ready 7s ease infinite}
.s6-ok{animation:s6-ok 7s ease infinite}

/* scroll reveal: vitrine.js marks blocks .vt-rv and toggles .in while they are on screen (they fade out again when they leave) */
.js .vt-rv{opacity:0;transform:translateY(34px) scale(.97);filter:blur(6px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .7s ease;transition-delay:var(--d,0s)}
.js .vt-rv.gauche{transform:translateX(-44px)}
.js .vt-rv.droite{transform:translateX(44px)}
.js .vt-rv.in{opacity:1;transform:none;filter:none}

/* animations only run while visible (vitrine.js adds .vu), and never for people who asked for less motion */
.js .vt-anim:not(.vu),.js .vt-anim:not(.vu) *{animation-play-state:paused!important}

/* ---------- phone (same pages, one column) ---------- */
@media (min-width:901px) and (max-width:1180px){
  .vt-f{grid-template-columns:260px 1fr}
  .vt-scene-corps{grid-template-columns:1fr;gap:24px}
  .vt-scene-corps > :last-child{max-width:400px}
}
@media (max-width:900px){
  .vt-in{padding:0 20px}
  .vt-top .vt-in{min-height:68px}
  .vt-nav{display:none}
  .vt-top .vt-haut-action{display:none}
  .vt-menu{display:grid;margin-left:8px}
  .vt-theme{margin-left:auto}
  .vt-nav.ouvert{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:fixed;left:12px;right:12px;top:72px;z-index:21;margin:0;padding:10px;border-radius:28px;background:var(--sheet);animation:vt-drop .3s ease}
  .vt-nav.ouvert a,.vt-nav.ouvert .off{justify-content:space-between;min-height:54px;padding:0 18px;border-radius:16px;font:500 22px var(--f-title)}
  .vt-nav.ouvert small{font-family:var(--f-text)}
  .vt-statut{top:64px;white-space:normal;text-align:center;max-width:calc(100% - 40px)}
  .vt-h2{font-size:34px;line-height:1.08}
  .vt-lead{font-size:17px}
  .vt-sec{padding:72px 0}
  .vt-hero{padding:24px 0 56px}
  .vt-hero .vt-in{grid-template-columns:1fr;gap:24px}
  .vt-hero h1{font-size:42px;line-height:1.05}
  .vt-hero .vt-lead{font-size:18px}
  .vt-hero-actions{display:none}
  .vt-carte{margin:0 auto;max-width:400px}
  .vt-down-wrap{margin-top:32px}
  .vt-deux{grid-template-columns:1fr;gap:24px}
  .vt-nuage{height:340px;margin:0}
  .vt-mess{font-size:13px;padding:10px 14px}
  .vt-pile{margin:0}
  .vt-fns{grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
  .vt-fn{padding:16px;border-radius:22px}
  .vt-fn b{font-size:18px;margin-top:10px}
  .vt-fn span{font-size:12px}
  .vt-fn .voir{display:none}
  .vt-stats{grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
  .vt-stats li{padding:16px;border-radius:20px}
  .vt-stats b{font-size:24px}
  .vt-stats span{font-size:13px}
  .vt-soirees{margin-top:32px;font-size:30px}
  .vt-offre{grid-template-columns:1fr}
  .vt-panneau{padding:22px;border-radius:28px}
  .vt-panneau h2{font-size:30px}
  .vt-f{grid-template-columns:1fr;margin-top:22px}
  .vt-liste{position:static}
  .vt-item{min-height:64px;padding:0 14px}
  .js .vt-f.choisi .vt-liste{display:none}
  .js .vt-f:not(.choisi) .vt-scenes{display:none}
  .vt-scene{padding:22px 18px;border-radius:28px;min-height:0}
  .vt-scene-corps{grid-template-columns:1fr;gap:18px}
  .vt-scene h2{font-size:28px;line-height:1.08}
  .vt-pts li{font-size:15px}
  .vt-scene-btns{justify-content:center}
  .js .vt-scene-btns .tout{display:inline-flex}
  .vt-fin h2{font-size:30px}
  .vt-fin .vt-cta{display:none}
  .vt-attente-page{padding:8px 0 56px}
  .vt-attente-page .vt-in{grid-template-columns:1fr;gap:22px}
  .vt-attente-page h1{font-size:36px;line-height:1.06}
  .vt-bienvenue .t{font-size:44px}
  .vt-bienvenue p{font-size:18px}
  .vt-barre{display:block;position:fixed;left:0;right:0;bottom:0;z-index:15;padding:18px 20px 20px;background:linear-gradient(color-mix(in srgb,var(--bg) 0%,transparent),var(--bg) 40%)}
  .vt-barre .vt-cta{display:flex;width:100%}
  body.vt.avec-barre{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){
  .vt-anim *,.vt-anim,.vt-entree *,.vt-carte,.vt-blob,.vt-down svg,.vt-pastille i,.vt-cta.shine::after{animation:none!important}
  .vt-w{opacity:1}
  .vt-rows li,.vt-rows .t,.vt-carte .prix,.vt-carte .ok,.vt-pile .badge{opacity:1;transform:none}
  .s5-slot>:not(:first-child),.s5-cherche{display:none}
  .js .vt-rv{opacity:1;transform:none;filter:none;transition:none}
  .vt-jauge i::after,.vt-panneau::before,.vt-stats li b,.vt-faq details p,.vt-compteur .chiffre b{animation:none!important}
  .vt-jauge i{transition:none}
  .vt-faq details,.vt-stats li,.vt-panneau,.vt-fn{translate:none!important;transform:none!important}
}
@media print{
  .vt-top,.vt-barre,.vt-entree,.vt-blob,.vt-down-wrap{display:none!important}
  .js .vt-rv{opacity:1!important;transform:none!important;filter:none!important}
}