/* ============ CollecDex — styles ============ */
:root {
  --bg: #0f1420;
  --bg2: #161d2d;
  --surface: #1c2538;
  --surface2: #243049;
  --line: #2e3a55;
  --text: #eef2fb;
  --muted: #95a1bd;
  --accent: #e3350d;
  --accent2: #ffcb05;
  --ok: #3ecf8e;
  --gold: #e8b923;
  --silver: #c9d1dc;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; }
/* place de la barre de défilement toujours réservée : la page ne se décale plus quand une fenêtre s'ouvre */
html { scrollbar-gutter: stable; }
a { color: inherit; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hidden, [hidden] { display: none !important; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px; background: linear-gradient(90deg, #b3200a, var(--accent));
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.3rem; letter-spacing: .5px; }
.brand b { color: var(--accent2); }
.mainnav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.mainnav a, .topactions a { text-decoration: none; padding: 7px 12px; border-radius: 999px; font-weight: 600; opacity: .9; white-space: nowrap; }
.mainnav a:hover, .topactions a:hover { background: rgba(0,0,0,.18); }
.mainnav a.active, .topactions a.active { background: rgba(0,0,0,.3); opacity: 1; }
.mainnav .ico { display: none; }
.topactions { display: flex; gap: 4px; align-items: center; }

.app { max-width: 1280px; margin: 0 auto; padding: 22px 20px 80px; }

/* ---------- Generic ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface2); cursor: pointer; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: #4a5a80; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #ff4a20; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: .85rem; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: default; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.grid-auto { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
input[type=text], input[type=search], input[type=number], select, textarea {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent2); }
textarea { width: 100%; min-height: 70px; resize: vertical; }
label.check { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--line); font-size: .82rem; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); cursor: pointer; font-size: .85rem; display: inline-flex; gap: 6px; align-items: center; }
.chip.on { background: var(--accent2); color: #1a1a1a; border-color: var(--accent2); font-weight: 700; }
.loading { padding: 40px; text-align: center; color: var(--muted); }
.spinner { width: 32px; height: 32px; border: 4px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-box { background: #3a1616; border: 1px solid #7a2a2a; padding: 16px; border-radius: 12px; }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.breadcrumb { font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.breadcrumb a { color: var(--muted); }

/* ---------- Progress ---------- */
.progress { height: 9px; border-radius: 999px; background: var(--bg2); overflow: hidden; border: 1px solid var(--line); }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 999px; transition: width .4s; }
.progress.done > span { background: linear-gradient(90deg, #22a06b, var(--ok)); }
.count { font-variant-numeric: tabular-nums; font-weight: 800; }
.count .of { color: var(--muted); font-weight: 600; }

/* ---------- Rarity symbols ---------- */
.rar { display: inline-flex; align-items: center; gap: 1px; vertical-align: middle; }
.rar svg { display: block; }
.rar-txt { font-size: .62rem; font-weight: 800; padding: 1px 5px; border-radius: 5px; background: #444; color: #fff; letter-spacing: .3px; }
.rarity-list { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Home ---------- */
.hero { padding: 26px; border-radius: 20px; background: radial-gradient(circle at 85% 20%, rgba(255,203,5,.18), transparent 40%), linear-gradient(135deg, #1f2a44, #121827); border: 1px solid var(--line); margin-bottom: 24px; }
.hero p { max-width: 720px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-top: 16px; }
.stat { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat b { display: block; font-size: 1.45rem; }
.stat span { color: var(--muted); font-size: .85rem; }
.game-tile { position: relative; display: block; text-decoration: none; padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); min-height: 150px; overflow: hidden; transition: transform .15s, border-color .15s; }
.game-tile:hover { transform: translateY(-3px); border-color: var(--accent2); }
.game-tile .gicon { font-size: 2.2rem; }
.game-tile.soon { opacity: .55; pointer-events: none; }
.game-tile .tag { position: absolute; top: 12px; right: 12px; }

/* ---------- Sets list ---------- */
.serie-block { margin-bottom: 28px; }
.serie-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.serie-head img { height: 34px; }
.set-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); position: relative; transition: border-color .15s, transform .15s; }
.set-card:hover { border-color: #5a6c96; transform: translateY(-2px); }
.set-card.complete { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 18px rgba(232,185,35,.15); }
.set-card .logo-wrap { height: 64px; display: flex; align-items: center; justify-content: center; }
.set-card .logo-wrap img { max-height: 64px; max-width: 100%; object-fit: contain; }
.set-card .set-title { display: flex; gap: 8px; align-items: center; }
.set-card .set-title img { width: 20px; height: 20px; object-fit: contain; }
.set-card .set-title b { flex: 1; font-size: .98rem; }
.set-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.badge-complete { position: absolute; top: -9px; right: -9px; background: linear-gradient(135deg, #ffe58a, var(--gold)); color: #3a2a00; font-weight: 900; font-size: .72rem; padding: 4px 9px; border-radius: 999px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 4px; }

/* ---------- Set page ---------- */
.set-hero { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 24px; align-items: center; margin-bottom: 18px; }
.set-hero .logo-big { max-height: 120px; max-width: 100%; object-fit: contain; }
.set-hero .bigcount { font-size: 2.4rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.medal { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, #fff1b8, var(--gold)); color: #3a2a00; font-weight: 900; }
.rarity-progress { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 22px; }
.rp-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.rp-row .progress { grid-column: 1 / -1; height: 7px; }
.rp-name { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.pull-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pull-table td, .pull-table th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0 14px; position: sticky; top: 58px; z-index: 20; background: rgba(15,20,32,.92); backdrop-filter: blur(6px); padding: 10px 0; }

/* ---------- Card grid ---------- */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cards.big { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ctile { position: relative; cursor: pointer; border-radius: 10px; }
.ctile .cimg { position: relative; aspect-ratio: 63/88; border-radius: 9px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); }
.ctile .cimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s, opacity .2s, transform .2s; }
.ctile:hover .cimg img { transform: scale(1.03); }
.ctile.missing .cimg img { filter: grayscale(1) brightness(.55); opacity: .45; }
.ctile.missing .cimg::after { content: "?"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 900; color: rgba(255,255,255,.25); }
.ctile .numonly { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 10px; background: repeating-linear-gradient(135deg, var(--bg2) 0 10px, #19202f 10px 20px); }
.ctile .numonly b { font-size: 1.9rem; color: #56617c; font-variant-numeric: tabular-nums; }
.ctile .numonly span { font-size: .78rem; color: var(--muted); }
.ctile.missing .cimg:has(.numonly)::after { content: none; }
.ctile .noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; color: var(--muted); font-size: .85rem; }
.ctile .cinfo { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 2px 0; font-size: .8rem; }
.ctile .cname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ctile .cnum { color: var(--muted); font-variant-numeric: tabular-nums; }
.ctile .qty { position: absolute; top: 7px; left: 7px; background: rgba(0,0,0,.75); border-radius: 999px; font-size: .75rem; font-weight: 800; padding: 2px 8px; z-index: 2; }
.ctile .fav { position: absolute; top: 5px; right: 8px; color: var(--accent2); font-size: 1.1rem; z-index: 2; text-shadow: 0 1px 3px #000; }
.ctile .ownedmark { position: absolute; bottom: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #073; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: .8rem; z-index: 2; }
.ctile .price { font-weight: 700; color: var(--accent2); }
.ctile .myphoto { position: absolute; top: 7px; right: 7px; font-size: .7rem; background: rgba(0,0,0,.7); padding: 2px 6px; border-radius: 6px; z-index: 2; }

/* ---------- Modal / card detail ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(3px); }
.modal-box { position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; width: min(980px, 100%); max-height: 92vh; overflow: auto; padding: 24px; box-shadow: var(--shadow); }
.modal-x { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 1.8rem; cursor: pointer; color: var(--muted); }
.cd { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 26px; }
.cd-img { position: relative; }
.cd-img img { width: 100%; border-radius: 14px; box-shadow: var(--shadow); display: block; }
.cd-img .imgswitch { margin-top: 10px; }
.cd dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 10px 0; }
.cd dt { color: var(--muted); }
.cd dd { margin: 0; }
.photos { display: flex; gap: 8px; flex-wrap: wrap; }
.photos .ph { position: relative; width: 74px; aspect-ratio: 63/88; border-radius: 8px; overflow: hidden; border: 2px solid var(--line); cursor: pointer; }
.photos .ph.sel { border-color: var(--accent2); }
.photos .ph img { width: 100%; height: 100%; object-fit: cover; }
.photos .ph .del { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.75); border: 0; border-radius: 50%; width: 20px; height: 20px; cursor: pointer; font-size: .8rem; }
.section { margin-top: 18px; }
.section > h3 { border-bottom: 1px solid var(--line); padding-bottom: 6px; }

/* ---------- Toast & background tasks ---------- */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #111827; border: 1px solid var(--line); padding: 11px 18px; border-radius: 12px; z-index: 200; box-shadow: var(--shadow); font-weight: 600; }
.bgtasks { position: fixed; bottom: 16px; right: 16px; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: .85rem; min-width: 240px; box-shadow: var(--shadow); }
.bgtasks .progress { margin-top: 6px; }

/* ---------- Showcase / vitrine ---------- */
.vitrine { border-radius: 22px; padding: 28px; position: relative; overflow: hidden; border: 1px solid var(--line); }
.v-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.v-avatar { width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--accent2); background: var(--surface2) center/cover; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 900; }
.v-name { font-size: 2rem; font-weight: 900; }
.v-badges { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.v-badge { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: linear-gradient(135deg, #fff1b8, var(--gold)); color: #3a2a00; font-weight: 800; font-size: .82rem; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.v-badge img { width: 24px; height: 24px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
.v-featured { display: grid; gap: 22px; justify-content: center; margin: 22px 0; }
.v-featured.layout-grille { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.v-featured.layout-vedette { grid-template-columns: repeat(4, minmax(0, 190px)); }
.v-featured.layout-vedette > :first-child { grid-column: span 2; grid-row: span 2; }
.v-featured.layout-grille { grid-template-columns: repeat(auto-fill, minmax(150px, 190px)) !important; }
.v-featured.layout-classeur { grid-template-columns: repeat(3, minmax(0, 200px)); background: #111; padding: 22px; border-radius: 14px; box-shadow: inset 0 0 0 2px #333; }
.v-featured.layout-eventail { display: flex; justify-content: center; padding: 30px 0 10px; }
.v-featured.layout-eventail .vcard { width: 190px; margin: 0 -28px; transition: transform .2s; }
.v-featured.layout-eventail .vcard:hover { transform: translateY(-18px) rotate(0deg) !important; z-index: 5; }
.vcard { position: relative; cursor: pointer; }
.vcard img { width: 100%; display: block; border-radius: 10px; aspect-ratio: 63/88; object-fit: cover; }
.vcard .vlabel { text-align: center; font-size: .8rem; margin-top: 6px; font-weight: 700; }
/* Frames */
.frame-aucun img { box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.frame-or { padding: 7px; border-radius: 14px; background: linear-gradient(135deg, #fff3b0, #d4a017 30%, #fff3b0 50%, #b8860b 75%, #ffe680); box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.frame-argent { padding: 7px; border-radius: 14px; background: linear-gradient(135deg, #ffffff, #9aa4b1 30%, #f4f6f8 55%, #7d8794 80%, #e6e9ee); box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.frame-holo { padding: 6px; border-radius: 14px; background: linear-gradient(115deg, #ff6ec4, #7873f5, #4ade80, #facc15, #ff6ec4); background-size: 300% 300%; animation: holo 5s ease infinite; box-shadow: 0 0 22px rgba(120,115,245,.5); }
@keyframes holo { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.frame-neon { padding: 4px; border-radius: 13px; background: #0ff; box-shadow: 0 0 12px #0ff, 0 0 30px #0ff8; }
.frame-bois { padding: 12px; border-radius: 10px; background: repeating-linear-gradient(90deg, #6b4423 0 6px, #7b5230 6px 11px, #5e3a1c 11px 15px); box-shadow: inset 0 0 0 2px #3b2210, 0 8px 22px rgba(0,0,0,.5); }
.frame-vitre { padding: 10px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(4px); box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.frame-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.frame-picker .fp { width: 64px; cursor: pointer; text-align: center; font-size: .75rem; }
.frame-picker .fp .sw { height: 50px; border-radius: 8px; margin-bottom: 4px; border: 2px solid transparent; }
.frame-picker .fp.on .sw { border-color: var(--accent2); }
.pick-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); max-height: 360px; overflow: auto; padding: 4px; }
.pick-list .pk { position: relative; cursor: pointer; border-radius: 8px; border: 2px solid transparent; }
.pick-list .pk.on { border-color: var(--accent2); }
.pick-list .pk img { width: 100%; border-radius: 6px; display: block; aspect-ratio: 63/88; object-fit: cover; }
.pick-list .pk .n { position: absolute; top: 4px; left: 4px; background: var(--accent2); color: #111; border-radius: 50%; width: 22px; height: 22px; font-weight: 900; font-size: .8rem; display: flex; align-items: center; justify-content: center; }

/* ---------- Scanner ---------- */
.scan-wrap { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: 22px; }
.scan-view { position: relative; background: #000; border-radius: 16px; overflow: hidden; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; }
.scan-view video, .scan-view img { width: 100%; height: 100%; object-fit: contain; }
.scan-guide { position: absolute; left: 50%; top: 50%; height: 84%; aspect-ratio: 63/88; transform: translate(-50%, -50%); border: 3px dashed rgba(255,203,5,.85); border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); }
.scan-guide::after { content: "Place la carte dans le cadre · touche pour la netteté"; position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: .8rem; color: var(--accent2); text-shadow: 0 1px 3px #000; }
.focus-ring { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 2px solid var(--accent2, #ffcb05); border-radius: 50%; pointer-events: none; animation: focusring .9s ease-out forwards; z-index: 3; }
@keyframes focusring { 0% { transform: scale(1.5); } 30% { transform: scale(1); } 100% { transform: scale(.92); } }
.crop-area { position: relative; display: inline-block; touch-action: none; cursor: move; user-select: none; }
.scan-view .crop-area img { display: block; width: auto; height: auto; max-width: 100%; max-height: 70vh; object-fit: initial; pointer-events: none; }
.scan-view:has(.crop-area) { aspect-ratio: auto; }
.crop-box { position: absolute; border: 3px solid var(--accent2); border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); pointer-events: none; }
.cand { display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; align-items: center; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 10px; }
.cand img { width: 80px; border-radius: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .app { padding: 16px 12px 70px; }
  /* Mobile : barre d'onglets en bas de l'écran, compte et réglages en haut */
  .topbar { padding: 8px 12px; flex-wrap: nowrap; }
  .brand { font-size: 1.15rem; }
  .topactions { margin-left: auto; }
  .topactions a { padding: 6px 9px; font-size: .9rem; }
  .mainnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; gap: 0; flex-wrap: nowrap;
    background: #141a28; border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(0,0,0,.4); }
  .mainnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; border-radius: 10px; font-size: .68rem; font-weight: 700; opacity: .75; }
  .mainnav .ico { display: block; font-size: 1.25rem; line-height: 1.2; }
  .mainnav a.active { background: rgba(227,53,13,.18); opacity: 1; color: #fff; }
  .mainnav a.nav-scan .ico { background: var(--accent); border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; margin-top: -18px; border: 3px solid #141a28; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
  .app { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } /* barre du bas (≈ 63 px) + un peu d'air */
  .bgtasks { bottom: 80px; }
  .toast { bottom: 84px; }
  .set-hero, .cd, .scan-wrap { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 10px; }
  .toolbar { position: static; gap: 8px; padding: 4px 0; background: none; backdrop-filter: none; }
  .toolbar > input, .toolbar > select { flex: 1 1 calc(50% - 8px); min-width: 0 !important; width: auto; font-size: .9rem; padding: 7px 10px; }
  .toolbar > input[type=search] { flex-basis: 100%; }
  h1 { font-size: 1.4rem; }
  /* vitrine : la carte vedette reste raisonnable, les autres en 3 colonnes */
  .v-featured.layout-vedette { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .v-featured.layout-vedette > :first-child { grid-column: 1 / -1; grid-row: auto; justify-self: center; width: min(52%, 200px); }
  .v-featured.layout-grille { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px; }
  .vitrine { padding: 16px; border-radius: 16px; }
  .v-head { gap: 12px; margin-bottom: 14px; }
  .v-avatar { width: 64px; height: 64px; font-size: 1.6rem; }
  .v-name { font-size: 1.4rem; }
  .vcard .vlabel { font-size: .72rem; }
  .frame-or, .frame-argent, .frame-holo, .frame-vitre { padding: 4px; }
  .frame-bois { padding: 6px; }
  /* fiche carte : image moins envahissante */
  .cd-img { max-width: 260px; margin: 0 auto; }
  .cd h1 { font-size: 1.3rem; }
  /* accueil, séries, collection */
  .hero { padding: 18px; border-radius: 16px; }
  .hero h1 { font-size: 1.35rem; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat { padding: 10px 12px; }
  .stat b { font-size: 1.15rem; }
  .grid-auto { grid-template-columns: 1fr; gap: 12px; }
  .cards.big { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 10px; }
  .set-hero { gap: 12px; }
  .set-hero .bigcount { font-size: 1.9rem; }
  .rarity-progress { grid-template-columns: 1fr; }
  .pull-table { font-size: .78rem; }
  .pull-table td, .pull-table th { padding: 5px 4px; }
  .panel { padding: 14px; }
  .row > h1 { margin-bottom: 6px; }
  .selbar { top: 52px; }
  .v-featured.layout-classeur { grid-template-columns: repeat(3, 1fr); padding: 10px; gap: 10px; }
  .v-featured.layout-eventail .vcard { width: 120px; margin: 0 -22px; }
  .modal-box { padding: 16px; }
}

/* ---------- Scan d'une page de classeur ---------- */
.batch-wrap { display: grid; grid-template-columns: minmax(300px, 520px) 1fr; gap: 22px; align-items: start; }
.batch-view { aspect-ratio: 4/5; }
.grid-box { position: absolute; display: grid; border: 3px solid var(--accent2); border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0,0,0,.45); pointer-events: none; }
.grid-box .gcell { border: 1px dashed rgba(255,203,5,.85); position: relative; }
.grid-box .gcell span { position: absolute; top: 3px; left: 5px; font-size: .75rem; font-weight: 900; color: var(--accent2); text-shadow: 0 1px 3px #000; }
.grid-box .gh { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--accent2); border: 3px solid #111; pointer-events: auto; cursor: nwse-resize; z-index: 2; }
.grid-box .gh.tl { left: -12px; top: -12px; } .grid-box .gh.tr { right: -12px; top: -12px; cursor: nesw-resize; }
.grid-box .gh.bl { left: -12px; bottom: -12px; cursor: nesw-resize; } .grid-box .gh.br { right: -12px; bottom: -12px; }
.btiles { display: grid; gap: 10px; }
.btile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.btile.dim { opacity: .5; }
.btile .bimgs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.btile .bimgs img, .btile .bnone { width: 100%; aspect-ratio: 63/88; object-fit: cover; border-radius: 6px; background: var(--bg2); }
.btile .bnone { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.6rem; font-weight: 900; }
.btile select { width: 100%; font-size: .8rem; padding: 5px 6px; }
.btile .bstate { font-size: .78rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.btile .bstate.ok { color: var(--ok); } .btile .bstate.warn { color: #ffb84d; } .btile .bstate.bad { color: #ff6b6b; }
.btile .bsearch { display: grid; gap: 4px; }
.btile .bsearch input { padding: 5px 8px; font-size: .8rem; }
@media (max-width: 900px) { .batch-wrap { grid-template-columns: 1fr; } }
/* téléphone : la caméra dans la page prend toute la largeur de l'écran (bords compris) */
@media (max-width: 760px) {
  .batch-view.live-fit { margin-left: -12px; margin-right: -12px; border-radius: 0; max-height: calc(100dvh - 200px); }
  .batch-view.live-fit video { width: 100%; height: 100%; object-fit: contain; }
}
@media (max-width: 520px) { .btiles { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }

/* ---------- Compte ---------- */
#nav-account .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #9aa3b5; vertical-align: middle; }
#nav-account[data-state="ok"] .dot { background: #3ecf8e; }
#nav-account[data-state="synchro"] .dot, #nav-account[data-state="envoi"] .dot { background: #ffb84d; }
#nav-account[data-state="erreur"] .dot { background: #ff5b5b; }
.sync-ok { color: var(--ok); } .sync-erreur { color: #ff6b6b; }
input[type=email], input[type=password] { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; outline: none; }
.btile.on { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset; }
.btile .bcheck { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .85rem; cursor: pointer; }
.btile .bcheck input { width: 18px; height: 18px; accent-color: var(--ok); }
.btile .btn { white-space: normal; text-align: left; justify-content: flex-start; line-height: 1.25; }
@media (max-width: 520px) { .btile .bstate { white-space: normal; } .btile select { font-size: .75rem; } }


/* ---------- Boutons, recadrage, sélection ---------- */
.btn.danger { background: #3a1416; border-color: #8a2a2a; color: #ffb3b3; }
.btn.danger:hover { background: #5a1a1d; border-color: #c43b3b; }
.btn.danger[disabled] { opacity: .45; }
.photos .ph .crop { position: absolute; bottom: 2px; right: 2px; background: rgba(0,0,0,.75); border: 0; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: .75rem; color: #fff; }
.cropper { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; padding: 14px; }
.cropper-box { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; width: min(560px, 100%); max-height: 96vh; overflow: auto; }
.cropper-stage { display: flex; justify-content: center; background: #000; border-radius: 10px; overflow: hidden; }
.cropper-stage .crop-area img { display: block; max-width: 100%; max-height: 60vh; pointer-events: none; }
.selbar { position: sticky; top: 58px; z-index: 25; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--accent2); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; }
.cards.selecting .ctile { cursor: pointer; }
.cards.selecting .ctile::before { content: ""; position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #fff; background: rgba(0,0,0,.45); z-index: 3; }
.cards.selecting .ctile.picked::before { content: "✓"; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 900; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.cards.selecting .ctile.picked .cimg { outline: 3px solid var(--accent); outline-offset: 1px; }
.cards.selecting .ctile .qty { display: none; }
.btile.saved { border-color: var(--ok); opacity: .8; }

/* =====================================================================
   THÈME « POP » — couleurs holo, typographie plus compacte, icônes
   (placé à la fin : remplace les réglages précédents)
   ===================================================================== */
:root {
  --bg: #0c0e19;
  --bg2: #131629;
  --surface: #171a2e;
  --surface2: #20243d;
  --line: #292e4d;
  --text: #f2f3ff;
  --muted: #979dbf;
  --accent: #7c5cff;      /* violet */
  --accent-pink: #ff4fa3;
  --accent-cyan: #34d5ff;
  --accent2: #ffd23f;     /* jaune */
  --ok: #3ddc97;
  --gold: #ffc53d;
  --holo: linear-gradient(110deg, #ffd23f 0%, #ff4fa3 35%, #7c5cff 68%, #34d5ff 100%);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --display: "Fredoka", "Inter", "Segoe UI", system-ui, sans-serif;
}
html, body { font-size: 14px; line-height: 1.45; }
body { background:
  radial-gradient(900px 500px at 90% -10%, rgba(124,92,255,.16), transparent 60%),
  radial-gradient(700px 420px at -10% 10%, rgba(255,79,163,.10), transparent 60%),
  var(--bg); background-attachment: fixed; }
h1, h2, h3, .brand, .bigcount, .v-name, .stat b, .count { font-family: var(--display); letter-spacing: .2px; }
h1 { font-size: 1.55rem; font-weight: 700; }
h2 { font-size: 1.15rem; font-weight: 600; }
h3 { font-size: .98rem; font-weight: 600; }
.small { font-size: .8rem; }
.breadcrumb { font-size: .8rem; margin-bottom: 8px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--text); }
.ic { display: block; flex-shrink: 0; }

/* En-tête : verre sombre + liseré holo */
.topbar { background: rgba(12,14,25,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: none; padding: 9px 20px; border-bottom: 1px solid transparent; border-image: var(--holo) 1; }
.brand { font-size: 1.35rem; font-weight: 700; gap: 9px; }
.brand-mark { display: flex; }
.brand-name b { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mainnav { gap: 2px; }
.mainnav a, .topactions a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font-weight: 600; font-size: .9rem; color: #c8ccea; opacity: 1; }
.mainnav a:hover, .topactions a:hover { background: rgba(255,255,255,.06); color: #fff; }
.mainnav a.active { background: rgba(124,92,255,.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(124,92,255,.45); }
.mainnav .ico { display: inline-flex; }
.mainnav a.nav-scan { background: var(--holo); color: #16172a; font-weight: 700; margin: 0 4px; }
.mainnav a.nav-scan:hover { filter: brightness(1.08); color: #16172a; }
.nav-gear { padding: 7px 9px !important; }

/* Pastille de compte */
.acc-chip { gap: 8px !important; padding: 4px 12px 4px 4px !important; border: 1px solid var(--line); background: var(--surface) !important; border-radius: 999px; }
.acc-chip .acc-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surface2) center/cover; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #5b6186; color: #c8ccea; }
.acc-chip .acc-initial { font-family: var(--display); font-weight: 700; font-size: .95rem; background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acc-chip.in[data-state="ok"] .acc-avatar { box-shadow: 0 0 0 2px var(--ok), 0 0 10px rgba(61,220,151,.45); }
.acc-chip.in[data-state="synchro"] .acc-avatar, .acc-chip.in[data-state="envoi"] .acc-avatar { box-shadow: 0 0 0 2px #ffb84d; animation: pulse 1.4s ease-in-out infinite; }
.acc-chip.in[data-state="erreur"] .acc-avatar { box-shadow: 0 0 0 2px #ff5b5b; }
.acc-chip:not(.in) { background: var(--holo) !important; color: #16172a !important; border: 0; padding: 4px 12px 4px 4px !important; }
.acc-chip:not(.in) .acc-avatar { background: rgba(0,0,0,.18); color: #16172a; box-shadow: none; }
.acc-chip .acc-lbl { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nav-account .dot { display: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(255,184,77,.35); } }

/* Boutons, pastilles, champs */
.btn { border-radius: 12px; padding: 8px 14px; font-size: .88rem; background: var(--surface2); border-color: var(--line); transition: filter .15s, border-color .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(120deg, #7c5cff, #ff4fa3); border: 0; color: #fff; box-shadow: 0 6px 18px rgba(124,92,255,.35); }
.btn.primary:hover { background: linear-gradient(120deg, #8d70ff, #ff63ae); }
.btn.sm { font-size: .8rem; padding: 5px 10px; border-radius: 10px; }
.chip { font-size: .8rem; padding: 5px 12px; background: var(--surface); }
.chip.on { background: var(--holo); color: #16172a; border-color: transparent; }
.pill { font-size: .76rem; }
input[type=text], input[type=search], input[type=number], input[type=email], input[type=password], select, textarea { border-radius: 12px; background: var(--bg2); font-size: .88rem; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,92,255,.2); }
.panel { border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--surface); }
.progress { height: 8px; border: 0; background: rgba(255,255,255,.07); }
.progress > span { background: var(--holo); }
.progress.done > span { background: linear-gradient(90deg, #22c38a, #7dffcf); }
.rar-txt { color: #14162a; font-size: .6rem; }
.spinner { border-top-color: var(--accent-pink); }

/* Accueil */
.hero { padding: 22px 24px; border-radius: 20px; border: 1px solid var(--line); background:
  radial-gradient(420px 200px at 100% 0%, rgba(255,79,163,.22), transparent 70%),
  radial-gradient(420px 220px at 0% 100%, rgba(52,213,255,.14), transparent 70%),
  linear-gradient(135deg, #1c1f3a, #131629); }
.hero h1 { font-size: 1.7rem; margin-bottom: 4px; }
.hero h1 .holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin: 0 0 4px; font-size: .92rem; }
.stats { gap: 10px; margin-top: 14px; }
.stat { padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.035); }
.stat b { font-size: 1.3rem; font-weight: 600; }
.stat span { font-size: .78rem; }
.section-title { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.section-title h2 { margin: 0; }
.section-title .spacer { flex: 1; }
.section-title a { font-size: .82rem; color: var(--muted); text-decoration: none; }
.game-tile { min-height: 0; padding: 16px; border-radius: 18px; display: flex; gap: 14px; align-items: center; background: var(--surface); }
.game-tile .gicon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; background: var(--g, #2a2f52); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.game-tile h3 { margin: 0 0 2px; font-size: 1.02rem; }
.game-tile .tag { position: static; margin-left: auto; align-self: flex-start; }
.game-tile .gtxt { min-width: 0; }
.game-tile.soon { opacity: .5; }
.g-pokemon { --g: linear-gradient(135deg, #ffd23f, #ff9f1c); }
.g-onepiece { --g: linear-gradient(135deg, #ff5b5b, #b3122e); }
.g-riftbound { --g: linear-gradient(135deg, #3fd4e0, #1d4f9e); }
.g-magic { --g: linear-gradient(135deg, #9b7bff, #4b2fb8); }
.g-yugioh { --g: linear-gradient(135deg, #ffb347, #b35c00); }
.g-lorcana { --g: linear-gradient(135deg, #f0c25a, #6a3fb5); }
.g-autres { --g: linear-gradient(135deg, #ff4fa3, #7c5cff); }

/* Logos de séries (officiels ou générés) */
.set-card { padding: 12px; gap: 8px; border-radius: 16px; background: var(--surface); }
.set-card:hover { border-color: rgba(124,92,255,.6); box-shadow: 0 8px 24px rgba(124,92,255,.15); }
.set-card .logo-wrap { height: 70px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), transparent 70%); padding: 6px; }
.set-card .logo-wrap img { max-height: 58px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.set-card .set-title b { font-family: var(--display); font-weight: 600; font-size: .95rem; }
.set-card .set-sub { font-size: .75rem; color: var(--muted); }
.logo-gen { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 12px; border-radius: 12px; font-family: var(--display); font-weight: 700; font-size: .92rem; line-height: 1.1; text-align: left;
  color: #fff; background: linear-gradient(135deg, hsl(var(--h, 260) 70% 55%), hsl(calc(var(--h, 260) + 40) 75% 45%)); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.logo-gen .ic { opacity: .9; }
.logo-gen b { font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.set-hero .logo-gen { font-size: 1.2rem; padding: 12px 18px; }
.serie-head { gap: 10px; margin-bottom: 10px; }
.serie-head .era-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--holo); transform: rotate(45deg); }
.serie-head h2 { font-size: 1.05rem; }
.badge-complete { background: var(--holo); color: #16172a; }

/* Cartes */
.ctile .cimg { border-radius: 10px; transition: transform .18s, box-shadow .18s; }
.ctile:hover .cimg { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.45); }
.ctile.owned .cimg::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, rgba(124,92,255,.25) 55%, transparent 70%); background-size: 250% 250%; transition: opacity .2s; }
.ctile.owned:hover .cimg::before { opacity: 1; animation: sheen 1.1s ease forwards; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 100%; } }
.ctile .cinfo { font-size: .76rem; }
.ctile .ownedmark { background: var(--ok); color: #053; }
.ctile .price { color: var(--accent2); }

/* Page de série */
.set-hero .bigcount { font-size: 2.1rem; font-weight: 600; }
.medal { background: var(--holo); color: #16172a; }
.toolbar { background: rgba(12,14,25,.9); }
details.help { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; font-size: .85rem; color: var(--muted); }
details.help summary { cursor: pointer; color: var(--text); font-weight: 600; }
details.help[open] summary { margin-bottom: 6px; }

/* Mobile : barre du bas avec icônes */
@media (max-width: 760px) {
  .topbar { padding: 8px 12px; }
  .brand { font-size: 1.15rem; }
  .brand-mark svg { width: 26px; height: 26px; }
  .mainnav { background: rgba(12,14,25,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .mainnav a { color: #aab0d3; font-size: .66rem; gap: 2px; background: none !important; box-shadow: none !important; }
  .mainnav a.active { color: #fff; }
  .mainnav a.active .ico { color: var(--accent2); }
  .mainnav .ico { display: flex; font-size: 1rem; }
  .mainnav a.nav-scan { background: none !important; color: #fff; margin: 0; }
  .mainnav a.nav-scan .ico { width: 46px; height: 46px; margin-top: -20px; border-radius: 50%; background: var(--holo); color: #16172a; border: 3px solid #0c0e19; box-shadow: 0 6px 16px rgba(124,92,255,.5); display: flex; align-items: center; justify-content: center; }
  .acc-chip .acc-lbl { display: none; }
  .acc-chip { padding: 3px !important; }
  .acc-chip:not(.in) .acc-lbl { display: inline; }
  .game-tile { padding: 12px; }
  .game-tile .gicon { width: 44px; height: 44px; }
  .hero h1 { font-size: 1.35rem; }
}

.licences { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.game-tile .gtxt .small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* le flou de l'en-tête « capture » la barre du bas (position fixed) : pas de flou sur mobile */
@media (max-width: 760px) { .topbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(12,14,25,.97) !important; } }
@media (max-width: 760px) {
  .hero { padding: 16px; }
  .stats { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .stat { padding: 8px 6px; text-align: center; min-width: 0; }
  .stat b { font-size: 1rem; }
  .stat span { font-size: .66rem; }
}
a.chip { text-decoration: none; }
@media (max-width: 760px) { .stat span { display: block; line-height: 1.15; margin-top: 3px; } }

/* ===== Certification ===== */
/* certification « dos d'abord » : consigne en bas de la vidéo */
.flip-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; max-width: 92%; text-align: center; font-weight: 600; color: #fff; background: rgba(12,14,25,.82); border: 1px solid rgba(255,255,255,.18); padding: 7px 14px; border-radius: 999px; pointer-events: none; }
.flip-hint[data-phase="dos"], .flip-hint[data-phase="retourne"] { border-color: #ffd23f; color: #ffe27a; }
/* dos vu : le bouton photo s'entoure de vert (la photo sera certifiée) */
#sc-shot.cert-ready { box-shadow: 0 0 0 3px var(--ok), 0 0 18px rgba(62,207,142,.55); }
#sc-shot.cert-ready::after { content: " 🛡"; }
.flip-hint[data-phase="aide"] { border-color: #ff8a8a; border-radius: 14px; font-size: .85rem; }
/* retourner la carte : la flèche tourne sur elle-même, puis revient une fois le dos vu */
.cert-bar { width: 60%; height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
/* explication du bouton « Photo certifiée » (cachée une fois la photo prise) */
.b-cert-help { margin: 10px 2px 0; }
#b-actions.hidden + .b-cert-help { display: none; }
/* certification d'une page : la case tirée au sort s'allume sur la vidéo */
.page-cert { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.page-cert svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-cert polygon { fill: rgba(0,0,0,.28); stroke: rgba(255,255,255,.35); stroke-width: .3; vector-effect: non-scaling-stroke; }
.page-cert .cert-bar { position: absolute; left: 20%; bottom: 10px; }
.cert-bar span { display: block; height: 100%; width: 0; background: var(--holo); transition: width .18s linear; }
/* v2.54 : certification d’une page — encadré « Certifier la page » (3 étapes) et grande consigne pendant la lampe */
.pc-block { margin-top: 14px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid rgba(62,207,142,.55); background: linear-gradient(135deg, rgba(62,207,142,.12), rgba(124,92,255,.10)); }
.pc-block.hidden { display: none; }
.pc-block-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; color: var(--ok); }
.pc-block-h b { color: var(--text, #fff); font-size: 1.05rem; }
.pc-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.pc-steps li { display: flex; align-items: center; gap: 10px; }
.pc-steps i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--ok); color: #0c0e19; }
.pc-block .btn { width: 100%; justify-content: center; }
.pc-aim { border-color: rgba(62,207,142,.8); }
.pc-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(78%, 300px); padding: 18px 16px 16px; border-radius: 22px; text-align: center; color: #fff; background: rgba(12,14,25,.86); border: 1.5px solid rgba(255,210,63,.6); display: grid; justify-items: center; gap: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.pc-big b { font: 700 1.5rem/1.1 var(--display, Fredoka, sans-serif); }
.pc-big small { opacity: .8; font-size: .82rem; }
.pc-bulb { font-size: 3rem; line-height: 1; filter: grayscale(1) brightness(.6); transition: filter .08s, transform .08s; }
.pc-bulb.on { filter: drop-shadow(0 0 18px #ffd23f) drop-shadow(0 0 6px #fff); transform: scale(1.12); }
.pc-count { font: 800 2.4rem/1 var(--display, Fredoka, sans-serif); color: #ffd23f; }
.pc-big .cert-bar { position: static; width: 100%; margin-top: 8px; }
/* v2.55 : encadré de certification commun aux 3 modes (une carte, classeur, rafale), plus compact sur téléphone */
#sc-results > .pc-block:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .pc-block { padding: 12px; }
  .pc-block-h { margin-bottom: 8px; }
  .pc-steps { gap: 6px; font-size: .88rem; }
  .pc-steps i { width: 22px; height: 22px; font-size: .78rem; }
  /* v2.56 : caméra du classeur = tout l'espace libre entre l'en-tête et le bouton de photo, image agrandie (cover) :
     on peut photographier la page de près (avant : image entière rétrécie, il fallait reculer → photo moins nette) */
  .scan-view.batch-view.live-fit { aspect-ratio: auto !important; height: calc(100dvh - 330px); min-height: 300px; max-height: none; }
  .scan-view.batch-view.live-fit video { object-fit: cover; } /* (la barre du bouton photo reste en dessous, sans mordre sur l'image) */
  /* avant la photo, avec l'encadré de certification : dessin du classeur plus petit, tout tient sur un écran */
  :is(.batch-wrap, .scan-wrap):has(.pc-block:not(.hidden)) .scan-view:not(:has(video)):not(:has(img)):not(:has(canvas)) { height: clamp(210px, calc(100svh - 560px), 380px); } /* (carte seule et rafale ; min 210 px : le dessin reste entier) */
  .pc-block-h .muted { display: none; }
}
/* interrupteurs de certification (lampe en carte seule, certification en rafale) : vert = activé, rouge = désactivé */
.pc-switch { width: 100%; justify-content: space-between; gap: 8px; cursor: pointer; font-weight: 700; color: #fff; border: 1.5px solid rgba(61,220,151,.7); background: rgba(61,220,151,.16); }
.pc-switch input { position: absolute; opacity: 0; pointer-events: none; }
.pc-switch > span { display: inline-flex; align-items: center; gap: 6px; }
.pc-switch .pc-sw { font-weight: 800; font-size: .8rem; padding: 3px 10px; border-radius: 99px; background: #3ddc97; color: #0c0e19; }
.pc-switch .pc-sw::after { content: '✓ activée'; }
.pc-switch:has(input:not(:checked)) { border-color: rgba(255,107,107,.7); background: rgba(255,107,107,.12); }
.pc-switch:has(input:not(:checked)) .pc-sw { background: #ff6b6b; color: #fff; }
.pc-switch:has(input:not(:checked)) .pc-sw::after { content: '✗ désactivée'; }
.pc-block.pc-off { border-color: rgba(255,107,107,.45); background: rgba(255,107,107,.06); }
.pc-block.pc-off .pc-steps { opacity: .4; }
.cert-ok { color: #3ddc97; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.cert-pill { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-family: var(--font); font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #16172a; background: linear-gradient(120deg, #3ddc97, #34d5ff); }
.ctile .ownedmark.certified { background: linear-gradient(135deg, #3ddc97, #34d5ff); color: #06281d; box-shadow: 0 0 0 2px rgba(12,14,25,.8), 0 0 10px rgba(52,213,255,.6); }
.photos .ph { position: relative; }
.ph-cert { position: absolute; left: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3ddc97, #34d5ff); color: #06281d; }
.scan-view { position: relative; }

/* ===== Effet holographique de la fiche carte (plus la carte est rare, plus il est marqué) ===== */
.holo-card { position: relative; border-radius: 14px; transform-style: preserve-3d; perspective: 900px; transition: transform .35s ease;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); --mx: 50%; --my: 50%; --pos: 50%; --hyp: 0; touch-action: pan-y; }
.holo-card.active { transition: transform .08s linear; }
.holo-card img { display: block; width: 100%; border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.holo-card .holo-shine, .holo-card .holo-glare, .holo-card .holo-sparkle { position: absolute; inset: 0; border-radius: 14px; pointer-events: none; }
.holo-card .holo-glare { background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 25%, rgba(0,0,0,.25) 90%); mix-blend-mode: overlay; opacity: calc(.35 + var(--hyp) * .5); }
/* 1 : Rare — simple reflet */
.tier-1 .holo-shine { background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) calc(var(--pos) - 5%), transparent 65%); mix-blend-mode: soft-light; }
/* 2 : Holo — arc-en-ciel discret */
.tier-2 .holo-shine, .tier-3 .holo-shine, .tier-4 .holo-shine, .tier-5 .holo-shine {
  background-image: repeating-linear-gradient(110deg, #ff5f6d 0%, #ffc371 10%, #47ff9a 20%, #3fd5ff 30%, #a66bff 40%, #ff5f6d 50%);
  background-size: 300% 300%; background-position: var(--pos) var(--my); mix-blend-mode: color-dodge; opacity: .28; filter: brightness(.8) contrast(1.4) saturate(1.2); }
/* 3 : Double / Ultra rare — plus fort, avec fines lignes */
.tier-3 .holo-shine { opacity: .42; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px), repeating-linear-gradient(110deg, #ff5f6d 0%, #ffc371 10%, #47ff9a 20%, #3fd5ff 30%, #a66bff 40%, #ff5f6d 50%); background-size: 100% 100%, 300% 300%; }
/* 4 : Illustration rare / chromatique — paillettes */
.tier-4 .holo-shine { opacity: .5; }
.holo-card .holo-sparkle { background-image: radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(255,240,180,.9) 0 1px, transparent 1.8px);
  background-size: 23px 29px, 37px 31px; background-position: calc(var(--pos) * .4) calc(var(--my) * .3), calc(100% - var(--pos) * .5) var(--my); mix-blend-mode: screen; opacity: calc(.25 + var(--hyp) * .75); }
/* 5 : Spéciale / secrète / hyper — or + arc-en-ciel intense, contour lumineux */
.tier-5 .holo-shine { opacity: .62; filter: brightness(.9) contrast(1.6) saturate(1.5); }
.tier-5 img { box-shadow: 0 0 0 2px rgba(255,210,63,.55), 0 0 28px rgba(255,79,163,.45), 0 14px 34px rgba(0,0,0,.55); }
.tier-5 .holo-glare { background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,236,170,.75) 0%, rgba(255,160,220,.2) 30%, rgba(0,0,0,.3) 90%); }
/* animation douce quand personne ne touche la carte */
.holo-card.idle { animation: holoIdle 6s ease-in-out infinite; }
.holo-card.idle .holo-shine { animation: holoShift 6s ease-in-out infinite; }
@keyframes holoIdle { 0%, 100% { transform: perspective(900px) rotateX(3deg) rotateY(-6deg); } 50% { transform: perspective(900px) rotateX(-3deg) rotateY(6deg); } }
@keyframes holoShift { 0%, 100% { background-position: 20% 30%; } 50% { background-position: 80% 70%; } }
.holo-card.tier-0.idle { animation: none; }
@media (prefers-reduced-motion: reduce) { .holo-card.idle, .holo-card.idle .holo-shine { animation: none; } }

/* ===== Badges (succès) ===== */
.v-achievements { margin-top: 22px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.badge-medal { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.badge-medal .bm-disc { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #1b1300;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.5), 0 4px 10px rgba(0,0,0,.35); }
.badge-medal.t1 .bm-disc { background: linear-gradient(135deg, #f0b27a, #a0522d); }
.badge-medal.t2 .bm-disc { background: linear-gradient(135deg, #f4f6fb, #9aa3b5); }
.badge-medal.t3 .bm-disc { background: linear-gradient(135deg, #ffe27a, #d49b00); }
.badge-medal.t4 .bm-disc { background: linear-gradient(135deg, #ffd23f, #ff4fa3 40%, #7c5cff 70%, #34d5ff); color: #fff; background-size: 200% 200%; animation: holoMedal 4s ease-in-out infinite; }
@keyframes holoMedal { 50% { background-position: 100% 100%; } }
.badge-medal .bm-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.badge-medal .bm-txt b { font-family: var(--display); font-weight: 600; font-size: .9rem; }
.badge-medal .bm-txt span { font-size: .72rem; color: var(--muted); }
.badge-medal.new { border-color: rgba(255,210,63,.7); box-shadow: 0 0 16px rgba(255,210,63,.3); }
.badge-medal.new .bm-txt b::after { content: " NOUVEAU"; font-family: var(--font); font-size: .6rem; font-weight: 800; color: #ffd23f; letter-spacing: .04em; }
.pick-list .pk[hidden] { display: none; }
.small > svg.ic, p > svg.ic, span > svg.ic, a > svg.ic { display: inline-block; vertical-align: -2px; }

/* ===== Passe responsive (vitrine, Mon Dex, filtres) ===== */
.toast { max-width: min(92vw, 420px); }
@media (max-width: 760px) {
  .toast { bottom: calc(86px + env(safe-area-inset-bottom)) !important; font-size: .85rem; }
  /* filtres en une ligne qui défile */
  .toolbar .chips, #st-rfilter { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .toolbar .chips::-webkit-scrollbar, #st-rfilter::-webkit-scrollbar { display: none; }
  .toolbar .chips .chip, #st-rfilter .chip { flex-shrink: 0; }
  /* vitrine */
  .v-top { flex-wrap: wrap; gap: 8px; }
  .v-top h1 { width: 100%; margin: 0; }
  .v-top .spacer { display: none; }
  .v-top .btn { font-size: .8rem; padding: 6px 10px; }
  .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .badge-medal { flex-direction: column; text-align: center; padding: 10px 8px; gap: 6px; }
  .badge-medal .bm-disc { width: 38px; height: 38px; }
  .badge-medal .bm-txt b { font-size: .8rem; }
  .badge-medal .bm-txt span { font-size: .66rem; }
  .v-achievements .row { flex-wrap: wrap; gap: 4px 8px; }
  .vitrine { padding: 14px !important; }
  .v-head { gap: 12px; }
  .v-name { font-size: 1.3rem; }
  .pick-list { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important; }
}
@media (max-width: 760px) { .badge-medal.new .bm-txt b::after { content: "NOUVEAU"; display: block; margin-top: 2px; } }
.ctile .cinfo { gap: 4px; }
.ctile .cnum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ctile .price { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 760px) {
  .hero .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero .row .btn { justify-content: center; }
  .hero .row .btn.primary { grid-column: 1 / -1; }
  .licences { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .licences .game-tile:not(.soon) { grid-column: 1 / -1; }
  .licences .game-tile.soon { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; position: relative; }
  .licences .game-tile.soon .gicon { width: 36px; height: 36px; border-radius: 10px; }
  .licences .game-tile.soon .gicon svg { width: 20px; height: 20px; }
  .licences .game-tile.soon h3 { font-size: .88rem; }
  .licences .game-tile.soon .gtxt .small { font-size: .7rem; }
  .licences .game-tile.soon .tag { position: absolute; top: 8px; right: 8px; font-size: .62rem; }
}
@media (max-width: 760px) {
  #s-list .grid-auto, #h-inprogress .grid-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .set-card { padding: 9px; gap: 5px; border-radius: 14px; min-width: 0; }
  .set-card .logo-wrap { height: 52px; padding: 4px; }
  .set-card .logo-wrap img { max-height: 44px; }
  .set-card .logo-gen { font-size: .7rem; padding: 5px 8px; gap: 4px; }
  .set-card .logo-gen svg { width: 13px; height: 13px; }
  .set-card .set-title { gap: 5px; min-width: 0; }
  .set-card .set-title b { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .set-card .set-title img { height: 14px; }
  .set-card .count { font-size: 1rem; }
  .set-card .rarity-list { display: none; }
  .set-card .set-sub { font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .set-card .badge-complete { font-size: .6rem; padding: 2px 6px; }
  #s-f { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  #s-f .chip { flex-shrink: 0; }
}
@media (max-width: 760px) {
  .mainnav a.nav-scan:hover, .mainnav a.nav-scan.active { color: #fff !important; filter: none; }
  .scan-view:not(:has(video)):not(:has(img)) { aspect-ratio: 4 / 3; }
}

/* ===== Page Capturer : choix du mode, zone photo, mode d'emploi, boutons toujours accessibles ===== */
.mode-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 900px; margin-bottom: 16px; }
.mode-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 2px solid var(--line); transition: border-color .15s, background .15s, transform .1s; }
.mode-card:hover { border-color: rgba(124,92,255,.6); }
.mode-card .mc-ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--surface2); color: #c8ccea; }
.mode-card .mc-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mode-card .mc-txt b { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.mode-card .mc-txt span { font-size: .76rem; color: var(--muted); }
.mode-card.on { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--holo) border-box; box-shadow: 0 8px 22px rgba(124,92,255,.22); }
.mode-card.on .mc-ico { background: var(--holo); color: #16172a; }
.mode-card .mc-check { position: absolute; top: 8px; right: 10px; color: #3ddc97; display: none; }
.scan-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; color: var(--muted); }
.scan-empty b { color: var(--text); font-family: var(--display); font-weight: 600; }
.scan-empty span { font-size: .82rem; }
.se-frame { width: 96px; height: 134px; border-radius: 12px; border: 2px dashed rgba(255,210,63,.6); display: flex; align-items: center; justify-content: center; color: rgba(255,210,63,.8); margin-bottom: 6px; }
.se-frame.grid { width: auto; height: auto; display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 47px); gap: 5px; padding: 6px; }
.se-frame.grid i { border: 1.5px dashed rgba(255,210,63,.5); border-radius: 4px; }
.scan-view { max-height: 64vh; }
.scan-view:not(:has(video)):not(:has(img)) { aspect-ratio: 4 / 3; }
/* boutons de validation collés en bas de l'écran tant qu'on fait défiler */
.action-dock { position: sticky; bottom: 12px; z-index: 20; padding: 10px 12px; border-radius: 14px; background: rgba(20,23,42,.94); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.action-dock:not(:has(> :not(.hidden))) { display: none; } /* v2.57 : barre de boutons vide (tous cachés) = plus de bloc gris inutile sous la photo */
@media (max-width: 760px) {
  .mode-pick { gap: 8px; }
  .mode-card { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
  .mode-card .mc-ico { width: 34px; height: 34px; border-radius: 10px; }
  .mode-card .mc-txt b { font-size: .9rem; }
  .mode-card .mc-txt span { font-size: .7rem; }
  .action-dock { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .action-dock .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 760px) { .btile .btn.sm { font-size: .72rem; padding: 4px 7px; } .btile select { font-size: .78rem; padding: 5px 6px; } }
.se-frame.grid { align-items: stretch; justify-items: stretch; }

/* Caméra sans grandes bandes noires */
.scan-view.live-cover video { object-fit: cover; }
.scan-view.live-fit { max-height: 78vh; }
.scan-view.live-fit video { object-fit: contain; }
/* Choix de la série de la page, mis en avant */
.set-first { margin-bottom: 12px; padding: 12px 14px; border-radius: 16px; border: 2px dashed rgba(255,210,63,.55); background: rgba(255,210,63,.06); }
.set-first.chosen { border-style: solid; border-color: rgba(61,220,151,.6); background: rgba(61,220,151,.07); }
.set-first .sf-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; color: #ffd23f; }
.set-first.chosen .sf-head { color: #3ddc97; }
.set-first .sf-head b { color: var(--text); }
.set-first select { width: 100%; }
.detect-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: rgba(124,92,255,.1); border: 1px solid rgba(124,92,255,.35); }
.detect-bar > span { flex: 1; min-width: 200px; }

/* Vitrine « éventail » : taille et angle adaptés au nombre de cartes, tout tient dans la vitrine */
.v-featured.layout-eventail { container-type: inline-size; display: flex; justify-content: center; align-items: flex-start; padding: 26px 0 0; margin: 10px 0 26px; }
.v-featured.layout-eventail .vcard {
  --w: min(190px, calc(100cqw / (var(--n, 5) * 0.74 + 0.4)));
  flex: 0 0 auto; width: var(--w); margin: 0 calc(var(--w) * -0.13);
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px)); transform-origin: 50% 120%; transition: transform .2s; }
.v-featured.layout-eventail .vcard:hover { transform: translateY(-14px) rotate(0deg) scale(1.06) !important; z-index: 20 !important; }
.v-featured.layout-eventail .vcard > div { box-shadow: 0 10px 24px rgba(0,0,0,.45); border-radius: 12px; }
@media (max-width: 760px) {
  .v-featured.layout-eventail .vcard { --w: min(130px, calc(100cqw / (var(--n, 5) * 0.7 + 0.45))); margin: 0 calc(var(--w) * -0.15); }
}
.v-featured.layout-eventail { gap: 0 !important; padding-left: 4%; padding-right: 4%; }
.v-featured.layout-eventail .vcard { --w: min(190px, calc(100cqw / (var(--n, 5) * 0.8 + 0.5))); }
@media (max-width: 760px) { .v-featured.layout-eventail .vcard { --w: min(130px, calc(100cqw / (var(--n, 5) * 0.78 + 0.5))); } }
.v-featured.layout-eventail .vcard { --w: min(190px, calc(100cqw / (var(--n, 5) * 0.64 + 0.5))); margin: 0 calc(var(--w) * -0.18); }
@media (max-width: 760px) { .v-featured.layout-eventail .vcard { --w: min(130px, calc(100cqw / (var(--n, 5) * 0.44 + 0.6))); margin: 0 calc(var(--w) * -0.28); } }
.v-featured.layout-eventail { margin-bottom: 48px; }
@media (max-width: 760px) { .v-featured.layout-eventail { margin-bottom: 26px; } }
.v-pick-link { text-align: center; margin: -6px 0 18px; }
.v-pick-link a { display: inline-flex; align-items: center; gap: 5px; color: var(--accent2); text-decoration: none; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: rgba(255,210,63,.08); border: 1px solid rgba(255,210,63,.3); }
.v-pick-link a:hover { background: rgba(255,210,63,.16); }

/* ===== Mes objectifs / liste de souhaits ===== */
.goal-tabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.goal-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; white-space: nowrap; font-weight: 600; font-size: .9rem; flex-shrink: 0; }
.goal-tab b { font-size: .72rem; background: var(--surface2); border-radius: 999px; padding: 1px 7px; }
.goal-tab.on { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--holo) border-box; border: 2px solid transparent; }
.goal-tab.on b { background: var(--holo); color: #16172a; }
.goal-new { margin-bottom: 14px; }
.goal-new input[type=date] { margin-left: 4px; }
.goal-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 10px; }
.goal-card.done { border-color: rgba(61,220,151,.5); }
.goal-card .gc-logo { width: 130px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; min-height: 60px; }
.goal-card .gc-logo img { max-width: 100%; max-height: 64px; }
.goal-card .gc-main { flex: 1; min-width: 0; }
.goal-card .gc-name { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.goal-card .gc-cost { color: var(--accent2); }
.goal-card .gc-actions { margin-top: 10px; gap: 8px; }
.goal-card .gc-actions input[type=date] { padding: 4px 6px; font-size: .78rem; }
.pill.late, .home-goal .late { background: rgba(255,91,91,.18); color: #ff8a8a; }
.pill.soon { background: rgba(255,184,77,.18); color: #ffc36b; }
.miss-sum { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; margin-bottom: 14px; }
.miss-sum > div { display: flex; flex-direction: column; }
.miss-sum > div b { font-family: var(--display); font-size: 1.2rem; color: var(--accent2); }
.miss-sum > div span { font-size: .75rem; color: var(--muted); }
.miss-sum .btn { margin-left: auto; }
.goals-page .ctile.missing .cimg img { filter: none !important; opacity: 1 !important; }
.ctile .wishmark { position: absolute; top: 7px; left: 7px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ff4fa3; color: #fff; font-size: .75rem; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.btn.wish-on { background: rgba(255,79,163,.18); border-color: rgba(255,79,163,.6); color: #ff8cc4; }
.btn.goal-on { background: rgba(61,220,151,.12); border-color: rgba(61,220,151,.5); color: #3ddc97; }
.home-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.home-goal { display: block; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.home-goal:hover { border-color: rgba(124,92,255,.6); }
.home-goal b { font-family: var(--display); font-weight: 600; }
@media (max-width: 760px) {
  .goal-card { flex-direction: column; gap: 8px; padding: 12px; }
  .goal-card .gc-logo { width: 100%; min-height: 0; justify-content: flex-start; }
  .goal-card .gc-logo img { max-height: 44px; }
  .miss-sum { gap: 8px 18px; }
  .miss-sum .btn { margin-left: 0; }
  .goal-tab { padding: 8px 11px; font-size: .82rem; }
}
input[type=date] { color-scheme: dark; background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 5px 8px; }
.goal-tab .sh { display: none; }
@media (max-width: 760px) {
  .goal-tabs { gap: 6px; }
  .goal-tab { flex: 1 1 0; justify-content: center; gap: 5px; padding: 8px 6px; }
  .goal-tab .lg { display: none; }
  .goal-tab .sh { display: inline; }
}

/* Liste de souhaits : raccourci de l'accueil et section « Je recherche » de la vitrine */
.v-wish h2 { display: inline-flex; align-items: center; gap: 7px; }
.v-wish h2 svg { color: #ff4fa3; }
.v-wish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.v-wish-grid .vcard img { filter: saturate(.85); }
.v-wish-grid .vlabel { font-size: .7rem; line-height: 1.25; }
@media (max-width: 760px) { .v-wish-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .v-wish-grid .vlabel { font-size: .62rem; } }

/* =====================================================================
   CARTES VIVANTES : inclinaison, reflets selon la rareté, halos, apparitions
   ===================================================================== */
.ctile.owned .cimg::before { display: none !important; } /* ancien reflet remplacé */
.ctile .cimg {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  /* petit reflet « chargement » tant que l'image n'est pas là */
  background: linear-gradient(110deg, var(--bg2) 30%, #1f2540 45%, var(--bg2) 60%) 0 0 / 250% 100%;
  animation: skel 1.4s linear infinite;
}
.ctile .cimg.ld, .ctile .cimg:has(.numonly), .ctile .cimg:has(.noimg) { animation: none; background: var(--bg2); }
@keyframes skel { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.ctile .cimg.tilting { transition: transform .06s linear, box-shadow .25s; }
.ctile:hover .cimg { transform: perspective(700px) translateY(-4px) rotateX(var(--rx)) rotateY(var(--ry)); box-shadow: 0 14px 28px rgba(0,0,0,.5); }
.ctile:hover .cimg img { transform: none; }
/* halo à la couleur de la rareté pour les cartes possédées */
.ctile.owned:not(.rt-0):hover .cimg { box-shadow: 0 14px 28px rgba(0,0,0,.5), 0 0 0 1.5px var(--rc), 0 0 22px -4px var(--rc); }
.ctile.owned.rt-5 .cimg { box-shadow: 0 0 0 1px rgba(255,210,63,.35), 0 0 14px -6px #ffd23f; }
/* cartes manquantes : un peu de couleur au survol — à la souris seulement
   (sur téléphone, un appui prolongé « survole » la carte et la dévoilait) */
@media (hover: hover) and (pointer: fine) {
  .ctile.missing:hover .cimg img { filter: grayscale(.35) brightness(.85); opacity: .85; }
  .ctile.missing:hover .cimg::after { opacity: 0; }
}
.ctile.missing .cimg::after { transition: opacity .2s; }
/* appui long sur téléphone : pas d'aperçu de l'image (il montrait la carte manquante en couleurs) */
.ctile.missing .cimg img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* reflets (au survol sur ordinateur) */
.t-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .25s; border-radius: inherit; }
.ctile:hover .t-shine { opacity: 1; }
.rt-1 .t-shine { background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.5), transparent 45%); mix-blend-mode: overlay; }
.rt-2 .t-shine, .rt-3 .t-shine, .rt-4 .t-shine, .rt-5 .t-shine {
  background:
    radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 42%),
    repeating-linear-gradient(115deg, #ff5f6d 0%, #ffc371 8%, #47ff9a 16%, #3fd5ff 24%, #a66bff 32%, #ff5f6d 40%);
  background-size: 100% 100%, 260% 260%; background-position: 0 0, var(--mx) var(--my);
  mix-blend-mode: color-dodge; }
.rt-2 .t-shine { filter: opacity(.35); }
.rt-3 .t-shine { filter: opacity(.5); }
.rt-4 .t-shine, .rt-5 .t-shine { filter: opacity(.6); }
.rt-4 .t-shine::after, .rt-5 .t-shine::after { content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px), radial-gradient(circle, #fff3c4 0 1px, transparent 1.6px);
  background-size: 19px 23px, 31px 27px; background-position: calc(var(--mx) * .3) calc(var(--my) * .4), calc(100% - var(--mx) * .4) var(--my); }
/* sur téléphone (pas de survol) : un léger reflet permanent qui bouge doucement sur les plus rares */
@media (hover: none) {
  .ctile.owned.rt-3 .t-shine, .ctile.owned.rt-4 .t-shine, .ctile.owned.rt-5 .t-shine { opacity: .5; animation: holoShift 7s ease-in-out infinite; }
}

/* vitrine : cartes qui flottent doucement, reflet au survol */
.v-featured .vcard > div { position: relative; transition: transform .35s cubic-bezier(.2,.8,.2,1); transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.v-featured .vcard > div.tilting { transition: transform .06s linear; }
.v-featured:not(.layout-eventail):not(.layout-classeur) .vcard { animation: vfloat 6s ease-in-out infinite; }
.v-featured:not(.layout-eventail):not(.layout-classeur) .vcard:nth-child(2n) { animation-delay: -2s; }
.v-featured:not(.layout-eventail):not(.layout-classeur) .vcard:nth-child(3n) { animation-delay: -4s; }
@keyframes vfloat { 50% { transform: translateY(-6px); } }
.v-featured .vcard > div::after { content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.45), transparent 45%); mix-blend-mode: overlay; }
.v-featured .vcard:hover > div::after { opacity: 1; }

/* fiche carte : la carte arrive en se retournant */
.modal .holo-card { animation: cardIn .6s cubic-bezier(.2,.9,.25,1.1) both; }
@keyframes cardIn { from { opacity: 0; transform: perspective(900px) rotateY(-35deg) scale(.85) translateY(10px); } }

/* capture réussie : la carte apparaît avec un éclat */
.capture-done { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.capture-done > .row { flex-basis: 100%; }
.reveal { position: relative; width: 110px; flex-shrink: 0; animation: revealIn .7s cubic-bezier(.2,.9,.25,1.2) both; }
.reveal img { width: 100%; aspect-ratio: 63/88; object-fit: cover; border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.55), 0 0 0 2px rgba(255,255,255,.12); position: relative; z-index: 1; }
.reveal .burst { position: absolute; inset: -30%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(255,210,63,.55) 9% 11%, transparent 12% 20%, rgba(255,79,163,.5) 21% 23%, transparent 24% 33%, rgba(52,213,255,.5) 34% 36%, transparent 37% 45%, rgba(124,92,255,.55) 46% 48%, transparent 49% 58%, rgba(255,210,63,.5) 59% 61%, transparent 62% 70%, rgba(61,220,151,.5) 71% 73%, transparent 74% 83%, rgba(255,79,163,.5) 84% 86%, transparent 87%);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
  animation: burst 1.6s ease-out both; }
.reveal.rt-4 .burst, .reveal.rt-5 .burst { animation-duration: 2.4s; inset: -45%; }
@keyframes revealIn { from { opacity: 0; transform: perspective(700px) rotateY(90deg) scale(.7); } 60% { transform: perspective(700px) rotateY(-8deg) scale(1.05); } }
@keyframes burst { from { opacity: 0; transform: scale(.3) rotate(0deg); } 25% { opacity: 1; } to { opacity: 0; transform: scale(1.3) rotate(60deg); } }

@media (prefers-reduced-motion: reduce) {
  .ctile .cimg, .v-featured .vcard, .modal .holo-card, .reveal, .reveal .burst { animation: none !important; }
}

/* accueil : liens discrets */
.slim-link { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--muted); text-decoration: none; margin-right: 12px; }
.slim-link svg { color: #ff4fa3; }
.slim-link:hover { color: var(--text); }
.home-slim { display: flex; flex-wrap: wrap; gap: 6px 4px; margin: 20px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--line); }
.home-slim .slim-link:first-child svg { color: #a78bfa; }

/* Réglages d'Arnaud : aucune carte ne bouge toute seule, pas de soulèvement au survol, rotation plus marquée */
.ctile:hover .cimg { transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)); }
.ctile .cimg { transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)); }
.v-featured .vcard, .v-featured:not(.layout-eventail):not(.layout-classeur) .vcard { animation: none !important; }
.v-featured .vcard > div { transform: perspective(650px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.v-featured.layout-eventail .vcard:hover { transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px)) !important; z-index: 20 !important; }
.holo-card.idle, .holo-card.idle .holo-shine { animation: none !important; }
.holo-card { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
@media (hover: none) {
  .ctile.owned.rt-3 .t-shine, .ctile.owned.rt-4 .t-shine, .ctile.owned.rt-5 .t-shine { opacity: 0; animation: none; }
}

/* ===== État de la carte ===== */
.cond-box { margin: 4px 0 14px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.cond-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.cond-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 58px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); cursor: pointer; font: inherit; }
.cond-btn b { font-size: .9rem; display: flex; align-items: center; min-height: 18px; }
.cond-btn span { font-size: .62rem; color: var(--muted); white-space: nowrap; }
.cond-btn:hover { border-color: rgba(124,92,255,.6); }
.cond-btn.on { background: var(--holo); color: #16172a; border-color: transparent; }
.cond-btn.on span { color: #16172a; }
.cond-value { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-end; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.cond-value > div { display: flex; flex-direction: column; }
.cond-value b { font-family: var(--display); font-size: 1.35rem; color: var(--accent2); }
.condchip { position: absolute; bottom: 8px; right: 8px; z-index: 2; font-size: .64rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: linear-gradient(135deg, #e9edf5, #9aa3b5); color: #16172a; box-shadow: 0 2px 6px rgba(0,0,0,.4); letter-spacing: .02em; }
.condchip.inline { position: static; display: inline-block; vertical-align: 1px; }
@media (max-width: 760px) { .cond-btn { min-width: 0; flex: 1 1 calc(25% - 6px); padding: 5px 4px; } }
.set-cost { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 10px; font-size: .85rem; }
.set-cost > span { display: inline-flex; align-items: center; gap: 5px; }
.set-cost b { color: var(--accent2); }
.set-cost a { color: var(--muted); }

/* Bouton « capturer » sur les cartes manquantes : discret mais assez gros pour le doigt */
.cap-btn { position: absolute; right: 7px; bottom: 7px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(124,92,255,.55); color: #fff; border: 1.5px solid rgba(255,255,255,.35); box-shadow: 0 4px 12px rgba(0,0,0,.35); opacity: .55; transition: opacity .15s, transform .15s, background .15s; text-decoration: none; }
.ctile:hover .cap-btn { opacity: .9; }
.cap-btn:hover, .cap-btn:focus-visible { opacity: 1; background: linear-gradient(135deg, #7c5cff, #ff4fa3); transform: scale(1.08); }
@media (max-width: 760px) { .cap-btn { width: 40px; height: 40px; right: 5px; bottom: 5px; } }
.condchip { display: inline-flex; align-items: center; gap: 3px; }
/* Séries favorites */
.favset { position: absolute; top: 8px; left: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: rgba(12,14,25,.6); color: #8a92a8; cursor: pointer; transition: color .15s, transform .15s, background .15s; }
.favset:hover { color: #ffd23f; transform: scale(1.1); }
.favset.on { color: #ffd23f; background: rgba(255,210,63,.14); border-color: rgba(255,210,63,.5); }
.favset.on svg { fill: #ffd23f; }
.favset.inline { position: static; width: 30px; height: 30px; margin-left: 4px; }
.set-card { position: relative; }
.fav-block .serie-head .favdot { color: #ffd23f; display: flex; }
.fav-block .serie-head .favdot svg { fill: #ffd23f; }
.favset:not(.on):not(.inline) { opacity: .6; }
.favset:not(.on):not(.inline):hover { opacity: 1; }
@media (max-width: 760px) { .favset:not(.inline) { width: 24px; height: 24px; top: 4px; left: 4px; } .favset:not(.inline) svg { width: 13px; height: 13px; } }

/* Champ nombre sans petites flèches */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Bouton « capturer » : sombre et discret */
.cap-btn { background: rgba(14,16,28,.62); border-color: rgba(255,255,255,.28); opacity: .7; }
.ctile:hover .cap-btn { opacity: .95; }
.cap-btn:hover, .cap-btn:focus-visible { background: rgba(10,12,22,.9); border-color: rgba(255,255,255,.6); opacity: 1; }

/* ===== Fiche carte épurée ===== */
.cd-img { position: relative; }
.cd-fav-wrap { position: absolute; top: 10px; right: 10px; z-index: 6; }
.cd-favstar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(12,14,25,.65); border: 1px solid rgba(255,255,255,.25); color: #cfd4e6; box-shadow: 0 4px 12px rgba(0,0,0,.4); transition: transform .15s, color .15s; }
.cd-favstar:hover { transform: scale(1.1); color: #ffd23f; }
.cd-favstar.on { color: #ffd23f; border-color: rgba(255,210,63,.6); }
.cd-favstar.on svg { fill: #ffd23f; }
.cd-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.cd-facts span { font-size: .78rem; padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: #c9cde0; }
.cd-price { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 16px; }
.cd-price-main { display: flex; align-items: baseline; gap: 8px; }
.cd-price-main b { font-family: var(--display); font-size: 1.6rem; color: var(--accent2); }
.cd-price-main span { font-size: .8rem; color: var(--muted); }
.cd-price-more { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: .78rem; color: var(--muted); }
.cd-price-more b { color: var(--text); font-weight: 600; }
.cd-price-foot { margin-top: 8px; }
.cd-price-foot a { color: var(--muted); }
.cd-mine-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cert-no { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--muted); text-decoration: none; padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--line); }
.cert-no:hover { color: var(--text); border-color: rgba(61,220,151,.5); }
.qty-ctl { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.qty-ctl button, .qty-ctl a { width: 34px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--text); font-size: 1.1rem; cursor: pointer; text-decoration: none; }
.qty-ctl button:hover, .qty-ctl a:hover { background: var(--surface2); }
.qty-ctl b { min-width: 26px; text-align: center; font-size: .95rem; }
.cd-vars-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cd-photos-head { margin: 4px 0 6px; }
.cd-photos-head span { opacity: .8; }
.photos .ph-add { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--line); border-radius: 8px; cursor: pointer; color: var(--muted); min-height: 84px; }
.photos .ph-add:hover { color: var(--text); border-color: rgba(124,92,255,.6); }
.cd-note { margin: 12px 0 6px; }
.cd-note summary { cursor: pointer; color: var(--muted); }
.cd-note textarea { margin-top: 6px; min-height: 60px; }
.cd-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.linkbtn { background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.linkbtn.danger:hover { color: #ff8a8a; }
.cond-box { padding: 10px 12px; }
@media (max-width: 760px) {
  .cd-img { max-width: 210px !important; }
  .cd h1 { font-size: 1.3rem; }
  .cd-facts { margin: 8px 0 10px; gap: 5px; }
  .cd-facts span { font-size: .72rem; padding: 2px 8px; }
  .cd-price { padding: 10px 12px; }
  .cd-price-main b { font-size: 1.35rem; }
  .cd-favstar { width: 36px; height: 36px; }
  .photos .ph-add { min-height: 70px; }
}

/* Mon Dex : boutons du haut sur une seule ligne en téléphone */
@media (max-width: 760px) { .m-hide { display: none; } }

/* Langue des cartes d'une série (en haut à droite du bloc) */
.set-hero { position: relative; }
.set-lang { position: absolute; top: 14px; right: 14px; display: flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line, rgba(255,255,255,.1)); }
.set-lang button { border: 0; background: transparent; color: var(--muted, #9aa3b8); font: inherit; font-size: .78rem; font-weight: 800; letter-spacing: .04em; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.set-lang button:hover { color: var(--text, #fff); }
.set-lang button.on { background: var(--text); color: var(--bg); }
@media (max-width: 760px) {
  .set-lang { position: static; order: -1; justify-self: end; margin-bottom: -6px; }
  .set-lang button { padding: 5px 10px; }
}

/* Langue de la carte possédée, quand elle diffère de la langue affichée */
.ctile .langchip { position: absolute; left: 36px; bottom: 10px; z-index: 3; font-size: .62rem; font-weight: 800; letter-spacing: .05em; padding: 2px 6px; border-radius: 6px; background: rgba(10,12,24,.82); color: #fff; border: 1px solid rgba(255,255,255,.25); pointer-events: none; }

/* Appli installable */
.install-banner { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: -8px 0 20px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(124,92,255,.16), rgba(52,213,255,.08)); }
.install-banner img { border-radius: 10px; flex: none; }
.install-banner div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.install-banner div b { font-size: .92rem; }
.install-banner div span { font-size: .78rem; color: var(--muted); }
.install-banner .btn { flex: none; }
.install-x { flex: none; width: 30px; height: 30px; border: 0; background: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; border-radius: 50%; }
.install-help h2 { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.install-help ol { padding-left: 20px; line-height: 1.7; }
.install-help .ios-share { display: inline-flex; vertical-align: -3px; color: #34a0ff; }
/* hors ligne : les boutons qui ont besoin du réseau sont atténués */
.offline #c-prices { opacity: .45; pointer-events: none; }

/* ===================== CAPSULES ===================== */
.capsule { display: block; overflow: visible; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.capsule .cap-glow { opacity: .35; transition: opacity .3s, fill .3s; }
.capsule.idle { animation: capFloat 3.2s ease-in-out infinite; }
@keyframes capFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.cap-hero { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; }
.cap-stage { display: flex; justify-content: center; align-items: center; min-height: 170px; border-radius: 18px;
  background: radial-gradient(circle at 50% 60%, rgba(124,92,255,.35), transparent 65%); }
.cap-stage.is-empty .capsule { filter: grayscale(.8) brightness(.7) drop-shadow(0 10px 18px rgba(0,0,0,.45)); animation: none; }
.cap-hero h1 { margin: 0 0 6px; }
.cap-status { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.cap-status b { color: var(--text); }
.cap-status code { font-size: .85em; }
.cap-pips { display: flex; gap: 5px; margin-bottom: 4px; }
.cap-pips i { width: 14px; height: 18px; border-radius: 7px; background: var(--surface2, #232842); border: 1px solid var(--line); }
.cap-pips i.on { background: linear-gradient(180deg, #ff4fa3 0 48%, #1b1f40 52% 100%); border-color: rgba(255,255,255,.35); box-shadow: 0 0 8px rgba(255,79,163,.45); }
.btn.big { padding: 12px 20px; font-size: 1rem; }
.cap-odds { margin-top: 12px; }
.cap-odds summary { cursor: pointer; color: var(--muted); }
.cap-odds-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 6px; }
.cap-odds-list > span { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.tier-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 800; color: var(--tc); background: color-mix(in srgb, var(--tc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); }
.shiny-pill, .new-pill, .dup-pill { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 800; }
.shiny-pill { color: #1b1300; background: linear-gradient(90deg, #ffe27a, #ffd1f0, #b9f3ff); }
.new-pill { color: #062a19; background: #3ddc97; }
.dup-pill { color: var(--text); background: rgba(255,255,255,.1); }

/* Pokédex */
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.dex-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 7px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface, #161a2e); color: var(--text); font: inherit; min-height: 128px; }
.dex-cell.got { cursor: pointer; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 62%), var(--surface, #161a2e); border-bottom: 3px solid var(--tc); }
.dex-cell.got:hover { border-color: var(--tc); }
.dex-cell img { width: 78px; height: 78px; object-fit: contain; }
.dex-cell .dn { font-size: .76rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dex-cell .dnum { font-size: .66rem; color: var(--muted); }
.dex-cell .dq { position: absolute; top: 6px; left: 7px; font-size: .68rem; font-weight: 800; background: rgba(0,0,0,.55); padding: 1px 6px; border-radius: 999px; }
.dex-cell .dsh { position: absolute; top: 5px; right: 8px; color: #ffe27a; text-shadow: 0 0 6px rgba(255,226,122,.8); }
.dex-cell.miss { opacity: .45; justify-content: center; }
.dex-cell .dq-miss { font-size: 1.8rem; font-weight: 800; color: var(--muted); line-height: 1; margin-bottom: 6px; }

/* fiche d'un Pokémon, choix d'avatar */
.sp-modal { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: center; }
.sp-art { border-radius: 20px; padding: 10px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tc) 35%, transparent), transparent 70%); }
.sp-art img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.sp-info h2 { margin: 2px 0 8px; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; max-height: 55vh; overflow: auto; margin-top: 10px; }
.av-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface, #161a2e); color: var(--text); font: inherit; cursor: pointer; }
.av-cell:hover { border-color: #a78bfa; }
.av-cell img { width: 64px; height: 64px; object-fit: contain; }
.av-cell span { font-size: .7rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-cell.shiny { border-color: rgba(255,226,122,.5); }
.av-cell.shiny span::before { content: '✦ '; color: #ffe27a; }
.av-pick input[type=search] { width: 100%; }

/* ---------- ouverture (plein écran) ---------- */
body.cap-lock { overflow: hidden; }
.cap-ov { position: fixed; inset: 0; z-index: 3000; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; --tc: #fff; }
.cap-ov.co-out { opacity: 0; transition: opacity .25s; }
.cap-ov-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, #22254a 0%, #0b0d1c 70%); }
.cap-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.cap-scene { position: relative; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; }
.cap-ball { position: relative; z-index: 3; transform: translateY(-120vh); }
.cap-ov.co-drop .cap-ball { animation: capDrop .62s cubic-bezier(.3,1.4,.5,1) forwards; }
@keyframes capDrop { 0% { transform: translateY(-120vh) rotate(-30deg); } 70% { transform: translateY(8px) rotate(4deg); } 100% { transform: translateY(0) rotate(0); } }
.cap-ov.co-wobble .cap-ball .capsule { animation: capWobble .7s ease-in-out; transform-origin: 50% 95%; }
@keyframes capWobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-16deg); } 45% { transform: rotate(13deg); } 70% { transform: rotate(-6deg); } }
.cap-ov.co-hint .capsule .cap-glow { fill: var(--tc); opacity: 1; filter: drop-shadow(0 0 6px var(--tc)); }
.cap-ov.co-hint .cap-ball { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--tc) 70%, transparent)); }
/* ouverture de la capsule */
.cap-ov.co-burst .capsule .cap-top { animation: capTop .55s cubic-bezier(.2,.8,.3,1) forwards; transform-box: fill-box; transform-origin: 0% 100%; }
.cap-ov.co-burst .capsule .cap-bot { animation: capBot .55s ease-in forwards; }
.cap-ov.co-burst .capsule .cap-seam, .cap-ov.co-burst .capsule .cap-glow { animation: capFade .3s forwards; }
@keyframes capTop { to { transform: translate(-26px, -70px) rotate(-38deg); opacity: 0; } }
@keyframes capBot { to { transform: translateY(40px); opacity: 0; } }
@keyframes capFade { to { opacity: 0; } }
.cap-ov.co-burst .cap-flash { animation: capFlash .6s ease-out; }
@keyframes capFlash { 0% { opacity: 0; } 15% { opacity: .95; background: #fff; } 100% { opacity: 0; background: var(--tc); } }
/* halo, rayons, particules */
.cap-halo { position: absolute; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 60%, transparent) 0%, transparent 68%); opacity: 0; transform: scale(.3); z-index: 1; }
.cap-ov.co-reveal .cap-halo { opacity: 1; transform: scale(1); transition: all .5s ease-out; }
.cap-rays { position: absolute; width: 560px; height: 560px; border-radius: 50%; opacity: 0; z-index: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 55%, transparent) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 68%); mask: radial-gradient(circle, #000 0%, transparent 68%); }
.cap-ov.co-reveal.co-t4 .cap-rays, .cap-ov.co-reveal.co-t5 .cap-rays, .cap-ov.co-reveal.co-t6 .cap-rays { opacity: .9; animation: capSpin 14s linear infinite; transition: opacity .6s; }
.cap-ov.co-reveal.co-t3 .cap-rays { opacity: .35; animation: capSpin 22s linear infinite; }
.cap-ov.co-reveal.co-t6 .cap-rays { background: repeating-conic-gradient(#ffd23f 0deg 6deg, transparent 6deg 12deg, #ff4fa3 12deg 18deg, transparent 18deg 24deg, #34d5ff 24deg 30deg, transparent 30deg 36deg); }
@keyframes capSpin { to { transform: rotate(360deg); } }
.cap-burst { position: absolute; left: 50%; top: 50%; z-index: 2; }
.cap-burst i { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: var(--tc); box-shadow: 0 0 10px var(--tc); opacity: 0; }
.cap-ov.co-burst .cap-burst i { animation: capPart .9s var(--dl) ease-out forwards; }
.cap-ov.co-t6 .cap-burst i:nth-child(3n) { background: #34d5ff; box-shadow: 0 0 10px #34d5ff; }
.cap-ov.co-t6 .cap-burst i:nth-child(3n+1) { background: #ffd23f; box-shadow: 0 0 10px #ffd23f; }
@keyframes capPart { 0% { opacity: 1; transform: rotate(var(--a)) translateX(10px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(.4); } }
/* le Pokémon */
.cap-mon { position: absolute; z-index: 4; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.1); }
.cap-mon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.cap-ov.co-reveal .cap-mon { animation: capPop .6s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes capPop { 0% { opacity: 0; transform: scale(.1); filter: brightness(6); } 60% { opacity: 1; filter: brightness(1.6); } 100% { opacity: 1; transform: scale(1); filter: brightness(1); } }
.cap-ov.co-reveal.co-t5 .cap-mon img, .cap-ov.co-reveal.co-t6 .cap-mon img { filter: drop-shadow(0 0 18px var(--tc)) drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.cap-ov.co-shiny.co-reveal .cap-mon img { animation: capShiny 2.4s ease-in-out infinite; }
@keyframes capShiny { 0%, 100% { filter: drop-shadow(0 0 10px #ffe27a) saturate(1.2); } 50% { filter: drop-shadow(0 0 22px #ffd1f0) saturate(1.5) brightness(1.1); } }
.cap-sparkles { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cap-sparkles b { position: absolute; color: #ffe27a; font-size: 1.2rem; opacity: 0; text-shadow: 0 0 8px #fff; }
.cap-ov.co-reveal .cap-sparkles b { animation: capTwinkle 1.6s var(--dl) ease-in-out infinite; }
@keyframes capTwinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2); } }
/* légendaire / fabuleux : l'écran tremble */
.cap-ov.co-burst.co-t5 .cap-scene, .cap-ov.co-burst.co-t6 .cap-scene { animation: capShake .5s .1s; }
@keyframes capShake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); } 60% { transform: translate(-5px, -3px); } 80% { transform: translate(4px, 3px); } }
/* texte */
.cap-text { position: relative; z-index: 6; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 150px; padding: 0 16px; }
.cap-ov.co-reveal .cap-text > * { animation: capUp .45s .25s both; }
@keyframes capUp { from { opacity: 0; transform: translateY(12px); } }
.cap-banner { font-family: Fredoka, Inter, sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tc); text-shadow: 0 0 14px var(--tc); }
.cap-ov.co-t6 .cap-banner { background: linear-gradient(90deg, #ffd23f, #ff4fa3, #7c5cff, #34d5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cap-name { font-family: Fredoka, Inter, sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.1; }
.cap-tags { justify-content: center; gap: 6px; }
.cap-btns { justify-content: center; gap: 8px; margin-top: 8px; }
.cap-hint { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); color: var(--muted); z-index: 6; }
/* toucher le Pokémon pour ouvrir la suivante */
.cap-mon.tap-next { cursor: pointer; z-index: 6; }
.cap-mon.tap-next:active img { transform: scale(.94); }
.cap-tap { color: var(--muted); }

/* fiche d'un Pokémon : pas encore attrapé, évolutions, version chromatique */
.sp-art { position: relative; }
.sp-miss .sp-art img { filter: grayscale(1) brightness(.55); opacity: .45; }
.sp-q { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 4.5rem; font-weight: 900; color: rgba(255,255,255,.3); }
.sp-miss .sp-q { display: flex; }
.sp-art img { height: auto; }
/* tailles réservées : la fiche ne change pas de taille quand on passe de Normal à Chromatique */
.sp-count { min-height: 2.9em; }
.sp-sell { min-height: 64px; }
.sp-info .btn:disabled { opacity: .45; }
.sp-evo { margin-top: 18px; }
.sp-evo h3 { margin: 0 0 8px; font-size: 1rem; }
.evo-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evo-stage { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.evo-arrow { font-size: 1.6rem; color: var(--muted); line-height: 1; }
.evo-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; padding: 6px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface, #161a2e); color: var(--text); font: inherit; cursor: pointer; }
.evo-cell.got { border-bottom: 3px solid var(--tc); background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tc) 20%, transparent), transparent 65%), var(--surface, #161a2e); }
.evo-cell.cur { outline: 2px solid var(--tc); outline-offset: 1px; cursor: default; }
.evo-img { position: relative; width: 60px; height: 60px; display: block; }
.evo-img img { width: 100%; height: 100%; object-fit: contain; }
.evo-cell.miss .evo-img img { filter: grayscale(1) brightness(.55); opacity: .45; }
.evo-cell.miss .evo-img::after { content: "?"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 900; color: rgba(255,255,255,.3); }
.evo-sh { position: absolute; top: -2px; right: -2px; color: #ffe27a; text-shadow: 0 0 6px rgba(255,226,122,.8); font-size: .9rem; }
.evo-n { font-size: .7rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dex-cell.miss { cursor: pointer; }

/* en-tête : capsules à ouvrir (bien visible) */
.caps-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 8px; border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 700; font-size: .85rem;
  border: 1.5px solid transparent; background: linear-gradient(#171a33, #171a33) padding-box, linear-gradient(135deg, #ffd23f, #ff4fa3, #7c5cff, #34d5ff) border-box; }
.caps-chip .caps-ico { display: flex; color: #ff7cc0; }
.caps-chip .caps-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: var(--muted); background: rgba(255,255,255,.08); white-space: nowrap; }
.caps-chip.has { box-shadow: 0 0 14px rgba(255,79,163,.45); }
.caps-chip.has .caps-n { color: #fff; background: linear-gradient(135deg, #ff4fa3, #7c5cff); font-size: .8rem; }
.caps-chip.full .caps-n { background: linear-gradient(135deg, #ffd23f, #ff4fa3); color: #1b1300; }
.caps-chip.has .caps-ico { animation: capsNudge 2.8s ease-in-out infinite; }
@keyframes capsNudge { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-16deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
.caps-chip.active, .caps-chip:hover { color: #fff; }
@media (max-width: 760px) {
  .caps-chip { padding: 0 6px 0 6px; gap: 4px; height: 34px; }
  .caps-chip .caps-lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) { .caps-chip.has .caps-ico { animation: none; } }
/* accueil */
.cap-home { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: -8px 0 20px; border-radius: 16px; border: 1px solid var(--line); text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, rgba(255,79,163,.14), rgba(124,92,255,.12)); }
.cap-home .capsule { flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.cap-home div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cap-home div span { font-size: .78rem; color: var(--muted); }
.cap-home .btn { flex: none; }

@media (max-width: 760px) {
  .cap-hero { grid-template-columns: 1fr; gap: 10px; text-align: left; }
  .cap-stage { min-height: 150px; }
  .dex-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
  .dex-cell { min-height: 116px; }
  .dex-cell img { width: 66px; height: 66px; }
  .sp-modal { grid-template-columns: 1fr; }
  .sp-art { max-width: 220px; margin: 0 auto; }
  .cap-scene { width: 260px; height: 260px; }
  .cap-mon { width: 210px; height: 210px; }
  .cap-name { font-size: 1.7rem; }
  #cp-regions { flex-wrap: nowrap; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { .capsule.idle, .cap-rays { animation: none !important; } }

/* Vitrine : défilement plus fluide sur téléphone (pas de flou ni de fond animé sur chaque carte) */
@media (max-width: 760px) {
  .frame-vitre { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.16); }
  .frame-holo { animation: none; background-size: 100% 100%; }
}

/* Match (à venir) */
/* Compte dans les Paramètres */
.acc-box { margin-bottom: 4px; }
#p-account h2 { margin-top: 0; }

/* Capture : les boutons Caméra / Prendre la photo restent toujours visibles en bas de l'écran */
.scan-dock { flex-wrap: wrap; gap: 8px; }
.scan-dock #sc-shot, .scan-dock #b-shot { order: -1; flex: 1 1 100%; justify-content: center; padding: 13px 18px; font-size: 1rem; }
@media (max-width: 760px) {
  .scan-dock .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===================== AMIS ===================== */
.acc-chip { position: relative; }
.acc-dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff4fa3; color: #fff; font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #0c0e19; }
.fr-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px; background: #ff4fa3; color: #fff; font-size: .72rem; font-weight: 800; vertical-align: 2px; }
.v-friends .fr-count { margin-left: 6px; }
.fr-av { display: inline-flex; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a2f7a, #171a33) center / cover no-repeat; background-size: 115%; border: 2px solid rgba(255,255,255,.14); font-weight: 800; color: #fff; }
.fr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.fr-cols h2, .fr-incoming h2 { margin-top: 0; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.fr-row + .fr-row { border-top: 1px solid var(--line); }
.fr-row.panel { padding: 10px 14px; margin-bottom: 8px; }
.fr-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.fr-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface, #161a2e); text-align: center; }
.fr-open { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text); text-decoration: none; }
.fr-open b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-link { display: flex; gap: 8px; }
.fr-link input { flex: 1; min-width: 0; font-size: .8rem; }
.fr-invite { display: flex; gap: 14px; align-items: flex-start; border-color: #ff4fa3; background: linear-gradient(135deg, rgba(255,79,163,.12), rgba(124,92,255,.1)); }
.fr-inv-ico, .fr-home-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #ff4fa3, #7c5cff); }
.fr-home-ico { width: 34px; height: 34px; border-radius: 10px; }
@media (max-width: 760px) {
  .fr-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fr-row .btn.sm { padding: 6px 10px; }
}

.fr-card .linkbtn { font-size: .76rem; }

/* ===================== MATCH (combats) ===================== */
.bt-team-panel { margin-top: 10px; }
.bt-levels { display: grid; gap: 10px; }
.bt-level { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); border-left: 4px solid var(--lc); background: var(--surface, #161a2e); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bt-level:hover:not(.locked) { border-color: var(--lc); }
.bt-level.locked { opacity: .5; cursor: default; }
.bt-ln { flex: none; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: #0c0e19; background: var(--lc); }
.bt-ld { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bt-done { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--ok); }
.bt-lock { flex: none; color: var(--muted); }
.bt-rules { margin-top: 18px; }
.bt-rules summary { cursor: pointer; }
.bt-rules ul { margin: 10px 0 0; padding-left: 18px; line-height: 1.6; }
/* choix de l'équipe */
.bt-pick input[type=search] { width: 100%; }
.bt-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 55vh; overflow: auto; margin-top: 10px; }
.bt-pk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px; border-radius: 10px; border: 2px solid transparent; background: var(--surface, #161a2e); color: var(--text); font: inherit; cursor: pointer; }
.bt-pk img { width: 100%; aspect-ratio: 63/88; object-fit: cover; border-radius: 6px; }
.bt-pk span { font-size: .7rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-pk.on { border-color: #ff4fa3; }
.bt-pk .n { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #ff4fa3; color: #fff; font-size: .75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 1; }

/* écran de combat */
.bt-ov { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; overflow: hidden; overflow: clip;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,79,163,.18), transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(52,213,255,.16), transparent 55%), #0b0d1c; }
.bt-ov::before, .bt-ov::after { content: ''; position: fixed; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(60px); opacity: .22; pointer-events: none; z-index: 0; }
.bt-ov::before { left: -20vmax; top: -25vmax; background: #7c5cff; }
.bt-ov::after { right: -20vmax; bottom: -25vmax; background: #ff4fa3; }
.bt-ov > * { position: relative; z-index: 1; }
.bt-ov > .bt-fx { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.bt-ov > .bt-banner { position: absolute; z-index: 10; }
.bt-ov > .bt-end { position: fixed; z-index: 20; }
.bt-load { margin: auto; }
.bt-top { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 6px; }
.bt-lvl { font-weight: 800; font-size: .85rem; color: var(--lc); }
.bt-arena { flex: 1; min-height: 0; width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 4px 14px; gap: 12px; }
.bt-side { display: flex; flex-direction: column; gap: 8px; }
.bt-bench { display: flex; justify-content: center; gap: 8px; }
.bt-mini { position: relative; width: 44px; padding: 0; border: 2px solid transparent; border-radius: 7px; background: none; cursor: default; transition: transform .2s; }
.bt-mini img { width: 100%; aspect-ratio: 63/88; object-fit: cover; border-radius: 5px; display: block; }
.bt-mini.on { border-color: rgba(255,255,255,.65); transform: scale(1.06); }
.bt-mini.ko img { filter: grayscale(1) brightness(.4); }
.bt-mhp { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.6); overflow: hidden; }
.bt-mhp span { display: block; height: 100%; background: #3ddc97; transition: width .5s; }
.bt-ov.pick-bench .bt-bench[data-side="P"] .bt-mini:not(.on):not(.ko) { cursor: pointer; border-color: #ff4fa3; box-shadow: 0 0 14px rgba(255,79,163,.7); animation: btPulse 1s ease-in-out infinite; }
@keyframes btPulse { 50% { transform: translateY(-4px); } }

.bt-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; }
.bt-side.foe .bt-card { flex-direction: row-reverse; text-align: right; }
.bt-img { position: relative; flex: none; width: 130px; width: min(38vw, calc((100vh - 450px) / 2 * .716), 150px); width: min(38vw, calc((100dvh - 450px) / 2 * .716), 150px); min-width: 78px; }
.bt-plat { position: absolute; left: -22%; right: -22%; bottom: -12%; height: 26%; border-radius: 50%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--tc, #fff) 55%, transparent), transparent 70%); opacity: .8; }
.bt-fig { position: relative; border-radius: 9px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); animation: btIdle 3.4s ease-in-out infinite; will-change: transform; }
.bt-side.foe .bt-fig { animation-delay: -1.7s; }
.bt-fig img { width: 100%; aspect-ratio: 63/88; object-fit: cover; display: block; }
.bt-fig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 48%, transparent 60%); background-size: 250% 100%; background-position: 150% 0; animation: btSheen 5s ease-in-out infinite; pointer-events: none; }
@keyframes btIdle { 50% { transform: translateY(-6px); } }
@keyframes btSheen { 0%, 70% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
.bt-card.ko .bt-fig { animation: none; transform: translateY(26px) rotate(-12deg) scale(.88); opacity: .55; }
.bt-card.ko .bt-fig img { filter: grayscale(1) brightness(.45); }
.bt-card.ko .bt-fig::after, .bt-card.ko .bt-plat { display: none; }
.bt-card.aura .bt-fig { box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 0 2px var(--tc), 0 0 34px var(--tc); transition: box-shadow .25s; }
.bt-card.aura .bt-plat { animation: btPlat .7s ease-out; }
@keyframes btPlat { 40% { opacity: 1; transform: scale(1.3); } }

.bt-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 14px; background: rgba(15,18,38,.7); border: 1px solid var(--line); }
.bt-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bt-side.foe .bt-name { justify-content: flex-end; }
.bt-name b { font-size: 1rem; }
.bt-type { font-size: .66rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; color: #0c0e19; background: var(--tc); }
.bt-loan { font-size: .62rem; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--muted); }
.bt-hp { position: relative; height: 10px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; }
.bt-hp span, .bt-hp i { position: absolute; top: 0; bottom: 0; left: 0; display: block; border-radius: 5px; }
.bt-side.foe .bt-hp span, .bt-side.foe .bt-hp i { left: auto; right: 0; }
.bt-hp i { background: rgba(255,255,255,.75); transition: width .5s ease .45s; }
.bt-hp span { background: linear-gradient(90deg, #3ddc97, #7ef0b8); transition: width .55s ease; }
.bt-hp span.mid { background: linear-gradient(90deg, #ffc83d, #ffe08a); }
.bt-hp span.low { background: linear-gradient(90deg, #ff5f6d, #ff9a8a); }
.bt-stats { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--muted); }
.bt-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.bt-side.foe .bt-stats { flex-direction: row-reverse; }
.bt-pips { display: inline-flex; gap: 3px; align-items: center; }
.bt-pips i { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6b0, #ffc83d 60%, #d99a00); box-shadow: 0 0 6px rgba(255,200,61,.6); }
.bt-pips i.new { animation: btPop .4s ease-out; }
.bt-pips b { font-size: .7rem; color: #ffc83d; }
@keyframes btPop { 0% { transform: scale(0); } 70% { transform: scale(1.6); } 100% { transform: scale(1); } }

.bt-float { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-family: Fredoka, Inter, sans-serif; font-size: 2rem; font-weight: 800; color: #fff; text-shadow: 0 3px 0 #b3002e, 0 0 16px rgba(255,60,90,.8); pointer-events: none; animation: btFloat 1.3s ease-out forwards; z-index: 3; white-space: nowrap; }
.bt-float.big { font-size: 2.5rem; }
.bt-float.weak { color: #ffe27a; font-size: 2.7rem; text-shadow: 0 3px 0 #9a5b00, 0 0 20px rgba(255,200,61,.95); }
.bt-float.miss { color: #cfd5ea; text-shadow: 0 2px 0 #333a5c; font-size: 1.4rem; }
@keyframes btFloat { 0% { opacity: 0; transform: translate(-50%, 16px) scale(.4); } 18% { opacity: 1; transform: translate(-50%, -8px) scale(1.25); } 30% { transform: translate(-50%, -4px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } }

/* particules et effets */
.bt-p { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c), 0 0 18px var(--c); pointer-events: none; will-change: transform, opacity; }
.bt-p.orb { background: radial-gradient(circle at 40% 40%, #fff 0 22%, var(--c) 60%); box-shadow: 0 0 14px var(--c), 0 0 30px var(--c); }
.bt-p.t-grass { border-radius: 0 100% 0 100%; }
.bt-p.t-water { border-radius: 50% 0 50% 50%; }
.bt-p.t-fire { background: radial-gradient(circle at 50% 60%, #fff3b0 0 20%, #ffb13d 45%, #ff4d1f 75%); }
.bt-p.t-psychic.orb { background: transparent; border: 3px solid var(--c); }
.bt-p.t-metal { border-radius: 3px; background: linear-gradient(135deg, #fff, var(--c) 60%, #6b7385); }
.bt-p.t-darkness { background: radial-gradient(circle, #1a1030 0 35%, var(--c) 70%); }
.bt-p.t-fairy, .bt-p.t-dragon, .bt-p.t-colorless, .bt-p.t-fighting { clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); border-radius: 0; }
.bt-p.t-ko { background: rgba(160,168,190,.55); box-shadow: none; filter: blur(2px); }
.bt-p.spark { box-shadow: 0 0 6px var(--c); }
.bt-p.confetti { border-radius: 2px; box-shadow: none; height: 6px !important; }
.bt-ring { position: absolute; left: 0; top: 0; border-radius: 50%; border: 4px solid var(--c); box-shadow: 0 0 20px var(--c), inset 0 0 20px var(--c); pointer-events: none; }
.bt-flash { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.bt-bolt { position: absolute; left: 0; top: 0; pointer-events: none; filter: drop-shadow(0 0 8px #ffe27a) drop-shadow(0 0 18px #ffd23f); }

.bt-log { min-height: 42px; text-align: center; font-size: .86rem; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); }
.bt-log.new { animation: btLog .35s ease-out; }
@keyframes btLog { from { opacity: .3; transform: scale(.97); } }
.bt-eff { color: #ffe27a; font-weight: 800; }
.bt-coins { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.bt-actions { width: 100%; max-width: 560px; margin: 0 auto; padding: 8px 14px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 150px; }
.bt-actions.in > * { animation: btUp .3s ease-out both; }
.bt-actions.in > * + * { animation-delay: .06s; }
@keyframes btUp { from { opacity: 0; transform: translateY(14px); } }
.bt-atks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.bt-atk { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--tc, #ff4fa3) 70%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--tc, #ff4fa3) 28%, transparent), rgba(124,92,255,.2)); color: var(--text); font: inherit; cursor: pointer; text-align: left; transition: transform .15s, box-shadow .15s; }
.bt-atk:not(.off):active { transform: scale(.97); }
@media (hover: hover) { .bt-atk:not(.off):hover { transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, var(--tc, #ff4fa3) 45%, transparent); } }
.bt-atk b { flex: 1; min-width: 0; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-atk.off { opacity: .45; cursor: default; border-color: var(--line); background: rgba(255,255,255,.04); }
.bt-cost { display: inline-flex; gap: 2px; flex: none; }
.bt-cost i { width: 9px; height: 9px; border-radius: 50%; background: #ffc83d; }
.bt-cost small { font-size: .7rem; color: var(--muted); }
.bt-dmg { flex: none; font-weight: 900; font-size: 1rem; }
.bt-dmg em { font-style: normal; font-size: .7rem; color: #ffe27a; }
.bt-more { display: flex; gap: 8px; }
.bt-more .btn { flex: 1; justify-content: center; }
.bt-banner { left: 50%; top: 45%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; font-family: Fredoka, Inter, sans-serif; font-size: 1.8rem; font-weight: 700; padding: 10px 26px; border-radius: 999px; white-space: nowrap; }
.bt-banner.show { animation: btBanner .68s ease-out forwards; }
.bt-banner.me { background: linear-gradient(135deg, #ff4fa3, #7c5cff); color: #fff; box-shadow: 0 10px 30px rgba(255,79,163,.5); }
.bt-banner.foe { background: #1d2140; color: var(--text); border: 1px solid var(--line); font-size: 1.3rem; }
.bt-banner.eff { background: linear-gradient(135deg, #ffd23f, #ff8a3d); color: #2a1600; box-shadow: 0 10px 34px rgba(255,200,61,.6); top: 50%; }
@keyframes btBanner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-4deg); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(1deg); } 40% { transform: translate(-50%, -50%) scale(1) rotate(0); } 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -65%) scale(.95); } }
.bt-end { inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8,9,20,.78); animation: capUp .4s both; }
.bt-end-box { text-align: center; max-width: 380px; padding: 26px 22px; border-radius: 22px; background: #161a33; border: 1px solid var(--line); animation: btEndBox .5s cubic-bezier(.2,.8,.3,1.25) both; }
@keyframes btEndBox { from { transform: scale(.7); opacity: 0; } }
.bt-end-t { font-family: Fredoka, Inter, sans-serif; font-size: 2.4rem; font-weight: 700; }
.bt-end.win .bt-end-t { background: linear-gradient(90deg, #ffd23f, #ff4fa3, #7c5cff, #34d5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bt-end.win .bt-end-box { border-color: #ffc83d; box-shadow: 0 0 40px rgba(255,200,61,.35); }
.bt-end.lose .bt-end-t { color: var(--muted); }

/* PC : le combat prend tout l'écran */
@media (min-width: 761px) {
  .bt-ov::before { animation: btBlob1 18s ease-in-out infinite alternate; }
  .bt-ov::after { animation: btBlob2 22s ease-in-out infinite alternate; }
  .bt-top { padding: 14px 28px 4px; }
  .bt-lvl { font-size: 1rem; }
  .bt-arena { max-width: 1280px; display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); padding: 4px 36px; gap: 6px; }
  .bt-side { flex-direction: row-reverse; align-items: center; gap: 22px; }
  .bt-side.foe { justify-content: flex-start; }
  .bt-side.me { justify-content: flex-end; }
  .bt-bench { flex-direction: column; gap: 10px; }
  .bt-mini { width: clamp(40px, calc((100vh - 300px) / 2 / 3.9 * .716), 62px); }
  .bt-img { width: clamp(120px, calc((100vh - 300px) / 2 * .716), 300px); }
  .bt-card { gap: 26px; padding: 6px 10px; }
  .bt-plat { bottom: -10%; }
  .bt-info { flex: none; width: clamp(240px, 26vw, 340px); padding: 14px 18px; gap: 10px; border-radius: 18px; box-shadow: 0 12px 34px rgba(0,0,0,.35); }
  .bt-name b { font-size: 1.4rem; }
  .bt-type { font-size: .75rem; padding: 2px 9px; }
  .bt-hp { height: 14px; border-radius: 7px; }
  .bt-stats { font-size: .95rem; }
  .bt-pips i { width: 14px; height: 14px; }
  .bt-log { font-size: 1.02rem; width: 100%; max-width: 760px; justify-self: center; }
  .bt-actions { max-width: 920px; padding-bottom: 18px; min-height: 124px; }
  .bt-atks { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
  .bt-atk { padding: 14px 18px; border-radius: 16px; }
  .bt-atk b { font-size: 1.02rem; }
  .bt-dmg { font-size: 1.2rem; }
  .bt-banner { font-size: 2.8rem; padding: 14px 40px; }
  .bt-banner.foe { font-size: 1.9rem; }
  .bt-float { font-size: 3rem; } .bt-float.big { font-size: 3.6rem; } .bt-float.weak { font-size: 4rem; } .bt-float.miss { font-size: 1.9rem; }
  .bt-end-box { max-width: 460px; padding: 34px 30px; }
  .bt-end-t { font-size: 3.2rem; }
}
@keyframes btBlob1 { to { transform: translate(30vw, 20vh); } }
@keyframes btBlob2 { to { transform: translate(-30vw, -15vh); } }
@media (max-width: 760px) {
  .bt-card { gap: 10px; padding: 6px; }
  .bt-name b { font-size: .9rem; }
  .bt-atks { grid-template-columns: 1fr; }
  .bt-atk { padding: 9px 12px; }
  .bt-banner { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .bt-fig, .bt-fig::after, .bt-ov::before, .bt-ov::after { animation: none !important; } }
.bt-team-panel + h2 { margin-top: 22px; }

/* Mes équipes */
.bt-teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.bt-tm { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface, #161a2e); transition: border-color .2s, box-shadow .2s; }
.bt-tm.on { border-color: #ff4fa3; box-shadow: 0 0 0 1px #ff4fa3, 0 8px 26px rgba(255,79,163,.2); }
.bt-tm-h { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.bt-tm-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-tm-on { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #ff4fa3; color: #fff; }
.bt-tm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.bt-tm-cards img, .bt-tm-empty { width: 100%; aspect-ratio: 63/88; border-radius: 7px; }
.bt-tm-cards img { object-fit: cover; display: block; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.bt-tm-empty { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line); color: var(--muted); font-size: 1.4rem; }
.bt-tm-f { display: flex; gap: 6px; flex-wrap: wrap; }
.bt-tm-f .btn { flex: 1; justify-content: center; }
.bt-choose { display: grid; gap: 10px; margin-top: 10px; }
.bt-ch { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface, #161a2e); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bt-ch.on { border-color: #ff4fa3; }
.bt-ch small { grid-column: 1; font-size: .72rem; }
.bt-ch-cards { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 4px; }
.bt-ch-cards img, .bt-ch-cards i { width: 38px; aspect-ratio: 63/88; border-radius: 4px; object-fit: cover; }
.bt-ch-cards i { border: 1px dashed var(--line); }
#bt-name { width: 100%; }
@media (max-width: 760px) {
  .bt-teams { grid-template-columns: 1fr; gap: 10px; }
  .bt-tm { display: grid; grid-template-columns: minmax(0, 1fr) 138px; gap: 8px 12px; padding: 10px; }
  .bt-tm-h { grid-column: 1; flex-wrap: wrap; gap: 4px 8px; }
  .bt-tm-h b { flex: 1 1 100%; }
  .bt-tm-cards { grid-column: 2; grid-row: 1 / span 2; }
  .bt-tm-f { grid-column: 1; align-self: end; flex-direction: column; }
}

/* Classeur : grille placée toute seule */
.b-auto { margin-bottom: 8px; padding: 8px 12px; border-radius: 12px; font-size: .85rem; background: rgba(61,220,151,.1); border: 1px solid rgba(61,220,151,.35); }
.b-auto .linkbtn { font-weight: 700; }
.b-auto svg { display: inline-block; vertical-align: -2px; }

/* ===== Classeur : cases trouvées une par une (photo en biais) ===== */
.cells-ov { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.cells-ov polygon { fill: none; stroke: var(--accent2); stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(0,0,0,.8)); }
.cells-ov text { fill: var(--accent2); font-size: 13px; font-weight: 900; paint-order: stroke; stroke: #000; stroke-width: 3px; }

/* ===== Rafale ===== */
.r-live { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3; max-width: calc(100% - 20px); padding: 6px 12px; border-radius: 999px; background: rgba(10,11,22,.78); color: #fff; font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; display: flex; align-items: center; gap: 6px; }
.r-live.go { background: rgba(124,92,255,.9); }
.r-live.ok { background: rgba(26,150,98,.92); }
/* v3.38 : conseils de prise de vue (seulement si un vrai problème dure) — rafale (.r-live.warn), carte seule (.shot-tip), après la photo (.shot-warn) */
.r-live.warn, .shot-tip { background: rgba(196,120,0,.94); color: #fff; white-space: normal; text-align: center; border-radius: 14px; }
.shot-tip { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 5; width: max-content; max-width: calc(100% - 24px); padding: 6px 12px; font-size: .82rem; font-weight: 700; line-height: 1.3; pointer-events: none; }
.shot-warn { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,170,40,.14); border: 1px solid rgba(255,170,40,.55); font-size: .9rem; }
.shot-warn > span { flex: 1 1 200px; }
.scan-view.r-flash::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: .75; animation: r-flash .26s ease-out forwards; pointer-events: none; z-index: 4; }
@keyframes r-flash { to { opacity: 0; } }
.r-cert { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; line-height: 1.35; }
.r-cert input { margin-top: 2px; }

/* ===== Capsules : boutique (points, achats, ventes) ===== */
.cap-actions { gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gold-btn { background: linear-gradient(135deg, #ffe27a, #ffb52e 55%, #ff8a1f); color: #2a1600; border-color: transparent; font-weight: 800; box-shadow: 0 6px 18px rgba(255,170,40,.28); }
.gold-btn:hover { filter: brightness(1.06); color: #2a1600; }
.gold-btn .gb-n { font-size: .8em; opacity: .8; }
.cap-shop { margin-top: 16px; }
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.shop-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.coins-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(255,210,63,.18), rgba(255,138,31,.12)); border: 1px solid rgba(255,200,61,.45); color: #ffd76a; font-size: .95rem; }
.coins-pill b { font-size: 1.15rem; color: #fff3c4; }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shop-item { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: 1fr auto; gap: 6px 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--surface2, #1b1f3a); border: 1px solid var(--line); }
/* bordure seulement quand on a de quoi l'acheter */
.shop-item.can { border-color: rgba(124,92,255,.65); box-shadow: 0 0 0 1px rgba(124,92,255,.25), 0 6px 18px rgba(124,92,255,.18); }
.shop-item.gold.can { border-color: rgba(255,200,61,.7); box-shadow: 0 0 0 1px rgba(255,200,61,.25), 0 6px 18px rgba(255,200,61,.16); background: linear-gradient(160deg, rgba(255,200,61,.10), transparent 60%), var(--surface2, #1b1f3a); }
.shop-item .shop-art { grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; }
.shop-item .coin-art { color: #ffc83d; }
.shop-item .shop-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-item .shop-txt span { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.shop-item .btn { justify-self: start; }
.sp-sell { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .shop-grid { grid-template-columns: 1fr; }
  .cap-actions .btn.big { flex: 1 1 100%; justify-content: center; }
}

/* Match : filtres du choix des Pokémon */
.bt-sel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 10px; }
.bt-sel-s { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; border-radius: 10px; border: 1px solid #ff4fa3; background: rgba(255,79,163,.12); color: var(--text); font: inherit; font-size: .74rem; cursor: pointer; text-align: left; }
.bt-sel-s img { width: 24px; aspect-ratio: 63/88; object-fit: cover; border-radius: 3px; flex: none; }
.bt-sel-s span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.bt-sel-s b { flex: none; color: var(--muted); font-size: 1rem; line-height: 1; }
.bt-sel-s.empty { border-style: dashed; border-color: var(--line); background: none; color: var(--muted); cursor: default; min-height: 42px; }
.bt-sel-s.empty i { font-style: normal; font-weight: 800; width: 20px; text-align: center; }
.bt-sel-s.empty span { font-weight: 400; }
.bt-filters { display: flex; flex-direction: column; gap: 8px; }
.bt-ftypes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.bt-tchip { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface, #161a2e); color: var(--text); font: inherit; font-size: .76rem; cursor: pointer; }
.bt-tchip i { width: 9px; height: 9px; border-radius: 50%; background: var(--tc); }
.bt-tchip.on { border-color: var(--tc, #ff4fa3); background: color-mix(in srgb, var(--tc, #ff4fa3) 28%, transparent); font-weight: 700; }
.bt-frow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bt-frow label { display: flex; flex-direction: column; gap: 3px; font-size: .7rem; color: var(--muted); min-width: 0; }
.bt-frow select { width: 100%; min-width: 0; font-size: .82rem; }
.bt-fstate { min-height: 1em; }
.bt-pk-n { font-size: .7rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-pk-s { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: .66rem; color: var(--muted); white-space: nowrap; }
.bt-pk-s b { color: var(--text); font-weight: 700; }
.bt-pk-s em { font-style: normal; color: #ffc83d; font-weight: 700; }
.bt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); flex: none; }
@media (max-width: 760px) {
  .bt-pick-grid { max-height: 44vh; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .bt-frow { grid-template-columns: 1fr 1fr; }
  .bt-frow label:first-child { grid-column: 1 / -1; }
}
.bt-tchip small { color: var(--muted); font-size: .68rem; }
.bt-tchip.none { opacity: .38; cursor: default; }
@media (min-width: 761px) { .bt-ftypes { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 760px) { .bt-ftypes { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 30px; } }

/* Match : modes, barre d'équipe (téléphone), sac */
.bt-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; max-width: 620px; }
.bt-modes button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface, #161a2e); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bt-modes button small { font-size: .72rem; color: var(--muted); }
.bt-modes button.on { border-color: #ff4fa3; background: linear-gradient(135deg, rgba(255,79,163,.18), rgba(124,92,255,.18)); box-shadow: 0 0 0 1px #ff4fa3; }
.bt-tm-pick { padding: 3px 10px; }
.bt-tm-bag { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.bt-tm-bagimgs { display: flex; gap: 3px; }
.bt-tm-bagimgs img { width: 20px; aspect-ratio: 63/88; object-fit: cover; border-radius: 3px; }
.bt-qty { position: absolute; top: 4px; right: 4px; font-size: .64rem; font-weight: 800; padding: 1px 5px; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; }
.bt-sel.bag { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .bt-modes button { padding: 8px 10px; }
  .bt-modes button small { font-size: .66rem; }
  .bt-team-panel { display: none; }
  .bt-pick .bt-teams { grid-template-columns: 1fr; }
  .bt-pick .bt-tm { display: flex; flex-direction: column; gap: 8px; }
  .bt-pick .bt-tm-h b { flex: 1 1 auto; }
  .bt-pick .bt-tm-cards { grid-template-columns: repeat(3, 58px); }
  .bt-pick .bt-tm-f { flex-direction: row; }
  .bt-sel.bag { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* combat : sac, cartes jouées, états */
.bt-bag { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.bt-played { position: absolute; left: 50%; top: 45%; z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(78vw, 300px); pointer-events: none; transform: translate(-50%, -50%); }
.bt-played img { width: min(46vw, 210px); aspect-ratio: 63/88; object-fit: cover; border-radius: 12px; box-shadow: 0 16px 50px rgba(0,0,0,.6), 0 0 40px rgba(95,180,255,.45); }
.bt-played div { text-align: center; padding: 8px 14px; border-radius: 14px; background: rgba(12,14,30,.9); border: 1px solid rgba(95,180,255,.5); }
.bt-played b { display: block; font-size: 1rem; }
.bt-played small { display: block; font-size: .78rem; color: #cfe6ff; margin-top: 2px; }
.bt-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.bt-tags:empty { display: none; }
.bt-side.foe .bt-tags { justify-content: flex-end; }
.bt-tag { font-size: .66rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.08); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.bt-tag.sh { background: rgba(95,180,255,.2); color: #bfe0ff; }
.bt-tag.pw { background: rgba(255,95,109,.2); color: #ffc2c7; }
.bt-tag.st { background: rgba(255,200,61,.18); color: #ffe6a6; }
.bt-float.heal { color: #9ff5c9; text-shadow: 0 3px 0 #0b7a4a, 0 0 16px rgba(61,220,151,.8); }
.bt-foebag { white-space: nowrap; }
.bt-ov.adv .bt-img { width: min(34vw, calc((100vh - 520px) / 2 * .716), 140px); width: min(34vw, calc((100dvh - 520px) / 2 * .716), 140px); }
.bt-ov.adv .bt-actions { min-height: 196px; }
@media (min-width: 761px) {
  .bt-ov.adv .bt-img { width: clamp(110px, calc((100vh - 370px) / 2 * .716), 280px); }
  .bt-ov.adv .bt-actions { min-height: 190px; }
  .bt-ov.adv .bt-actions { max-width: 1100px; }
  .bt-bag { flex-wrap: wrap; justify-content: center; overflow: visible; }
}
@media (max-width: 760px) { .bt-foebag { display: none; } }

/* Combat : en-tête, modes Basique / Avancé, équipe sur téléphone (onglets) */
.bt-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bt-head h1 { margin: 0; }
.bt-modes { display: inline-flex; gap: 4px; padding: 4px; margin: 14px 0 0; border-radius: 999px; border: 1px solid var(--line); background: var(--surface, #161a2e); max-width: none; }
.bt-modes button { display: block; padding: 7px 22px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.bt-modes button.on { color: #fff; background: linear-gradient(135deg, #ff4fa3, #7c5cff); box-shadow: none; }
.bt-hint { margin: 8px 0 14px; }
.bt-mteam { display: none; }
@media (max-width: 760px) {
  .bt-modes { display: flex; }
  .bt-modes button { flex: 1; padding: 8px 10px; }
  .bt-mteam { display: block; margin-bottom: 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface, #161a2e); overflow: hidden; }
  .bt-mtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .bt-mtabs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 6px 8px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bt-mtabs button small { font-size: .66rem; font-weight: 600; opacity: .8; }
  .bt-mtabs button.on { color: var(--text); background: rgba(255,79,163,.1); }
  .bt-mtabs button.on::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #ff4fa3, #7c5cff); }
  .bt-mbody { display: flex; align-items: center; gap: 12px; padding: 12px; }
  .bt-mcards { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 210px; }
  .bt-mcards img, .bt-mcards .bt-tm-empty { width: 100%; aspect-ratio: 63/88; border-radius: 7px; }
  .bt-mcards img { object-fit: cover; display: block; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
  .bt-mact { flex: none; display: flex; flex-direction: column; gap: 6px; width: 112px; }
  .bt-mact .btn { justify-content: center; }
  .bt-mbag { display: flex; align-items: center; gap: 6px; padding: 0 12px 12px; }
  .bt-mbag img { width: 22px; }
}

/* ===== Animation d'attente de la page de classeur (v2.31) =====
   Seulement la carte en cours (batterie) : rayon de scan pendant la lecture du texte (cyan),
   rayon + « points clés » pendant la vérification par l'image (violet), petit éclat quand la carte est trouvée. */
.btile .bphoto { position: relative; display: block; overflow: hidden; border-radius: 6px; min-width: 0; }
.btile .bphoto img { display: block; }
.btile.bwait .bphoto img { filter: grayscale(.6) brightness(.75); }
.bphoto .bscan { position: absolute; left: -10%; right: -10%; top: 0; height: 22%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(52,213,255,.18) 60%, rgba(52,213,255,.95) 96%, transparent);
  box-shadow: 0 2px 10px rgba(52,213,255,.55); animation: bscan 1.5s ease-in-out infinite alternate; }
.bphoto.scan-txt::after, .bphoto.scan-img::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(52,213,255,.7), inset 0 0 18px rgba(52,213,255,.35); }
.bphoto.scan-img .bscan { background: linear-gradient(180deg, transparent, rgba(124,92,255,.2) 60%, rgba(160,130,255,.95) 96%, transparent); box-shadow: 0 2px 10px rgba(124,92,255,.6); animation-duration: 1.1s; }
.bphoto.scan-img::after { box-shadow: inset 0 0 0 2px rgba(124,92,255,.8), inset 0 0 18px rgba(124,92,255,.4); }
@keyframes bscan { from { transform: translateY(-30%); } to { transform: translateY(380%); } }
/* v3.25 : attente du cadrage d'une page de classeur — voile, rayon qui balaie la photo, étiquette au centre */
.b-finding { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; border-radius: 6px; background: rgba(10, 12, 32, .38); }
.b-finding .bf-line { position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background: linear-gradient(180deg, transparent 78%, rgba(52,213,255,.16) 92%, rgba(52,213,255,.9) 99.4%, #bff6ff 100%);
  animation: bfScan 1.7s ease-in-out infinite alternate; will-change: transform; }
@keyframes bfScan { from { transform: translateY(-100%); } to { transform: translateY(2%); } }
.b-finding .bf-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; max-width: 86%;
  padding: 10px 16px; border-radius: 999px; background: rgba(12, 14, 34, .86); border: 1px solid rgba(52,213,255,.5); box-shadow: 0 8px 30px rgba(0,0,0,.45), 0 0 18px rgba(52,213,255,.25); }
.b-finding .bf-txt { font-size: .92rem; color: #e8f9ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-finding .bf-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(52,213,255,.25); border-top-color: #5fe3ef; animation: bfSpin .8s linear infinite; will-change: transform; }
@keyframes bfSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .b-finding .bf-line { animation: none; opacity: .5; transform: translateY(-40%); } .b-finding .bf-spin { animation-duration: 2.4s; } }
/* points clés : petits points qui s'allument l'un après l'autre sur la photo */
.bphoto .bdot { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #ffd23f; pointer-events: none;
  box-shadow: 0 0 6px 2px rgba(255,210,63,.8); opacity: 0; animation: bdot 1.4s ease-in-out infinite; }
.bphoto .bdot:nth-of-type(2) { left: 22%; top: 18%; animation-delay: 0s; }
.bphoto .bdot:nth-of-type(3) { left: 71%; top: 26%; animation-delay: .2s; }
.bphoto .bdot:nth-of-type(4) { left: 40%; top: 41%; animation-delay: .4s; }
.bphoto .bdot:nth-of-type(5) { left: 80%; top: 55%; animation-delay: .6s; }
.bphoto .bdot:nth-of-type(6) { left: 18%; top: 63%; animation-delay: .8s; }
.bphoto .bdot:nth-of-type(7) { left: 57%; top: 76%; animation-delay: 1s; }
.bphoto .bdot:nth-of-type(8) { left: 33%; top: 88%; animation-delay: 1.2s; }
@keyframes bdot { 0%, 100% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 60% { opacity: .15; transform: scale(.7); } }
/* carte trouvée : éclat sur la photo, le visuel officiel apparaît */
.btile.bfound .bphoto::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 6px;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); background-size: 250% 100%;
  animation: bshine .7s ease-out both; }
.btile.bfound .bofficial { animation: bpop .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes bshine { from { background-position: 120% 0; opacity: 1; } to { background-position: -30% 0; opacity: 0; } }
@keyframes bpop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
/* barre de progression de la page (reste visible en faisant défiler) */
.bprog { position: sticky; top: 58px; z-index: 22; margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; background: rgba(20,23,42,.95); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.bprog-lbl { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; margin-bottom: 6px; }
.bprog-lbl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bprog-bar { height: 6px; border-radius: 3px; background: var(--bg2); overflow: hidden; }
.bprog-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #34d5ff, #7c5cff); transition: width .4s ease; position: relative; overflow: hidden; }
.bprog-bar.img i { background: linear-gradient(90deg, #7c5cff, #ff4fa3); }
.bprog-bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: bprog 1.3s linear infinite; }
@keyframes bprog { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .bphoto .bscan, .bphoto .bdot, .btile.bfound .bphoto::before, .btile.bfound .bofficial, .bprog-bar i::after { animation: none; }
  .bphoto .bscan { display: none; }
  .bphoto .bdot { opacity: .8; }
}

/* ===== Écran plein écran de la page de classeur (v2.32) : analyse, cartes à vérifier, récapitulatif ===== */
html.sv-lock, html.sv-lock body { overflow: hidden; }
.sv { position: fixed; inset: 0; z-index: 300; background: #080a12; overflow-y: auto; overscroll-behavior: contain; }
.sv.hidden { display: none; }
.sv-in { max-width: 520px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; min-height: 100%; box-sizing: border-box; }
.sv-top { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.sv-top .bprog-lbl { margin: 0; }
.sv-top .bprog-bar { margin-top: 7px; }
.sv .warn { color: #ffb84d; } .sv .ok { color: var(--ok); }
.sv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, min(44vw, 34vh))); justify-content: center; gap: 10px; }
.sv .bphoto { position: relative; display: block; overflow: hidden; border-radius: 10px; }
.sv-pair img, .sv-pair .sv-off { width: 100%; aspect-ratio: 63/88; object-fit: cover; border-radius: 10px; display: block; background: var(--bg2); }
.sv-off.sv-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--line); background: transparent; color: var(--muted); font-size: .85rem; box-sizing: border-box; }
.sv-off.sv-wait b { font-size: 2.4rem; }
.sv-why { text-align: center; color: var(--muted); font-size: .88rem; line-height: 1.35; overflow-wrap: anywhere; }
.sv-name { text-align: center; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.sv-alts { display: grid; gap: 6px; }
.sv-alts > div { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.sv-alt { flex: none; width: 76px; display: grid; gap: 4px; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px; color: var(--text); font: inherit; font-size: .7rem; cursor: pointer; text-align: center; }
.sv-alt img { width: 100%; aspect-ratio: 63/88; object-fit: cover; border-radius: 5px; }
.sv-alt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-acts { display: grid; gap: 8px; }
.sv-acts .btn { width: 100%; justify-content: center; padding: 12px; font-size: 1rem; }
.sv-nav { display: flex; justify-content: space-between; }
.sv-hint { text-align: center; }
.sv-final { position: sticky; bottom: 0; margin-top: auto; padding: 10px 0 2px; background: linear-gradient(rgba(8,10,18,0), #080a12 25%); }
/* récapitulatif v3.37 : même en-tête et même page en vignettes que l'analyse, filtres, une ligne par carte */
.sv-rtitle { display: flex; flex-direction: column; gap: 2px; }
.sv-rtitle b { font-family: var(--font-title, inherit); font-size: 1.2rem; }
.bprog-bar.done { height: 7px; }
.bprog-bar.done i { background: var(--ok); }
.bprog-bar.done i::after { display: none; }
button.sv-th { border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.sv-th.off img { filter: grayscale(1) brightness(.4); }
.sv-board .sv-th.off { box-shadow: 0 0 0 1.5px rgba(255,255,255,.12); }
.sv-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.sv-filters::-webkit-scrollbar { display: none; }
.sv-f { flex: none; padding: 7px 12px; border-radius: 999px; border: 0; background: rgba(255,255,255,.07); color: var(--muted); font: inherit; font-size: .8rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
.sv-f b { margin-left: 3px; color: var(--text); }
.sv-f.on { background: var(--c1); color: #0b1020; }
.sv-f.on b { color: #0b1020; }
.sv-final .linkbtn { justify-self: center; padding: 8px; }
.sv-rows { display: flex; flex-direction: column; gap: 6px; }
.sv-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line); }
.sv-row.new, .sv-row.ok { border-left-color: var(--ok); }
.sv-row.dup { border-left-color: #7c5cff; }
.sv-row-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sv-row-open[disabled] { cursor: default; }
.sv-row-img { flex: none; width: 36px; }
.sv-row-img img { display: block; width: 100%; aspect-ratio: 63/88; object-fit: cover; border-radius: 5px; background: var(--bg2); }
.sv-row.off .sv-row-img img { filter: grayscale(1); opacity: .4; }
.sv-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-row-txt > b, .sv-row-txt > .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-row-txt > b { font-size: .88rem; }
.sv-row-txt > .muted { font-size: .74rem; }
.sv-row-side { flex: none; max-width: 44%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sv-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--surface2); color: var(--muted); }
.sv-row.new .sv-tag:first-child, .sv-row.ok .sv-tag:first-child { background: var(--ok); color: #063; }
.sv-row.dup .sv-tag:first-child { background: #7c5cff; color: #fff; }
.sv-row.own .sv-tag:first-child { color: var(--text); }
.sv-tag.warn { background: rgba(255,184,77,.16); color: #ffb84d; }
/* écran d'analyse (v2.33) : fond aux couleurs holo qui bouge doucement, couleur selon l'étape, la carte prend la place */
.sv-in.sv-m-scan { position: relative; height: 100%; min-height: 100dvh; max-width: 1100px; gap: 10px; }
.sv-in.ph-txt { --c1: #34d5ff; --c2: #7c5cff; --c3: #2be4b0; }
.sv-in.ph-img { --c1: #a582ff; --c2: #ff4fa3; --c3: #ffd23f; }
.sv-in.ph-done { --c1: #3ecf8e; --c2: #34d5ff; --c3: #ffd23f; }
.sv-in:not(.sv-m-scan) { position: relative; }
.sv { isolation: isolate; }
.sv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sv-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.sv-steps span { font-size: .78rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); }
.sv-steps span.on { background: var(--c1); color: #0b1020; }
.sv-steps span.past { color: var(--ok); }
.sv-count { font-family: var(--font-title, inherit); white-space: nowrap; }
.sv-count b { font-size: 2rem; line-height: 1; color: var(--text); }
.sv-count span { color: var(--muted); font-weight: 700; margin-left: 3px; }
.sv-m-scan > .bprog-bar { height: 7px; }
.sv-m-scan > .bprog-bar i { background: var(--c1); }
.sv-m-scan > .bprog-bar i::after { display: none; }
.sv-stage { position: relative; flex: 1 1 auto; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.sv-card { position: relative; height: 100%; aspect-ratio: 63/88; border-radius: 14px; overflow: hidden; display: block; box-shadow: 0 0 0 2px var(--c1), 0 14px 34px rgba(0,0,0,.5); }
.sv-card::after { display: none; }
/* la carte en cours, en grand ; la vignette du visuel trouvé se pose dans son coin */
.sv-shot { position: relative; height: min(100%, 110vw); max-height: 100%; aspect-ratio: 63/88; }
.sv-pip { position: absolute; right: -12px; bottom: -12px; width: 36%; aspect-ratio: 63/88; border-radius: 8px; overflow: hidden; z-index: 2; background: var(--bg2);
  box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 8px 20px rgba(0,0,0,.6); animation: svpop .4s cubic-bezier(.2,1.4,.4,1); }
.sv-pip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-pip:not(.hit) img { filter: saturate(.6) brightness(.8); }
.sv-pip.hit { box-shadow: 0 0 0 2px var(--ok), 0 8px 20px rgba(0,0,0,.6); }
.sv-pip b { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; background: var(--ok); color: #063; }
.sv-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-caption { text-align: center; }
.sv-title { font-family: var(--font-title, inherit); font-size: 1.5rem; font-weight: 800; line-height: 1.15; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-sub { color: var(--muted); font-size: .82rem; margin-top: 3px; overflow-wrap: anywhere; }
/* la page en vignettes */
.sv-board { display: flex; justify-content: center; gap: 10px; width: min(100%, calc(26vh * var(--cols) / var(--rows) * 63 / 88 + 10px)); margin: 0 auto; }
.sv-board > div { display: grid; gap: 4px; flex: 1; }
.sv-th { position: relative; aspect-ratio: 63/88; border-radius: 5px; overflow: hidden; background: rgba(255,255,255,.06); box-shadow: 0 0 0 1.5px rgba(255,255,255,.12); }
.sv-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-th.st-attente img, .sv-th.st-lecture img { filter: grayscale(.8) brightness(.55); }
.sv-th.st-sure, .sv-th.st-saved { box-shadow: 0 0 0 2px var(--ok); }
.sv-th.st-verifier { box-shadow: 0 0 0 2px #ffb84d; }
.sv-th.st-inconnue, .sv-th.st-erreur { box-shadow: 0 0 0 2px #ff6b6b; }
.sv-th.st-vide, .sv-th.st-dos, .sv-th.st-autre { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.sv-th b { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; background: var(--ok); color: #063; }
.sv-th.st-verifier b { background: #ffb84d; color: #4a2b00; }
.sv-th.cur { box-shadow: 0 0 0 2px var(--c1), 0 0 16px var(--c1); animation: svcur .9s ease-in-out infinite alternate; }
.sv-th.cur img { filter: none; }
.sv-th.pop { animation: svpop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes svpop { from { transform: scale(.6); } to { transform: none; } } /* (taille seulement : toujours visible, même si l'animation ne se joue pas) */
@keyframes svcur { from { transform: scale(1); } to { transform: scale(1.08); } }
.sv-list { align-self: center; color: var(--muted); }
@media (min-width: 900px) {
  .sv-in.sv-m-scan { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; column-gap: 28px; }
  .sv-m-scan .sv-head, .sv-m-scan > .bprog-bar { grid-column: 1 / -1; }
  .sv-m-scan .sv-stage { grid-column: 1; grid-row: 3 / 6; }
  .sv-m-scan .sv-caption { grid-column: 2; grid-row: 3; align-self: end; text-align: left; }
  .sv-m-scan .sv-title { font-size: 2.1rem; white-space: normal; }
  .sv-m-scan .sv-board { grid-column: 2; grid-row: 4; width: min(100%, calc(40vh * var(--cols) / var(--rows) * 63 / 88)); margin: 8px 0 0; }
  .sv-m-scan .sv-list { grid-column: 2; grid-row: 5; align-self: start; justify-self: start; }
  .sv-shot { height: min(100%, 44vw); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-th.cur, .sv-th.pop, .sv-pip { animation: none; }
}
/* carte seule (v2.36) : rayon de scan sur la carte pendant la recherche, étape écrite dessus */
.sc-scanwrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.sc-scanwrap .bphoto { position: relative; display: block; height: 100%; max-width: 100%; aspect-ratio: 63/88; overflow: hidden; border-radius: 10px; }
.sc-scanwrap .bphoto img, .sc-scanwrap .bphoto canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-scanlbl { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: 90%;
  padding: 7px 14px; border-radius: 999px; background: rgba(12,14,25,.88); border: 1px solid rgba(52,213,255,.5); font-weight: 700; font-size: .88rem; white-space: nowrap; }
.sc-scanlbl span { overflow: hidden; text-overflow: ellipsis; }
.sc-scanlbl .spinner { width: 16px; height: 16px; margin: 0; border-width: 2px; flex: none; }
/* version de la carte dans l'écran de vérification et le récapitulatif (v2.37) */
.sv-vers { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sv-vers .chips { justify-content: center; }
.sv-vers .chip { padding: 8px 14px; font-size: .9rem; }
.sv-vpill { position: relative; z-index: 2; flex: none; max-width: 100%; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(12,14,25,.92); color: var(--text); font: inherit; font-size: .7rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sv-vpill.doubt { border-color: #ffb84d; color: #ffb84d; }
.sv-vpill span { opacity: .7; }
/* aperçu de la version sur le visuel officiel (v2.40) : holo = l'illustration brille, reverse = tout sauf l'illustration */
.sv-offwrap { position: relative; display: block; overflow: hidden; border-radius: 10px; }
.sv-offwrap .sv-off { display: block; }
.vfx { position: relative; }
.vfx-holo::after, .vfx-reverse::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.08) 10%, rgba(255,0,150,.75) 25%, rgba(255,230,0,.75) 37%, rgba(0,255,170,.75) 50%, rgba(0,160,255,.75) 63%, rgba(180,0,255,.75) 75%, rgba(255,255,255,.08) 90%);
  background-size: 250% 250%; background-position: 30% 30%; mix-blend-mode: color-dodge; opacity: 1; animation: vfxsweep 3.5s ease-in-out infinite alternate; }
.vfx-holo::after { clip-path: inset(11% 9% 50% 9%); }
.vfx-reverse::after { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 9% 11%, 91% 11%, 91% 50%, 9% 50%, 9% 11%); }
@keyframes vfxsweep { from { background-position: 90% 10%; } to { background-position: 10% 90%; } }
.sv-vnote { opacity: .75; }
.sv-vers > .small { text-align: center; }
@media (prefers-reduced-motion: reduce) { .vfx-holo::after, .vfx-reverse::after { animation: none; } }

/* =====================================================================
   APPLI MOBILE (v2.40) — sur téléphone, le site se comporte comme une appli :
   pas de surlignage au toucher, retour en haut à gauche, rangées qui défilent
   de côté, page Capturer compacte. Le PC ne change pas.
   ===================================================================== */
a.stat { text-decoration: none; color: inherit; }
.nav-back { display: none; }
@media (min-width: 761px) { .d-hide { display: none !important; } }
@media (max-width: 760px) {
  html { -webkit-tap-highlight-color: transparent; }
  a, button, label, select, input, summary { touch-action: manipulation; }
  .btn, .chip, .mainnav, .topbar, .ctile, .set-card, .game-tile, .mode-card, .stat, .cap-home, .home-goal { -webkit-user-select: none; user-select: none; }
  .btn:active, .ctile:active .cimg, .set-card:active, .game-tile:active, .mode-card:active, .cap-home:active, .home-goal:active, a.stat:active { transform: scale(.97); transition: transform .08s; }
  /* en-tête : encoche du téléphone, flèche retour à la place du nom sur les pages « internes » */
  .topbar { padding-top: calc(8px + env(safe-area-inset-top)); min-height: 52px; gap: 8px; }
  .nav-back:not([hidden]) { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: -4px 0 -4px -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
  .nav-back:active { background: rgba(255,255,255,.08); }
  .nav-back svg { width: 24px; height: 24px; stroke-width: 2.4; }
  .nav-back:not([hidden]) ~ .brand .brand-name { display: none; }
  .breadcrumb { display: none; }
  /* barre du bas : pastille derrière l'onglet actif */
  .mainnav a:not(.nav-scan) .ico { width: 52px; height: 28px; align-items: center; justify-content: center; border-radius: 999px; transition: background .15s; }
  .mainnav a.active:not(.nav-scan) .ico { background: rgba(124,92,255,.24); }
  .mainnav a { padding-top: 4px; }

  /* rangées qui défilent de côté (accueil) : elles vont jusqu'au bord de l'écran */
  .hscroll { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 12px; margin-inline: -12px; padding: 2px 12px 8px; scrollbar-width: none; }
  .hscroll::-webkit-scrollbar { display: none; }
  .hscroll > * { scroll-snap-align: start; }
  .cards.hscroll { grid-auto-columns: 108px; gap: 10px; }
  .grid-auto.hscroll { grid-auto-columns: 158px; gap: 10px; }
  .licences.hscroll { grid-auto-columns: min(250px, 72%); }
  .licences .game-tile.soon { padding: 10px 12px; }

  /* Accueil */
  .hero { padding: 14px 14px 12px; margin-bottom: 4px; }
  .hero h1 { font-size: 1.25rem; }
  .hero .stats { margin-top: 10px; }
  .hero-cta { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px !important; }
  .hero-cta .btn { justify-content: center; }
  .hero-cta .btn.primary { grid-column: 1 / -1; padding: 13px 14px; font-size: 1rem; }
  .home-flow { display: flex; flex-direction: column; }
  .home-flow > #h-friends, .home-flow > #h-caps, .home-flow > #h-install { order: 0; }
  .home-flow > #h-inprogress { order: 1; }
  .home-flow > .h-recent { order: 2; }
  .home-flow > #h-goals { order: 3; }
  .home-flow > .h-lic { order: 4; }
  .home-flow > div:empty { display: none; }
  .home-flow .section-title { margin: 20px 0 10px; }
  .home-flow .cap-home { margin-top: 12px; }
  .install-banner { margin: 12px 0 0; }

  /* Capturer : mode en onglets compacts, série sur une ligne, place à la photo */
  body[data-view="scan"] .app { padding-top: 12px; }
  .mode-pick { display: flex; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
  .mode-card { flex: 1 1 0; flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; border: 0; border-radius: 10px; background: none; box-shadow: none; }
  .mode-card .mc-ico { width: auto; height: auto; background: none !important; color: inherit; }
  .mode-card .mc-ico svg { width: 18px; height: 18px; }
  .mode-card .mc-txt > span { display: none; }
  .mode-card .mc-txt b { font-size: .86rem; white-space: nowrap; }
  .mode-card:not(.on) { color: #aab0d3; }
  .mode-card.on { background: var(--holo) !important; color: #16172a; box-shadow: 0 4px 14px rgba(124,92,255,.35); }
  .mode-card.on .mc-ico { color: #16172a; }
  .set-first, .set-first.chosen { padding: 0; margin-bottom: 10px; border: 0; background: none; }
  .set-first .sf-head { display: none; }
  .set-first select { padding: 10px 12px; border: 1.5px dashed rgba(255,210,63,.55); }
  .set-first.chosen select { border: 1.5px solid rgba(61,220,151,.6); }
  .sc-opts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; margin-bottom: 10px; }
  .sc-opts > * { margin: 0 !important; }
  .sc-opts label.small { display: block; }
  .sc-opts select { width: 100%; max-width: 140px; padding: 10px 8px; }
  .sc-opts .set-first select { max-width: none; padding: 10px 12px; } /* même départ du texte que « Une carte » et « Rafale » */
  /* avant la photo : le cadre prend la place disponible, les boutons restent juste en dessous */
  /* (v2.83) les boutons arrivent juste au-dessus de la barre du bas, sans vide en dessous */
  .scan-view:not(:has(video)):not(:has(img)):not(:has(canvas)) { aspect-ratio: auto; height: clamp(230px, calc(100svh - 300px), 760px); }
  /* (v3.37) hauteur fixée par fitScreen : toute la largeur, sinon la proportion du cadre (3/4, 4/3 avec le canevas de la photo)
     changeait sa largeur à chaque étape → la carte en recherche « se balançait » de gauche à droite */
  .scan-view[data-fit] { aspect-ratio: auto; width: 100%; }
  .batch-view:not(:has(video)):not(:has(img)):not(:has(canvas)) { height: clamp(230px, calc(100svh - 300px), 760px); }
  .scan-dock { margin-top: 10px !important; }
}
/* appli installée : pas d'effet « élastique » en haut de page */
@media (display-mode: standalone) { html, body { overscroll-behavior-y: none; } }

/* Toucher sans « carré » (v2.41) : pas de surlignage du navigateur ni de sélection de l'image
   quand on touche la capsule, un Pokémon ou une case du Pokédex (quelle que soit la largeur d'écran). */
html { -webkit-tap-highlight-color: transparent; }
.cap-ov, .cap-ov *, .cap-stage, .dex-cell, .dex-cell *, .evo-cell, .sp-art, .sp-art * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cap-ov img, .dex-cell img, .evo-cell img { -webkit-user-drag: none; pointer-events: none; }
.cap-ov :focus:not(:focus-visible), .dex-cell:focus:not(:focus-visible), .evo-cell:focus:not(:focus-visible) { outline: none; }
.dex-cell.got:active { transform: scale(.96); transition: transform .08s; }

/* Filtres sans bandeau sombre derrière (v2.42) : sur téléphone la barre de filtres n'est pas collante,
   le fond (re-posé plus haut par « .toolbar { background: rgba(12,14,25,.9) } ») ne servait à rien. */
@media (max-width: 760px) {
  .toolbar { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Question « Tu es sûr ? » (v2.42, App.util.ask) : remplace les fenêtres du navigateur.
   PC : petite carte au centre ; téléphone : panneau qui monte du bas, gros boutons. */
.ask { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ask-bg { position: absolute; inset: 0; background: rgba(4,6,14,.72); animation: askFade .18s ease-out; }
.ask-box { position: relative; width: min(400px, 100%); background: var(--bg2, #131629); border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.55); text-align: center; animation: askIn .22s cubic-bezier(.2,.9,.3,1.15); }
.ask-ico { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #7c5cff, #ff4fa3); }
.ask-danger .ask-ico { background: linear-gradient(135deg, #ff5a6e, #c4304a); }
.ask-title { margin: 0 0 6px; font-size: 1.12rem; }
.ask-text { margin: 0 0 16px; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.ask-btns { display: flex; flex-direction: row-reverse; gap: 10px; }
.ask-btns .btn { flex: 1; justify-content: center; padding: 11px 14px; font-weight: 700; }
.ask-btns .btn.ask-red { background: linear-gradient(120deg, #ff5a6e, #d6334f); border: 0; color: #fff; box-shadow: 0 6px 18px rgba(255,90,110,.3); }
.ask.ask-out .ask-bg { opacity: 0; transition: opacity .18s; }
.ask.ask-out .ask-box { opacity: 0; transform: scale(.96); transition: opacity .18s, transform .18s; }
@keyframes askFade { from { opacity: 0; } }
@keyframes askIn { from { transform: scale(.94); } }
@media (max-width: 760px) {
  .ask { align-items: flex-end; padding: 0; }
  .ask-box { width: 100%; border-radius: 22px 22px 0 0; border-bottom: 0; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); animation: askUp .26s cubic-bezier(.2,.9,.3,1); }
  .ask-box::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); margin: 0 auto 14px; }
  .ask-btns { flex-direction: column; gap: 8px; }
  .ask-btns .btn { width: 100%; padding: 14px; font-size: 1rem; }
  .ask.ask-out .ask-box { transform: translateY(40px); }
  @keyframes askUp { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) { .ask-bg, .ask-box { animation: none; } }
/* le petit message du bas reste visible par-dessus l'ouverture des capsules et le combat */
.toast { z-index: 6500; }

/* =====================================================================
   PRÉSENTATION DE L'APPLI (v2.44) — première ouverture sur téléphone, 5 écrans à faire glisser.
   Illustrations en CSS seul ; animations en déplacement/taille (l'aperçu intégré gèle les animations
   à leur 1re image : rien d'important ne doit y être invisible).
   ===================================================================== */
html.ob-lock, html.ob-lock body { overflow: hidden; }
.ob { position: fixed; inset: 0; z-index: 7000; color: var(--text); transition: opacity .25s;
  background: radial-gradient(520px 360px at 85% 0%, rgba(255,79,163,.20), transparent 70%), radial-gradient(520px 380px at 0% 30%, rgba(52,213,255,.14), transparent 70%), #0a0c16; }
.ob.out { opacity: 0; pointer-events: none; }
.ob-skip { position: absolute; z-index: 2; top: calc(10px + env(safe-area-inset-top)); right: 12px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.07); color: #c8ccea; font-weight: 600; cursor: pointer; }
.ob-track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.ob-track::-webkit-scrollbar { display: none; }
.ob-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
  padding: calc(52px + env(safe-area-inset-top)) 0 calc(96px + env(safe-area-inset-bottom)); }
.ob-slide > .ob-art { position: relative; flex: none; width: 100%; max-width: 460px; height: clamp(210px, 34vh, 320px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.ob-txt { width: 100%; max-width: 460px; padding: 6px 24px 0; }
.ob-txt h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 6px; }
.ob-txt > p { margin: 0 0 10px; color: #c8ccea; font-size: .98rem; }
.ob-holo { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-small { font-size: .85rem !important; color: var(--muted) !important; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0 !important; }
.ob-tab { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgba(124,92,255,.2); border: 1px solid rgba(124,92,255,.45); color: #fff; font-weight: 700; font-size: .78rem; }
.ob-steps { list-style: none; counter-reset: ob; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ob-steps li { counter-increment: ob; display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.35; }
.ob-steps li::before { content: counter(ob); flex: none; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; background: var(--holo); color: #16172a; font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.ob-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ob-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.35; }
.ob-list li > svg { flex: none; margin-top: 2px; color: var(--accent-cyan); }
.ob-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 460px; margin: 0 auto;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); }
.ob-dots { display: flex; gap: 7px; }
.ob-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.22); cursor: pointer; transition: width .2s, background .2s; }
.ob-dots button.on { width: 24px; background: var(--holo); }
.ob-next { min-width: 130px; padding: 13px 22px !important; font-size: 1rem !important; border-radius: 14px !important; }
.ob-next.go { background: var(--holo) !important; color: #16172a !important; }

/* petite carte dessinée */
.ob-card { --w: 64px; position: relative; display: flex; flex-direction: column; gap: calc(var(--w) * .05); width: var(--w); aspect-ratio: 63 / 88; padding: calc(var(--w) * .07); border-radius: calc(var(--w) * .07);
  background: hsl(var(--h) 45% 84%); border: calc(var(--w) * .045) solid #ffd23f; box-shadow: 0 8px 18px rgba(0,0,0,.45); flex: none; }
.ob-pic { flex: 0 0 46%; border-radius: 3px; background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.55) 0 18%, transparent 19%), linear-gradient(135deg, hsl(var(--h) 80% 60%), hsl(calc(var(--h) + 50) 70% 42%)); }
.ob-l { height: calc(var(--w) * .06); border-radius: 9px; background: rgba(0,0,0,.22); }
.ob-l.s { width: 60%; }
.ob-card em { font-style: normal; }

/* 0 — bienvenue */
.ob-fan { position: relative; width: 240px; height: 170px; }
.ob-fan .ob-card { --w: 100px; position: absolute; left: 70px; top: 10px; transform: translateX(var(--x)) rotate(var(--r)); animation: obFloat 3.2s ease-in-out infinite; }
.ob-fan .f1 { --r: -14deg; --x: -62px; }
.ob-fan .f2 { --r: 0deg; --x: 0px; z-index: 1; animation-delay: -1s; }
.ob-fan .f3 { --r: 14deg; --x: 62px; animation-delay: -2s; }
@keyframes obFloat { 0%, 100% { transform: translateX(var(--x)) rotate(var(--r)) translateY(0); } 50% { transform: translateX(var(--x)) rotate(var(--r)) translateY(-8px); } }
.ob-logo { display: flex; padding: 12px; border-radius: 22px; background: #151936; border: 1px solid var(--line); box-shadow: 0 0 30px rgba(124,92,255,.45); }

/* 1 — capture : téléphone avec une carte, puis une page de classeur */
.ob-phone { position: relative; width: 158px; height: 220px; border-radius: 26px; border: 4px solid #3a4068; background: #05060c; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05); }
.ob-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ob-scene.a { animation: obSceneA 9s infinite; }
.ob-scene.b { visibility: hidden; animation: obSceneB 9s infinite; }
@keyframes obSceneA { 0%, 49.9% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@keyframes obSceneB { 0%, 49.9% { visibility: hidden; } 50%, 100% { visibility: visible; } }
.ob-scene .ob-card.big { --w: 96px; }
.ob-ray { position: absolute; left: 10%; right: 10%; top: 12%; height: 3px; border-radius: 3px; background: #34d5ff; box-shadow: 0 0 14px 4px rgba(52,213,255,.6); animation: obRay 1.5s ease-in-out infinite alternate; }
@keyframes obRay { to { top: 86%; } }
.ob-found { position: absolute; bottom: 10px; left: 50%; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #3ddc97; color: #062; font-weight: 800; font-size: .72rem; white-space: nowrap; transform: translateX(-50%) scale(0); }
.ob-scene.a .ob-found { animation: obFoundA 9s infinite; }
.ob-scene.b .ob-found { animation: obFoundB 9s infinite; }
@keyframes obFoundA { 0%, 30% { transform: translateX(-50%) scale(0); } 34%, 100% { transform: translateX(-50%) scale(1); } }
@keyframes obFoundB { 0%, 88% { transform: translateX(-50%) scale(0); } 92%, 100% { transform: translateX(-50%) scale(1); } }
.ob-page { display: grid; grid-template-columns: repeat(3, auto); gap: 5px; padding: 6px; border-radius: 8px; background: #1b1f3b; }
.ob-page .ob-card { --w: 36px; box-shadow: none; filter: brightness(.55) saturate(.4); animation: obCell 9s infinite; }
@keyframes obCell { 0%, 55% { filter: brightness(.55) saturate(.4); outline: 0 solid transparent; } 58%, 100% { filter: none; outline: 2px solid #3ddc97; } }
.ob-page .c1 { animation-delay: .3s; } .ob-page .c2 { animation-delay: .6s; } .ob-page .c3 { animation-delay: .9s; } .ob-page .c4 { animation-delay: 1.2s; }
.ob-page .c5 { animation-delay: 1.5s; } .ob-page .c6 { animation-delay: 1.8s; } .ob-page .c7 { animation-delay: 2.1s; } .ob-page .c8 { animation-delay: 2.4s; }
.ob-modes { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.ob-modes .m { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 9px; font-weight: 700; font-size: .78rem; color: #aab0d3; }
.ob-modes .m.a { animation: obModeA 9s infinite; }
.ob-modes .m.b { animation: obModeB 9s infinite; }
@keyframes obModeA { 0%, 49.9% { background: #7c5cff; color: #fff; } 50%, 100% { background: transparent; color: #aab0d3; } }
@keyframes obModeB { 0%, 49.9% { background: transparent; color: #aab0d3; } 50%, 100% { background: #7c5cff; color: #fff; } }

/* 2 — collection : cartes avec prix et rareté, valeur totale */
.ob-total { padding: 7px 14px; border-radius: 999px; background: rgba(255,210,63,.12); border: 1px solid rgba(255,210,63,.4); font-size: .82rem; color: #c8ccea; }
.ob-total b { color: #ffd23f; font-family: var(--display); font-size: 1rem; margin-left: 4px; }
.ob-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 14px 14px; }
.ob-grid .ob-card { --w: 66px; }
.ob-slide.on .ob-grid .ob-card { animation: obDeal .45s cubic-bezier(.2,1.4,.5,1) both; }
.ob-slide.on .ob-grid .g1 { animation-delay: .08s; } .ob-slide.on .ob-grid .g2 { animation-delay: .16s; } .ob-slide.on .ob-grid .g3 { animation-delay: .24s; }
.ob-slide.on .ob-grid .g4 { animation-delay: .32s; } .ob-slide.on .ob-grid .g5 { animation-delay: .4s; }
@keyframes obDeal { from { transform: translateY(18px) scale(.85); } to { transform: none; } }
.ob-price { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 2px 6px; border-radius: 999px; background: #151936; border: 1px solid rgba(255,210,63,.6); color: #ffd23f; font-size: .62rem; font-weight: 800; white-space: nowrap; }
.ob-rar { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #151936; border: 1px solid var(--line); color: #34d5ff; font-size: .55rem; display: flex; align-items: center; justify-content: center; }

/* 3 — séries : barre de progression, cartes possédées / manquantes, objectif */
.ob-set { width: min(300px, 86vw); padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ob-set-h { width: 100%; display: flex; justify-content: space-between; align-items: baseline; }
.ob-set-h b { font-family: var(--display); font-size: 1.1rem; }
.ob-set-h span { font-size: .8rem; color: var(--muted); }
.ob-bar { width: 100%; height: 8px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; }
.ob-bar i { display: block; width: 67%; height: 100%; background: var(--holo); border-radius: 9px; transform-origin: left; }
.ob-slide.on .ob-bar i { animation: obFill 1.6s ease-out both; }
@keyframes obFill { from { transform: scaleX(.1); } to { transform: none; } }
.ob-sgrid { display: grid; grid-template-columns: repeat(5, auto); gap: 6px; }
.ob-sgrid .ob-card { --w: 46px; box-shadow: none; }
.ob-sgrid .ob-card.miss { background: rgba(255,255,255,.04); border: 1.5px dashed rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; }
.ob-sgrid .miss em { color: var(--muted); font-size: .62rem; font-weight: 700; }
.ob-goal { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(61,220,151,.12); border: 1px solid rgba(61,220,151,.4); color: #3ddc97; font-size: .76rem; font-weight: 700; }

/* 4 — combat : attaque, dégâts, barre de PV */
.ob-arena { position: relative; width: 280px; height: 210px; }
.ob-fighter { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ob-fighter.me { left: 18px; bottom: 0; }
.ob-fighter.foe { right: 18px; top: 0; }
.ob-fighter .ob-card { --w: 82px; }
.ob-fighter.me .ob-card { animation: obLunge 2.6s ease-in-out infinite; }
.ob-fighter.foe .ob-card { animation: obHit 2.6s ease-in-out infinite; }
@keyframes obLunge { 0%, 30%, 60%, 100% { transform: none; } 42% { transform: translate(64px, -44px) rotate(8deg); } }
@keyframes obHit { 0%, 40% { transform: none; } 44% { transform: translateX(-7px) rotate(-4deg); } 48% { transform: translateX(6px) rotate(3deg); } 54%, 100% { transform: none; } }
.ob-hp { width: 82px; height: 7px; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; }
.ob-hp i { display: block; height: 100%; width: 100%; background: #3ddc97; border-radius: 9px; transform-origin: left; }
.ob-fighter.foe .ob-hp i { animation: obHp 2.6s ease-in-out infinite; }
@keyframes obHp { 0%, 43% { transform: none; background: #3ddc97; } 55%, 100% { transform: scaleX(.4); background: #ffb84d; } }
.ob-dmg { position: absolute; top: 20px; left: -18px; font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: #ff5b7a; text-shadow: 0 2px 8px rgba(0,0,0,.6); transform: scale(0); animation: obDmg 2.6s ease-out infinite; }
@keyframes obDmg { 0%, 43% { transform: scale(0); } 50% { transform: translateY(-6px) scale(1.2); } 80% { transform: translateY(-18px) scale(1); } 100% { transform: translateY(-22px) scale(0); } }
.ob-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: #ffd23f; text-shadow: 0 0 14px rgba(255,210,63,.5); }

@media (prefers-reduced-motion: reduce) {
  .ob *, .ob *::before { animation: none !important; }
  .ob-scene.b { visibility: hidden; } .ob-scene.a .ob-found { transform: translateX(-50%) scale(1); }
  .ob-modes .m.a { background: #7c5cff; color: #fff; }
}
/* contenu centré en hauteur (sans jamais couper le haut sur un petit écran) */
.ob-slide > .ob-art { margin-top: auto; }
.ob-slide > .ob-txt { margin-bottom: auto; }
.ob-s0 .ob-txt { text-align: center; }
.ob-s0 .ob-small { justify-content: center; }
.ob-small { display: block !important; line-height: 1.6; }
.ob-small .ob-tab { vertical-align: middle; margin-right: 6px; }
.ob-s0 .ob-small { text-align: center; }

/* ===== Mode d'emploi de Capturer (v2.46) ===== */
/* bouton « ? » au bout des onglets de mode (téléphone) */
.sc-help { flex: 0 0 34px; height: 34px; align-self: center; margin-left: 2px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface2); color: #c8ccea; font-weight: 800; font-size: .95rem; cursor: pointer; }
.sc-help:active { transform: scale(.94); }

/* 1 — trois modes qui défilent dans le téléphone (3 temps de 3 s) */
.ob-scene.t1 { animation: obT1 9s infinite; }
.ob-scene.t2 { visibility: hidden; animation: obT2 9s infinite; }
.ob-scene.t3 { visibility: hidden; animation: obT3 9s infinite; }
@keyframes obT1 { 0%, 33.2% { visibility: visible; } 33.3%, 100% { visibility: hidden; } }
@keyframes obT2 { 0%, 33.2% { visibility: hidden; } 33.3%, 66.5% { visibility: visible; } 66.6%, 100% { visibility: hidden; } }
@keyframes obT3 { 0%, 66.5% { visibility: hidden; } 66.6%, 100% { visibility: visible; } }
.ob-modes3 .m.t1 { animation: obMT1 9s infinite; }
.ob-modes3 .m.t2 { animation: obMT2 9s infinite; }
.ob-modes3 .m.t3 { animation: obMT3 9s infinite; }
@keyframes obMT1 { 0%, 33.2% { background: #7c5cff; color: #fff; } 33.3%, 100% { background: transparent; color: #aab0d3; } }
@keyframes obMT2 { 0%, 33.2% { background: transparent; color: #aab0d3; } 33.3%, 66.5% { background: #7c5cff; color: #fff; } 66.6%, 100% { background: transparent; color: #aab0d3; } }
@keyframes obMT3 { 0%, 66.5% { background: transparent; color: #aab0d3; } 66.6%, 100% { background: #7c5cff; color: #fff; } }
.ob-frame { position: absolute; width: 104px; height: 145px; border: 2px dashed rgba(255,210,63,.7); border-radius: 10px; }
.ob-slidein { animation: obSlideIn 1.5s ease-in-out infinite; }
@keyframes obSlideIn { 0% { transform: translateX(150px) rotate(8deg); } 30%, 70% { transform: none; } 100% { transform: translateX(-150px) rotate(-8deg); } }
.ob-plus { position: absolute; top: 12px; right: 12px; padding: 2px 8px; border-radius: 999px; background: #3ddc97; color: #062; font-weight: 800; font-size: .75rem; animation: obPlus 1.5s infinite; }
@keyframes obPlus { 0%, 38% { transform: scale(0); } 45%, 70% { transform: scale(1); } 80%, 100% { transform: scale(0); } }

/* 2 — menu de la série : « je ne sais pas » puis série choisie */
.ob-sel { position: relative; width: 240px; height: 44px; }
.ob-sel > span { position: absolute; inset: 0; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 12px; background: var(--bg2); font-size: .9rem; font-weight: 600; }
.ob-sel-a { border: 1.5px dashed rgba(255,210,63,.6); color: #c8ccea; animation: obSelA 5s infinite; }
.ob-sel-b { border: 1.5px solid rgba(61,220,151,.7); color: #fff; visibility: hidden; animation: obSelB 5s infinite; }
.ob-sel-b svg { color: #3ddc97; }
@keyframes obSelA { 0%, 44.9% { visibility: visible; } 45%, 100% { visibility: hidden; } }
@keyframes obSelB { 0%, 44.9% { visibility: hidden; } 45%, 100% { visibility: visible; } }
.ob-hint .ob-card { animation: obHint 5s infinite; }
@keyframes obHint { 0%, 44.9% { filter: brightness(.6) saturate(.3); } 45%, 100% { filter: none; } }

/* 3 — bonne et mauvaise photo */
.ob-vs2 { display: flex; gap: 26px; }
.ob-ex { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ob-ex b { font-size: .8rem; }
.ob-ex.ok b { color: #3ddc97; } .ob-ex.ko b { color: #ff7a8a; }
.ob-ex .ob-card { --w: 92px; }
.ob-ex.ko .ob-card { transform: rotate(-11deg) scale(.86); filter: blur(.6px); }
.ob-glare::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%); }
.ob-mark { position: absolute; top: -10px; right: -10px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.ob-ex.ok .ob-mark { background: #3ddc97; color: #062; }
.ob-ex.ko .ob-mark { background: #ff5b7a; color: #fff; }

/* 4 — page analysée : reconnue / à vérifier / vide */
.ob-page.big .ob-card { --w: 50px; }
.ob-page.big .ob-cell { filter: brightness(.55) saturate(.4); }
.ob-slide.on .ob-page.big .ob-cell { animation: obCellIn .3s ease-out both; }
.ob-slide.on .ob-page.big .d1 { animation-delay: .3s; } .ob-slide.on .ob-page.big .d2 { animation-delay: .6s; } .ob-slide.on .ob-page.big .d3 { animation-delay: .9s; }
.ob-slide.on .ob-page.big .d5 { animation-delay: 1.5s; } .ob-slide.on .ob-page.big .d6 { animation-delay: 1.8s; } .ob-slide.on .ob-page.big .d7 { animation-delay: 2.1s; } .ob-slide.on .ob-page.big .d8 { animation-delay: 2.4s; }
@keyframes obCellIn { to { filter: none; } }
.ob-page.big .ob-cell.ok { outline: 2px solid #3ddc97; }
.ob-page.big .ob-cell.doubt { outline: 2px solid #ffb84d; }
.ob-page.big .ob-cell.empty { background: rgba(255,255,255,.05); border: 1.5px dashed rgba(255,255,255,.25); filter: none; }
.ob-q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: #ffb84d; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.ob-legend { display: flex; gap: 10px; font-size: .74rem; color: #c8ccea; }
.ob-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ob-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.ob-legend .ok::before { background: #3ddc97; } .ob-legend .doubt::before { background: #ffb84d; } .ob-legend .empty::before { border: 1.5px dashed rgba(255,255,255,.4); }

/* 5 — récapitulatif */
.ob-recap { display: flex; gap: 14px; }
.ob-rc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ob-rc .ob-card { --w: 76px; }
.ob-vp { position: absolute; top: calc(76px * 88 / 63 - 16px); left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 999px; background: rgba(12,14,25,.92); border: 1px solid var(--line); font-size: .64rem; font-weight: 800; white-space: nowrap; }
.ob-vp.doubt { border-color: #ffb84d; color: #ffb84d; animation: obPulse 1.4s ease-in-out infinite; }
@keyframes obPulse { 50% { transform: translateX(-50%) scale(1.12); } }
.ob-st { font-size: .7rem; font-weight: 800; color: #3ddc97; }
.ob-st.dup { color: #34d5ff; }
.ob-save { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 12px; background: linear-gradient(120deg, #7c5cff, #ff4fa3); color: #fff; font-weight: 700; font-size: .85rem; box-shadow: 0 6px 18px rgba(124,92,255,.35); }

/* 6 — certification : dos, retournement, badge */
.ob-flip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; perspective: 700px; }
.ob-flip-in { position: relative; width: 104px; aspect-ratio: 63 / 88; transform-style: preserve-3d; animation: obFlip 4s ease-in-out infinite; }
.ob-flip-in > * { position: absolute !important; inset: 0; width: 100% !important; --w: 104px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ob-back { display: flex; align-items: center; justify-content: center; border-radius: 7px; border: 5px solid #1d3f8f; background: radial-gradient(circle at 50% 50%, #3d6fe0, #1a3a8c 70%); transform: rotateY(180deg); box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.ob-back i { width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd23f 0 22%, #e8a323 23% 40%, transparent 41%), rgba(255,255,255,.12); }
@keyframes obFlip { 0%, 35% { transform: rotateY(180deg); } 55%, 100% { transform: rotateY(360deg); } }
.ob-shield { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(61,220,151,.14); border: 1px solid rgba(61,220,151,.5); color: #3ddc97; font-weight: 800; font-size: .8rem; animation: obShield 4s infinite; }
@keyframes obShield { 0%, 58% { transform: scale(0); } 64% { transform: scale(1.15); } 70%, 100% { transform: scale(1); } }
.ob-steps li svg { display: inline; vertical-align: -2px; color: #3ddc97; }

@media (prefers-reduced-motion: reduce) {
  .ob-scene.t2, .ob-scene.t3, .ob-sel-b { visibility: hidden; }
  .ob-modes3 .m.t1 { background: #7c5cff; color: #fff; }
  .ob-flip-in { transform: rotateY(360deg); } .ob-shield, .ob-plus { transform: none; }
  .ob-page.big .ob-cell { filter: none; }
}
.ob-c1 .ob-page .ob-card { animation-name: obCell2; }
@keyframes obCell2 { 0%, 36% { filter: brightness(.55) saturate(.4); outline: 0 solid transparent; } 38%, 100% { filter: none; outline: 2px solid #3ddc97; } }

/* =====================================================================
   MODE SOMBRE DU TÉLÉPHONE (v2.50) : l'appli est déjà sombre et doit toujours avoir le même aspect.
   Déclarer « sombre seulement » empêche Chrome / Samsung Internet d'assombrir la page d'office
   (images et couleurs ternies, textes moins lisibles). Le bloc prefers-color-scheme ne change rien
   à l'affichage : il signale seulement aux navigateurs que la page gère déjà le mode sombre.
   ===================================================================== */
:root { color-scheme: dark only; }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark only; } }
@media (prefers-color-scheme: light) { :root { color-scheme: dark only; } }

/* =====================================================================
   VITRINE PUBLIQUE (v2.59) : badge des cartes certifiées, encadré de partage, invitation des visiteurs
   ===================================================================== */
.v-certmark { position: absolute; top: 6px; right: 6px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(10, 30, 22, .82); border: 1.5px solid #3ddc97; color: #3ddc97; box-shadow: 0 2px 8px rgba(0,0,0,.4); pointer-events: none; }
.v-featured.layout-eventail .v-certmark { top: 4px; right: 4px; width: 22px; height: 22px; }
.v-certs .v-wish-grid .vcard { outline: 2px solid rgba(61,220,151,.45); outline-offset: 2px; border-radius: 10px; }
.v-pub-cta { margin-top: 18px; text-align: center; }
.v-pub-miss { text-align: center; }
.v-certs .v-wish-grid .vcard img { filter: none; }

/* =====================================================================
   COMBAT CONTRE UN AMI (v2.60) : panneau « Contre un ami », salon avec code, attente du coup de l'ami
   ===================================================================== */
.bt-room h2 { display: flex; align-items: center; gap: 8px; }
.bt-code { display: flex; justify-content: center; gap: 6px; margin: 6px 0; user-select: all; }
.bt-code span { width: 42px; height: 54px; display: grid; place-items: center; border-radius: 10px; font: 800 1.7rem/1 ui-monospace, Consolas, monospace;
  background: rgba(255,255,255,.07); border: 1px solid rgba(52,213,255,.45); color: #fff; }
.bt-code-in { width: 100%; text-align: center; font: 800 1.6rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .35em; text-transform: uppercase; padding: 10px 8px; }
.bt-wait { display: flex; align-items: center; gap: 10px; padding: 12px; color: var(--muted, #aab); font-weight: 600; }
.bt-actions .bt-wait { justify-content: center; }
.bt-wait-dots { display: inline-flex; gap: 4px; }
.bt-wait-dots i { width: 7px; height: 7px; border-radius: 50%; background: #34d5ff; animation: btWait 1.2s infinite ease-in-out; }
.bt-wait-dots i:nth-child(2) { animation-delay: .15s; } .bt-wait-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes btWait { 0%, 80%, 100% { transform: scale(.5); } 40% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .bt-wait-dots i { animation: none; } }
.bt-wait-late { text-align: center; padding: 0 10px 10px; }
.bt-net { color: #ffb347; font-weight: 700; margin-left: 8px; }
@media (max-width: 760px) {
  .bt-code span { width: 40px; height: 50px; font-size: 1.5rem; }
}

/* Pile ou face au début d'un combat en ligne (v2.61) */
.bt-toss { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(6, 8, 18, .72); }
.bt-toss-box { text-align: center; padding: 20px; }
.bt-toss-t { font-weight: 800; font-size: 1.15rem; margin-bottom: 18px; color: #fff; }
.bt-coin3d { perspective: 700px; width: 132px; height: 132px; margin: 0 auto; }
.bt-coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: btCoin 1.8s cubic-bezier(.2, .7, .25, 1) forwards; }
.bt-coin.still { animation: none; }
.bt-coin.still.foe { transform: rotateY(180deg); }
@keyframes btCoin {
  0% { transform: translateY(0) rotateY(0) scale(.8); }
  35% { transform: translateY(-70px) rotateY(calc(var(--end) * .45)) scale(1.1); }
  75% { transform: translateY(6px) rotateY(calc(var(--end) * .92)) scale(1); }
  100% { transform: translateY(0) rotateY(var(--end)) scale(1); }
}
.bt-coin-f { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 800; color: #3a2a00;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd23f 45%, #c9921a 100%);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.35), inset 0 0 0 10px rgba(150,100,10,.35), 0 10px 30px rgba(0,0,0,.5); }
.bt-coin-f b { font-size: 2.4rem; line-height: 1; display: grid; place-items: center; }
.bt-coin-f span { font-size: .78rem; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-coin-f.foe { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #e8f7ff, #8fd8ff 45%, #2f86c9 100%); color: #08263d; }
.bt-toss-r { margin-top: 18px; min-height: 1.6em; font-size: 1.25rem; color: #fff; transform: scale(.6); transition: transform .25s; }
.bt-toss-r.on { transform: scale(1); }

/* Code du salon copiable d'un toucher (v2.62) */
button.bt-code { width: 100%; background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button.bt-code:active span { transform: scale(.94); }
.bt-code span { transition: transform .12s, border-color .2s, background .2s; }
.bt-code.copied span { border-color: #3ddc97; background: rgba(61,220,151,.16); }
.bt-code-hint { text-align: center; margin-top: 2px; min-height: 1.3em; }

/* Salon de combat (v2.64) : tout centré dans une colonne étroite (sur PC la fenêtre fait 980 px de large),
   coche du « Code copié » sur la même ligne que le texte (.ic est en display:block partout). */
.bt-room { max-width: 520px; margin: 0 auto; text-align: center; }
.bt-room h2 { justify-content: center; }
.bt-code-hint b { display: inline-flex; align-items: center; gap: 5px; }
.bt-room .btn { display: inline-flex; align-items: center; gap: 7px; }
.modal-box:has(.bt-room) { width: min(580px, 100%); }

/* Combat Avancé (v2.65) : mon sac reste visible hors de mon tour (cartes grises, toucher = voir l'effet) */
/* coche des messages du salon sur la même ligne que le texte (.ic est en display:block) */
.bt-room b .ic { display: inline-block; vertical-align: -2px; margin-right: 3px; }

/* Combat en ligne repris après un rafraîchissement (v2.66) : le combat est rejoué en accéléré sous ce cache */
.bt-ov.bt-replay::after { content: 'Retour dans le combat…'; position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: #0d0f1c; color: var(--text, #fff); font-weight: 800; font-size: 1.1rem; }

/* =====================================================================
   IMPORTER MA COLLECTION (v2.67) : #/importer
   ===================================================================== */
.imp-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255,200,61,.08); border: 1px solid rgba(255,200,61,.3); font-size: .88rem; margin: 6px 0 12px; }
.imp-note svg { flex: none; margin-top: 2px; color: #ffc83d; }
.imp-src { display: flex; gap: 6px; margin-bottom: 10px; }
.imp-src button { flex: 1; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line, rgba(255,255,255,.14)); background: rgba(255,255,255,.04); color: inherit; font-weight: 700; cursor: pointer; }
.imp-src button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.imp-help .imp-file { margin-top: 12px; width: 100%; justify-content: center; }
.imp-paste { margin-top: 12px; }
.imp-paste summary { cursor: pointer; font-weight: 600; }
.imp-paste textarea { width: 100%; margin: 8px 0; font: .85rem ui-monospace, Consolas, monospace; }
.imp-file-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.imp-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.imp-map { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; }
.imp-map span { color: var(--muted, #aab); font-weight: 600; }
.imp-map select { width: 100%; }
.imp-warn { color: #ff8a8a; font-size: .9rem; }
.imp-prev { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.imp-modes { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.imp-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.imp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ffc83d); transition: width .2s; }
.imp-sum { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: none; }
.imp-sum button { flex: none; padding: 7px 11px; border-radius: 99px; border: 1px solid var(--line, rgba(255,255,255,.14)); background: rgba(255,255,255,.04); color: inherit; font-size: .82rem; cursor: pointer; }
.imp-sum button.on { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.imp-sum .ok b { color: #3ddc97; } .imp-sum .chk b { color: #ffc83d; } .imp-sum .ko b { color: #ff8a8a; }
.imp-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 84px; }
.imp-row { display: grid; grid-template-columns: auto 54px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line, rgba(255,255,255,.1)); border-left: 4px solid #3ddc97; opacity: .6; }
.imp-row.use { opacity: 1; }
.imp-row.st-verif, .imp-row.st-choix { border-left-color: #ffc83d; }
.imp-row.st-introuvable { border-left-color: #ff8a8a; opacity: 1; }
.imp-row.st-ignoree { border-left-color: #667; }
.imp-chk { padding-top: 18px; }
.imp-chk input { width: 20px; height: 20px; }
.imp-img img, .imp-img span { width: 54px; aspect-ratio: 63/88; border-radius: 5px; object-fit: cover; display: grid; place-items: center; background: rgba(255,255,255,.06); }
.imp-t { font-size: .92rem; line-height: 1.3; }
.imp-l { margin-top: 2px; overflow-wrap: anywhere; }
.imp-s { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; }
.imp-pill { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: rgba(61,220,151,.16); color: #3ddc97; }
.st-verif .imp-pill, .st-choix .imp-pill { background: rgba(255,200,61,.16); color: #ffc83d; }
.st-introuvable .imp-pill { background: rgba(255,138,138,.16); color: #ff8a8a; }
.st-ignoree .imp-pill { background: rgba(255,255,255,.08); color: #aab; }
.imp-own { color: #3ddc97; display: inline-flex; gap: 3px; align-items: center; }
.imp-alts { display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; align-items: flex-start; padding-bottom: 4px; }
.imp-alts > span { flex: none; align-self: center; }
.imp-alt { flex: none; width: 70px; padding: 3px; border-radius: 8px; border: 2px solid transparent; background: rgba(255,255,255,.05); color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.imp-alt img { width: 100%; aspect-ratio: 63/88; border-radius: 4px; object-fit: cover; }
.imp-alt small { font-size: .6rem; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-align: center; }
.imp-alt.on { border-color: #3ddc97; }
.imp-find { display: flex; gap: 6px; margin-top: 8px; }
.imp-find input { flex: 1; min-width: 0; }
.imp-dock { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg, #0b0d18) 30%); z-index: 5; }
.imp-done { text-align: center; }
.imp-done-ic { width: 64px; height: 64px; margin: 4px auto 6px; border-radius: 50%; display: grid; place-items: center; background: rgba(61,220,151,.16); color: #3ddc97; }
@media (max-width: 760px) {
  .imp-dock { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .imp-maps { grid-template-columns: 1fr 1fr; }
  .imp-src button { font-size: .85rem; }
}

/* ===== Vitrine : personnalisation sur place (v2.69) ===== */
/* barre en haut en mode Personnaliser (thème, cadre, vitrine publique) */
.v-editbar { margin: -4px 0 14px; padding: 10px 12px; border-radius: 14px; border: 1px dashed rgba(124,92,255,.6); background: rgba(124,92,255,.08); }
.v-editbar p { margin: 0 0 8px; color: var(--muted); }
.v-pen-demo { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent, #7c5cff); color: #fff; vertical-align: -5px; }
.v-pen-demo .ic { display: block; }
/* chaque partie modifiable : cadre pointillé + crayon dans le coin */
.v-sec { position: relative; }
.v-editable { outline: 2px dashed rgba(124,92,255,.55); outline-offset: 4px; border-radius: 12px; cursor: pointer; margin-top: 14px; }
.v-editable.v-off > :not(.v-pen) { opacity: .4; }
.v-pen { position: absolute; top: -12px; right: -6px; z-index: 5; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px; border: 0;
  background: linear-gradient(120deg, #7c5cff, #ff4fa3); color: #fff; font: 700 .74rem/1 var(--font, inherit); box-shadow: 0 4px 14px rgba(0,0,0,.4); cursor: pointer; }
.v-pen .ic { display: block; }
.v-pen em { font-style: normal; font-weight: 600; opacity: .85; background: rgba(0,0,0,.25); border-radius: 999px; padding: 2px 6px; }
.v-pen:active { transform: scale(.95); }
.v-head.v-editable { padding: 6px; }
.v-avatar[data-sheet] { cursor: pointer; }
/* statistiques : la 1re est mise en avant */
.v-stats .stat.lead { background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(255,79,163,.25)); border-color: rgba(255,255,255,.25); }
.v-stats .stat.lead b { font-size: 1.5em; }
/* fenêtres de choix */
.v-sheet h2 { margin: 0 0 12px; }
.v-lbl { display: block; font-weight: 700; font-size: .85rem; margin: 0 0 6px; }
.v-opts { display: flex; flex-direction: column; gap: 6px; }
.v-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.v-opt.on { border-color: var(--accent, #7c5cff); background: rgba(124,92,255,.15); font-weight: 700; }
.v-opt-n { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: .78rem; font-weight: 800; }
.v-opt.on .v-opt-n { background: var(--accent, #7c5cff); border-color: var(--accent, #7c5cff); color: #fff; }
.v-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.v-switch input { position: absolute; opacity: 0; pointer-events: none; }
.v-switch span { width: 42px; height: 24px; flex: none; border-radius: 999px; background: rgba(255,255,255,.15); position: relative; transition: background .2s; }
.v-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.v-switch input:checked + span { background: #3ddc97; }
.v-switch input:checked + span::after { transform: translateX(18px); }
.v-cframes { display: flex; flex-wrap: wrap; gap: 6px; }
.modal-box:has(.v-sheet) { width: min(620px, 100%); }
/* badges compacts : seulement les médailles (toucher = nom du badge) */
.badge-grid.compact { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-grid.compact .badge-medal { padding: 0; background: none; border: 0; box-shadow: none; cursor: pointer; }
.badge-grid.compact .badge-medal .bm-txt { display: none; }
.badge-grid.compact .badge-medal .bm-disc { width: 36px; height: 36px; }
.badge-grid.compact .badge-medal.new .bm-disc { box-shadow: 0 0 0 2px #ffd23f; }
.v-badge-hint { margin: 6px 0 0; }
.v-achievements .v-badges { gap: 6px; margin-top: 10px; }
.v-achievements .v-badge { font-size: .72rem; padding: 3px 9px 3px 3px; box-shadow: none; }
.v-achievements .v-badge img { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .v-achievements .v-badges { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .v-achievements .v-badges::-webkit-scrollbar { display: none; }
  .v-achievements .v-badge { flex: none; }
  .v-pen { right: 0; }
}

/* ===== Mon profil (v2.70) ===== */
/* Fonds de la vitrine : tous sombres, dans les couleurs du site (lueurs douces, rien de criard) */
.vitrine.theme-nuit { background:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.55), transparent 60%), radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 46%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1px 1px at 34% 62%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 86%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(ellipse at 20% 0%, rgba(124,92,255,.28), transparent 55%), linear-gradient(170deg, #161a33, #0c0e19 70%); }
.vitrine.theme-holo { background: radial-gradient(ellipse at 0% 0%, rgba(124,92,255,.32), transparent 50%), radial-gradient(ellipse at 100% 20%, rgba(255,79,163,.22), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(52,213,255,.2), transparent 55%), linear-gradient(170deg, #17162e, #0c0e19); border-color: rgba(176,140,255,.3); }
.vitrine.theme-feu { background: radial-gradient(ellipse at 85% 0%, rgba(255,122,61,.3), transparent 55%), radial-gradient(ellipse at 10% 100%, rgba(255,79,107,.16), transparent 55%), linear-gradient(170deg, #22141d, #0f0b14); border-color: rgba(255,140,90,.25); }
.vitrine.theme-foret { background: radial-gradient(ellipse at 10% 100%, rgba(61,220,151,.22), transparent 55%), radial-gradient(ellipse at 90% 0%, rgba(52,213,255,.1), transparent 50%), linear-gradient(170deg, #10211f, #0b1114); border-color: rgba(61,220,151,.22); }
.vitrine.theme-ocean { background: radial-gradient(ellipse at 80% 0%, rgba(52,213,255,.26), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(80,110,255,.2), transparent 55%), linear-gradient(170deg, #0f1a30, #0a0f1c); border-color: rgba(52,213,255,.22); }
.vitrine.theme-or { background: radial-gradient(ellipse at 50% 0%, rgba(255,210,63,.22), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(255,160,60,.12), transparent 50%), linear-gradient(170deg, #1d1a1a, #0f0e12); border-color: rgba(255,210,63,.3); }
.vitrine.theme-classeur { background: repeating-linear-gradient(90deg, transparent 0 calc(33.33% - 1px), rgba(255,255,255,.035) calc(33.33% - 1px) 33.33%),
    repeating-linear-gradient(0deg, transparent 0 219px, rgba(255,255,255,.035) 219px 220px), linear-gradient(170deg, #171b2b, #0e1120); }

/* titres de la vitrine : l'icône reste sur la même ligne que le texte (.ic est en display:block partout) */
.vitrine h2 { display: flex; align-items: center; gap: 8px; }
.vitrine h2 .ic { flex: none; }
.vitrine .row > h2 + .muted { align-self: center; }

/* qui voit cette page ? */
.v-visibility { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.v-visibility.pub { border-color: rgba(61,220,151,.4); background: rgba(61,220,151,.07); }
.v-vis-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); color: var(--muted); }
.v-visibility.pub .v-vis-ic { background: rgba(61,220,151,.18); color: #3ddc97; }
.v-vis-ic .ic { display: block; }
.v-visibility > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.v-visibility > div span { font-size: .8rem; color: var(--muted); }
.v-visibility .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .v-visibility { flex-wrap: wrap; }
  .v-visibility .btn { width: 100%; justify-content: center; }
}

/* badges : une seule rangée qui défile de côté sur téléphone, petites médailles alignées */
.badge-grid.compact { gap: 8px; }
.badge-grid.compact .badge-medal .bm-disc { width: 34px; height: 34px; }
.badge-grid.compact .badge-medal .bm-disc .ic { width: 17px; height: 17px; }
@media (max-width: 760px) {
  .badge-grid.compact { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding: 2px 14px 4px 0; }
  .badge-grid.compact::-webkit-scrollbar { display: none; }
  .badge-grid.compact .badge-medal { flex: none; }
}

/* Explorer (v2.71) : filtres sur deux lignes propres — statut des séries, puis nombre + options en interrupteurs */
.s-filters { margin: -4px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.s-opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.s-tog { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.s-tog input { position: absolute; opacity: 0; pointer-events: none; }
.s-tog span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: .82rem; font-weight: 600; color: var(--muted); }
.s-tog span::before { content: ''; width: 14px; height: 14px; border-radius: 4px; border: 2px solid currentColor; opacity: .7; box-sizing: border-box; }
.s-tog input:checked + span { color: var(--text); border-color: rgba(124,92,255,.6); background: rgba(124,92,255,.14); }
.s-tog input:checked + span::before { opacity: 1; border-color: #7c5cff; background: #7c5cff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat; }
.s-tog input:focus-visible + span { outline: 2px solid #7c5cff; outline-offset: 2px; }
@media (max-width: 760px) {
  /* les 5 statuts tiennent sur une ligne (sinon « Non co… » coupé) */
  .s-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 40px; gap: 6px; overflow: visible; flex-wrap: nowrap; }
  .s-status .chip { padding: 7px 4px; font-size: .8rem; justify-content: center; text-align: center; white-space: nowrap; min-width: 0; }
}

/* Cartes hors-série (v2.72) : étiquette dorée, entrée dans Explorer, encadré de la fiche */
.hs-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: #1b1300; background: linear-gradient(120deg, #ffe27a, #ffb84d); box-shadow: 0 2px 8px rgba(255,190,80,.3); white-space: nowrap; }
.hs-tag.big { font-size: .72rem; padding: 3px 10px; }
.hs-tag.tile { position: absolute; left: 6px; bottom: 6px; z-index: 3; font-size: .56rem; padding: 2px 6px; }
.hs-entry { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: inherit;
  border: 1px solid rgba(255,210,63,.35); background: radial-gradient(ellipse at 0% 0%, rgba(255,210,63,.14), transparent 60%), rgba(255,255,255,.03); }
.hs-entry-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hs-entry-go { font-size: 1.4rem; color: var(--muted); }
.hs-entry:active { transform: scale(.99); }
.hs-box { margin: 10px 0 4px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,210,63,.35); background: rgba(255,210,63,.07); }
.hs-box p { margin: 6px 0 0; }
.hs-list { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.hs-line { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }

/* Statut du profil (v2.72) : sous le pseudo, toucher = explication */
#v-trust-slot { margin: 4px 0 2px; min-height: 4px; }
.v-trust { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--muted); font: 700 .74rem/1.2 var(--font, inherit); cursor: pointer; }
.v-trust .ic { display: block; }
.v-trust.t-ok { color: #3ddc97; border-color: rgba(61,220,151,.45); background: rgba(61,220,151,.12); }
.v-trust.t-part { color: #7fc8ff; border-color: rgba(95,180,255,.45); background: rgba(95,180,255,.12); }
.v-trust.t-new { color: #c9b8ff; border-color: rgba(124,92,255,.4); background: rgba(124,92,255,.12); }
.v-trust.t-suspect { color: #ffb36b; border-color: rgba(255,150,70,.55); background: rgba(255,120,50,.14); }
.v-sheet h2 .v-trust { font-size: .9rem; padding: 5px 12px; }

/* « Tout voir » des badges (v2.73) */
.v-lockline { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }
.v-lockline .ic { flex: none; }
.v-sheet .badge-grid { margin-top: 4px; }

/* ===== Combat : accueil en 3 choix, puis deck → difficulté (v2.75) ===== */
.bt-hub { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 18px; }
.bt-choice { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; text-decoration: none; color: inherit;
  border: 1px solid color-mix(in srgb, var(--cc) 40%, transparent); background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--cc) 18%, transparent), transparent 65%), rgba(255,255,255,.03); }
a.bt-choice:active { transform: scale(.985); }
.bt-choice-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: color-mix(in srgb, var(--cc) 55%, #1a1d33); box-shadow: 0 6px 18px color-mix(in srgb, var(--cc) 30%, transparent); }
.bt-choice-ic .ic { display: block; }
.bt-choice-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bt-choice-t b { font-family: var(--display, inherit); font-size: 1.08rem; }
.bt-choice-go { font-size: 1.6rem; color: var(--muted); }
.bt-choice-b { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bt-choice-b .btn { justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
.bt-choice-online { grid-template-columns: auto 1fr; }
.bt-deck-mini { display: flex; gap: 3px; }
.bt-deck-mini img, .bt-deck-mini i { width: 22px; aspect-ratio: 63/88; border-radius: 3px; object-fit: cover; background: rgba(255,255,255,.08); display: block; }
.bt-choice .bt-deck-mini { grid-column: 2; grid-row: 2; }
.bt-step { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; font-size: 1.1rem; }
.bt-step span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; background: linear-gradient(120deg, #7c5cff, #ff4fa3); color: #fff; }
.bt-decks { display: flex; flex-direction: column; gap: 8px; }
.bt-deck { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; }
.bt-deck.on { border-color: rgba(124,92,255,.7); background: rgba(124,92,255,.14); }
.bt-deck-ok { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; }
.bt-deck.on .bt-deck-ok { background: #7c5cff; border-color: #7c5cff; color: #fff; }
.bt-deck-ok .ic { display: block; }
.bt-deck-t { display: flex; flex-direction: column; min-width: 0; }
.bt-deck-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-deck-cards { display: flex; gap: 4px; }
.bt-deck-cards img, .bt-deck-cards i { width: 30px; aspect-ratio: 63/88; border-radius: 4px; object-fit: cover; background: rgba(255,255,255,.08); display: block; }
.bt-deck-ed { padding: 6px 8px; }
.bt-deck-ed .ic { display: block; }
@media (min-width: 761px) { .bt-hub { max-width: 760px; } .bt-decks { max-width: 760px; } }

/* ===== Signaler / bloquer un dresseur (v2.77) ===== */
.fr-card-links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.fr-more { font-size: 1.15rem; line-height: 1; padding-left: 10px; padding-right: 10px; letter-spacing: 1px; }
.v-mod { white-space: nowrap; }
.rp-reasons { display: grid; gap: 8px; margin: 12px 0 14px; }
.rp-reasons .check { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.rp-reasons .check:has(input:checked) { border-color: var(--accent2); }
#rp-details { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; resize: vertical; }

/* ===== v2.80 : pioche de 10 cartes (mode Avancé) ===== */
.bt-sel.bag { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bt-sel.bag .bt-sel-s { position: relative; flex-direction: column; justify-content: center; gap: 2px; padding: 4px; text-align: center; }
.bt-sel.bag .bt-sel-s img { width: 34px; }
.bt-sel.bag .bt-sel-s span { width: 100%; font-size: .62rem; }
.bt-sel.bag .bt-sel-s b { position: absolute; top: 2px; right: 4px; }
.bt-sel.bag .bt-sel-s.empty { min-height: 66px; }
@media (max-width: 760px) {
  .bt-sel.bag { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .bt-sel.bag .bt-sel-s span { display: none; }
  .bt-sel.bag .bt-sel-s.empty { min-height: 52px; }
}
.bt-rematch-msg { min-height: 1.3em; margin: 0 0 8px; }
/* v2.80 : 5 formats d'import → onglets qui passent à la ligne sur téléphone */
.imp-src { flex-wrap: wrap; }
.imp-src button { flex: 1 1 auto; }
@media (max-width: 760px) { .imp-src button { flex: 1 1 30%; padding: 9px 4px; } }
/* v2.85 : One Piece — choix de la licence (Explorer, Capturer), texte de la carte dans la fiche */
.game-pick, .sc-game { margin: 0 0 12px; }
.game-pick .chip, .sc-game .chip { text-decoration: none; color: inherit; padding: 7px 14px; font-size: .88rem; }
.game-pick .chip.on, .sc-game .chip.on { color: #16172a; }
.cd-text { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); line-height: 1.45; }
@media (max-width: 760px) {
  .game-pick, .sc-game { flex-wrap: nowrap; }
  .game-pick .chip, .sc-game .chip { flex: 1 1 0; justify-content: center; }
  /* v3.21 : 4 licences ne tiennent plus sur la largeur → rangée qui défile de côté (jusqu'au bord de l'écran) */
  .game-pick { overflow-x: auto; scrollbar-width: none; margin-right: -12px; padding-right: 12px; }
  .game-pick::-webkit-scrollbar { display: none; }
  .game-pick .chip { flex: 0 0 auto; white-space: nowrap; }
}
.logo-gen.logo-code { font-size: 1.35rem; letter-spacing: .02em; padding: 9px 16px; }
.set-hero .logo-gen.logo-code { font-size: 2rem; padding: 14px 24px; }
/* v2.86 : retours d'Arnaud sur One Piece */
/* visuels officiels des produits One Piece (pochette, boîte de deck) : plus hauts qu'un logo */
.set-card .logo-wrap:has(img[data-prod]) { height: 104px; }
.set-card .logo-wrap img[data-prod] { max-height: 98px; }
.set-hero img[data-prod] { max-height: 220px; }
/* progression par rareté repliable : en-tête cliquable avec les pastilles en résumé */
.rp-box > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-box > summary::-webkit-details-marker { display: none; }
.rp-box > summary h3 { margin: 0; }
.rp-box > summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .2s; }
.rp-box[open] > summary::after { transform: rotate(180deg); }
.rp-box[open] > summary .rp-mini { display: none; }
.rp-box[open] > summary { margin-bottom: 12px; }
.rp-mini { flex-basis: 100%; order: 2; }
.rp-box > summary::after { order: 1; }
.rp-mini .rarity-list { margin: 0; }
/* fiche d'une carte : place réservée et chargement visible pendant que l'image arrive */
#cd-holo.cd-loading { aspect-ratio: 63 / 88; background: var(--bg2); }
#cd-holo.cd-loading::before { content: ''; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--accent2); animation: spin .8s linear infinite; z-index: 1; }
#cd-holo.cd-loading img { opacity: 0; }
.cd-nav { flex-wrap: nowrap; gap: 8px; }
@media (max-width: 760px) {
  .bgtasks { left: 50%; right: auto; transform: translateX(-50%); min-width: 0; width: max-content; max-width: calc(100vw - 32px); }
  .set-hero > .favset.inline, .set-hero .favset.inline { position: absolute; top: 14px; left: 14px; margin: 0; z-index: 2; }
  .rp-box .rarity-progress { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .rp-box .rp-name { font-size: .8rem; gap: 5px; }
  .rp-box .rp-row .progress { height: 5px; }
  .cd-nav .lbl { display: none; }
  .cd-nav .btn { min-width: 44px; justify-content: center; }
}

/* ===== Combat par licence (v2.99) : choix de la licence, décor et habillage propres à chaque licence ===== */
/* choix de la licence */
.bt-lead { margin: 4px 0 14px; color: var(--muted); }
.bt-lics { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.bt-lic-tile { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr auto; align-items: center; gap: 10px 14px; min-height: 170px; padding: 16px; border-radius: 22px; overflow: hidden; text-decoration: none; color: #fff;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 30px rgba(0,0,0,.35); background: #10142a center / cover no-repeat; transition: transform .15s, box-shadow .15s; }
.bt-lic-tile.g-pokemon { background-image: linear-gradient(100deg, rgba(10,14,40,.92) 15%, rgba(10,14,40,.45) 60%, rgba(10,14,40,.2)), url(../img/combat/terrain-pokemon.svg); }
.bt-lic-tile.g-onepiece { background-image: linear-gradient(100deg, rgba(14,10,24,.92) 15%, rgba(14,10,24,.45) 60%, rgba(14,10,24,.2)), url(../img/combat/mer-onepiece.svg); }
.bt-lic-tile:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .bt-lic-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.45); } }
.bt-lic-ic { grid-row: 1; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; align-self: start; }
.g-pokemon .bt-lic-ic, .bt-hero.g-pokemon .bt-hero-ic { background: linear-gradient(180deg, #ff4a2b 0 50%, #fff 50%); color: #1a1a2e; box-shadow: 0 0 0 3px #1a1a2e inset, 0 6px 18px rgba(227,53,13,.45); }
.g-onepiece .bt-lic-ic, .bt-hero.g-onepiece .bt-hero-ic { background: radial-gradient(circle at 35% 30%, #ffe7a0, #e8b04a 55%, #9a5c12); color: #3b230f; box-shadow: 0 6px 18px rgba(232,176,74,.45); }
.bt-lic-ic .ic { display: block; }
.bt-lic-t { grid-row: 1; display: flex; flex-direction: column; gap: 3px; align-self: start; min-width: 0; }
.bt-lic-t b { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.g-onepiece .bt-lic-t b { color: #ffd479; font-family: Georgia, "Times New Roman", serif; }
.g-pokemon .bt-lic-t b { color: #ffcb05; text-shadow: 0 2px 0 #2a5cb8, 0 2px 12px rgba(0,0,0,.5); }
.bt-lic-t span { font-size: .9rem; color: rgba(255,255,255,.9); }
.bt-lic-t small { font-size: .76rem; color: rgba(255,255,255,.72); }
.bt-lic-go { grid-row: 1; font-size: 2rem; color: rgba(255,255,255,.75); align-self: center; }
.bt-lic-cards { grid-row: 2; grid-column: 1 / -1; display: flex; gap: 6px; }
.bt-lic-cards img, .bt-lic-cards i { width: 46px; aspect-ratio: 63/88; border-radius: 5px; object-fit: cover; display: block; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.bt-lic-cards i { border: 1px dashed rgba(255,255,255,.35); background: rgba(0,0,0,.25); }
.bt-soon { margin-top: 14px; }

/* accueil d'une licence : bandeau et couleurs */
.bt-page.g-pokemon { --acc: #e3350d; --acc2: #ffcb05; }
.bt-page.g-onepiece { --acc: #c0392b; --acc2: #e8b04a; }
.bt-hero { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 16px; margin: 4px 0 6px; border-radius: 20px; overflow: hidden; color: #fff;
  border: 1px solid rgba(255,255,255,.12); background: #10142a center 62% / cover no-repeat; }
.bt-hero.g-pokemon { background-image: linear-gradient(100deg, rgba(10,14,40,.9) 25%, rgba(10,14,40,.35)), url(../img/combat/terrain-pokemon.svg); }
.bt-hero.g-onepiece { background-image: linear-gradient(100deg, rgba(14,10,24,.9) 25%, rgba(14,10,24,.35)), url(../img/combat/mer-onepiece.svg); background-position: center 40%; }
.bt-hero-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
.bt-hero-ic .ic { display: block; }
.bt-hero-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bt-hero-t h1 { margin: 0; font-size: 1.6rem; line-height: 1.15; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.bt-hero-t .small { color: rgba(255,255,255,.82); }
.bt-hero-sw { align-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; text-decoration: none; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.25); white-space: nowrap; }
.bt-hero-sw .ic { display: block; }
.bt-sub { margin: 2px 0 0; }
.bt-page .bt-modes button.on { background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc2) 70%, var(--acc))); color: #fff; }
.bt-page .bt-step span { background: linear-gradient(120deg, var(--acc), var(--acc2)); }
.bt-page .bt-deck.on { border-color: color-mix(in srgb, var(--acc2) 75%, transparent); background: color-mix(in srgb, var(--acc2) 12%, transparent); }
.bt-page .bt-deck.on .bt-deck-ok { background: var(--acc); border-color: var(--acc); }
.bt-page .bt-tm.on { border-color: var(--acc2); box-shadow: 0 0 0 1px var(--acc2), 0 8px 26px color-mix(in srgb, var(--acc2) 22%, transparent); }
.bt-page .bt-tm-on { background: var(--acc); }
.bt-page.g-onepiece .bt-hero-t h1, .bt-page.g-onepiece .bt-step { font-family: Georgia, "Times New Roman", serif; letter-spacing: .3px; }
.bt-page.g-onepiece .bt-hero-t h1 { color: #ffd479; }
@media (max-width: 760px) {
  .bt-lics { grid-template-columns: 1fr; gap: 12px; }
  .bt-lic-tile { min-height: 150px; padding: 14px; border-radius: 20px; }
  .bt-lic-t b { font-size: 1.4rem; }
  .bt-hero { padding: 12px; gap: 10px; border-radius: 18px; }
  .bt-hero-t h1 { font-size: 1.3rem; }
  .bt-hero-ic { width: 40px; height: 40px; border-radius: 12px; }
}

/* écran de combat : décor de la licence */
.bt-ov > .bt-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #0b0d1c center / cover no-repeat; }
.bt-ov.g-pokemon::before, .bt-ov.g-pokemon::after, .bt-ov.g-onepiece::before, .bt-ov.g-onepiece::after { display: none; }
.bt-ov.g-pokemon > .bt-bg { background-image: linear-gradient(180deg, rgba(6,10,30,.62), rgba(6,10,30,.12) 22%, rgba(6,10,30,.06) 55%, rgba(6,10,30,.72) 92%), url(../img/combat/terrain-pokemon.svg); }
.bt-ov.g-onepiece > .bt-bg { background-image: linear-gradient(180deg, rgba(10,8,24,.6), rgba(10,8,24,.1) 22%, rgba(10,8,24,.08) 55%, rgba(10,8,24,.7) 92%), url(../img/combat/mer-onepiece.svg); }
/* dernier niveau : ciel d'orage */
.bt-ov.g-pokemon.boss > .bt-bg { filter: brightness(.62) saturate(.8) hue-rotate(200deg); }
.bt-ov.g-onepiece.boss > .bt-bg { filter: brightness(.6) saturate(.7) hue-rotate(-25deg); }
/* mouvement léger : nuages (Pokémon), reflets sur la mer (One Piece) */
.bt-ov > .bt-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.bt-ov.g-pokemon > .bt-bg::after { background: radial-gradient(ellipse 120px 22px at 20% 9%, rgba(255,255,255,.16), transparent 70%), radial-gradient(ellipse 160px 26px at 70% 14%, rgba(255,255,255,.13), transparent 70%); animation: btClouds 40s linear infinite alternate; }
.bt-ov.g-onepiece > .bt-bg::after { background: repeating-linear-gradient(176deg, transparent 0 22px, rgba(191,230,255,.08) 22px 24px); top: 36%; bottom: 10%; animation: btSea 7s ease-in-out infinite alternate; }
@keyframes btClouds { to { transform: translateX(14vw); } }
@keyframes btSea { to { transform: translate(-30px, 6px); } }
@media (prefers-reduced-motion: reduce) { .bt-ov > .bt-bg::after { animation: none !important; } }
.bt-ov.g-pokemon .bt-top, .bt-ov.g-onepiece .bt-top { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.bt-lic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none; }
.bt-lic .ic { display: block; }
.bt-ov.g-pokemon .bt-lic { background: linear-gradient(180deg, #ff4a2b 0 50%, #fff 50%); color: #1a1a2e; box-shadow: 0 0 0 2px #1a1a2e inset; }
.bt-ov.g-onepiece .bt-lic { background: radial-gradient(circle at 35% 30%, #ffe7a0, #e8b04a 55%, #9a5c12); color: #3b230f; }
.bt-ov.g-pokemon .bt-lvl, .bt-ov.g-onepiece .bt-lvl { padding: 3px 10px; border-radius: 999px; background: rgba(8,10,24,.6); }

/* Pokémon : boîtes claires façon jeu vidéo (nom, PV) et boîte de dialogue */
.bt-ov.g-pokemon .bt-info { background: linear-gradient(180deg, #fbfbf4, #ecebdc); color: #1b1d2a; border: 2px solid #2b2f45; box-shadow: 0 4px 0 #2b2f45, 0 10px 24px rgba(0,0,0,.35); }
.bt-ov.g-pokemon .bt-side.me .bt-info { border-radius: 14px 14px 4px 14px; }
.bt-ov.g-pokemon .bt-side.foe .bt-info { border-radius: 14px 14px 14px 4px; }
.bt-ov.g-pokemon .bt-stats { color: #4b5068; }
.bt-ov.g-pokemon .bt-stats b { color: #1b1d2a; }
.bt-ov.g-pokemon .bt-hp { background: #3b3f55; border: 2px solid #2b2f45; }
.bt-ov.g-pokemon .bt-loan { background: #dcdccb; color: #4b5068; }
.bt-ov.g-pokemon .bt-tag { background: #e2e1d0; color: #1b1d2a; }
.bt-ov.g-pokemon .bt-tag.sh { background: #cfe4ff; color: #123d7a; }
.bt-ov.g-pokemon .bt-tag.pw { background: #ffd3d6; color: #8a1020; }
.bt-ov.g-pokemon .bt-tag.st { background: #ffeab0; color: #6a4800; }
.bt-ov.g-pokemon .bt-log { background: #fbfbf4; color: #1b1d2a; border: 3px solid #2b2f45; border-radius: 10px; box-shadow: inset 0 0 0 3px #7fb3e8, 0 6px 18px rgba(0,0,0,.35); text-align: left; font-weight: 500; }
.bt-ov.g-pokemon .bt-log .bt-eff { color: #c2410c; }
.bt-ov.g-pokemon .bt-log .muted, .bt-ov.g-pokemon .bt-log .bt-coins { color: #5b6074; }
.bt-ov.g-pokemon .bt-banner.me { background: linear-gradient(180deg, #ff4a2b 0 50%, #f2f2f2 50%); color: #1a1a2e; border: 3px solid #1a1a2e; box-shadow: 0 10px 30px rgba(227,53,13,.45); text-shadow: 0 1px 0 #fff; }
.bt-ov.g-pokemon .bt-end.win .bt-end-box { border-color: #ffcb05; box-shadow: 0 0 40px rgba(255,203,5,.35); }

/* One Piece : avis de recherche (papier jauni), DON!! dorés, journal de bord */
.bt-ov.g-onepiece .bt-info { background: linear-gradient(180deg, #f4e6c4, #e3cc98); color: #3b230f; border: 2px solid #6b4423; box-shadow: 0 0 0 3px rgba(107,68,35,.25) inset, 0 10px 24px rgba(0,0,0,.4); border-radius: 6px; }
.bt-ov.g-onepiece .bt-name b { font-family: Georgia, "Times New Roman", serif; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.bt-ov.g-onepiece .bt-stats { color: #6b4a2a; }
.bt-ov.g-onepiece .bt-stats b { color: #3b230f; }
.bt-ov.g-onepiece .bt-hp { background: #5b3a1e; border: 1px solid #3b230f; }
.bt-ov.g-onepiece .bt-loan { background: #d8bf86; color: #5b3a1e; }
.bt-ov.g-onepiece .bt-tag { background: #dcc490; color: #3b230f; }
.bt-ov.g-onepiece .bt-tag.sh { background: #c9dcef; color: #123d7a; }
.bt-ov.g-onepiece .bt-tag.pw { background: #f2c4b8; color: #7a1a10; }
.bt-ov.g-onepiece .bt-pips i { border-radius: 3px; background: linear-gradient(135deg, #fff1b8, #f2b33d 55%, #a8600e); box-shadow: 0 0 0 1px #5a2a00, 0 0 6px rgba(242,179,61,.6); }
.bt-ov.g-onepiece .bt-pips b { color: #8a4b0c; }
.bt-ov.g-onepiece .bt-cost i { border-radius: 2px; background: #f2b33d; }
.bt-ov.g-onepiece .bt-log { background: linear-gradient(180deg, rgba(58,34,16,.94), rgba(40,22,10,.94)); color: #fbe9c4; border: 2px solid #c48a52; border-radius: 10px; font-family: Georgia, "Times New Roman", serif; }
.bt-ov.g-onepiece .bt-log .bt-eff { color: #ffd479; }
.bt-ov.g-onepiece .bt-banner.me { background: linear-gradient(135deg, #ffe7a0, #e8b04a 55%, #b5701c); color: #3b1d05; border: 3px solid #5a2a00; font-family: Georgia, "Times New Roman", serif; font-weight: 800; box-shadow: 0 10px 30px rgba(232,176,74,.5); }
.bt-ov.g-onepiece .bt-banner.foe { background: #2a1a0e; border-color: #c48a52; font-family: Georgia, "Times New Roman", serif; }
.bt-ov.g-onepiece .bt-end-t { font-family: Georgia, "Times New Roman", serif; }
.bt-ov.g-onepiece .bt-end.win .bt-end-box { border-color: #e8b04a; box-shadow: 0 0 40px rgba(232,176,74,.4); }
.bt-ov.g-onepiece .bt-played div { border-color: rgba(232,176,74,.6); }
.bt-ov.g-onepiece .bt-played small { color: #ffe7a0; }

.bt-lic-tile.g-onepiece { background-position: center 30%; }
@media (min-width: 761px) { .bt-hero { max-width: 760px; } }

/* mode Avancé : cartes encore cachées sur le banc adverse */
.bt-mini.hid b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 1.1rem; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); pointer-events: none; }

/* ===== Combat v3.00 : vrais dégâts sur les attaques, sac (Pokémon) / coffre (One Piece) ===== */
.bt-atk b { display: flex; flex-direction: column; gap: 1px; }
.bt-dtag { font-size: .66rem; font-weight: 800; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-dtag.up { color: #ffe27a; }
.bt-dtag.down { color: #9fb4d8; }
.bt-dmg s { font-size: .72rem; font-weight: 600; opacity: .55; margin-right: 2px; }
.bt-dmg.up { color: #ffe27a; text-shadow: 0 0 10px rgba(255,200,61,.55); }
.bt-dmg.down { color: #b8c6e0; }

/* bouton du sac / coffre (à la place de la rangée qui défilait) */
.bt-bagbtn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 14px; font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: transform .15s;
  border: 1px solid rgba(255,255,255,.18); background: rgba(12,14,30,.72); }
.bt-bagbtn:active { transform: scale(.98); }
.bt-bagbtn:disabled { opacity: .5; cursor: default; }
.bt-bagbtn.idle { opacity: .8; }
.bt-bagbtn.has { box-shadow: 0 0 0 2px rgba(255,203,5,.55), 0 0 18px rgba(255,203,5,.25); }
.bt-bagic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.1); }
.bt-bagic svg { display: block; }
.bt-bagtx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bt-bagtx b { font-size: .95rem; }
.bt-bagtx small { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-bagfan { flex: none; display: flex; padding-right: 6px; }
.bt-bagfan img { width: 26px; aspect-ratio: 63/88; object-fit: cover; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.5); margin-right: -10px; border: 1px solid rgba(255,255,255,.4); }
.bt-bagfan img:nth-child(odd) { transform: rotate(-6deg); } .bt-bagfan img:nth-child(even) { transform: rotate(5deg) translateY(-2px); }
.bt-ov.g-pokemon .bt-bagbtn { background: linear-gradient(180deg, #d9442f, #a8291a); border: 2px solid #1a1a2e; color: #fff; }
.bt-ov.g-pokemon .bt-bagbtn .bt-bagic { background: #fbfbf4; }
.bt-ov.g-pokemon .bt-bagbtn small { color: #ffe0d8; }
.bt-ov.g-onepiece .bt-bagbtn { background: linear-gradient(180deg, #7a4a22, #4e2c12); border: 2px solid #e8b04a; color: #fbe9c4; }
.bt-ov.g-onepiece .bt-bagbtn .bt-bagic { background: #2a1a0e; }
.bt-ov.g-onepiece .bt-bagbtn small { color: #e8cf9a; }

/* le sac ouvert : toutes les cartes en main d'un coup */
.bt-ov > .bt-sheet { position: absolute; inset: 0; z-index: 22; display: flex; align-items: flex-end; justify-content: center; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: rgba(6,8,18,.6); }
.bt-sheet-box { width: 100%; max-width: 620px; max-height: 82%; overflow: auto; border-radius: 22px; padding: 12px 12px 14px; background: #161a33; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.bt-sheet-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bt-sheet-h > div { flex: 1; display: flex; flex-direction: column; }
.bt-sheet-h b { font-family: var(--display); font-size: 1.2rem; }
.bt-sheet-h small { font-size: .76rem; opacity: .8; }
.bt-sheet-x { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; background: rgba(0,0,0,.25); color: inherit; }
.bt-sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.bt-sc { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 8px 10px; border-radius: 14px; font: inherit; color: inherit; text-align: center; cursor: pointer; transition: transform .15s;
  border: 2px solid transparent; background: rgba(255,255,255,.06); }
.bt-sc img { width: 78%; aspect-ratio: 63/88; object-fit: cover; border-radius: 7px; box-shadow: 0 6px 14px rgba(0,0,0,.45); margin-bottom: 4px; }
.bt-sc b { font-size: .8rem; line-height: 1.15; }
.bt-sc em { font-style: normal; font-weight: 800; font-size: .78rem; color: #ffcb05; }
.bt-sc small { font-size: .68rem; line-height: 1.25; opacity: .8; }
.bt-sc.ok { border-color: #3ddc97; box-shadow: 0 0 16px rgba(61,220,151,.3); }
.bt-sc.ok:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .bt-sc.ok:hover { transform: translateY(-3px); } }
.bt-sc.off { opacity: .5; filter: grayscale(.5); cursor: help; }
.bt-sheet-f { margin: 10px 2px 0; font-size: .76rem; opacity: .85; text-align: center; }
/* Pokémon : un sac en toile rouge, poche claire à l'intérieur */
.bt-ov.g-pokemon .bt-sheet-box { background: linear-gradient(180deg, #d9442f, #a8291a); border: 3px solid #1a1a2e; color: #fff; outline: 2px dashed rgba(255,255,255,.35); outline-offset: -9px; }
.bt-ov.g-pokemon .bt-sheet-h .bt-bagic { background: #fbfbf4; }
.bt-ov.g-pokemon .bt-sheet-grid { padding: 10px; border-radius: 14px; background: #fbfbf4; color: #1b1d2a; }
.bt-ov.g-pokemon .bt-sc { background: #ecebdc; }
.bt-ov.g-pokemon .bt-sc em { color: #c2410c; }
.bt-ov.g-pokemon .bt-sc.ok { border-color: #1f9e5a; }
/* One Piece : un coffre au trésor en bois cerclé d'or, velours rouge à l'intérieur */
.bt-ov.g-onepiece .bt-sheet-box { background: linear-gradient(180deg, #7a4a22, #4e2c12); border: 3px solid #e8b04a; color: #fbe9c4; box-shadow: inset 0 0 0 4px #3b230f, 0 20px 60px rgba(0,0,0,.6); }
.bt-ov.g-onepiece .bt-sheet-h b { font-family: Georgia, "Times New Roman", serif; color: #ffd479; }
.bt-ov.g-onepiece .bt-sheet-h .bt-bagic { background: #2a1a0e; }
.bt-ov.g-onepiece .bt-sheet-grid { padding: 10px; border-radius: 12px; background: radial-gradient(ellipse at 50% 0%, #8a1c1c, #4a0d10); border: 2px solid #c48a52; }
.bt-ov.g-onepiece .bt-sc { background: rgba(0,0,0,.22); }
.bt-ov.g-onepiece .bt-sc em { color: #ffd479; }
.bt-ov.g-onepiece .bt-sc.ok { border-color: #ffd479; box-shadow: 0 0 16px rgba(255,212,121,.35); }
@media (min-width: 761px) { .bt-ov > .bt-sheet { align-items: center; } .bt-sheet-box { max-width: 760px; padding: 16px; } .bt-sheet-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
@media (max-width: 760px) { .bt-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== v3.10 : Riftbound — même combat, habillage hextech (bleu nuit, rune cyan, filets dorés), décor : la Faille de l'invocateur ===== */
.bt-lic-tile.g-riftbound { background-image: linear-gradient(100deg, rgba(8,12,32,.92) 15%, rgba(8,12,32,.45) 60%, rgba(8,12,32,.2)), url(../img/combat/faille-riftbound.svg); background-position: center 60%; }
.g-riftbound .bt-lic-ic, .bt-hero.g-riftbound .bt-hero-ic { background: radial-gradient(circle at 35% 30%, #c9fbff, #3fd4e0 50%, #14527e); color: #07162e; box-shadow: 0 0 0 2px #c8a24a inset, 0 6px 18px rgba(63,212,224,.45); }
.g-riftbound .bt-lic-t b { color: #9ff6ff; letter-spacing: .5px; text-transform: uppercase; text-shadow: 0 0 12px rgba(95,227,239,.55), 0 2px 10px rgba(0,0,0,.5); }
.bt-page.g-riftbound { --acc: #1f7fb8; --acc2: #c8a24a; }
.bt-hero.g-riftbound { background-image: linear-gradient(100deg, rgba(8,12,32,.9) 25%, rgba(8,12,32,.35)), url(../img/combat/faille-riftbound.svg); background-position: center 55%; }
.bt-page.g-riftbound .bt-hero-t h1 { color: #9ff6ff; text-transform: uppercase; letter-spacing: .6px; }
.bt-ov.g-riftbound::before, .bt-ov.g-riftbound::after { display: none; }
.bt-ov.g-riftbound > .bt-bg { background-image: linear-gradient(180deg, rgba(6,10,30,.6), rgba(6,10,30,.1) 22%, rgba(6,10,30,.08) 55%, rgba(6,10,30,.72) 92%), url(../img/combat/faille-riftbound.svg); }
.bt-ov.g-riftbound.boss > .bt-bg { filter: brightness(.6) saturate(.8) hue-rotate(140deg); }
/* mouvement léger : la rivière de la Faille scintille */
.bt-ov.g-riftbound > .bt-bg::after { background: radial-gradient(ellipse 180px 60px at 50% 70%, rgba(159,246,255,.22), transparent 70%); animation: btRift 5s ease-in-out infinite alternate; }
@keyframes btRift { to { opacity: .35; transform: scale(1.08); } }
.bt-ov.g-riftbound .bt-top { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.bt-ov.g-riftbound .bt-lic { background: radial-gradient(circle at 35% 30%, #c9fbff, #3fd4e0 50%, #14527e); color: #07162e; box-shadow: 0 0 0 2px #c8a24a inset; }
.bt-ov.g-riftbound .bt-lvl { padding: 3px 10px; border-radius: 999px; background: rgba(8,10,24,.6); }
/* panneaux hextech : bleu nuit, filet doré, angles coupés */
.bt-ov.g-riftbound .bt-info { background: linear-gradient(180deg, rgba(16,34,70,.96), rgba(9,19,44,.96)); color: #e6f6ff; border: 2px solid #c8a24a; border-radius: 4px; box-shadow: 0 0 0 1px rgba(95,227,239,.35) inset, 0 10px 24px rgba(0,0,0,.45);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
.bt-ov.g-riftbound .bt-name b { text-transform: uppercase; letter-spacing: .4px; }
.bt-ov.g-riftbound .bt-stats { color: #9fc3dc; }
.bt-ov.g-riftbound .bt-stats b { color: #fff; }
.bt-ov.g-riftbound .bt-hp { background: #07162e; border: 1px solid #c8a24a; }
.bt-ov.g-riftbound .bt-loan { background: #1d3f7a; color: #bfe9ff; }
.bt-ov.g-riftbound .bt-tag { background: #1d3f7a; color: #dff6ff; }
.bt-ov.g-riftbound .bt-tag.sh { background: #135a6e; color: #c9fbff; }
.bt-ov.g-riftbound .bt-tag.pw { background: #6e2340; color: #ffd6e3; }
.bt-ov.g-riftbound .bt-pips i { transform: rotate(45deg) scale(.82); border-radius: 2px; background: linear-gradient(135deg, #e9fdff, #5fe3ef 55%, #1a7aa0); box-shadow: 0 0 0 1px #07162e, 0 0 6px rgba(95,227,239,.7); }
.bt-ov.g-riftbound .bt-pips b { color: #9ff6ff; }
.bt-ov.g-riftbound .bt-cost i { transform: rotate(45deg) scale(.8); border-radius: 1px; background: #5fe3ef; }
.bt-ov.g-riftbound .bt-log { background: linear-gradient(180deg, rgba(12,26,58,.95), rgba(7,16,38,.95)); color: #e6f6ff; border: 2px solid #c8a24a; border-radius: 6px; }
.bt-ov.g-riftbound .bt-log .bt-eff { color: #9ff6ff; }
.bt-ov.g-riftbound .bt-banner.me { background: linear-gradient(135deg, #c9fbff, #3fd4e0 50%, #1a7aa0); color: #04122a; border: 3px solid #c8a24a; text-transform: uppercase; letter-spacing: .6px; box-shadow: 0 10px 30px rgba(63,212,224,.45); }
.bt-ov.g-riftbound .bt-banner.foe { background: #0b1530; border-color: #c8a24a; }
.bt-ov.g-riftbound .bt-end.win .bt-end-box { border-color: #5fe3ef; box-shadow: 0 0 40px rgba(95,227,239,.4); }
.bt-ov.g-riftbound .bt-played div { border-color: rgba(95,227,239,.6); }
.bt-ov.g-riftbound .bt-played small { color: #c9fbff; }
/* grimoire (pioche du mode Avancé) */
.bt-ov.g-riftbound .bt-bagbtn { background: linear-gradient(180deg, #1d3f7a, #0b1d40); border: 2px solid #c8a24a; color: #e6f6ff; }
.bt-ov.g-riftbound .bt-bagbtn .bt-bagic { background: #07162e; }
.bt-ov.g-riftbound .bt-bagbtn small { color: #9fc3dc; }
.bt-ov.g-riftbound .bt-sheet-box { background: linear-gradient(180deg, #16305e, #0a1836); border: 3px solid #c8a24a; color: #e6f6ff; box-shadow: inset 0 0 0 4px #07162e, 0 20px 60px rgba(0,0,0,.6); }
.bt-ov.g-riftbound .bt-sheet-h b { color: #9ff6ff; text-transform: uppercase; letter-spacing: .5px; }
.bt-ov.g-riftbound .bt-sheet-h .bt-bagic { background: #07162e; }
.bt-ov.g-riftbound .bt-sheet-grid { padding: 10px; border-radius: 12px; background: radial-gradient(ellipse at 50% 0%, #14527e, #07162e); border: 2px solid rgba(95,227,239,.45); }
.bt-ov.g-riftbound .bt-sc { background: rgba(0,0,0,.22); }
.bt-ov.g-riftbound .bt-sc em { color: #9ff6ff; }
.bt-ov.g-riftbound .bt-sc.ok { border-color: #5fe3ef; box-shadow: 0 0 16px rgba(95,227,239,.35); }

/* ===== v3.21 : Lorcana — même combat, habillage livre de contes (nuit violette, encre magique, dorures), décor : le Grand Illuminarium ===== */
.bt-lic-tile.g-lorcana { background-image: linear-gradient(100deg, rgba(16,11,40,.92) 15%, rgba(16,11,40,.45) 60%, rgba(16,11,40,.2)), url(../img/combat/illuminarium-lorcana.svg); background-position: center 45%; }
.g-lorcana .bt-lic-ic, .bt-hero.g-lorcana .bt-hero-ic { background: radial-gradient(circle at 35% 30%, #efe7ff, #8f6bff 50%, #2a1f5c); color: #fff6dc; box-shadow: 0 0 0 2px #e7c36a inset, 0 6px 18px rgba(143,107,255,.45); }
.g-lorcana .bt-lic-t b { color: #f1dc9c; font-family: Georgia, "Times New Roman", serif; letter-spacing: .3px; text-shadow: 0 0 12px rgba(183,156,255,.5), 0 2px 10px rgba(0,0,0,.5); }
.bt-page.g-lorcana { --acc: #6a3fb5; --acc2: #e7c36a; }
.bt-hero.g-lorcana { background-image: linear-gradient(100deg, rgba(16,11,40,.9) 25%, rgba(16,11,40,.35)), url(../img/combat/illuminarium-lorcana.svg); background-position: center 40%; }
.bt-page.g-lorcana .bt-hero-t h1, .bt-page.g-lorcana .bt-step { font-family: Georgia, "Times New Roman", serif; letter-spacing: .3px; }
.bt-page.g-lorcana .bt-hero-t h1 { color: #f1dc9c; }
.bt-ov.g-lorcana::before, .bt-ov.g-lorcana::after { display: none; }
.bt-ov.g-lorcana > .bt-bg { background-image: linear-gradient(180deg, rgba(12,8,32,.6), rgba(12,8,32,.1) 22%, rgba(12,8,32,.08) 55%, rgba(12,8,32,.72) 92%), url(../img/combat/illuminarium-lorcana.svg); }
.bt-ov.g-lorcana.boss > .bt-bg { filter: brightness(.6) saturate(.8) hue-rotate(-40deg); }
/* mouvement léger : l'encre magique ondule */
.bt-ov.g-lorcana > .bt-bg::after { background: radial-gradient(ellipse 220px 50px at 50% 62%, rgba(183,156,255,.25), transparent 70%); animation: btInk 6s ease-in-out infinite alternate; }
@keyframes btInk { to { opacity: .35; transform: translateX(4%) scale(1.1); } }
.bt-ov.g-lorcana .bt-top { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.bt-ov.g-lorcana .bt-lic { background: radial-gradient(circle at 35% 30%, #efe7ff, #8f6bff 50%, #2a1f5c); color: #fff6dc; box-shadow: 0 0 0 2px #e7c36a inset; }
.bt-ov.g-lorcana .bt-lvl { padding: 3px 10px; border-radius: 999px; background: rgba(12,8,32,.6); }
/* panneaux façon page de livre de contes : parchemin, filet doré */
.bt-ov.g-lorcana .bt-info { background: linear-gradient(180deg, #f6ecd2, #e8d6aa); color: #2a1f5c; border: 2px solid #b58a2e; border-radius: 12px; box-shadow: 0 0 0 3px rgba(106,63,181,.25) inset, 0 10px 24px rgba(0,0,0,.4); }
.bt-ov.g-lorcana .bt-name b { font-family: Georgia, "Times New Roman", serif; font-weight: 800; letter-spacing: .2px; }
.bt-ov.g-lorcana .bt-stats { color: #5b4a7a; }
.bt-ov.g-lorcana .bt-stats b { color: #2a1f5c; }
.bt-ov.g-lorcana .bt-hp { background: #2a1f5c; border: 1px solid #b58a2e; }
.bt-ov.g-lorcana .bt-loan { background: #d9c8ff; color: #2a1f5c; }
.bt-ov.g-lorcana .bt-tag { background: #e3d3a6; color: #2a1f5c; }
.bt-ov.g-lorcana .bt-tag.sh { background: #cfe0f2; color: #1d3f7a; }
.bt-ov.g-lorcana .bt-tag.pw { background: #f2c4cf; color: #7a1a33; }
/* encre = petits hexagones violets */
.bt-ov.g-lorcana .bt-pips i { border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(135deg, #efe7ff, #8f6bff 55%, #4b2c9e); }
.bt-ov.g-lorcana .bt-pips b { color: #6a3fb5; }
.bt-ov.g-lorcana .bt-cost i { border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #8f6bff; }
.bt-ov.g-lorcana .bt-log { background: linear-gradient(180deg, rgba(36,26,80,.95), rgba(22,15,54,.95)); color: #f6ecd2; border: 2px solid #e7c36a; border-radius: 10px; font-family: Georgia, "Times New Roman", serif; }
.bt-ov.g-lorcana .bt-log .bt-eff { color: #f1dc9c; }
.bt-ov.g-lorcana .bt-banner.me { background: linear-gradient(135deg, #efe7ff, #8f6bff 50%, #4b2c9e); color: #fff6dc; border: 3px solid #e7c36a; font-family: Georgia, "Times New Roman", serif; font-weight: 800; box-shadow: 0 10px 30px rgba(143,107,255,.45); }
.bt-ov.g-lorcana .bt-banner.foe { background: #1a1440; border-color: #e7c36a; font-family: Georgia, "Times New Roman", serif; }
.bt-ov.g-lorcana .bt-end-t { font-family: Georgia, "Times New Roman", serif; }
.bt-ov.g-lorcana .bt-end.win .bt-end-box { border-color: #e7c36a; box-shadow: 0 0 40px rgba(231,195,106,.4); }
.bt-ov.g-lorcana .bt-played div { border-color: rgba(183,156,255,.6); }
.bt-ov.g-lorcana .bt-played small { color: #efe7ff; }
/* grimoire (pioche du mode Avancé) */
.bt-ov.g-lorcana .bt-bagbtn { background: linear-gradient(180deg, #3a2a7a, #1a1440); border: 2px solid #e7c36a; color: #f6ecd2; }
.bt-ov.g-lorcana .bt-bagbtn .bt-bagic { background: #120d2e; }
.bt-ov.g-lorcana .bt-bagbtn small { color: #d9c8ff; }
.bt-ov.g-lorcana .bt-sheet-box { background: linear-gradient(180deg, #2f2366, #160f36); border: 3px solid #e7c36a; color: #f6ecd2; box-shadow: inset 0 0 0 4px #120d2e, 0 20px 60px rgba(0,0,0,.6); }
.bt-ov.g-lorcana .bt-sheet-h b { font-family: Georgia, "Times New Roman", serif; color: #f1dc9c; }
.bt-ov.g-lorcana .bt-sheet-h .bt-bagic { background: #120d2e; }
.bt-ov.g-lorcana .bt-sheet-grid { padding: 10px; border-radius: 12px; background: radial-gradient(ellipse at 50% 0%, #4b3a96, #160f36); border: 2px solid rgba(231,195,106,.45); }
.bt-ov.g-lorcana .bt-sc { background: rgba(0,0,0,.22); }
.bt-ov.g-lorcana .bt-sc em { color: #f1dc9c; }
.bt-ov.g-lorcana .bt-sc.ok { border-color: #e7c36a; box-shadow: 0 0 16px rgba(231,195,106,.35); }

/* ===== v3.26 : Yu-Gi-Oh! — même combat, habillage Égypte ancienne (or, cuivre, nuit pourpre), décor : arène de duel dans le désert ===== */
.bt-lic-tile.g-yugioh { background-image: linear-gradient(100deg, rgba(28,12,8,.92) 15%, rgba(28,12,8,.45) 60%, rgba(28,12,8,.2)), url(../img/combat/arene-yugioh.svg); background-position: center 55%; }
.g-yugioh .bt-lic-ic, .bt-hero.g-yugioh .bt-hero-ic { background: radial-gradient(circle at 35% 30%, #fff1c2, #e2b54a 50%, #7a3b1d); color: #2a1206; box-shadow: 0 0 0 2px #5a2a12 inset, 0 6px 18px rgba(226,181,74,.45); }
.g-yugioh .bt-lic-t b { color: #ffd36b; letter-spacing: .6px; text-transform: uppercase; text-shadow: 0 0 12px rgba(255,154,60,.5), 0 2px 10px rgba(0,0,0,.5); }
.bt-page.g-yugioh { --acc: #a0612f; --acc2: #e2b54a; }
.bt-hero.g-yugioh { background-image: linear-gradient(100deg, rgba(28,12,8,.9) 25%, rgba(28,12,8,.35)), url(../img/combat/arene-yugioh.svg); background-position: center 60%; }
.bt-page.g-yugioh .bt-hero-t h1 { color: #ffd36b; text-transform: uppercase; letter-spacing: .6px; }
.bt-ov.g-yugioh::before, .bt-ov.g-yugioh::after { display: none; }
.bt-ov.g-yugioh > .bt-bg { background-image: linear-gradient(180deg, rgba(20,8,24,.55), rgba(20,8,24,.08) 22%, rgba(20,8,24,.05) 55%, rgba(28,12,8,.7) 92%), url(../img/combat/arene-yugioh.svg); }
.bt-ov.g-yugioh.boss > .bt-bg { filter: brightness(.55) saturate(1.2) hue-rotate(-20deg); }
/* mouvement léger : le terrain de duel s'illumine */
.bt-ov.g-yugioh > .bt-bg::after { background: radial-gradient(ellipse 260px 50px at 50% 80%, rgba(95,240,255,.22), transparent 70%); animation: btDuel 4s ease-in-out infinite alternate; }
@keyframes btDuel { to { opacity: .4; transform: scale(1.08); } }
.bt-ov.g-yugioh .bt-top { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.bt-ov.g-yugioh .bt-lic { background: radial-gradient(circle at 35% 30%, #fff1c2, #e2b54a 50%, #7a3b1d); color: #2a1206; box-shadow: 0 0 0 2px #5a2a12 inset; }
.bt-ov.g-yugioh .bt-lvl { padding: 3px 10px; border-radius: 999px; background: rgba(28,12,8,.6); }
/* panneaux façon carte de monstre : cadre cuivré, nom en relief */
.bt-ov.g-yugioh .bt-info { background: linear-gradient(180deg, #e9c48f, #c98a52); color: #2a1206; border: 3px solid #5a2e12; border-radius: 4px; box-shadow: 0 0 0 2px #e2b54a inset, 0 10px 24px rgba(0,0,0,.45); }
.bt-ov.g-yugioh .bt-name b { font-family: Georgia, "Times New Roman", serif; font-variant: small-caps; font-weight: 800; letter-spacing: .3px; }
.bt-ov.g-yugioh .bt-stats { color: #5a2e12; }
.bt-ov.g-yugioh .bt-stats b { color: #2a1206; }
.bt-ov.g-yugioh .bt-hp { background: #2a1206; border: 1px solid #e2b54a; }
.bt-ov.g-yugioh .bt-loan { background: #f4e2a8; color: #5a2e12; }
.bt-ov.g-yugioh .bt-tag { background: #f4e2a8; color: #5a2e12; }
.bt-ov.g-yugioh .bt-tag.sh { background: #c9e6ef; color: #133a4a; }
.bt-ov.g-yugioh .bt-tag.pw { background: #f2c4b0; color: #6e1d0b; }
/* énergie = étoiles de niveau (ronds dorés) */
.bt-ov.g-yugioh .bt-pips i { background: radial-gradient(circle at 35% 30%, #fff1c2, #ff9a3c 55%, #b5451a); box-shadow: 0 0 0 1px #5a2e12; }
.bt-ov.g-yugioh .bt-pips b { color: #ffd36b; }
.bt-ov.g-yugioh .bt-cost i { background: #ff9a3c; }
.bt-ov.g-yugioh .bt-log { background: linear-gradient(180deg, rgba(42,18,6,.95), rgba(24,10,4,.95)); color: #f8e6c2; border: 2px solid #e2b54a; border-radius: 4px; }
.bt-ov.g-yugioh .bt-log .bt-eff { color: #ffd36b; }
.bt-ov.g-yugioh .bt-banner.me { background: linear-gradient(135deg, #fff1c2, #e2b54a 50%, #a0612f); color: #2a1206; border: 3px solid #5a2e12; text-transform: uppercase; letter-spacing: .6px; box-shadow: 0 10px 30px rgba(226,181,74,.45); }
.bt-ov.g-yugioh .bt-banner.foe { background: #2a1206; border-color: #e2b54a; }
.bt-ov.g-yugioh .bt-end.win .bt-end-box { border-color: #e2b54a; box-shadow: 0 0 40px rgba(226,181,74,.4); }
.bt-ov.g-yugioh .bt-played div { border-color: rgba(255,154,60,.6); }
.bt-ov.g-yugioh .bt-played small { color: #fff1c2; }
/* deck (pioche du mode Avancé) */
.bt-ov.g-yugioh .bt-bagbtn { background: linear-gradient(180deg, #7a3b1d, #3a1a0c); border: 2px solid #e2b54a; color: #f8e6c2; }
.bt-ov.g-yugioh .bt-bagbtn .bt-bagic { background: #1c0c06; }
.bt-ov.g-yugioh .bt-bagbtn small { color: #f4e2a8; }
.bt-ov.g-yugioh .bt-sheet-box { background: linear-gradient(180deg, #5a2a12, #24100a); border: 3px solid #e2b54a; color: #f8e6c2; box-shadow: inset 0 0 0 4px #1c0c06, 0 20px 60px rgba(0,0,0,.6); }
.bt-ov.g-yugioh .bt-sheet-h b { color: #ffd36b; text-transform: uppercase; letter-spacing: .5px; }
.bt-ov.g-yugioh .bt-sheet-h .bt-bagic { background: #1c0c06; }
.bt-ov.g-yugioh .bt-sc { background: rgba(0,0,0,.22); }
.bt-ov.g-yugioh .bt-sc em { color: #ffd36b; }
.bt-ov.g-yugioh .bt-sc.ok { border-color: #e2b54a; box-shadow: 0 0 16px rgba(226,181,74,.35); }

/* ===== v3.11–v3.12 : Capturer — choix de la licence d'abord : grille compacte (d'autres licences arriveront) ===== */
.lic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; max-width: 900px; }
.lic-tile { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 16px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); transition: transform .12s, border-color .12s; }
.lic-tile:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { a.lic-tile:hover { border-color: rgba(255,255,255,.3); transform: translateY(-2px); } }
.lic-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--g, #2a2f52); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.lic-ic .ic { display: block; }
.lic-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lic-t b { font-family: var(--display); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lic-t small { font-size: .76rem; color: var(--muted); }
.lic-tile.last { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.lic-last { position: absolute; top: -7px; right: 10px; font-style: normal; font-size: .66rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; }
/* « Toutes les licences » : bandeau sur toute la largeur, couleurs de toutes les licences */
.lic-tile.lic-auto { grid-column: 1 / -1; padding: 12px 14px; border-color: rgba(124,92,255,.55);
  background: radial-gradient(ellipse at 90% 0%, rgba(52,213,255,.25), transparent 60%), radial-gradient(ellipse at 60% 120%, rgba(255,79,163,.22), transparent 60%), linear-gradient(120deg, #1d1a3a, #241d4d 60%, #12304f); }
.lic-auto .lic-ic { width: 44px; height: 44px; background: linear-gradient(135deg, #ffd23f, #ff4fa3 40%, #7c5cff 70%, #34d5ff); }
.lic-auto .lic-t b { font-size: 1.08rem; }
.lic-tile.soon { opacity: .45; filter: grayscale(.6); }
.sc-autogame { margin: -6px 0 12px; }
.sc-autogame .ic { vertical-align: -2px; }
@media (max-width: 760px) { .lic-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .lic-tile { padding: 9px 10px; gap: 8px; } .lic-ic { width: 36px; height: 36px; } }
.scan-empty .se-lic { font-style: normal; font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--muted); }
.lic-n { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.lic-n .ic { flex: none; opacity: .8; }

/* ===== v3.13 : Capturer — choix du mode et de la certification plus clairs ===== */
.mode-card .mc-short { display: none; }
.mode-hint { margin: -2px 2px 12px; font-size: .8rem; line-height: 1.35; color: var(--muted); }
.mode-hint b { color: var(--text); }
@media (max-width: 760px) {
  /* onglet = icône + nom, puis une précision (« 1 carte », « 1 page », « À la suite ») */
  .mode-card { flex-wrap: wrap; row-gap: 0; padding: 7px 4px 6px; }
  .mode-card .mc-txt { align-items: center; }
  .mode-card .mc-short { display: block; font-size: .66rem; line-height: 1.1; opacity: .75; }
  .mode-card .mc-ico { align-self: flex-start; margin-top: 1px; }
}
/* visuel de série recadré (sachet Riftbound) : même place qu'un visuel de produit One Piece */
.logo-pack { display: block; height: 98px; max-width: 100%; border-radius: 6px; background: #12162a no-repeat; box-shadow: 0 4px 10px rgba(0,0,0,.45); }
.set-card .logo-wrap:has(.logo-pack) { height: 104px; }
.logo-pack.big { height: 200px; margin: 0 auto; }
.gc-logo .logo-pack { height: 60px; }
@media (max-width: 760px) { .set-card .logo-wrap:has(.logo-pack) { height: 96px; } .set-card .logo-pack { height: 88px; } .logo-pack.big { height: 160px; } }

/* ===== v3.15 : format du classeur en tuiles dessinées ; Capturer sans défilement avant la photo ===== */
html.scan-still, html.scan-still body { overflow: hidden; overscroll-behavior: none; }
.fmt-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; max-width: 520px; }
.fmt-pick.off { opacity: .5; pointer-events: none; }
.fp-opt { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; text-align: left; cursor: pointer; }
.fp-opt:hover { border-color: rgba(124,92,255,.6); }
.fp-opt.on { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--holo) border-box; color: var(--text); box-shadow: 0 6px 18px rgba(124,92,255,.22); }
.fp-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.fp-t b { font-family: var(--display); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.fp-t small { font-size: .7rem; opacity: .75; }
/* dessin du format : une page = des pochettes au format carte (63 × 88) */
.fp-ico { display: flex; gap: 2px; flex: none; }
.fp-page { display: grid; grid-template-columns: repeat(3, 6px); grid-auto-rows: 8px; gap: 1.5px; padding: 2px; border: 1px solid currentColor; border-radius: 3px; }
.fp-2x2 .fp-page { grid-template-columns: repeat(2, 9.5px); grid-auto-rows: 13px; }
.fp-double .fp-page { grid-template-columns: repeat(3, 4px); grid-auto-rows: 5.5px; gap: 1px; }
.fp-page i { border-radius: 1.5px; background: currentColor; opacity: .45; }
.fp-opt.on .fp-page { border-color: #ffd23f; }
.fp-opt.on .fp-page i { background: var(--holo); opacity: 1; }
@media (max-width: 760px) {
  .sc-opts .fmt-pick { grid-column: 1 / -1; max-width: none; }
  .fp-opt { flex-direction: column; justify-content: center; gap: 4px; padding: 7px 4px 6px; text-align: center; }
  .fp-ico { height: 34px; align-items: center; }
  .fp-t small { display: none; }
  .fp-t b { font-size: .84rem; }
}

/* ===== v3.16 : certification en tuiles (même place et même forme que le format du classeur, couleurs de la certification) ===== */
.cert-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface2); color: #c8ccea; }
.cp-ic .ic { display: block; }
.cp-opt.on { background: rgba(255,255,255,.07); border-color: #95a1bd; box-shadow: none; }
.cp-opt.on .cp-ic { background: #c8ccea; color: #0c0e19; }
.cp-opt.cp-yes.on { background: rgba(61,220,151,.14); border-color: #3ddc97; box-shadow: 0 6px 18px rgba(61,220,151,.18); }
.cp-opt.cp-yes.on .cp-ic { background: #3ddc97; }
/* les 3 gestes de la certification, dans le cadre vide */
.se-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; font-size: .8rem; color: var(--muted); }
.se-steps li { display: flex; align-items: center; gap: 8px; }
.se-steps i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .72rem; background: #3ddc97; color: #0c0e19; }
.se-steps b { color: var(--text); }
@media (max-width: 760px) {
  .cp-opt { flex-direction: row; gap: 8px; padding: 8px 10px; }
  .cp-opt .fp-t { text-align: left; }
  .cp-opt .fp-t small { display: block; font-size: .66rem; }
}
/* petit écran : le cadre vide rétrécit (fitScreen) → le dessin rapetisse, puis disparaît, pour que le texte reste entier */
.scan-view:has(> .scan-empty) { container-type: size; }
@container (max-height: 360px) {
  .scan-empty { gap: 6px; padding: 12px; }
  .se-frame:not(.grid) { width: 60px; height: 84px; margin-bottom: 0; }
  .se-frame:not(.grid) .ic { width: 28px; height: 28px; }
  .se-frame.grid { transform: scale(.75); margin: -20px 0 -22px; }
}
@container (max-height: 270px) { .se-frame { display: none !important; } }

/* ===== v3.30 : beaucoup de licences → tout visible d'un coup d'œil sur téléphone (plus de défilement de côté) ===== */
@media (max-width: 760px) {
  /* Accueil : grille compacte, 2 par ligne (icône, nom, nombre de cartes) */
  .licences { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .licences .game-tile, .licences .game-tile:not(.soon), .licences .game-tile.soon { grid-column: auto; flex-direction: row; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 16px; min-width: 0; }
  .licences .game-tile .gicon, .licences .game-tile.soon .gicon { width: 38px; height: 38px; border-radius: 11px; }
  .licences .game-tile .gicon svg { width: 21px; height: 21px; }
  .licences .game-tile h3, .licences .game-tile.soon h3 { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .licences .game-tile .gtxt { flex: 1; }
  .licences .game-tile .gtxt .small, .licences .game-tile.soon .gtxt .small { font-size: .74rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* séries qui défilent de côté : place pour l'étiquette « Complétée » qui dépasse en haut */
  .grid-auto.hscroll { padding-top: 11px; }
  .grid-auto.hscroll .set-card .badge-complete { right: 6px; }

  /* Explorer, Objectifs : la licence choisie, qui déplie toutes les licences */
  .game-sw { margin: 0 0 12px; }
  .game-sw > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); -webkit-tap-highlight-color: transparent; }
  .game-sw > summary::-webkit-details-marker { display: none; }
  .game-sw > summary .lic-ic { width: 32px; height: 32px; border-radius: 10px; }
  .game-sw > summary b { font-family: var(--display); font-size: 1rem; }
  .game-sw .gs-ch { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(124,92,255,.22); color: var(--text); }
  .game-sw[open] > summary { border-color: rgba(124,92,255,.6); }
  .game-sw[open] .gs-ch { background: var(--accent); color: #fff; }
  .game-sw .lic-grid { margin-top: 8px; }
  .game-sw .lic-tile.last { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }

  /* Combat : bandeaux plus bas (même décor), toutes les licences tiennent sur l'écran */
  .bt-lics { gap: 8px; }
  .bt-lic-tile { grid-template-columns: auto 1fr auto auto; grid-template-rows: auto; min-height: 0; gap: 10px; padding: 10px 12px; border-radius: 18px; }
  .bt-lic-ic { width: 42px; height: 42px; border-radius: 13px; align-self: center; }
  .bt-lic-ic svg { width: 20px; height: 20px; }
  .bt-lic-t { align-self: center; gap: 1px; }
  .bt-lic-t b { font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bt-lic-t span { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bt-lic-t small { font-size: .68rem; }
  .bt-lic-cards { grid-row: 1; grid-column: 3; gap: 0; }
  .bt-lic-cards img, .bt-lic-cards i { width: 26px; border-radius: 3px; }
  .bt-lic-cards > * + * { margin-left: -9px; }
  .bt-lic-go { grid-column: 4; font-size: 1.5rem; }
}

/* ===== Paramètres › Scanner (v3.36) : préparation, carnet des scans ratés ===== */
.prep-list { display: grid; gap: 4px; }
.prep-row { display: flex; gap: 6px; align-items: baseline; }
.prep-row > span:first-child { width: 1.1em; text-align: center; color: var(--muted); }
.prep-row.ok > span:first-child { color: var(--ok); font-weight: 700; }
.log-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin: 6px 0; }
.log-it { margin: 0; min-width: 0; }
.log-it img { width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 6px; background: rgba(255,255,255,.06); display: block; }
.log-it figcaption { font-size: .7rem; line-height: 1.2; color: var(--muted); margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sc-scanlbl.sc-confirm { top: auto; bottom: 14px; }

/* ===== v3.33 : appli toujours en hauteur — téléphone tenu en largeur → « Tourne ton téléphone » (le manifeste verrouille l'appli installée) ===== */
.rotate-msg { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rotate-msg { display: flex; position: fixed; inset: 0; z-index: 9999; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center;
    background: radial-gradient(ellipse at 50% 30%, #241d4d, #0c0e19 70%); color: var(--text); }
  .rotate-msg b { font-family: var(--display); font-size: 1.3rem; }
  .rotate-msg span:last-child { color: var(--muted); font-size: .9rem; }
  .rot-phone { width: 34px; height: 58px; margin-bottom: 10px; border-radius: 8px; border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(124,92,255,.5); animation: rotPhone 2.4s ease-in-out infinite; }
  @keyframes rotPhone { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }
  html, body { overflow: hidden; }
}