/* VYBE — The Guardians. Monochrome : noir, gris studio, argent. Direction artistique tirée du lookbook. */
:root{
  --black:#050505; --ink:#0f0f0f; --studio:#dedede; --paper:#efeeeb; --silver:#c8c8c8; --steel:#8b8b8b;
  --white:#f4f4f2; --line:rgba(255,255,255,.16); --lineD:rgba(0,0,0,.18);
  --font:'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --pad:clamp(1.25rem,4.5vw,4rem); --head:4.25rem; --bar:var(--head); --track:.16em;
  --bg:var(--black); --fg:var(--white); --btn-bg:var(--fg); --btn-fg:var(--bg);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:400 1rem/1.65 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
[hidden]{display:none!important}
.light{background:var(--studio);color:#0a0a0a;--btn-bg:var(--black);--btn-fg:var(--white)}
.star{display:inline-block;width:var(--s,1.4rem);aspect-ratio:1;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C52 30 70 48 100 50C70 52 52 70 50 100C48 70 30 52 0 50C30 48 48 30 50 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C52 30 70 48 100 50C70 52 52 70 50 100C48 70 30 52 0 50C30 48 48 30 50 0Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Barre du haut */
.top{position:fixed;inset:0 0 auto;z-index:40;height:var(--head);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:var(--bg);border-bottom:1px solid var(--line);color:var(--fg)}
.top>a img{height:2.1rem;width:auto}
.top nav{display:flex;align-items:center;gap:clamp(1rem,2.6vw,2.4rem);font:500 .78rem var(--font);letter-spacing:var(--track);text-transform:uppercase}
.top nav a,.browse-btn,.theme-btn{text-decoration:none;opacity:.78;transition:opacity .2s}
.top nav a:hover,.browse-btn:hover,.theme-btn:hover{opacity:1}
.cart-link{display:inline-flex;align-items:center;gap:.5rem}
.cart-link b{display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;padding:0 .3rem;border-radius:1rem;background:var(--fg);color:var(--bg);font:600 .68rem var(--font);letter-spacing:0}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:1.05rem 2.1rem;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;
  font:500 .76rem/1 var(--font);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn.solid{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.btn.solid:hover{background:transparent;color:inherit;border-color:currentColor}
.btn.sm{padding:.8rem 1.4rem}
.btn:disabled{opacity:.4;cursor:not-allowed}
.top nav a.btn{opacity:1}

/* Menu Parcourir */
.browse-btn{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:.5rem 0}
.browse-btn[aria-expanded=true]{opacity:1}
.browse-btn svg{width:.65rem;transition:transform .3s}
.browse-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;display:grid;grid-template-columns:repeat(var(--cols,3),1fr) 1.2fr;gap:2.5rem;padding:2.4rem var(--pad) 2.8rem;background:var(--bg);border-bottom:1px solid var(--line);
  visibility:hidden;opacity:0;transform:translateY(-.5rem);transition:opacity .25s,transform .3s,visibility 0s .3s}
.mega.open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.mega h4{font:500 .7rem var(--font);letter-spacing:.24em;text-transform:uppercase;color:var(--steel);margin-bottom:1rem}
.mega ul{list-style:none;padding:0;display:grid;gap:.5rem}
.mega li a{font:300 1.35rem/1.3 var(--font);letter-spacing:.04em;text-transform:none;opacity:1;transition:padding .25s}
.mega li a:hover{padding-left:.6rem}
.mega .feat{position:relative;display:grid;align-content:end;gap:.2rem;min-height:9rem;padding:1.4rem;background:var(--studio);color:var(--black);opacity:1;letter-spacing:.14em}
.mega .feat b{font:600 .85rem var(--font);letter-spacing:.2em}
.mega .feat span:not(.star){font-size:.7rem}
.mega .feat .star{position:absolute;right:1.2rem;top:1.2rem;--s:1.5rem}

/* Hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(1rem,2vw,2rem);align-items:center;
  padding:calc(var(--bar) + 3rem) var(--pad) 3.5rem;overflow:hidden;background:radial-gradient(50% 60% at 36% 46%,var(--glow,#1c1c1c),transparent 72%),var(--bg)}
.hero .mark{grid-column:1/9;display:grid;gap:2.2rem}
.hero .logo{width:100%;max-width:58rem;margin-left:-1.5%;filter:drop-shadow(0 0 60px rgba(255,255,255,.14));animation:rise 1.5s cubic-bezier(.2,.8,.2,1) both}
.hero h1{font:500 clamp(1rem,1.8vw,1.5rem)/1.4 var(--font);letter-spacing:.5em;text-transform:uppercase;animation:rise 1.5s .2s cubic-bezier(.2,.8,.2,1) both}
.hero h1 small{display:block;margin-top:.5rem;font-size:.6em;font-weight:300;letter-spacing:.7em;color:var(--steel)}
.hero .tag{max-width:30ch;font:300 1.05rem/1.55 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--silver);animation:rise 1.5s .35s cubic-bezier(.2,.8,.2,1) both}
.hero .cta{display:flex;gap:1rem;flex-wrap:wrap;animation:rise 1.5s .5s both}
.hero .look{grid-column:9/13;position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);animation:rise 1.6s .3s cubic-bezier(.2,.8,.2,1) both}
.hero .look img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.hero .look .star{position:absolute;right:1rem;bottom:1rem;--s:1.6rem;color:var(--white)}
@keyframes rise{from{opacity:0;transform:translateY(1.6rem)}}

/* Ticker */
.ticker{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;background:var(--bg)}
.ticker div{display:inline-block;padding:1.05rem 0;font:500 .78rem var(--font);letter-spacing:.3em;text-transform:uppercase;animation:tick 40s linear infinite}
.ticker span,.ticker b{margin:0 2rem;font-weight:500}
.ticker span{color:var(--steel)}
@keyframes tick{to{transform:translateX(-50%)}}

/* Manifeste */
.manifesto{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem clamp(1rem,2vw,2rem);padding:clamp(5rem,10vw,9rem) var(--pad);align-items:center;background:var(--ink)}
.manifesto .txt{grid-column:1/7}
.manifesto h2{font:300 clamp(1.7rem,3.8vw,3.4rem)/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase}
.manifesto p{margin-top:2rem;max-width:44ch;color:var(--silver)}
.manifesto .words{margin-top:2.2rem;display:flex;gap:1.6rem;flex-wrap:wrap;font:500 .8rem var(--font);letter-spacing:.24em;text-transform:uppercase}
.manifesto figure{position:relative;overflow:hidden;aspect-ratio:3/4;border:1px solid var(--line)}
.manifesto figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.manifesto .f1{grid-column:7/10}
.manifesto .f2{grid-column:10/13;aspect-ratio:3/5;align-self:end}

/* Collection (planche claire du lookbook) */
.shelf{background:var(--studio);color:#0a0a0a;padding:clamp(4rem,8vw,7rem) 0 0;--btn-bg:var(--black);--btn-fg:var(--white)}
.shelf>header{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;padding:0 var(--pad)}
.shelf h2,.more h2{font:500 clamp(1.3rem,2.6vw,2.2rem)/1.1 var(--font);letter-spacing:.34em;text-transform:uppercase}
.shelf>header p{max-width:34ch;color:#444;font-size:.95rem}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:3rem;background:#f7f7f7;border-block:1px solid #f7f7f7}
.card{position:relative;display:grid;gap:.9rem;align-content:start;padding:1.5rem 1.5rem 1.6rem;background:var(--studio);text-decoration:none;color:inherit}
.card .img{position:relative;aspect-ratio:4/5}
.card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .45s}
.card .img img+img{opacity:0}
.card:hover .img img+img,.card:focus-visible .img img+img{opacity:1}
.card h3{display:flex;justify-content:space-between;gap:1rem;font:600 .8rem/1.4 var(--font);letter-spacing:.18em;text-transform:uppercase}
.card h3 span{font-weight:500;letter-spacing:.08em;white-space:nowrap}
.card .spec{margin-top:-.5rem;font-size:.8rem;color:#555;letter-spacing:.06em}

/* Piliers */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.pillars div{display:grid;justify-items:center;gap:1.2rem;padding:3.2rem 1.5rem;text-align:center;font:500 .76rem/1.7 var(--font);letter-spacing:.28em;text-transform:uppercase}
.pillars div+div{border-left:1px solid var(--line)}
.pillars svg{width:2.2rem;height:2.2rem;fill:none;stroke:var(--silver);stroke-width:1.2}

/* Cercle */
.circle{position:relative;display:grid;justify-items:center;gap:1.6rem;text-align:center;padding:clamp(5rem,10vw,9rem) var(--pad);background:var(--ink);overflow:hidden}
.circle .star{--s:2.4rem;color:var(--fg)}
.circle h2{font:300 clamp(1.7rem,3.6vw,3.2rem)/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase}
.circle p{max-width:44ch;color:var(--silver)}

/* Pied de page */
.foot{padding:3.5rem var(--pad) 2rem;border-top:1px solid var(--line);background:var(--bg);color:var(--fg)}
.foot .big{width:min(100%,46rem);opacity:.9}
.foot small{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;color:var(--steel);font-size:.82rem;letter-spacing:.06em}

/* Page produit */
.pdp{padding-top:var(--bar)}
.pdp-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);padding:2.5rem var(--pad) 5rem;align-items:start}
.gallery{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;position:sticky;top:calc(var(--bar) + 1.5rem)}
.thumbs{display:grid;gap:.6rem;align-content:start}
.thumbs button{padding:0;border:1px solid transparent;background:var(--studio);aspect-ratio:4/5;cursor:pointer;overflow:hidden;opacity:.6;transition:opacity .2s,border-color .2s}
.thumbs button:hover{opacity:1}
.thumbs button[aria-current=true]{opacity:1;border-color:#0a0a0a}
.thumbs img{width:100%;height:100%;object-fit:cover}
.stage{position:relative;aspect-ratio:4/5;border:1px solid var(--lineD);overflow:hidden}
.stage img{width:100%;height:100%;object-fit:contain}
.stage .lbl{position:absolute;left:1rem;bottom:.9rem;font:500 .7rem var(--font);letter-spacing:.3em;text-transform:uppercase;color:#444}
.info{display:grid;gap:1.15rem;justify-items:start;max-width:34rem}
.crumb{font:500 .72rem var(--font);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;color:#444}
.crumb:hover{color:#000}
.info h1{font:500 clamp(1.7rem,3.4vw,2.7rem)/1.15 var(--font);letter-spacing:.14em;text-transform:uppercase}
.info h1 small{display:block;margin-bottom:.6rem;font:500 .8rem var(--font);letter-spacing:.3em;color:#555}
.spec-line{font-size:.9rem;letter-spacing:.08em;color:#444}
.price{font:400 1.7rem var(--font);letter-spacing:.04em}
.lead{max-width:40ch;color:#222}
.lab{font:500 .72rem var(--font);letter-spacing:.24em;text-transform:uppercase;color:#444;margin-bottom:-.6rem}
.sizes{display:flex;gap:.5rem;flex-wrap:wrap}
.sizes button{min-width:3.4rem;padding:.8rem 1rem;background:transparent;border:1px solid rgba(0,0,0,.35);color:#0a0a0a;font:500 .8rem var(--font);letter-spacing:.1em;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.sizes button:hover{border-color:#000}
.sizes button[aria-pressed=true]{background:#0a0a0a;color:var(--white);border-color:#0a0a0a}
.info .btn{width:100%;max-width:26rem}
.info dl{width:100%;margin-top:1rem;border-top:1px solid var(--lineD)}
.info dl div{display:flex;justify-content:space-between;gap:1.5rem;padding:.85rem 0;border-bottom:1px solid var(--lineD);font-size:.92rem}
.info dt{color:#555}.info dd{text-align:right}
.note{color:#555;font-size:.88rem}
.msg{min-height:1.4rem;font-size:.92rem;color:#ff9d9d}
.msg.ok{color:#9dffcf}
.light .msg,[data-theme=light] .msg{color:#8a1f1f}.light .msg.ok,[data-theme=light] .msg.ok{color:#14532d}
.msg a{margin-left:.6rem;text-underline-offset:3px}
.more{padding:0 0 0;background:var(--studio);color:#0a0a0a}
.more>h2{padding:0 var(--pad)}

/* Panier */
.cartpage{padding:calc(var(--bar) + 3rem) var(--pad) 6rem;min-height:100svh}
.cartpage>h1{font:500 clamp(1.4rem,3vw,2.4rem) var(--font);letter-spacing:.34em;text-transform:uppercase;margin-bottom:2.5rem}
.cart-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.lines{list-style:none;padding:0;border-top:1px solid var(--line)}
.line{display:grid;grid-template-columns:7rem minmax(0,1fr) auto;gap:1.2rem 1.5rem;padding:1.4rem 0;border-bottom:1px solid var(--line);align-items:center}
.line .th{background:var(--studio);aspect-ratio:4/5;display:block}
.line .th img{width:100%;height:100%;object-fit:contain}
.line h2{font:600 .85rem var(--font);letter-spacing:.18em;text-transform:uppercase}
.line h2 a{text-decoration:none}
.line .meta{font-size:.85rem;color:var(--steel);letter-spacing:.05em}
.line .tot{font:500 1rem var(--font);text-align:right}
.qty{display:inline-flex;align-items:center;margin-top:.8rem;border:1px solid var(--line)}
.qty button{width:2.4rem;height:2.4rem;background:none;border:0;color:inherit;font:500 1.1rem var(--font);cursor:pointer}
.qty button:hover{background:var(--fg);color:var(--bg)}
.qty output{min-width:2.2rem;text-align:center;font-size:.9rem}
.rm{display:block;margin-top:.8rem;background:none;border:0;padding:0;color:var(--steel);font:400 .8rem var(--font);letter-spacing:.08em;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rm:hover{color:var(--fg)}
.sum{position:sticky;top:calc(var(--bar) + 1.5rem);padding:2rem;border:1px solid var(--line);background:var(--ink);display:grid;gap:1rem}
.sum h2{font:500 .78rem var(--font);letter-spacing:.3em;text-transform:uppercase}
.sum .row{display:flex;justify-content:space-between;gap:1rem;color:var(--silver)}
.sum .row.t{padding-top:1rem;border-top:1px solid var(--line);color:var(--fg);font:500 1.15rem var(--font)}
.ship{font-size:.85rem;color:var(--steel)}
.bar{height:2px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;background:var(--fg);transition:width .4s}
.empty{display:grid;justify-items:start;gap:1.5rem;padding:2rem 0}
.empty p{color:var(--silver);max-width:40ch}
#checkout{margin-top:.6rem;display:grid;gap:.9rem}
.demo{font-size:.78rem;color:var(--steel)}
.done{display:grid;gap:1.2rem;justify-items:start;max-width:40rem}
.done h2{font:300 clamp(1.7rem,3.4vw,3rem)/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase}
.done p{color:var(--silver)}

/* Compte */
.auth{min-height:100svh;display:grid;grid-template-columns:1.1fr 1fr}
.auth aside{position:relative;overflow:hidden;display:grid;align-content:space-between;gap:3rem;padding:calc(var(--bar) + 3rem) var(--pad) 3rem;background:radial-gradient(70% 60% at 40% 45%,var(--glow,#1f1f1f),transparent 72%),var(--ink);border-right:1px solid var(--line)}
.auth aside img{width:min(30rem,100%)}
.auth aside q{font:300 clamp(1.5rem,3vw,2.5rem)/1.25 var(--font);letter-spacing:.1em;text-transform:uppercase;quotes:none;max-width:16ch}
.auth main{display:grid;align-content:center;padding:calc(var(--bar) + 3rem) var(--pad) 3rem;max-width:36rem}
.tabs{display:flex;gap:2rem;margin-bottom:2rem}
.tabs button{background:none;border:0;color:var(--steel);font:500 .85rem var(--font);letter-spacing:.24em;text-transform:uppercase;padding:.4rem 0;cursor:pointer;border-bottom:1px solid transparent}
.tabs button[aria-selected=true]{color:var(--fg);border-color:var(--fg)}
form{display:grid;gap:1.15rem}
label{display:grid;gap:.4rem;font:500 .74rem var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
input{font:400 1rem var(--font);letter-spacing:.02em;text-transform:none;color:var(--fg);background:var(--field,rgba(255,255,255,.05));border:1px solid var(--line);padding:.9rem 1rem;border-radius:0}
input:focus{outline:2px solid var(--fg);outline-offset:0}
.welcome h2{font:300 clamp(1.7rem,3.6vw,3rem)/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.welcome p{color:var(--silver);margin-bottom:2rem}

@media (max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero .mark{grid-column:1/-1}.hero .look{grid-column:3/11;margin-top:2.5rem}
  .manifesto .txt{grid-column:1/-1}.manifesto .f1{grid-column:1/7}.manifesto .f2{grid-column:7/13}
  .pdp-wrap,.cart-grid{grid-template-columns:1fr}
  .gallery{position:relative;top:0;grid-template-columns:1fr}
  .thumbs{grid-auto-flow:column;grid-auto-columns:4.6rem;order:2;overflow-x:auto}
  .sum{position:relative;top:0}
}
@media (max-width:820px){
  .top nav a:not(.btn):not(.cart-link):not([data-account]),.top nav .browse{display:none}
  .mega{grid-template-columns:1fr 1fr;max-height:75svh;overflow:auto}
  .mega .feat{grid-column:1/-1}
  .auth{grid-template-columns:1fr}.auth aside{padding-bottom:2rem;gap:2rem}
  .pillars{grid-template-columns:1fr}.pillars div+div{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .card{padding:1rem}.card h3{flex-direction:column;gap:.2rem}
  .line{grid-template-columns:5rem minmax(0,1fr)}.line .tot{grid-column:2;text-align:left}
  .hero .look{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ===== Panneaux rareté / collection / promotion ===== */
.badges{position:absolute;left:.7rem;top:.7rem;right:3.6rem;display:flex;flex-wrap:wrap;gap:.35rem;z-index:2;pointer-events:none}
.badges.bot{top:auto;bottom:.7rem;right:.7rem}
.badges.row{position:static;pointer-events:auto}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .6rem;border:1px solid currentColor;background:var(--studio);color:#0a0a0a;font:600 .6rem/1 var(--font);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.badge .star{--s:.62rem}
.badge.t1{border-color:rgba(0,0,0,.45)}
.badge.t2{border-color:#0a0a0a}
.badge.t3{background:#0a0a0a;color:var(--white);border-color:#0a0a0a}
.badge.t4{background:#0a0a0a;color:var(--white);border-color:#0a0a0a;box-shadow:0 0 0 2px var(--studio),0 0 0 3px #0a0a0a}
.badge.col{background:transparent;color:#333;border-color:rgba(0,0,0,.28);font-weight:500}
.promo{position:absolute;right:.7rem;top:.7rem;z-index:2;padding:.38rem .55rem;background:var(--white);color:var(--black);border:1px solid var(--black);font:600 .66rem/1 var(--font);letter-spacing:.12em}
.stage .promo{right:1rem;top:1rem;font-size:.75rem}
.card h3 s,.price s{opacity:.5;font-weight:400;margin-right:.3rem}
.card .spec{margin-top:-.5rem}
.card.sold .img img:first-child{opacity:.3}
.card.sold:hover .img img+img{opacity:0}
.soldtag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;padding:.6rem 1.2rem;background:#0a0a0a;color:var(--white);font:600 .72rem var(--font);letter-spacing:.3em;text-transform:uppercase}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;padding:2rem var(--pad) 0}
.filters button{padding:.7rem 1.2rem;background:transparent;border:1px solid rgba(0,0,0,.35);color:#0a0a0a;font:500 .72rem var(--font);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.filters button[aria-pressed=true]{background:#0a0a0a;color:var(--white);border-color:#0a0a0a}
.none,.loading{grid-column:1/-1;padding:3rem var(--pad);color:#444}
.loading{padding-top:calc(var(--bar) + 4rem)}
.promo-note{margin-top:-.7rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#444}
.note.strong{color:#0a0a0a;font-weight:500}
.pdp-wrap .empty{grid-column:1/-1;padding:4rem 0;color:#222}
.pdp-wrap .empty p{color:#222}
.filters+.grid{margin-top:2rem}
@media (max-width:560px){.badge{font-size:.55rem;padding:.3rem .45rem}.badges{right:3rem}}

.badge{flex-direction:column;align-items:flex-start;gap:.32rem;white-space:normal;max-width:100%}
.badge .n{display:inline-flex;align-items:center;gap:.4rem}
.badge em{font:500 .54rem/1 var(--font);font-style:normal;letter-spacing:.16em;opacity:.8}
.badges{right:4.2rem}
.card.sold:hover .img img:first-child{opacity:.3}

/* ===== Thème clair (bouton de l'en-tête, voir theme.js) ===== */
:root[data-theme=light]{--bg:#f4f4f2;--fg:#0a0a0a;--ink:#e9e8e5;--silver:#3d3d3d;--steel:#6b6b6b;--line:rgba(0,0,0,.16);--glow:#fff;--field:rgba(0,0,0,.04)}
[data-theme=light] .top>a img,[data-theme=light] .foot .big,[data-theme=light] .auth aside img{filter:invert(1)}
[data-theme=light] .hero .logo{filter:invert(1) drop-shadow(0 0 60px rgba(0,0,0,.14))}
.theme-btn{display:inline-grid;place-items:center;width:2rem;height:2rem;padding:0;background:none;border:0;color:inherit;cursor:pointer}
.theme-btn svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .moon,[data-theme=light] .theme-btn .sun{display:none}
[data-theme=light] .theme-btn .moon{display:block}

/* ===== Panneaux animés : rareté (1 vert, 2 bleu, 3 violet, 4 or) et collection (chrome) ===== */
.badge.t1,.badge.t2,.badge.t3,.badge.t4,.badge.col{position:relative;overflow:hidden;padding:.5rem .7rem;border-color:var(--c2);color:#fff;font-size:.64rem;font-weight:600;text-shadow:0 1px 1px rgba(0,0,0,.5);
  background:linear-gradient(115deg,var(--c0),var(--c1) 50%,var(--c0)) 0 0/200% 100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 .3rem .9rem -.25rem var(--c1);animation:badge-flow 6s linear infinite}
.badge.t1::after,.badge.t2::after,.badge.t3::after,.badge.t4::after,.badge.col::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);transform:translateX(-130%);animation:badge-shine var(--s,5s) ease-in-out infinite}
.badge.t1{--c0:#075e2c;--c1:#19b257;--c2:#8dffbb;--s:6s}
.badge.t2{--c0:#0c2f9c;--c1:#2f7bf0;--c2:#a6ceff;--s:4.5s}
.badge.t3{--c0:#4a10ad;--c1:#a04bf5;--c2:#e0bcff;--s:3.4s;animation:badge-flow 5s linear infinite,badge-pulse 2.8s ease-in-out infinite}
.badge.t4{--c0:#c47a00;--c1:#ffe066;--c2:#fff6c2;--s:2.4s;color:#1c1200;text-shadow:0 1px 0 rgba(255,255,255,.55);animation:badge-flow 3s linear infinite,badge-pulse 1.8s ease-in-out infinite}
.badge.col{--c0:#050505;--c1:#6a6a6a;--c2:#f4f4f2;--s:5.5s;letter-spacing:.26em}
.badge.t3 .star,.badge.t4 .star,.badge.col .star{animation:badge-star 2.4s ease-in-out infinite}
@keyframes badge-flow{to{background-position:200% 0}}
@keyframes badge-shine{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes badge-pulse{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 1.3rem .2rem var(--c1)}}
@keyframes badge-star{50%{transform:scale(1.4) rotate(45deg)}}
@media (max-width:560px){.badge.t1,.badge.t2,.badge.t3,.badge.t4,.badge.col{font-size:.56rem;padding:.38rem .5rem}}

/* ===== Bande promotion au-dessus de l'en-tête (ajoutée par shop.js quand une promotion est active) ===== */
:root.has-promo{--bar:calc(var(--head) + 2.4rem)}
.has-promo .top{top:2.4rem}
.promo-bar{--c0:#b9b9b9;--c1:#fff;position:fixed;inset:0 0 auto;z-index:41;height:2.4rem;display:flex;align-items:center;justify-content:center;gap:.9rem;padding:0 var(--pad);overflow:hidden;
  color:var(--bg);text-decoration:none;font:500 .72rem/1 var(--font);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(115deg,var(--c0),var(--c1) 25%,var(--c0) 50%,var(--c1) 75%,var(--c0)) 0 0/200% 100%;animation:badge-flow 7s linear infinite}
[data-theme=light] .promo-bar{--c0:#050505;--c1:#555}
.promo-bar::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%);transform:translateX(-130%);animation:badge-shine 4s ease-in-out infinite}
.promo-bar span:not(.star){overflow:hidden;text-overflow:ellipsis}
.promo-bar b{font-weight:600;letter-spacing:.12em}
.promo-bar em{font-style:normal;opacity:.7}
.promo-bar .star{--s:.8rem;flex:none;animation:badge-star 2.4s ease-in-out infinite}
@media (max-width:560px){.promo-bar{font-size:.62rem;letter-spacing:.14em}.promo-bar em{display:none}}

/* ===== Étoile « déjà acheté » dans le coin de la pièce : grisée, ou pleine avec une coche ===== */
.own{position:absolute;right:.7rem;bottom:.7rem;z-index:2;display:grid;place-items:center;width:2.1rem;height:2.1rem;color:rgba(0,0,0,.2)}
.own>*,.own::before{grid-area:1/1}
.own .star{--s:2.1rem}
.own svg{display:none;position:relative;width:.62rem;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.own.on{color:#0a0a0a;filter:drop-shadow(0 0 .45rem rgba(255,255,255,.9))}
.own.on::before{content:"";width:1.05rem;height:1.05rem;border-radius:50%;background:currentColor}
.own.on svg{display:block}
.stage .own{right:1rem;bottom:1rem;width:2.8rem;height:2.8rem}
.stage .own .star{--s:2.8rem}
.stage .own.on::before{width:1.35rem;height:1.35rem}
.stage .own svg{width:.8rem}
.badges.bot{right:3.2rem}

/* ===== Vybedex ===== */
.top nav a[aria-current=page]{opacity:1}
.dex{padding-top:var(--bar)}
.dex-head{display:grid;gap:1.4rem;justify-items:start;padding:clamp(3rem,6vw,5rem) var(--pad)}
.dex-head h1{font:300 clamp(2.2rem,6vw,4.6rem)/1 var(--font);letter-spacing:.3em;text-transform:uppercase}
.dex-head p{max-width:48ch;color:var(--silver)}
.dex-count{display:flex;align-items:baseline;gap:.8rem;font:500 .8rem var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--silver)}
.dex-count b{font:300 3.2rem/1 var(--font);letter-spacing:.04em;color:var(--fg)}
.dex-head .bar{width:min(100%,32rem);height:3px}
.dex-rar{display:flex;gap:.9rem 1.6rem;flex-wrap:wrap}
.dex-rar>span{display:inline-flex;align-items:center;gap:.7rem}
.dex-rar b{font:500 .85rem var(--font);letter-spacing:.1em;white-space:nowrap}
.dex-hint{font-size:.88rem}
.dex .shelf{padding-top:0}
.card.miss .img img{opacity:.14;filter:grayscale(1) blur(3px);transition:opacity .45s,filter .45s}
.card.miss .img img+img{display:none}
.card.miss:hover .img img,.card.miss:focus-visible .img img{opacity:.75;filter:none}
.card.miss .img::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font:300 5rem var(--font);color:rgba(0,0,0,.4);transition:opacity .3s}
.card.miss:hover .img::after,.card.miss:focus-visible .img::after{opacity:0}
.card.miss h3,.card.miss .spec{opacity:.55}

/* ===== Couleurs d'une pièce : pastilles de choix (fiche produit) et aperçu (cartes) ===== */
.colors{display:flex;gap:.6rem;flex-wrap:wrap}
.colors button{width:2.6rem;height:2.6rem;padding:3px;border:1px solid rgba(0,0,0,.3);border-radius:50%;background:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.colors button i{display:block;width:100%;height:100%;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.colors button:hover{border-color:#000}
.colors button[aria-pressed=true]{border-color:#0a0a0a;box-shadow:0 0 0 1px #0a0a0a}
.dots{display:flex;gap:.35rem;margin-top:-.3rem}
.dots i{width:.85rem;height:.85rem;border-radius:50%;border:1px solid rgba(0,0,0,.4)}

/* ===== Fiche produit : image principale plus compacte (tient dans la hauteur de l'écran) ===== */
.pdp-wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.gallery{width:100%;max-width:min(38rem,calc((100svh - var(--bar) - 3rem) * .8 + 6.5rem));justify-self:end}
@media (max-width:980px){.pdp-wrap{grid-template-columns:1fr}.gallery{max-width:min(26rem,calc((100svh - var(--bar) - 9rem) * .8));justify-self:center}}

/* ===== Compte : suivi des commandes ===== */
.orders{display:grid;gap:.9rem;margin-bottom:2.2rem}
.orders h3{margin-top:1rem;font:500 .74rem var(--font);letter-spacing:.26em;text-transform:uppercase;color:var(--silver)}
.onone{padding:1.2rem;border:1px dashed var(--line);color:var(--steel);font-size:.92rem}
.order{border:1px solid var(--line);background:var(--ink)}
.order summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.2rem;cursor:pointer;list-style:none}
.order summary::-webkit-details-marker{display:none}
.order summary>span:first-child{display:grid;gap:.2rem}
.order summary b{font:600 .85rem var(--font);letter-spacing:.14em}
.order small{color:var(--steel);font-size:.82rem;letter-spacing:.03em}
.ost{flex:none;padding:.4rem .7rem;border:1px solid var(--fg);font:500 .64rem/1 var(--font);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.ost.ok{background:var(--fg);color:var(--bg)}
.ost.off{border-color:var(--line);color:var(--steel)}
.track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:.4rem 1.2rem 1.3rem;padding:0}
.track::before,.track::after{content:"";position:absolute;left:12.5%;top:.4rem;height:2px;width:75%;background:var(--line)}
.track::after{width:calc(75% * var(--p,0));background:var(--fg);transition:width .5s}
.track li{position:relative;z-index:1;display:grid;justify-items:center;gap:.6rem;font:500 .6rem/1.3 var(--font);letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--steel)}
.track li::before{content:"";width:.9rem;height:.9rem;border-radius:50%;border:2px solid var(--line);background:var(--ink)}
.track li.done{color:var(--fg)}
.track li.done::before{border-color:var(--fg);background:var(--fg)}
.track li.cur::before{box-shadow:0 0 0 4px var(--line);animation:track-pulse 1.8s ease-in-out infinite}
@keyframes track-pulse{50%{box-shadow:0 0 0 7px transparent}}
.olines{list-style:none;padding:0;margin:0 1.2rem;border-top:1px solid var(--line)}
.olines li{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.olines img,.olines .noimg{width:3rem;height:auto;aspect-ratio:4/5;object-fit:contain;background:var(--studio)}
.olines li>span{display:grid;gap:.15rem}
.olines a{text-underline-offset:3px}
.olines b{font-weight:500;white-space:nowrap}
.ofoot{display:flex;justify-content:space-between;gap:.6rem 1.5rem;flex-wrap:wrap;padding:.9rem 1.2rem 1.1rem;font-size:.88rem;color:var(--silver)}
.ofoot b{color:var(--fg);font-weight:500}

/* ===== Pages légales, case d'acceptation des CGV ===== */
.legal{max-width:54rem;margin:0 auto;padding:calc(var(--bar) + 3.5rem) var(--pad) 5rem}
.legal h1{font:300 clamp(1.8rem,4.5vw,3.2rem)/1.15 var(--font);letter-spacing:.16em;text-transform:uppercase}
.legal-nav{display:flex;gap:.6rem 1.6rem;flex-wrap:wrap;margin:1.6rem 0 1rem;padding:1rem 0;border-block:1px solid var(--line);font:500 .74rem var(--font);letter-spacing:.18em;text-transform:uppercase}
.legal-nav a{text-decoration:none;opacity:.78}.legal-nav a:hover{opacity:1}
.legal section{padding-top:2.5rem}
.legal section,.legal h3[id]{scroll-margin-top:calc(var(--bar) + 1rem)}
.legal h2{font:500 clamp(1.1rem,2.2vw,1.5rem) var(--font);letter-spacing:.24em;text-transform:uppercase;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.legal h3{margin-top:1.8rem;font:500 .82rem var(--font);letter-spacing:.14em;text-transform:uppercase}
.legal h4{font:500 .78rem var(--font);letter-spacing:.16em;text-transform:uppercase}
.legal p,.legal ul{margin-top:.8rem;color:var(--silver)}
.legal ul{padding-left:1.2rem;display:grid;gap:.5rem}
.legal b{color:var(--fg);font-weight:500}
.legal a{text-underline-offset:3px}
.legal-form{margin-top:1.4rem;padding:1.4rem;border:1px dashed var(--line)}
.legal .todo{padding:0 .3rem;background:#b3261e;color:#fff}
.agree{display:flex;align-items:flex-start;gap:.7rem;font:400 .88rem/1.5 var(--font);letter-spacing:0;text-transform:none;color:var(--silver);cursor:pointer}
.agree input{flex:none;width:1.1rem;height:1.1rem;margin-top:.15rem;padding:0;accent-color:var(--fg)}
.agree a,.fine a{text-underline-offset:3px}
.fine{font-size:.82rem;color:var(--steel)}
.foot small{gap:.6rem 1.6rem}

/* ===== Liste de souhaits : cœur sur les cartes, bouton sur la fiche produit ===== */
.wish{position:absolute;right:.7rem;top:.7rem;z-index:3;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:rgba(255,255,255,.75);color:#0a0a0a;cursor:pointer;transition:transform .2s,background .2s}
.promo+.wish{top:2.7rem}
.wish:hover{transform:scale(1.12);background:#fff}
.wish svg,.wishbtn svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.wish.on svg,.wishbtn.on svg{fill:currentColor}
.wish.on{animation:wish-pop .35s ease-out}
@keyframes wish-pop{40%{transform:scale(1.35)}}
.wishbtn{margin-top:-.4rem}

/* ===== Profil : bannière, avatar avec anneau d'XP, rang, onglets ===== */
.auth.in{display:block;min-height:0}
.auth.in aside{display:none}
.auth.in main{display:block;max-width:none;padding:var(--bar) 0 5rem}
.pf-cover{position:relative;height:clamp(9rem,22vw,15rem);overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(70% 140% at 78% 0,var(--glow,#2c2c2c),transparent 70%),linear-gradient(120deg,var(--ink),var(--bg))}
.pf-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);transform:translateX(-130%);animation:badge-shine 7s ease-in-out infinite}
.pf-cover img{position:absolute;right:var(--pad);top:50%;height:135%;width:auto;max-width:none;transform:translateY(-50%);opacity:.13}
[data-theme=light] .pf-cover img{filter:invert(1)}
.pf-wrap{padding:0 var(--pad)}
.pf-head{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem 1.6rem;align-items:end;margin-top:-3.6rem}
.pf-ring{--p:0;position:relative;display:grid;place-items:center;width:8.4rem;height:8.4rem;border-radius:50%;background:conic-gradient(var(--fg) calc(var(--p) * 1%),var(--line) 0),var(--bg);box-shadow:0 0 0 6px var(--bg)}
.pf-avatar{display:grid;place-items:center;width:7.4rem;height:7.4rem;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--bg);font:300 3.1rem var(--font)}
.pf-lvl{position:absolute;right:-.3rem;bottom:.3rem;display:grid;place-items:center;min-width:2.5rem;height:2.5rem;padding:0 .55rem;border-radius:1.25rem;background:var(--fg);color:var(--bg);box-shadow:0 0 0 4px var(--bg);font:600 1.05rem var(--font)}
.pf-id{display:grid;gap:.6rem;padding-bottom:.5rem}
.pf-id h1{font:400 clamp(1.7rem,4vw,2.8rem)/1.1 var(--font);letter-spacing:.1em;text-transform:uppercase;overflow-wrap:anywhere}
.pf-meta{display:flex;gap:.5rem 1.1rem;flex-wrap:wrap;align-items:center;color:var(--steel);font-size:.85rem}
.pf-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end;padding-bottom:.7rem}
.pf-toast{margin-top:1.4rem;padding:.9rem 1.2rem;background:var(--fg);color:var(--bg);font:500 .85rem var(--font);letter-spacing:.06em}
.pf-xpbox{display:grid;gap:.75rem;margin-top:1.8rem;padding:1.2rem 1.4rem;border:1px solid var(--line);background:var(--ink)}
.pf-xptop{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font:500 .74rem var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--silver)}
.pf-xptop b{margin-left:.35rem;font:300 1.8rem/1 var(--font);letter-spacing:.04em;color:var(--fg)}
.pf-xpbox .bar{height:.6rem;border-radius:1rem}
.pf-xpbox .bar i{position:relative;overflow:hidden;border-radius:1rem;background:linear-gradient(90deg,var(--steel),var(--fg));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.pf-xpbox .bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);transform:translateX(-130%);animation:badge-shine 3.5s ease-in-out infinite}
.pf-xpbox small{color:var(--steel);font-size:.8rem}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:1rem;background:var(--line);border:1px solid var(--line)}
.pf-stats div{display:grid;gap:.4rem;padding:1.2rem 1.3rem;background:var(--bg)}
.pf-stats b{font:300 1.9rem/1 var(--font)}
.pf-stats span{font:500 .66rem var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.pf-tabs{display:flex;gap:0 2.2rem;flex-wrap:wrap;margin-top:2.4rem;border-bottom:1px solid var(--line)}
.pf-tabs button{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:-1px;padding:.95rem 0;background:none;border:0;border-bottom:2px solid transparent;color:var(--steel);font:500 .8rem var(--font);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:color .2s}
.pf-tabs button:hover{color:var(--fg)}
.pf-tabs button[aria-selected=true]{color:var(--fg);border-color:var(--fg)}
.pf-tabs i{padding:.22rem .55rem;border-radius:1rem;background:var(--line);font:500 .68rem/1 var(--font);font-style:normal;letter-spacing:.06em}
.pf-panel{padding-top:1.6rem}
.quests{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:.9rem}
.quest{display:grid;gap:.9rem;align-content:start;padding:1.2rem;border:1px solid var(--line);background:var(--ink)}
.q-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.q-top>div{display:grid;gap:.25rem}
.q-top b{font:600 .85rem var(--font);letter-spacing:.12em;text-transform:uppercase}
.quest small{color:var(--steel);font-size:.85rem}
.q-xp{flex:none;padding:.4rem .6rem;border:1px solid var(--fg);font:500 .64rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.q-prog{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.9rem;align-items:center;font-size:.82rem;color:var(--silver)}
.q-prog .bar{height:.35rem;border-radius:1rem}
.q-prog .bar i{border-radius:1rem}
.quest.done{border-color:var(--fg)}
.quest.done .q-xp{background:var(--fg);color:var(--bg)}
.pf-panel .orders{margin-bottom:0}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:1.1rem}
.pf-grid .onone{grid-column:1/-1}
.pf-card{display:grid;gap:.35rem;align-content:start;font-size:.85rem}
.pf-card .pf-img{position:relative;display:block;background:var(--studio);transition:transform .25s}
.pf-card a.pf-img:hover{transform:translateY(-.25rem)}
.pf-card img,.pf-card .noimg{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain}
.pf-card .pf-img .badge{position:absolute;left:.4rem;top:.4rem;padding:.3rem .45rem;font-size:.5rem}
.pf-card b{font:600 .72rem/1.4 var(--font);letter-spacing:.12em;text-transform:uppercase}
.pf-card small{color:var(--steel)}
@media (max-width:820px){
  .pf-head{grid-template-columns:auto minmax(0,1fr)}.pf-actions{grid-column:1/-1;justify-content:flex-start;padding-bottom:0}
  .pf-ring{width:6.4rem;height:6.4rem}.pf-avatar{width:5.6rem;height:5.6rem;font-size:2.3rem}.pf-head{margin-top:-2.6rem}
  .pf-stats{grid-template-columns:repeat(2,1fr)}.pf-tabs{gap:0 1.3rem}.pf-tabs button{font-size:.7rem;letter-spacing:.14em}
  .quests{grid-template-columns:1fr}
}

/* ===== Profil personnalisable : une couleur pilote la bannière, le logo, l'anneau d'XP et la photo de profil ===== */
.profile,[data-skin=argent]{--t0:var(--ink);--t1:var(--fg);--tk:var(--bg);--tg:rgba(128,128,128,.22);--lo:.14}
[data-skin=rouge]{--t0:#5c0a14;--t1:#ff4257;--tk:#050505;--tg:rgba(255,66,87,.36);--lo:.62}
[data-skin=or]{--t0:#5e3f00;--t1:#ffcf3f;--tk:#050505;--tg:rgba(255,207,63,.34);--lo:.62}
[data-skin=vert]{--t0:#0a4a28;--t1:#34e08c;--tk:#050505;--tg:rgba(52,224,140,.32);--lo:.62}
[data-skin=bleu]{--t0:#0b2c78;--t1:#4f9dff;--tk:#050505;--tg:rgba(79,157,255,.36);--lo:.62}
[data-skin=violet]{--t0:#35107a;--t1:#b571ff;--tk:#050505;--tg:rgba(181,113,255,.36);--lo:.62}
[data-skin=rose]{--t0:#650d44;--t1:#ff62ba;--tk:#050505;--tg:rgba(255,98,186,.34);--lo:.62}
[data-skin=cyan]{--t0:#064656;--t1:#42e2ff;--tk:#050505;--tg:rgba(66,226,255,.32);--lo:.62}
.pf-cover{background:radial-gradient(70% 150% at 80% 0,var(--tg),transparent 72%),linear-gradient(120deg,var(--t0),var(--bg) 92%);transition:background .4s}
.pf-logo{position:absolute;right:var(--pad);top:50%;height:135%;aspect-ratio:1083/440;transform:translateY(-50%);opacity:var(--lo);background:linear-gradient(100deg,var(--t1),#fff 45%,var(--t1) 90%);
  -webkit-mask:url(logo.png) center/contain no-repeat;mask:url(logo.png) center/contain no-repeat}
.pf-ring{background:conic-gradient(var(--t1) calc(var(--p) * 1%),var(--line) 0),var(--bg)}
.pf-avatar{background:radial-gradient(circle at 30% 25%,var(--tg),transparent 72%),var(--ink);color:var(--t1)}
.pf-avatar .star{--s:3.6rem}
.pf-mark{display:block;width:74%;aspect-ratio:1083/440;background:currentColor;-webkit-mask:url(logo.png) center/contain no-repeat;mask:url(logo.png) center/contain no-repeat}
.pf-lvl{background:var(--t1);color:var(--tk)}
.pf-xpbox .bar i{background:linear-gradient(90deg,var(--t0),var(--t1))}
.pf-tabs button[aria-selected=true]{border-color:var(--t1)}
.pf-editor{display:grid;gap:1.3rem;margin-top:1.4rem;padding:1.4rem;border:1px solid var(--line);background:var(--ink)}
.pf-editor>label{max-width:24rem}
.pf-editor fieldset{display:grid;gap:.8rem;min-width:0;margin:0;padding:0;border:0}
.pf-editor legend{padding:0;font:500 .74rem var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
.pf-skins,.pf-avs,.pf-edact{display:flex;gap:.7rem;flex-wrap:wrap}
.pf-skins button{width:2.9rem;height:2.9rem;padding:3px;border:1px solid var(--line);border-radius:50%;background:none;cursor:pointer;transition:transform .2s}
.pf-skins button:hover{transform:scale(1.08)}
.pf-skins i{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--t0),var(--t1))}
.pf-skins button[aria-pressed=true]{border:2px solid var(--fg)}
.pf-avs button{display:grid;justify-items:center;gap:.5rem;padding:.8rem 1rem;border:1px solid var(--line);background:none;color:var(--silver);font:500 .68rem var(--font);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.pf-avs button[aria-pressed=true]{border-color:var(--fg);color:var(--fg)}
.pf-avs .pf-avatar{width:3.6rem;height:3.6rem;box-shadow:none;font-size:1.5rem}
.pf-avs .pf-avatar .star{--s:1.8rem}
@media (max-width:820px){.pf-avatar .star{--s:2.7rem}.pf-avs .pf-avatar{width:3.6rem;height:3.6rem;font-size:1.5rem}}

/* ===== Vybedex dans le profil (onglet) ===== */
.pf-dex{display:grid;gap:1.2rem;justify-items:start;margin-bottom:1.8rem}
.pf-dex p{max-width:52ch;color:var(--silver)}
.pf-dex .bar{width:min(100%,32rem);height:3px}
.pf-panel .shelf{margin:0 calc(var(--pad) * -1);padding:0}

/* ===== Profil : onglets stables (la page ne remonte pas) et onglet Vybedex mis en avant ===== */
.pf-panel{min-height:100svh}
.pf-tabs{align-items:center}
.pf-tabs .pf-tab-dex{position:relative;overflow:hidden;margin:.45rem 0;padding:.75rem 1.2rem;border:1px solid var(--t1);color:var(--t1);font-weight:600;
  background:linear-gradient(115deg,transparent,var(--tg) 50%,transparent) 0 0/200% 100%;animation:badge-flow 5s linear infinite}
.pf-tabs .pf-tab-dex::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);transform:translateX(-130%);animation:badge-shine 3.6s ease-in-out infinite}
.pf-tabs .pf-tab-dex .star{--s:.9rem;animation:badge-star 2.4s ease-in-out infinite}
.pf-tabs .pf-tab-dex i{background:var(--t1);color:var(--tk)}
.pf-tabs .pf-tab-dex[aria-selected=true]{background:var(--t1);color:var(--tk);border-color:var(--t1);animation:none;box-shadow:0 0 1.4rem -.2rem var(--t1)}
.pf-tabs .pf-tab-dex[aria-selected=true] i{background:var(--tk);color:var(--t1)}

/* ===== En-tête : photo de profil, anneau d'XP et niveau à côté du nom ===== */
.top nav a.acct{display:inline-flex;align-items:center;gap:.65rem;opacity:1}
.hd-ring{--p:0;position:relative;flex:none;display:grid;place-items:center;width:2.15rem;height:2.15rem;border-radius:50%;background:conic-gradient(var(--t1) calc(var(--p) * 1%),var(--line) 0),var(--bg)}
.hd-av{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--ink);color:var(--t1);font:500 .82rem/1 var(--font);letter-spacing:0}
.hd-av .star{--s:.95rem}
.hd-ring b{position:absolute;right:-.4rem;bottom:-.3rem;display:grid;place-items:center;min-width:1.1rem;height:1.1rem;padding:0 .22rem;border-radius:1rem;background:var(--t1);color:var(--tk);box-shadow:0 0 0 2px var(--bg);font:600 .58rem/1 var(--font);letter-spacing:0}
@media (max-width:560px){.hd-name{display:none}}

/* ===== Vybedex : cartes compactes, 8 par ligne par défaut ===== */
#dex .grid{grid-template-columns:repeat(8,1fr)}
#dex .card{gap:.5rem;padding:.7rem .7rem .9rem}
#dex .card h3{flex-direction:column;gap:.15rem;font-size:.62rem;letter-spacing:.12em}
#dex .card .spec,#dex .card .dots,#dex .badges.bot,#dex .promo{display:none}
#dex .badges{left:.35rem;top:.35rem;right:1.9rem}
#dex .badge{padding:.26rem .36rem;font-size:.46rem;letter-spacing:.12em}
#dex .badge .star{--s:.5rem}
#dex .wish,#dex .promo+.wish{right:.35rem;top:.35rem;width:1.45rem;height:1.45rem}
#dex .wish svg{width:.78rem;height:.78rem}
#dex .own{right:.35rem;bottom:.35rem;width:1.5rem;height:1.5rem}
#dex .own .star{--s:1.5rem}
#dex .own.on::before{width:.78rem;height:.78rem}
#dex .own svg{width:.45rem}
#dex .card.miss .img::after{font-size:2.6rem}
#dex .soldtag{padding:.35rem .6rem;font-size:.5rem;letter-spacing:.2em}
@media (max-width:1200px){#dex .grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:900px){#dex .grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){#dex .grid{grid-template-columns:repeat(3,1fr)}}