:root { --bg:#f4f2ee; --surface:#ffffff; --surface2:#ebe8e2; --ink:#1b1a1f; --muted:#6c6873; --line:#dedad3; --accent:#5b4bdb; --accent-ink:#fff; --good:#1f8a5b; --bad:#c2413b; --common:#8d8a93; --uncommon:#2f9e62; --rare:#2f74d0; --epic:#8d4fd8; --legendary:#d99a1e; --radius:14px; --shadow:0 2px 10px rgba(20,18,30,.08); --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } @media (prefers-color-scheme: dark) { :root { --bg:#121117; --surface:#1c1b23; --surface2:#26242f; --ink:#efedf5; --muted:#a09cab; --line:#302e3a; --accent:#8b7cff; --accent-ink:#130f2a; --shadow:0 2px 12px rgba(0,0,0,.35); color-scheme:dark; } } /* fond de l'application (thème sombre) : une image fixe derrière tout le contenu ; en thème clair, fond uni (le texte foncé posé directement sur ce fond violet serait illisible) */ @media (prefers-color-scheme: dark) { /* le fond uni passe sur : celui de serait peint par-dessus l'image */ html body, html body:has(.packpage) { background:transparent } body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:url("../img/fond.webp") center 30% / cover no-repeat } } /* écran plus large que haut (ordinateur, tablette à l'horizontale) : la version paysage */ @media (prefers-color-scheme: dark) and (min-aspect-ratio: 1/1) { body::before { background-image:url("../img/fond-large.webp"); background-position:center 40% } } * { box-sizing:border-box; -webkit-tap-highlight-color:transparent } html, body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } button, input, select { font:inherit; color:inherit } a { color:var(--accent) } [hidden] { display:none !important } /* ---------- structure */ .top { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px; padding:calc(10px + var(--safe-t)) 16px 10px; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line) } .logo { font-weight:800; letter-spacing:-.02em; font-size:18px } .logo b { color:var(--accent) } .credits { margin-left:auto; display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); padding:5px 11px; border-radius:999px; font-weight:700; font-variant-numeric:tabular-nums } .coin { width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #ffe08a, #d99a1e 70%); box-shadow:inset 0 0 0 1.5px #b67d0f } main { max-width:720px; margin:0 auto; padding:16px 16px calc(96px + var(--safe-b)) } nav.tabs { position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:repeat(6,1fr); background:var(--surface); border-top:1px solid var(--line); padding-bottom:var(--safe-b) } nav.tabs button { border:0; background:none; padding:11px 0 12px; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11px; color:var(--muted); cursor:pointer; position:relative } nav.tabs button svg { width:24px; height:24px } nav.tabs button.on { color:var(--accent); font-weight:600 } @media (max-width:1023px) { nav.tabs button.on::after { content:""; position:absolute; bottom:4px; width:40%; height:3px; border-radius:3px; background:var(--accent) } } nav.tabs .dot { position:absolute; top:6px; left:calc(50% + 8px); min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--bad); color:#fff; font-size:10px; line-height:16px; font-weight:700 } h1 { font-size:24px; margin:4px 0 4px; letter-spacing:-.02em } h2 { font-size:17px; margin:22px 0 10px } .muted { color:var(--muted) } .small { font-size:13px } /* ---------- éléments */ .btn { border:0; border-radius:12px; padding:12px 18px; font-weight:650; cursor:pointer; background:var(--surface2); display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px } .btn.primary { background:var(--accent); color:var(--accent-ink) } .btn.good { background:var(--good); color:#fff } .btn.bad { background:var(--bad); color:#fff } .btn.block { width:100% } .btn:disabled { opacity:.5; cursor:default } .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap } .field { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface); min-height:44px; outline:none } .field:focus { border-color:var(--accent) } .chips { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none } .chips::-webkit-scrollbar { display:none } .chip { border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 12px; white-space:nowrap; cursor:pointer; font-size:13.5px } .chip.on { background:var(--ink); color:var(--bg); border-color:var(--ink) } .panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow) } .toolbar { display:grid; gap:10px; margin:12px 0 } .toolbar .line { display:flex; gap:8px } .toolbar select { flex:none; width:auto } .empty { text-align:center; padding:40px 16px; color:var(--muted) } .toast { position:fixed; left:50%; bottom:calc(92px + var(--safe-b)); transform:translateX(-50%); z-index:80; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:12px; font-weight:600; box-shadow:var(--shadow); max-width:calc(100vw - 32px); text-align:center } .toast.err { background:var(--bad); color:#fff } .nav-logo, .nav-credits, .nav-level { display:none } /* icônes au trait */ .ico-svg { display:inline-block; vertical-align:-3px; flex:none } .btn .ico-svg { margin-right:2px } /* lisible par les lecteurs d'écran, invisible à l'écran */ .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }