/* ColdRead Football — Vestiaire (cosmétiques / Season Pass). Complète football.css : mêmes jetons, mobile 375 px d'abord (320 px vérifié),
   zones tactiles ≥ 44 px, un bouton principal par bloc. Tout est CSS/SVG inline : aucune image externe, aucun logo protégé (monogramme CR seulement).
   Purement visuel : rien ici n'affiche un bonus, un point ou une probabilité. */
.cx-nav,.fb-nav.four{grid-template-columns:repeat(4,1fr)}
.fb-nav.four a{font-size:10px;letter-spacing:.04em}
.cx-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--muted);font:500 13px/1.45 Inter}
.cx-note b{color:var(--fg)}.cx-note.warn{border-color:rgba(242,201,76,.45)}.cx-note.off{border-color:rgba(255,93,93,.4)}
.cx-banner-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--muted);font:500 13px/1.45 Inter}
.cx-banner-note.warn{border-color:rgba(242,201,76,.45)}.cx-banner-note.off{border-color:rgba(255,93,93,.4)}
.cx-legal{text-align:center;color:var(--muted);font:500 11.5px Inter;padding:6px 0 0;opacity:.85}

/* ---------- cadres : anneau en relief (masque radial), motifs par classe p-* ---------- */
.cx-avatar{position:relative;width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--fg);font:800 22px Inter;letter-spacing:.02em;
  background:radial-gradient(circle at 35% 28%,#243252,#0b1120 72%);box-shadow:inset 0 0 14px rgba(0,0,0,.65),0 6px 18px rgba(0,0,0,.45)}
.cx-avatar::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(var(--line2),var(--line),var(--line2));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px))}
.cx-avatar::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 6px rgba(0,0,0,.6);pointer-events:none}
.cx-avatar.fr::before{background:conic-gradient(var(--c1),var(--c2),var(--c1))}
.cx-avatar.fr.glow{filter:drop-shadow(0 0 9px var(--c1))}
.cx-avatar.fr.p-neon::before{background:repeating-conic-gradient(from -12deg,var(--c1) 0 44deg,#0a0f0a 44deg 60deg)}
.cx-avatar.fr.p-neon{box-shadow:inset 0 0 14px rgba(0,0,0,.65),0 0 0 2px #0a0f0a,0 0 18px var(--c1)}
.cx-avatar.fr.p-chrome::before{background:repeating-conic-gradient(from 45deg,transparent 0 86deg,#141a27 86deg 90deg),conic-gradient(#f4f6fa,#8e97a8 12%,#f7f9fc 25%,#5b667a 40%,#e9edf3 55%,#7a8496 70%,#f4f6fa 85%,#8e97a8)}
.cx-avatar.fr.p-obsidian::before{background:repeating-linear-gradient(60deg,transparent 0 9px,rgba(255,60,60,.75) 9px 10px,transparent 10px 23px),repeating-linear-gradient(-30deg,transparent 0 13px,rgba(255,90,40,.5) 13px 14px,transparent 14px 29px),conic-gradient(#1a0a0a,#3a0f0f 20%,#0b0404 35%,#2a0808 50%,#0b0404 70%,#3a0f0f 85%,#1a0a0a)}
.cx-avatar.fr.p-holo::before{background:conic-gradient(from 0deg,#ff7a3d,#ffd34d,#7dffb0,#4fd0ff,#c86bff,#ff7a3d)}
.cx-avatar.fr.p-sapphire::before{background:repeating-conic-gradient(transparent 0 40deg,rgba(255,255,255,.28) 40deg 45deg),conic-gradient(#1f3fb0,#7fb0ff 15%,#0b1a60 30%,#4f7dff 50%,#0b1a60 65%,#7fb0ff 85%,#1f3fb0)}
.cx-avatar.fr.p-knit::before{background:repeating-conic-gradient(var(--c1) 0 15deg,var(--c2) 15deg 30deg,#2a4a2a 30deg 33deg)}
.cx-avatar.fr.p-royal::before{background:repeating-conic-gradient(#f5f1e6 0 40deg,#c9a227 40deg 44deg,#0b1a60 44deg 56deg,#c9a227 56deg 60deg)}
.cx-avatar.fr.p-carbon::before{background:repeating-linear-gradient(45deg,#1b2233 0 3px,#0e1526 3px 6px)}
.cx-avatar.fr.p-frost::before{background:conic-gradient(#bfe9ff,#fff,#8fc7ff,#dff4ff,#bfe9ff)}
.cx-avatar.fr.p-flames::before{background:conic-gradient(#ff8a3d,#ff5d5d,#ffd34d,#ff5d5d,#ff8a3d)}
.cx-avatar.fr.p-stitches::before{background:repeating-conic-gradient(var(--c1) 0 12deg,var(--c2) 12deg 15deg)}
.cx-avatar.fr.p-brushed::before{background:conic-gradient(#f2c94c,#8a6a12,#f7dd7a,#8a6a12,#f2c94c,#8a6a12,#f2c94c)}
.cx-avatar.fr.p-laurels::before{background:repeating-conic-gradient(#f2c94c 0 20deg,#b6f000 20deg 24deg)}
.cx-avatar.fr.p-split::before{background:conic-gradient(from -90deg,var(--c1) 0 50%,var(--c2) 50% 100%)}
.cx-avatar.fr.p-stripes::before{background:repeating-conic-gradient(var(--c1) 0 20deg,var(--c2) 20deg 40deg)}
.cx-avatar.fr.p-stars::after,.cx-avatar.fr.p-sparks::after{content:"✦";box-shadow:none;inset:auto;top:-14px;right:-6px;color:var(--c2);font-size:15px;text-shadow:0 0 8px var(--c2)}
.cx-avatar.fr.a-pulse{animation:cxPulse 2.2s ease-in-out infinite}
.cx-avatar.fr.a-spin::before{animation:cxSpin 6s linear infinite}
@keyframes cxPulse{0%,100%{filter:drop-shadow(0 0 6px var(--c1))}50%{filter:drop-shadow(0 0 20px var(--c1))}}
@keyframes cxSpin{to{transform:rotate(360deg)}}

/* ---------- variantes avec vraies images (WebP locales, /cosmetics/img/…) ---------- */
.cx-avatar.fr.img::before{inset:-16px;background:var(--img) center/cover no-repeat;-webkit-mask:radial-gradient(farthest-side,transparent 0 56%,#000 58%);mask:radial-gradient(farthest-side,transparent 0 56%,#000 58%);animation:none}
.cx-avatar.fr.img{filter:none}
.cx-avatar.fr.img.glow{filter:drop-shadow(0 0 8px var(--c1))}
.cx-banner.img{background-size:cover;background-position:center}
.cx-card.img::after{content:"";position:absolute;inset:0;background:var(--cardbg) center/cover no-repeat;opacity:.55;pointer-events:none}
.cx-card.img::before{opacity:.15}
.cx-item-view.photo{background:radial-gradient(ellipse at 50% 40%,#151d31,#070b14 80%)}
.cx-item-view.photo img{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;display:block}
.cx-item-view.photo.wide img{width:100%;height:100%;object-fit:cover}
.cx-hero.img{background-image:linear-gradient(180deg,rgba(5,8,16,.06) 0%,rgba(5,8,16,.22) 38%,rgba(5,8,16,.9) 62%,rgba(5,8,16,.92) 100%),var(--bg);background-size:var(--zoom,cover);background-position:var(--pos,50% 50%);background-repeat:no-repeat;image-rendering:auto}
.cx-hero.img::before{display:none}
.cx-hero.img .cx-hero-txt{padding-top:120px}
.cx-hero.img h2{text-shadow:0 2px 0 rgba(0,0,0,.5),0 12px 30px rgba(0,0,0,.7)}
.cx-hero.img p{color:#efe9dc;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.cx-plate{display:block;width:100%;border-radius:12px;border:1px solid var(--line2)}
.cx-drop.img{background-image:linear-gradient(90deg,rgba(17,26,46,.96) 0%,rgba(17,26,46,.85) 55%,rgba(17,26,46,.55) 100%),var(--hero);background-size:cover;background-position:right center}
@media (min-width:700px){.cx-hero.img{background-image:linear-gradient(90deg,var(--c1,#0a0f1c) 0%,var(--c1,#0a0f1c) 30%,rgba(5,8,16,.55) 52%,rgba(5,8,16,.12) 100%),var(--bg);background-size:auto 100%;background-position:right var(--pos-y,50%)}.cx-hero.img .cx-hero-txt{padding-top:0}}

/* ---------- titres ---------- */
.cx-title{display:inline-block;font:700 12px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--t,#94a0b8)}
.cx-title.s-gradient{background:linear-gradient(90deg,var(--t),#efe9dc);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-title.s-outline{color:var(--fg);border:1px solid var(--t);padding:3px 9px;border-radius:10px}

/* ---------- bannières : ambiances de stade en dégradés ---------- */
.cx-banner{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--c1,#0e1526),var(--c2,#1a2a4d))}
.cx-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,8,16,.55))}
.cx-banner.p-pitch{background-image:repeating-linear-gradient(90deg,transparent 0 28px,rgba(255,255,255,.05) 28px 56px),linear-gradient(135deg,var(--c1),var(--c2))}
.cx-banner.p-stars{background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.85) 1px,transparent 2px),radial-gradient(circle at 70% 20%,rgba(255,255,255,.7) 1px,transparent 2px),radial-gradient(circle at 45% 70%,rgba(255,255,255,.6) 1px,transparent 2px),radial-gradient(circle at 85% 60%,rgba(255,255,255,.7) 1px,transparent 2px),radial-gradient(circle at 10% 80%,rgba(255,255,255,.5) 1px,transparent 2px),linear-gradient(135deg,var(--c1),var(--c2))}
.cx-banner.p-beams,.cx-banner.p-chrome{background-image:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.14) 31%,transparent 40%),linear-gradient(80deg,transparent 58%,rgba(255,255,255,.12) 61%,transparent 70%),radial-gradient(ellipse at 50% 120%,rgba(255,255,255,.08),transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px),linear-gradient(180deg,var(--c1),var(--c2))}
.cx-banner.p-chrome::after{background:linear-gradient(180deg,transparent 60%,rgba(5,8,16,.6)),linear-gradient(180deg,transparent calc(100% - 3px),var(--acc,#b6f000) calc(100% - 3px))}
.cx-banner.p-stripes{background-image:repeating-linear-gradient(-30deg,rgba(255,255,255,.06) 0 14px,transparent 14px 28px),linear-gradient(135deg,var(--c1),var(--c2))}
.cx-banner.p-split{background:linear-gradient(105deg,var(--c1) 0 50%,var(--c2) 50% 100%)}
.cx-banner.p-inferno{background-image:radial-gradient(ellipse at 25% 115%,var(--c2) 0,transparent 45%),radial-gradient(ellipse at 78% 105%,rgba(255,42,42,.75),transparent 48%),radial-gradient(ellipse at 50% 130%,rgba(255,140,60,.55),transparent 40%),radial-gradient(circle at 50% 100%,rgba(255,255,255,.12),transparent 25%),linear-gradient(180deg,#000,var(--c1))}
.cx-banner.p-eclipse{background-image:radial-gradient(circle at 72% 34%,#000 0 11%,var(--acc,#ff7a3d) 12.5% 14%,rgba(255,122,61,.4) 17%,transparent 30%),linear-gradient(180deg,transparent 78%,rgba(255,122,61,.35) 79%,transparent 81%),linear-gradient(180deg,var(--c1),var(--c2) 75%,#1a0b30)}
.cx-banner.p-finale{background-image:radial-gradient(circle at 12% 22%,#fff 1px,transparent 2px),radial-gradient(circle at 33% 12%,#bfe9ff 1px,transparent 2px),radial-gradient(circle at 58% 28%,#fff 1px,transparent 2px),radial-gradient(circle at 80% 14%,#bfe9ff 1px,transparent 2px),radial-gradient(circle at 92% 40%,#fff 1px,transparent 2px),radial-gradient(circle at 45% 48%,#fff 1px,transparent 2px),linear-gradient(100deg,transparent 28%,rgba(191,233,255,.18) 31%,transparent 40%),linear-gradient(80deg,transparent 58%,rgba(191,233,255,.16) 61%,transparent 70%),linear-gradient(180deg,var(--c1),var(--c2))}
.cx-banner.p-terraces{background-image:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.5)),repeating-linear-gradient(-45deg,var(--c1) 0 16px,var(--c2) 16px 32px)}
.cx-banner.p-aerial{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='.8'%3E%3Crect x='3' y='3' width='94' height='54'/%3E%3Cpath d='M50 3v54'/%3E%3Ccircle cx='50' cy='30' r='8'/%3E%3Crect x='3' y='17' width='14' height='26'/%3E%3Crect x='83' y='17' width='14' height='26'/%3E%3C/svg%3E"),repeating-linear-gradient(90deg,transparent 0 24px,rgba(255,255,255,.04) 24px 48px),linear-gradient(180deg,var(--c1),var(--c2));background-size:60% auto,auto,auto;background-position:center,0 0,0 0;background-repeat:no-repeat,repeat,repeat}
.cx-banner.p-aerial::after{background:linear-gradient(180deg,transparent 60%,rgba(5,8,16,.55)),radial-gradient(circle at 50% 50%,rgba(212,255,0,.18),transparent 45%)}

/* ---------- carte de prédiction : plaque biseautée, lignes de terrain ---------- */
.cx-card{position:relative;border-radius:14px;padding:16px 16px 14px;min-height:150px;color:var(--ink,#efe9dc);overflow:hidden;display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(var(--bg-c,#111a2e),var(--bg-c,#111a2e)) padding-box,linear-gradient(150deg,var(--acc,#b6f000),rgba(255,255,255,.18) 30%,transparent 50%,var(--acc,#b6f000)) border-box;border:1.5px solid transparent;box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.cx-card::before{content:"";position:absolute;left:12%;right:12%;bottom:10px;height:44%;opacity:.3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Crect x='2' y='2' width='96' height='56'/%3E%3Cpath d='M50 2v56'/%3E%3Ccircle cx='50' cy='30' r='8'/%3E%3Crect x='2' y='16' width='14' height='28'/%3E%3Crect x='84' y='16' width='14' height='28'/%3E%3C/svg%3E") center/contain no-repeat}
.cx-card>*{position:relative}
.cx-card .cr{font:800 12px Inter;letter-spacing:.12em;opacity:.7}
.cx-card small{opacity:.85;font:700 11px Inter;letter-spacing:.14em;text-transform:uppercase}
.cx-card .k{font-family:Anton,Impact,sans-serif;font-size:40px;line-height:1;letter-spacing:.06em}
.cx-card .k i{font-style:normal;color:var(--acc,#b6f000);margin:0 6px}
.cx-card .cx-card-foot{display:flex;justify-content:space-between;align-items:center;font:600 10.5px Inter;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-top:auto}
.cx-card.p-chalk,.cx-skin.p-chalk{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,transparent 2px 6px),linear-gradient(var(--bg-c),var(--bg-c))}
.cx-card.p-glass,.cx-skin.p-glass{background-image:linear-gradient(160deg,rgba(255,255,255,.16),transparent 55%),linear-gradient(var(--bg-c),var(--bg-c))}
.cx-card.p-paper,.cx-skin.p-paper{background-image:radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(var(--bg-c),var(--bg-c));background-size:6px 6px,auto}
.cx-card.p-beams,.cx-skin.p-beams{background-image:linear-gradient(100deg,transparent 40%,rgba(255,243,176,.16) 42%,transparent 52%),linear-gradient(var(--bg-c),var(--bg-c))}
.cx-card.p-sparks::after{content:"✦ ✦";position:absolute;right:12px;top:10px;color:var(--acc);opacity:.7}
.cx-card.p-pitch,.cx-skin.p-pitch{background-image:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.04) 22px 44px),linear-gradient(var(--bg-c),var(--bg-c))}
.cx-card.p-rules,.cx-skin.p-rules{background-image:repeating-linear-gradient(0deg,transparent 0 18px,rgba(255,255,255,.07) 18px 19px),linear-gradient(var(--bg-c),var(--bg-c))}
.cx-card.p-graphite,.cx-skin.p-graphite{background-image:linear-gradient(115deg,rgba(255,255,255,.1),transparent 30%,transparent 60%,rgba(255,255,255,.07)),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),linear-gradient(var(--bg-c),var(--bg-c))}
.cx-card.p-graphite{clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);border-radius:4px}
.cx-card.p-obsidian,.cx-skin.p-obsidian{background-image:repeating-linear-gradient(60deg,transparent 0 30px,rgba(255,42,42,.55) 30px 31px,transparent 31px 70px),repeating-linear-gradient(-25deg,transparent 0 45px,rgba(255,120,60,.4) 45px 46px,transparent 46px 90px),radial-gradient(ellipse at 50% 120%,rgba(255,42,42,.25),transparent 50%),linear-gradient(var(--bg-c),var(--bg-c))}
.cx-card.p-holo{background:linear-gradient(var(--bg-c),var(--bg-c)) padding-box,conic-gradient(from 120deg,#ff7a3d,#ffd34d,#7dffb0,#4fd0ff,#c86bff,#ff7a3d) border-box;border-width:2px}
.cx-card.p-holo::after,.cx-skin.p-holo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 0%,rgba(200,107,255,.25),transparent 50%),radial-gradient(ellipse at 90% 100%,rgba(255,122,61,.2),transparent 45%);pointer-events:none}
.cx-card.p-prism,.cx-skin.p-prism{background-image:linear-gradient(135deg,rgba(255,255,255,.12) 0 18%,transparent 18% 40%,rgba(191,233,255,.12) 40% 55%,transparent 55% 80%,rgba(255,255,255,.1) 80%),linear-gradient(var(--bg-c),var(--bg-c))}
.cx-card.p-prism{clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px)}
.cx-card.p-perfo{border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.cx-card.p-perfo::after{content:"";position:absolute;left:8px;right:8px;top:6px;height:4px;background:radial-gradient(circle,rgba(0,0,0,.35) 1.2px,transparent 1.6px) 0 0/10px 4px repeat-x;pointer-events:none}
.cx-card.p-signal,.cx-skin.p-signal{background-image:linear-gradient(-55deg,transparent 47%,var(--acc) 49%,var(--acc) 50.5%,transparent 52.5%),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),linear-gradient(var(--bg-c),var(--bg-c))}
.cx-card.p-signal{box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 18px rgba(212,255,0,.18)}

/* ---------- shell principal : carte de prédiction habillée, vestiaire sur le profil ---------- */
.fb-card.pick.cx-skin{background:var(--bg-c);color:var(--ink);border-color:rgba(255,255,255,.14)}
.fb-card.pick.cx-skin.img{background-image:linear-gradient(180deg,rgba(5,8,16,.62),rgba(5,8,16,.78)),var(--cardbg);background-size:cover;background-position:center}
.fb-card.pick.cx-skin h2,.fb-card.pick.cx-skin .fb-msg{color:var(--ink)}
.fb-card.pick.cx-skin .fb-pick{border-color:var(--acc);background:rgba(0,0,0,.28);color:var(--ink)}
.fb-card.pick.cx-skin .fb-pick b,.fb-card.pick.cx-skin .fb-pick span{color:var(--ink)}
.fb-card.pick.cx-skin .fb-pick.on{background:var(--acc);border-color:var(--acc)}
.fb-card.pick.cx-skin .fb-pick.on b,.fb-card.pick.cx-skin .fb-pick.on span{color:#0a0f1c}
.cx-skin-name{display:block;font:600 11px Inter;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-top:2px}
.cx-me .cx-profile{margin:0}
.cx-me .cx-profile-body{gap:12px}
.cx-me .cx-profile-body .cx-scout{--w:72px;margin-left:auto;align-self:flex-end}
.cx-me .cx-who b{font-size:17px;white-space:nowrap}
.fb-identity .cx-title{margin-top:2px}

/* ---------- aperçu du profil (carte d'identité) ---------- */
.cx-profile{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line2);background:var(--card);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.cx-profile-body{display:flex;gap:16px;align-items:flex-end;padding:0 18px 18px;margin-top:-38px;position:relative}
.cx-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.cx-who b{font:800 20px Inter;letter-spacing:-.01em}
.cx-who small{color:var(--muted);font:500 12px Inter}
.cx-idcard{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.14);min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;background:#0b1120;box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.cx-idcard .cx-banner{position:absolute;inset:0;height:auto}
.cx-idcard .cx-banner::after{background:linear-gradient(180deg,rgba(5,8,16,.15),rgba(5,8,16,.75) 70%)}
.cx-idcard-in{position:relative;display:flex;align-items:center;gap:18px;padding:22px 20px 18px}
.cx-idcard .cx-avatar{width:88px;height:88px;font-size:26px}
.cx-idcard-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.cx-idcard-t b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:30px;letter-spacing:.06em;text-transform:uppercase;line-height:1;overflow-wrap:anywhere}
.cx-idcard-t small{font:700 10.5px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cx-idcard-t .cx-title{margin-top:2px}
.cx-idcard-foot{position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 20px 14px;font:700 10px Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cx-idcard-foot i{display:inline-flex;gap:4px}.cx-idcard-foot i b{width:3px;height:10px;background:var(--acc,#b6f000);border-radius:1px;opacity:.9}
.cx-idcard-foot i b:nth-child(3){opacity:.4}

/* ---------- héros de collection ---------- */
.cx-hero{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.1);padding:22px 18px;display:flex;flex-direction:column;gap:16px;
  background:radial-gradient(ellipse at 85% -10%,rgba(255,255,255,.12),transparent 45%),radial-gradient(ellipse at 0% 110%,rgba(255,255,255,.06),transparent 40%),linear-gradient(135deg,var(--c1,#0e1526),var(--c2,#1a2a4d) 140%)}
.cx-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 55%,rgba(255,255,255,.07) 58%,transparent 66%),linear-gradient(80deg,transparent 70%,rgba(255,255,255,.05) 72%,transparent 78%);pointer-events:none}
.cx-hero>*{position:relative}
.cx-hero-k{font:700 11px Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--acc,#b6f000)}
.cx-hero h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:40px;line-height:.95;letter-spacing:.02em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35),0 12px 30px rgba(0,0,0,.4)}
.cx-hero p{color:rgba(239,233,220,.85);font:500 15px/1.4 Inter;max-width:36ch}
.cx-hero .fb-btn.primary{background:var(--acc,#b6f000);border-color:var(--acc,#b6f000);color:#0a0f1c;align-self:flex-start}
.cx-hero-txt{display:flex;flex-direction:column;gap:10px}
.cx-hero-prog{display:flex;align-items:center;gap:10px;color:rgba(239,233,220,.8);font:600 12px Inter}
.cx-hero-prog .cx-progress{flex:1;background:rgba(0,0,0,.35)}.cx-hero-prog .cx-progress i{background:var(--acc,#b6f000)}

/* ---------- filtres, tuiles ---------- */
.cx-filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.cx-filters::-webkit-scrollbar{display:none}
.cx-chip{flex:0 0 auto;min-height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--line2);background:var(--card);color:var(--muted);font:700 13px Inter;display:inline-flex;align-items:center;gap:6px}
.cx-chip.on{color:var(--green-ink);background:var(--green);border-color:var(--green)}
.cx-tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.cx-tabs button{min-height:44px;padding:0 2px;font:700 14px Inter;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.cx-tabs button.on{color:var(--green);border-color:var(--green)}
.cx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cx-item{display:flex;flex-direction:column;gap:8px;padding:0 0 12px;border:1px solid var(--line);border-radius:14px;background:var(--card);position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.cx-item.owned{border-color:var(--line2)}.cx-item.equipped{border-color:var(--green)}.cx-item.retired,.cx-item.ended{opacity:.6}
.cx-item-view{height:150px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#1b2640,#0a0f1c 80%);border-bottom:1px solid var(--line)}
.cx-item-view::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.05) 43%,transparent 50%);pointer-events:none}
.cx-item-view .cx-avatar{width:84px;height:84px;font-size:22px}
.cx-item-view .cx-banner{position:absolute;inset:0;height:auto}
.cx-item-view .cx-card{padding:10px 12px;gap:2px;width:78%;min-height:110px;transform:rotate(-4deg)}
.cx-item-view .cx-card .k{font-size:26px}
.cx-item-view .cx-fxdot{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,var(--c1) 30%,var(--c2) 70%);box-shadow:0 0 28px var(--c1),0 0 60px var(--c2)}
.cx-item-view .cx-fxdot::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(255,255,255,.35);animation:cxSpin 12s linear infinite}
.cx-item-view .cx-title{font-size:15px;padding:10px 16px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(0,0,0,.35)}
.cx-item-body{display:flex;flex-direction:column;gap:6px;padding:0 12px}
.cx-item-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cx-item-name{font:800 14px Inter;line-height:1.25}
.cx-item-h .fb-link{font:700 12px Inter;color:var(--green);white-space:nowrap}
.cx-item-meta{display:flex;flex-wrap:wrap;gap:4px}
.cx-tag{font:700 10px Inter;letter-spacing:.05em;text-transform:uppercase;padding:3px 6px;border-radius:6px;background:var(--card2);color:var(--muted)}
.cx-tag.r-rare{color:#bfe9ff}.cx-tag.r-epic{color:#d6b8ff}.cx-tag.r-legendary{color:#f2c94c}
.cx-tag.a-earned{color:var(--green)}.cx-tag.a-hybrid{color:#f2c94c}.cx-tag.a-purchased{color:#4f7dff}
.cx-tag.merit{color:var(--fg);border:1px solid var(--line2)}
.cx-item-desc{color:var(--muted);font:500 12px/1.35 Inter}
.cx-progress{height:6px;border-radius:3px;background:var(--card2);overflow:hidden}
.cx-progress i{display:block;height:100%;background:var(--green);border-radius:3px}
.cx-progress-l{color:var(--muted);font:600 11px Inter}
.cx-item .fb-btn{min-height:44px;font-size:13px;padding:0 10px}
.cx-item .fb-btn.equip{border-color:var(--green);color:var(--green)}
.cx-item-badge{position:absolute;top:8px;right:8px;z-index:1;font:700 10px Inter;padding:3px 6px;border-radius:6px;background:var(--green);color:var(--green-ink)}
.cx-item-badge.owned{background:rgba(10,15,28,.85);color:var(--fg);border:1px solid var(--line2)}
.cx-empty{color:var(--muted);font:500 14px Inter;padding:16px;text-align:center;border:1px dashed var(--line2);border-radius:10px}
.cx-sec{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cx-sec small{color:var(--muted);font:600 12px Inter}

/* ---------- essayage (aperçu sur mon profil, sans équiper) ---------- */
.cx-modal{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,8,16,.72);backdrop-filter:blur(6px);padding:0}
.cx-modal[hidden]{display:none}
.cx-modal-in{width:100%;max-width:560px;max-height:92svh;overflow:auto;background:var(--bg2);border:1px solid var(--line2);border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;animation:fbRise .28s var(--ease) both}
.cx-modal-in>*{flex-shrink:0}   /* la scène Scout et les cartes gardent leur hauteur dans la modale défilante */
.cx-modal-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cx-modal-h b{font:800 16px Inter}.cx-modal-h small{color:var(--muted);font:600 12px Inter;display:block}
.cx-modal-x{min-width:44px;min-height:44px;border-radius:12px;border:1px solid var(--line2);font:700 18px Inter}
.cx-modal-acts{display:flex;gap:8px;flex-wrap:wrap}.cx-modal-acts .fb-btn{flex:1;min-width:140px}
.cx-try-note{color:var(--muted);font:500 12px Inter}

/* ---------- Season Pass ---------- */
.cx-pass-head{display:flex;flex-direction:column;gap:6px}
.cx-pass-head b{font:800 20px Inter}
.cx-pass-tracks{display:grid;grid-template-columns:36px 1fr 1fr;gap:8px;align-items:stretch}
.cx-pass-tracks .h{font:700 11px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 0}
.cx-tier-n{display:flex;align-items:center;justify-content:center;font-family:Anton,Impact,sans-serif;font-size:20px;color:var(--muted);border-right:1px solid var(--line)}
.cx-tier-n.reached{color:var(--green)}
.cx-tier{padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--card);display:flex;flex-direction:column;gap:6px;font:600 12px Inter}
.cx-tier.premium{background:var(--card2)}.cx-tier.owned{border-color:var(--green)}
.cx-tier .cx-item-view{height:70px;border-radius:8px;border:0}
.cx-tier .cx-item-view .cx-avatar{width:48px;height:48px;font-size:14px}
.cx-tier .cx-item-view .cx-card{min-height:56px;padding:6px 8px;width:86%}
.cx-tier .cx-item-view .cx-card .k{font-size:18px}
.cx-tier .cx-item-view .cx-title{font-size:11px;padding:6px 8px}
.cx-tier .fb-btn{min-height:40px;font-size:12px;padding:0 8px}
.cx-req{color:var(--muted);font:600 11px Inter}

/* ---------- collections & drops ---------- */
.cx-coll{display:flex;flex-direction:column;gap:12px}
.cx-coll-items{display:flex;gap:6px;flex-wrap:wrap}
.cx-coll-items span{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--c1,#16213a),var(--c2,#1f2b45));border:2px solid var(--line2);opacity:.45}
.cx-coll-items span.on{opacity:1;border-color:var(--green)}
.cx-drop{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.cx-drop .st{font:700 11px Inter;letter-spacing:.06em;text-transform:uppercase}
.cx-drop .st.open{color:var(--green)}.cx-drop .st.upcoming{color:#4f7dff}.cx-drop .st.ended{color:var(--muted)}
.cx-drop b{font:800 16px Inter}.cx-drop small{color:var(--muted);font:500 12px Inter}

/* ---------- effets de victoire (courts, non répétitifs) ---------- */
.cx-fx{position:fixed;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.cx-fx i{position:absolute;left:var(--x);top:-12px;width:8px;height:12px;background:var(--c);opacity:0;border-radius:2px}
.cx-fx.confetti i{animation:cxFall 1.6s ease-in var(--d) forwards}
@keyframes cxFall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(105vh) rotate(540deg)}}
.cx-fx.flame::before,.cx-fx.lights::before,.cx-fx.trophy::before{content:"";position:absolute;inset:0;opacity:0;animation:cxFlash 1.2s ease-out forwards}
.cx-fx.flame::before{background:radial-gradient(ellipse at 50% 100%,var(--c1) 0,transparent 60%)}
.cx-fx.lights::before{background:linear-gradient(100deg,transparent 35%,var(--c1) 40%,transparent 45%),linear-gradient(80deg,transparent 55%,var(--c2) 60%,transparent 65%)}
.cx-fx.trophy::before{background:radial-gradient(circle at 50% 40%,var(--c1) 0,transparent 45%)}
@keyframes cxFlash{0%{opacity:0}20%{opacity:.55}100%{opacity:0}}
.cx-fx.trophy::after{content:"🏆";position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.4);font-size:64px;animation:cxPop 1.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes cxPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}
@media (prefers-reduced-motion:reduce){.cx-fx i,.cx-fx::before,.cx-fx::after,.cx-avatar.fr.a-pulse,.cx-avatar.fr.a-spin::before,.cx-fxdot::after{animation:none!important}}

@media (max-width:340px){.cx-grid{grid-template-columns:1fr}.cx-pass-tracks{grid-template-columns:28px 1fr 1fr}.fb-nav.four a{font-size:9px}.cx-hero h2{font-size:32px}.cx-idcard-t b{font-size:24px}}
@media (min-width:700px){
  .cx-grid{grid-template-columns:repeat(3,1fr)}
  .cx-pass-tracks{grid-template-columns:44px 1fr 1fr}
  .cx-hero{flex-direction:row;align-items:center;gap:28px;padding:30px 28px}
  .cx-hero-txt{flex:1 1 0}.cx-hero .cx-idcard{flex:1 1 0;min-height:230px}
  .cx-hero h2{font-size:56px}
  .cx-modal{align-items:center;padding:24px}.cx-modal-in{border-radius:18px}
}
@media (min-width:1000px){.cx-grid{grid-template-columns:repeat(4,1fr)}.cx-hero h2{font-size:64px}}

/* ---------- Scout CR : chibi coach détouré + calques (sol → dos → corps → halo → visière), lueur. Aucun cercle sans halo équipé. ---------- */
.cx-scout{position:relative;width:var(--w,120px);aspect-ratio:3/5;flex:0 0 auto;isolation:isolate;--acc:#b6f000}
.cx-scout.v-inferno{--acc:#ff5d3d}.cx-scout.v-eclipse{--acc:#a56bff}.cx-scout.v-bitume{--acc:#ff7a1a}.cx-scout.v-chrome{--acc:#b6f000}
.cx-scout.big{--w:220px}
.cx-scout img,.cx-scout svg{position:absolute;display:block;pointer-events:none;user-select:none;image-rendering:auto}
.cx-scout .sc-floor{position:absolute;left:14%;right:14%;bottom:0;height:7%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,0) 70%);z-index:0}
.cx-scout .sc-body{inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;z-index:2;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.cx-scout .sc-back{right:-8%;top:38%;width:44%;max-height:36%;object-fit:contain;z-index:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.cx-scout .sc-halo{left:13%;top:-3%;width:74%;height:24%;object-fit:contain;object-position:50% 100%;z-index:3;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--halo,#fff) 70%,transparent))}
.cx-scout .sc-arcs{fill:none;stroke:var(--halo,#ff7a1a);stroke-width:5.5;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--halo,#ff7a1a))}
.cx-scout .sc-visor{position:absolute;left:21%;top:21%;width:57%;height:8%;border-radius:40%;background:var(--visor,#b6f000);mix-blend-mode:hue;z-index:4;pointer-events:none}
.cx-scout.visor::after{content:"";position:absolute;left:24%;top:22%;width:51%;height:6%;border-radius:40%;box-shadow:0 0 14px 2px color-mix(in srgb,var(--visor,#b6f000) 70%,transparent);z-index:3;pointer-events:none}
.cx-scout.mono .sc-visor{mix-blend-mode:saturation;background:#9a9a9a}
.cx-scout.glow::before{content:"";position:absolute;inset:4% 6% 4%;border-radius:50%;background:radial-gradient(circle at 50% 42%,var(--glow) 0,transparent 66%);opacity:.6;filter:blur(12px);z-index:0}
.cx-scout.glow .sc-body{filter:drop-shadow(0 14px 18px rgba(0,0,0,.45)) drop-shadow(0 0 14px var(--glow))}

/* héros Scout : scène + infos ; carte compacte dans le vestiaire, pleine largeur sur l'écran Scout */
.cx-scout-hero{position:relative;overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;
  background:radial-gradient(ellipse at 50% 22%,color-mix(in srgb,var(--acc,#b6f000) 26%,transparent),transparent 55%),linear-gradient(180deg,#121b30 0%,#0a0f1c 100%);box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.cx-scout-hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 44px);-webkit-mask:linear-gradient(180deg,transparent 30%,#000 100%);mask:linear-gradient(180deg,transparent 30%,#000 100%);pointer-events:none}
.cx-scout-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--acc,#b6f000),transparent);opacity:.7}
.cx-scout-hero-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;padding:34px 16px 10px}
.cx-scout-hero-info{position:relative;display:flex;flex-direction:column;gap:8px;padding:6px 18px 20px;text-align:center;align-items:center}
.cx-scout-hero-info h2{font-size:34px;letter-spacing:.06em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.6);overflow-wrap:anywhere}
.cx-scout-hero-info p{color:rgba(239,233,220,.78);font:500 13.5px/1.45 Inter;max-width:44ch}
.cx-scout-hero-info .cx-item-meta{justify-content:center}
.cx-scout-hero-info .fb-btn.primary{background:var(--acc,#b6f000);border-color:var(--acc,#b6f000);color:#0a0f1c;margin-top:4px}
.cx-scout-hero .cx-hero-k{color:var(--acc,#b6f000)}

/* éditeur : un bloc par emplacement, options en tuiles avec aperçu, état équipé net */
.cx-scout-editor{display:flex;flex-direction:column;gap:14px}
.cx-slot{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.cx-slot header{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cx-slot header b{font:800 14px Inter}
.cx-slot header small{color:var(--muted);font:600 12px Inter;text-align:right}
.cx-opts{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none;scroll-snap-type:x proximity}
.cx-opts::-webkit-scrollbar{display:none}
.cx-opt{flex:0 0 auto;width:88px;display:flex;flex-direction:column;gap:6px;align-items:center;scroll-snap-align:start;color:var(--muted)}
.cx-opt-v{width:88px;height:88px;border-radius:16px;border:1.5px solid var(--line2);background:radial-gradient(ellipse at 50% 30%,#1b2640,#0b1120 80%);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
.cx-opt-v img{max-width:80%;max-height:82%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.cx-opt-v img.halo{width:118%;max-width:none;height:100%;max-height:none;object-fit:cover;object-position:50% 10%;filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.cx-opt-l{font:700 11.5px/1.2 Inter;text-align:center;max-width:88px;overflow-wrap:anywhere}
.cx-opt.on{color:var(--fg)}
.cx-opt.on .cx-opt-v{border-color:var(--green);box-shadow:0 0 0 3px rgba(182,240,0,.22),0 10px 24px rgba(0,0,0,.4);transform:translateY(-2px)}
.cx-opt.on .cx-opt-v::after{content:"✓";position:absolute;right:6px;top:6px;width:20px;height:20px;border-radius:50%;background:var(--green);color:var(--green-ink);font:800 12px/20px Inter;text-align:center}
.cx-opt:focus-visible .cx-opt-v{outline:2px solid var(--green);outline-offset:2px}
.cx-opt-none{font:300 30px Inter;color:var(--muted)}
.cx-opt-p{font:700 10.5px Inter;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cx-opt-p.ok{color:var(--green)}
.cx-opt.locked .cx-opt-v{border-style:dashed;opacity:.85}
.cx-opt.locked .cx-opt-v img,.cx-opt.locked .cx-opt-swatch,.cx-opt.locked .cx-opt-arcs{filter:saturate(.5) brightness(.75)}
.cx-opt.locked .lk{position:absolute;right:6px;top:6px;font-size:12px;line-height:1;background:rgba(5,8,16,.75);border:1px solid var(--line2);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-style:normal}
.cx-opt.owned:not(.on) .cx-opt-v{border-color:rgba(182,240,0,.45)}
.cx-opt .cx-opt-v{transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.cx-opt:hover .cx-opt-v{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.4)}
.cx-opt:active .cx-opt-v{transform:translateY(0) scale(.97)}
.cx-opt-swatch{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,var(--c) 28%,color-mix(in srgb,var(--c) 55%,#000) 100%);box-shadow:0 0 0 3px rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.5)}
.cx-opt-swatch.glow{box-shadow:0 0 0 3px rgba(255,255,255,.08),0 0 22px 4px color-mix(in srgb,var(--c) 70%,transparent)}
.cx-opt-swatch.mono{background:radial-gradient(circle at 35% 30%,#fff 0,#dfe4ee 30%,#7a8496 100%)}
.cx-opt-arcs{width:64px;height:30px;display:block}.cx-opt-arcs svg{position:static;width:100%;height:100%}
.cx-item-view.scout{background:radial-gradient(ellipse at 50% 40%,#151d31,#070b14 80%);padding:14px 0 0;overflow:visible}
.cx-item-view.scout .cx-scout{--w:78px}
.cx-tier .cx-item-view.scout .cx-scout{--w:40px}

/* ---------- titres plaque : vrai texte HTML, badge CR en image ---------- */
.cx-title.s-plaque{display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 12px;border-radius:6px;color:var(--fg);letter-spacing:.08em;background:linear-gradient(180deg,#1a2133,#0a0f1c);border:1px solid var(--t);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.cx-title.s-plaque i{display:inline-block;width:22px;height:25px;background:center/cover no-repeat;flex:0 0 auto}
.cx-item-view .cx-title.s-plaque{font-size:13px;padding:10px 10px 10px 14px;border:1px solid var(--t)}
.cx-item-view .cx-title.s-plaque i{width:30px;height:34px}

/* ---------- bundles : fond réel de la collection (source mobile sans texte), chibi entier au premier plan, hiérarchie nette ---------- */
.cx-bundles{display:grid;grid-template-columns:1fr;gap:14px}
.cx-bundle{border:1px solid rgba(255,255,255,.1);border-radius:20px;background:var(--card);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.cx-bundle-cover{position:relative;height:210px;overflow:hidden;background-image:linear-gradient(180deg,rgba(5,8,16,.08) 0%,rgba(5,8,16,.15) 55%,var(--card) 100%),var(--bg,linear-gradient(135deg,var(--c1),var(--c2)));background-size:var(--zoom,cover);background-position:var(--pos,50% 50%);background-repeat:no-repeat;image-rendering:auto}
.cx-bundle-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 60%);pointer-events:none}
.cx-bundle-chibi{position:absolute;left:0;right:0;bottom:-2px;display:flex;justify-content:center;align-items:flex-end}
.cx-bundle-chibi .cx-scout{--w:112px}
.cx-bundle-k{position:absolute;left:14px;top:12px;font:700 11px Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);background:rgba(5,8,16,.62);padding:5px 9px;border-radius:6px;border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);backdrop-filter:blur(4px)}
.cx-bundle-body{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px}
.cx-bundle-body h3{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:32px;letter-spacing:.03em;text-transform:uppercase;line-height:1;color:#fff;text-wrap:balance}
.cx-bundle-body .tag{color:rgba(239,233,220,.8);font:500 14px/1.35 Inter;margin-top:-4px}
.cx-bundle-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.cx-bundle-price b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:34px;color:var(--acc,#b6f000);letter-spacing:.02em;line-height:1}
.cx-bundle-price s{color:var(--muted);font:600 14px Inter;text-decoration-thickness:1.5px}
.cx-bundle-price em{font:800 12px Inter;font-style:normal;color:#0a0f1c;background:var(--acc,#b6f000);padding:3px 8px;border-radius:6px}
.cx-bundle-price.big{padding:12px 0 0;border-top:1px solid var(--line)}
.cx-bundle-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(5,8,16,.35)}
.cx-bundle-list li{display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:8px;min-height:36px;padding:0 12px;font:600 12.5px Inter;border-bottom:1px solid var(--line)}
.cx-bundle-list li:last-child{border-bottom:0}
.cx-bundle-list li span{color:var(--muted);font:700 10.5px Inter;letter-spacing:.08em;text-transform:uppercase}
.cx-bundle-list li b{font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-bundle-list li i{font-style:normal;color:var(--green);font-weight:800}
.cx-bundle-list li i.n{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.cx-bundle-list li.own b{color:var(--green)}
.cx-bundle-acts{display:flex;gap:8px;flex-wrap:wrap}
.cx-bundle-acts .fb-btn{flex:1 1 150px;min-height:48px}
.cx-bundle-acts .fb-pill{align-self:center}
.cx-bundle .fb-btn.primary{background:var(--acc,#b6f000);border-color:var(--acc,#b6f000);color:#0a0f1c}
.cx-bundle-note{color:var(--muted);font:500 12px/1.4 Inter}
.cx-tag.own{color:var(--green);border:1px solid rgba(182,240,0,.35)}
.cx-brows{display:flex;flex-direction:column;gap:8px}
.cx-brow{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:10px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.cx-brow.own{border-color:rgba(182,240,0,.35)}
.cx-brow .cx-item-view{height:64px;border:0;border-radius:8px}
.cx-brow .cx-item-view .cx-avatar{width:40px;height:40px;font-size:12px}
.cx-brow .cx-item-view .cx-card{min-height:48px;padding:4px 6px;width:86%}.cx-brow .cx-item-view .cx-card .k{font-size:14px}
.cx-brow .cx-item-view .cx-title{font-size:8px;padding:4px 6px;max-width:100%;white-space:normal;text-align:center;line-height:1.2}.cx-brow .cx-item-view .cx-title.s-plaque{gap:4px;padding:4px 4px 4px 6px}.cx-brow .cx-item-view .cx-title.s-plaque i{width:12px;height:14px}
.cx-brow .cx-item-view.scout .cx-scout{--w:36px}
.cx-brow .cx-item-view .cx-fxdot{width:34px;height:34px}
.cx-brow .t{display:flex;flex-direction:column;gap:2px;min-width:0}.cx-brow .t b{font:700 13px Inter}.cx-brow .t small{color:var(--muted);font:500 11px Inter}
.cx-brow .fb-btn{min-height:40px;font-size:12px;padding:0 10px;white-space:nowrap}

/* ---------- effet Orbite (bundle Éclipse) ---------- */
.cx-fx.orbit::before{content:"";position:absolute;left:50%;top:42%;width:24vmin;height:24vmin;border-radius:50%;border:3px solid var(--c1);box-shadow:0 0 30px var(--c2),inset 0 0 20px var(--c2);opacity:0;animation:cxOrbit 1.5s ease-out forwards}
@keyframes cxOrbit{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(4)}}
@media (prefers-reduced-motion:reduce){.cx-fx.orbit::before{animation:none!important}}

@media (max-width:340px){.cx-scout.big{--w:180px}.cx-scout-hero-info h2{font-size:28px}.cx-bundle-body h3{font-size:27px}.cx-bundle-price b{font-size:30px}.cx-bundle-list li{grid-template-columns:64px 1fr auto;padding:0 10px}.cx-hero.img .cx-hero-txt{padding-top:96px}.cx-brow{grid-template-columns:60px 1fr;}.cx-brow>.fb-btn,.cx-brow>.fb-pill{grid-column:1/3}}
@media (min-width:700px){
  .cx-scout-hero{flex-direction:row;align-items:center}
  .cx-scout-hero-stage{flex:0 0 46%;padding:30px 20px 14px}
  .cx-scout-hero-info{flex:1 1 0;text-align:left;align-items:flex-start;padding:24px 28px 24px 4px}
  .cx-scout-hero-info .cx-item-meta{justify-content:flex-start}
  .cx-scout-hero-info h2{font-size:44px}
  .cx-scout.big{--w:280px}
  .cx-opt{width:104px}.cx-opt-v{width:104px;height:104px}.cx-opt-l{max-width:104px}
  .cx-bundles{grid-template-columns:repeat(2,1fr)}
  .cx-bundle-cover{height:250px}.cx-bundle-chibi .cx-scout{--w:136px}
  .cx-hero.img{min-height:300px}
}

/* ---------- boutons et états (page Vestiaire) : transformations seulement, aucun décalage de mise en page ---------- */
.cx-page .fb-btn{transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease),background-color .16s var(--ease),color .16s var(--ease);will-change:transform}
.cx-page .fb-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.35)}
.cx-page .fb-btn:active:not(:disabled){transform:translateY(0) scale(.97);box-shadow:0 3px 8px rgba(0,0,0,.3)}
.cx-page .fb-btn.primary:hover:not(:disabled){box-shadow:0 8px 22px color-mix(in srgb,var(--green) 32%,transparent)}
.cx-page .fb-btn[data-act="buy"]:not(:disabled),.cx-page .fb-btn[data-bbuy]:not(:disabled){box-shadow:0 0 0 0 color-mix(in srgb,var(--acc,var(--green)) 0%,transparent)}
.cx-page .fb-btn[data-act="buy"]:hover:not(:disabled),.cx-page .fb-btn[data-bbuy]:hover:not(:disabled){box-shadow:0 8px 22px color-mix(in srgb,var(--acc,var(--green)) 40%,transparent),0 0 0 1px color-mix(in srgb,var(--acc,var(--green)) 50%,transparent)}
.cx-page .fb-btn.equip:hover:not(:disabled){background:rgba(182,240,0,.08)}
.cx-page .fb-btn:focus-visible,.cx-page .fb-link:focus-visible,.cx-page .cx-chip:focus-visible,.cx-page .cx-tabs button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.cx-item{transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.cx-item.equipped{box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 1px rgba(182,240,0,.35)}
.cx-item-badge{transition:background-color .25s var(--ease),color .25s var(--ease)}
.cx-chip{transition:background-color .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}
@media (prefers-reduced-motion:reduce){.cx-page .fb-btn,.cx-opt .cx-opt-v,.cx-item,.cx-chip,.cx-item-badge{transition:none}.cx-page .fb-btn:hover:not(:disabled),.cx-page .fb-btn:active:not(:disabled),.cx-opt:hover .cx-opt-v,.cx-opt:active .cx-opt-v,.cx-opt.on .cx-opt-v{transform:none}}

/* ---------- Vestiaire réorganisé : en-tête compact, aperçu, résumé, personnalisation par onglets, bundles, toutes les pièces, replis ---------- */
.cx-locker{gap:16px}
.cx-h1{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cx-h1 h1{font-size:20px}
.cx-sum{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;width:100%;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(5,8,16,.45);overflow:hidden;text-align:left}
.cx-sum li{display:grid;grid-template-columns:minmax(70px,auto) 1fr auto;align-items:center;gap:10px;min-height:38px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.07);font-variant-numeric:tabular-nums}
.cx-sum li:last-child{border-bottom:0}
.cx-sum span{font:700 10.5px Inter;letter-spacing:.08em;text-transform:uppercase;color:rgba(239,233,220,.6)}
.cx-sum b{font:600 13px Inter;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-sum i{font:700 10px Inter;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cx-sum i.on{color:var(--green)}
.cx-scout-hero-info .cx-sum{margin-top:2px}
.cx-scout-hero-info .fb-btn.primary{width:100%;min-height:48px}
.cx-editor{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card);scroll-margin-top:12px}
.cx-slot-tabs .cx-chip{min-height:44px;padding:0 14px}
.cx-slot-tabs .cx-chip i{font-style:normal;margin-left:2px}
.cx-opts.swap{animation:cxSwap .26s var(--ease) both}
@keyframes cxSwap{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.cx-fold{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.cx-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 14px;font:700 14px Inter;color:var(--fg)}
.cx-fold>summary::-webkit-details-marker{display:none}
.cx-fold>summary::after{content:"+";font:300 22px/1 Inter;color:var(--muted);transition:transform .2s var(--ease)}
.cx-fold[open]>summary::after{transform:rotate(45deg)}
.cx-fold>summary small{margin-left:auto;margin-right:10px;color:var(--muted);font:600 12px Inter}
.cx-fold>summary:focus-visible{outline:2px solid var(--green);outline-offset:-3px}
.cx-fold-in{display:flex;flex-direction:column;gap:12px;padding:0 14px 14px}
.cx-item-more{border-top:1px dashed var(--line);padding-top:4px}
.cx-item-more>summary{list-style:none;cursor:pointer;font:700 12px Inter;color:var(--muted);min-height:32px;display:flex;align-items:center;gap:6px}
.cx-item-more>summary::-webkit-details-marker{display:none}
.cx-item-more>summary::before{content:"›";display:inline-block;transition:transform .2s var(--ease)}
.cx-item-more[open]>summary::before{transform:rotate(90deg)}
.cx-lazy{min-height:120px}
.cx-lazy:empty{border:1px dashed var(--line);border-radius:12px;background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(255,255,255,.02) 12px 24px)}
@media (prefers-reduced-motion:reduce){.cx-opts.swap{animation:none}.cx-fold>summary::after,.cx-item-more>summary::before{transition:none}}
@media (min-width:900px){
  .fb-main>section.narrow.cx-locker{max-width:1100px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 22px;align-items:start;grid-template-areas:"h1 h1" "hero editor" "hero profile" "bundles bundles" "all all" "lang about" "foot foot"}
  .cx-locker>.cx-h1{grid-area:h1}.cx-locker>.cx-scout-hero{grid-area:hero;align-self:stretch}
  /* Le héros vit dans la carte principale (colonne de ~520 px) : il s'empile, il ne se met pas en rangée — en rangée, la
     colonne d'infos tombait à 170 px et « Tenue Inferno » s'écrivait lettre par lettre. */
  .cx-locker .cx-scout-hero{flex-direction:column}
  .cx-locker>.cx-editor{grid-area:editor;align-self:start}.cx-locker>.cx-area-profile{grid-area:profile;align-self:start}.cx-locker>.cx-area-bundles{grid-area:bundles}.cx-locker>.cx-area-all{grid-area:all}
  .cx-locker>details:nth-of-type(2){grid-area:lang}.cx-locker>details:nth-of-type(3){grid-area:about}.cx-locker>.cx-legal{grid-area:foot}.cx-locker>.fb-foot{grid-area:foot;margin-top:24px}
  .cx-locker .cx-scout-hero-stage{flex:0 0 auto;padding:34px 20px 10px}
  .cx-locker .cx-scout-hero-info{text-align:center;align-items:center;padding:6px 22px 22px}
  .cx-locker .cx-scout-hero-info .cx-item-meta{justify-content:center}
  .cx-locker .cx-scout.big{--w:300px}
  .cx-locker .cx-opts{flex-wrap:wrap;overflow:visible}
}

/* Changement de pièce : le calque concerné apparaît en fondu, opacity et transform uniquement, jamais de reflux de mise en page. */
.cx-scout .sc-pop{animation:cxPop .18s var(--ease) both;will-change:opacity,transform}
@keyframes cxPop{from{opacity:.25;transform:scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cx-scout .sc-pop{animation:none;will-change:auto}}

/* ===========================================================================
   Direction visuelle des cartes cosmétiques — dernière passe
   Une carte d'objet doit répondre à trois questions d'un coup d'œil : qu'est-ce que c'est, est-ce que je l'ai, et
   combien ça coûte. Avant, la rareté était un mot, l'état une nuance de bordure, et le prix un bout de libellé
   collé au verbe du bouton. Mobile d'abord : à 320 px, deux colonnes donnaient des cartes de 140 px.
   =========================================================================== */
.cx-grid{grid-template-columns:1fr;gap:14px}
@media (min-width:361px){.cx-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media (min-width:760px){.cx-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.cx-grid{grid-template-columns:repeat(4,1fr)}}

/* La rareté devient une identité : un filet coloré en haut de la vignette, présent avant même de lire le mot. */
.cx-item{border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.34);gap:0;padding:0 0 14px}
.cx-item::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;background:var(--rar,var(--line2))}
.cx-item.r-common{--rar:#5b6b8a}
.cx-item.r-rare{--rar:#4f9dff}
.cx-item.r-epic{--rar:#a56bff}
.cx-item.r-legendary{--rar:#ffb020}
.cx-item.equipped{border-color:var(--green);box-shadow:0 10px 30px rgba(0,0,0,.34),0 0 0 1px var(--green) inset}
.cx-item.locked .cx-item-view{filter:saturate(.5) brightness(.62)}
.cx-item.locked .cx-item-name{color:var(--muted)}

/* La vignette respire : plus haute sur mobile, fond plus profond, halo doux au centre, et plus de reflet oblique
   — il traversait l'illustration en diagonale et donnait un aspect « capture d'écran de jeu ». */
.cx-item-view{height:172px;background:radial-gradient(ellipse at 50% 38%,#1d2a47 0%,#0c1220 72%)}
.cx-item-view::before{background:radial-gradient(ellipse at 50% 120%,rgba(0,0,0,.55),transparent 60%)}
@media (min-width:361px){.cx-item-view{height:150px}}

/* Les trois états, lisibles sans lire. */
.cx-item-badge{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:999px;font:800 10.5px Inter;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(10,15,28,.82);backdrop-filter:blur(6px);border:1px solid var(--line2);color:var(--muted)}
.cx-item-badge svg{width:12px;height:12px}
.cx-item-badge.on{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.cx-item-badge.owned{color:var(--green);border-color:var(--green)}
.cx-item-badge.locked{padding:6px;color:var(--muted)}
.cx-item-badge.locked svg{width:14px;height:14px}

/* Le nom et le prix sur la même ligne, le prix en chiffres alignés : on compare deux cartes sans les lire en entier. */
.cx-item-body{padding:12px 13px 0;display:flex;flex-direction:column;gap:9px}
/* Nom et prix sur une ligne quand ils y tiennent ; sinon le prix descend sous le nom, calé à droite. Le nom ne se
   coupe jamais au milieu d'un mot (« Carb/one/noir ») : on l'écrit en entier, mot par mot. */
.cx-item-h{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 8px}
.cx-item-name{font:800 14.5px Inter;line-height:1.25;flex:1 1 auto;overflow-wrap:normal;word-break:normal}
.cx-price{margin-left:auto;flex:0 0 auto;padding:4px 9px;border-radius:999px;border:1px solid var(--line2);
  background:var(--bg2);font:800 12.5px Inter;font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap}
.cx-item-meta{gap:5px}
.cx-item-meta .cx-tag{font-size:10.5px;padding:3px 7px}
.cx-item-more summary{font-size:11.5px;color:var(--muted);min-height:32px;display:flex;align-items:center}

/* Les actions : la principale d'abord, pleine largeur, 44 px. L'aperçu devient un bouton discret, pas un lien perdu
   dans l'en-tête de la carte. */
.cx-item-acts{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.cx-item-acts .fb-btn{width:100%;min-height:44px;justify-content:center}
/* Un bouton discret reste un bouton : 44 px, comme tous les autres. */
.cx-item-acts .fb-btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);min-height:44px;font-size:12.5px}
.cx-item-acts .fb-btn.ghost:hover,.cx-item-acts .fb-btn.ghost:focus-visible{color:var(--green);border-color:var(--green)}
/* Les deux boutons restent EMPILÉS quelle que soit la largeur d'écran : la carte, elle, ne fait jamais plus de
   180 px dans une grille à deux colonnes, et « Aperçu » y était coupé en « Ape… ». La largeur de l'écran ne dit
   rien de la largeur de la carte. */
.cx-item-acts .fb-btn{flex:0 0 auto}

/* Ensembles : même famille — prix en pastille, remise lisible, bouton d'action pleine largeur. */
.cx-bundle{border-radius:18px}
.cx-bundle-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cx-bundle-price b{font:800 20px Inter;font-variant-numeric:tabular-nums}
.cx-bundle-price s{color:var(--muted);font-size:13px}
.cx-bundle-price em{font-style:normal;font:800 11.5px Inter;letter-spacing:.04em;padding:3px 8px;border-radius:999px;
  background:rgba(182,240,0,.14);color:var(--green)}
/* En colonne, le `flex:1 1 150px` hérité du mode ligne signifie « grandis EN HAUTEUR à partir de 150 px » : les deux
   boutons occupaient trois cents pixels chacun. On remet une base automatique tant qu'on empile. */
.cx-bundle-acts{display:flex;flex-direction:column;gap:8px}
.cx-bundle-acts .fb-btn{flex:0 0 auto;width:100%;min-height:46px;justify-content:center}
@media (min-width:520px){.cx-bundle-acts{flex-direction:row}.cx-bundle-acts .fb-btn{flex:1 1 0;width:auto}}

/* Paliers du Season Pass : même vocabulaire de vignette et d'état que les cartes d'objet. */
.cx-tier{border-radius:14px}
.cx-tier .cx-item-view,.cx-tier .fb-btn{border-radius:12px}
.cx-tier.owned{border-color:var(--green)}

@media (prefers-reduced-motion:reduce){.cx-item,.cx-bundle{transition:none}}

/* Les pastilles de filtre sont des cibles tactiles comme les autres : 44 px, pas 40. */
.cx-chip{min-height:44px}

/* ==================================================================================================================
   DIRECTION ARTISTIQUE v2 — le vestiaire et la boutique
   Les references de boutique posent toutes la meme lecture : d'abord la PIECE en grand, ensuite son NOM, puis sa
   RARETE en capitales colorees, enfin son PRIX ou son etat. La carte precedente donnait le meme poids aux quatre.
   Ici la rarete teinte le fond de la vitrine, borde la carte et colore son libelle — mais elle est toujours ecrite.
   ================================================================================================================== */
.cx-item{border-radius:20px;border:1px solid rgba(255,255,255,.08);padding:0 0 14px;gap:10px;
  background:linear-gradient(178deg,#101C31,#0A1220 72%);box-shadow:0 14px 34px -18px rgba(0,0,0,.9)}
.cx-item::before{height:0}
/* La vitrine : lueur de rarete derriere la piece, plus large en haut, eteinte en bas. */
.cx-item-view{height:172px;border-bottom:1px solid rgba(255,255,255,.06);
  background:radial-gradient(120% 92% at 50% 6%, color-mix(in srgb, var(--rar,#5b6b8a) 34%, transparent), transparent 62%),
             radial-gradient(ellipse at 50% 34%, #16223A, #070C16 82%)}
.cx-item-view::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--rar,#5b6b8a),transparent);opacity:.85}
.cx-item.equipped{border-color:rgba(200,240,74,.55);box-shadow:0 14px 34px -18px rgba(0,0,0,.9),0 0 0 1px rgba(200,240,74,.28)}
.cx-item.owned{border-color:rgba(255,255,255,.14)}
.cx-item-body{gap:8px;padding:0 14px}
.cx-item-name{font:800 15px/1.25 Inter;letter-spacing:-.015em}
/* La rarete se lit comme un libelle, pas comme une pastille de plus : capitales espacees, couleur du rang. */
.cx-item-meta .cx-tag.r-common,.cx-item-meta .cx-tag.r-rare,.cx-item-meta .cx-tag.r-epic,.cx-item-meta .cx-tag.r-legendary{
  background:none;border:0;padding:0 8px 0 0;font:800 10.5px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--rar)}
.cx-item.r-common .cx-item-meta .cx-tag.r-common{color:#8B9AB8}
.cx-item.r-rare .cx-item-meta .cx-tag.r-rare{color:#6FB2FF}
.cx-item.r-epic .cx-item-meta .cx-tag.r-epic{color:#BE8CFF}
.cx-item.r-legendary .cx-item-meta .cx-tag.r-legendary{color:#FFC44D}
/* Le prix devient un jeton : rond, contraste, lisible d'un coup d'oeil dans la grille. */
.cx-price{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  border:1px solid rgba(245,185,66,.42);background:rgba(245,185,66,.10);
  font:800 12.5px Inter;color:var(--amber);white-space:nowrap;font-variant-numeric:tabular-nums}
.cx-price::before{content:"";width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%,#FFE08A,#E09A18);box-shadow:0 0 0 1px rgba(245,185,66,.45)}
.cx-item-badge{top:10px;right:10px;padding:5px 10px;border-radius:999px;font:800 10px Inter;letter-spacing:.08em;
  display:inline-flex;align-items:center;gap:5px}
.cx-item-badge svg{width:12px;height:12px}
.cx-item-badge.owned{background:rgba(5,10,20,.82);border-color:rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.cx-item-badge.locked{background:rgba(5,10,20,.82);color:var(--muted);border:1px solid rgba(255,255,255,.16)}

/* La grande vitrine de collection : titre d'affiche, progression, et la piece qui deborde du cadre. */
.cx-hero{border-radius:22px;padding:24px 18px;border-color:rgba(255,255,255,.11)}
.cx-hero h2{font-family:Inter,-apple-system,sans-serif;font-weight:800;text-transform:none;letter-spacing:-.032em;line-height:1.03}
.cx-hero-k{font:800 9.5px Inter;letter-spacing:.2em;text-transform:uppercase}
.cx-progress{height:7px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.10)}
.cx-progress i{background:linear-gradient(90deg,var(--acc,#C8F04A),#E4FF8F);border-radius:999px}

/* Vestiaire : les casiers derriere la scene, comme dans les references. */
.fb-hd[data-art="vestiaire"] .fb-hd-art::after{background-image:
  repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 54px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 40px);
  opacity:.8;mask-image:linear-gradient(180deg,#000,transparent 82%)}

@media (max-width:340px){
  .cx-item-view{height:150px}
  .cx-item-name{font-size:14px}
  .cx-price{font-size:11.5px;padding:5px 9px}
}

/* ---------- Aucun nom coupe sous 400 px ----------
   La ligne « emplacement · piece · etat » tenait sur une seule ligne : a 320 px, « Tenue Inferno » devenait
   « Tenue I… ». Le nom passe donc sous son emplacement et dispose de toute la largeur. */
@media (max-width:400px){
  .cx-sum li{grid-template-columns:1fr auto;grid-template-areas:"slot etat" "nom nom";gap:2px 10px;
    min-height:auto;padding:9px 12px}
  .cx-sum span{grid-area:slot}
  .cx-sum i{grid-area:etat}
  .cx-sum b{grid-area:nom;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.32}
}
/* Une rangee qui defile doit se voir defiler : un fondu au bord vaut mieux qu'un mot coupe net. */
.cx-slot-tabs,.cx-tabs{position:relative;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,#000 0 calc(100% - 26px),transparent)}
.cx-slot-tabs::-webkit-scrollbar,.cx-tabs::-webkit-scrollbar{display:none}

/* Zones tactiles : une pastille de filtre courte (« Tout ») tombait a 35 px de large. */
.cx-chip,.cx-tabs button,.cx-slot-tabs .cx-chip{min-width:44px;justify-content:center}
/* Les onglets ne rétrécissent jamais : avec « min-width:44px » et un rétrécissement autorisé, chaque onglet tombait à 44 px et
   « Bannières » débordait sur « Titres » dès 390 px. La rangée défile, les onglets gardent leur largeur. */
.cx-tabs button{min-height:44px;padding:0 14px;border-radius:999px;flex:0 0 auto}
/* Aucun nom de piece rogne, a aucune largeur : la colonne se plie, le texte non. */
.cx-sum b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;overflow-wrap:anywhere}
.cx-bundle-list li b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}


/* ==================================================================================================================
   COSMETIQUES PREMIUM v2 — vitrines Retina, couverture de bundle, heros du pass, retour tactile
   ================================================================================================================== */
.cx-item-view.photo img{width:100%;height:100%;object-fit:contain}
.cx-item-view.photo.wide img{object-fit:cover}
.cx-item-view.photo:focus-visible{outline:2px solid var(--green);outline-offset:-3px}
@media (hover:hover){.cx-item:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18)}}
.cx-item:active{transform:scale(.99)}
/* La couverture composee porte deja le fond et le personnage : la carte ne rajoute rien par-dessus. */
.cx-bundle-cover.img{height:auto;aspect-ratio:3/2;background-image:none;background:var(--card)}
.cx-bundle-cover.img::before{display:none}
.cx-bundle-cover.img .cx-bundle-img{display:block;width:100%;height:100%;object-fit:cover}
.cx-bundle-cover.img .cx-bundle-k{background:rgba(5,8,16,.72);padding:5px 9px;border-radius:999px}
/* Le visuel du Season Pass ouvre l'ecran, plein bord, avant les chiffres. */
.cx-pass-hero{margin:0 calc(var(--pad) * -1) 4px;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg2)}
.cx-pass-hero img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;max-height:340px}
/* Heros de collection : la version bureau (2200 px) des que la place le permet, la version mobile sinon. */
@media (min-width:700px){.cx-hero.img{background-image:linear-gradient(90deg,var(--c1,#0a0f1c) 0%,var(--c1,#0a0f1c) 30%,rgba(5,8,16,.55) 52%,rgba(5,8,16,.12) 100%),var(--bgd,var(--bg))}}
@media (prefers-reduced-motion:reduce){.cx-item:hover,.cx-item:active{transform:none;transition:none}}
/* Titre « dégradé » dans une vitrine : la boîte sombre de la vitrine repeignait le fond derrière le texte découpé,
   et le titre (« Membre fondateur ») devenait invisible. Le dégradé reprend la main sur le texte, la bordure reste. */
.cx-item-view .cx-title.s-gradient{background:linear-gradient(90deg,var(--t),#efe9dc);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ==================================================================================================================
   HARMONIE DU LOOK — panneau de note, looks recommandes, badges de tuile. Discret, jamais bloquant, 180 ms max.
   ================================================================================================================== */
.cx-harm{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(5,8,16,.45);--hc:var(--muted)}
.cx-harm.n-faible{--hc:#F5B942;border-color:rgba(245,185,66,.35)}
.cx-harm.n-correcte{--hc:#8FA0BC}
.cx-harm.n-bonne{--hc:#7dd3fc}
.cx-harm.n-excellente{--hc:var(--green);border-color:rgba(200,240,74,.35)}
.cx-harm-top{display:flex;align-items:center;gap:10px;min-height:24px}
.cx-harm-k{font:800 10.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,233,220,.6)}
.cx-harm-meter{display:inline-flex;gap:3px;flex:0 0 auto}
.cx-harm-meter i{width:16px;height:6px;border-radius:3px;background:rgba(255,255,255,.1);transition:background-color .18s var(--ease)}
.cx-harm.n-faible .cx-harm-meter i:nth-child(-n+1),.cx-harm.n-correcte .cx-harm-meter i:nth-child(-n+2),.cx-harm.n-bonne .cx-harm-meter i:nth-child(-n+3),.cx-harm.n-excellente .cx-harm-meter i{background:var(--hc)}
.cx-harm-note{font:800 13px Inter;color:var(--hc);margin-left:auto;letter-spacing:.02em}
.cx-harm-why{margin:0;font:500 12.5px/1.45 Inter;color:rgba(239,233,220,.78);text-wrap:pretty}
.cx-harm-acts{display:flex}
.cx-harm-btn{min-height:44px;width:100%;border-color:rgba(245,185,66,.5);color:#F5B942;font-weight:800}
.cx-harm-btn:hover{background:rgba(245,185,66,.1)}
/* looks recommandes : une rangee de puces, 44 px, pastille a la couleur du monde */
.cx-looks{display:flex;flex-direction:column;gap:6px}
.cx-looks-k{font:800 10.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,233,220,.6)}
.cx-looks-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;align-items:center}
.cx-looks-row::-webkit-scrollbar{display:none}
/* bandes horizontales : un voile a droite (ou a gauche) tant qu'il reste des tuiles hors champ — la derniere ne semble plus coupee */
.cx-hscroll.can-r,.cx-opts.can-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.cx-hscroll.can-l.can-r,.cx-opts.can-l.can-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.cx-hscroll.can-l:not(.can-r),.cx-opts.can-l:not(.can-r){-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.cx-look{min-height:44px;gap:8px;padding:0 14px 0 12px}
.cx-look i{width:10px;height:10px;border-radius:50%;background:var(--c,#94a0b8);box-shadow:0 0 0 2px rgba(255,255,255,.12);flex:0 0 auto}
.cx-look.on{background:var(--card2);color:var(--fg);border-color:var(--c,#94a0b8);box-shadow:inset 0 0 0 1px var(--c,#94a0b8)}
/* badges de tuile : « Recommande » en lime, « harmonie faible » en ambre, une ligne de 10 px, jamais un cadenas */
.cx-opt-h{display:block;min-height:12px;font:800 9.5px/12px Inter;letter-spacing:.06em;text-transform:uppercase;color:transparent;text-align:center;transition:color .18s var(--ease)}
.cx-opt.rec .cx-opt-h{color:var(--green)}
.cx-opt.weak .cx-opt-h{color:#F5B942}
.cx-opt.weak .cx-opt-v{border-color:rgba(245,185,66,.45)}
.cx-opt.weak .cx-opt-v::before{content:"";position:absolute;left:6px;top:6px;width:8px;height:8px;border-radius:50%;background:#F5B942;box-shadow:0 0 0 2px rgba(5,8,16,.7)}
.cx-opt.rec:not(.on) .cx-opt-v{border-color:rgba(200,240,74,.55)}
/* resume du heros : la ligne Harmonie */
.cx-sum li.cx-sum-h b{color:var(--fg)}
.cx-sum li.cx-sum-h i{width:10px;height:10px;border-radius:50%;justify-self:end;background:var(--muted)}
.cx-sum li.cx-sum-h i.n-faible{background:#F5B942}.cx-sum li.cx-sum-h i.n-bonne{background:#7dd3fc}.cx-sum li.cx-sum-h i.n-excellente{background:var(--green);box-shadow:0 0 8px rgba(200,240,74,.6)}
@media (prefers-reduced-motion:reduce){.cx-harm-meter i,.cx-opt-h{transition:none}}