:root{
  --bg:#0b0b0c; --panel:#141516; --panel2:#1b1d1e; --line:#242728; --text:#f2f4f3; --muted:#8a9190;
  --accent:#ff4757; --accent-rgb:255,71,87; --accent-bg:rgba(var(--accent-rgb),.14); --btn-a:#ff4d5e; --btn-b:#d91f33;
  --display:"Outfit",system-ui,sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{overflow-x:hidden;overscroll-behavior-y:none}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--body)}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}
h1{font-family:var(--display);font-weight:700;font-size:34px;margin:0;letter-spacing:-.3px}

.app{display:flex;min-height:100vh}
.side{width:208px;flex:none;border-right:1px solid var(--line);padding:22px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);padding:0 10px 22px}
.brand .mark,.auth-brand .mark{width:30px;height:30px;flex:none;display:block}
.wm{font-weight:500;font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:#c9ced2;white-space:nowrap}
.wm b{font-weight:800;color:#fff}
.menu{display:flex;flex-direction:column;gap:4px}
.menu button,.menu .soon{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;color:var(--muted);
  padding:12px 14px;border-radius:12px;font-size:14px;font-weight:600}
.menu button:hover{color:var(--text);background:var(--panel)}
.menu button.on{color:var(--accent);background:var(--accent-bg)}
.menu button.on::after{content:"";margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.menu .soon{opacity:.38;cursor:default}
.menu .soon em{margin-left:auto;font-style:normal;font-size:10px;border:1px solid var(--line);border-radius:99px;padding:2px 7px}
.menu svg,.tabs svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:flex-end;align-items:center;padding:14px 22px;min-height:56px}
.mobile-brand{display:none;padding:0;margin-right:auto}
.coins{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:6px 14px 6px 8px;font-weight:700;font-size:14px;color:var(--accent)}
.coins i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe08a,#d9961a);display:block;box-shadow:inset 0 0 0 2px rgba(0,0,0,.18)}
main{flex:1;padding:0 28px 60px}
.view{display:none}.view.active{display:block}

/* ---------- Paquets ---------- */
.stage{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:6px}
.sub{color:var(--muted);margin:6px 0 4px;font-size:14px}
.link{background:none;border:0;color:var(--accent);font-size:12px;padding:4px;margin-bottom:34px}
.link:hover{text-decoration:underline}

.pack{position:relative;width:150px;height:222px;border:0;padding:0;background:none;filter:drop-shadow(0 0 30px rgba(var(--accent-rgb),.38));transition:transform .25s,filter .25s}
.pack:hover:not(:disabled){transform:translateY(-6px) rotate(-1.2deg);filter:drop-shadow(0 0 40px rgba(var(--accent-rgb),.55))}
.pack:disabled{filter:grayscale(1) brightness(.55);cursor:not-allowed}
.pouch{position:absolute;inset:0;border-radius:6px;overflow:hidden;
  background:radial-gradient(circle at 50% 46%,rgba(var(--accent-rgb),.42),transparent 62%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 7px),
    linear-gradient(90deg,#150609 0,#3d1019 14%,#240a10 50%,#3d1019 86%,#150609 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pouch::before,.pouch::after{content:"";position:absolute;left:0;right:0;height:17px;z-index:2;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 2px,rgba(0,0,0,.5) 2px 5px)}
.pouch::before{top:0}.pouch::after{bottom:0}
.wheel{display:none;position:absolute;width:52px;height:52px;border-radius:50%;border:10px solid var(--c);opacity:.85;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}
.wheel::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--c);opacity:.55}
.w1{--c:#b8a3f0;left:-8px;top:18px}.w2{--c:#ff9aa6;right:-14px;top:36px}.w3{--c:#ffc78a;left:-6px;top:84px}
.w4{--c:#ff9fb8;right:-10px;bottom:20px}.w5{--c:#8fc4ff;left:22px;bottom:12px}.w6{--c:#ffe27a;right:22px;top:-4px}
.shine{position:absolute;inset:-60% -30%;z-index:3;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);animation:shine 4.5s infinite}
@keyframes shine{0%,60%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
.badge{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:4;color:#fff;font-family:var(--display);filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}
.badge svg{width:88px;height:88px;display:block}
.badge i{font-style:normal;font-weight:800;font-size:11px;letter-spacing:.32em;padding-left:.32em;opacity:.92}
.pack.shake{animation:shake .9s ease-in-out}
@keyframes shake{0%,100%{transform:rotate(0)}15%{transform:rotate(-5deg) scale(1.03)}30%{transform:rotate(5deg) scale(1.05)}
  45%{transform:rotate(-6deg) scale(1.07)}60%{transform:rotate(6deg) scale(1.08)}80%{transform:rotate(-3deg) scale(1.1)}100%{transform:scale(1.12);filter:drop-shadow(0 0 80px #fff)}}
.pack-label{background:none;border:0;cursor:pointer;margin:22px 0 30px;padding:6px 20px;font-family:var(--display);font-weight:700;font-size:20px;color:var(--accent)}
.status{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 26px;min-width:170px}
.count{font-family:var(--display);font-size:20px;font-weight:700;color:var(--muted)}
.count b{color:var(--accent)}
.count-label{font-size:11px;color:var(--muted);margin-top:2px}
.next{font-size:11px;color:var(--muted);margin-top:4px;min-height:14px}
.next b{color:var(--accent);font-family:ui-monospace,Consolas,monospace}

/* ---------- Visionneuse ---------- */
.viewer{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:4px}
.v-count{font-size:12px;color:var(--muted)}
.v-count b{color:var(--accent);font-size:15px}
.v-stage{position:relative;width:min(300px,78vw);perspective:1000px}
.v-card{position:relative;z-index:2}
.v-card.in{animation:cardIn .55s cubic-bezier(.2,.9,.3,1.1)}
@keyframes cardIn{from{transform:rotateY(-85deg) scale(.85);opacity:0}to{transform:none;opacity:1}}
.v-glow{position:absolute;inset:-40%;z-index:0;opacity:0;pointer-events:none;border-radius:50%;filter:blur(30px);transition:opacity .4s}
.v-stage[data-r="SR"] .v-glow{background:radial-gradient(circle,rgba(255,110,190,.55),transparent 62%);opacity:1}
.v-stage[data-r="UR"] .v-glow{background:radial-gradient(circle,rgba(255,170,50,.7),transparent 62%);opacity:1}
.v-stage[data-r="S"] .v-glow{background:conic-gradient(from 0deg,#00e5ff,#ff2bd6,#7a5cff,#00e5ff);opacity:.75;animation:spin 3.5s linear infinite}
.v-stage[data-r="L"] .v-glow{background:conic-gradient(from 0deg,#ffd76a,#ff8fd1,#7fb8ff,#7ff0c2,#ffd76a);opacity:.6;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.v-info{min-height:50px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px}
.tag{display:inline-block;border-radius:99px;padding:4px 12px;font-size:12px;font-weight:700}
.tag.new{background:var(--accent-bg);color:var(--accent)}
.tag.dup{background:rgba(255,184,77,.14);color:#ffb84d}
.v-nav{display:flex;align-items:center;gap:16px}
.round{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:22px;line-height:1}
.round:disabled{opacity:.3;cursor:default}
.dots{display:flex;gap:8px}
.dots i{width:7px;height:7px;border-radius:50%;background:#3a3e3f;transition:.2s}
.dots i.on{background:var(--accent);transform:scale(1.25)}
.btn{background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:#fff;border:0;border-radius:12px;padding:13px 30px;font-weight:700;font-size:15px}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.btn.sm{padding:9px 16px;font-size:13px;border-radius:10px}
.btn:disabled{opacity:.45;cursor:default}

/* ---------- Cartes ---------- */
/* Cadre dégradé selon la rareté (--f1/--f2), photo pleine largeur, nom + marque + année en bas. Pas de stats. */
.card{--f1:#9aa8a1;--f2:#5f6c66;--acc:#c5d0ca;--tint:#1b2420;--bg:#121615;
  position:relative;width:100%;aspect-ratio:5/7;border-radius:7.5% / 5.4%;overflow:hidden;container-type:inline-size;
  background:var(--bg);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.45);isolation:isolate}
.r-pc{--f1:#79b4f7;--f2:#2f6fc4;--acc:#8fc2fa;--tint:#14202e;--bg:#0f141b}
.r-r{--f1:#b79cf8;--f2:#6a43d6;--acc:#c3adfa;--tint:#1e1733;--bg:#130f1e}
.r-sr{--f1:#ff8cc7;--f2:#d1307f;--acc:#ff9fd0;--tint:#33121f;--bg:#1b0d14}
.r-ur{--f1:#ffc15e;--f2:#ee6a14;--acc:#ffb35c;--tint:#3a200a;--bg:#1d1008}
.r-l{--f1:#ffe27a;--f2:#ff9ee0;--acc:#ffd36e;--tint:#352a0a;--bg:#1a1405}
.r-s{--f1:#00e5ff;--f2:#ff2bd6;--acc:#7df9ff;--tint:#0d1a2e;--bg:#06080d}
/* le cadre est un anneau dégradé (pseudo-élément) : « cqw » se calcule ainsi sur la carte elle-même */
.card::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:inherit;padding:2.2cqw;
  background:linear-gradient(145deg,var(--f1),var(--f2) 55%,var(--f1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.r-s::after{background:linear-gradient(120deg,#00e5ff,#ff2bd6,#7a5cff,#00e5ff,#ff2bd6);background-size:300% 300%;animation:iri 3.5s linear infinite}
.r-l::after{background:linear-gradient(120deg,#ffe27a,#ff9ee0,#8fd0ff,#b6ffd6,#ffe27a);background-size:300% 300%;animation:iri 6s linear infinite}
@keyframes iri{to{background-position:300% 0}}
.r-sr::before,.r-ur::before,.r-l::before,.r-s::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.7) 48%,transparent 66%);background-size:260% 100%;animation:holo 4.5s linear infinite}
@keyframes holo{from{background-position:160% 0}to{background-position:-110% 0}}
.r-pc{box-shadow:0 10px 30px rgba(60,130,230,.28)}
.r-r{box-shadow:0 10px 32px rgba(130,90,240,.34)}
.r-sr{box-shadow:0 10px 36px rgba(245,100,180,.42)}
.r-ur{box-shadow:0 10px 40px rgba(255,150,40,.52)}
.r-l{box-shadow:0 10px 46px rgba(255,205,100,.6)}
.r-s{box-shadow:0 10px 50px rgba(0,229,255,.55),0 0 30px rgba(255,43,214,.35)}

.c-img{position:relative;height:66%;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.08),transparent 60%),linear-gradient(160deg,var(--tint),var(--bg));overflow:hidden}
.c-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to bottom,transparent,var(--bg));z-index:1;pointer-events:none}
.c-img img{animation:fade .4s;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block}
.ph{position:absolute;inset:0;display:grid;place-items:center}
.ph svg{width:34%;opacity:.35}
.chip{position:absolute;left:4cqw;top:4cqw;z-index:3;display:flex;align-items:center;gap:1.8cqw;background:rgba(10,12,12,.62);backdrop-filter:blur(4px);color:var(--acc);font-weight:800;font-size:4.4cqw;
  padding:1.2cqw 3cqw 1.2cqw 2.4cqw;border-radius:99px;letter-spacing:.3px;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.chip i{width:2.6cqw;height:2.6cqw;border-radius:50%;background:linear-gradient(135deg,var(--f1),var(--f2));box-shadow:0 0 2.6cqw var(--f1)}
.star{position:absolute;right:3.5cqw;top:3.5cqw;z-index:3;width:9.5cqw;height:9.5cqw;border:0;border-radius:50%;background:rgba(0,0,0,.4);display:grid;place-items:center;padding:0;color:#fff}
.star svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.star.on{color:#ffcf4d}.star.on svg{fill:currentColor}
.c-body{position:relative;z-index:2;height:34%;padding:0 5.5cqw 4.4cqw;display:flex;flex-direction:column;justify-content:flex-end;gap:1.2cqw;background:linear-gradient(180deg,var(--bg),var(--tint))}
.c-brand{font-size:4.2cqw;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--acc);opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-name{font-family:var(--display);font-weight:800;font-size:7.6cqw;line-height:1.1;letter-spacing:-.1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-year{font-size:4.6cqw;font-weight:600;opacity:.62;margin-top:.6cqw}

/* ---------- Collection ---------- */
.col-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.col-meta{color:var(--muted);font-size:13px}
.progress{height:6px;background:var(--panel);border-radius:9px;overflow:hidden;margin:12px 0 16px}
#progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ff8fa0,#f59ac7,#ffb84d);transition:width .5s}
.tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
#search,#all-search{flex:1;min-width:200px;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--text);padding:12px 16px;font-size:14px;outline:none;font-family:inherit}
#search:focus,#all-search:focus{border-color:var(--accent)}
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:3px;overflow-x:auto}
.seg button{border:0;background:none;color:var(--muted);padding:9px 14px;border-radius:9px;font-size:13px;font-weight:600;white-space:nowrap}
.seg button.on{background:var(--panel2);color:var(--text)}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pill{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:99px;padding:6px 12px;font-size:12px;font-weight:700}
.pill.on{color:var(--text);border-color:#4a4f50}
.pill small{opacity:.7;font-weight:600;margin-left:4px}
.pill[data-r="PC"]{color:#8fbbf0}.pill[data-r="R"]{color:#b7a0f2}.pill[data-r="SR"]{color:#f58cc0}.pill[data-r="UR"]{color:#ffb050}.pill[data-r="L"]{color:#ffd36e}.pill[data-r="S"]{color:#7df9ff}
.pill.on[data-r]{background:var(--panel2)}
.sellbar{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;background:rgba(255,184,77,.08);border:1px solid rgba(255,184,77,.25);
  border-radius:14px;padding:12px 16px;margin-bottom:18px;font-size:13px;color:#ffcf8a}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px}
.slot{position:relative;cursor:pointer;transition:transform .2s}
.slot:hover{transform:translateY(-4px)}
.slot.locked{cursor:default}.slot.locked:hover{transform:none}
.slot.locked .card{filter:grayscale(1) brightness(.28);box-shadow:none}
.slot.locked .card::before,.slot.locked .card::after,.slot.locked .star{display:none}
.slot.locked .c-name,.slot.locked .c-brand,.slot.locked .c-year,.slot.locked .chip{visibility:hidden}
.qty{position:absolute;right:-6px;bottom:-6px;z-index:6;background:var(--text);color:#0b0b0c;border-radius:99px;font-weight:800;font-size:12px;padding:3px 9px;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.empty{text-align:center;color:var(--muted);padding:60px 0}

/* ---------- Modal / toast ---------- */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;width:min(420px,100%);position:relative;max-height:92vh;overflow-y:auto}
.sheet h2{font-family:var(--display);margin:0 0 12px;font-size:22px}
.sheet p,.sheet li{color:#c4cac8;font-size:14px;line-height:1.55}
.sheet ul{padding-left:18px;margin:8px 0}
.x{position:absolute;right:14px;top:12px;border:0;background:none;color:var(--muted);font-size:26px;line-height:1}
.detail{display:flex;flex-direction:column;align-items:center;gap:14px}
.detail .card{width:min(260px,70vw)}
.detail .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.odds{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0}
.odds td{padding:7px 0;border-bottom:1px solid var(--line)}
.odds td:last-child{text-align:right;font-weight:700}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,30px);background:var(--text);color:#0b0b0c;font-weight:700;font-size:14px;padding:11px 18px;border-radius:99px;opacity:0;pointer-events:none;transition:.3s;z-index:60}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Mobile ---------- */
.tabs{display:none}
@media(max-width:820px){
  .side{display:none}
  .mobile-brand{display:flex}
  .topbar{padding:12px 16px}
  main{padding:0 16px 100px}
  h1{font-size:28px}
  .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(14,15,16,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;color:var(--muted);font-size:11px;font-weight:600;padding:8px 0}
  .tabs button.on{color:var(--accent)}
  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .toast{bottom:100px}
}
@media(prefers-reduced-motion:reduce){*:not(#splash):not(#splash *):not(.keep-motion):not(.keep-motion *):not(:root){animation:none!important;transition:none!important}} /* l'animation de lancement (#splash) est jouée quand même : elle est courte et sans grand mouvement */
@keyframes fade{from{opacity:0}to{opacity:1}}
.cn{display:inline-block;width:.9em;height:.9em;border-radius:50%;margin-left:.35em;vertical-align:-.1em;background:radial-gradient(circle at 35% 30%,#ffe08a,#d9961a);box-shadow:inset 0 0 0 .12em rgba(0,0,0,.2)}
.pack-label:disabled{color:var(--muted);cursor:not-allowed}.pack-label:hover:not(:disabled){text-decoration:underline}
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:28px 0 10px;color:var(--muted);font-size:13px}
.slot.missing .card{filter:grayscale(.85) brightness(.62);box-shadow:none}
.slot.missing .card::before{display:none}
.slot.missing:hover .card{filter:grayscale(.3) brightness(.9)}
.tabs button{min-width:0}
.tabs button span{white-space:nowrap}

/* ---------- Connexion / compte ---------- */
.auth{display:none;position:fixed;inset:0;z-index:100;background:var(--bg);align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.locked .auth{display:flex}
.locked .app,.locked .tabs{display:none}
.auth-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px 22px 22px}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--display)}
.auth-brand .mark{width:44px;height:44px}
.auth-brand .wm{font-size:22px}
.auth-sub{color:var(--muted);text-align:center;font-size:14px;margin:6px 0 18px}
.auth-tabs{margin-bottom:18px}.auth-tabs button{flex:1}
.auth-card form{display:flex;flex-direction:column;gap:14px}
.auth-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.auth-card input:not([type=checkbox]){background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--text);padding:13px 14px;font-size:16px;font-family:inherit;outline:none;width:100%}
.auth-card input:focus{border-color:var(--accent)}
.auth-card .pw{position:relative;display:block}
.auth-card .pw input{padding-right:46px}
.auth-card .pw button{position:absolute;right:4px;top:4px;bottom:4px;width:40px;border:0;background:none;font-size:16px;opacity:.7}
.auth-card label.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500;line-height:1.35}
.auth-card label.check input{margin-top:2px;accent-color:var(--accent)}
.auth-error{min-height:18px;color:#ff7a8a;font-size:13px;line-height:1.35}
.auth-card .btn{width:100%;padding:14px}
.auth-note{color:var(--muted);font-size:12px;text-align:center;margin:14px 0 0;line-height:1.4;min-height:16px}

.userchip{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:4px 14px 4px 4px;margin-right:10px;color:var(--text);font-weight:600;font-size:14px}
.userchip[hidden]{display:none}
.avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#ff6b7a,#b3182b);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;position:relative}
.avatar.big{width:64px;height:64px;font-size:28px;margin:0 auto 10px}
.userchip .avatar::after{content:"";position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:#e5e7eb;border:2px solid var(--panel)}
.userchip.off .avatar::after{background:#ffb84d}
.uname{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct{text-align:center}
.acct h2{margin:0}
.acct-sub{color:var(--muted);font-size:13px;margin:4px 0 16px}
.acct-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.acct-stats div{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.acct-stats b{font-family:var(--display);font-size:22px}
.acct-stats span{font-size:11px;color:var(--muted)}
.acct-sync{font-size:12px;color:var(--muted);margin-bottom:16px}
.acct-sync.offline,.acct-sync.error{color:#ffb84d}
.acct .btn{width:100%}
@media(max-width:820px){.uname{display:none}.userchip{padding:4px;margin-right:8px}}

/* ---------- Optimisation téléphone ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* overscroll-behavior sur html (et non body) : sur body, la molette ne faisait plus défiler la page sur PC */
html{touch-action:manipulation}
button,.slot,.pill,.flip,.userchip,.install{touch-action:manipulation;-webkit-touch-callout:none}
.card,.pack,.tabs button,.pill,.flip{-webkit-user-select:none;user-select:none}
input,select,textarea{font-size:16px!important} /* évite le zoom automatique d'iOS quand on touche un champ */
.app{min-height:100vh;min-height:100dvh}
.side{height:100vh;height:100dvh}
.topbar{padding-top:calc(14px + env(safe-area-inset-top));padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
main{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
.auth{min-height:100vh;min-height:100dvh;align-items:flex-start;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom))}
.auth-card{margin:auto}
.modal{overscroll-behavior:contain;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom))}
.sheet{max-height:90vh;max-height:90dvh}
.star::after{content:"";position:absolute;inset:-12px} /* zone de toucher plus grande que l'étoile */
.pack:active:not(:disabled){transform:scale(.97)}
.slot:active{transform:scale(.98)}
.btn:active{filter:brightness(.92)}
@media(hover:none){ /* écrans tactiles : pas d'effets de survol qui restent collés */
  .pack:hover:not(:disabled){transform:none;filter:drop-shadow(0 0 30px rgba(var(--accent-rgb),.38))}
  .slot:hover{transform:none}
  .pack-label:hover:not(:disabled){text-decoration:none}
  .btn:hover{filter:none}
  .menu button:hover{background:none}
}

/* Bouton « Ajouter l'application » */
.install{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:#fff;border:0;border-radius:99px;padding:8px 14px 8px 11px;margin-right:10px;font-weight:700;font-size:13px;white-space:nowrap;box-shadow:0 4px 14px rgba(255,71,87,.3)}
.install[hidden]{display:none}
.install svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.install .short{display:none}
.install:active{filter:brightness(.92)}
.auth-install{display:block;margin:14px auto 0;color:var(--accent);background:none;border:0;font-size:14px;font-weight:600;padding:10px}
.auth-install[hidden]{display:none}
.steps{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;color:#d4d9d8;font-size:15px;line-height:1.45}
.steps li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent-bg);color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:13px;margin-top:1px}
.steps .ico{display:inline-block;vertical-align:-4px;width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hint-box{margin-top:14px;font-size:13px;color:var(--muted);line-height:1.45}

@media(max-width:820px){
  .topbar{padding:calc(10px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
  main{padding:0 max(12px,env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .mobile-brand .mark{width:26px;height:26px}
  .mobile-brand .wm{font-size:14px;letter-spacing:.12em}
  .coins{padding:6px 12px 6px 7px;font-size:13px}
  .install{margin-right:8px;padding:8px 11px 8px 9px;font-size:12px}
  .tabs{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
  .tabs button{min-height:54px;font-size:10.5px;white-space:nowrap}
  .btn{min-height:48px}
  .btn.sm{min-height:42px}
  .round{width:48px;height:48px}
  .pill{padding:10px 14px;font-size:13px}
  .seg button{padding:11px 14px}
  .grid{gap:12px}
  .pager .btn{min-height:44px}
  .toast{bottom:calc(92px + env(safe-area-inset-bottom))}
  /* la carte de l'ouverture s'adapte à la hauteur de l'écran (petits téléphones) */
  .v-stage{width:max(190px,min(300px,84vw,calc((100vh - 360px) * 5 / 7)));width:max(190px,min(300px,84vw,calc((100dvh - 360px) * 5 / 7)))}
  .viewer{gap:10px}
}
@media(max-width:430px){
  .install .long{display:none}
  .install .short{display:inline}
  .mobile-brand{gap:8px}
  .mobile-brand .wm{font-size:12.5px;letter-spacing:.1em}
}
@media(max-width:340px){ .install .short{display:none} .install{padding:8px} }
@media(max-height:700px) and (max-width:820px){
  .pack{width:122px;height:180px}
  .badge svg{width:62px;height:62px}
  .badge i{font-size:9px}
  .pack-label{margin:14px 0 16px}
  .tagline,.sub{margin-bottom:2px}
  .link{margin-bottom:18px}
}
@media(max-height:640px) and (max-width:820px){ /* très petits téléphones (iPhone SE, anciens Android) */
  .v-stage{width:max(170px,min(300px,84vw,calc((100vh - 420px) * 5 / 7)));width:max(170px,min(300px,84vw,calc((100dvh - 420px) * 5 / 7)))}
  .viewer{gap:6px}
  .v-info{min-height:38px;gap:6px}
  .round{width:42px;height:42px}
  .viewer .btn{min-height:44px;padding:10px 26px}
}
#brand,#brand-m{display:flex;align-items:center;gap:10px}
@media(max-width:430px){ .mobile-brand .wm{display:none} .mobile-brand .mark{width:32px;height:32px} }

/* ---------- Signalement / administration des raretés ---------- */
.d-extra{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.d-extra .link{font-size:13px}
.rep-form{width:100%;display:flex;flex-direction:column;gap:10px}
.rep-form p{margin:0;text-align:center;color:var(--text);font-weight:600;font-size:14px}
.rep-form .check{display:flex;align-items:center;gap:8px;font-size:14px;color:#c4cac8}
.rep-note,.admin-box select,.adm-row select{background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:10px 12px;font-size:14px;font-family:inherit;outline:none;min-width:0}
.rep-note{width:100%}
.rep-ok{margin:0;color:#7fe0a8;font-weight:600;font-size:14px}
.admin-box{width:100%;border:1px dashed rgba(255,184,77,.45);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;background:rgba(255,184,77,.06)}
.admin-title{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#ffcf8a}
.admin-hint{font-size:12.5px;color:var(--muted);margin:0}
.sheet.wide{width:min(640px,100%)}
.adm-row{border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:10px;display:flex;flex-direction:column;gap:6px;background:var(--panel2)}
.adm-row.small{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.adm-name{font-weight:700;font-size:14px;line-height:1.3}
.adm-sub,.adm-votes{font-size:12.5px;color:var(--muted)}
.adm-note{font-size:12.5px;color:#c4cac8;background:rgba(255,255,255,.04);border-radius:8px;padding:6px 8px;overflow-wrap:anywhere}
.adm-h{margin:18px 0 0;font-size:14px;font-family:var(--display)}
.adm-row .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-start}

.adm-row.pl{align-items:center}
.adm-row.pl > div:first-child{min-width:0}
.adm-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:12px}
.sheet.wide .pager{margin:14px 0 4px}
.sheet.wide form.row{display:flex;gap:8px;margin:10px 0}

.adm-head{display:flex;gap:10px;align-items:center}
.adm-head img{width:86px;height:60px;object-fit:cover;border-radius:8px;flex:none;background:var(--panel)}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:10px 0}
.ph-item{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px;color:var(--text);cursor:pointer}
.ph-item:hover{border-color:var(--accent)}
.ph-item img{width:100%;height:84px;object-fit:cover;border-radius:7px;background:var(--panel)}
.ph-item span{font-size:11px;line-height:1.25;color:var(--muted);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.admin-box .rep-note{flex:1}

/* ---------- Profil ---------- */
#view-profile{max-width:none}
.pf-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:16px}
.pf-card h2{font-family:var(--display);font-size:17px;margin:0 0 10px}
.pf-top{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.pf-top .avatar.big{margin:0;width:76px;height:76px;font-size:34px;flex:none}
.pf-top .avatar.big::after{display:none}
.pf-id h1{margin:0;font-size:26px}
.pf-sub{color:var(--muted);font-size:13px;margin-top:2px}
.pf-swatches{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pf-sw{width:28px;height:28px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer}
.pf-sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--panel) inset}
.pf-bio{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--line);border-radius:12px;color:var(--text);padding:10px 12px;font-family:inherit;font-size:14px;resize:vertical;outline:none}
.pf-bio:focus{border-color:var(--accent)}
.pf-bio-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.pf-count{font-size:12px;color:var(--muted)}
.pf-hint{font-size:13px;color:var(--muted);margin:6px 0 10px}
.pf-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pf-slot{position:relative;aspect-ratio:5/7;cursor:pointer}
.pf-slot .card{width:100%}
.pf-add{width:100%;height:100%;border:2px dashed var(--line);border-radius:14px;background:none;color:var(--muted);font-size:34px;cursor:pointer}
.pf-add:hover{border-color:var(--accent);color:var(--accent)}
.pf-x{position:absolute;right:-6px;top:-6px;z-index:7;width:24px;height:24px;border-radius:50%;border:0;background:var(--text);color:#0b0b0c;font-weight:800;line-height:1;cursor:pointer}
.pf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.pf-stats div{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;gap:2px}
.pf-stats b{font-family:var(--display);font-size:20px}
.pf-stats span{font-size:11px;color:var(--muted)}
.pf-bar{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:10px;margin:7px 0;font-size:13px}
.pf-bar span{font-weight:700}
.pf-bar i{display:block;height:8px;border-radius:99px;background:var(--bg);overflow:hidden}
.pf-bar u{display:block;height:100%;border-radius:99px;text-decoration:none}
.pf-bar em{font-style:normal;color:var(--muted);font-size:12px;min-width:84px;text-align:right}
.pf-det{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.pf-det summary{cursor:pointer;font-weight:600;font-size:14px}
.pf-det.danger summary{color:#ff7b8a}
.pf-form{display:flex;flex-direction:column;gap:10px;margin-top:10px;max-width:420px}
.btn.danger{background:linear-gradient(135deg,#ff4d5e,#a3121f)}
.pf-foot{font-size:12px;color:var(--muted);text-align:center;margin:8px 0 24px}
#view-profile .row{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:820px){.pf-bar{grid-template-columns:78px 1fr auto}.pf-stats{grid-template-columns:repeat(2,1fr)}.pf-showcase{gap:8px}}

/* ---------- Amis ---------- */
#view-friends{max-width:none}
.fr-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.fr-row:first-of-type{border-top:0}
.fr-who{display:flex;align-items:center;gap:10px;min-width:0;font-weight:600}
.fr-who span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-who .avatar{flex:none;width:34px;height:34px;font-size:15px}
.fr-act{display:flex;gap:8px;align-items:center;flex:none}
.fr-results{margin-top:6px}
.fr-bio{margin:0 0 12px;color:#c4cac8;font-size:14px;overflow-wrap:anywhere}
.fr-h{font-family:var(--display);font-size:16px;margin:14px 0 8px}
.nbadge{margin-left:auto;background:var(--accent);color:#fff;border-radius:99px;font-size:11px;font-weight:800;padding:1px 7px}
.tabs button{position:relative}
.tabs .nbadge{position:absolute;top:2px;left:calc(50% + 6px);margin:0}
.card.masked .c-img{display:grid;place-items:center}
.masked-q{font-family:var(--display);font-size:62cqw;font-weight:800;line-height:1;color:rgba(125,249,255,.55);text-shadow:0 0 28px #00e5ff,0 0 60px #ff2bd6}

.adm-row.small .adm-thumb{width:64px;height:46px;object-fit:cover;border-radius:7px;flex:none;background:var(--panel)}

.avatar.has-img{color:transparent}
.pf-photo{margin:6px 0 4px}

.btn.danger-txt{color:#ff7b8a;border-color:rgba(255,123,138,.35)}

/* ---------- Échanges ---------- */
#view-trades{max-width:none}
.tr-row{border-top:1px solid var(--line);padding:14px 0;display:flex;flex-direction:column;gap:10px}
.tr-row:first-of-type{border-top:0}
.tr-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tr-cards{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.tr-card{width:88px}
.tr-card .card{width:100%}
.tr-slots{gap:8px}
@media(max-width:560px){.tr-cols{grid-template-columns:1fr}.tr-build{grid-template-columns:1fr}}

/* ---------- Performances ----------
   Les reflets animés, les flous d'arrière-plan et les grosses ombres obligeaient le téléphone à redessiner des dizaines de cartes en boucle
   (une page de cartes rares = 45 animations permanentes). Dans les grilles, les cartes sont donc fixes ; les animations restent
   sur la carte qu'on regarde (ouverture d'un paquet, fiche, vitrine du profil). */
.grid .card::before{display:none}
.grid .card::after,.tr-card .card::after{animation:none}
.tr-card .card::before{display:none}
.chip{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,12,12,.74)}
.grid .card,.tr-card .card{box-shadow:0 3px 10px rgba(0,0,0,.4)}
.grid .r-sr{box-shadow:0 4px 14px rgba(245,100,180,.38)}
.grid .r-ur{box-shadow:0 4px 14px rgba(255,150,40,.45)}
.grid .r-l{box-shadow:0 4px 16px rgba(255,205,100,.5)}
.grid .r-s{box-shadow:0 4px 16px rgba(0,229,255,.45)}
.v-glow{will-change:transform}

/* ---------- Démarrage : pas d'écran de connexion tant que le serveur n'a pas dit si on est déjà connecté ---------- */
#splash{display:none;position:fixed;inset:0;z-index:200;background:#0b0b0c;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;--sp-ease:cubic-bezier(.45,.05,.25,1)}
.booting #splash,.intro #splash{display:flex}
.intro .auth,.booting .auth{display:none!important}
/* Lancement : le nom apparaît en filigrane, un point lumineux le traverse en l'allumant lettre après lettre, puis l'accroche s'affiche (noir et rouge CarMasters) */
.sp-glow{position:absolute;left:50%;top:56%;width:150%;aspect-ratio:2/1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,71,87,.20),rgba(255,71,87,.06) 55%,transparent);opacity:0;pointer-events:none}
.sp-word{position:relative;font:600 clamp(20px,6.2vw,36px)/1 var(--body);letter-spacing:.34em;padding-left:.34em;white-space:nowrap;color:#fff}
.sp-ghost{display:block;color:rgba(255,255,255,.11);opacity:0}
.sp-lit{position:absolute;left:.34em;top:0;display:block;color:#fff;text-shadow:0 0 22px rgba(255,71,87,.55);clip-path:inset(-20% 100% -20% 0)}
.sp-orb{position:absolute;left:.34em;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,120,130,.95),0 0 26px 8px rgba(255,71,87,.6);opacity:0}
.sp-orb::before{content:"";position:absolute;right:50%;top:50%;width:min(34vw,150px);height:1px;margin-top:-.5px;background:linear-gradient(90deg,transparent,rgba(255,150,160,.9))}
.sp-tag{margin-top:22px;font:500 clamp(8px,2.5vw,11px)/1 var(--body);letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);opacity:0;transform:translateY(5px)}
#splash.go .sp-glow{animation:spGlow 1.2s ease-out .85s forwards}
#splash.go .sp-ghost{animation:spFade .5s ease-out .15s forwards}
#splash.go .sp-lit{animation:spReveal .62s var(--sp-ease) .5s forwards}
#splash.go .sp-orb{animation:spOrb .62s var(--sp-ease) .5s forwards}
#splash.go .sp-tag{animation:spTag .6s ease-out 1.45s forwards}
#splash.out{opacity:0;transform:scale(1.04);transition:opacity .45s ease,transform .45s ease}
@keyframes spFade{to{opacity:1}}
@keyframes spReveal{to{clip-path:inset(-20% 0 -20% 0)}}
@keyframes spOrb{0%{left:.34em;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - .1em);opacity:0}}
@keyframes spGlow{to{opacity:1}}
@keyframes spTag{to{opacity:1;transform:none}}
@keyframes spIn{from{opacity:0}to{opacity:1}}
#splash.quick .sp-glow{opacity:1}
#splash.quick .sp-ghost{opacity:1}
#splash.quick .sp-lit{clip-path:inset(-20% 0 -20% 0)}
#splash.quick .sp-tag{opacity:1;transform:none}


/* ---------- Polices hébergées sur le site (plus de requête vers Google : l'adresse des joueurs ne lui est pas transmise) ---------- */
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Outfit;font-style:normal;font-weight:600 800;font-display:swap;src:url(outfit-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Inscription : champ piège, case des règles, liens légaux ---------- */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
#auth-terms-wrap{align-items:flex-start;font-size:12.5px;line-height:1.45}
#auth-terms-wrap a,.auth-legal a,.pf-foot a{color:var(--accent);text-decoration:underline}
.auth-legal{margin:14px 0 0;text-align:center;font-size:12px;color:var(--muted)}

/* ---------- Page « Règles, confidentialité, mentions légales » (legal.html) ---------- */
.legal{max-width:760px;margin:0 auto;padding:24px 18px 70px;line-height:1.65;color:#c9ced2;font-size:15px}
.legal h1{font-family:var(--display);color:var(--text);font-size:30px;margin:6px 0 4px}
.legal h2{font-family:var(--display);color:var(--text);font-size:21px;margin:34px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.legal h3{color:var(--text);font-size:15.5px;margin:20px 0 6px}
.legal p,.legal li{margin:8px 0}
.legal a{color:var(--accent);text-decoration:underline}
.legal .toc{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 8px}
.legal .toc a{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:7px 14px;text-decoration:none;color:var(--text);font-size:13px;font-weight:600}
.legal .upd{color:var(--muted);font-size:13px}
.legal table{border-collapse:collapse;width:100%;font-size:14px;margin:10px 0}
.legal td,.legal th{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
.legal th{color:var(--text)}
.legal .back{display:inline-block;margin-bottom:6px;font-size:14px}

/* Mot de passe oublié, code de récupération */
.auth-forgot{text-align:center;margin:8px 0 0}
.auth-forgot.hidden{display:none}
.auth-forgot button{background:none;border:0;color:var(--accent);font-size:14px;font-weight:600;padding:8px;cursor:pointer}
.rec-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(17px,5.4vw,24px);font-weight:700;letter-spacing:.06em;text-align:center;user-select:all;-webkit-user-select:all;padding:16px 10px;margin:14px 0;border:2px dashed var(--accent);border-radius:14px;background:var(--bg);word-break:break-all}
.rec-check{display:flex;align-items:center;gap:10px;margin:16px 0 14px;font-weight:600;cursor:pointer}
.rec-check input{width:20px;height:20px;accent-color:var(--accent)}

/* ---------- Profil moderne : en-tête, cartes, lignes de réglages, pages qui glissent ---------- */
.pf-page{animation:pfIn .36s cubic-bezier(.2,.8,.2,1) both}
.pf-page.back{animation-name:pfBack}
@keyframes pfIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes pfBack{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.pg-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0 10px}
.pg-bar-title{font:600 16px/1 var(--display);letter-spacing:.2px}
.pg-iconbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,transform .15s}
.pg-iconbtn:active{transform:scale(.92)}.pg-iconbtn.ghost{visibility:hidden}
.pg-iconbtn:hover{background:var(--panel2)}
.pg-ico svg{width:20px;height:20px;display:block}
.pg-h1{font:700 30px/1.1 var(--display);margin:10px 0 4px}
.pg-sub{color:var(--muted);font-size:14px;margin:0 0 6px}
.pg-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:22px 6px 8px}
.pg-label2{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:22px 6px 8px}
.pg-cur{color:var(--accent);letter-spacing:.04em;text-transform:none;font-size:13px}
/* en-tête du profil */
.pg-hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 12px 6px;border-radius:26px;background:radial-gradient(ellipse 90% 70% at 50% 0,rgba(var(--accent-rgb),.20),transparent 72%)}
.pg-ring{position:relative;padding:4px;border-radius:50%;background:linear-gradient(140deg,var(--accent),rgba(var(--accent-rgb),.18) 70%);box-shadow:0 10px 34px rgba(var(--accent-rgb),.25)}
.pg-ring .avatar.big{width:104px;height:104px;font-size:44px;margin:0;border:4px solid var(--bg)}
.pg-ring .avatar.big::after{display:none}
.pg-ring.sm{padding:3px;box-shadow:none;flex:none}.pg-ring.sm .avatar.big{width:76px;height:76px;font-size:32px;border-width:3px}
.pg-cam{position:absolute;right:-2px;bottom:4px;width:34px;height:34px;border-radius:50%;border:3px solid var(--bg);background:var(--accent);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer}
.pg-cam .pg-ico svg{width:15px;height:15px}
.pg-name{font:700 27px/1.15 var(--display);margin:14px 0 2px}
.pg-handle{color:var(--muted);font-size:13px}
.pg-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.pg-chip{font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);color:var(--text)}
.pg-chip.admin{background:var(--accent-bg);border-color:rgba(var(--accent-rgb),.4);color:var(--accent)}
.pg-bio{max-width:34ch;margin:12px 0 0;font-size:14px;line-height:1.45;color:#d6dbd9;overflow-wrap:anywhere}.pg-bio.blank{color:var(--muted)}
.pg-pill{margin:14px 0 6px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 13px var(--body);padding:9px 18px;border-radius:99px;cursor:pointer;transition:background .2s}
.pg-pill:hover{background:var(--panel2)}
/* chiffres clés */
.pg-trio{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.pg-trio div{padding:16px 6px;text-align:center;display:flex;flex-direction:column;gap:3px}
.pg-trio div+div{border-left:1px solid var(--line)}
.pg-trio b{font:700 22px var(--display)}.pg-trio span{font-size:11.5px;color:var(--muted)}
/* lignes de réglages */
.pg-group{background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.pg-row{width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;border:0;background:none;color:var(--text);text-align:left;cursor:pointer;font-family:inherit;transition:background .15s}
.pg-row+.pg-row{border-top:1px solid var(--line)}
.pg-row:hover,.pg-row:active{background:var(--panel2)}
.pg-row .tile{width:40px;height:40px;border-radius:13px;background:var(--accent-bg);color:var(--accent);display:grid;place-items:center;flex:none}
.pg-row-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pg-row-tx b{font-size:15px;font-weight:600}.pg-row-tx span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-row .chev{color:var(--muted);flex:none}.pg-row .chev svg{width:18px;height:18px}
.pg-row.danger .tile{background:rgba(255,90,100,.14);color:#ff7b8a}.pg-row.danger b{color:#ff7b8a}
.pg-dot-warn{width:9px;height:9px;border-radius:50%;background:#ffb84d;box-shadow:0 0 0 4px rgba(255,184,77,.18);flex:none}
.pg-note{margin:14px 6px}
.pg-edit-top{display:flex;align-items:center;gap:16px}
.pg-edit .pg-label{margin:20px 2px 8px}
/* apparence */
.pg-preview{margin-top:14px;padding:16px;border-radius:22px;border:1px solid rgba(var(--accent-rgb),.3);background:linear-gradient(160deg,rgba(var(--accent-rgb),.14),var(--panel) 70%);display:flex;flex-direction:column;gap:14px;transition:border-color .3s,background .3s}
.pg-pv-top{display:flex;justify-content:space-between;align-items:center}.pg-pv-top b{font-family:var(--display);font-size:16px}
.pg-pv-live{font-size:11px;color:var(--accent);background:var(--accent-bg);padding:3px 9px;border-radius:99px;font-weight:700}
.pg-pv-bar{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.pg-pv-bar u{display:block;width:62%;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--btn-a),var(--accent));transition:background .3s}
.pg-pv-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pg-dots{display:flex;gap:10px;justify-content:space-between;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:22px}
.pg-dot{position:relative;width:40px;height:40px;flex:none;border-radius:50%;border:0;padding:0;cursor:pointer;color:#fff;display:grid;place-items:center;transition:transform .2s;box-shadow:inset 0 0 0 0 transparent}
.pg-dot .pg-ico{opacity:0;transform:scale(.5);transition:.2s}
.pg-dot.on{transform:scale(1.06);box-shadow:0 0 0 3px var(--panel),0 0 0 5px currentColor}
.pg-dot.on .pg-ico{opacity:1;transform:none}
.pg-savebar{position:sticky;bottom:92px;z-index:15;display:flex;align-items:center;gap:12px;margin-top:22px;padding:10px 12px 10px 16px;border-radius:99px;background:rgba(27,29,30,.96);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.45);animation:pfRise .3s cubic-bezier(.2,.8,.2,1)}
.pg-savebar.hidden{display:none}
.pg-sb-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.pg-sb-txt{flex:1;font-size:13px;font-weight:600}
.pg-sb-no{border:0;background:none;color:var(--muted);font:600 14px var(--body);padding:8px 10px;cursor:pointer}
@keyframes pfRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(min-width:821px){.pg-savebar,.tr-sendbar{bottom:20px}.pf-page{max-width:640px;margin:0 auto}}
.pf-card{border-radius:22px}

/* ---------- Animations du profil et des amis : apparition en cascade, avatar qui rebondit, barres qui se remplissent, couleurs qui se fondent ---------- */
@property --accent{syntax:"<color>";inherits:true;initial-value:#ff4757}
@property --btn-a{syntax:"<color>";inherits:true;initial-value:#ff4d5e}
@property --btn-b{syntax:"<color>";inherits:true;initial-value:#d91f33}
:root{transition:--accent .5s ease,--btn-a .5s ease,--btn-b .5s ease}
.pf-page>*:not(.pg-bar){animation:pgUp .6s cubic-bezier(.2,.8,.2,1) both}
.pf-page>*:nth-child(2){animation-delay:.04s}.pf-page>*:nth-child(3){animation-delay:.09s}.pf-page>*:nth-child(4){animation-delay:.14s}.pf-page>*:nth-child(5){animation-delay:.19s}
.pf-page>*:nth-child(6){animation-delay:.24s}.pf-page>*:nth-child(7){animation-delay:.29s}.pf-page>*:nth-child(8){animation-delay:.34s}.pf-page>*:nth-child(n+9){animation-delay:.4s}
@keyframes pgUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.pg-ring{animation:ringPop .75s cubic-bezier(.34,1.56,.64,1) .1s both,ringGlow 3.6s ease-in-out 1s infinite}
@keyframes ringPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes ringGlow{0%,100%{box-shadow:0 10px 34px rgba(var(--accent-rgb),.22)}50%{box-shadow:0 12px 44px rgba(var(--accent-rgb),.45)}}
.pg-ring.sm{animation:ringPop .6s cubic-bezier(.34,1.56,.64,1) both}
.pf-page .pf-bar u{transform-origin:0 50%;animation:barGrow 1.1s cubic-bezier(.2,.8,.2,1) .35s both}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:none}}
.pf-page .pf-slot{animation:slotIn .6s cubic-bezier(.34,1.3,.64,1) both}
.pf-page .pf-slot:nth-child(1){animation-delay:.2s}.pf-page .pf-slot:nth-child(2){animation-delay:.3s}.pf-page .pf-slot:nth-child(3){animation-delay:.4s}
@keyframes slotIn{from{opacity:0;transform:translateY(22px) scale(.92)}to{opacity:1;transform:none}}
.pg-row,.pg-pill,.pg-iconbtn,.btn,.fr-row.tap{transition:background .2s,transform .18s cubic-bezier(.34,1.56,.64,1),filter .2s}
.pg-row:active,.fr-row.tap:active{transform:scale(.985)}
.pg-pill:active,.btn:active{transform:scale(.96)}
.pg-dot.on{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.pg-dot:active{transform:scale(.9)}
.pg-pv-bar u{animation:barGrow 1.1s cubic-bezier(.2,.8,.2,1) .3s both}
/* page Amis : lignes de joueurs dans des cartes arrondies */
.fr-group{padding:0}
.fr-group .fr-row{padding:12px 16px;border-top:1px solid var(--line);gap:12px}
.fr-group .fr-row:first-child{border-top:0}
.fr-group .fr-who{flex:1}
.fr-group .fr-who .avatar{width:44px;height:44px;font-size:19px}
.fr-group .fr-who span:last-child{font-size:15px}
.fr-row.tap{cursor:pointer}.fr-row.tap:hover{background:var(--panel2)}
.fr-row .chev{color:var(--muted);flex:none}.fr-row .chev svg{width:18px;height:18px}
.fr-swap{font-size:16px;padding:7px 12px}
.pg-cta{margin-top:14px;padding:12px 26px;border-radius:99px;font-size:14px}
.pf-page .pf-card .fr-results{margin-top:8px}

/* Doublons : pastille « Tu as ×N / NEW » sur les cartes d'un ami, rangée défilante sur son profil, filtre dans le sélecteur d'échange */
.own-chip{position:absolute;left:-4px;bottom:-6px;z-index:6;background:#232627;color:#d3dad7;border:1px solid var(--line);border-radius:99px;font-weight:700;font-size:10.5px;padding:2px 8px}
.own-chip.new{background:var(--accent);color:#fff;border-color:transparent}
.fr-dups{display:flex;gap:14px;overflow-x:auto;padding:8px 8px 18px;margin:0 -8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.dup-slot{position:relative;flex:none;width:118px;scroll-snap-align:start;cursor:pointer}
.dup-slot .card{width:100%}
.tr-seg{margin:10px 0 8px}.tr-seg button{flex:1}

/* Mise à jour des données sans rejouer l'animation d'arrivée (liste d'amis rafraîchie, profil enregistré…) */
.still,.still *{animation:none!important}
.still .pg-ring{animation:ringGlow 3.6s ease-in-out infinite!important}

/* ---------- Succès ---------- */
.ach-sum{display:flex;align-items:center;gap:18px;margin-top:14px;padding:18px;border-radius:22px;border:1px solid rgba(var(--accent-rgb),.3);background:linear-gradient(160deg,rgba(var(--accent-rgb),.16),var(--panel) 72%)}
.ach-ring{position:relative;width:78px;height:78px;flex:none}
.ach-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ach-ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ach-ring .bg{stroke:rgba(255,255,255,.08)}
.ach-ring .fg{stroke:var(--accent);animation:ringFill 1.3s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes ringFill{from{stroke-dashoffset:var(--c)}}
.ach-ring b{position:absolute;inset:0;display:grid;place-items:center;font:700 16px var(--display)}
.ach-sum-tx{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0}
.ach-sum-tx b{font:700 24px var(--display)}.ach-sum-tx span{color:var(--muted);font-size:13px;margin-top:-4px}.ach-sum-tx em{font-style:normal;color:var(--muted);font-size:12.5px}
.ach-group{padding:0}
.ach-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-top:1px solid var(--line);transition:background .25s}
.ach-row:first-child{border-top:0}
.ach-ic{width:44px;height:44px;border-radius:14px;background:var(--panel2);display:grid;place-items:center;font-size:21px;flex:none}
.ach-body{flex:1;min-width:0}
.ach-t{font-weight:600;font-size:15px}.ach-d{color:var(--muted);font-size:12.5px;margin:2px 0 8px}
.ach-bar{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.ach-bar u{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--btn-a),var(--accent));transform-origin:0 50%;animation:barGrow 1.1s cubic-bezier(.2,.8,.2,1) .3s both}
.ach-meta{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted);margin-top:6px}
.ach-rw{color:#e7d9a8;font-weight:600;white-space:nowrap}
.ach-row.ready{background:rgba(var(--accent-rgb),.08)}
.ach-row.ready .ach-ic{background:var(--accent-bg);animation:achPulse 2.2s ease-in-out infinite}
@keyframes achPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45)}50%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),0)}}
.ach-row.done{opacity:.62}.ach-row.done .ach-ic{background:rgba(80,200,140,.16);color:#6fe0a6;font-weight:800}
.ach-row.done .ach-bar u{background:#4fc98c}
.ach-row.pop{animation:achPop .8s cubic-bezier(.34,1.56,.64,1)}
@keyframes achPop{0%{transform:scale(.96);background:rgba(var(--accent-rgb),.3)}60%{transform:scale(1.025)}100%{transform:none}}
.ach-claim{flex:none}
.ach-rw{display:flex;gap:10px;align-items:center}.ach-rw-i{display:inline-flex;align-items:center;gap:3px}.ach-rw .cn{margin-left:0}

/* ---------- Échanges : carte d'accueil, propositions, historique, construction d'une proposition ---------- */
.tr-hero{display:flex;gap:16px;align-items:flex-start;margin-top:14px;padding:18px;border-radius:22px;border:1px solid rgba(var(--accent-rgb),.3);background:linear-gradient(160deg,rgba(var(--accent-rgb),.16),var(--panel) 72%)}
.tr-hero .pg-ico.tile{width:52px;height:52px;border-radius:16px;background:var(--accent-bg);color:var(--accent);display:grid;place-items:center;flex:none}
.tr-hero .pg-ico.tile svg{width:26px;height:26px}
.tr-hero-tx{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0}
.tr-hero-tx b{font:700 19px var(--display)}.tr-hero-tx span{color:var(--muted);font-size:13px;line-height:1.45;margin-bottom:6px}
.tr-offer{margin-bottom:14px;padding:16px;border-radius:22px;border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;gap:14px}
.tr-offer.incoming{border-color:rgba(var(--accent-rgb),.4);background:linear-gradient(160deg,rgba(var(--accent-rgb),.12),var(--panel) 68%)}
.tr-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tr-who{display:flex;align-items:center;gap:12px;min-width:0}
.tr-who .avatar{width:44px;height:44px;font-size:19px;flex:none}
.tr-who b{display:block;font-size:15px;font-weight:600}.tr-who span{font-size:12px;color:var(--muted)}
.tr-sides{display:flex;flex-direction:column;gap:8px}
.tr-side{display:flex;flex-direction:column;gap:8px}
.tr-lab{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tr-stack{display:flex;gap:10px;flex-wrap:wrap}
.tr-stack .tr-card{width:84px}
.tr-mid{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-bg);color:var(--accent);margin:0 auto;flex:none}
.tr-mid svg{width:17px;height:17px}
.tr-sides .tr-mid{transform:rotate(90deg)}
.tr-mid.sm{width:22px;height:22px}.tr-mid.sm svg{width:12px;height:12px}
.tr-act{display:flex;gap:10px}.tr-act .btn{flex:1;border-radius:14px;padding:12px 10px}
.tr-chip{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.07);color:var(--muted);white-space:nowrap;flex:none}
.tr-chip.ok{background:rgba(80,200,140,.16);color:#6fe0a6}.tr-chip.no{background:rgba(255,90,100,.14);color:#ff8a96}.tr-chip.wait{background:var(--accent-bg);color:var(--accent)}
.tr-histgroup{padding:0}
.tr-hist{border-top:1px solid var(--line)}.tr-hist:first-child{border-top:0}
.tr-hist-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px 8px;border:0;background:none;color:var(--text);cursor:pointer;font-family:inherit;text-align:left}
.tr-thumbs{display:flex;align-items:center;gap:12px;padding:0 16px 14px}
.tr-mini{display:flex;gap:5px}
.tr-mini-c{width:42px;pointer-events:none}.tr-mini-c .card{width:100%}
.tr-more{display:none;padding:0 16px 16px}
.tr-hist.open .tr-more{display:block;animation:pgUp .45s cubic-bezier(.2,.8,.2,1) both}
.tr-hist.open .tr-thumbs{display:none}
.tr-vs{display:flex;align-items:center;justify-content:center;gap:18px;margin:10px 0 2px}
.tr-vs-p{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:70px}
.tr-vs .avatar{width:60px;height:60px;font-size:26px;box-shadow:0 8px 24px rgba(var(--accent-rgb),.25)}
.tr-vs-p b{font-size:13px;font-weight:600;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-panel{margin-top:14px;padding:16px;border-radius:22px;border:1px solid var(--line);background:var(--panel)}
.tr-panel-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.tr-panel-head b{font:600 15px var(--display)}.tr-panel-head span{color:var(--muted);font-size:13px}
.tr-sendbar{position:sticky;bottom:92px;z-index:15;display:flex;align-items:center;gap:14px;margin-top:20px;padding:10px 10px 10px 20px;border-radius:99px;background:rgba(27,29,30,.96);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.tr-sum{font:700 17px var(--display);white-space:nowrap}
.tr-sendbar .btn{flex:1;border-radius:99px;padding:13px 16px;font-size:14px}
.tr-sendbar .btn:disabled{opacity:.45}
.ach-cu{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:99px;background:rgba(255,255,255,.07);color:var(--muted);text-transform:uppercase}

/* ---------- Profil sur ordinateur : deux colonnes (identité à gauche, vitrine et collection à droite) ---------- */
.pg-gearlbl{display:none}
.pf-page>.pg-cols{animation:none}
.pg-col>*{animation:pgUp .6s cubic-bezier(.2,.8,.2,1) both}
.pg-col>*:nth-child(2){animation-delay:.05s}.pg-col>*:nth-child(3){animation-delay:.1s}.pg-col>*:nth-child(4){animation-delay:.15s}.pg-col>*:nth-child(5){animation-delay:.2s}.pg-col>*:nth-child(n+6){animation-delay:.25s}
@media(min-width:1000px){
  .pf-page.wide{max-width:1060px}
  .pg-cols{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start}
  .pg-col.a{position:sticky;top:20px}
  .pg-cols .pg-hero{border:1px solid var(--line);border-radius:26px;background:radial-gradient(ellipse 90% 55% at 50% 0,rgba(var(--accent-rgb),.24),transparent 72%),var(--panel);padding:26px 18px 18px}
  .pg-col.b>.pg-label:first-child{margin-top:4px}
  .pf-page.wide .pf-showcase{gap:18px}
  .pg-iconbtn.has-lbl{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;width:auto;border-radius:99px;padding:0 18px;gap:8px;white-space:nowrap}
  .pg-gearlbl{display:inline;font:600 13px var(--body)}
}

/* ---------- Vente de doublons : fenêtre de choix et de confirmation ---------- */
.modal.cfm{z-index:130}
.cfm .sheet{max-width:420px}
.cfm-text{color:#cfd6d3;font-size:14px;line-height:1.5;margin:6px 0 12px}
.cfm-lines{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:6px 14px;margin-bottom:14px}
.cfm-line{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:14px;border-top:1px solid var(--line)}.cfm-line:first-child{border-top:0}.cfm-line b{color:#ffd76a}
.cfm-btns{display:flex;gap:10px}.cfm-btns .btn{flex:1;padding:13px 12px;border-radius:14px}
.sell-sheet{max-height:min(88vh,860px);overflow-y:auto;padding-bottom:0}
.sell-cat{border:1px solid var(--line);border-radius:16px;margin-top:10px;background:var(--panel2);overflow:hidden}
.sell-head{display:flex;align-items:center;gap:12px;padding:12px 14px}
.sell-chk{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid var(--line);background:var(--bg);color:#fff;font-weight:800;font-size:15px;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer;transition:background .15s,border-color .15s}
.sell-chk.on{background:var(--accent);border-color:var(--accent)}.sell-chk.part{background:var(--accent-bg);border-color:var(--accent)}
.sell-chk.sm{width:22px;height:22px;border-radius:7px;font-size:13px;pointer-events:none}
.sell-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.sell-tx b{font-size:15px}.sell-tx span{font-size:12px;color:var(--muted)}
.sell-val{display:flex;align-items:center;gap:4px;font-weight:700;font-size:14px;color:#ffd76a;white-space:nowrap}
.sell-more{border:0;background:none;color:var(--muted);font:600 12.5px var(--body);cursor:pointer;padding:6px 4px;white-space:nowrap}
.sell-rows{border-top:1px solid var(--line);padding:6px 8px 10px;display:flex;flex-direction:column;gap:2px}
.sell-row{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:var(--text);padding:8px 8px;border-radius:10px;text-align:left;font-family:inherit;font-size:13.5px;cursor:pointer}
.sell-row:hover{background:rgba(255,255,255,.04)}.sell-row:not(.on){opacity:.55}
.sell-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sell-n{color:var(--muted);font-size:12px;flex:none}.sell-p{color:#ffd76a;font-weight:600;flex:none;min-width:48px;text-align:right}
.sell-rows .btn{align-self:center;margin-top:6px}
.sell-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;justify-content:space-between;margin:14px -4px 0;padding:12px 4px 16px;background:linear-gradient(to top,var(--panel) 72%,transparent)}
.sell-sum{font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.sell-sum b{font-size:15px}
.sell-bar .btn{border-radius:14px;padding:13px 20px}.sell-bar .btn:disabled{opacity:.4}

/* ---------- Cosmétiques : cadres d'avatar, thèmes de profil, titres, badges ---------- */
.pg-title{font:600 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-top:4px}
.pg-medals{display:flex;gap:10px;justify-content:center;margin:12px 0 2px}
.pg-medal{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;padding:0;font-size:19px;line-height:1;cursor:pointer;color:inherit;border:1px solid rgba(var(--accent-rgb),.45);background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.16),rgba(255,255,255,.04) 65%);box-shadow:0 4px 14px rgba(var(--accent-rgb),.22),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.pg-medal:active{transform:scale(.9)}
.pf-page:not(.still) .pg-medal{animation:medalPop .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(.25s + var(--i,0)*.09s)}
@keyframes medalPop{from{opacity:0;transform:scale(.4) translateY(6px)}to{opacity:1;transform:none}}
.pg-ring[class*="frame-"]{padding:6px}.pg-ring.sm[class*="frame-"]{padding:4px}
.pg-ring.frame-bronze{background:linear-gradient(140deg,#e0a060,#8a4f1d);box-shadow:0 10px 30px rgba(205,127,50,.35)}
.pg-ring.frame-silver{background:linear-gradient(140deg,#f3f4f6,#8b9299);box-shadow:0 10px 30px rgba(200,205,212,.3)}
.pg-ring.frame-gold{background:linear-gradient(140deg,#fff0a0,#d9a21b 55%,#8a5d00);box-shadow:0 10px 34px rgba(250,190,40,.45)}
.pg-ring.frame-neon{background:linear-gradient(135deg,#00f5ff,#ff00e5);box-shadow:0 0 22px rgba(0,245,255,.55),0 0 34px rgba(255,0,229,.35)}
.pg-ring.frame-fire{background:conic-gradient(from 200deg,#ff2a00,#ffb300,#ff6a00,#ff2a00);box-shadow:0 8px 34px rgba(255,90,0,.55)}
.pg-ring.frame-ice{background:linear-gradient(140deg,#d8f6ff,#4aa8ff 60%,#1e5bd8);box-shadow:0 8px 30px rgba(90,180,255,.5)}
.pg-ring.frame-carbon{background:repeating-linear-gradient(45deg,#1a1a1a 0 3px,#2c2c2c 3px 6px);box-shadow:0 0 0 1px #3a3a3a,0 10px 28px rgba(0,0,0,.6)}
.pg-ring.frame-rainbow{background:conic-gradient(#ff3b3b,#ffd23b,#4cff6a,#35e0ff,#5b5bff,#ff3bd5,#ff3b3b);box-shadow:0 8px 32px rgba(150,100,255,.45)}
.pg-ring.frame-diamond{background:conic-gradient(from 30deg,#ffffff,#9fe8ff,#ffffff,#c8b5ff,#ffffff);box-shadow:0 0 26px rgba(190,240,255,.7)}
.pg-hero.th-night{background:linear-gradient(165deg,#0f2a5a,#070b16 70%)}
.pg-hero.th-blood{background:linear-gradient(165deg,#5a0f1b,#0b0b0c 72%)}
.pg-hero.th-dawn{background:linear-gradient(165deg,#5b3a8a,#e0856a 55%,#1a0f1f)}
.pg-hero.th-sunset{background:linear-gradient(165deg,#ff8a3d,#b02a6b 55%,#1a0b1f)}
.pg-hero.th-ocean{background:linear-gradient(165deg,#0e7490,#0b2b4a 60%,#06101c)}
.pg-hero.th-carbon{background:repeating-linear-gradient(45deg,#121212 0 5px,#1b1b1b 5px 10px)}
.pg-hero.th-circuit{background:linear-gradient(rgba(0,255,160,.09) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(0,255,160,.09) 1px,transparent 1px) 0 0/22px 22px,#07140f}
.pg-hero.th-goldblack{background:linear-gradient(165deg,#3a2c06,#050505 70%);box-shadow:inset 0 0 0 1px rgba(250,200,60,.35)}
@media(min-width:1000px){.pg-cols .pg-hero[class*="th-"]{border-color:rgba(255,255,255,.12)}}
/* collections par marque */
#brands.pf-page{max-width:none;margin:0}
.br-sum{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:6px 2px 10px}.br-sum b{font:700 16px var(--display)}.br-sum span{color:var(--muted);font-size:13px}
.br-group{padding:0;margin-top:10px}
.br-row{padding:14px 16px;border-top:1px solid var(--line);cursor:pointer;transition:background .2s}.br-row:first-child{border-top:0}.br-row:hover{background:var(--panel2)}
.br-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.br-top b{font-size:15px}.br-cnt{color:var(--muted);font-size:13px}
.br-bar{position:relative;height:8px;border-radius:99px;background:rgba(255,255,255,.07);margin:10px 0 8px;overflow:hidden}
.br-bar u{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--btn-a),var(--accent));transform-origin:0 50%;animation:barGrow .9s cubic-bezier(.2,.8,.2,1) both}
.br-tick{position:absolute;top:0;bottom:0;width:2px;background:rgba(0,0,0,.55)}.br-tick.ok{background:#ffd76a}.br-tick.got{background:#4fc98c}
.br-ms{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.br-m{font-size:11.5px;color:var(--muted);padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.05)}.br-m.ok{color:#ffd76a;background:rgba(255,215,106,.12)}.br-m.got{color:#6fe0a6;background:rgba(80,200,140,.14)}
.br-claim{margin-left:auto;padding:7px 16px;border-radius:99px;font-size:12.5px}
/* boutique */
.sh-coins{display:inline-flex;align-items:center;gap:6px;padding:0 14px;height:40px;border-radius:99px;border:1px solid var(--line);background:var(--panel);font:700 14px var(--display);color:#ffd76a}
.sh-tabs{margin:12px 0 4px}.sh-tabs button{flex:none}
.sh-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
@media(min-width:700px){.sh-grid{grid-template-columns:repeat(3,1fr)}}
.sh-item{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:20px;border:1px solid var(--line);background:var(--panel);transition:border-color .2s,transform .2s}
.sh-item.on{border-color:rgba(var(--accent-rgb),.6);background:linear-gradient(160deg,rgba(var(--accent-rgb),.12),var(--panel) 70%)}
.sh-prev{display:grid;place-items:center;min-height:92px;border-radius:14px;background:var(--bg);overflow:hidden;text-align:center;padding:8px}
.sh-prev.c-theme{font:700 15px var(--display);color:#fff;min-height:92px}
.sh-prev.c-theme[class*="th-"]{background-clip:padding-box}
.sh-prev .pg-ring.sm .avatar.big{width:62px;height:62px;font-size:26px}
.sh-dot{width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.sh-emoji{font-size:40px;line-height:1}
.sh-name{font-weight:600;font-size:14px;text-align:center}
.sh-btn{width:100%;border-radius:12px;padding:10px 8px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;white-space:nowrap}
.sh-btn.on{border-color:rgba(var(--accent-rgb),.6);color:var(--accent)}
.sh-prev.th-night{background:linear-gradient(165deg,#0f2a5a,#070b16 70%)}.sh-prev.th-blood{background:linear-gradient(165deg,#5a0f1b,#0b0b0c 72%)}.sh-prev.th-dawn{background:linear-gradient(165deg,#5b3a8a,#e0856a 55%,#1a0f1f)}
.sh-prev.th-sunset{background:linear-gradient(165deg,#ff8a3d,#b02a6b 55%,#1a0b1f)}.sh-prev.th-ocean{background:linear-gradient(165deg,#0e7490,#0b2b4a 60%,#06101c)}.sh-prev.th-carbon{background:repeating-linear-gradient(45deg,#121212 0 5px,#1b1b1b 5px 10px)}
.sh-prev.th-circuit{background:linear-gradient(rgba(0,255,160,.09) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(0,255,160,.09) 1px,transparent 1px) 0 0/22px 22px,#07140f}.sh-prev.th-goldblack{background:linear-gradient(165deg,#3a2c06,#050505 70%);box-shadow:inset 0 0 0 1px rgba(250,200,60,.35)}

.sh-cat{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:-6px}
.sh-name{margin-top:-2px}
.sh-prev.c-titlebox{display:flex;flex-direction:column;gap:2px;justify-content:center}
.sh-who{font:700 16px var(--display);color:#fff}
.sh-now{margin:12px 0 4px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:var(--panel)}
.sh-now-h{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sh-now-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}.sh-now-row:first-of-type{border-top:0}.sh-now-row span{color:var(--muted)}.sh-now-row b{font-weight:600;text-align:right}

/* ---------- Message « CarMasters a déménagé » (ancienne adresse) ---------- */
.moved{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;background:rgba(6,6,7,.96);backdrop-filter:blur(8px)}
.moved-box{width:min(440px,100%);background:var(--panel);border:1px solid rgba(var(--accent-rgb),.4);border-radius:24px;padding:26px 22px 22px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(var(--accent-rgb),.15);display:flex;flex-direction:column;gap:14px}
.moved-ico{font-size:44px;line-height:1}
.moved-box h2{margin:0;font:800 24px var(--display)}
.moved-box p{margin:0;color:#cfd6d3;font-size:14px;line-height:1.5}
.moved-steps{margin:2px 0;padding:0;list-style:none;counter-reset:s;text-align:left;display:flex;flex-direction:column;gap:10px}
.moved-steps li{counter-increment:s;position:relative;padding-left:36px;font-size:13.5px;line-height:1.45;color:#cfd6d3}
.moved-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--accent-bg);color:var(--accent);font-weight:800;font-size:13px;display:grid;place-items:center}
.moved-steps b{color:#fff}
.btn.moved-go{display:block;text-decoration:none;text-align:center;padding:14px;border-radius:14px}
.moved-box .btn.ghost{padding:12px;border-radius:14px}
.moved-note{font-size:12px!important;color:var(--muted)!important}
.is-moved body>*:not(.moved){pointer-events:none}

.btn.br-all{width:100%;margin:2px 0 10px;padding:14px;border-radius:14px;font-size:15px}
#mode button.has-new::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-left:6px;vertical-align:middle}

/* ---------- Tutoriel de premier lancement ---------- */
.tuto{position:fixed;inset:0;z-index:140;display:flex;flex-direction:column;background:radial-gradient(ellipse 80% 50% at 50% 0,rgba(var(--accent-rgb),.22),transparent 70%),#0b0b0c;padding:max(16px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));opacity:0;transition:opacity .28s}
.tuto.in{opacity:1}.tuto.out{opacity:0;pointer-events:none}
.tuto-skip{align-self:flex-end;border:0;background:none;color:var(--muted);font:600 14px var(--body);padding:8px 10px;cursor:pointer;transition:opacity .2s}
.tuto-skip.gone{opacity:0;pointer-events:none}
.tuto-stage{position:relative;flex:1;width:100%;max-width:440px;margin:0 auto;min-height:0}
.tuto-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:0 4px;opacity:0;visibility:hidden;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
.tuto-slide.before{transform:translateX(-44px)}.tuto-slide.after{transform:translateX(44px)}
.tuto-slide.cur{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.tuto-slide h2{font:800 28px/1.15 var(--display);margin:22px 0 4px}
.tuto-slide p{color:#c3cac7;font-size:15.5px;line-height:1.5;max-width:34ch;margin:0}
.tuto-foot{width:100%;max-width:440px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.tuto-dots{display:flex;gap:8px}
.tuto-dots i{width:8px;height:8px;border-radius:99px;background:#34383a;cursor:pointer;transition:width .3s cubic-bezier(.2,.8,.2,1),background .3s}
.tuto-dots i.on{width:26px;background:var(--accent)}
.tuto-next{width:100%;padding:15px;font-size:16px;border-radius:16px}
.ta-art{position:relative;width:100%;height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* 1. éventail de cartes */
.ta-fan{height:210px}
.ta-card{position:absolute;left:50%;top:50%;width:98px;height:136px;margin:-68px 0 0 -49px;border-radius:14px;border:2px solid var(--c);background:linear-gradient(160deg,#202325,#0f1011);box-shadow:0 12px 28px rgba(0,0,0,.55);color:var(--c);display:flex;flex-direction:column;align-items:center;padding:9px 8px;gap:6px;opacity:0;--r:calc((var(--i) - 1) * 14deg);--x:calc((var(--i) - 1) * 58px);--y:calc((var(--i) - 1) * (var(--i) - 1) * 10px)}
.ta-chip{align-self:flex-start;width:30px;height:7px;border-radius:99px;background:var(--c)}
.ta-car{margin-top:16px;width:70px}.ta-car svg{width:100%;display:block}
.ta-card u{display:block;width:70%;height:5px;border-radius:99px;background:#34383a;margin-top:auto}.ta-card u.s{width:45%;margin-top:0;background:#26292b}
.tuto-slide.cur .ta-card{animation:taFan .8s cubic-bezier(.2,.9,.25,1.15) both;animation-delay:calc(.15s + var(--i) * .12s)}
.tuto-slide.cur .ta-card:nth-child(3){filter:drop-shadow(0 0 14px var(--c))}
@keyframes taFan{from{opacity:0;transform:translate(0,30px) rotate(0) scale(.7)}to{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
/* 2. le paquet */
.ta-pack{position:relative;overflow:hidden;width:124px;height:182px;border-radius:16px;background:linear-gradient(160deg,#2a2d2f,#0c0d0e);border:1px solid #3a3e41;box-shadow:0 0 44px rgba(var(--accent-rgb),.38);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff}
.ta-pack svg{width:62px;display:block}.ta-pack i{font:800 10px var(--display);letter-spacing:.3em;font-style:normal}
.ta-shine{position:absolute;inset:-60% -40%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.3) 50%,transparent 58%);animation:shine 3.4s infinite}
.tuto-slide.cur .ta-pack{animation:taPop .7s cubic-bezier(.34,1.56,.64,1) both,taFloat 3.2s ease-in-out .8s infinite}
.ta-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.ta-pills span{font-size:13px;color:#c3cac7;background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:7px 13px;opacity:0}.ta-pills b{color:var(--accent);font-weight:800}
.tuto-slide.cur .ta-pills span{animation:taRise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:.55s}.tuto-slide.cur .ta-pills span:nth-child(2){animation-delay:.7s}
@keyframes taPop{from{opacity:0;transform:scale(.6) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes taFloat{50%{transform:translateY(-7px)}}
@keyframes taRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* 3. les raretés */
.ta-rar{gap:7px;align-items:stretch;max-width:280px;margin:0 auto}
.ta-r{display:flex;align-items:center;gap:12px;padding:9px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font:700 15px var(--body);color:var(--c);text-align:left;opacity:0}
.ta-r::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.ta-r.top{border-color:var(--c)}
.tuto-slide.cur .ta-r{animation:taSlideIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.1s + var(--i) * .09s)}
.tuto-slide.cur .ta-r.top{animation:taSlideIn .5s cubic-bezier(.2,.8,.2,1) .65s both,taGlow 2.2s ease-in-out 1.2s infinite}
@keyframes taSlideIn{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes taGlow{50%{box-shadow:0 0 22px rgba(255,226,122,.45)}}
/* 4. collections / échanges / succès */
.ta-feat{gap:10px;height:auto;align-items:stretch}
.ta-f{display:flex;gap:14px;align-items:center;text-align:left;padding:12px 14px;border-radius:16px;background:var(--panel);border:1px solid var(--line);opacity:0}
.ta-f em{font-style:normal;font-size:24px;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--accent-bg);flex:none}
.ta-f b{display:block;font-size:15px}.ta-f span{display:block;color:var(--muted);font-size:13px;line-height:1.4;margin-top:2px}
.tuto-slide.cur .ta-f{animation:taRise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.1s + var(--i) * .13s)}
/* 5. à toi de jouer */
.ta-go{height:200px}
.ta-logo{width:96px;height:96px;display:grid;place-items:center;border-radius:28px;background:linear-gradient(160deg,#26282a,#101112);border:1px solid #3a3e41;box-shadow:0 0 50px rgba(var(--accent-rgb),.4);position:relative;z-index:1}
.ta-logo svg{width:60px}
.ta-ring{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:28px;border:2px solid var(--accent);opacity:0}
.tuto-slide.cur .ta-logo{animation:taPop .6s cubic-bezier(.34,1.56,.64,1) both}
.tuto-slide.cur .ta-ring{animation:taRing 2.2s ease-out .4s infinite}.tuto-slide.cur .ta-ring.r2{animation-delay:1.3s}
@keyframes taRing{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(2.3)}}
/* le paquet mis en avant après le tutoriel */
.pack.tuto-hint{animation:tutoPulse 1.5s ease-in-out infinite}
@keyframes tutoPulse{50%{transform:scale(1.06);filter:drop-shadow(0 0 46px rgba(var(--accent-rgb),.85))}}
.tuto-bubble{margin:-14px 0 20px;padding:9px 16px;border-radius:99px;background:var(--text);color:#0b0b0c;font:700 14px var(--body);animation:tutoBob 1.4s ease-in-out infinite}
@keyframes tutoBob{50%{transform:translateY(-5px)}}
@media(max-height:640px){.ta-art{height:180px;transform:scale(.82)}.tuto-slide h2{margin-top:6px;font-size:24px}}
.ta-rar{height:auto;gap:6px}.ta-r{padding:8px 16px;font-size:14.5px}

/* ---------- Modération : signalement, blocage ---------- */
.md-opts{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.md-opt{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:600 14.5px var(--body);cursor:pointer;transition:border-color .2s,background .2s}
.md-opt::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #4a4f52;transition:border-color .2s,background .2s,box-shadow .2s}
.md-opt.on{border-color:rgba(var(--accent-rgb),.6);background:var(--accent-bg)}
.md-opt.on::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--panel2)}
.md-note{resize:none;margin-bottom:12px;font-family:inherit}
.fr-ban{padding-left:12px;padding-right:12px}

/* ---------- Case « Je ne suis pas un robot » ---------- */
.botcheck{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;margin:2px 0 4px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:600 14.5px var(--body);cursor:pointer;text-align:left;transition:border-color .25s,background .25s}
.botcheck:hover{border-color:#4a4f52}
.botcheck.ok{border-color:rgba(var(--accent-rgb),.5);background:var(--accent-bg)}
.bc-box{position:relative;flex:none;width:26px;height:26px;border-radius:7px;border:2px solid #5a6063;display:grid;place-items:center;transition:background .25s,border-color .25s}
.bc-spin{position:absolute;inset:2px;border-radius:50%;border:2.5px solid rgba(var(--accent-rgb),.25);border-top-color:var(--accent);opacity:0;animation:bcSpin .8s linear infinite}
@keyframes bcSpin{to{transform:rotate(360deg)}}
.bc-tick{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .35s ease .05s}
.botcheck.busy .bc-spin{opacity:1}.botcheck.busy .bc-box{border-color:transparent}
.botcheck.ok .bc-box{background:var(--accent);border-color:var(--accent)}.botcheck.ok .bc-tick{stroke-dashoffset:0}
.bc-brand{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.bc-txt{white-space:nowrap}@media(max-width:420px){.bc-brand{display:none}}

/* ---------- Page d'accueil (visiteurs non connectés) ---------- */
.auth-wrap{width:min(1100px,100%);margin:auto;display:flex;flex-direction:column;align-items:center;gap:30px}
.auth.returning .lp{display:none}
.lp{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding-top:6px}
.lp>*{animation:lpUp .7s cubic-bezier(.2,.8,.2,1) both}
.lp>:nth-child(2){animation-delay:.06s}.lp>:nth-child(3){animation-delay:.12s}.lp>:nth-child(4){animation-delay:.18s}.lp>:nth-child(5){animation-delay:.3s}.lp>:nth-child(n+6){animation-delay:.38s}
@keyframes lpUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.lp-eyebrow{font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--accent-bg);border:1px solid rgba(var(--accent-rgb),.35);padding:7px 14px;border-radius:99px}
.lp h1{font:800 clamp(34px,9.5vw,54px)/1.04 var(--display);margin:0;letter-spacing:-.01em}.lp h1 em{font-style:normal;color:var(--accent)}
.lp-lead{color:#c3cac7;font-size:16px;line-height:1.5;max-width:44ch;margin:0}
.lp-fan{position:relative;width:100%;height:230px}
.lp-fan .ta-card{width:118px;height:164px;margin:-82px 0 0 -59px;--x:calc((var(--i) - 1) * 76px);animation:taFan .9s cubic-bezier(.2,.9,.25,1.15) both,lpBob 4.5s ease-in-out 1.4s infinite;animation-delay:calc(.2s + var(--i) * .12s),calc(1.4s + var(--i) * .3s)}
.lp-fan .ta-card:nth-child(3){filter:drop-shadow(0 0 16px var(--c))}
.lp-fan .ta-car{width:84px;margin-top:22px}
@keyframes lpBob{50%{margin-top:-90px}}
.lp-cta{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:340px}
.lp-cta .btn{width:100%;padding:15px;font-size:16px;border-radius:16px}
.lp-link{background:none;border:0;color:var(--muted);font:600 14px var(--body);padding:10px;cursor:pointer}.lp-link:hover{color:var(--text)}
.lp-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.lp-stats>div{padding:14px 6px;display:flex;flex-direction:column;gap:2px}.lp-stats>div+div{border-left:1px solid var(--line)}
.lp-stats b{font:800 22px var(--display)}.lp-stats span{color:var(--muted);font-size:12.5px}
.lp-h{font:700 13px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 0}
.lp-steps{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:10px;text-align:left}
.lp-steps li{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.lp-steps li>b{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);font:800 14px var(--display)}
.lp-steps strong{display:block;font-size:15px}.lp-steps span{display:block;color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:2px}
.lp-rar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lp-rar span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--c);font:700 13px var(--body)}
.lp-rar i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}.lp-rar em{font-style:normal;color:var(--muted);font-weight:600}
.lp-note{color:var(--muted);font-size:12px;line-height:1.5;max-width:52ch;margin:0 0 6px}
@media(min-width:960px){
  .auth-wrap{flex-direction:row;align-items:center;justify-content:space-between;gap:64px}
  .lp{align-items:flex-start;text-align:left;max-width:580px}
  .lp-fan{height:270px}.lp-fan .ta-card{left:30%}
  .lp-cta{flex-direction:row;max-width:none;gap:14px;width:auto}.lp-cta .btn{width:auto;padding:15px 30px}
  .lp-rar{justify-content:flex-start}.lp-stats{max-width:460px}
  .auth-card{flex:none;margin:0!important}
}
.lp-brand{margin-bottom:2px}.lp-brand .mark{width:38px;height:38px}.lp-brand .wm{font-size:20px}
@media(min-width:960px){.auth-wrap{align-items:flex-start;padding-top:2vh}.auth-card{position:sticky;top:20px}.auth.returning .auth-wrap{align-items:center;justify-content:center}.auth.returning .auth-card{position:static}}

/* ---------- Panneau « Aujourd'hui » : bonus quotidien et défis du jour ---------- */
.dq{width:100%;max-width:440px;margin:26px auto 0;text-align:left;display:flex;flex-direction:column;gap:12px}
.dq.hidden{display:none}
.dq-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px}
.dq-head h2{font:800 21px var(--display);margin:0}
.dq-left{font-size:12.5px;color:var(--muted)}
.dq-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px}
.dq-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dq-top b{font-size:14.5px}
.dq-streak{font-size:12.5px;font-weight:700;color:var(--accent);background:var(--accent-bg);border-radius:99px;padding:4px 11px;white-space:nowrap}
.dq-streak.sub{color:var(--muted);background:var(--panel2)}
.dq-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dq-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);font-size:11px;color:var(--muted)}
.dq-day b{font:800 15px var(--display);color:var(--text)}
.dq-day.done{background:var(--accent-bg);border-color:rgba(var(--accent-rgb),.45)}.dq-day.done b{color:var(--accent)}
.dq-day.today{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);animation:dqPulse 1.8s ease-in-out infinite}
.dq-day i{position:absolute;top:-7px;right:-3px;font-style:normal;font-size:13px}
.dq:not(.still) .dq-day{animation:dqPop .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i) * .05s)}
.dq:not(.still) .dq-day.today{animation:dqPop .5s cubic-bezier(.34,1.56,.64,1) both,dqPulse 1.8s ease-in-out .6s infinite;animation-delay:calc(var(--i) * .05s),.6s}
@keyframes dqPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes dqPulse{50%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),.06)}}
.dq-act{margin-top:12px}.dq-act .btn{width:100%}
.dq-done{margin:12px 0 0;text-align:center;color:var(--muted);font-size:13px}
.dq-q{display:flex;align-items:center;gap:12px;padding:11px 0}.dq-q+.dq-q{border-top:1px solid var(--line)}
.dq-ic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--panel2);display:grid;place-items:center;font-size:19px}
.dq-body{flex:1;min-width:0}.dq-body b{display:block;font-size:14px}
.dq-bar{height:6px;border-radius:99px;background:var(--panel2);overflow:hidden;margin-top:8px}
.dq-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--btn-b),var(--btn-a));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.dq-n{font-size:12px;color:var(--muted);margin-top:5px}
.dq-q .btn{flex:none}
.dq-ok{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);font-weight:800}
.dq-q.claimed .dq-body{opacity:.55}
.dq-hint{margin:6px 0 0;font-size:12.5px;color:var(--muted);text-align:center}
.dq-bonus .dq-ic{background:var(--accent-bg)}
.dq-peek{margin:2px 0 14px;padding:9px 16px;border-radius:99px;border:1px solid rgba(var(--accent-rgb),.5);background:var(--accent-bg);color:var(--accent);font:700 13.5px var(--body);cursor:pointer;animation:dqPeek 2.2s ease-in-out infinite}
.dq-peek.hidden{display:none}
@keyframes dqPeek{50%{transform:translateY(-3px);box-shadow:0 6px 18px rgba(var(--accent-rgb),.25)}}

/* le panneau « Aujourd'hui » vit dans une fenêtre ; sur la page Paquets il ne reste qu'une pastille discrète */
.dq-sheet{max-width:460px;padding-top:26px}.dq-sheet .dq{margin:0}
.dq-peek.quiet{animation:none;background:none;border:0;color:var(--muted);font-weight:600;font-size:13px;padding:4px 8px;margin:0 0 8px}
.dq-peek.quiet:hover{color:var(--text)}

/* ---------- Notifications (Réglages) ---------- */
.nf-row{display:flex;align-items:center;gap:14px;padding:14px 16px}.nf-row+.nf-row{border-top:1px solid var(--line)}
.nf-tx{flex:1;min-width:0}.nf-tx b{display:block;font-size:15px}.nf-tx span{display:block;color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:2px}
.nf-sw{flex:none;position:relative;width:50px;height:30px;border-radius:99px;border:0;background:#3a3e41;cursor:pointer;padding:0;transition:background .25s}
.nf-sw i{position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.nf-sw.on{background:var(--accent)}.nf-sw.on i{transform:translateX(20px)}
.nf-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
/* ---------- Événements ---------- */
.dq-ev{border-color:rgba(var(--accent-rgb),.4);background:linear-gradient(160deg,rgba(var(--accent-rgb),.12),var(--panel) 60%)}
.dq-evtext{margin:0 0 8px;font-size:13.5px;color:#d3dad7;line-height:1.45}
.dq-evbrand{margin:0 0 10px;font-size:12.5px;color:var(--accent);line-height:1.4}
.dq-evprize{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.ev-form{gap:10px}.ev-f{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);font-weight:600}.ev-f.hidden{display:none}
.ev-f input,.ev-f select{width:100%}