/* MOTORAUTO — fusion, marché de cartes, souhaits, Plus ou moins, quiz, succès, frise, nouveautés, mentions, abonnements. */
/* ---------- communs ---------- */
.mg-card { display: grid; gap: .9rem; padding: 1.2rem; border-radius: 20px; border: 1px solid var(--stroke-line); background: var(--bg-surface); max-width: 720px; margin-inline: auto; }
.mg-rules { font-size: .88rem; color: var(--color-muted); }
.mg-rules b { color: var(--color-ink); margin-right: .35rem; }
.mg-best b { color: var(--accent); }
.mg-board { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; max-width: 520px; }
.mg-board li { display: grid; grid-template-columns: 2rem 1fr auto auto; gap: .5rem; align-items: baseline; padding: .5rem .7rem; border-radius: 12px; background: var(--bg-surface); border: 1px solid var(--stroke-line); }
.mg-board li.me { border-color: var(--accent); }
.mg-board .mg-rk { font-family: var(--font-tech, inherit); color: var(--color-muted); }
.mg-board a { color: var(--color-ink); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-board small { color: var(--color-muted); }
/* ---------- fusion ---------- */
.fz-intro { max-width: 640px; margin: 0 0 1rem; }
.fz-intro p { margin: .2rem 0; }
.fz-block { margin-bottom: 1rem; }
.fz-arrow { color: var(--accent); margin-inline: .3rem; }
.fz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .6rem; }
.fz-pick { position: relative; padding: .25rem; border-radius: 14px; border: 2px solid transparent; background: transparent; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.fz-pick:hover { border-color: var(--stroke-line); }
.fz-pick.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.fz-x { position: absolute; right: .35rem; top: .35rem; background: rgba(0,0,0,.72); color: #fff; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .1rem .45rem; }
.fz-sel { position: absolute; left: .35rem; top: .35rem; background: var(--accent); color: var(--on-accent, #fff); font-size: .72rem; font-weight: 800; border-radius: 999px; min-width: 1.35rem; text-align: center; padding: .1rem .3rem; }
.fz-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.fz-overlay { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(8,8,14,.88), rgba(0,0,0,.96)); overflow: hidden; }
.fz-stage { position: relative; width: min(92vw, 420px); aspect-ratio: 1; display: grid; place-items: center; }
.fz-ring { position: absolute; inset: 0; display: grid; place-items: center; }
.fz-fly { position: absolute; width: 84px; transform: rotate(var(--a)) translateY(-150px) rotate(calc(var(--a) * -1)); transition: transform 1s cubic-bezier(.6,-0.2,.7,1), opacity .5s .75s, filter 1s; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.fz-overlay.go .fz-fly { transform: rotate(calc(var(--a) + 540deg)) translateY(0) rotate(calc((var(--a) + 540deg) * -1)) scale(.35); opacity: 0; filter: blur(2px) brightness(2); }
.fz-flash { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 80px 40px var(--accent); }
.fz-overlay.go .fz-flash { animation: fzFlash .7s 1s ease-out forwards; }
@keyframes fzFlash { 0% { opacity: 0; transform: scale(1); } 40% { opacity: 1; transform: scale(14); } 100% { opacity: 0; transform: scale(30); } }
.fz-result { position: relative; z-index: 2; text-align: center; color: #fff; display: grid; gap: .5rem; justify-items: center; animation: fzPop .5s cubic-bezier(.2,1.4,.4,1); }
.fz-result .tcg-mini { width: min(52vw, 220px); }
.fz-result h3 { margin: .3rem 0 0; font-size: 1.4rem; }
.fz-result p { margin: 0; opacity: .85; }
@keyframes fzPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fz-fly, .fz-flash, .fz-result { animation: none !important; transition: none !important; } }
/* ---------- marché ---------- */
.mk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.mk-bal { font-size: 1.1rem; display: inline-flex; gap: .3rem; align-items: center; padding: .3rem .8rem; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--stroke-line); }
.mk-note { max-width: 720px; }
.mk-list { display: grid; gap: .6rem; margin-top: .6rem; }
.mk-item { display: grid; grid-template-columns: 88px 1fr auto; gap: .8rem; align-items: center; padding: .6rem; border-radius: 16px; border: 1px solid var(--stroke-line); background: var(--bg-surface); }
.mk-item.sold { opacity: .75; }
.mk-card .tcg-mini { width: 88px; }
.mk-info { display: grid; gap: .15rem; min-width: 0; }
.mk-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-info small, .mk-buy small { color: var(--color-muted); font-size: .78rem; }
.mk-info a { color: inherit; }
.mk-buy { display: grid; gap: .25rem; justify-items: end; text-align: right; }
.mk-price { display: inline-flex; align-items: center; gap: .3rem; font-size: 1.15rem; }
.mk-form { display: grid; gap: .6rem; padding: 1rem; border-radius: 16px; border: 1px solid var(--accent); background: var(--bg-surface); margin-bottom: 1rem; max-width: 520px; }
.mk-sel { display: flex; gap: .8rem; align-items: center; }
.mk-sel .tcg-mini { width: 76px; }
.mk-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.mk-row input { flex: 1 1 120px; min-width: 0; }
@media (max-width: 480px) { .mk-item { grid-template-columns: 70px 1fr; } .mk-card .tcg-mini { width: 70px; } .mk-buy { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; align-items: center; justify-items: stretch; text-align: left; } }
/* ---------- fil des souhaits ---------- */
.wf-top { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.wf-toggle { display: inline-flex; gap: .5rem; align-items: center; cursor: pointer; }
.wf-list { display: grid; gap: .7rem; margin-top: .8rem; }
.wf-row { display: grid; gap: .5rem; padding: .9rem 1rem; border-radius: 16px; border: 1px solid var(--stroke-line); background: var(--bg-surface); }
.wf-row.hot { border-color: var(--accent); }
.wf-row header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wf-who { color: var(--color-ink); text-decoration: none; }
.wf-tag { font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); }
.wf-tag.alt { background: var(--color-secondary, #6366f1); }
.wf-line { display: grid; gap: .25rem; }
.wf-line > small { color: var(--color-muted); }
.wish-chip.rm { cursor: pointer; border: 0; font: inherit; }
/* ---------- Plus ou moins ---------- */
.pm-card { max-width: 820px; }
.pm-bar { display: flex; gap: 1.5rem; align-items: flex-end; }
.pm-bar small { display: block; color: var(--color-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.pm-bar b { font-size: 1.8rem; font-family: var(--font-tech, inherit); }
.pm-gain { margin-left: auto; color: var(--accent); font-size: 1.1rem; animation: fzPop .4s; }
.pm-q { margin: 0; text-align: center; font-size: 1.25rem; font-weight: 700; }
.pm-duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; }
.pm-vs { font-family: var(--font-display, inherit); color: var(--color-muted); font-weight: 800; }
.pm-car { display: grid; gap: .3rem; justify-items: center; padding: .8rem; border-radius: 18px; border: 2px solid var(--stroke-line); background: var(--bg-elevated, var(--bg-surface)); color: inherit; font: inherit; cursor: pointer; text-align: center; transition: transform .2s, border-color .2s; }
.pm-car:not(:disabled):hover { transform: translateY(-3px); border-color: var(--accent); }
.pm-car:disabled { cursor: default; }
.pm-car.win { border-color: #22c55e; background: color-mix(in srgb, #22c55e 14%, var(--bg-surface)); }
.pm-car.lose { opacity: .72; }
.pm-img { width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--bg-core, #111); display: block; }
.pm-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-car b { line-height: 1.2; }
.pm-car small { color: var(--color-muted); }
.pm-val { font-family: var(--font-tech, inherit); font-size: 1.4rem; font-weight: 800; min-height: 1.8rem; color: var(--accent); }
.pm-ok { margin: 0; text-align: center; color: #22c55e; font-weight: 700; }
.pm-over { text-align: center; padding: .8rem; border-radius: 14px; background: color-mix(in srgb, #ef4444 14%, var(--bg-surface)); }
@media (max-width: 560px) { .pm-duel { grid-template-columns: 1fr 1fr; } .pm-vs { display: none; } }
/* ---------- quiz ---------- */
.qz-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; margin: .8rem 0 1.2rem; }
.qz-cat { display: grid; gap: .7rem; padding: 1rem; border-radius: 18px; border: 1px solid var(--stroke-line); background: var(--bg-surface); }
.qz-cat header { display: flex; gap: .8rem; align-items: center; }
.qz-cat header i { font-style: normal; font-size: 1.8rem; }
.qz-cat header small { display: block; color: var(--color-muted); }
.qz-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.qz-lv { display: grid; gap: .1rem; padding: .55rem .3rem; border-radius: 12px; border: 1px solid var(--stroke-line); background: var(--bg-elevated, transparent); color: inherit; font: inherit; cursor: pointer; text-align: center; }
.qz-lv:hover:not(:disabled) { border-color: var(--accent); }
.qz-lv span { font-weight: 700; font-size: .9rem; }
.qz-lv small { color: var(--color-muted); }
.qz-lv.lv2 span { color: #f59e0b; } .qz-lv.lv3 span { color: #ef4444; } .qz-lv.lv1 span { color: #22c55e; }
.qz-head { display: flex; justify-content: space-between; color: var(--color-muted); font-size: .9rem; }
.qz-q { margin: .4rem 0; font-size: 1.35rem; line-height: 1.3; }
.qz-opts { display: grid; gap: .55rem; }
.qz-opt { text-align: left; padding: .85rem 1rem; border-radius: 14px; border: 2px solid var(--stroke-line); background: var(--bg-elevated, var(--bg-surface)); color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.qz-opt:not(:disabled):hover { border-color: var(--accent); }
.qz-opt.good { border-color: #22c55e; background: color-mix(in srgb, #22c55e 16%, var(--bg-surface)); }
.qz-opt.bad { border-color: #ef4444; background: color-mix(in srgb, #ef4444 14%, var(--bg-surface)); }
.qz-end { text-align: center; } .qz-end h2 { font-size: 3rem; margin: 0; font-family: var(--font-tech, inherit); color: var(--accent); }
/* ---------- succès ---------- */
.ac-sum { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: baseline; margin: .8rem 0; }
.ac-sum > span:first-child { font-size: 1.1rem; }
.ac-t { color: var(--color-muted); font-size: .9rem; }
.ac-t.silver b { color: #cbd5e1; } .ac-t.gold b { color: #fbbf24; }
.ac-desc { display: block; font-style: normal; font-size: .7rem; color: var(--color-muted); line-height: 1.25; margin-top: .2rem; }
/* ---------- frise ---------- */
.fr-tools { margin-bottom: .6rem; }
.fr-zoom { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-muted); font-size: .85rem; }
.fr-scroll { overflow: auto; max-height: 68vh; overscroll-behavior: contain; border-radius: 16px; border: 1px solid var(--stroke-line); background: var(--bg-surface); padding-bottom: .8rem; scroll-behavior: smooth; }
.fr-ruler { position: relative; height: 28px; border-bottom: 2px solid var(--stroke-line); }
.fr-tick { position: absolute; bottom: 0; transform: translateX(-50%); font-size: .7rem; color: var(--color-muted); padding-bottom: 6px; }
.fr-tick::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 5px; background: var(--color-muted); }
.fr-tick.big { color: var(--color-ink); font-weight: 700; } .fr-tick.big::after { height: 9px; background: var(--accent); }
.fr-lanes { position: relative; margin-top: 10px; }
.fr-chip { position: absolute; width: 138px; height: 52px; display: flex; align-items: center; gap: .45rem; padding: .25rem .4rem; border-radius: 12px; border: 1px solid var(--stroke-line); background: var(--bg-elevated, var(--bg-surface)); color: inherit; text-decoration: none; overflow: hidden; transition: transform .18s, border-color .18s, z-index 0s; }
.fr-chip:hover, .fr-chip:focus-visible { transform: translateY(-3px) scale(1.04); border-color: var(--accent); z-index: 5; }
.fr-chip img { width: 44px; height: 38px; object-fit: cover; border-radius: 8px; flex: none; }
.fr-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.fr-chip span { display: grid; min-width: 0; line-height: 1.15; }
.fr-chip b { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-chip small { font-size: .68rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-chip.cat-lemans { border-left: 3px solid #f59e0b; } .fr-chip.cat-supercar { border-left: 3px solid #ef4444; } .fr-chip.cat-coup { border-left: 3px solid #6366f1; } .fr-chip.cat-berline { border-left: 3px solid #22c55e; } .fr-chip.cat-break { border-left: 3px solid #0ea5e9; }
/* ---------- nouveautés ---------- */
.nw-list { display: grid; gap: .9rem; max-width: 760px; }
.nw-item { padding: 1.1rem 1.2rem; border-radius: 18px; border: 1px solid var(--stroke-line); background: var(--bg-surface); display: grid; gap: .5rem; }
.nw-item.fresh { border-color: var(--accent); }
.nw-item.draft { border-style: dashed; opacity: .8; }
.nw-item header { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; color: var(--color-muted); font-size: .82rem; }
.nw-kind { font-weight: 700; color: var(--color-ink); }
.nw-new, .nw-draft { font-style: normal; font-size: .7rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); }
.nw-draft { background: var(--color-muted); }
.nw-item h3 { margin: 0; font-size: 1.15rem; }
.nw-body p { margin: .25rem 0; line-height: 1.5; }
.nw-adm { display: flex; gap: .5rem; flex-wrap: wrap; }
.nw-admin { max-width: 760px; margin-bottom: 1rem; border: 1px dashed var(--stroke-line); border-radius: 16px; padding: .8rem 1rem; }
.nw-admin summary { cursor: pointer; font-weight: 700; }
.nw-form { display: grid; gap: .6rem; margin-top: .8rem; }
.nw-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.nw-subs { max-width: 760px; margin-top: 1.4rem; }
.nw-follow-add select { max-width: 320px; }
/* ---------- abonnements, mentions ---------- */
.follow-btns { display: contents; }
.follow-btn.on { border-color: var(--accent); color: var(--accent); }
a.car-mention { display: inline-block; padding: 0 .4em; border-radius: 8px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); text-decoration: none; font-weight: 600; }
a.car-mention:hover, a.car-mention:focus-visible { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.car-peek { position: fixed; z-index: 10000; display: flex; gap: .7rem; align-items: center; padding: .55rem; border-radius: 14px; background: var(--bg-elevated, #1b1b22); border: 1px solid var(--stroke-line); box-shadow: var(--shadow-pop, 0 12px 40px rgba(0,0,0,.45)); color: var(--color-ink); pointer-events: none; }
.car-peek[hidden], .mention-pop[hidden] { display: none; }
.car-peek img { width: 84px; height: 58px; object-fit: cover; border-radius: 10px; flex: none; }
.car-peek div { display: grid; gap: .1rem; min-width: 0; } .car-peek b { font-size: .88rem; } .car-peek small { color: var(--color-muted); } .car-peek em { font-style: normal; color: var(--accent); font-size: .75rem; }
.mention-pop { position: fixed; z-index: 10000; display: grid; border-radius: 14px; overflow: hidden; background: var(--bg-elevated, #1b1b22); border: 1px solid var(--stroke-line); box-shadow: var(--shadow-pop, 0 12px 40px rgba(0,0,0,.45)); }
.mention-pop button { display: grid; gap: .05rem; text-align: left; padding: .55rem .8rem; border: 0; background: transparent; color: var(--color-ink); font: inherit; cursor: pointer; }
.mention-pop button.on, .mention-pop button:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.mention-pop small { color: var(--color-muted); font-size: .72rem; }

/* bouton Nouveautés (barre du haut) : rond, mis en évidence */
#news-btn.news-btn{position:relative}
.news-btn .news-dot{top:-3px;right:-3px;min-width:12px;width:12px;height:12px;padding:0;font-size:0;line-height:0;box-shadow:0 0 0 2.5px var(--bg-core)}
body[data-page="news"] .news-btn,.news-btn[aria-current="page"]{border-color:var(--accent);color:var(--accent)}

.fr-chip.fr-mini{width:12px;height:12px;padding:0;border-radius:50%;background:var(--accent);border:0;box-shadow:0 0 0 1px var(--bg-surface)}
.fr-chip.fr-mini:hover,.fr-chip.fr-mini:focus-visible{transform:scale(1.9);z-index:6}
.fr-ruler{position:sticky;top:0;z-index:3;background:var(--bg-surface)}
.cat-frise-btn{display:inline-flex;align-items:center;gap:.5rem;margin:.2rem 0 .8rem}
.cat-frise-btn svg{width:18px;height:18px}

/* Jouer : onglets + sous-onglets */
.play-bar{display:grid;gap:.55rem;margin:.2rem 0 1rem}
.play-sub{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding:.1rem 0 .2rem;-webkit-overflow-scrolling:touch}
.play-sub::-webkit-scrollbar{display:none}
.play-sub-tab{flex:none;position:relative;padding:.4rem .85rem;border-radius:999px;border:1px solid var(--stroke-line);background:var(--bg-surface);color:var(--color-muted);font-size:.84rem;font-weight:600;text-decoration:none;white-space:nowrap}
.play-sub-tab:hover{color:var(--color-ink);border-color:var(--accent)}
.play-sub-tab.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
.play-sub-tab.has-dot::after{content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg-core,#09090b)}
.play-sub-tab.active.has-dot::after{background:var(--on-accent,#fff)}

/* lisibilité avec les thèmes personnalisés */
.page-tabs.fit .page-tab.active{color:color-mix(in srgb,var(--accent) 62%,var(--color-ink))}
.secondary-destructive-btn{color:color-mix(in srgb,#dc2626 60%,var(--color-ink));background:color-mix(in srgb,#ef4444 12%,var(--bg-surface))}
.secondary-destructive-btn:hover{background:#dc2626;color:#fff}

/* barre Jouer : onglets pleine largeur, sous-onglets de même style */
.play-bar{display:grid;gap:.5rem;margin:.2rem 0 1rem}
.play-bar .play-subtabs .tl{font-size:.74rem}

/* ===== Marché de cartes (refonte) ===== */
.mkt-hero { display: grid; gap: .7rem; padding: 1rem; margin-bottom: .9rem; border-radius: 20px; border: 1px solid var(--stroke-line); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--bg-surface)), var(--bg-surface) 70%); }
.mkt-stats { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: .6rem; }
.mkt-stat { display: grid; gap: .15rem; padding: .6rem .8rem; border-radius: 14px; background: color-mix(in srgb, var(--bg-core) 55%, transparent); border: 1px solid var(--stroke-line); min-width: 0; }
.mkt-stat small { color: var(--color-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.mkt-stat b, .mkt-stat > span { font-size: 1.35rem; font-weight: 800; display: inline-flex; align-items: center; gap: .35rem; }
.mkt-stat b i { font-style: normal; font-size: .85rem; color: var(--color-muted); font-weight: 600; }
.mkt-stat.main > span b { font-size: 1.7rem; }
.mkt-note { margin: 0; color: var(--color-muted); font-size: .82rem; max-width: 760px; }
.mkt-tabs { margin: 0 0 1rem; }
.mkt-tabs .page-tab { cursor: pointer; font: inherit; }
.mkt-tools { display: grid; grid-template-columns: 1fr auto; gap: .6rem; margin-bottom: .6rem; }
.mkt-chips { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding: .1rem 0 .7rem; }
.mkt-chips::-webkit-scrollbar { display: none; }
.mkt-chip { flex: none; padding: .38rem .9rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--mk) 55%, var(--stroke-line)); background: color-mix(in srgb, var(--mk) 8%, var(--bg-surface)); color: var(--color-ink); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mkt-chip:hover { background: color-mix(in srgb, var(--mk) 18%, var(--bg-surface)); }
.mkt-chip.on { background: var(--mk); border-color: var(--mk); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .9rem; }
.mkt-card { --mk: #94a3b8; position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--mk) 45%, var(--stroke-line)); background: var(--bg-surface); box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--mk) 70%, transparent); transition: transform .2s, box-shadow .2s; }
.mkt-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -16px color-mix(in srgb, var(--mk) 80%, transparent); }
.mkt-card.own { outline: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -4px; }
.mkt-art { padding: .8rem .8rem .2rem; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--mk) 26%, transparent), transparent 70%); display: grid; place-items: center; }
.mkt-art .tcg-mini { width: 100%; max-width: 150px; }
.mkt-body { display: grid; gap: .2rem; padding: .6rem .8rem .85rem; align-content: start; }
.mkt-rar { justify-self: start; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .12rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--mk) 22%, transparent); color: color-mix(in srgb, var(--mk) 70%, var(--color-ink)); }
.mkt-name { font-size: .98rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-seller { color: var(--color-muted); font-size: .76rem; }
.mkt-seller a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mkt-price { display: flex; align-items: center; gap: .4rem; font-size: 1.4rem; font-weight: 800; margin: .25rem 0 .35rem; }
.mkt-btn { width: 100%; justify-content: center; min-height: 42px; }
.mkt-sure { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; animation: mktPulse 1s ease-in-out infinite; }
@keyframes mktPulse { 50% { box-shadow: 0 0 0 5px rgba(22,163,74,.25); } }
.mkt-empty { display: grid; justify-items: center; gap: .35rem; text-align: center; padding: 2.4rem 1rem; border-radius: 20px; border: 1px dashed var(--stroke-line); color: var(--color-muted); }
.mkt-empty svg { opacity: .7; margin-bottom: .3rem; } .mkt-empty b { color: var(--color-ink); font-size: 1rem; }
.mkt-sub { display: flex; align-items: baseline; gap: .6rem; margin: 1.2rem 0 .6rem; font-size: 1.05rem; } .mkt-sub span { color: var(--color-muted); font-size: .85rem; font-weight: 600; }
.mkt-sell { --mk: #94a3b8; display: grid; grid-template-columns: 150px 1fr; gap: 1.1rem; align-items: center; padding: 1rem; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--mk) 55%, var(--stroke-line)); background: linear-gradient(135deg, color-mix(in srgb, var(--mk) 14%, var(--bg-surface)), var(--bg-surface) 65%); margin-bottom: .6rem; }
.mkt-sell-art .tcg-mini { width: 100%; }
.mkt-sell-f { display: grid; gap: .45rem; min-width: 0; }
.mkt-sell-f label { font-weight: 700; font-size: .9rem; } .mkt-sell-f label small { color: var(--color-muted); font-weight: 500; }
.mkt-sell-f input[type=range] { width: 100%; accent-color: var(--mk); }
.mkt-sell .mk-hint { color: var(--color-muted); } .mkt-sell .mk-hint b { color: var(--color-ink); font-size: 1.05rem; }
.mkt-pick-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.mkt-sold { display: grid; gap: .5rem; }
.mkt-sold-row { display: grid; grid-template-columns: 52px 1fr auto auto; gap: .7rem; align-items: center; padding: .45rem .7rem; border-radius: 14px; border: 1px solid var(--stroke-line); background: var(--bg-surface); border-left: 4px solid var(--mk); }
.mkt-sold-art .tcg-mini { width: 44px; } .mkt-sold-row em { font-style: normal; color: var(--color-muted); font-size: .78rem; } .mkt-sold-gain { display: inline-flex; gap: .3rem; align-items: center; color: #16a34a; font-weight: 800; }
@media (max-width: 520px) {
  .mkt-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; } .mkt-stats { grid-template-columns: 1fr 1fr; } .mkt-stat.main { grid-column: 1 / -1; }
  .mkt-sell { grid-template-columns: 104px 1fr; gap: .8rem; padding: .8rem; } .mkt-price { font-size: 1.2rem; } .mkt-body { padding: .5rem .6rem .7rem; }
  .mkt-sold-row { grid-template-columns: 44px 1fr auto; } .mkt-sold-row em { display: none; }
}
.mkt-chip.on[data-mk-rar="all"] { color: var(--on-accent, #fff); text-shadow: none; }
.mkt-chip.on[data-mk-rar="common"], .mkt-chip.on[data-mk-rar="legendary"], .mkt-chip.on[data-mk-rar="shiny"] { color: #0b0b0d; text-shadow: none; }
.mkt-tabs .page-tab { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--color-muted); box-shadow: none; }
.mkt-tabs .page-tab.active { background: var(--glow-soft); color: color-mix(in srgb, var(--accent) 62%, var(--color-ink)); }
@media (max-width: 520px) {
  .mkt-hero { padding: .7rem; gap: .5rem; border-radius: 16px; }
  .mkt-stats { grid-template-columns: 1.5fr 1fr 1fr; gap: .4rem; } .mkt-stat.main { grid-column: auto; }
  .mkt-stat { padding: .45rem .55rem; border-radius: 12px; } .mkt-stat small { font-size: .6rem; letter-spacing: .02em; }
  .mkt-stat b, .mkt-stat > span { font-size: 1.05rem; } .mkt-stat.main > span b { font-size: 1.25rem; }
  .mkt-note { font-size: .72rem; }
}
@media (max-width: 520px) { .mkt-tools { grid-template-columns: 1fr; } }

/* succès : tuiles cliquables + fiche détail */
.ac-tile { cursor: pointer; font: inherit; color: inherit; width: 100%; transition: transform .15s, border-color .15s; }
.ac-tile:hover, .ac-tile:focus-visible { transform: translateY(-2px); border-color: var(--accent); }
.ac-tile.off { opacity: .72; filter: grayscale(.7); }
.ac-bar { display: block; width: 78%; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--color-muted) 28%, transparent); overflow: hidden; margin: .2rem 0; }
.ac-bar u { display: block; height: 100%; background: var(--accent); border-radius: inherit; text-decoration: none; }
.ac-bar.big { width: 100%; height: 9px; margin: .5rem 0 .3rem; }
.ac-hint { color: var(--color-muted); font-size: .85rem; margin: .4rem 0; }
.ac-sheet { position: fixed; inset: 0; z-index: 3200; display: grid; place-items: center; padding: 1rem; background: rgba(0,0,0,.66); }
.ac-card { position: relative; width: min(100%, 360px); text-align: center; padding: 1.6rem 1.3rem 1.3rem; border-radius: 18px; background: var(--bg-surface); color: var(--color-primary, inherit); border: 1px solid var(--stroke-line); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ac-card.on.silver { border-color: #94a3b8; } .ac-card.on.gold { border-color: #f59e0b; }
.ac-card.off .ac-big { filter: grayscale(1); opacity: .6; }
.ac-big { display: block; font-style: normal; font-size: 3.2rem; line-height: 1.1; }
.ac-card h3 { margin: .4rem 0 .1rem; font-size: 1.2rem; }
.ac-state { margin: 0 0 .6rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.ac-state.ok { color: var(--accent); font-weight: 700; }
.ac-d { margin: 0 0 .8rem; line-height: 1.4; }
.ac-prog small, .ac-left { color: var(--color-muted); font-size: .85rem; }
.ac-left { margin: .5rem 0 0; } .ac-left b { color: var(--color-primary, inherit); }
.ac-x { position: absolute; top: .5rem; right: .5rem; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--stroke-line); background: transparent; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }

/* pastilles rouges de la barre du bas */
.touch-bar-item .touch-dot { position: absolute; top: 7px; left: calc(50% + 6px); width: 11px; height: 11px; padding: 0; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2.5px var(--bg-core, #0b0b0f); pointer-events: none; z-index: 3; }
.touch-bar-item .touch-dot[hidden] { display: none; }
.page-tab.has-dot { position: relative; }
.page-tab.has-dot::after { content: ""; position: absolute; top: 4px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px var(--bg-core, #09090b); }

/* fiche des niveaux */
[data-lv-open] { cursor: pointer; } [data-lv-open]:hover { filter: brightness(1.12); }
.lv-card { width: min(100%, 400px); max-height: 86vh; display: flex; flex-direction: column; text-align: left; }
.lv-card h3 { text-align: center; } .lv-card .ac-state { text-align: center; }
.lv-list { list-style: none; margin: 0 0 .6rem; padding: 0; overflow-y: auto; display: grid; gap: .35rem; }
.lv-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: .6rem; align-items: center; padding: .5rem .6rem; border-radius: 12px; background: var(--bg-elevated); border: 1px solid transparent; }
.lv-list li.now { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated)); }
.lv-list li.todo { opacity: .6; }
.lv-n { font-style: normal; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: .85rem; background: var(--bg-surface); border: 1px solid var(--stroke-line); }
.lv-list li.done .lv-n, .lv-list li.now .lv-n { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
.lv-t { display: grid; gap: .15rem; min-width: 0; } .lv-t .ac-bar { width: 100%; margin: 0; }
.lv-list em { font-style: normal; font-size: .78rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }

.img-credit { margin: .35rem 0 0; font-size: .72rem; color: var(--color-muted); text-align: right; }