/* Layout : app plein écran sans défilement de page (en-tête, vue, barre d'onglets).
   Verre liquide sur quelques surfaces fixes posées sur un fond statique ; le contenu en aplats légers.
   Animations : uniquement transform et opacity. */
:root{
  --bg:#e8ebf1;--b1:rgba(150,170,255,.55);--b2:rgba(255,190,160,.5);--b3:rgba(140,220,200,.45);
  --fg:#12141a;--fg2:#5b6170;--gl:rgba(255,255,255,.6);--gl2:rgba(255,255,255,.3);--gb:rgba(255,255,255,.85);--gs:rgba(40,50,80,.16);--hl:rgba(255,255,255,.95);--soft:rgba(20,24,34,.07);--solid:rgba(255,255,255,.9);
  --on:#12141a;--onfg:#ffffff;
  --disp:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e0f12;--b1:rgba(90,110,190,.36);--b2:rgba(150,80,120,.28);--b3:rgba(40,130,115,.28);--fg:#f1f2f6;--fg2:#979dab;--gl:rgba(255,255,255,.13);--gl2:rgba(255,255,255,.04);--gb:rgba(255,255,255,.17);--gs:rgba(0,0,0,.45);--hl:rgba(255,255,255,.28);--soft:rgba(255,255,255,.07);--solid:rgba(28,29,35,.94);--on:#f1f2f6;--onfg:#0e0f12;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e0f12;--b1:rgba(90,110,190,.36);--b2:rgba(150,80,120,.28);--b3:rgba(40,130,115,.28);--fg:#f1f2f6;--fg2:#979dab;--gl:rgba(255,255,255,.13);--gl2:rgba(255,255,255,.04);--gb:rgba(255,255,255,.17);--gs:rgba(0,0,0,.45);--hl:rgba(255,255,255,.28);--soft:rgba(255,255,255,.07);--solid:rgba(28,29,35,.94);--on:#f1f2f6;--onfg:#0e0f12;color-scheme:dark}
body[data-skin="graphite"],body[data-skin="encre"],body[data-skin="aube"],body[data-skin="foret"],body[data-skin="or"]{--fg:#f1f2f6;--fg2:#979dab;--gl:rgba(255,255,255,.13);--gl2:rgba(255,255,255,.04);--gb:rgba(255,255,255,.17);--gs:rgba(0,0,0,.45);--hl:rgba(255,255,255,.28);--soft:rgba(255,255,255,.07);--solid:rgba(28,29,35,.94);--on:#f1f2f6;--onfg:#0e0f12;color-scheme:dark}
body[data-skin="brume"],body[data-skin="sable"],body[data-skin="lilas"]{--fg:#12141a;--fg2:#5b6170;--gl:rgba(255,255,255,.6);--gl2:rgba(255,255,255,.3);--gb:rgba(255,255,255,.85);--gs:rgba(40,50,80,.16);--hl:rgba(255,255,255,.95);--soft:rgba(20,24,34,.07);--solid:rgba(255,255,255,.9);--on:#12141a;--onfg:#fff;color-scheme:light}
body[data-skin="graphite"]{--bg:#0e0f12;--b1:rgba(90,110,190,.36);--b2:rgba(150,80,120,.28);--b3:rgba(40,130,115,.28)}
body[data-skin="encre"]{--bg:#0a0e1c;--b1:rgba(70,90,230,.45);--b2:rgba(40,170,220,.3);--b3:rgba(120,70,200,.32)}
body[data-skin="aube"]{--bg:#160d10;--b1:rgba(230,90,110,.36);--b2:rgba(240,160,80,.28);--b3:rgba(140,60,140,.32)}
body[data-skin="foret"]{--bg:#0b120f;--b1:rgba(60,170,120,.36);--b2:rgba(150,190,80,.24);--b3:rgba(40,110,140,.3)}
body[data-skin="or"]{--bg:#12100a;--b1:rgba(210,160,60,.34);--b2:rgba(160,110,40,.3);--b3:rgba(240,210,140,.18)}
body[data-skin="brume"]{--bg:#e8ebf1;--b1:rgba(150,170,255,.55);--b2:rgba(255,190,160,.5);--b3:rgba(140,220,200,.45)}
body[data-skin="sable"]{--bg:#efe7db;--b1:rgba(230,150,110,.45);--b2:rgba(150,180,140,.45);--b3:rgba(240,210,150,.55);--fg:#1d1712;--fg2:#6d6257;--on:#1d1712}
body[data-skin="lilas"]{--bg:#ebe7f4;--b1:rgba(170,140,255,.5);--b2:rgba(255,170,210,.45);--b3:rgba(150,210,255,.45)}

html{height:100%;box-sizing:border-box;overflow:hidden}
body{height:100%;overflow:hidden;background-color:var(--bg);background-image:radial-gradient(60% 45% at 10% 14%,var(--b1),transparent 70%),radial-gradient(55% 42% at 95% 42%,var(--b2),transparent 70%),radial-gradient(70% 48% at 35% 100%,var(--b3),transparent 70%);color:var(--fg);font:15px/1.4 var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}
*,*::before,*::after{box-sizing:border-box}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
input{user-select:text;-webkit-user-select:text}
button:focus-visible,input:focus-visible,[role=button]:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:12px}
p,h1,h2,h3{margin:0}
h2{font:700 1.35rem/1.15 var(--disp);letter-spacing:-.01em;text-wrap:balance}
h3{font:700 1.05rem/1.2 var(--disp)}

/* ===== verre liquide ===== */
.glass{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--gl),var(--gl2));-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--gb);box-shadow:inset 0 1px 0 var(--hl),inset 0 -1px 1px rgba(255,255,255,.05),0 14px 34px -14px var(--gs)}
.glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.2),transparent 50%)}
body.lite .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--solid)}
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 18px;border-radius:999px;background:var(--gl);border:1px solid var(--gb);box-shadow:inset 0 1px 0 var(--hl);font-weight:600;transition:transform .12s}
.gbtn.sq{width:48px;padding:0;flex:none}
.gbtn svg{width:20px;height:20px}
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 24px;border-radius:999px;background:var(--on);color:var(--onfg);font:700 16px var(--disp);letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -10px var(--gs);transition:transform .12s;white-space:nowrap}
.gbtn:active,.pbtn:active,.qk:active{transform:scale(.96)}
.pbtn[disabled],.gbtn[disabled],.qk[disabled]{opacity:.4;cursor:not-allowed}
.coin{display:inline-block;width:14px;height:14px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,#fff5cf,#e8b13a 52%,#a87512);box-shadow:inset 0 0 0 1.5px rgba(120,80,0,.35)}
.muted{color:var(--fg2)}

/* ===== squelette ===== */
#app{height:100%;display:flex;flex-direction:column;max-width:760px;margin:0 auto}
.hd{flex:none;display:flex;align-items:center;justify-content:space-between;padding:10px 16px 4px}
.wm{font:800 20px var(--disp);letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.wm i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,var(--bg) 0 18%,var(--fg) 20% 30%,transparent 32%),repeating-radial-gradient(circle,var(--fg) 0 1px,transparent 1px 2.5px);opacity:.9}
.jet{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 10px;border-radius:999px;font:600 14px var(--mono);font-variant-numeric:tabular-nums}
main{flex:1;min-height:0;position:relative}
.view{position:absolute;inset:6px 16px 0;display:flex;flex-direction:column;gap:12px;min-height:0;animation:vin .22s ease-out}
.tabs{flex:none;display:flex;gap:2px;margin:10px 16px 12px;padding:6px;border-radius:30px}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 5px;border-radius:22px;color:var(--fg2);font-size:10.5px;font-weight:600;position:relative;transition:background .2s,color .2s}
.tabs svg{width:23px;height:23px}
.tabs button[aria-current="page"]{color:var(--fg);background:var(--soft);box-shadow:inset 0 1px 0 var(--hl)}
.dot{position:absolute;top:5px;right:calc(50% - 17px);width:8px;height:8px;border-radius:50%;background:#ff5f86}
.vh{flex:none;display:flex;align-items:center;gap:8px}
.seg{display:flex;gap:2px;padding:4px;border-radius:999px;flex:none}
.seg button{height:38px;padding:0 14px;border-radius:999px;font-weight:600;font-size:14px;color:var(--fg2)}
.seg button[aria-pressed="true"]{background:var(--on);color:var(--onfg)}
.cnt{margin-left:auto;font:600 13px var(--mono);color:var(--fg2);white-space:nowrap}
.fdot{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:#ff5f86}
.empty{margin:auto;color:var(--fg2)}

/* ===== OUVRIR ===== */
.v-open{align-items:center;gap:14px;padding-bottom:4px}
.evp{flex:none;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;max-width:100%}
.evp span{font-family:var(--mono);color:var(--fg2);white-space:nowrap}
.evp b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ldot{width:7px;height:7px;border-radius:50%;background:#ff5f86;flex:none;animation:pulse 1.6s ease-in-out infinite}
.mbox{flex:1;min-height:0;width:100%;display:grid;place-items:center;container-type:size;cursor:pointer}
.maxi{position:relative;width:min(74cqw,88cqh,400px);aspect-ratio:1;transform:translateX(-7%);container-type:inline-size}
.mv{position:absolute;inset:3%;border-radius:50%;background:repeating-radial-gradient(circle,#111216 0 .55cqw,#1e1f26 .55cqw 1.1cqw);transform:translateX(17%);transition:transform .5s cubic-bezier(.3,1.3,.5,1);box-shadow:0 2cqw 6cqw rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.14)}
.mv::after{content:"";position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle,#000 0 7%,transparent 8%),var(--lc,#c9c3b5)}
.mbox:hover .mv{transform:translateX(24%) rotate(30deg)}
.ms{position:absolute;inset:0;border-radius:3cqw;overflow:hidden;-webkit-mask:radial-gradient(circle closest-side,transparent 0 21%,#000 22%);mask:radial-gradient(circle closest-side,transparent 0 21%,#000 22%)}
.ms b{position:absolute;left:8cqw;top:7cqw;font:800 15cqw/.86 var(--disp);letter-spacing:-.03em}
.ms span{position:absolute;left:8cqw;bottom:7cqw;font:500 3.6cqw var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--fg2)}
.ms em{position:absolute;right:8cqw;bottom:7cqw;font:500 3.6cqw var(--mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--fg2)}
.obar{flex:none;display:flex;gap:10px;width:min(100%,420px)}
.obar .pbtn{flex:1}
.cap{flex:none;font-size:12.5px;color:var(--fg2);min-height:1.2em;text-align:center}
.cap b{font-family:var(--mono);font-weight:600;color:var(--fg)}
.quick{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,420px)}
.qk{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 6px 9px;border-radius:22px;font-size:12.5px;font-weight:600;transition:transform .12s}
.qk svg{width:22px;height:22px}
.qk em{position:absolute;top:7px;right:10px;font:600 11px var(--mono);font-style:normal;color:var(--fg2)}
.qk em.ok{color:#1ed760}

/* ===== tuiles (titres) ===== */
.it{display:block;width:100%;height:100%;border-radius:8%}
.tile{position:relative;width:100%;aspect-ratio:1;border-radius:8%;overflow:hidden;container-type:inline-size;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.tx{position:absolute;left:0;right:0;bottom:0;padding:24cqw 7cqw 6.5cqw;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.66));color:#fff;display:flex;flex-direction:column;gap:1.4cqw;text-align:left}
.tx b{font:700 11.5cqw/1.06 var(--disp);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tx span{font:500 9cqw/1.1 var(--body);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd{position:absolute;left:7cqw;top:7cqw;width:7cqw;height:7cqw;border-radius:50%;background:var(--rc);box-shadow:0 0 0 1.5cqw rgba(0,0,0,.28)}
.tc{position:absolute;right:6cqw;top:5.5cqw;font:600 8.5cqw var(--mono);padding:.8cqw 4cqw;border-radius:9cqw;background:rgba(0,0,0,.45);color:#fff;font-style:normal}
.tile.lk{filter:saturate(0) brightness(.62);opacity:.5}

/* ===== albums & disque de platine ===== */
.alb,.plq{position:relative;width:100%;aspect-ratio:1;container-type:inline-size}
.alc{position:absolute;left:0;top:5%;width:86%;aspect-ratio:1;border-radius:3cqw;overflow:hidden;z-index:1;box-shadow:0 2cqw 5cqw rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.12)}
.alc span{position:absolute;left:7cqw;top:7cqw;right:7cqw;font:800 9.5cqw/.95 var(--disp);color:#fff;text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-align:left}
.alc i{position:absolute;left:7cqw;bottom:6cqw;font:500 6cqw var(--body);font-style:normal;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.35);max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alv{position:absolute;left:5%;top:7%;width:82%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#111216 0 .9cqw,#1e1f26 .9cqw 1.8cqw);transition:transform .5s cubic-bezier(.3,1.3,.5,1);box-shadow:0 1cqw 3cqw rgba(0,0,0,.4)}
.alv::after{content:"";position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle,#000 0 7%,transparent 8%),var(--lab)}
.alb.ok .alv{transform:translateX(17%)}
.alb:not(.ok) .alc{filter:saturate(.12) brightness(.66)}
.badge{position:absolute;right:18%;bottom:8%;z-index:2;font:600 11px var(--mono);padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.plq .badge{right:8%}
.pfm{position:absolute;inset:3%;border-radius:3cqw;background:linear-gradient(145deg,#2a2b31,#111216);box-shadow:0 2cqw 5cqw rgba(0,0,0,.35),inset 0 0 0 1.5cqw #1b1c21,inset 0 0 0 1.9cqw rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqw}
.pdk{position:relative;width:58cqw;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 30deg,#eef1f5,#9aa3ad,#f8fafc,#8c95a0,#eef1f5,#a7b0ba,#f8fafc,#9aa3ad,#eef1f5);box-shadow:0 1cqw 3cqw rgba(0,0,0,.5)}
.pdk::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,rgba(0,0,0,0) 0 .8cqw,rgba(0,0,0,.06) .8cqw 1.2cqw)}
.pdk i{position:absolute;inset:34%;border-radius:50%;z-index:1;box-shadow:0 0 0 .5cqw rgba(0,0,0,.25)}
.ppl{background:linear-gradient(#e0e4e8,#aeb5bd);color:#15171b;border-radius:1cqw;padding:1.6cqw 4cqw;text-align:center;line-height:1.1;max-width:86%}
.ppl b{display:block;font:700 5.4cqw var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppl span{font:500 3.4cqw var(--mono);letter-spacing:.12em;text-transform:uppercase}
.plq:not(.ok) .pfm{filter:grayscale(1) brightness(.6)}

/* ===== pager ===== */
.pgr{flex:1;min-height:0;position:relative}
.pgt{height:calc(100% - 24px);display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.pgt::-webkit-scrollbar{display:none}
.pg{flex:0 0 100%;display:grid;align-content:center;scroll-snap-align:start;scroll-snap-stop:always}
.pgi{height:24px;display:flex;justify-content:center;align-items:center;gap:6px;font:600 12px var(--mono);color:var(--fg2)}
.pgi i{width:6px;height:6px;border-radius:50%;background:var(--fg2);opacity:.35;transition:opacity .2s,transform .2s}
.pgi i.on{opacity:1;transform:scale(1.3)}

/* ===== platine (collection) ===== */
.ttw{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.ttc{flex:none;width:min(42vw,25vh,220px)}
.tti{flex:none;font:600 12px var(--mono);color:var(--fg2);min-height:1.2em}
.ttv{flex:1;min-height:0;width:100%;display:grid;place-items:center;container-type:size}
.vin{position:relative;width:min(86cqw,96cqh,420px);aspect-ratio:1;border-radius:50%;touch-action:none;cursor:grab;padding:3%}
.vin:active{cursor:grabbing}
.vinr{position:absolute;inset:3%;border-radius:50%;will-change:transform;background:repeating-radial-gradient(circle,#111216 0 2px,#1e1f26 2px 4px);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.vinr::before{content:"";position:absolute;left:49.2%;top:4%;width:1.6%;height:10%;border-radius:2px;background:rgba(255,255,255,.22)}
.vlab{position:absolute;inset:33%;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.vlab::after{content:"";position:absolute;left:46%;top:46%;width:8%;height:8%;border-radius:50%;background:#000}
.vsh{position:absolute;inset:6%;border-radius:50%;pointer-events:none;background:conic-gradient(from 20deg,transparent 0 6%,rgba(255,255,255,.1) 10%,transparent 14% 50%,rgba(255,255,255,.07) 56%,transparent 61%)}
.ttbar{flex:none;display:flex;gap:8px;align-items:center;width:min(100%,420px);padding:6px;border-radius:999px}
.ttbar .gbtn{height:42px;width:42px}
.scrub{flex:1;min-width:0;accent-color:var(--fg)}

/* ===== rappeurs ===== */
.search{flex:1;min-width:0;height:46px;padding:0 16px 0 40px;border-radius:999px;outline:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23888' stroke-width='2'><circle cx='8' cy='8' r='6'/><path d='M12.5 12.5 17 17'/></svg>"),linear-gradient(180deg,var(--gl),var(--gl2));background-repeat:no-repeat;background-position:14px 50%,0 0}
.search::placeholder{color:var(--fg2)}
.bubw{flex:1;min-height:0;border-radius:30px;overflow:hidden;touch-action:pan-y;margin-bottom:2px}
.bb{position:absolute;left:0;top:0;border-radius:50%;padding:2.5px;will-change:transform;cursor:grab;touch-action:none;background:conic-gradient(var(--fg) calc(var(--p)*1%),var(--soft) 0);transition:opacity .3s}
.bb.done{background:conic-gradient(#e9c46a,#fff3c8,#e9c46a)}
.bb>span{width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--avg);color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.35);box-shadow:inset 0 2px 6px rgba(255,255,255,.25),inset 0 -6px 14px rgba(0,0,0,.18)}
.bb b{font-family:var(--disp);font-weight:800;line-height:1}
.bb em{font:600 10px var(--mono);font-style:normal;opacity:.9;margin-top:2px}
.bb.dim{opacity:.12}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--disp);color:#fff;background:var(--avg);flex:none;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.ring{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:600 11px var(--mono);background:conic-gradient(var(--fg) calc(var(--p)*1%),var(--soft) 0);position:relative;flex:none}
.ring::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--bg)}
.ring span{position:relative}

/* ===== calques ===== */
#dt,#sh,#dd{position:fixed;inset:0;pointer-events:none}
#dt{z-index:40}#sh{z-index:45}#dd{z-index:70}
#dt>*,#sh>*,#dd>*{pointer-events:auto}
.scrim{position:fixed;inset:0;background:rgba(5,6,10,.42);animation:fade .2s}
body:not(.lite) .scrim{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.page{position:fixed;inset:calc(10px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px));max-width:740px;margin:0 auto;border-radius:30px;display:flex;flex-direction:column;gap:12px;padding:14px;animation:up .28s cubic-bezier(.2,.9,.3,1)}
.ph{flex:none;display:flex;align-items:center;gap:12px}
.ph .pn{flex:1;min-width:0;display:flex;flex-direction:column}
.ph .pn b{font:700 1.25rem/1.1 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph .pn span{font:600 12px var(--mono);color:var(--fg2)}
.rwr{flex:none;display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px}
.rwr::-webkit-scrollbar{display:none}
.rwr>button{flex:none;width:min(30vw,128px)}
.pop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,400px);max-height:calc(100% - 40px);display:flex;flex-direction:column;align-items:center;gap:14px;animation:popin .26s cubic-bezier(.2,1.2,.4,1)}
.big{width:min(76vw,46vh,340px)}
.info{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:10px 16px;border-radius:22px;font:600 12.5px var(--mono)}
.info span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.info i{width:8px;height:8px;border-radius:50%;background:var(--rc)}
.trk{width:100%;border-radius:22px;padding:6px 14px;display:flex;flex-direction:column}
.trk div{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--soft);font-size:14px}
.trk div:first-child{border-top:0}
.trk div i{width:8px;height:8px;border-radius:50%;background:var(--rc);flex:none}
.trk div span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk div em{font:600 12px var(--mono);font-style:normal;color:var(--fg2)}
.trk div.no{opacity:.45}

/* ===== feuille (menu, filtres) ===== */
.sheet{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:600px;margin:0 auto;max-height:calc(100% - 30px);border-radius:30px;padding:10px 14px 16px;display:flex;flex-direction:column;gap:12px;animation:up .28s cubic-bezier(.2,.9,.3,1)}
.grab{width:40px;height:5px;border-radius:5px;background:var(--fg2);opacity:.35;margin:0 auto}
.shh{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.shh .gbtn{height:40px}
.mlist{display:flex;flex-direction:column;border-radius:22px;background:var(--soft);overflow:hidden}
.mi{display:flex;align-items:center;gap:12px;padding:11px 14px;text-align:left;width:100%;border-top:1px solid var(--soft)}
.mi:first-child{border-top:0}
.mi .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--icbg);color:#fff;flex:none}
.mi .ic svg{width:18px;height:18px}
.mi b{flex:1;font-weight:600}
.mi small{font:500 12.5px var(--body);color:var(--fg2);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:36px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;border-radius:999px;background:var(--soft);font-size:13.5px;font-weight:600;color:var(--fg2)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--rc)}
.chip[aria-pressed="true"]{background:var(--on);color:var(--onfg)}
.lbl{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)}
.evc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;background:var(--soft)}
.evc .sw2{width:38px;height:38px;border-radius:12px;background:var(--evbg);flex:none}
.evc div{flex:1;min-width:0}
.evc b{display:block;font-weight:600}
.evc small{display:block;font-size:12.5px;color:var(--fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evc em{font:600 11.5px var(--mono);font-style:normal;color:var(--fg2);white-space:nowrap}
.skins{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.skin{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--fg2)}
.skin .pv{width:100%;aspect-ratio:1;border-radius:18px;background:var(--pv);box-shadow:inset 0 0 0 1px rgba(128,128,128,.25);position:relative;overflow:hidden}
.skin .pv i{position:absolute;left:18%;right:18%;bottom:16%;height:22%;border-radius:999px;background:rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.skin[aria-pressed="true"] .pv{box-shadow:0 0 0 2.5px var(--fg)}
.skin[aria-pressed="true"]{color:var(--fg)}
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-top:1px solid var(--soft)}
.set:first-child{border-top:0}
.set b{font-weight:600}
.sw{position:relative;width:50px;height:30px;border-radius:999px;background:var(--soft);flex:none;box-shadow:inset 0 0 0 1px var(--gb)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .2s}
.sw[aria-checked="true"]{background:#34c759}
.sw[aria-checked="true"]::after{transform:translateX(20px)}
.codef{display:flex;gap:8px}
.codef input{flex:1;min-width:0;height:48px;padding:0 16px;border-radius:999px;border:1px solid var(--gb);background:var(--soft);text-transform:uppercase;font:600 15px var(--mono);letter-spacing:.1em;outline:none}
.msg{font-size:13px;min-height:1.2em;font-weight:600}
.prose{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--fg2)}
.prose b{color:var(--fg)}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:90;padding:11px 18px;border-radius:999px;background:var(--on);color:var(--onfg);font-weight:600;font-size:14px;animation:toast 2.2s ease forwards;white-space:nowrap;pointer-events:none}

/* ===== OUVERTURE (toujours sombre) ===== */
.ov{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(18px + env(safe-area-inset-bottom,0px));background:radial-gradient(80% 60% at 50% 42%,#17181e,#06070a);color:#f1f2f6;overflow:hidden;animation:fade .2s;--gl:rgba(255,255,255,.13);--gl2:rgba(255,255,255,.04);--gb:rgba(255,255,255,.17);--hl:rgba(255,255,255,.28);--soft:rgba(255,255,255,.08);--fg:#f1f2f6;--fg2:#979dab;--on:#f1f2f6;--onfg:#0e0f12}
.op>*{position:relative;z-index:2}
.op>.L{position:absolute;inset:0;z-index:1;pointer-events:none}
.op>.tfx{position:absolute;inset:0;z-index:8;pointer-events:none}
.snap,.snap *{transition:none!important}
.blk{background:#000;opacity:0;transition:opacity .5s}
.op.dim .blk{opacity:.55}.op.dim2 .blk{opacity:.9}
.glow{background:radial-gradient(circle at 50% 45%,var(--rc),transparent 55%);opacity:0;transition:opacity .5s}
.op.play .glow{opacity:.14}.op.lv-2 .glow,.op.lv-3 .glow{opacity:.32}.op.lv-4 .glow,.op.lv-5 .glow{opacity:.48}
.speed,.grays{left:50%!important;top:45%!important;right:auto!important;bottom:auto!important;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax}
.speed{background:repeating-conic-gradient(rgba(255,255,255,.16) 0 .7deg,transparent .7deg 6deg);-webkit-mask:radial-gradient(closest-side,transparent 12%,#000 40%);mask:radial-gradient(closest-side,transparent 12%,#000 40%);opacity:0}
.op.go4 .speed{animation:speed 1.1s ease-out}
.grays{opacity:0;transform:scale(.4);transition:opacity .5s,transform .7s cubic-bezier(.2,1,.3,1)}
.grays i{position:absolute;inset:0;background:repeating-conic-gradient(color-mix(in srgb,var(--rc) 32%,transparent) 0 4deg,transparent 4deg 14deg);-webkit-mask:radial-gradient(closest-side,#000 6%,transparent 46%);mask:radial-gradient(closest-side,#000 6%,transparent 46%);animation:rot 40s linear infinite}
.op.raysOn .grays{opacity:1;transform:scale(1)}
.beam{left:50%!important;right:auto!important;width:12px;margin-left:-6px;background:linear-gradient(#fff,rgba(255,240,200,.55) 55%,transparent);opacity:0;transform:scaleY(0);transform-origin:top}
.op.go5 .beam{animation:beam 1.9s ease-in-out}
.optop{flex:none;width:100%;display:flex;justify-content:space-between;align-items:center;min-height:38px}
.lvl{display:flex;gap:6px}
.lvl i{width:11px;height:11px;transform:rotate(45deg);border-radius:2px;background:rgba(255,255,255,.14);transition:background .3s,transform .3s}
.lvl i.on{background:var(--c);transform:rotate(45deg) scale(1.15)}
.skip{height:38px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.16);font-weight:600;font-size:14px;color:#fff}
.opmid{flex:1;min-height:0;width:100%;display:grid;place-items:center;container-type:size}
.stage{position:relative;width:min(88cqw,82cqh,440px);aspect-ratio:1;container-type:inline-size}
.op.shake .stage{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
.pl{position:absolute;inset:0;perspective:900px;transition:transform .35s,opacity .35s}
.op.out .pl{transform:scale(.88);opacity:.22}
.bv{position:absolute;inset:6%;border-radius:50%;box-shadow:0 0 0 2.2cqw #17181d,0 0 0 2.5cqw rgba(255,255,255,.08),0 3cqw 8cqw rgba(0,0,0,.6)}
.bvx{position:absolute;inset:0;border-radius:50%}
.bvr{position:absolute;inset:0;border-radius:50%;overflow:hidden;animation:rot 1.8s linear infinite;animation-play-state:paused;will-change:transform}
.op.play .bvr{animation-play-state:running}
.op.play.fake .bvr{animation-play-state:paused}
.op.play.rw .bvr{animation-direction:reverse;animation-duration:.3s}
.bvr>i{position:absolute;inset:0;opacity:0;transition:opacity .45s}
.bvr>.l0{opacity:1;background:repeating-radial-gradient(circle,#111216 0 .55cqw,#1d1e25 .55cqw 1.1cqw)}
.bvr>.l1{background:conic-gradient(rgba(90,169,255,0),rgba(90,169,255,.5) 12%,rgba(90,169,255,0) 30%,rgba(90,169,255,.45) 60%,rgba(90,169,255,0) 78%)}
.bvr>.l2{background:conic-gradient(from 90deg,rgba(194,125,255,0),rgba(194,125,255,.6) 14%,rgba(194,125,255,0) 32%,rgba(194,125,255,.55) 62%,rgba(194,125,255,0) 80%)}
.bvr>.l3{background:conic-gradient(from 30deg,rgba(255,255,255,0),rgba(255,255,255,.5) 10%,rgba(255,255,255,0) 22%,rgba(255,255,255,.4) 58%,rgba(255,255,255,0) 70%),repeating-radial-gradient(circle,#a8740a 0 .55cqw,#f5c95c .55cqw 1.1cqw)}
.bvr>.l4{background:repeating-radial-gradient(circle,rgba(0,0,0,.22) 0 .55cqw,rgba(0,0,0,0) .55cqw 1.1cqw),conic-gradient(#ff3d6e,#ffb23d,#f4ff5a,#3dffa8,#3dc5ff,#9b3dff,#ff3d6e)}
.bvr>.l5{background:repeating-radial-gradient(circle,rgba(0,0,0,.06) 0 .55cqw,rgba(0,0,0,0) .55cqw 1.1cqw),radial-gradient(circle,#fff,#eef2f7 55%,#c9d3df)}
.op.lv-1 .l1,.op.lv-2 .l2,.op.lv-3 .l3,.op.lv-4 .l4,.op.lv-5 .l5{opacity:1}
.bvl{position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle,#000 0 6%,transparent 7%),var(--lc,#3a3c45);transition:background .35s;display:grid;place-items:center;box-shadow:0 0 0 .5cqw rgba(0,0,0,.35)}
.bvl b{font:800 3.2cqw var(--disp);letter-spacing:.2em;color:rgba(0,0,0,.55);transform:translateY(-130%)}
.bvs{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 20deg,transparent 0 6%,rgba(255,255,255,.14) 10%,transparent 14% 50%,rgba(255,255,255,.09) 56%,transparent 61%)}
.op.scr .bvx{animation:scratch .7s ease-in-out}
.op.fb .bv{animation:faceb .95s cubic-bezier(.5,0,.3,1)}
.parm{position:absolute;right:1%;top:1%;width:9%;height:64%;transform-origin:50% 6%;transform:rotate(-40deg);opacity:0;transition:transform .55s .2s cubic-bezier(.3,1.3,.5,1),opacity .3s}
.parm::before{content:"";position:absolute;left:22%;top:0;width:56%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fafbfc,#9aa3ad);box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.5)}
.parm::after{content:"";position:absolute;left:44%;top:8%;width:12%;height:92%;border-radius:1cqw;background:linear-gradient(90deg,#c9ced6,#f4f6f8,#aab1ba);transform:rotate(15deg);transform-origin:top}
.op.play .parm{transform:rotate(0);opacity:1}
.op.play.fake .parm{transform:rotate(-40deg)}
.slv{position:absolute;inset:3%;border-radius:2.4cqw;overflow:hidden;z-index:3;background:linear-gradient(150deg,rgba(255,255,255,.24),rgba(255,255,255,.07));-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.22),0 3cqw 8cqw rgba(0,0,0,.5);-webkit-mask:radial-gradient(circle closest-side,transparent 0 21%,#000 22%);mask:radial-gradient(circle closest-side,transparent 0 21%,#000 22%);transition:transform .55s cubic-bezier(.5,0,.3,1),opacity .45s}
body.lite .slv{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(150deg,#3a3c46,#22232a)}
.slv b{position:absolute;left:8cqw;top:7cqw;font:800 15cqw/.86 var(--disp);letter-spacing:-.03em}
.slv span{position:absolute;left:8cqw;bottom:7cqw;font:500 3.6cqw var(--mono);letter-spacing:.22em;text-transform:uppercase;opacity:.75}
.op.secret .slv{background:linear-gradient(150deg,rgba(255,226,150,.6),rgba(200,150,50,.3))}
.op.play .slv{transform:translate(-112%,12%) rotate(-14deg);opacity:0}
.stamp{position:absolute;left:0;right:0;top:-3%;display:flex;justify-content:center;z-index:6;pointer-events:none}
.stamp span{font:800 clamp(1.4rem,9cqw,2.6rem)/1 var(--disp);letter-spacing:-.01em;color:var(--rc);text-shadow:0 0 26px color-mix(in srgb,var(--rc) 55%,transparent);white-space:nowrap}
.stamp span.a{animation:slam .38s cubic-bezier(.3,1.6,.5,1) both}
.rvc{position:absolute;inset:0;display:grid;place-items:center;z-index:6;pointer-events:none}
.rvw{position:relative;width:64%}
.rvw.pop{animation:cpop .5s cubic-bezier(.2,1.3,.4,1) both}
.rvw.fly{animation:cfly .24s ease-in forwards}
.tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:3;font:600 12px var(--mono);padding:4px 10px;border-radius:999px;background:#f1f2f6;color:#0e0f12;white-space:nowrap}
.tag.dup{background:rgba(255,255,255,.18);color:#fff}
.fxl{position:absolute;inset:0;z-index:7;pointer-events:none}
.fxl>.tfx{position:absolute;inset:0}
.pt{position:absolute;left:50%;top:50%;width:2.4cqw;height:2.4cqw;margin:-1.2cqw;border-radius:50%;background:var(--c);transform:rotate(var(--a));animation:fly 1.05s cubic-bezier(.1,.8,.3,1) forwards}
.sk{position:absolute;inset:18%;border-radius:50%;border:.8cqw solid var(--c);opacity:0;animation:shock .85s ease-out forwards}
.fl{position:absolute;inset:0;background:var(--c);opacity:0;animation:flash .55s ease-out forwards}
.cn{position:absolute;top:-30px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3c4,#e9b23c 50%,#9a6a10);animation:fall 1.5s ease-in forwards}
.eq{flex:none;display:flex;gap:5px;align-items:flex-end;height:30px;width:min(64vw,260px);opacity:0;transition:opacity .4s}
.op.play .eq{opacity:1}
.eq i{flex:1;height:100%;border-radius:3px;background:var(--rc);transform-origin:bottom;transform:scaleY(.15);animation:eq .55s ease-in-out infinite alternate;animation-play-state:paused}
.op.play .eq i{animation-play-state:running}
.op.play.fake .eq i{animation-play-state:paused}
.tray{flex:none;display:flex;gap:8px}
.tray i{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .3s}
.tray i.cur{box-shadow:inset 0 0 0 1.5px #fff}
.tray i.on{transform:translateY(-3px);box-shadow:none}
.hint{flex:none;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#979dab;min-height:1.4em;text-align:center}
.sumv{justify-content:center;gap:16px}
.sumg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(92vw,420px)}
.sumg .it{position:relative;animation:deal .4s cubic-bezier(.2,1.2,.4,1) both}
.sumg .tag{top:-9px;font-size:10.5px;padding:2px 8px}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.gain{display:inline-flex;align-items:center;gap:6px;font:600 13px var(--mono);color:#979dab}
.ul .uw{width:min(70vw,42vh,320px)}
.ul .uw>*{animation:unl .9s cubic-bezier(.2,1.2,.3,1) both}
.ul.raysOn .grays{opacity:1;transform:scale(1)}
.story{width:min(72vw,40vh,300px);aspect-ratio:9/16;border-radius:26px;overflow:hidden;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 16px;background:radial-gradient(70% 45% at 50% 48%,color-mix(in srgb,var(--rc) 45%,transparent),transparent),linear-gradient(#17181e,#07080b);text-align:center;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.story .sc{width:76%}
.story p{font:600 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.story h3{color:#fff}
.adbar{width:100%;height:6px;border-radius:6px;background:var(--soft);overflow:hidden}
.adbar i{display:block;height:100%;width:0;background:var(--fg);transition:width 1s linear}
.steps{display:flex;flex-direction:column;gap:6px;width:100%}
.steps div{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:16px;background:var(--soft);opacity:.35;transition:opacity .3s;font-size:14px}
.steps div.on{opacity:1}
.steps i{width:20px;height:20px;border-radius:50%;background:#1ed760;color:#0b0b0b;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;flex:none}
.sptop{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%}
.sptop div{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;text-align:center;min-width:0}
.sptop span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card2{width:100%;border-radius:26px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}

@keyframes rot{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}}
@keyframes vin{from{opacity:0;transform:translateY(6px)}}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@keyframes popin{from{transform:translate(-50%,-46%) scale(.94);opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes toast{0%{opacity:0;transform:translate(-50%,8px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@keyframes eq{to{transform:scaleY(1)}}
@keyframes speed{0%{opacity:0;transform:scale(.6) rotate(0)}30%{opacity:1}100%{opacity:0;transform:scale(1.15) rotate(25deg)}}
@keyframes beam{0%{opacity:0;transform:scaleY(0)}35%{opacity:1;transform:scaleY(1)}80%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
@keyframes slam{0%{transform:scale(2.2);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes cpop{0%{transform:translateY(8%) scale(.2) rotate(-14deg);opacity:0}60%{transform:scale(1.06) rotate(2deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes cfly{to{transform:translateY(60%) scale(.2);opacity:0}}
@keyframes fly{to{transform:rotate(var(--a)) translateY(calc(var(--d)*-1)) scale(.3);opacity:0}}
@keyframes shock{0%{transform:scale(.6);opacity:.95}100%{transform:scale(1.9);opacity:0}}
@keyframes flash{0%{opacity:0}15%{opacity:.75}100%{opacity:0}}
@keyframes fall{to{transform:translateY(115vh) rotate(540deg)}}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-7px,3px)}40%,60%{transform:translate(7px,-3px)}}
@keyframes scratch{0%{transform:rotate(0)}18%{transform:rotate(-60deg)}36%{transform:rotate(35deg)}54%{transform:rotate(-45deg)}72%{transform:rotate(25deg)}100%{transform:rotate(0)}}
@keyframes faceb{0%{transform:rotateY(0)}30%{transform:rotateY(90deg) scale(.92)}100%{transform:rotateY(360deg)}}
@keyframes deal{from{transform:translateY(24px) scale(.85);opacity:0}}
@keyframes unl{0%{transform:scale(.3) rotate(-10deg);opacity:0}60%{transform:scale(1.05) rotate(1deg);opacity:1}100%{transform:none}}
@media (min-width:640px){.sumg{grid-template-columns:repeat(5,1fr);width:min(92vw,640px)}}
body.lite .grays i,body.lite .wm i,body.lite .ldot{animation:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* ===== v7 : collection, catalogue, marché, boutique ===== */
body[data-skin="minuit"]{--bg:#05040a;--b1:rgba(140,80,255,.42);--b2:rgba(255,60,140,.3);--b3:rgba(60,120,255,.26);--fg:#f1f2f6;--fg2:#979dab;--gl:rgba(255,255,255,.12);--gl2:rgba(255,255,255,.03);--gb:rgba(255,255,255,.16);--gs:rgba(0,0,0,.5);--hl:rgba(255,255,255,.28);--soft:rgba(255,255,255,.07);--solid:rgba(20,18,30,.95);--on:#f1f2f6;--onfg:#05040a;color-scheme:dark}
body[data-skin="nacre"]{--bg:#f6f4f1;--b1:rgba(255,200,230,.6);--b2:rgba(190,235,255,.6);--b3:rgba(255,240,200,.6);--fg:#15131a;--fg2:#6a6573;--gl:rgba(255,255,255,.62);--gl2:rgba(255,255,255,.32);--gb:rgba(255,255,255,.9);--gs:rgba(60,40,80,.14);--hl:#fff;--soft:rgba(20,16,30,.06);--solid:rgba(255,255,255,.92);--on:#15131a;--onfg:#fff;color-scheme:light}
.tabs button{font-size:10px}
.tabs svg{width:22px;height:22px}
.jet{cursor:pointer}
.vh.wrap{flex-wrap:wrap}
.seg.sm button{padding:0 10px;font-size:13px;height:34px}
.cnt2{flex:none;font:600 12px var(--mono);color:var(--fg2);margin-top:-4px}
.empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--fg2);font-weight:600;padding:20px}
.bubw{position:relative}
.acell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;width:100%;height:100%;padding-top:2px;text-align:center}
.acell .ar{width:78%;aspect-ratio:1;border-radius:50%;padding:3px;background:conic-gradient(var(--fg) calc(var(--p)*1%),var(--soft) 0)}
.acell .av{width:100%;height:100%;font-size:clamp(12px,4.2vw,20px)}
.acell b{font-size:12.5px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acell small{font:600 10.5px var(--mono);color:var(--fg2);margin-top:-3px}
.alb.none .alc{opacity:.5}
.alth{width:44px;height:44px;border-radius:9px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
button.ring{cursor:pointer}
.page .search{flex:none;width:100%}
.goldp{flex:none;height:36px;padding:0 18px;border-radius:999px;font-weight:700;font-size:14px;color:#2b1d02;background:linear-gradient(135deg,#f6d77d,#c9952a 55%,#ffe9a8);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -6px rgba(201,149,42,.7)}
.qk.hot{background:linear-gradient(135deg,rgba(246,215,125,.55),rgba(201,149,42,.35))}
/* marché */
.lr{display:flex;align-items:center;gap:12px;height:100%;padding:8px 10px 8px 8px;border-radius:20px;background:var(--soft)}
.lth{width:58px;height:58px;border-radius:12px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.li{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.li b{font:700 14.5px/1.15 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li span i{width:7px;height:7px;border-radius:50%;flex:none}
.li small{font:500 11px var(--mono);color:var(--fg2);opacity:.8}
.lp{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.lp b{display:inline-flex;align-items:center;gap:5px;font:600 13.5px var(--mono)}
.lp .ltm{font:600 11.5px var(--mono);color:var(--fg2)}
.lbtn{flex:none;height:38px;min-width:76px;padding:0 12px;border-radius:999px;background:var(--on);color:var(--onfg);font:600 13px var(--mono);display:inline-flex;align-items:center;justify-content:center;gap:5px}
.lbtn.on{background:#30a46c;color:#fff}
.ls{flex:none;font:600 11.5px var(--mono);color:var(--fg2);min-width:64px;text-align:right}
.sellh{display:flex;gap:14px;align-items:center}
.sellh .sth{width:84px;flex:none}
.sellh b{display:block;font:700 1.05rem var(--disp)}
.sellh small{display:block;color:var(--fg2);font-size:13px}
/* boutique */
.v-shop{gap:14px}
.passc{flex:none;border-radius:28px;padding:18px;display:flex;flex-direction:column;gap:14px}
.ph2{display:flex;gap:12px;align-items:center}
.pico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#2b1d02;background:linear-gradient(135deg,#f6d77d,#c9952a 55%,#ffe9a8);flex:none}
.pico svg{width:24px;height:24px}
.ph2 b{display:block;font:800 1.35rem/1.1 var(--disp)}
.ph2 small{font:600 13px var(--mono);color:var(--fg2)}
.perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px}
.perks li{display:flex;gap:10px;align-items:flex-start}
.perks svg{width:18px;height:18px;flex:none;color:#30a46c;margin-top:1px}
.pbtn.wide{width:100%}
.shopg{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:10px;max-height:420px}
.pk{position:relative;border-radius:24px;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;min-height:0;overflow:hidden}
.pk em{position:absolute;top:9px;right:9px;font:600 10.5px var(--mono);font-style:normal;padding:2px 7px;border-radius:999px;background:#30a46c;color:#fff}
.pk .stack{display:flex;margin-bottom:4px}
.pk .stack .coin{width:22px;height:22px;margin-left:-8px}
.pk .stack .coin:first-child{margin-left:0}
.pk b{font:800 1.3rem/1.1 var(--disp)}
.pk small{font-size:12px;color:var(--fg2);line-height:1.25}
.pk .price{margin-top:6px;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 14px;border-radius:999px;background:var(--on);color:var(--onfg);font:600 13px var(--mono)}
.mini{width:40px;height:40px;border-radius:7px;margin-bottom:4px;background:linear-gradient(150deg,rgba(255,255,255,.5),rgba(255,255,255,.12)),radial-gradient(circle,#111 0 22%,#2a2b31 23%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.mini.gold{background:linear-gradient(150deg,#ffe9a8,#c9952a 60%,#f6d77d)}
.price2{font:700 1.4rem var(--mono)}
.skin .pv u{position:absolute;top:8px;right:8px;text-decoration:none;font:600 10px var(--mono);padding:2px 6px;border-radius:999px;background:linear-gradient(135deg,#f6d77d,#c9952a);color:#2b1d02}

.page .pg{align-content:start}
.catb{margin-left:auto;height:44px;padding:0 14px;gap:6px;font-size:14px}
.catb svg{width:18px;height:18px}
.v-col .seg.sm{flex:none}
/* ===== v8 ===== */
.dust{display:inline-block;width:13px;height:13px;border-radius:50%;flex:none;vertical-align:-2px;margin-right:3px;background:radial-gradient(circle at 35% 30%,#fff,#b9c6ff 40%,#6a5cff 75%);box-shadow:0 0 6px rgba(140,130,255,.6)}
.cnt2 .dust{width:10px;height:10px}
/* titres : carte forme d'onde */
.wc{position:relative;width:100%;aspect-ratio:1;border-radius:9%;overflow:hidden;container-type:inline-size;background:var(--bg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.wf{position:absolute;left:8%;top:21%;width:84%;height:36%}
.wf path{stroke:var(--wc);stroke-width:2.6;stroke-linecap:round;fill:none}
.wc .tx{background:none;padding:0 8cqw 7.5cqw}
.wc.dv .tx{color:#3a2a08}
.wc.dv .tx span{opacity:.75}
.wc.lk{opacity:.42;filter:saturate(0)}
.sn{position:absolute;right:6cqw;top:5.5cqw;font:600 8cqw var(--mono);font-style:normal;padding:.8cqw 3.5cqw;border-radius:9cqw;background:linear-gradient(135deg,#f6d77d,#c9952a);color:#2b1d02}
.wc .up{position:absolute;left:17cqw;top:3.5cqw;font:800 10cqw/1 var(--disp);font-style:normal;color:#4ade80}
.upi{font-style:normal;color:#30a46c}
.upt{color:#30a46c}
/* albums : pochette mate + vinyle à moitié sorti */
.alb .alc{left:0;top:17%;width:66%;border-radius:2.4cqw;isolation:isolate}
.alb .alc::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 22% 12%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 2px,rgba(0,0,0,.035) 2px 4px);mix-blend-mode:soft-light}
.alb .alc::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.32),rgba(255,255,255,0));transform:skewX(-14deg);opacity:0}
.shine .alc::after,.ul .alc::after,.it:hover .alc::after{opacity:1;animation:shine 2.6s ease-in-out infinite}
.alb .alc span{z-index:2;font-size:7cqw;left:5cqw;top:5cqw;right:5cqw}
.alb .alc i{z-index:2;left:5cqw;bottom:4cqw;font-size:4.4cqw}
.alb .alv{left:34%;top:19%;width:62%;transform:translateX(-30%)}
.alb.ok .alv{transform:none}
.alb:not(.ok) .alv{filter:brightness(.7)}
.alb .badge{right:auto;left:3%;bottom:19%}
@keyframes shine{0%{transform:translateX(0) skewX(-14deg)}60%,100%{transform:translateX(380%) skewX(-14deg)}}
/* ouvrir */
.orow{flex:none;display:flex;gap:10px;width:min(100%,420px);align-items:stretch}
.dropc{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:22px;text-align:left}
.dropc[disabled]{opacity:.55}
.dcv{width:46px;height:46px;border-radius:9px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),3px 0 0 -1px #111,6px 0 0 -2px #222}
.dct{flex:1;min-width:0;display:flex;flex-direction:column}
.dct b{font:700 14px var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dct small{font:500 11.5px var(--mono);color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcp{flex:none;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:999px;background:var(--on);color:var(--onfg);font:600 13px var(--mono)}
.orow .goldp{height:auto;padding:0 14px}
/* ouverture : coup de vinyle + zoom */
.op.kick .bvx{animation:kick .6s cubic-bezier(.15,.85,.3,1)}
.op.scr.kick .bvx,.op.scr .bvx{animation:scratch .7s ease-in-out}
.op.kz .pl{animation:zoomp .38s cubic-bezier(.3,1.4,.5,1)}
.op.out.kz .pl{animation:none}
@keyframes kick{to{transform:rotate(320deg)}}
@keyframes zoomp{40%{transform:scale(1.08)}}
.rvw .wc{box-shadow:0 2cqw 8cqw rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.15)}
/* animation : le son rejoint son album */
.acw{position:absolute;left:6%;right:6%;bottom:-5%;z-index:7;pointer-events:none}
.acp{position:relative;display:flex;align-items:center;gap:3cqw;padding:2.4cqw 3.4cqw;border-radius:4cqw;background:rgba(18,18,24,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);animation:acin .3s ease-out both}
.acp.away{opacity:0;transform:translateY(4cqw);transition:opacity .2s,transform .2s}
.acv{width:11cqw;height:11cqw;border-radius:1.6cqw;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.acp.hit .acv{animation:accov .42s cubic-bezier(.3,1.6,.5,1)}
.acm{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.4cqw}
.acm b{font:700 3.8cqw var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.acb{display:block;height:1.6cqw;border-radius:2cqw;background:rgba(255,255,255,.14);overflow:hidden}
.acb i{display:block;height:100%;background:linear-gradient(90deg,#8fc8ff,#fff);border-radius:inherit;transition:width .45s cubic-bezier(.3,1,.4,1)}
.acp.full .acb i{background:linear-gradient(90deg,#ffd36b,#fff3c4)}
.acp.full.hit{box-shadow:inset 0 0 0 1px rgba(255,211,107,.8),0 0 30px rgba(255,211,107,.35)}
.acp em{font:600 3.6cqw var(--mono);font-style:normal;color:#fff}
.gh{position:absolute;left:38cqw;top:-44cqw;width:12cqw;height:12cqw;border-radius:2cqw;box-shadow:0 0 0 .4cqw rgba(255,255,255,.45);animation:ghost .55s cubic-bezier(.5,0,.4,1) .05s both}
@keyframes ghost{0%{transform:translate(0,0) scale(1.8);opacity:0}25%{opacity:1}100%{transform:translate(-35cqw,46cqw) scale(.8);opacity:0}}
@keyframes acin{from{opacity:0;transform:translateY(5cqw)}}
@keyframes accov{40%{transform:scale(1.25)}}
.tray i.on{background:var(--bg,#333)}
.sumg.s3{grid-template-columns:repeat(3,1fr)}
/* profil */
.v-prof .vh .pn{display:flex;flex-direction:column;min-width:0}
.v-prof .vh .pn b{font:700 1.15rem/1.1 var(--disp)}
.v-prof .vh .pn span{font:600 12px var(--mono);color:var(--fg2)}
.av.me{background:linear-gradient(140deg,#8b7bff,#3a2db0);font-size:12px}
.seg button{position:relative}
.sdot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:#ff5f86}
.kpis2{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kpis2 div{padding:10px 8px;border-radius:18px;background:var(--soft);text-align:center}
.kpis2 b{display:block;font:800 1.2rem var(--disp)}
.kpis2 span{font-size:11.5px;color:var(--fg2)}
.wall{flex:none;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;min-height:86px;align-items:center}
.wall::-webkit-scrollbar{display:none}
.wall>button{flex:none;width:86px}
.wall p{font-size:13px}
.fslot{width:100%;height:100%;border-radius:9%;display:grid;place-items:center;text-align:center;padding:8px;font-size:12px;color:var(--fg2);box-shadow:inset 0 0 0 1.5px var(--soft);background:repeating-linear-gradient(45deg,transparent 0 6px,var(--soft) 6px 7px)}
.mlist2{display:flex;flex-direction:column;gap:10px}
.mrow{display:flex;align-items:center;gap:12px;padding:14px;border-radius:22px}
.mi2{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.mi2 b{font-weight:600}
.mi2 small{font:600 11.5px var(--mono);color:var(--fg2);display:inline-flex;align-items:center;gap:4px}
.shead{flex:none;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:22px}
.shead>div:first-child b{display:block;font:800 1.05rem var(--disp)}
.shead small{font:600 11px var(--mono);color:var(--fg2)}
.sxp{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pill2{font:600 11px var(--mono);padding:5px 10px;border-radius:999px;background:linear-gradient(135deg,#f6d77d,#c9952a);color:#2b1d02}
.srow2{display:flex;align-items:center;gap:8px;height:100%;padding:6px 8px;border-radius:18px;background:var(--soft);opacity:.55}
.srow2.un{opacity:1}
.tn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--mono);background:var(--gl);flex:none}
.rwb{flex:1;min-width:0;height:40px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:5px;font:600 12.5px var(--body);background:var(--gl);box-shadow:inset 0 0 0 1px var(--gb);white-space:nowrap;overflow:hidden}
.rwb.pr{background:linear-gradient(135deg,rgba(246,215,125,.35),rgba(201,149,42,.2))}
.rwb svg{width:15px;height:15px;flex:none}
.rwb:not([disabled]){box-shadow:inset 0 0 0 1.5px var(--fg)}
.rwb[disabled]{cursor:default}
.brow{display:flex;align-items:center;gap:10px;height:100%;padding:0 12px;border-radius:16px;background:var(--soft)}
.brow.me{background:var(--on);color:var(--onfg)}
.brow .rk{width:24px;font:700 13px var(--mono);text-align:center}
.brow .av{width:34px;height:34px;font-size:11px}
.brow b{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow em{font:600 13px var(--mono);font-style:normal}
/* échanges & recyclage */
.lth{padding:0;overflow:hidden;background:none}
.lth .wc{border-radius:12px}
.lth .tx,.lth .rd,.lth .up,.lth .sn{display:none}
.lr>.av{width:46px;height:46px}
.lbtn svg{width:18px;height:18px}
.trow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
.trow::-webkit-scrollbar{display:none}
.tpick{position:relative;flex:none;width:88px;border-radius:12px}
.tpick[aria-pressed="true"]{box-shadow:0 0 0 3px var(--fg);border-radius:10px}
.tpick .nw{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font:600 10px var(--mono);font-style:normal;padding:1px 7px;border-radius:999px;background:#30a46c;color:#fff}
.dustbig{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:20px;background:var(--soft)}
.dustbig .dust{width:26px;height:26px}
.dustbig b{font:800 1.5rem var(--disp)}
.dustbig span{color:var(--fg2);font-size:13px}
.pop .row{flex-wrap:wrap}
.pop a.gbtn{text-decoration:none;color:inherit}
/* ===== v9 ===== */
/* vinyle qui s'emballe avant chaque son */
.op.rush .bvr{animation-duration:.13s!important;animation-play-state:running!important}
.op.rush .pl{transform:scale(1.06);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.op.rush .bv{box-shadow:0 0 0 2.2cqw #17181d,0 0 0 2.5cqw rgba(255,255,255,.08),0 0 16cqw color-mix(in srgb,var(--rc) 70%,transparent)}
.op.rush .speed{animation:speed .7s ease-out}
/* vinyle qui casse */
svg.crk{position:absolute;left:6%;top:6%;width:88%;height:88%;z-index:2;pointer-events:none;overflow:visible}
.crk path{fill:none;stroke:#fff;stroke-width:.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation:crk .45s ease-out forwards;filter:drop-shadow(0 0 1.2px var(--rc))}
@keyframes crk{to{stroke-dashoffset:0}}
.op.crack .bvr{animation-play-state:paused!important}
.op.crack .stage{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
.op.brk .bv,.op.brk svg.crk{opacity:0}
.op.brk .pl{opacity:1;transform:none}
.shards{position:absolute;inset:6%;z-index:2;pointer-events:none}
.shd{position:absolute;inset:0;animation:shd .8s cubic-bezier(.2,.7,.4,1) forwards}
.shd .bvr{animation:none!important}
@keyframes shd{to{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.75);opacity:0}}
/* le son : carré pochette + onde */
.rvw{width:66%}
.rsq{position:relative;width:100%;aspect-ratio:1;container-type:inline-size}
.sqa{position:absolute;inset:0;border-radius:9%;background:var(--art);box-shadow:0 2cqw 10cqw rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14),0 0 18cqw color-mix(in srgb,var(--rc) 30%,transparent)}
.sqa::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.2) 40%,rgba(0,0,0,.8))}
.sqw{position:absolute;left:10%;right:10%;top:18%;height:36%;display:flex;align-items:center;gap:1.4%;z-index:1}
.sqw i{flex:1;height:calc(var(--h)*100%);border-radius:9cqw;background:var(--wc);box-shadow:0 0 3cqw color-mix(in srgb,var(--wc) 55%,transparent);animation:wb var(--u) ease-in-out var(--d) infinite alternate}
@keyframes wb{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.sqt{position:absolute;left:8%;right:8%;bottom:7%;z-index:1;display:flex;flex-direction:column;gap:1.2cqw;color:#fff}
.sqt b{font:800 8.4cqw/1.04 var(--disp);letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sqt>span:last-child{font-size:5cqw;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sqr{display:inline-flex;align-items:center;gap:1.8cqw;font:600 3.6cqw var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rc)}
.sqr i{width:2.4cqw;height:2.4cqw;transform:rotate(45deg);background:var(--rc);border-radius:.4cqw}
.rsq .sn{z-index:2}
.rsq.em .sqa{animation:sqo .6s cubic-bezier(.3,1,.4,1) .12s both}
@keyframes sqo{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(72% at 50% 50%)}}
.rsq.em .sqw{animation:wout .55s cubic-bezier(.2,1.25,.4,1) both}
@keyframes wout{0%{transform:translateY(30%) scale(.05,.1);opacity:0}25%{opacity:1}100%{transform:none}}
.rsq.em .sqt,.rsq.em .sn{animation:tin .4s ease-out .45s both}
@keyframes tin{from{transform:translateY(4cqw);opacity:0}}
.rvw.fly{animation:cfly .24s ease-in forwards}
/* progression d'album : version compacte */
.acw{left:50%;right:auto;width:58%;transform:translateX(-50%);bottom:-2%}
.acp{gap:2.2cqw;padding:1.5cqw 2.6cqw 1.5cqw 1.5cqw;border-radius:3.4cqw}
.acv{position:relative;width:8cqw;height:8cqw;border-radius:1.4cqw}
.acm{gap:1cqw}
.acm b{font-size:3cqw}
.acb{height:1.1cqw}
.acp em{font-size:2.9cqw}
.gh{left:0;top:0;width:100%;height:100%;border-radius:inherit;background:var(--rc);box-shadow:0 0 4cqw var(--rc);opacity:0;animation:none}
.gh.go{animation:ghost2 .5s cubic-bezier(.5,0,.3,1) both}
@keyframes ghost2{0%{transform:translate(var(--gx),var(--gy)) scale(2.6);opacity:0}20%{opacity:.85}85%{opacity:.7}100%{transform:none;opacity:0}}
/* pochettes des maxis rares */
.op.k-nacre .slv{background:linear-gradient(150deg,rgba(255,255,255,.75),rgba(205,215,245,.35) 60%,rgba(246,220,239,.4))}
.op.k-diamant .slv{background:linear-gradient(150deg,rgba(158,240,255,.6),rgba(91,123,255,.35) 55%,rgba(199,139,255,.4))}
.mini.nacre{background:linear-gradient(150deg,#fff,#dfe6f5 40%,#f6dcef 70%,#cfe9f4)}
.mini.diam{background:linear-gradient(150deg,#9ef0ff,#5b7bff 50%,#c78bff)}
/* shop : accueil */
.v-hub .hgrid{flex:1;min-height:0;display:grid;grid-template-rows:1.35fr 1fr .7fr;gap:12px;padding-bottom:12px}
.hrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}
.hb{position:relative;overflow:hidden;min-height:0;border-radius:28px;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;color:var(--fg);background:var(--soft)}
.hb:active{transform:scale(.98)}
.hbt{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.hbt b{font:800 1.45rem/1.05 var(--disp);letter-spacing:-.02em}
.hbt small{display:inline-flex;align-items:center;gap:6px;font-size:13px;opacity:.75}
.hbk{font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.hb-ws{background:linear-gradient(165deg,#0f1f18,#07090a 70%);color:#eafff3;box-shadow:inset 0 0 0 1px rgba(80,255,170,.14)}
.hb-ws .hbt b{font-size:2.1rem}
.bch{position:absolute;left:0;bottom:0;width:100%;height:60%}
.bch polygon{fill:rgba(48,220,140,.1)}
.bch polyline{fill:none;stroke:#35e08f;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.hb-ws .tick{position:absolute;left:0;right:0;top:14px}
.wix{position:absolute;left:auto;width:max-content;right:14px;top:42px;font:700 12px var(--mono);padding:4px 9px;border-radius:999px;background:rgba(255,95,134,.16);color:#ff7a96}
.wix.gn{background:rgba(53,224,143,.16);color:#35e08f}
.wix.sm{position:static;margin-left:auto}
.v-shop .wix.sm.gn{color:#1f9a5c}
.hb-tr,.hb-ps{justify-content:space-between}
.avs{display:flex}
.avs i{width:40px;height:40px;border-radius:50%;margin-left:-10px;background:var(--avg);display:grid;place-items:center;font:700 12px var(--disp);font-style:normal;color:#fff;box-shadow:0 0 0 3px var(--bg)}
.avs i:first-child{margin-left:0}
.hbi{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--soft)}
.hbi svg{width:20px;height:20px}
.hb-tr .hbi{position:absolute;right:14px;top:14px}
.hb-ps{background:linear-gradient(150deg,#f8e19a,#d2a03a 55%,#a8761c);color:#2b1d02}
.hb-ps .hbi{background:rgba(255,255,255,.35)}
.hb-jt{flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;padding:12px 18px}
.fan{position:relative;width:100px;height:58px;flex:none}
.fan .mini{position:absolute;bottom:0;width:44px;height:44px;margin:0;transform-origin:50% 130%;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.fan .mini:nth-child(1){left:0;transform:rotate(-16deg)}
.fan .mini:nth-child(2){left:18px;transform:rotate(-5deg)}
.fan .mini:nth-child(3){left:36px;transform:rotate(6deg)}
.fan .mini:nth-child(4){left:54px;transform:rotate(17deg)}
/* ticker */
.tick{flex:none;overflow:hidden;white-space:nowrap;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tk{display:inline-flex;gap:22px;padding-right:22px;animation:tick 28s linear infinite}
.ti{display:inline-flex;gap:7px;font:600 12px var(--mono)}
.ti b{font-weight:600;opacity:.85;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.chg{font:600 12px var(--mono);color:var(--fg2)}
.chg.gn{color:#30c07a}
@keyframes tick{to{transform:translateX(-50%)}}
body.lite .tk{animation:none}
.v-shop>.tick{margin:0 -4px}
/* sous-pages */
.shd2 h2{font:800 1.45rem var(--disp);letter-spacing:-.02em}
.lr.wx{position:relative;overflow:hidden}
.lr.wx>*:not(.spk){position:relative;z-index:1}
.spk{position:absolute;left:0;bottom:0;width:100%;height:55%;pointer-events:none;opacity:.45}
.spk polyline{fill:none;stroke:rgba(150,155,170,.5);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.lr.wx.gn .spk polyline{stroke:#30c07a}
.li small span{display:inline;font:inherit}
.li .chg{color:var(--fg2)}
.li .chg.gn{color:#30c07a}
.lp small{font-size:11px;color:var(--fg2);max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk .mini{width:52px;height:52px}
.pk-diam{box-shadow:inset 0 0 0 1.5px rgba(120,150,255,.65),0 0 26px rgba(110,120,255,.25)}
.pk-nacre{box-shadow:inset 0 0 0 1.5px rgba(225,215,255,.7)}
.pk-diam em{background:linear-gradient(90deg,#5b7bff,#c78bff)}
.pk-nacre em{background:#9a8cff}
.pk-gold em{background:#c9952a}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}[hidden]{display:none!important}body{margin:0}
#inst{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));background:radial-gradient(120% 80% at 50% 20%,#23263a,#0b0c10 70%);color:#f1f2f6;text-align:center}
#inst .ivn{width:min(56vw,240px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffc23d 0 15%,#111 15.5% 17%,transparent 17.5%),repeating-radial-gradient(circle,#111216 0 3px,#1d1e25 3px 6px);box-shadow:0 0 0 10px #17181d,0 20px 60px rgba(0,0,0,.6),0 0 80px rgba(255,194,61,.18);animation:rot 2.4s linear infinite}
#inst h1{font:800 clamp(2.2rem,10vw,3.2rem)/1 var(--disp);letter-spacing:-.03em}
#inst p{max-width:30ch;color:#a9afbd;font-size:15px;line-height:1.45}
#inst .ib{height:56px;padding:0 30px;border-radius:999px;background:#f1f2f6;color:#0e0f12;font:700 17px var(--disp)}
#inst .il{color:#a9afbd;font-size:14px;text-decoration:underline;background:none}
#inst ol{text-align:left;display:flex;flex-direction:column;gap:10px;font-size:15px;color:#d8dbe3;padding-left:22px}
#inst ol b{color:#fff}
.clf{display:flex;flex-direction:column;gap:10px}.clf input{height:48px;border-radius:14px;padding:0 14px;border:0;background:var(--soft);color:var(--fg);font:500 16px var(--body,inherit);width:100%;min-width:0}.clf .row{display:flex;gap:8px}.clf .row .pbtn,.clf .row .gbtn{flex:1}.alc.im>span,.alc.im>i{display:none}
/* ===== v10 ===== */.brow.r1 .rk{color:#e9a23b}.brow.r2 .rk{color:#9aa3ad}.brow.r3 .rk{color:#c27a43}
/* animations d'annonce */
.op.pulse .bv{animation:hb .55s ease-in-out 2}
@keyframes hb{0%,100%{transform:scale(1)}15%{transform:scale(1.07)}30%{transform:scale(.98)}45%{transform:scale(1.05)}}
.op.pulse .blk{opacity:.88}
.op.pulse .bvr{animation-duration:3s!important}
.op.pulse .stage::after{content:"";position:absolute;inset:6%;border-radius:50%;pointer-events:none;animation:hbr .55s ease-out 2}
@keyframes hbr{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--rc) 75%,transparent)}to{box-shadow:0 0 0 16cqw transparent}}
.op.bo .blk{opacity:1;transition:opacity .2s}
.op.bo .bvr{animation-play-state:paused!important}
.op.bo .pl{filter:brightness(.18);transition:filter .25s}
.op.bo .eq,.op.bo .tray,.op.bo .lvl{opacity:0;transition:opacity .2s}
.op.bo .stage::before{content:"";position:absolute;left:18%;right:18%;top:-70%;bottom:45%;z-index:5;pointer-events:none;background:linear-gradient(rgba(255,255,255,0),rgba(255,248,220,.42));clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);opacity:0;animation:spot 1.3s ease-in .5s forwards}
@keyframes spot{0%{opacity:0}30%{opacity:.4}45%{opacity:0}60%{opacity:.9}100%{opacity:1}}
body.lite .op.pulse .bv,body.lite .op.pulse .stage::after{animation:none}

/* 5 onglets, Ouvrir au centre */
.tabs{overflow:visible;align-items:flex-end}
.tabs button{min-width:0}
.tabs button[aria-current="page"] svg{animation:tabpop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes tabpop{40%{transform:translateY(-3px) scale(1.12)}}
.tabs .tcen,.tabs .tcen[aria-current="page"]{background:none;box-shadow:none;padding-top:0;overflow:visible}
.tcv{display:block;width:60px;height:60px;margin-top:-30px;border-radius:50%;position:relative;
  background:radial-gradient(circle,#ffc23d 0 15%,#0d0d10 16% 18%,transparent 19%),repeating-radial-gradient(circle,#141519 0 2px,#22232b 2px 4px);
  box-shadow:0 0 0 4px var(--bg),0 10px 26px rgba(0,0,0,.45),0 0 24px rgba(255,194,61,.28);animation:rot 7s linear infinite}
.tcv::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 8%,rgba(255,255,255,.22) 12%,transparent 18% 55%,rgba(255,255,255,.14) 60%,transparent 66%)}
.tcen[aria-current="page"] .tcv{animation-duration:1.4s;box-shadow:0 0 0 4px var(--bg),0 10px 26px rgba(0,0,0,.45),0 0 34px rgba(255,194,61,.55)}
.tcl{font-weight:800;color:var(--fg);margin-top:3px}
.tcen .dot{top:-26px;right:calc(50% - 32px);box-shadow:0 0 0 2px var(--bg)}
body.lite .tcv{animation:none}
#main .view{animation:vin2 .3s cubic-bezier(.2,.8,.2,1)}
@keyframes vin2{from{opacity:0;transform:translateX(var(--dx,0px)) translateY(4px) scale(.99)}}
#coins.up{color:#30c07a}#coins.dn{color:#ff7a96}
#coins{transition:color .3s}

/* Saison */
.v-sea{gap:12px}
.shero{flex:none;display:flex;align-items:center;gap:14px;padding:14px;border-radius:26px;background:linear-gradient(135deg,rgba(255,194,61,.16),rgba(194,125,255,.12) 60%,rgba(90,169,255,.1));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.slv2{flex:none;width:72px;height:72px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(#ffc23d calc(var(--p)*1%),rgba(255,255,255,.1) 0);position:relative}
.slv2::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--bg)}
.slv2 b,.slv2 small{position:relative}
.slv2 b{font:800 1.6rem/1 var(--disp)}
.slv2 small{font:600 10px var(--mono);color:var(--fg2);text-transform:uppercase;letter-spacing:.1em}
.sinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.skk{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#e9a23b}
.sinfo b{font:700 1.02rem/1.2 var(--disp)}
.sinfo small{font:600 11px var(--mono);color:var(--fg2)}
.trkw{flex:1;min-height:0;display:flex;gap:8px}
.trkl{flex:none;width:22px;display:flex;flex-direction:column;justify-content:space-around;align-items:center}
.trkl span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg2)}
.trkl .pr{color:#e9a23b}
.strk{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px 2px;align-items:stretch;align-content:center;-webkit-overflow-scrolling:touch}
.strk::-webkit-scrollbar{display:none}
.tcol{flex:none;width:84px;display:flex;flex-direction:column;justify-content:center;gap:8px;align-items:stretch;scroll-snap-align:center;opacity:.6}
.tcol.un,.tcol.nx{opacity:1}
.tcell{flex:1;min-height:0;max-height:150px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative;background:var(--soft);box-shadow:inset 0 0 0 1px var(--gb);font:700 13px var(--mono);color:var(--fg)}
.tcell .mini{width:34px;height:34px;margin:0}
.tcell .coin{width:26px;height:26px}
.tcell .dust{width:24px;height:24px;margin:0}
.tcell.pr{background:linear-gradient(160deg,rgba(246,215,125,.28),rgba(201,149,42,.12));box-shadow:inset 0 0 0 1px rgba(233,162,59,.35)}
.tcell u{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);color:#fff}
.tcell u svg{width:12px;height:12px}
.tcell.ready{background:linear-gradient(160deg,#ffd36b,#e9a23b);color:#2b1d02;box-shadow:0 0 22px rgba(255,194,61,.45);animation:rdy 1.6s ease-in-out infinite}
@keyframes rdy{50%{transform:translateY(-3px)}}
.tcell[disabled]{cursor:default}
.tnum{flex:none;align-self:center;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--mono);background:var(--soft);box-shadow:inset 0 0 0 1px var(--gb)}
.tcol.un .tnum{background:#ffc23d;color:#2b1d02;box-shadow:none}
.tcol.nx .tnum{box-shadow:0 0 0 2px #ffc23d}
.tcol.tbig .tcell{box-shadow:inset 0 0 0 1.5px #c27dff}
body.lite .tcell.ready{animation:none}
.passbn{flex:none;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:22px;text-align:left;background:linear-gradient(135deg,#f8e19a,#d2a03a 60%,#a8761c);color:#2b1d02}
.passbn .pico{background:rgba(255,255,255,.35)}
.passbn span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.passbn b{font:800 1rem var(--disp)}
.passbn small{font-size:12px;opacity:.8}
.passbn em{font:700 11px var(--mono);font-style:normal;padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.18)}
/* missions */
.mhead{flex:none;display:flex;align-items:center;gap:10px;justify-content:space-between}
.mhead b{display:block;font:800 1.1rem var(--disp)}
.mhead small{font:600 11px var(--mono);color:var(--fg2)}
.mbonus span{display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--mono);color:var(--fg2)}
.mbonus svg{width:14px;height:14px}
.mlist3{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;justify-content:flex-start}
.mcard{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 12px;border-radius:24px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--gb);animation:mcin .35s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i)*60ms)}
@keyframes mcin{from{opacity:0;transform:translateY(10px)}}
.mring{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#5aa9ff calc(var(--p)*1%),rgba(127,127,127,.18) 0);position:relative}
.mring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--bg)}
.mring svg{position:relative;width:24px;height:24px}
.mcard.ok .mring{background:conic-gradient(#30c07a 100%,transparent 0)}
.mcard.ok .mring svg{color:#30c07a}
.mtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mtx b{font-weight:700;font-size:15px;line-height:1.2}
.mtx small{font:600 11px var(--mono);color:var(--fg2)}
.mrw{display:flex;gap:6px;flex-wrap:wrap}
.mrw em{display:inline-flex;align-items:center;gap:4px;font:600 11px var(--mono);font-style:normal;padding:3px 8px;border-radius:999px;background:rgba(127,127,127,.14)}
.mrw .coin{width:13px;height:13px}
.mbtn{flex:none;min-width:76px;height:40px;padding:0 12px;border-radius:999px;font:700 13px var(--mono);background:rgba(127,127,127,.14);color:var(--fg2)}
.mbtn svg{width:18px;height:18px}
.mcard.ok:not(.cl) .mbtn{background:linear-gradient(135deg,#3ddc84,#1f9a5c);color:#fff;box-shadow:0 6px 18px rgba(48,192,122,.35);animation:rdy 1.6s ease-in-out infinite}
.mcard.cl{opacity:.6}
.mcard.cl .mbtn{background:none;color:#30c07a}
/* profil */
.avb{position:relative;flex:none;padding:0;border-radius:50%}
.av.tbig{width:56px;height:56px;font-size:16px}
.ped{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--on);color:var(--onfg);box-shadow:0 0 0 2px var(--bg)}
.ped svg{width:12px;height:12px}
.vtabs{flex:none;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.vtabs::-webkit-scrollbar{display:none}
.vtabs .chip{flex:none}
.vtabs .chip svg{width:15px;height:15px}
.vtabs .add{font-size:18px;min-width:40px}
.fslot{width:100%;height:100%;border-radius:12%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--fg2);font-size:12px;font-weight:600;background:transparent;box-shadow:inset 0 0 0 1.5px var(--gb);border:1.5px dashed rgba(127,127,127,.35)}
.fslot svg{width:22px;height:22px}
.pickg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow-y:auto;max-height:55vh;padding:2px}
.tin{height:48px;border-radius:14px;padding:0 14px;border:0;background:var(--soft);color:var(--fg);font:500 16px inherit;width:100%}
.brow .av{background:var(--avg)}
/* shop */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.offer{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 6px 10px;border-radius:20px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--gb)}
.offer.best{box-shadow:inset 0 0 0 2px #ffc23d,0 0 20px rgba(255,194,61,.25)}
.offer em{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font:600 10px var(--mono);font-style:normal;padding:2px 8px;border-radius:999px;background:#ffc23d;color:#2b1d02;white-space:nowrap}
.offer b{font:800 1.1rem var(--disp)}
.offer .price{font:600 12px var(--mono);color:var(--fg2)}
.offer .stack{display:flex}
.offer .stack .coin{width:18px;height:18px;margin-left:-7px}
.offer .stack .coin:first-child{margin-left:0}
/* échanges */
.trs{flex:none;display:flex;gap:8px}
.trs input{flex:1;min-width:0}
.trs .pbtn{height:48px;padding:0 18px}
.trr{display:flex;align-items:center;gap:10px;height:100%;padding:8px 10px;border-radius:20px;background:var(--soft)}
.trr .ttl{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.trr .ttl b{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trr .ttl small{font-size:12px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trr .lth{width:46px;height:46px}
.trr .arr{flex:none;color:var(--fg2)}
.trr .arr svg{width:16px;height:16px}
.trr .acts{flex:none;display:flex;gap:6px}
.trr .acts .lbtn{min-width:0;padding:0 12px}
.trr .st{font:600 11px var(--mono);color:var(--fg2)}
.prow{display:flex;align-items:center;gap:10px;height:100%;padding:8px 12px;border-radius:20px;background:var(--soft);text-align:left;width:100%}
.prow b{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow em{font:600 12px var(--mono);font-style:normal;color:var(--fg2)}
.phd{display:flex;align-items:center;gap:12px}
.phd b{display:block;font:800 1.15rem var(--disp)}
.phd small{font:600 12px var(--mono);color:var(--fg2)}
.avup{display:flex;align-items:center;gap:14px}
.avup .av.tbig{width:72px;height:72px;font-size:20px}
.trr .acts{flex-direction:column}
.trr .acts .lbtn{height:32px;font-size:12px}
.lbtn.ghost{background:var(--soft);color:var(--fg);box-shadow:inset 0 0 0 1px var(--gb)}
.wix.z{background:rgba(150,155,170,.16);color:#a9afbd}

.wc.im{background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.82)),var(--im) center/cover no-repeat,var(--bg)}
.wc.im .tx,.wc.dv.im .tx{color:#fff}
.wc.im .wf{opacity:.35}

/* Bourse : salle de marché */
.v-bx{isolation:isolate;--fg:#eef2f7;--fg2:#93a0b2;--soft:rgba(255,255,255,.065);--on:#eef2f7;--onfg:#0b0f14;color:var(--fg)}
.v-bx>*:not(.bxbg){position:relative;z-index:1;flex-shrink:0}
.v-bx>.bx{flex-shrink:1}
.bxbg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(90% 50% at 15% 0%,rgba(48,192,122,.16),transparent 60%),radial-gradient(70% 50% at 100% 30%,rgba(229,72,77,.12),transparent 60%),linear-gradient(180deg,#0c121a,#05080c)}
.bxbg::before{content:'';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:32px 32px;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 95%);mask-image:linear-gradient(180deg,#000 30%,transparent 95%)}
.bxbg::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px)}
.bxbg .g1,.bxbg .g2{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(60px);opacity:.35;animation:bxdrift 18s ease-in-out infinite alternate}
.bxbg .g1{background:#1f8f5c;left:-25vmax;top:10%}
.bxbg .g2{background:#8f2330;right:-25vmax;top:45%;animation-delay:-9s}
.bxcand{position:absolute;left:0;bottom:8%;width:100%;height:38%;opacity:.13}
.bxcand .u{fill:#30c07a;stroke:#30c07a}.bxcand .d{fill:#e5484d;stroke:#e5484d}.bxcand line{stroke-width:1.2}
@keyframes bxdrift{to{transform:translate(8vmax,-6vmax) scale(1.15)}}
.v-bx .vh h2{color:#fff}
.v-bx .chip{background:rgba(255,255,255,.07);color:var(--fg)}
.v-bx .chip[aria-pressed=true]{background:#eef2f7;color:#0b0f14}
.v-bx .gbtn{background:rgba(255,255,255,.09);color:var(--fg)}
.v-bx .cap{color:var(--fg2)}
.bx{display:flex;flex-direction:column;gap:8px;padding-bottom:110px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;margin:0 -4px;padding-inline:4px}
.bxlist{display:flex;flex-direction:column;gap:8px}
.bxr{height:76px;cursor:pointer;background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.035));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);animation:bxin .45s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(min(var(--i),12) * 35ms);transition:transform .15s,background .2s}
.bxr:active{transform:scale(.985)}
.bxr .lth{display:block}
.bxr .li b{color:#fff}
.bxr .lp b{color:#fff}
@keyframes bxin{from{opacity:0;transform:translateY(10px)}}
.bxc{font:600 12px var(--mono);color:var(--fg2)}
.bxc.bxup{color:#30c07a}.bxc.bxdn{color:#e5484d}
.bxsp{width:48px;height:26px;flex:none;color:var(--fg2)}
.bxsp.bxup{color:#30c07a}.bxsp.bxdn{color:#e5484d}
.bxsp polyline{fill:none;stroke:currentColor;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:all .9s}
@media (max-width:370px){.bxsp{display:none}}
.bxbuy{background:#30c07a;color:#04140c}
.bxl{flex:none;min-width:70px;text-align:center;font:500 10.5px/1.25 var(--mono);color:var(--fg2)}
.bxs input{width:100%;height:46px;border-radius:14px;border:0;padding:0 14px;background:rgba(255,255,255,.08);color:#fff;font:500 16px inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.bxs input::placeholder{color:#7d8899}
.bxtk{overflow:hidden;height:34px;border-radius:12px;background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bxtr{display:flex;width:max-content;animation:bxmq calc(var(--n,10) * 3.4s) linear infinite}
.bxti{display:inline-flex;gap:8px;align-items:center;padding:0 16px;height:34px;font:600 12px var(--mono);white-space:nowrap;color:var(--fg2);border-right:1px solid rgba(255,255,255,.07)}
.bxti b{color:#fff;font-weight:600}.bxti em{font-style:normal}.bxti i{font-style:normal}
@keyframes bxmq{to{transform:translateX(-50%)}}
.bxsum{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;border-radius:22px;background:linear-gradient(135deg,rgba(48,192,122,.14),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.bxsum>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.bxsum b{display:inline-flex;align-items:center;gap:6px;font:700 22px var(--disp);color:#fff}
.bxsum small{font:500 12px var(--mono);color:var(--fg2)}
/* fiche plein écran */
.bxfull{position:fixed;inset:0;z-index:300;overflow-y:auto;color:#eef2f7;--fg:#eef2f7;--fg2:#93a0b2;--soft:rgba(255,255,255,.07);opacity:0;transform:translateY(30px);transition:opacity .28s,transform .38s cubic-bezier(.2,.9,.3,1);overscroll-behavior:contain}
.bxfull.on{opacity:1;transform:none}
.bxfull .bxbg{position:fixed}
.bxfh{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:linear-gradient(180deg,rgba(8,12,18,.92),rgba(8,12,18,0))}
.bxfh .gbtn{background:rgba(255,255,255,.1);color:#fff}
.bxfh .lbl{flex:1;color:var(--fg2)}
.bxfc{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:0 16px calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.bxid{display:flex;gap:14px;align-items:center;animation:bxin .4s both}
.bxid .sth{width:84px;flex:none}
.bxid b{display:block;font:800 22px/1.1 var(--disp);color:#fff}
.bxid small{display:block;color:var(--fg2);font-size:13.5px;margin-top:3px}
#bxd{display:flex;flex-direction:column;gap:14px}
.bxp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bxp b{display:inline-flex;align-items:center;gap:6px;font:800 38px/1 var(--disp);color:#fff;font-variant-numeric:tabular-nums}
.bxrg .chip{background:rgba(255,255,255,.07);color:#eef2f7}.bxrg .chip[aria-pressed=true]{background:#eef2f7;color:#0b0f14}
.bxch{position:relative;height:250px;touch-action:none;cursor:crosshair;border-radius:18px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);overflow:hidden}
.bxcv{width:100%;height:100%;display:block}
.bxcv.bxup{color:#30c07a}.bxcv.bxdn{color:#e5484d}
.bxcv polyline{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.bxcv .gr line{stroke:rgba(255,255,255,.07)}
.bxcv .tip{fill:currentColor}
.bxcv .pulse{fill:currentColor;opacity:.3;transform-box:fill-box;transform-origin:center;animation:bxpl 1.6s ease-out infinite}
.bxcv .cur{stroke:rgba(255,255,255,.55);stroke-dasharray:3 4}
.bxcv .cdot{fill:#fff;stroke:currentColor;stroke-width:3}
@keyframes bxpl{from{transform:scale(.4);opacity:.5}to{transform:scale(2.2);opacity:0}}
.bxtt{position:absolute;top:10px;display:flex;flex-direction:column;gap:2px;padding:7px 11px;border-radius:12px;background:rgba(8,12,18,.94);box-shadow:0 6px 20px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none;white-space:nowrap}
.bxtt b{display:inline-flex;align-items:center;gap:5px;font:700 15px var(--mono);color:#fff}
.bxtt span{font:500 11.5px var(--mono);color:var(--fg2)}
.bxhint{margin-top:-6px}
.bxstat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bxstat div{padding:10px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);display:flex;flex-direction:column;gap:4px;min-width:0}
.bxstat span{font:500 10.5px var(--mono);color:var(--fg2);text-transform:uppercase;letter-spacing:.06em}
.bxstat b{font:700 16px var(--mono);color:#fff}
@media (max-width:420px){.bxstat{grid-template-columns:repeat(2,1fr)}}
.bxact{display:flex;gap:8px;position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.bxact>*{flex:1;height:54px}
.bxact .pbtn{background:#30c07a;color:#04140c}
.bxact .gbtn{background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(10px)}
.bxok{animation:bxpop .45s}
@keyframes bxpop{40%{transform:scale(1.07)}}
#bxtkw{min-width:0;max-width:100%;overflow:hidden;border-radius:12px}
.v-bx{min-width:0;max-width:100%}
.v-bx .bxcap{overflow-wrap:anywhere}
body:has(.v-bx) .hd{position:relative;z-index:5;color:#fff}
body:has(.v-bx) .hd .wm i{filter:invert(1)}
.bxr .lth{width:50px;height:50px}
.bxr .lbtn{min-width:62px;padding:0 10px}
.bxsp{width:40px}

/* ===== v13 : micro-interactions ===== */
button,.chip,.lr,.acell,.arow,.pk,.hb,.mcard,.tcell{transition:transform .18s cubic-bezier(.3,1.5,.5,1),background-color .2s,box-shadow .2s,opacity .2s}
button:not([disabled]):active,.chip:active,.pk:active,.hb:active,.arow:active{transform:scale(.96)}
.pbtn:not([disabled]){position:relative;overflow:hidden}
.pbtn:not([disabled])::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);animation:shine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.chip[aria-pressed=true]{animation:chipin .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes chipin{from{transform:scale(.92)}}
.pg>*{animation:cellin .38s cubic-bezier(.2,.9,.3,1) both}
.pg>*:nth-child(2){animation-delay:.03s}.pg>*:nth-child(3){animation-delay:.06s}.pg>*:nth-child(4){animation-delay:.09s}.pg>*:nth-child(5){animation-delay:.12s}.pg>*:nth-child(6){animation-delay:.15s}.pg>*:nth-child(n+7){animation-delay:.18s}
@keyframes cellin{from{opacity:0;transform:translateY(8px) scale(.98)}}
.toast{animation:toastin .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes toastin{from{opacity:0;transform:translate(-50%,12px) scale(.94)}}
body.lite .pbtn::after,body.lite .pg>*{animation:none}
@media (prefers-reduced-motion:reduce){.pbtn::after,.pg>*,.bxr,.bxtr,.bxbg .g1,.bxbg .g2,.odeco i,.ofx i{animation:none!important}}

/* écran d'ouverture : décor */
.ofx{position:absolute;inset:0;pointer-events:none;z-index:0}
.ofx i{position:absolute;font-style:normal;color:var(--fg2);opacity:0;animation:note 7s ease-in-out infinite}
.ofx .n1{left:8%;top:30%;font-size:22px}.ofx .n2{right:9%;top:22%;font-size:18px;animation-delay:-2.3s}.ofx .n3{right:14%;top:52%;font-size:15px;animation-delay:-4.6s}
.ofx .s1,.ofx .s2,.ofx .s3{width:6px;height:6px;border-radius:50%;background:#ffc23d;box-shadow:0 0 12px #ffc23d;animation:spark 4s ease-in-out infinite}
.ofx .s1{left:16%;top:56%}.ofx .s2{left:72%;top:16%;animation-delay:-1.3s;background:#ff5f86;box-shadow:0 0 12px #ff5f86}.ofx .s3{left:10%;top:20%;animation-delay:-2.6s;background:#7b8cff;box-shadow:0 0 12px #7b8cff}
@keyframes note{0%{opacity:0;transform:translateY(14px) rotate(-8deg)}25%{opacity:.45}70%{opacity:.25}100%{opacity:0;transform:translateY(-40px) rotate(10deg)}}
@keyframes spark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.7;transform:scale(1)}}
.ofx~*{z-index:1}
.odeco{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:26px;margin:-4px auto 0;width:min(100%,320px);opacity:.35;-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
.odeco i{flex:1;max-width:6px;height:calc(var(--h)*100%);border-radius:3px;background:var(--fg);transform-origin:bottom;animation:eq 1.6s ease-in-out infinite;animation-delay:calc(var(--d)*-1.6s)}
@keyframes eq{50%{transform:scaleY(.35)}}
.dropc .dct small{display:inline-flex;align-items:center;gap:6px}

/* collection en liste */
.arow{display:flex;align-items:center;gap:12px;width:100%;height:100%;padding:8px 14px 8px 8px;border-radius:18px;background:var(--soft);text-align:left;animation:cellin .38s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i) * 25ms)}
.arow .av{width:48px;height:48px;flex:none;border-radius:50%;background:var(--avg);display:grid;place-items:center;font:700 14px var(--disp);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.arow .art{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.arow b{font:700 15px/1.15 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow small{font:500 11.5px var(--mono);color:var(--fg2)}
.abar{display:block;height:4px;border-radius:2px;background:rgba(127,127,127,.2);overflow:hidden}
.abar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#ffc23d,#ff5f86);transform-origin:left;animation:barin .8s cubic-bezier(.2,.9,.3,1) both}
@keyframes barin{from{transform:scaleX(0)}}
.arow em{font:700 13px var(--mono);font-style:normal;min-width:42px;text-align:right}

/* profil */
.phero{display:flex;align-items:center;gap:14px;padding:14px;border-radius:26px;background:linear-gradient(135deg,rgba(255,194,61,.18),rgba(255,95,134,.12) 50%,rgba(109,92,255,.12));box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.phero .pn{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.phero .pn b{font:800 22px/1.1 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phero .pn span{font:500 12px var(--mono);color:var(--fg2)}
.plv{display:block;height:6px;border-radius:3px;background:rgba(127,127,127,.2);overflow:hidden;margin-top:4px}
.plv i{display:block;height:100%;width:var(--p);border-radius:3px;background:linear-gradient(90deg,#ffc23d,#ff5f86);animation:barin 1s cubic-bezier(.2,.9,.3,1) both}
.gbtn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(127,127,127,.3)}
.pq{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px}
.pqa{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;border-radius:20px;text-align:left;min-width:0}
.pqa b{font:700 15px var(--disp)}.pqa small{font:500 11px var(--mono);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pqi{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;margin-bottom:6px}
.pqi svg{width:18px;height:18px}
.pq-fr{background:linear-gradient(140deg,#6d5cff,#ff5f86);color:#fff;box-shadow:0 8px 20px rgba(109,92,255,.3)}
.pq-fr .pqi{background:rgba(255,255,255,.2)}
.pq-inv{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(127,127,127,.35);border:1.5px dashed transparent}
.pq-inv .pqi{background:var(--soft)}
.pq-top{background:var(--fg);color:var(--bg)}
.pq-top .pqi{background:rgba(127,127,127,.25)}
.kpis3{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kpis3 div{padding:10px 8px;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--soft)}
.kpis3 b{font:800 20px var(--disp)}.kpis3 span{font:500 11px var(--mono);color:var(--fg2)}
.kpis3 .k1{background:linear-gradient(160deg,rgba(255,194,61,.3),rgba(255,194,61,.08))}
.kpis3 .k3{box-shadow:inset 0 0 0 1.5px rgba(127,127,127,.25);background:transparent}
.kpis3 .k4{background:linear-gradient(160deg,#f6eedb,#e3d1a8);color:#3a2a08}.kpis3 .k4 span{color:#6b5320}

/* amis */
.addf{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;text-align:left;background:linear-gradient(135deg,#6d5cff,#ff5f86);color:#fff;box-shadow:0 10px 24px rgba(109,92,255,.28)}
.addf b{display:block;font:700 16px var(--disp)}.addf small{font:500 12px var(--mono);opacity:.85}
.addfi{width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:none}
.prow.fr{display:flex;align-items:center;gap:10px;height:100%;padding:8px 10px;border-radius:18px;background:var(--soft)}
.prow.fr b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow.fr em{font:500 11px var(--mono);color:var(--fg2);font-style:normal}
.prow.fr .acts{display:flex;align-items:center;gap:6px}
.prow.fr .lbtn{min-width:0;height:34px;padding:0 12px}
.frempty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 10px;text-align:center}
.fre{position:relative;width:110px;height:64px;margin-bottom:6px}
.fre i{position:absolute;top:8px;width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 3px var(--bg);animation:frb 3s ease-in-out infinite}
.fre i:nth-child(1){left:0;background:linear-gradient(140deg,#ffc23d,#ff8a3d)}
.fre i:nth-child(2){left:31px;top:0;z-index:1;background:linear-gradient(140deg,#6d5cff,#ff5f86);animation-delay:-1s}
.fre i:nth-child(3){left:62px;background:linear-gradient(140deg,#20c997,#1c4fa3);animation-delay:-2s}
@keyframes frb{50%{transform:translateY(-5px)}}
.orl{display:flex;align-items:center;gap:10px;color:var(--fg2);font:500 12px var(--mono)}
.orl::before,.orl::after{content:'';flex:1;height:1px;background:rgba(127,127,127,.3)}
.gbtn.wide{width:100%;height:50px;gap:8px}
.gl2{background:none;border:0;color:var(--fg2);text-decoration:underline;font-size:13px;padding:6px;align-self:center}

/* pass : tout récupérer */
.sgrab{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:22px;background:var(--soft)}
.sgrab.on{background:linear-gradient(135deg,rgba(255,194,61,.32),rgba(255,95,134,.2));box-shadow:0 8px 24px rgba(255,160,61,.2),inset 0 0 0 1px rgba(255,194,61,.5)}
.sgi{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.5);flex:none}
.sgrab.on .sgi{background:linear-gradient(140deg,#ffc23d,#ff8a3d);animation:wob 2.2s ease-in-out infinite}
.sgn{font:800 18px var(--disp);color:#2a1a00}
.sgt{flex:1;min-width:0}.sgt b{display:block;font:700 15px var(--disp)}.sgt small{font:500 11.5px var(--mono);color:var(--fg2)}
.sgrab .pbtn{height:42px;padding:0 14px;font-size:14px;flex:none}
@keyframes wob{0%,100%{transform:rotate(0)}10%{transform:rotate(-10deg)}20%{transform:rotate(8deg)}30%{transform:rotate(0)}}
.tcell.ready{animation:readyglow 1.8s ease-in-out infinite}
@keyframes readyglow{50%{box-shadow:0 0 0 2px #ffc23d,0 0 22px rgba(255,194,61,.55)}}
.tcol.nx .tnum{background:#ffc23d;color:#2a1a00;box-shadow:0 0 0 4px rgba(255,194,61,.25)}
.tcol.tbig .tcell{background:linear-gradient(160deg,rgba(255,194,61,.35),rgba(255,95,134,.15))}

/* packs de jetons */
.cpk{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px 10px 12px}
.cpk::before{content:'';position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,194,61,.18),transparent 30%);animation:rot 9s linear infinite;pointer-events:none}
.cpk>*{position:relative}
.cpk b{font:800 26px var(--disp)}
.cpb{font:500 11px var(--mono);color:var(--fg2)}
.cstack{position:relative;display:block;width:70px;height:46px}
.cstack i{position:absolute;left:calc(50% - 17px + (var(--k) - 1) * 9px);bottom:calc(var(--k) * 5px);width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#ffc23d 45%,#c98a12);box-shadow:0 2px 0 #a8730d,0 4px 8px rgba(0,0,0,.2);animation:coinb 2.4s ease-in-out infinite;animation-delay:calc(var(--k) * -.3s)}
.cstack s{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 8px #ffc23d;animation:spark 2.6s ease-in-out infinite}
.cstack s:nth-of-type(1){left:2px;top:6px}.cstack s:nth-of-type(2){right:0;top:0;animation-delay:-.9s}.cstack s:nth-of-type(3){right:8px;bottom:4px;animation-delay:-1.8s}
@keyframes coinb{50%{transform:translateY(-3px)}}
.rib{position:absolute;top:10px;left:-30px;transform:rotate(-35deg);width:110px;text-align:center;padding:3px 0;font:700 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:#ff5f86;color:#fff;z-index:2}
.rib.best{background:#30a46c}
.cpk3{background:linear-gradient(160deg,rgba(255,194,61,.22),rgba(255,255,255,.4))}

.v-shop .pg,.v-col .pg{align-content:start!important}

/* ===== v15 ===== */
/* bouton central : disque en couleur qui tourne, même taille que les icônes */
.tabs .tcen,.tabs .tcen[aria-current="page"]{padding-top:inherit}
.tcv{display:block;width:24px;height:24px;margin:0 auto;border-radius:50%;position:relative;flex:none;
  background:radial-gradient(circle,#fff 0 9%,#1a1a20 10% 14%,transparent 15%),radial-gradient(circle,transparent 0 30%,rgba(0,0,0,.25) 31% 33%,transparent 34% 52%,rgba(0,0,0,.22) 53% 55%,transparent 56% 74%,rgba(0,0,0,.2) 75% 77%,transparent 78%),conic-gradient(#ff5f86,#ffc23d,#30c07a,#3db5ff,#6d5cff,#ff5f86);
  box-shadow:0 0 0 1.5px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.18);animation:rot 3.2s linear infinite;margin-top:0}
.tcv::after{content:"";display:block;position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 10%,rgba(255,255,255,.55) 14%,transparent 20% 58%,rgba(255,255,255,.35) 62%,transparent 68%)}
.tcen[aria-current="page"] .tcv{animation-duration:1.1s;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px #ffc23d,0 0 14px rgba(255,194,61,.6)}
.tcl{font-weight:800;margin-top:0}
.tcen .dot{top:2px;right:calc(50% - 18px)}
body.lite .tcv{animation:none}

/* page d'ouverture : fond animé */
.obg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ogrid{position:absolute;inset:-20%;background-image:linear-gradient(rgba(120,120,160,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(120,120,160,.16) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:radial-gradient(60% 50% at 50% 42%,#000,transparent 75%);mask-image:radial-gradient(60% 50% at 50% 42%,#000,transparent 75%);animation:gridpan 22s linear infinite}
@keyframes gridpan{to{transform:translate(36px,36px)}}
.orays{position:absolute;left:50%;top:40%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;background:repeating-conic-gradient(from 0deg,rgba(255,194,61,.09) 0 6deg,transparent 6deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 40%);mask-image:radial-gradient(circle,#000 0,transparent 40%);animation:rot 60s linear infinite}
.obg>i{position:absolute;border-radius:50%;filter:blur(50px);opacity:.5;animation:bxdrift 16s ease-in-out infinite alternate}
.og1{width:46vmax;height:46vmax;left:-18vmax;top:4%;background:#7b8cff}
.og2{width:40vmax;height:40vmax;right:-16vmax;top:38%;background:#ff7a9c;animation-delay:-6s!important}
.og3{width:34vmax;height:34vmax;left:20%;bottom:-16vmax;background:#ffc23d;opacity:.35!important;animation-delay:-11s!important}
.obg b{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;opacity:0;animation:spark 5s ease-in-out infinite;animation-delay:var(--d)}
.v-open>.obg~*{position:relative}
.v-open .mbox{z-index:1}
.v-open .obar,.v-open .odeco,.v-open #freecap,.v-open .evp,.v-open .goldp{z-index:2}
@media (prefers-reduced-motion:reduce){.ogrid,.orays,.obg>i,.obg b,.tcv{animation:none!important}}

/* Shop : illustrations */
.hart{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hb>.hart~*{position:relative;z-index:1}
.hb-ws .bch,.hb-ws .tick{display:none}
.hb-ws .wix{position:absolute;top:14px;right:14px;z-index:2}
.ha-b .hgr line{stroke:rgba(80,255,170,.07)}
.ha-b g.cu rect,.ha-b g.cu line{fill:#30c07a;stroke:#30c07a}.ha-b g.cd rect,.ha-b g.cd line{fill:#e5484d;stroke:#e5484d}
.ha-b g{opacity:.55;animation:candle 3.6s ease-in-out infinite;animation-delay:calc(var(--k)*-.25s);transform-box:fill-box;transform-origin:bottom}
@keyframes candle{50%{transform:scaleY(1.12)}}
.ha-b .hl{fill:none;stroke:#3dffa0;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(61,255,160,.7));stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.2s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ha-b .hdot{fill:#3dffa0;animation:bxpl 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
.hb-ws::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(5,10,8,.85));pointer-events:none}
.hb-ws .hbt{z-index:2}
.hb-tr{background:linear-gradient(150deg,#7b6cff,#d95cff 60%,#ff6f9c);color:#fff}
.hb-tr .hbt small{opacity:.9}
.ha-a .hav{animation:frb 3.2s ease-in-out infinite}.ha-a .hav.h2{animation-delay:-1.6s}
.ha-a .hsw{animation:swp 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes swp{0%,60%{transform:rotate(0)}80%,100%{transform:rotate(360deg)}}
.ha-a .hcd{animation:frb 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center;opacity:.8}.ha-a .hcd.h2{animation-delay:-1.8s}
.hbn{position:absolute;top:12px;right:12px;z-index:2;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#fff;color:#d43c74;font:800 12px/22px var(--mono);font-style:normal}
.ha-p .hrays path{fill:rgba(255,255,255,.18)}.ha-p .hrays{transform-origin:100px 56px;animation:rot 30s linear infinite}
.ha-p .htk{transform-origin:100px 62px;animation:tkf 4s ease-in-out infinite}
@keyframes tkf{50%{transform:rotate(-4deg) translateY(-3px)}}
.ha-p .hsp{animation:spark 2.4s ease-in-out infinite}.ha-p .hsp.s2{animation-delay:-1.2s}
.hb-ps .hbi{display:none}
.hb-jt{background:linear-gradient(120deg,#e9ecff,#f6e9ff 60%,#fff2df);padding-left:44%}
.ha-k{left:0;right:auto;width:46%;height:100%}
.hb-jt .fan{display:none}
.ha-k .hpk{animation:frb 3.4s ease-in-out infinite}
.ha-k ellipse{animation:coinb 2.2s ease-in-out infinite;animation-delay:calc(var(--k)*-.35s)}
.hb .hbt b{text-shadow:0 1px 12px rgba(0,0,0,.08)}
.hb-tr .hbt b,.hb-ws .hbt b{text-shadow:0 2px 14px rgba(0,0,0,.25)}

/* saison : explications */
.xpw{display:flex;flex-direction:column;gap:6px}
.xph{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:none;color:var(--fg2);font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:2px 0}
.xph svg{width:15px;height:15px}
.xpc{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.xpc span{display:inline-flex;align-items:center;gap:6px;flex:none;height:32px;padding:0 12px 0 6px;border-radius:999px;background:var(--soft);font-size:12.5px;white-space:nowrap}
.xpc i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#ffc23d,#ff8a3d);color:#2a1a00;font-style:normal}
.xpc i svg{width:12px;height:12px}
.xpc b{font:700 12px var(--mono)}
.howl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:h}
.howl li{display:flex;flex-direction:column;gap:3px;padding:12px 12px 12px 52px;border-radius:18px;background:var(--soft);position:relative;counter-increment:h}
.howl li::before{content:counter(h);position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#ffc23d,#ff5f86);color:#fff;font:800 14px var(--disp)}
.howl b{font:700 15px var(--disp)}.howl span{font-size:13.5px;color:var(--fg2);line-height:1.4}
.shero{position:relative;overflow:hidden}
.shero::after{content:'';position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,194,61,.18) 0 2px,transparent 2px 7px);pointer-events:none;animation:rot 40s linear infinite}

/* profil : petites touches */
.phero{position:relative;overflow:hidden}
.phero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.5),transparent 35%),repeating-linear-gradient(115deg,rgba(255,255,255,.08) 0 2px,transparent 2px 10px);pointer-events:none}
.phero::after{content:'';position:absolute;right:-40px;bottom:-60px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#ffc23d 0 10%,#111 11% 13%,transparent 14%),repeating-radial-gradient(circle,rgba(17,17,22,.85) 0 2px,rgba(40,40,50,.85) 2px 4px);opacity:.18;animation:rot 12s linear infinite;pointer-events:none}
.phero>*{position:relative;z-index:1}
.avb .av,.avb{transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.avb:hover{transform:rotate(-4deg) scale(1.04)}
.kpis3 div{position:relative;overflow:hidden;animation:cellin .45s cubic-bezier(.2,.9,.3,1) both}
.kpis3 div:nth-child(2){animation-delay:.05s}.kpis3 div:nth-child(3){animation-delay:.1s}.kpis3 div:nth-child(4){animation-delay:.15s}
.kpis3 .k4::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:shine 5s ease-in-out infinite}
.paysh .row{display:flex;gap:8px}.paysh .row>*{flex:1;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

.hb-tr{justify-content:flex-end}
.ha-a{height:78%;top:-4%}
.hb-ps{justify-content:flex-end}
.ha-p{height:80%;top:-6%}

/* ouverture : rotation et zoom selon la rareté */
.op.hype .pl{animation:hypez var(--hd) cubic-bezier(.2,.8,.2,1)}
.op.hype .bvx{animation:hypespin var(--hd) cubic-bezier(.15,.75,.25,1)}
@keyframes hypez{0%{transform:scale(1)}22%{transform:scale(var(--lz))}78%{transform:scale(var(--lz))}100%{transform:scale(1)}}
@keyframes hypespin{to{transform:rotate(var(--turns))}}
.op.ping .pl{animation:ping .22s ease-out}
.op.hype.ping .pl{animation:hypez var(--hd) cubic-bezier(.2,.8,.2,1)}
@keyframes ping{50%{transform:scale(.97)}}
.twin{position:absolute;left:50%;top:50%;width:56cqw;height:56cqw;margin:-28cqw 0 0 -28cqw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--c) 0 15%,#0d0d10 16% 18%,transparent 19%),repeating-radial-gradient(circle,#141519 0 2px,#262732 2px 4px);
  box-shadow:0 0 30px var(--c);opacity:0;animation:twin 1.5s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes twin{0%{opacity:0;transform:rotate(var(--a)) translateX(0) rotate(0)}25%{opacity:.85}60%{opacity:.75;transform:rotate(var(--a)) translateX(46cqw) rotate(540deg) scale(.7)}100%{opacity:0;transform:rotate(var(--a)) translateX(0) rotate(900deg) scale(.4)}}
body.lite .op.hype .pl,body.lite .op.hype .bvx{animation-duration:.5s}

#coins.up{color:inherit;animation:coinpop .5s cubic-bezier(.3,1.6,.5,1)}
#coins.dn{color:inherit}
@keyframes coinpop{40%{transform:scale(1.12)}}
.cfly{position:fixed;z-index:400;pointer-events:none;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:#111216;color:#fff;font:700 13px var(--mono);box-shadow:0 8px 20px rgba(0,0,0,.25);animation:cfly 1.4s cubic-bezier(.2,.8,.3,1) forwards}
.cfly.neg{background:rgba(17,18,22,.75)}
@keyframes cfly{0%{opacity:0;transform:translateY(-6px) scale(.8)}15%{opacity:1;transform:translateY(6px) scale(1)}75%{opacity:1;transform:translateY(10px)}100%{opacity:0;transform:translateY(18px)}}

/* Shop : tuile packs plus visible */
.hb-jt{background:linear-gradient(120deg,#1d1b3a,#3b2a7a 55%,#6d3fb0);color:#fff;padding-left:44%}
.hb-jt .hbt small{opacity:.8}
.hb-jt::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 60%,rgba(140,224,255,.35),transparent 45%),radial-gradient(circle at 90% 10%,rgba(255,194,61,.25),transparent 40%);pointer-events:none}

/* page Pass */
.psp{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-bottom:110px;scrollbar-width:none;margin:0 -4px;padding-inline:4px}
.psh{position:relative;overflow:hidden;border-radius:28px;min-height:190px;padding:18px;display:flex;align-items:flex-end;background:linear-gradient(150deg,#f8e19a,#d2a03a 55%,#8a5a10);color:#2b1d02;flex:none}
.psart{position:absolute;inset:0}.psart .hart{height:100%}
.psart .ha-p{height:90%;top:-10%;left:22%;width:90%}
.psht{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px}
.psk{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.psht>b{font:800 24px/1.1 var(--disp)}
.psprice{font:500 14px var(--mono)}.psprice b{font:800 22px var(--disp)}
.pson{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.55);font:600 13px var(--disp)}
.pson svg{width:16px;height:16px}
.pstot{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:none}
.pstot div{padding:12px 8px;border-radius:18px;background:var(--soft);display:flex;flex-direction:column;align-items:center;gap:4px;animation:cellin .45s cubic-bezier(.2,.9,.3,1) both}
.pstot div:nth-child(2){animation-delay:.06s}.pstot div:nth-child(3){animation-delay:.12s}
.pstot b{font:800 22px var(--disp)}
.pstot span{display:inline-flex;align-items:center;gap:5px;font:500 11.5px var(--mono);color:var(--fg2)}
.pstot .mini{width:14px;height:18px}
.pstcap{margin-top:-6px}
.psl{display:flex;flex-direction:column;gap:8px;flex:none}
.psi{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--soft);animation:cellin .45s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i) * 50ms)}
.psi b{display:block;font:700 15px var(--disp)}.psi small{font-size:12.5px;color:var(--fg2)}
.psic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none;color:#fff}
.psic svg{width:22px;height:22px}
.psic-clock{background:linear-gradient(140deg,#3db5ff,#6d5cff)}.psic-gift{background:linear-gradient(140deg,#ff5f86,#ff8a3d)}.psic-gold{background:linear-gradient(140deg,#ffd76b,#c98a12)}.psic-star{background:linear-gradient(140deg,#c27dff,#6d5cff)}.psic-theme{background:linear-gradient(140deg,#20263a,#5a6390)}
.pscmp{border-radius:18px;overflow:hidden;background:var(--soft);flex:none}
.pch,.pcr{display:grid;grid-template-columns:1.6fr .8fr .8fr;align-items:center;padding:10px 14px}
.pch{font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--fg2)}
.pch b,.pcr em{text-align:center;font-style:normal}
.pcr{border-top:1px solid rgba(127,127,127,.15);font-size:13.5px}
.pcr em{font:600 13px var(--mono);color:var(--fg2)}
.pp{color:#b07a10!important;font-weight:800!important}
.pch .pp,.pcr .pp{background:rgba(255,194,61,.14)}
.psbar{position:sticky;bottom:6px;display:flex;gap:8px;z-index:2}
.psbar>*{flex:1;height:56px}
.pscta{background:linear-gradient(120deg,#ffcf5a,#ff9a3d 60%,#ff5f86);color:#2a1300;font-size:16px;box-shadow:0 10px 28px rgba(255,140,60,.4)}

/* récompenses récupérées */
.rwp{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 18px 18px;border-radius:28px;background:linear-gradient(160deg,#1c1b2e,#2c2149);color:#fff;text-align:center;min-width:min(86vw,340px)}
.rwp h2{margin:0;font:800 21px var(--disp)}
.rwp .lbl{color:#ffcf6b}
.rwrays{position:absolute;left:50%;top:40%;width:600px;height:600px;margin:-300px 0 0 -300px;background:repeating-conic-gradient(rgba(255,194,61,.12) 0 8deg,transparent 8deg 22deg);animation:rot 18s linear infinite;pointer-events:none}
.rwp>*{position:relative}
.rwl{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.rwi{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:76px;padding:12px 10px;border-radius:18px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);animation:rwin .55s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.15s + var(--k) * .12s)}
.rwic{height:30px;display:grid;place-items:center}.rwic .coin{width:26px;height:26px}.rwic .mini{width:22px;height:28px}
.rwi b{font:800 20px var(--disp)}.rwi small{font:500 11px var(--mono);opacity:.7}
@keyframes rwin{from{opacity:0;transform:translateY(16px) scale(.6)}}
.rwp .pbtn{align-self:stretch;background:#ffcf5a;color:#2a1300}

/* amis : recherche */
.frbox{display:flex;flex-direction:column;gap:8px}
.frs{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:18px;background:var(--soft)}
.frsi{display:grid;place-items:center;color:var(--fg2)}.frsi svg{width:18px;height:18px}
.frs input{flex:1;min-width:0;height:40px;border:0;background:none;color:var(--fg);font:500 16px inherit;outline:none}
.frs .pbtn{height:40px;padding:0 14px;font-size:14px}
.frres{display:flex;flex-direction:column;gap:6px}
.frres .prow.fr{height:60px}
.frbox .addf{padding:10px 12px}
.frbox .addfi{width:34px;height:34px;border-radius:12px}
.frbox .addfi svg{width:18px;height:18px}
.frbox .msg:empty{display:none}
.psart .ha-p{left:42%;width:64%;height:78%;top:-4%}
.psh{min-height:200px}
.psht>b{max-width:75%}
.rwrays{background:repeating-conic-gradient(rgba(255,194,61,.07) 0 8deg,transparent 8deg 22deg);-webkit-mask-image:radial-gradient(circle,#000,transparent 60%);mask-image:radial-gradient(circle,#000,transparent 60%)}
.psbar{padding-top:10px;background:linear-gradient(180deg,transparent,var(--bg) 40%)}

/* ===== ouverture : montée en puissance selon la rareté ===== */
.op.blur .bvr{filter:blur(1.2px)}
.op.charge .pl{filter:drop-shadow(0 0 18px var(--cc)) drop-shadow(0 0 42px var(--cc))}
.op.charge .stage::before{content:'';position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,var(--cc),transparent 62%);opacity:0;animation:chg 1.8s ease-in forwards;pointer-events:none}
@keyframes chg{to{opacity:.55;transform:scale(1.25)}}
.op.charge .bvx{animation:hypespin var(--hd) cubic-bezier(.6,0,.9,.6)}
.op.charge .stage{animation:tremble .09s linear infinite}
@keyframes tremble{25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}}
.bm{position:absolute;left:50%;top:50%;width:20cqw;height:20cqw;margin:-10cqw;border-radius:50%;background:radial-gradient(circle,#fff,var(--c) 40%,transparent 70%);animation:bm .9s cubic-bezier(.1,.8,.3,1) forwards;pointer-events:none}
@keyframes bm{0%{transform:scale(.2);opacity:1}100%{transform:scale(9);opacity:0}}
.rg{position:absolute;left:50%;top:50%;width:30cqw;height:30cqw;margin:-15cqw;border-radius:50%;border:3px solid var(--c);box-shadow:0 0 22px var(--c),inset 0 0 22px var(--c);opacity:0;animation:rg 1.1s cubic-bezier(.15,.8,.3,1) forwards;pointer-events:none}
@keyframes rg{0%{transform:scale(.3);opacity:1}100%{transform:scale(5.5);opacity:0;border-width:1px}}
.ex{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s)/-2);border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);animation:ex 1.3s cubic-bezier(.1,.75,.25,1) forwards;pointer-events:none}
@keyframes ex{0%{transform:rotate(var(--a)) translateX(0) scale(1.4);opacity:1}100%{transform:rotate(var(--a)) translateX(var(--d)) scale(.2);opacity:0}}
.op.quake .opmid{animation:quake .6s cubic-bezier(.36,.07,.19,.97)}
.op.quake2 .opmid{animation:quake2 .9s cubic-bezier(.36,.07,.19,.97)}
@keyframes quake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,3px)}40%,60%{transform:translate(6px,-3px)}}
@keyframes quake2{10%,90%{transform:translate(-4px,2px) rotate(-.5deg)}20%,80%{transform:translate(8px,-4px) rotate(.8deg)}30%,50%,70%{transform:translate(-11px,5px) rotate(-1deg)}40%,60%{transform:translate(11px,-5px) rotate(1deg)}}
.op.chroma .stage{animation:chroma .7s steps(2) 1}
@keyframes chroma{0%,100%{filter:none}20%{filter:drop-shadow(6px 0 0 rgba(255,0,80,.7)) drop-shadow(-6px 0 0 rgba(0,200,255,.7))}50%{filter:drop-shadow(-8px 0 0 rgba(255,0,80,.7)) drop-shadow(8px 0 0 rgba(0,200,255,.7)) saturate(1.6)}80%{filter:drop-shadow(3px 0 0 rgba(255,0,80,.6)) drop-shadow(-3px 0 0 rgba(0,200,255,.6))}}
.op.void .opmid,.op.void .eq,.op.void .tray{opacity:0;transition:opacity .25s}
.op.void::after{content:'';position:absolute;inset:0;background:#000;z-index:5;pointer-events:none;animation:voidin .65s ease-in forwards}
@keyframes voidin{0%{opacity:0}40%{opacity:1}100%{opacity:1}}
/* divin */
.dvn{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.dvr{position:absolute;left:50%;top:44%;width:240vmax;height:240vmax;margin:-120vmax;background:repeating-conic-gradient(rgba(255,231,168,.32) 0 5deg,transparent 5deg 15deg);-webkit-mask-image:radial-gradient(circle,#000 5%,transparent 45%);mask-image:radial-gradient(circle,#000 5%,transparent 45%);animation:rot 9s linear infinite,dvin 4.2s ease-out forwards}
.dvr.r2{animation:rot 14s linear infinite reverse,dvin 4.2s ease-out forwards;background:repeating-conic-gradient(rgba(255,255,255,.2) 0 2deg,transparent 2deg 24deg)}
@keyframes dvin{0%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
.dvb{position:absolute;left:50%;top:-10%;width:46vw;height:130%;margin-left:-23vw;background:linear-gradient(90deg,transparent,rgba(255,244,210,.55),transparent);filter:blur(10px);animation:dvbeam 4.2s ease-out forwards}
@keyframes dvbeam{0%{opacity:0;transform:scaleX(.1)}12%{opacity:1;transform:scaleX(1)}70%{opacity:.6}100%{opacity:0}}
.dvp i{position:absolute;bottom:-10px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#fff3c4;box-shadow:0 0 10px #ffcf6b,0 0 20px #ffcf6b;animation:rise var(--t) ease-out infinite;animation-delay:var(--d);opacity:0}
@keyframes rise{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-105vh)}}
.dvt{position:absolute;left:0;right:0;top:12%;text-align:center;font:900 clamp(44px,16vw,96px)/1 var(--disp);letter-spacing:.12em;color:#fff7e0;text-shadow:0 0 18px #ffcf6b,0 0 48px #ffb02e,0 4px 0 #a8730d}
.dvt span{display:inline-block;opacity:0;animation:dvl 3.6s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:calc(.15s + var(--k)*.09s)}
@keyframes dvl{0%{opacity:0;transform:translateY(40px) scale(2.4);filter:blur(8px)}18%{opacity:1;transform:none;filter:none}85%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
/* animations secrètes */
.op.ndl .bvr{animation-play-state:paused!important}
.op.ndl .bvx{animation:needle 1.1s cubic-bezier(.3,.1,.3,1)}
@keyframes needle{0%{transform:rotate(0)}20%{transform:rotate(-40deg)}35%{transform:rotate(-20deg)}50%{transform:rotate(-55deg)}65%{transform:rotate(-30deg)}100%{transform:rotate(720deg)}}
.op.glt .stage{animation:glitch .9s steps(1) 1}
.op.glt .pl{animation:glitch2 .9s steps(1) 1}
@keyframes glitch{0%{transform:none}10%{transform:translate(-6px,2px) skewX(6deg);filter:hue-rotate(90deg)}20%{transform:translate(5px,-3px);filter:invert(1)}30%{transform:none;filter:none}45%{transform:translate(8px,0) skewX(-10deg);filter:hue-rotate(200deg) saturate(3)}60%{transform:translate(-3px,4px);filter:none}75%{transform:translate(0,-6px) scaleY(1.05);filter:contrast(2)}90%{transform:none;filter:none}}
@keyframes glitch2{0%,100%{clip-path:none}15%{clip-path:inset(20% 0 50% 0)}35%{clip-path:inset(60% 0 10% 0)}55%{clip-path:inset(0 0 70% 0)}75%{clip-path:inset(40% 0 30% 0)}}
.op.bss .eq i{animation-duration:.18s!important;background:var(--rc)}
.op.bss .pl{animation:bassp 1.3s cubic-bezier(.3,1.6,.4,1)}
.op.bss::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent 30%,rgba(0,0,0,.65));pointer-events:none;animation:bassd 1.3s ease-in-out}
@keyframes bassp{0%{transform:scale(1)}15%,35%,55%,75%{transform:scale(1.1)}25%,45%,65%{transform:scale(.96)}90%{transform:scale(.85)}100%{transform:scale(1)}}
@keyframes bassd{0%,100%{opacity:0}30%,80%{opacity:1}}
/* teaser : le fond s'allume de la couleur de la meilleure rareté */
.op.aura::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 55% at 50% 45%,var(--aura),transparent 70%);opacity:0;animation:aura 2.2s ease-in-out}
@keyframes aura{0%{opacity:0}25%{opacity:.55}45%{opacity:.25}65%{opacity:.5}100%{opacity:0}}
body.lite .op.charge .stage,body.lite .op.quake .opmid,body.lite .op.quake2 .opmid{animation:none}

/* packs plus désirables */
.pkx{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:14px 10px 12px;border-radius:24px;background:linear-gradient(160deg,#1b1b26,#262338);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pkx .pkglow{position:absolute;inset:-30%;background:radial-gradient(circle at 50% 35%,var(--rc,#8c7bff),transparent 55%);opacity:.45;animation:pkg 3.5s ease-in-out infinite;pointer-events:none}
@keyframes pkg{50%{opacity:.7;transform:scale(1.08)}}
.pkx>*{position:relative}
.pkx .mini{width:34px;height:44px;animation:coinb 2.6s ease-in-out infinite}
.pkx b{font:800 16px var(--disp)}
.pkg{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.12);font:700 10.5px var(--mono);letter-spacing:.02em}
.pkg i{width:7px;height:7px;border-radius:50%;box-shadow:0 0 6px currentColor}
.pkd{background:#ffcf5a;color:#2a1300}
.pko{font:500 10.5px var(--mono);opacity:.65;text-align:center}
.pkx .price{background:#fff;color:#111;margin-top:4px}
.pkx em{display:none}
.pk-diam{--rc:#ff5f86}.pk-gold{--rc:#ffc23d}.pk-nacre{--rc:#c27dff}.pk-lot{--rc:#5aa9ff}.pk-dust{--rc:#7b8cff}
.lotst{display:flex;gap:0}.lotst .mini{width:24px;height:32px;margin:0 -4px}.lotst .mini:nth-child(2){transform:translateY(-4px)}
.pkx .stack{display:flex;gap:2px}
.dsh{display:flex;align-items:center;gap:10px;padding:12px;border-radius:18px;background:var(--soft)}
.dsi .dust{width:28px;height:28px}
.dsh b{font:700 16px var(--disp)}
.pkx .pko,.pkx b{color:#fff}.pkx .pko{opacity:.62}

/* Boutique : pass de saison */
.hb-sz{background:linear-gradient(150deg,#2a1a3f,#5b2a4f 55%,#a8452e);color:#fff}
.hb-sz::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(20,10,20,.7));pointer-events:none}
.hb-sz .hbt{z-index:2}
.ha-s .hst{animation:frb 3s ease-in-out infinite;animation-delay:calc(var(--k)*-.4s)}
.ha-s .hsp2{animation:dash 6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-180}}
.ha-s .hsz{transform-box:fill-box;transform-origin:center;animation:spark 2.4s ease-in-out infinite}
.hsb{display:block;width:160px;max-width:60vw;height:5px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden;margin-top:6px}
.hsb i{display:block;height:100%;background:linear-gradient(90deg,#ffc23d,#ff5f86);border-radius:3px}
/* Bourse en onglet */
.bxh{display:flex;align-items:center;gap:10px}
.bxh h2{flex:1;margin:0;font:800 clamp(24px,7vw,30px)/1.1 var(--disp);color:#fff}
.bxrk{flex:none;width:22px;text-align:center;font:800 15px var(--mono);color:#ffcf6b}
.bxr:has(.bxrk){padding-left:6px}
/* top du moment */
.topc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:20px;text-align:left;background:linear-gradient(120deg,rgba(255,194,61,.22),rgba(255,95,134,.18));box-shadow:inset 0 0 0 1px rgba(255,194,61,.35)}
.topk{width:100%;font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2)}
.topa{display:flex}
.topa .av{width:34px;height:34px;border-radius:50%;margin-right:-8px;background:var(--avg);box-shadow:0 0 0 2px var(--bg);display:grid;place-items:center;font:700 11px var(--disp);color:#fff}
.topb{margin-left:auto;padding:4px 10px;border-radius:999px;background:#111216;color:#ffcf6b;font:700 12px var(--mono)}
.topn{font-size:13.5px;font-weight:600}
.topsh{max-height:calc(100% - 40px)}
.tpl{display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0;flex:1;max-height:46vh}
.tpr{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:16px;background:var(--soft);text-align:left;flex:none}
.tpr .av{width:38px;height:38px;border-radius:50%;flex:none;background:var(--avg);display:grid;place-items:center;font:700 12px var(--disp);color:#fff}
.tpr b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpr small{font:500 11px var(--mono);color:var(--fg2)}
.tpr i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(127,127,127,.4);flex:none}
.tpr i svg{width:14px;height:14px}
.tpr.on{background:linear-gradient(120deg,rgba(255,194,61,.28),rgba(255,95,134,.2))}
.tpr.on i{background:#111216;color:#ffcf6b;box-shadow:none}
.tplock{display:flex;align-items:center;justify-content:center;gap:6px;font:600 13px var(--mono);color:var(--fg2)}
.tplock svg{width:15px;height:15px}
.hb-tr .hbt b{font-size:clamp(19px,5.6vw,24px);line-height:1.05}

/* ===== style net façon shadcn ===== */
body.mo .sheet{animation:none}
body.mo #main .view{animation:none}
.pbtn,.gbtn{border-radius:14px;letter-spacing:-.01em}
.pbtn{font-weight:650;box-shadow:0 1px 2px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.1)}
.gbtn{box-shadow:inset 0 0 0 1px rgba(127,127,127,.22)}
.gbtn.sq{border-radius:14px}
.chip{border-radius:11px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.14)}
.chip[aria-pressed=true]{box-shadow:none}
.seg{border-radius:16px}.seg button{border-radius:12px}
.sheet{border-radius:26px;box-shadow:0 0 0 1px rgba(127,127,127,.16),0 24px 60px rgba(0,0,0,.28)}
.tin:focus,.bxs input:focus,.frs:focus-within{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px rgba(120,120,255,.45)}
.lr,.arow,.prow.fr,.psi,.mcard{box-shadow:inset 0 0 0 1px rgba(127,127,127,.12)}
.v-bx .lr{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.toast{border-radius:14px}
.lbtn{border-radius:12px}
.pkx .price,.price{border-radius:10px}

/* photo de profil */
.av.me{background:var(--avg,linear-gradient(140deg,#8b7bff,#3a2db0))}
/* bulles : artistes du top */
.bb.tops{box-shadow:0 0 0 3px #ffcf5a,0 0 22px rgba(255,194,61,.75)!important;animation:topglow 2.4s ease-in-out infinite}
.bb.tops::after{content:'★';position:absolute;top:-4px;right:-2px;width:20px;height:20px;border-radius:50%;background:#ffcf5a;color:#2a1300;font:900 12px/20px var(--disp);text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
@keyframes topglow{50%{box-shadow:0 0 0 3px #ffcf5a,0 0 34px rgba(255,194,61,.95)}}
/* Maxi Ultra : couleur ultra rare */
.mini.nacre{background:linear-gradient(150deg,#f3e2ff,#c27dff 50%,#8a3fd9)}
/* collection : bouton Créer */
.crb{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 8px;border-radius:14px;background:linear-gradient(120deg,#7b8cff,#c27dff);color:#fff;font:700 14px var(--disp);box-shadow:0 6px 16px rgba(123,140,255,.35);flex:none}
.crb span{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.22);display:grid;place-items:center}
.crb svg{width:16px;height:16px}
.atsh{max-height:calc(100% - 30px)}
.atd{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--soft)}
.atd>div{flex:1;min-width:0}.atd b{display:block;font:700 15px var(--disp)}.atd small{font-size:12px;color:var(--fg2)}
.atd .gbtn{width:36px;height:36px;padding:0}
.atl{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;overflow-y:auto;min-height:0;flex:1;max-height:50vh;padding-bottom:4px}
.atc{position:relative;display:flex;flex-direction:column;gap:4px;padding:0;background:none}
.atc.no{opacity:.5}
.atp{display:inline-flex;align-items:center;justify-content:center;gap:4px;font:700 11.5px var(--mono)}
.atp .dust{width:12px;height:12px}
/* animation de création */
.crf{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;pointer-events:none}
.crf>*{pointer-events:auto}
.crf::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,var(--rc),transparent 55%);opacity:0;animation:crbg 1.6s ease-out .9s forwards;pointer-events:none}
@keyframes crbg{to{opacity:.45}}
.crp{position:absolute;left:50%;top:42%;width:0;height:0}
.crp i{position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;background:#b9c4ff;box-shadow:0 0 10px #8c9bff;animation:crp 1s cubic-bezier(.6,0,.9,.4) forwards}
@keyframes crp{0%{transform:rotate(var(--a)) translateX(var(--d)) scale(1);opacity:0}20%{opacity:1}100%{transform:rotate(calc(var(--a) + 180deg)) translateX(0) scale(.2);opacity:0}}
.crc{width:min(52vw,220px);opacity:0;transform:scale(.3) rotateY(180deg);animation:crc .8s cubic-bezier(.2,1.4,.4,1) .95s forwards;filter:drop-shadow(0 0 24px var(--rc))}
@keyframes crc{to{opacity:1;transform:none}}
.crt{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;animation:cellin .5s ease-out 1.5s forwards;text-align:center;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.crt b{font:800 22px var(--disp)}.crt small{opacity:.85}.crt .lbl{color:var(--rc)}
.crt .pbtn{margin-top:8px;min-width:160px}
#dd .crf~.scrim,#dd .scrim:has(+.crf){background:rgba(8,8,14,.82)}
/* événements */
.evp{height:auto;flex-wrap:wrap;justify-content:center;row-gap:1px;padding:5px 16px 6px}
.evk{font:600 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;opacity:.6;width:100%;text-align:center}
.evl{display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.evc2{border-radius:18px;background:var(--soft);overflow:hidden}
.evh{display:flex;align-items:center;gap:12px;width:100%;padding:12px;text-align:left;background:none}
.evh .sw2{width:40px;height:40px;border-radius:12px;background:var(--evbg);flex:none}
.evh span{flex:1;min-width:0}.evh b{display:block;font:700 15px var(--disp)}.evh small{font-size:12.5px;color:var(--fg2)}
.evh em{font:600 11.5px var(--mono);font-style:normal;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.evd{display:none;padding:0 14px 12px 64px}
.evd p{margin:0 0 4px;font-size:14px}
.evc2.open .evd{display:block}
.evc2.live{box-shadow:inset 0 0 0 1.5px rgba(255,95,134,.5)}
/* pass : bouton fixe sous le résumé */
.psbar{position:static;background:none;padding-top:0}
.cntr{display:flex;align-items:center;gap:10px;justify-content:space-between}
.cntr .cnt2{margin:0}
.crb{height:36px;font-size:13px;padding:0 12px 0 5px}
.crb span{width:26px;height:26px}
.v-col .vh{gap:8px}.v-col .vh .seg button{padding:0 8px}

/* ===== Bourse : mise en page variée ===== */
.bxch2{display:inline-flex;align-items:center;gap:2px;padding:2px 7px;border-radius:999px;font:700 11px var(--mono);background:rgba(255,255,255,.08);color:var(--fg2);white-space:nowrap}
.bxch2.bxup{background:rgba(48,192,122,.16);color:#3ddc8f}.bxch2.bxdn{background:rgba(229,72,77,.16);color:#ff6b6f}
.bxsec{display:flex;align-items:baseline;justify-content:space-between;margin:8px 2px -2px}
.bxsec b{font:800 18px var(--disp);color:#fff}.bxsec span{font:500 11px var(--mono);color:var(--fg2)}
/* son du moment */
.bxhero{position:relative;overflow:hidden;border-radius:24px;padding:14px;display:flex;flex-direction:column;gap:10px;cursor:pointer;
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--rc) 35%,transparent),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.bxhk{display:inline-flex;align-items:center;gap:6px;font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#ffcf6b}
.bxhm{display:flex;gap:12px;align-items:center;min-width:0}
.bxht{width:86px;flex:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
.bxhi{min-width:0;display:flex;flex-direction:column;gap:3px}
.bxhi>b{font:800 20px/1.1 var(--disp);color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bxhi>span{font-size:12.5px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxhp{display:flex;align-items:center;gap:8px;margin-top:4px}.bxhp b{display:inline-flex;align-items:center;gap:5px;font:800 24px var(--disp);color:#fff}
.bxhs{width:100%;height:64px}
.bxhs polygon{fill:currentColor;opacity:.14}.bxhs polyline{stroke-width:2.2}
.bxha{display:flex}
.bxb{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;padding:0 12px;border-radius:12px;background:#30c07a;color:#04140c;font:700 13px var(--mono);border:0}
.bxb.big{flex:1;height:46px;font-size:15px}
.bxlock{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--mono);color:var(--fg2)}.bxlock svg{width:14px;height:14px}
/* carrousels */
.bxrow{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:2px 16px 6px}
.bxrow::-webkit-scrollbar{display:none}
.bxm{flex:0 0 132px;scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;padding:8px;border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);cursor:pointer;animation:bxin .4s both;animation-delay:calc(var(--i)*40ms)}
.bxmt{position:relative;display:block}
.bxmt .bxch2{position:absolute;left:6px;top:6px;backdrop-filter:blur(6px);background:rgba(0,0,0,.55)}
.bxm>b{font:700 13.5px/1.2 var(--disp);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.bxm>span{font-size:11.5px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxmp{display:flex;align-items:center;justify-content:space-between;gap:4px}.bxmp b{display:inline-flex;align-items:center;gap:4px;font:700 13px var(--mono);color:#fff}
.bxms{width:54px;height:20px}
/* grille */
.bxgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:560px){.bxgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bxg{position:relative;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:18px;background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);cursor:pointer;min-width:0;animation:bxin .4s both;animation-delay:calc(min(var(--i),10)*35ms)}
.bxg::before{content:'';position:absolute;left:12px;right:12px;top:0;height:2px;border-radius:2px;background:var(--rc);opacity:.8}
.bxgt{display:block}
.bxgi{min-width:0}.bxgi b{display:block;font:700 13.5px/1.2 var(--disp);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bxgi span{display:block;font-size:11.5px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxgs{width:100%;height:26px}
.bxgp{display:flex;align-items:center;justify-content:space-between;gap:4px;flex-wrap:wrap}.bxgp>b{display:inline-flex;align-items:center;gap:4px;font:800 15px var(--mono);color:#fff}
.bxown{position:absolute;top:12px;right:12px;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:700 11px var(--mono);font-style:normal}
.bxrk2{position:absolute;top:12px;left:12px;z-index:1;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:#ffcf5a;color:#2a1300;font:800 12px/24px var(--mono);text-align:center}
.bxcost{font:500 11px var(--mono);color:var(--fg2)}
/* podium */
.bxpod{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;align-items:end}
.bxpd{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px 34px;border-radius:20px 20px 12px 12px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);text-align:center;cursor:pointer;min-width:0}
.bxpd.p1{background:linear-gradient(180deg,rgba(255,207,90,.3),rgba(255,207,90,.05));box-shadow:inset 0 0 0 1px rgba(255,207,90,.5),0 10px 30px rgba(255,180,40,.18);padding-bottom:48px}
.bxpt{display:block;width:100%}
.bxpd b{font:700 12.5px/1.2 var(--disp);color:#fff;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxpd>span:not(.bxpt):not(.bxch2):not(.bxcrown){font-size:11px;color:var(--fg2);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxpd em{font:800 14px var(--mono);font-style:normal;color:#fff;display:inline-flex;align-items:center;gap:4px}
.bxstep{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font:900 18px var(--disp);font-style:normal;color:rgba(255,255,255,.35)}
.bxpd.p1 .bxstep{font-size:26px;color:#ffcf5a}
.bxcrown{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:#ffcf5a;color:#2a1300;display:grid;place-items:center;box-shadow:0 4px 14px rgba(255,180,40,.5);z-index:2}
.bxcrown svg{width:16px;height:16px}
/* portefeuille */
.bxpf{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px;border-radius:24px;background:linear-gradient(135deg,rgba(48,192,122,.14),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.bxring{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;animation:ringin .9s cubic-bezier(.2,.9,.3,1)}
@keyframes ringin{from{transform:rotate(-120deg) scale(.6);opacity:0}}
.bxring>span{width:82px;height:82px;border-radius:50%;background:#0c121a;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bxring b{font:800 18px var(--disp);color:#fff}.bxring small{font:500 10px var(--mono);color:var(--fg2)}
.bxpfi{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.bxpfi small{font:500 11px var(--mono);color:var(--fg2)}
.bxpfi>b{display:inline-flex;align-items:center;gap:5px;font:800 18px var(--disp)}
.bxleg{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 12px}
.bxleg span{display:inline-flex;align-items:center;gap:5px;font:500 11px var(--mono);color:var(--fg2)}.bxleg i{width:8px;height:8px;border-radius:50%}
.bxbw{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bxbwc{display:flex;flex-direction:column;gap:5px;padding:10px;border-radius:18px;cursor:pointer;min-width:0}
.bxbwc.up{background:linear-gradient(160deg,rgba(48,192,122,.22),rgba(48,192,122,.04));box-shadow:inset 0 0 0 1px rgba(48,192,122,.3)}
.bxbwc.dn{background:linear-gradient(160deg,rgba(229,72,77,.22),rgba(229,72,77,.04));box-shadow:inset 0 0 0 1px rgba(229,72,77,.3)}
.bxbwc .wc{width:64px}
.bxbwc b{font:700 13.5px var(--disp);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* cours sur la carte de collection */
.qte{display:inline-flex;align-items:center;gap:4px;padding:0 4px;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.qte b{font-weight:800}.qte i{font-style:normal;font-weight:700;font-size:.9em}
.qte.bxup i{color:#30c07a}.qte.bxdn i{color:#e5484d}
.qte .coin{width:14px;height:14px}
.qld{opacity:.6}
.qte{padding:3px 9px;border-radius:999px;background:rgba(127,127,127,.14);gap:5px}
.qte small{font-size:11px;opacity:.7}
.qte em{font-style:normal;font-weight:800}
.qte.bxup em{color:#30a46c}.qte.bxdn em{color:#e5484d}
.qte::after{content:'›';font-weight:800;opacity:.6;margin-left:2px}
/* cartes de la Bourse : pochette sans texte en double */
.bxg .wc .tx,.bxm .wc .tx,.bxpd .wc .tx,.bxbwc .wc .tx,.bxht .wc .tx{display:none}
.bxg .wc .wf,.bxm .wc .wf,.bxpd .wc .wf{opacity:.5}
.bxrow{margin:0 -4px;padding:2px 4px 6px}
.bxgt .wc{aspect-ratio:1.35}
.v-col .vh{min-width:0}
.v-col .vh .seg{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.v-col .vh .seg::-webkit-scrollbar{display:none}
.v-col .vh .seg button{flex:none}
.v-col .vh .gbtn.sq{flex:none;width:42px;height:42px}
.cntr .cnt2{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cntr .crb{flex:none}
@media (max-width:360px){.crb{font-size:12px;padding:0 10px 0 4px}.crb span{width:22px;height:22px}}
.crb small{font:inherit}@media (max-width:370px){.crx{display:none}}