/* ==========================================================================
   Patelin : feuille de style
   Direction : signalétique routière française × papiers officiels.
   Une scène de nuit, un seul accent (rouge panneau), des cartes en papier
   guilloché teinté par région.

   Formes : boutons en pilule, panneaux 16 px, champs 12 px, cartes 4,5 cqw.
   Couches (z-index) : topbar 20 · nav 30 · stage 50 · sheets 60 · toasts 70.
   ========================================================================== */

:root {
  color-scheme: dark;

  --bg: oklch(0.165 0.014 262);
  --bg-elev: oklch(0.205 0.016 262);
  --bg-elev-2: oklch(0.245 0.018 262);
  --line: oklch(0.33 0.016 262);
  --line-soft: oklch(0.27 0.015 262);
  --ink: oklch(0.965 0.005 95);
  --ink-2: oklch(0.82 0.012 262);
  --ink-3: oklch(0.66 0.016 262);

  --signal: oklch(0.555 0.205 27);
  --signal-hi: oklch(0.625 0.205 28);
  --signal-lo: oklch(0.47 0.18 27);
  --on-signal: oklch(0.99 0.003 95);

  --paper: oklch(0.975 0.006 250);
  --sign-white: oklch(0.985 0.002 95);
  --sign-ink: oklch(0.2 0.01 260);

  /* raretés (gardées en phase avec js/data.js) */
  --t0: oklch(0.76 0.012 262);
  --t1: oklch(0.76 0.14 152);
  --t2: oklch(0.73 0.13 242);
  --t3: oklch(0.74 0.17 350);
  --t4: oklch(0.7 0.16 302);
  --t5: oklch(0.78 0.15 62);
  --t6: oklch(0.86 0.14 92);

  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-panel: 16px;
  --r-field: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --gutter: 16px;
  --topbar-h: 60px;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--ink-3); }
.ico { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 80;
  background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 999px;
  text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }
.noscript { padding: 24px var(--gutter); color: var(--ink-2); }

/* ---------------------------------------------------------------- panneau d'agglomération */
.sign {
  display: inline-grid;
  background: var(--sign-white);
  border-radius: 0.34em;
  padding: 0.14em;
  color: var(--sign-ink);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 6px 18px -8px rgb(0 0 0 / 0.55);
}
.sign__in {
  display: grid;
  place-items: center;
  border: 0.16em solid var(--signal);
  border-radius: 0.22em;
  padding: 0.12em 0.5em 0.1em;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.02em;
}
.sign--brand { font-size: 17px; }
.sign--brand .sign__in { padding: 0.18em 0.55em 0.12em; }

/* ---------------------------------------------------------------- layout */
.app { min-height: 100dvh; padding-bottom: calc(var(--nav-h) + var(--safe-b)); }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) var(--gutter) 0;
  isolation: isolate;
  border-bottom: 1px solid color-mix(in oklch, var(--line-soft) 60%, transparent);
}
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.brand { display: inline-flex; text-decoration: none; border-radius: 8px; }
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-top: 1px solid var(--line-soft);
}
.nav__link {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-3); text-decoration: none;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em;
  transition: color 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.nav__link .ico { width: 24px; height: 24px; }
.nav__ico { position: relative; display: grid; place-items: center; }
.nav__label { white-space: nowrap; }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px;
  transform: translateX(-50%); border-radius: 0 0 3px 3px; background: var(--signal);
}
.nav__link:active { transform: translateY(1px); }

main, main:focus, main:focus-visible { outline: none; } /* cible du lien d’évitement, focalisée à chaque changement de vue */
.view { animation: view-in 0.45s var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 20px var(--gutter) 40px; }
.wrap > *, .sheet__body > *, .detail > * { min-width: 0; }
.wrap--narrow { max-width: 760px; }

/* ---------------------------------------------------------------- boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid transparent; background: var(--bg-elev-2); color: var(--ink);
  font-weight: 600; font-size: 15px; letter-spacing: 0.005em; white-space: nowrap;
  text-decoration: none;
  transition: transform 0.18s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn .ico { width: 20px; height: 20px; }
.btn--primary {
  background: var(--signal); color: var(--on-signal);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset, 0 10px 28px -12px color-mix(in oklch, var(--signal) 80%, black);
}
.btn--primary:hover:not(:disabled) { background: var(--signal-hi); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn--ghost:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.btn--quiet { background: var(--bg-elev); border-color: var(--line-soft); }
.btn--quiet:hover:not(:disabled) { background: var(--bg-elev-2); }
.btn--gold {
  background: linear-gradient(180deg, oklch(0.86 0.12 88), oklch(0.74 0.13 75));
  color: oklch(0.24 0.04 70);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 10px 26px -14px oklch(0.6 0.13 75);
}
.btn--xl { min-height: 56px; padding: 0 28px; font-size: 17px; }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn__price { font-family: var(--font-mono); font-weight: 500; opacity: 0.85; }
.link {
  background: none; border: 0; padding: 4px 2px; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
  font-size: 14px;
}
.link:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
.iconbtn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--line-soft); background: var(--bg-elev); color: var(--ink-2);
}
.iconbtn:hover { color: var(--ink); background: var(--bg-elev-2); }
.iconbtn .ico { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- accueil */
.home {
  display: grid;
  grid-template-areas: "copy" "stage" "actions" "goal" "recent";
  gap: 18px;
  max-width: 1180px; margin: 0 auto;
  padding: 18px var(--gutter) 32px;
}
.home__copy { grid-area: copy; }
.home__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 8.6vw, 40px); line-height: 1.02; letter-spacing: -0.005em;
  text-wrap: balance;
}
.home__title .w { display: inline-block; }
.home__sub { display: none; margin-top: 14px; max-width: 46ch; color: var(--ink-2); font-size: 16px; }
.home__stage { grid-area: stage; position: relative; display: grid; place-items: center; padding: 16px 0 4px; }
.spot {
  position: absolute; inset: -10% 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--signal) 22%, transparent), transparent 72%);
  opacity: 0.55;
}
.home__actions { grid-area: actions; display: grid; justify-items: center; gap: 12px; }
.home__actions .btn--xl { width: min(100%, 360px); }
.home__status {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.home__status .ico { color: var(--ink-3); }
.home__status b { color: var(--ink); font-weight: 600; }
.home__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; }

.goal {
  grid-area: goal;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r-panel);
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  text-decoration: none; transition: border-color 0.2s, background-color 0.2s;
}
.goal:hover { border-color: var(--line); background: var(--bg-elev-2); }
.goal__icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: color-mix(in oklch, var(--signal) 18%, var(--bg-elev-2)); color: var(--signal-hi);
}
.goal__icon .ico { width: 22px; height: 22px; }
.goal__text { display: grid; gap: 2px; min-width: 0; }
.goal__title { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal__sub { color: var(--ink-3); font-size: 13.5px; }
.goal__sub b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }
.goal__chev { color: var(--ink-3); }
.goal__meter { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.goal__meter i { display: block; height: 100%; background: var(--signal); border-radius: inherit; transform-origin: left; }

.recent { grid-area: recent; display: grid; gap: 12px; min-width: 0; }
.recent__title { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.recent__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 2px 2px 10px; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scrollbar-width: none;
}
.recent__list::-webkit-scrollbar { display: none; }
.recent__list > * { scroll-snap-align: start; }

@media (min-width: 900px) {
  :root { --gutter: 32px; --topbar-h: 68px; }
  .app { padding-bottom: 0; }
  .nav {
    position: static; display: flex; gap: 4px; height: auto; padding: 0;
    background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
    margin-right: auto; margin-left: 28px;
  }
  .nav__link { flex-direction: row; gap: 8px; padding: 8px 13px; border-radius: 999px; font-size: 14.5px; }
  .nav__link .ico { width: 20px; height: 20px; }
  .nav__link:hover { color: var(--ink); background: var(--bg-elev); }
  .nav__link[aria-current="page"] { background: var(--bg-elev-2); }
  .nav__link[aria-current="page"]::before { display: none; }
  .sign--brand { font-size: 19px; }

  .home {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "copy stage" "actions stage" "goal stage" "recent recent";
    align-items: start; column-gap: 56px; row-gap: 22px;
    padding-top: clamp(28px, 6vh, 64px);
  }
  .home__copy { align-self: end; }
  .home__title { font-size: clamp(44px, 4.6vw, 64px); }
  .home__sub { display: block; }
  .home__stage { min-height: 520px; align-self: center; }
  .home__actions { justify-items: start; }
  .home__actions .btn--xl { width: auto; min-width: 280px; }
  .home__tools { justify-content: flex-start; }
  .goal { max-width: 460px; }
  .recent__list { grid-auto-columns: 112px; margin: 0; padding-inline: 2px; }
}

/* ---------------------------------------------------------------- le paquet */
.pack {
  --pw: min(58vw, 250px);
  position: relative; display: block;
  width: var(--pw); aspect-ratio: 0.66;
  padding: 0; border: 0; background: none;
  border-radius: 10px;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 30px 34px rgb(0 0 0 / 0.5)) drop-shadow(0 6px 10px rgb(0 0 0 / 0.35));
}
.pack:disabled { cursor: progress; }
.pack:focus-visible { outline-offset: 8px; border-radius: 12px; }
@media (min-width: 900px) { .pack { --pw: 300px; } }
.pack__body {
  position: absolute; inset: 0; display: block; border-radius: 8px; overflow: hidden;
  background:
    repeating-radial-gradient(circle at 18% 112%, transparent 0 9px, rgb(255 255 255 / 0.05) 9px 10px),
    repeating-radial-gradient(circle at 82% -12%, transparent 0 9px, rgb(255 255 255 / 0.05) 9px 10px),
    linear-gradient(162deg, var(--signal-hi) 0%, var(--signal) 38%, var(--signal-lo) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), inset 0 -40px 60px -30px rgb(0 0 0 / 0.35);
}
.pack__crimp {
  position: absolute; left: 0; right: 0; height: 7.5%;
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.16) 0 2px, rgb(255 255 255 / 0.1) 2px 4px),
    linear-gradient(180deg, var(--signal-lo), var(--signal));
}
.pack__crimp--top { top: 0; border-bottom: 1px solid rgb(0 0 0 / 0.2); }
.pack__crimp--bottom { bottom: 0; border-top: 1px solid rgb(0 0 0 / 0.2); transform: scaleY(-1); }
.pack__tear {
  position: absolute; left: 6%; right: 6%; top: 12.5%; height: 0;
  border-top: 2px dashed rgb(255 255 255 / 0.45);
}
.pack__face {
  position: absolute; inset: 15% 8% 11%;
  display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; align-content: start; gap: 6%;
  text-align: center; color: var(--on-signal);
}
.pack__kicker {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: calc(var(--pw) * 0.058); letter-spacing: 0.12em; opacity: 0.88;
}
.sign--pack { font-size: calc(var(--pw) * 0.15); }
.sign--pack .sign__in { padding: 0.14em 0.42em 0.1em; }
.pack__map {
  width: 74%; height: auto; align-self: center;
  fill: rgb(255 255 255 / 0.1); stroke: rgb(255 255 255 / 0.32); stroke-width: 3;
}
.pack__num {
  font-family: var(--font-mono); font-size: calc(var(--pw) * 0.045); letter-spacing: 0.04em; opacity: 0.75;
}
.pack__sheen {
  position: absolute; inset: -20% auto -20% 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.22) 45%, rgb(255 255 255 / 0.05) 60%, transparent);
  transform: translateX(-130%) skewX(-14deg);
  pointer-events: none; mix-blend-mode: screen;
}

/* ---------------------------------------------------------------- carte à collectionner */
.card {
  --h: 245;
  --frame: oklch(0.56 0.105 var(--h));
  --frame-hi: oklch(0.66 0.1 var(--h));
  --frame-lo: oklch(0.45 0.1 var(--h));
  --tint: oklch(0.93 0.032 var(--h));
  --tint-2: oklch(0.86 0.06 var(--h));
  --ink-r: oklch(0.38 0.085 var(--h));
  --tier: var(--t0);
  --tier-ink: oklch(0.42 0.02 262);
  --card-paper: var(--paper);
  --card-ink: oklch(0.24 0.02 262);
  --card-ink-2: oklch(0.45 0.02 262);
  --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%; --shine: 0;
  container-type: inline-size;
  position: relative; display: block; width: 100%;
  aspect-ratio: 63 / 88;
  perspective: 1100px;
  font-family: var(--font-ui);
  color: var(--card-ink);
  -webkit-tap-highlight-color: transparent;
}
.card[data-tier="1"] { --tier: var(--t1); --tier-ink: oklch(0.42 0.11 152); }
.card[data-tier="2"] { --tier: var(--t2); --tier-ink: oklch(0.42 0.12 245); }
.card[data-tier="3"] { --tier: var(--t3); --tier-ink: oklch(0.45 0.17 350); }
.card[data-tier="4"] { --tier: var(--t4); --tier-ink: oklch(0.42 0.15 302); }
.card[data-tier="5"] { --tier: var(--t5); --tier-ink: oklch(0.46 0.13 55); }
.card[data-tier="6"] { --tier: var(--t6); --tier-ink: oklch(0.82 0.13 90); }

.card__tilt {
  position: absolute; inset: 0;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  will-change: transform;
}
.card__inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  border-radius: 4.6cqw;
}
.card__face {
  position: absolute; inset: 0; border-radius: 4.6cqw; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 2.4cqw 6cqw -2cqw rgb(0 0 0 / 0.55), 0 0 0 0.25cqw rgb(0 0 0 / 0.25);
}
.card__back { transform: rotateY(180deg); }

/* recto : cadre + papier */
.card__front {
  padding: 3.3cqw;
  background:
    linear-gradient(155deg, rgb(255 255 255 / 0.22), transparent 38%, rgb(0 0 0 / 0.16)),
    var(--frame);
}
.card__paper {
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: 2.2cqw;
  padding: 3cqw 3.2cqw 2.6cqw;
  border-radius: 2.8cqw;
  background:
    repeating-radial-gradient(circle at -10% -6%, transparent 0 1.55cqw, color-mix(in oklch, var(--frame) 11%, transparent) 1.55cqw 1.72cqw),
    repeating-radial-gradient(circle at 110% 106%, transparent 0 1.55cqw, color-mix(in oklch, var(--frame) 11%, transparent) 1.55cqw 1.72cqw),
    var(--card-paper);
  box-shadow: inset 0 0 0 0.3cqw color-mix(in oklch, var(--frame-lo) 35%, transparent);
}
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.card__tier {
  display: inline-flex; align-items: center; gap: 1.4cqw;
  padding: 0.9cqw 2.4cqw 0.8cqw; border-radius: 99cqw;
  background: color-mix(in oklch, var(--tier) 26%, white);
  color: var(--tier-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 4.1cqw;
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 1;
  box-shadow: inset 0 0 0 0.3cqw color-mix(in oklch, var(--tier) 60%, transparent);
}
.card__tier i {
  width: 1.8cqw; height: 1.8cqw; transform: rotate(45deg); background: currentColor; border-radius: 0.3cqw;
}
.card__plate {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border-radius: 1.2cqw; box-shadow: 0 0 0 0.3cqw oklch(0.3 0.02 262 / 0.5);
  font-family: var(--font-display); font-weight: 700; line-height: 1;
}
.card__plate b {
  display: grid; place-items: center; padding: 0.9cqw 1.7cqw 0.7cqw;
  background: oklch(0.42 0.16 262); color: white; font-size: 4.4cqw; letter-spacing: 0.02em;
}

.card__sign { display: grid; }
.card__sign .sign {
  font-size: var(--fs, 10cqw);
  border-radius: 2.6cqw; padding: 1.1cqw;
  box-shadow: 0 0.6cqw 1.6cqw -0.6cqw rgb(0 0 0 / 0.3), inset 0 0 0 0.2cqw rgb(0 0 0 / 0.06);
}
.card__sign .sign__in {
  border-width: 1.7cqw; border-radius: 1.8cqw;
  min-height: 19cqw; padding: 2cqw 2.4cqw 1.6cqw;
  line-height: 0.93; letter-spacing: 0.015em; text-align: center;
}
.card__sign .sign__in span { display: block; }
.card__where {
  margin-top: -0.6cqw; text-align: center;
  font-size: 3.5cqw; font-weight: 500; color: var(--card-ink-2); letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card__map {
  position: relative; flex: 1 1 auto; min-height: 0;
  border-radius: 2.4cqw; overflow: hidden;
  background:
    radial-gradient(circle at 70% 20%, rgb(255 255 255 / 0.5), transparent 60%),
    var(--tint);
  box-shadow: inset 0 0 0 0.3cqw color-mix(in oklch, var(--frame) 30%, transparent);
}
.card__map svg { position: absolute; inset: 5% 5% 9%; width: 90%; height: 86%; }
.card__map .m-fr { fill: oklch(0.99 0.004 250); stroke: color-mix(in oklch, var(--ink-r) 45%, transparent); stroke-width: 3; stroke-linejoin: round; }
.card__map .m-reg { fill: color-mix(in oklch, var(--frame) 42%, white); stroke: var(--frame); stroke-width: 2.4; stroke-linejoin: round; }
.card__map .m-dot { fill: var(--signal); stroke: white; stroke-width: 6; }
.card__map .m-ring { fill: none; stroke: var(--signal); stroke-width: 3; opacity: 0.55; }
.card__map .m-drom { fill: color-mix(in oklch, var(--frame) 42%, white); stroke: var(--frame); stroke-width: 0.8; }
.card__coord {
  position: absolute; left: 2.6cqw; bottom: 1.6cqw;
  font-family: var(--font-mono); font-size: 2.6cqw; color: var(--ink-r); letter-spacing: 0.02em;
}
.card__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw 3cqw; margin: 0;
}
.card__stats div { display: grid; gap: 0.2cqw; min-width: 0; }
.card__stats dt {
  font-size: 2.7cqw; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--card-ink-2);
}
.card__stats dd {
  margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: 4cqw; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.card__stats dd small { font-size: 0.72em; color: var(--card-ink-2); }
.card__extra {
  font-size: 3.2cqw; color: var(--card-ink-2); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-top: 1.6cqw; border-top: 0.25cqw solid color-mix(in oklch, var(--frame) 22%, transparent);
}
.card__extra b { color: var(--card-ink); font-weight: 600; }
.card__foot {
  display: flex; justify-content: space-between; gap: 2cqw; margin-top: auto;
  font-family: var(--font-mono); font-size: 2.6cqw; color: var(--card-ink-2); letter-spacing: 0.02em;
}

/* tampon */
.card__stamp {
  position: absolute; right: 7cqw; top: 54%; z-index: 2;
  display: grid; place-items: center; text-align: center;
  width: 25cqw; height: 25cqw; border-radius: 50%;
  color: var(--tier-ink);
  border: 0.8cqw solid currentColor;
  box-shadow: inset 0 0 0 0.9cqw transparent, inset 0 0 0 1.25cqw currentColor;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 3.5cqw; line-height: 1; letter-spacing: 0.06em;
  transform: rotate(-14deg);
  background: radial-gradient(circle, color-mix(in oklch, var(--card-paper) 70%, transparent) 55%, transparent 56%);
  mix-blend-mode: multiply;
  opacity: 0.88;
  pointer-events: none;
}
.card__stamp small { display: block; max-width: 19cqw; margin: 0.8cqw auto 0; font-size: 2.05cqw; font-weight: 700; letter-spacing: 0.03em; line-height: 1.05; }

/* verso */
.card__back {
  display: grid; place-items: center;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 2.2cqw, oklch(0.8 0.09 85 / 0.12) 2.2cqw 2.45cqw),
    repeating-conic-gradient(from 0deg at 50% 50%, oklch(0.8 0.09 85 / 0.07) 0 4deg, transparent 4deg 8deg),
    linear-gradient(160deg, oklch(0.3 0.05 262), oklch(0.2 0.04 262));
  box-shadow: inset 0 0 0 3.3cqw oklch(0.26 0.045 262), inset 0 0 0 3.6cqw oklch(0.78 0.09 85 / 0.5),
    0 2.4cqw 6cqw -2cqw rgb(0 0 0 / 0.55);
}
.card__back .sign { font-size: 11cqw; }
.card__back-label {
  position: absolute; bottom: 9cqw; left: 0; right: 0; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: 3.6cqw; letter-spacing: 0.22em;
  text-transform: uppercase; color: oklch(0.82 0.08 85 / 0.8);
}
.card__glow {
  position: absolute; inset: -1.5cqw; border-radius: 6cqw; pointer-events: none;
  opacity: 0; visibility: hidden;
  box-shadow: 0 0 9cqw 2.5cqw var(--tier), 0 0 0 0.9cqw var(--tier);
}

/* reflets */
.card__holo, .card__glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
}
.card__holo {
  opacity: 0;
  background-image:
    repeating-linear-gradient(118deg,
      oklch(0.82 0.15 20) 0%, oklch(0.9 0.14 90) 6%, oklch(0.86 0.15 150) 12%,
      oklch(0.84 0.13 210) 18%, oklch(0.8 0.15 290) 24%, oklch(0.82 0.15 340) 30%, oklch(0.82 0.15 20) 36%);
  background-size: 260% 260%;
  background-position: var(--px) var(--py);
  mix-blend-mode: soft-light;
}
.card__glare {
  opacity: calc(0.12 + var(--shine) * 0.6);
  background: radial-gradient(circle at var(--px) var(--py), rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.08) 32%, transparent 58%);
  mix-blend-mode: overlay;
}

/* ville : cadre argenté */
.card[data-tier="2"] .card__front {
  background:
    linear-gradient(155deg, rgb(255 255 255 / 0.32), transparent 30%, rgb(255 255 255 / 0.18) 55%, rgb(0 0 0 / 0.2)),
    var(--frame);
  box-shadow: inset 0 0 0 0.7cqw oklch(0.88 0.01 250 / 0.85), 0 2.4cqw 6cqw -2cqw rgb(0 0 0 / 0.55);
}
/* reflet limité au cadre (préfecture, capitale) */
.card[data-tier="4"] .card__holo,
.card[data-tier="5"] .card__holo {
  opacity: 0.9; mix-blend-mode: color-dodge;
  padding: 3.3cqw;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.card[data-tier="4"] .card__holo { opacity: 0.55; }
.card[data-tier="4"] .card__front {
  box-shadow: inset 0 0 0 0.7cqw oklch(0.82 0.1 302 / 0.9), 0 2.4cqw 6cqw -2cqw rgb(0 0 0 / 0.55);
}
.card[data-tier="5"] .card__front {
  box-shadow: inset 0 0 0 0.7cqw oklch(0.86 0.12 70 / 0.95), 0 2.4cqw 6cqw -2cqw rgb(0 0 0 / 0.55);
}
/* curiosité : papier irisé, panneau de travers */
.card[data-tier="3"] .card__holo { opacity: calc(0.28 + var(--shine) * 0.24); }
.card[data-tier="3"] .card__sign .sign { transform: rotate(-2.2deg); }
.card[data-tier="3"] .card__front {
  background:
    linear-gradient(120deg, oklch(0.78 0.14 350), oklch(0.82 0.12 60) 30%, oklch(0.8 0.12 170) 60%, oklch(0.74 0.15 290)),
    var(--frame);
}
/* légendaire : papier nuit, encre or */
.card[data-tier="6"] {
  --card-paper: oklch(0.22 0.035 262);
  --card-ink: oklch(0.93 0.05 90);
  --card-ink-2: oklch(0.78 0.07 85);
  --tint: oklch(0.29 0.04 262);
  --ink-r: oklch(0.8 0.09 85);
}
.card[data-tier="6"] .card__front {
  background: linear-gradient(135deg, oklch(0.62 0.11 75), oklch(0.9 0.11 92) 25%, oklch(0.68 0.12 78) 50%, oklch(0.93 0.09 95) 72%, oklch(0.6 0.11 72));
}
.card[data-tier="6"] .card__paper {
  background:
    repeating-radial-gradient(circle at -10% -6%, transparent 0 1.55cqw, oklch(0.8 0.1 85 / 0.13) 1.55cqw 1.72cqw),
    repeating-radial-gradient(circle at 110% 106%, transparent 0 1.55cqw, oklch(0.8 0.1 85 / 0.13) 1.55cqw 1.72cqw),
    var(--card-paper);
  box-shadow: inset 0 0 0 0.3cqw oklch(0.8 0.1 85 / 0.5);
}
.card[data-tier="6"] .card__map { background: radial-gradient(circle at 70% 20%, oklch(0.35 0.05 262), transparent 70%), var(--tint); }
.card[data-tier="6"] .card__map .m-fr { fill: oklch(0.32 0.04 262); stroke: oklch(0.8 0.1 85 / 0.7); }
.card[data-tier="6"] .card__map .m-reg { fill: oklch(0.55 0.1 82); stroke: oklch(0.88 0.1 90); }
.card[data-tier="6"] .card__tier { background: oklch(0.86 0.12 90); color: oklch(0.28 0.05 75); }
.card[data-tier="6"] .card__stamp { color: oklch(0.86 0.12 90); mix-blend-mode: normal; background: none; }
.card[data-tier="6"] .card__holo { opacity: calc(0.12 + var(--shine) * 0.4); mix-blend-mode: color-dodge; }
.card[data-tier="6"] .card__extra { border-top-color: oklch(0.8 0.1 85 / 0.25); }

/* format miniature : la même carte, en plus sobre */
@container (max-width: 200px) {
  .card__stats, .card__extra, .card__coord, .card__foot, .card__stamp { display: none; }
  .card__paper { gap: 3cqw; padding: 3.6cqw; }
  .card__tier { font-size: 6.4cqw; padding: 1.6cqw 3.4cqw 1.4cqw; }
  .card__tier i { display: none; }
  .card__plate b { font-size: 6.6cqw; padding: 1.6cqw 2.6cqw 1.2cqw; }
  .card__sign .sign { font-size: var(--fs-mini, 12cqw); }
  .card__sign .sign__in { min-height: 26cqw; padding: 2.4cqw 2cqw 2cqw; border-width: 2.4cqw; }
  .card__where { font-size: 6.2cqw; margin-top: 0; }
  .card__back .sign { font-size: 15cqw; }
  .card__back-label { display: none; }
}

/* carte cliquable */
button.card { padding: 0; border: 0; background: none; text-align: inherit; }
.card-btn { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 10px; }
.card-btn:hover .card__tilt { transform: translateY(-3px); transition: transform 0.25s var(--ease); }

/* badges sous carte */
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
  background: var(--bg-elev-2); color: var(--ink-2); border: 1px solid var(--line-soft);
}
.tag--new { background: var(--signal); color: var(--on-signal); border-color: transparent; }
.tag--goal { background: oklch(0.86 0.14 92); color: oklch(0.25 0.05 75); border-color: transparent; }

/* ---------------------------------------------------------------- ouverture du paquet */
.stage {
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: calc(var(--safe-t) + 12px) var(--gutter) calc(var(--safe-b) + 16px);
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 45%, oklch(0.22 0.03 262), oklch(0.12 0.015 262) 70%);
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  --deck-w: min(76vw, 330px, calc((100dvh - 300px) * 0.716));
}
.stage:focus { outline: none; }
.stage__veil { position: absolute; inset: 0; background: oklch(0.08 0.01 262); opacity: 0; pointer-events: none; }
.stage__rays {
  position: absolute; left: 50%; top: 46%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg, var(--ray, oklch(0.86 0.14 92 / 0.16)) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 8%, transparent 62%);
  mask: radial-gradient(closest-side, #000 8%, transparent 62%);
  opacity: 0; pointer-events: none;
}
.stage__flash { position: absolute; inset: 0; background: white; opacity: 0; pointer-events: none; mix-blend-mode: overlay; }
.stage__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.stage__top { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.stage__count { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); letter-spacing: 0.04em; }
.stage__center { position: relative; z-index: 3; display: grid; place-items: center; min-height: 0; }
.stage__deck, .stage__pack { grid-area: 1 / 1; position: relative; }
.stage__deck { z-index: 1; width: var(--deck-w); aspect-ratio: 63 / 88; }
.stage__deck .card { position: absolute; inset: 0; }
.stage__deck .card.is-top { cursor: pointer; }
.stage__pack { width: min(62vw, 270px, calc((100dvh - 280px) * 0.66)); aspect-ratio: 0.66; z-index: 2; }
.stage__pack .pack { --pw: min(62vw, 270px, calc((100dvh - 280px) * 0.66)); width: 100%; cursor: grab; touch-action: none; }
.stage__pack .pack:active { cursor: grabbing; }
.pack__cap {
  position: absolute; left: 0; right: 0; top: 0; height: 12.5%; z-index: 2;
  border-radius: 8px 8px 0 0; overflow: hidden;
  transform-origin: 100% 100%;
}
.pack__cap .pack__body { inset: 0 0 auto 0; height: 800%; border-radius: 0; }
.pack__main { position: absolute; inset: 12.5% 0 0; overflow: hidden; border-radius: 0 0 8px 8px; }
.pack__main .pack__body { inset: -14.286% 0 0 0; border-radius: 0; }
.pack__line {
  position: absolute; left: 0; right: 0; top: 12.5%; height: 3px; margin-top: -1.5px; z-index: 3;
  background: linear-gradient(90deg, white, oklch(0.95 0.08 90));
  box-shadow: 0 0 14px 3px rgb(255 255 255 / 0.7);
  transform: scaleX(0); transform-origin: left;
}
.pack__light {
  position: absolute; left: 4%; right: 4%; top: 12.5%; height: 70%; z-index: 1;
  background: radial-gradient(60% 100% at 50% 0%, var(--light, white), transparent 70%);
  transform-origin: 50% 0; opacity: 0; pointer-events: none; mix-blend-mode: screen;
}
.stage__banner {
  grid-area: 1 / 1; align-self: center; position: relative; z-index: 6; width: 100%;
  translate: 0 calc(var(--deck-w) * -0.698 - 50% - 16px);
  display: grid; justify-items: center; gap: 2px; text-align: center; pointer-events: none;
}
.banner__tier {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(30px, 9vw, 46px); line-height: 0.95; letter-spacing: 0.04em;
  color: var(--bc, var(--ink));
  text-shadow: 0 0 28px color-mix(in oklch, var(--bc, white) 50%, transparent);
}
.banner__sub { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.stage__hint {
  position: relative; z-index: 5; min-height: 22px; text-align: center; color: var(--ink-2); font-size: 14.5px;
  padding: 8px 0 10px;
}
.stage__meta { position: absolute; left: 0; right: 0; top: calc(100% + 12px); display: flex; justify-content: center; gap: 8px; z-index: 6; }
.stage__tray { position: relative; z-index: 5; display: flex; justify-content: center; gap: 10px; min-height: 58px; }
.tray-slot {
  width: 40px; aspect-ratio: 63 / 88; border-radius: 5px;
  border: 1px dashed var(--line); background: rgb(255 255 255 / 0.02);
}
.tray-slot.is-filled {
  border: 0;
  background: linear-gradient(160deg, oklch(0.66 0.1 var(--h)), oklch(0.5 0.1 var(--h)));
  box-shadow: 0 0 0 2px var(--tc), 0 6px 14px -6px var(--tc);
}

.stage__summary {
  position: absolute; inset: 0; z-index: 7;
  display: grid; grid-template-rows: auto 1fr auto; gap: 16px;
  padding: calc(var(--safe-t) + 20px) var(--gutter) calc(var(--safe-b) + 18px);
  overflow-y: auto;
  background: radial-gradient(120% 80% at 50% 30%, oklch(0.22 0.03 262), oklch(0.13 0.015 262) 75%);
}
.summary__head { display: grid; gap: 6px; text-align: center; }
.summary__title { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; }
.summary__sub { color: var(--ink-2); font-size: 15px; }
.summary__grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px 10px;
  align-content: center; max-width: 980px; width: 100%; margin: 0 auto;
}
.summary__item { grid-column: span 2; display: grid; gap: 8px; justify-items: center; align-content: start; }
.summary__item:nth-child(4) { grid-column: 2 / span 2; }
.summary__item:nth-child(5) { grid-column: 4 / span 2; }
.summary__item .card-btn { width: 100%; }
.summary__actions { display: grid; gap: 10px; width: min(100%, 420px); margin: 0 auto; }
.summary__row { display: flex; gap: 10px; }
.summary__row .btn { flex: 1; }
@media (min-width: 760px) {
  .summary__grid { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .summary__item, .summary__item:nth-child(4), .summary__item:nth-child(5) { grid-column: auto; }
}

/* ---------------------------------------------------------------- en-têtes de vue */
.vhead { display: grid; gap: 8px; margin-bottom: 20px; }
.vhead__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 8vw, 52px); line-height: 1; }
.vhead__lead { color: var(--ink-2); max-width: 60ch; }
.back {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  color: var(--ink-2); text-decoration: none; font-size: 14px; padding: 6px 0;
}
.back:hover { color: var(--ink); }
.panel { background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: var(--r-panel); }
.section { margin-top: 36px; }
.section__title { font-size: 18px; font-weight: 600; margin-bottom: 14px; }

/* ---------------------------------------------------------------- collection */
.col-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.col-top > * { min-width: 0; }
.mapbox { position: relative; padding: 14px; }
.mapbox__canvas { width: 100%; min-width: 0; height: auto; aspect-ratio: 1000 / 930; touch-action: manipulation; cursor: pointer; }
.mapbox__stats { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 12px; padding: 4px 4px 12px; }
.mapbox__stats .bignum { flex: 1 1 210px; }
.bignum { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 13vw, 76px); line-height: 0.85; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.bignum__of { display: block; margin-top: 8px; font-family: var(--font-ui); font-size: 14px; color: var(--ink-2); font-weight: 500; }
.mapbox__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px 0; color: var(--ink-3); font-size: 13px; }
.maptip {
  position: absolute; z-index: 2; pointer-events: none; padding: 6px 10px; border-radius: 8px;
  background: oklch(0.12 0.01 262 / 0.92); border: 1px solid var(--line); font-size: 13px; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
}
.maptip b { font-weight: 600; }

.tiers {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 1fr); gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none;
}
.tiers::-webkit-scrollbar { display: none; }
.tierbox {
  scroll-snap-align: start; padding: 12px 14px; border-radius: 14px;
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  display: grid; gap: 4px;
}
.tierbox__name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tierbox__name i { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--c); }
.tierbox__n { font-family: var(--font-mono); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tierbox__n span { color: var(--ink-3); font-size: 13px; }

.regions { display: grid; gap: 28px; }
.region__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.region__name { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.region__name i { width: 14px; height: 14px; border-radius: 4px; background: oklch(0.6 0.11 var(--h)); }
.region__count { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
.deps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .deps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) {
  .deps { grid-template-columns: repeat(5, 1fr); }
  .col-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .tiers { grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; }
}
.dep {
  position: relative; display: grid; gap: 4px; padding: 12px 12px 12px 16px;
  border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--line-soft);
  text-decoration: none; overflow: hidden; transition: border-color 0.2s, background-color 0.2s, transform 0.2s var(--ease);
}
.dep::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: oklch(0.6 0.11 var(--h)); }
.dep:hover { border-color: var(--line); background: var(--bg-elev-2); }
.dep:active { transform: scale(0.985); }
.dep__num { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 0.9; color: var(--ink); }
.dep__name { font-size: 13.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep__count { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dep__count b { color: var(--ink); font-weight: 600; }
.dep__bar { height: 2px; border-radius: 2px; background: var(--line-soft); overflow: hidden; margin-top: 4px; }
.dep__bar i { display: block; height: 100%; background: oklch(0.7 0.12 var(--h)); }
.dep.is-empty .dep__num { color: var(--ink-3); }

/* classeur */
.binder-head { display: grid; gap: 18px; margin-bottom: 8px; }
@media (min-width: 900px) { .binder-head { grid-template-columns: 1fr 340px; align-items: center; } }
.binder-title { display: flex; align-items: center; gap: 14px; }
.binder-title .card__plate b { font-size: 26px; padding: 6px 10px 4px; border-radius: 6px; }
.binder-title .card__plate { border-radius: 7px; }
.binder-count { font-size: 16px; color: var(--ink-2); }
.binder-count b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }
.depmap { padding: 12px; }
.depmap svg { width: 100%; height: auto; max-height: 260px; }
.depmap .d-shape { fill: var(--bg-elev-2); stroke: oklch(0.6 0.11 var(--h)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.depmap .d-dot { fill: oklch(0.72 0.12 var(--h)); }
.depmap .d-dot--rare { fill: var(--ink); }
.missing { display: flex; flex-wrap: wrap; gap: 8px; }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; }
@media (min-width: 640px) { .cards-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .cards-grid { grid-template-columns: repeat(6, 1fr); gap: 18px 14px; } }
.cards-grid > * { content-visibility: auto; contain-intrinsic-size: auto 160px; }
.empty {
  display: grid; justify-items: start; gap: 10px; padding: 22px; border-radius: var(--r-panel);
  border: 1px dashed var(--line); color: var(--ink-2);
}
.empty b { color: var(--ink); }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 5px; }
.slot {
  aspect-ratio: 63 / 88; border-radius: 4px; display: grid; place-items: end center; padding-bottom: 3px;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3);
  border: 1px solid var(--line-soft); background: transparent; padding-inline: 0;
}
.slot.is-owned {
  border: 0; color: rgb(255 255 255 / 0.9); cursor: pointer;
  background: linear-gradient(160deg, oklch(0.66 0.1 var(--h)), oklch(0.5 0.1 var(--h)));
  box-shadow: inset 0 0 0 1.5px var(--tc, transparent);
}
.slot.is-owned:hover { filter: brightness(1.12); }
.slot.is-hint { border-color: color-mix(in oklch, var(--tc) 55%, transparent); border-style: dashed; }
.album-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -4px 0 12px; color: var(--ink-3); font-size: 13px; }

/* ---------------------------------------------------------------- ta commune */
.field { display: grid; gap: 8px; }
.field__label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.field__box { position: relative; }
.field__box .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); width: 20px; height: 20px; }
.input {
  width: 100%; min-height: 52px; padding: 0 16px 0 44px; border-radius: var(--r-field);
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink); font-size: 16px;
}
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ink) 18%, transparent); }
.field__help { font-size: 13px; color: var(--ink-3); }
.results { display: grid; gap: 6px; margin-top: 10px; padding: 0; list-style: none; }
.result {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--bg-elev);
  text-align: left;
}
.result:hover, .result:focus-visible { background: var(--bg-elev-2); border-color: var(--line); }
.result__name { font-weight: 600; }
.result__meta { font-size: 13px; color: var(--ink-3); }
.result__tier { font-size: 12px; font-weight: 600; color: var(--c); white-space: nowrap; }
.target-card { display: grid; gap: 20px; padding: 18px; margin-top: 24px; }
@media (min-width: 640px) { .target-card { grid-template-columns: 180px 1fr; align-items: center; } }
.target-card .card { max-width: 180px; margin: 0 auto; }
.target-info { display: grid; gap: 12px; }
.target-info h2 { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; }
.chance { display: grid; gap: 8px; }
.chance__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink-2); }
.chance__row b { font-family: var(--font-mono); font-size: 22px; color: var(--ink); font-weight: 600; }
.chance__bar { height: 6px; border-radius: 4px; background: var(--bg-elev-2); overflow: hidden; }
.chance__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--signal-lo), var(--signal-hi)); border-radius: inherit; }
.target-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------- textes fins, taux */
.fineprint { font-size: 13px; color: var(--ink-3); }
.rates { width: 100%; border-collapse: collapse; font-size: 14px; }
.rates th, .rates td { padding: 10px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.rates th:first-child, .rates td:first-child { text-align: left; }
.rates thead th { color: var(--ink-3); font-weight: 500; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.rates tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.rates td { font-family: var(--font-mono); }
.rates td:first-child { font-family: var(--font-ui); font-weight: 600; }
.rates i { display: inline-block; width: 9px; height: 9px; margin-right: 8px; transform: rotate(45deg); border-radius: 2px; background: var(--c); }

/* ---------------------------------------------------------------- feuilles (modales) */
.sheets { position: relative; z-index: 60; }
.sheet {
  position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; justify-items: center;
}
.sheet__backdrop { position: absolute; inset: 0; background: oklch(0.08 0.01 262 / 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet__panel {
  position: relative; width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto;
  padding: 18px var(--gutter) calc(var(--safe-b) + 20px);
  border-radius: 22px 22px 0 0; background: var(--bg-elev); border: 1px solid var(--line-soft); border-bottom: 0;
  box-shadow: 0 -20px 60px -20px rgb(0 0 0 / 0.6);
  overscroll-behavior: contain;
}
.sheet__grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 14px; }
.sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sheet__title { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.05; }
.sheet__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; color: var(--ink-2); }
.sheet__body > p b { color: var(--ink); }
.sheet__actions { display: grid; gap: 10px; margin-top: 20px; }
@media (min-width: 640px) {
  .sheet { align-items: center; }
  .sheet__panel { border-radius: 22px; border-bottom: 1px solid var(--line-soft); padding-bottom: 24px; }
}
.sheet--card .sheet__panel { max-width: 460px; background: oklch(0.15 0.014 262); }
.detail { display: grid; gap: 16px; justify-items: center; }
.detail__card { width: min(78vw, 340px, calc((100dvh - 330px) * 0.716)); touch-action: none; }
.detail__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; }
.detail__actions { display: grid; gap: 10px; width: 100%; }
.detail__sponsor { display: grid; gap: 2px; text-align: center; font-size: 13px; color: var(--ink-3); }
.share-preview { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--bg); }
/* ---------------------------------------------------------------- toasts */
.toasts {
  position: fixed; z-index: 70; left: 50%; top: calc(var(--safe-t) + 12px); transform: translateX(-50%);
  display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none;
}
.toast {
  padding: 12px 16px; border-radius: 14px; background: oklch(0.26 0.018 262); border: 1px solid var(--line);
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.6); font-size: 14.5px; text-align: center;
  animation: toast-in 0.35s var(--ease) both;
}
.toast.is-out { animation: toast-out 0.3s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px); } }

/* ---------------------------------------------------------------- chargement */
.skel {
  border-radius: 12px;
  background: linear-gradient(100deg, var(--bg-elev) 30%, var(--bg-elev-2) 50%, var(--bg-elev) 70%) 0 0 / 300% 100%;
  animation: skel 1.4s linear infinite;
}
@keyframes skel { to { background-position: -150% 0; } }
.loading-line { height: 2px; width: min(360px, 100%); border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.loading-line i { display: block; height: 100%; width: 0; background: var(--signal); transition: width 0.2s linear; }

/* ---------------------------------------------------------------- mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .card__tilt { transform: none !important; }
  .pack__sheen, .stage__rays { display: none; }
}

/* ==========================================================================
   v1 : jeu en ligne
   ========================================================================== */

:root {
  --gold: oklch(0.86 0.12 88);
  --gold-hi: oklch(0.92 0.1 92);
  --gold-lo: oklch(0.7 0.12 75);
  --gold-ink: oklch(0.27 0.05 75);
  --stone: oklch(0.84 0.035 85);
  --good: oklch(0.78 0.14 152);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.kicker {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: 0.14em; color: var(--ink-3); line-height: 1.2;
}
.ico--pave { color: var(--stone); }

/* ---------------------------------------------------------------- barre du haut : porte-monnaie, profil */
.topbar { gap: 10px; }
.brand { flex: none; }
.wallet {
  display: inline-flex; align-items: stretch; margin-left: auto;
  border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset;
}
.wallet__item {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 10px;
  text-decoration: none; color: var(--ink); border-radius: 999px;
  font-family: var(--font-mono); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums;
  transition: background-color 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.wallet__item + .wallet__item { position: relative; }
.wallet__item + .wallet__item::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: var(--line-soft);
}
.wallet__item:hover { background: var(--bg-elev-2); }
.wallet__item .ico { width: 18px; height: 18px; }
.wallet__item--paves .ico { color: var(--stone); }
.wallet__item--packs .ico { color: var(--signal-hi); }
.wallet__n { min-width: 1ch; display: inline-block; }

.me-btn {
  position: relative; flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%; text-decoration: none;
  background: var(--bg-elev-2); border: 1px solid var(--line);
  transition: border-color 0.2s, transform 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.me-btn:hover { border-color: var(--ink-3); }
.me-btn[aria-current="page"] { border-color: var(--ink-2); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--signal); }
.me-btn__av {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1; color: var(--ink); padding-top: 1px;
}
.me-btn__av .ico { width: 19px; height: 19px; color: var(--ink-2); }
body.has-pass .me-btn { border-color: var(--gold-lo); box-shadow: 0 0 0 1px var(--gold-lo) inset; }

/* pastilles honnêtes */
.pip {
  position: absolute; top: -5px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--signal); color: var(--on-signal); box-shadow: 0 0 0 2px var(--bg);
  font: 600 10.5px/1 var(--font-mono); font-variant-numeric: tabular-nums;
}
.pip--dot { min-width: 0; width: 9px; height: 9px; padding: 0; top: -2px; right: -3px; }
.me-btn .pip { top: -1px; right: -1px; }

/* ---------------------------------------------------------------- bandeaux sous la barre du haut */
.netbar {
  position: sticky; top: calc(var(--topbar-h) + var(--safe-t)); z-index: 19;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px var(--gutter); font-size: 13.5px; color: var(--ink);
  background: oklch(0.3 0.06 27 / 0.92); border-bottom: 1px solid oklch(0.5 0.14 27 / 0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: view-in 0.35s var(--ease) both;
}
.netbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal-hi); flex: none; animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
body.is-offline [data-net] { opacity: 0.45; pointer-events: none; }

.golden-bar {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px;
  padding: 8px var(--gutter); font-size: 13.5px; color: var(--ink);
  background:
    radial-gradient(60% 140% at 50% 0%, oklch(0.5 0.1 85 / 0.32), transparent 70%),
    oklch(0.22 0.03 80);
  border-bottom: 1px solid oklch(0.7 0.11 82 / 0.35);
  animation: view-in 0.45s var(--ease) both;
}
.golden-bar[data-phase="soon"] { background: var(--bg-elev); border-bottom-color: var(--line-soft); }
.golden-bar__sun { display: grid; place-items: center; color: var(--gold); }
.golden-bar__sun .ico { width: 20px; height: 20px; }
.golden-bar__text b { color: var(--gold-hi); font-weight: 600; }
.golden-bar[data-phase="soon"] .golden-bar__text b { color: var(--ink); }
.golden-bar__clock { font-family: var(--font-mono); font-weight: 600; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.golden-bar__boost { font-size: 12.5px; color: var(--ink-2); }
.golden-bar__more {
  background: none; border: 1px solid oklch(0.7 0.11 82 / 0.45); color: var(--gold-hi);
  border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 600;
}
.golden-bar__more:hover { background: oklch(0.7 0.11 82 / 0.14); }
@media (max-width: 520px) {
  .golden-bar { justify-content: flex-start; padding-left: 52px; text-align: left; }
  .golden-bar__sun { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); }
  .golden-bar__boost { flex-basis: 100%; }
  .golden-bar__more { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); }
  .golden-bar__text, .golden-bar__boost { padding-right: 56px; }
}

/* heure dorée : ambiance sur toute l'app */
body.is-golden {
  background:
    radial-gradient(110% 55% at 50% -8%, oklch(0.4 0.08 82 / 0.42), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}
body.is-golden .topbar { border-bottom-color: oklch(0.7 0.11 82 / 0.3); }
body.is-golden .home .spot { background: radial-gradient(closest-side, oklch(0.8 0.13 85 / 0.32), transparent 72%); opacity: 0.9; }
body.is-golden .home .pack { filter: drop-shadow(0 0 28px oklch(0.82 0.13 85 / 0.45)) drop-shadow(0 30px 34px rgb(0 0 0 / 0.5)); }
body.is-golden .home .pack .pack__body { box-shadow: inset 0 0 0 2px oklch(0.88 0.11 88 / 0.85), inset 0 -40px 60px -30px rgb(0 0 0 / 0.35); }
.home__rays {
  position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, oklch(0.86 0.12 88 / 0.22) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 70%);
  mask: radial-gradient(closest-side, #000 18%, transparent 70%);
  opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none;
  animation: rays-turn 60s linear infinite;
}
body.is-golden .home__rays { opacity: 1; }
@keyframes rays-turn { to { rotate: 360deg; } }

/* ---------------------------------------------------------------- accueil v1 */
.home { grid-template-areas: "copy" "stage" "actions" "widgets" "goal" "recent" "foot"; }
.home__widgets { grid-area: widgets; display: grid; gap: 14px; min-width: 0; }
.home__foot { grid-area: foot; }
.pack.is-empty { filter: grayscale(0.55) brightness(0.75) drop-shadow(0 30px 34px rgb(0 0 0 / 0.5)); }
.home__actions .btn--xl .mono { margin-left: 0.25em; }
.home__status .mono { color: var(--ink); }

.reserve { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.reserve__chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px;
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.reserve__chip .ico { width: 15px; height: 15px; color: var(--signal-hi); }
.reserve__slots { display: inline-flex; gap: 3px; }
.reserve__slots i {
  width: 9px; height: 13px; border-radius: 2px; border: 1px solid var(--line);
  background: transparent;
}
.reserve__slots i.is-full { border-color: transparent; background: linear-gradient(170deg, var(--signal-hi), var(--signal-lo)); }
.reserve__golden { flex-basis: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: oklch(0.8 0.08 85); }
.reserve__golden .ico { width: 16px; height: 16px; color: var(--gold); }
@media (min-width: 900px) { .reserve__golden { justify-content: flex-start; } }

.specials { display: grid; gap: 8px; width: min(100%, 420px); }
.special {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 10px 10px 12px; border-radius: 14px; text-align: left;
  background: linear-gradient(100deg, oklch(0.27 0.05 27 / 0.75), var(--bg-elev) 55%);
  border: 1px solid oklch(0.45 0.12 27 / 0.55);
}
.special:hover { border-color: var(--signal); }
.special__pack {
  display: grid; place-items: center; width: 36px; height: 50px; border-radius: 5px;
  background: linear-gradient(162deg, var(--signal-hi), var(--signal-lo));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18), 0 6px 14px -6px rgb(0 0 0 / 0.6);
}
.special__pack .card__plate b { font-size: 12px; padding: 3px 4px 2px; }
.special__text { display: grid; gap: 1px; min-width: 0; }
.special__kicker { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-hi); }
.special__name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* widgets de l'accueil */
.widget { display: grid; align-content: start; gap: 12px; padding: 16px; min-width: 0; text-decoration: none; }
.widget__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.widget__title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.widget__title .ico { width: 19px; height: 19px; color: var(--ink-3); }
.widget__meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.widget__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; font-size: 13px; color: var(--ink-3); }
.widget__clock { display: inline-flex; align-items: center; gap: 6px; }
.widget__clock .ico { width: 16px; height: 16px; }
.widget__clock b { font-family: var(--font-mono); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.widget__foot .link { font-size: 13px; }
.widget__empty { color: var(--ink-3); font-size: 14px; }
.widget__skel { display: grid; gap: 8px; }

.widget--war { transition: border-color 0.2s, background-color 0.2s; }
.widget--war:hover { border-color: var(--line); background: var(--bg-elev-2); }
.war__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.war__plate b { font-size: 22px; padding: 6px 8px 4px; border-radius: 0; }
.war__dep { display: grid; gap: 2px; min-width: 0; }
.war__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.war__pts { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.war__rank { display: grid; justify-items: end; line-height: 1; }
.war__rank b { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--ink); }
.war__rank span { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.war__lead { font-weight: 600; color: var(--ink); }
.war__rules { font-size: 13.5px; color: var(--ink-2); }
.war__go { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--signal-hi); }
.war__go .ico { width: 16px; height: 16px; }

.recent__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.recent__head .link { font-size: 13px; }

@media (min-width: 900px) {
  .home {
    grid-template-areas: "copy stage" "actions stage" "goal stage" "widgets widgets" "recent recent" "foot foot";
  }
  .home__widgets { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.85fr); align-items: start; margin-top: 18px; }
  .reserve, .home__tools { justify-content: flex-start; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .home__widgets { grid-template-columns: 1fr 1fr; }
  .widget--missions { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- missions */
.missions { display: grid; gap: 10px; }
.mission {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px; border-radius: 14px; background: var(--bg-elev-2); border: 1px solid transparent;
  transition: border-color 0.3s, background-color 0.3s;
}
.missions--compact .mission { padding: 10px 10px 10px 10px; background: color-mix(in oklch, var(--bg-elev-2) 70%, var(--bg-elev)); }
.mission__ico {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-elev); color: var(--ink-3); border: 1px solid var(--line-soft);
}
.mission__ico .ico { width: 19px; height: 19px; }
.mission__main { display: grid; gap: 6px; min-width: 0; }
.mission__label { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.mission__progress { display: flex; align-items: center; gap: 10px; }
.meter { position: relative; flex: 1; height: 5px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ink-2); transition: width 0.6s var(--ease); }
.mission__count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mission__side { display: grid; justify-items: end; gap: 6px; }
.mission__claim { min-height: 32px; padding: 0 14px; }
.mission__claimed {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--good); border: 1.5px solid color-mix(in oklch, var(--good) 60%, transparent); transform: rotate(-3deg);
}
.mission__claimed .ico { width: 14px; height: 14px; }
.mission.is-done { border-color: oklch(0.55 0.15 27 / 0.6); background: linear-gradient(100deg, oklch(0.28 0.06 27 / 0.6), var(--bg-elev-2) 60%); }
.mission.is-done .mission__ico { color: var(--signal-hi); border-color: oklch(0.55 0.15 27 / 0.5); }
.mission.is-done .meter i { background: var(--signal-hi); }
.mission.is-claimed .meter i { background: var(--good); }
.mission.is-claimed .mission__label { color: var(--ink-2); }
.mission.is-claimed .mission__ico { color: var(--good); }
.mission.is-celebrating { border-color: var(--gold-lo); }
.mission__go { justify-self: start; font-size: 13px; padding: 0; }

.reward {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.reward .ico { width: 16px; height: 16px; color: var(--stone); }
.reward--pack .ico { color: var(--signal-hi); }
.reward--big { font-size: 18px; }
.reward--big .ico { width: 20px; height: 20px; }

.mission--full { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 14px; align-items: start; }
.mission--full .mission__ico { width: 44px; height: 44px; border-radius: 12px; }
.mission--full .mission__ico .ico { width: 22px; height: 22px; }
.mission--full .mission__label { font-size: 17px; }
.mission--full .mission__side { grid-column: 2; display: flex; align-items: center; justify-content: space-between; justify-items: initial; }
.mission--full .reward { font-size: 15px; }
@media (min-width: 640px) {
  .mission--full { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .mission--full .mission__side { grid-column: auto; display: grid; justify-items: end; }
}

.mclock { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; margin-bottom: 14px; }
.mclock__time { font-family: var(--font-mono); font-size: 30px; font-weight: 500; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mclock__score { display: grid; justify-items: end; text-align: right; gap: 2px; }
.mclock__score b { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; }
.mclock__score span { font-size: 13px; color: var(--ink-3); max-width: 16ch; }
.view--missions .fineprint { margin-top: 18px; }
.view--missions .vhead { margin-bottom: 16px; }

/* ---------------------------------------------------------------- fil en direct */
.live-dot {
  position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--signal-hi); flex: none; margin: 0 2px;
}
.live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--signal-hi);
  animation: live 1.8s var(--ease) infinite; opacity: 0;
}
@keyframes live { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
.feed { list-style: none; margin: 0; padding: 0; display: grid; }
.feed__item {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 1px;
  padding: 9px 4px; border-top: 1px solid var(--line-soft); border-radius: 8px;
  transition: background-color 1.2s var(--ease);
}
.feed__item:first-child { border-top: 0; }
.feed__item.is-fresh { background: color-mix(in oklch, var(--c) 10%, transparent); }
.feed__gem { grid-row: span 2; width: 9px; height: 9px; margin-top: 6px; transform: rotate(45deg); border-radius: 2px; background: var(--c); box-shadow: 0 0 10px color-mix(in oklch, var(--c) 60%, transparent); }
.feed__line { font-size: 14px; color: var(--ink-2); line-height: 1.35; overflow-wrap: anywhere; }
.feed__who { color: var(--ink); font-weight: 600; }
.feed__pass { display: inline-grid; vertical-align: -2px; margin-left: 3px; color: var(--gold); }
.feed__pass .ico { width: 14px; height: 14px; }
.feed__dep {
  display: inline-block; margin-left: 5px; padding: 1px 4px 0; border-radius: 3px; vertical-align: 1px;
  background: oklch(0.42 0.16 262); color: white; font: 700 11px/1.3 var(--font-display); letter-spacing: 0.02em;
}
.feed__card {
  padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; text-align: left;
  text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--c) 60%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.feed__card:hover { color: var(--c); }
.feed__meta { font-size: 12px; color: var(--ink-3); }
.feed__tier { color: var(--c); font-weight: 600; }
.feed__empty { padding: 6px 2px 4px; font-size: 13.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- feuilles v1 */
.sheet__titles { display: grid; gap: 4px; min-width: 0; }
.sheet__titles .kicker { font-size: 12px; }
.sheet--wide .sheet__panel { max-width: 640px; }
.sheet__body > p b { color: var(--ink); }

/* fiche d'une carte */
.detail__sponsored {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: oklch(0.86 0.12 88 / 0.1); border: 1px solid oklch(0.86 0.12 88 / 0.35);
  color: var(--gold-hi); font-size: 13.5px; max-width: 100%;
}
.detail__sponsored .ico { width: 17px; height: 17px; flex: none; }
.detail__sponsored b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail__row { display: flex; gap: 10px; }
.detail__row .btn { flex: 1; }
.detail__fine { font-size: 12.5px; color: var(--ink-3); text-align: center; text-wrap: pretty; }
.tag--missing { background: transparent; border-style: dashed; color: var(--ink-3); }
.btn__price { display: inline-flex; align-items: center; gap: 4px; }
.btn__price .ico { width: 16px; height: 16px; }
.btn--primary .ico--pave, .btn--gold .ico--pave { color: currentColor; opacity: 0.85; }

.combat {
  width: 100%; display: grid; gap: 10px; padding: 14px 16px 12px; border-radius: 14px;
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgb(255 255 255 / 0.018) 7px 8px),
    var(--bg-elev);
  border: 1px solid var(--line-soft);
}
.combat__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.power {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px;
  background: color-mix(in oklch, var(--c) 18%, transparent); color: var(--c);
  border: 1px solid color-mix(in oklch, var(--c) 45%, transparent);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}
.power .ico { width: 14px; height: 14px; }
.combat__rows { display: grid; gap: 9px; }
.stat { display: grid; grid-template-columns: 92px minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.stat__name { display: grid; font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.15; }
.stat__name small { font-weight: 400; font-size: 11px; color: var(--ink-3); }
.stat__bar { height: 8px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
.stat__bar i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in oklch, var(--c) 55%, var(--bg-elev-2)), var(--c));
}
.stat__v { font-family: var(--font-mono); font-weight: 600; font-size: 16px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.combat__note { font-size: 13px; color: var(--ink-2); }
.combat__note b { color: var(--c); font-weight: 600; }
.combat__fine { font-size: 11.5px; color: var(--ink-3); }

/* taux d'apparition */
.rates-wrap { margin: 0 calc(var(--gutter) * -0.25); overflow-x: auto; }
.rates { font-size: 13px; }
.rates th, .rates td { padding: 9px 5px; }
.rates thead th { font-size: 11.5px; line-height: 1.2; vertical-align: bottom; }
.rates__group th { border-bottom: 0 !important; padding-bottom: 2px; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--ink-2); text-align: center !important; }
.rates .rates__gold { color: var(--gold-hi); background: oklch(0.86 0.12 88 / 0.05); }
.rates thead .rates__gold { color: var(--gold); }
.rates td.rates__gold small { display: block; font-size: 10.5px; color: var(--gold); }
.rates__tier { display: inline-flex; align-items: center; }
.rates__n { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.rates__unit { font-size: 11.5px; color: var(--ink-3); text-align: right; margin-top: 4px; }
body.is-golden .rates .rates__gold { background: oklch(0.86 0.12 88 / 0.12); }
.rates--scale td { font-family: var(--font-mono); }

/* ---------------------------------------------------------------- ouverture v1 */
.stage.is-golden { background: radial-gradient(120% 80% at 50% 45%, oklch(0.27 0.05 80), oklch(0.12 0.015 262) 72%); }
.stage.is-golden .stage__rays { --ray: oklch(0.86 0.13 88 / 0.2); }
.pack--golden .pack__body { box-shadow: inset 0 0 0 2px oklch(0.9 0.11 90 / 0.9), inset 0 -40px 60px -30px rgb(0 0 0 / 0.35); }
.stage__pack .pack--golden { filter: drop-shadow(0 0 34px oklch(0.84 0.13 86 / 0.55)) drop-shadow(0 30px 34px rgb(0 0 0 / 0.5)); }
.pack__map--dep { fill: rgb(255 255 255 / 0.16); stroke: rgb(255 255 255 / 0.55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.pack--special .pack__kicker { font-size: calc(var(--pw) * 0.05); letter-spacing: 0.08em; }

.stage__error {
  position: absolute; left: 50%; bottom: calc(var(--safe-b) + 22px); z-index: 8; translate: -50% 0;
  width: min(calc(100% - 32px), 420px); display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 20px 18px 18px; border-radius: 20px;
  background: oklch(0.19 0.016 262 / 0.96); border: 1px solid var(--line);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.8);
}
.stage__error-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: oklch(0.3 0.06 27 / 0.6); color: var(--signal-hi); }
.stage__error-ico .ico { width: 22px; height: 22px; }
.stage__error-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.05; }
.stage__error-text { font-size: 14px; color: var(--ink-2); text-wrap: pretty; }
.stage__error-actions { display: flex; gap: 10px; margin-top: 6px; }

.tag--dupe { gap: 7px; }
.tag__val { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); color: var(--ink-3); font-weight: 500; }
.tag__val .ico { width: 12px; height: 12px; }
.summary__foot { display: grid; gap: 14px; width: min(100%, 520px); margin: 0 auto; }
.summary__dupes { text-align: center; font-size: 13.5px; color: var(--ink-3); }
.rewards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reward-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 14px; background: oklch(0.2 0.016 262 / 0.9); border: 1px solid var(--line-soft);
}
.reward-row__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-elev-2); color: var(--ink-2); }
.reward-row__ico .ico { width: 18px; height: 18px; }
.reward-row__text { display: grid; gap: 1px; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
.reward-row__text b { color: var(--ink); font-weight: 600; font-size: 14.5px; }
.reward-row--signal { border-color: oklch(0.55 0.15 27 / 0.55); }
.reward-row--signal .reward-row__ico { background: oklch(0.32 0.08 27 / 0.7); color: var(--signal-hi); }
.reward-row--gold { border-color: oklch(0.7 0.11 82 / 0.4); }
.reward-row--gold .reward-row__ico { background: oklch(0.4 0.07 82 / 0.45); color: var(--gold-hi); }
.stage__summary { grid-template-rows: auto auto auto; align-content: center; }
.summary__actions { width: 100%; }

/* ---------------------------------------------------------------- effets de la page */
.fx-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 66; pointer-events: none; }
.flyers { position: fixed; inset: 0; z-index: 67; pointer-events: none; }
.flyer { position: absolute; left: 0; top: 0; fill: var(--stone); filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.5)); }
.flyer--pack { fill: var(--signal-hi); }
.ghost-card { z-index: 1; will-change: transform; }

/* ---------------------------------------------------------------- toasts v1 */
.toast { pointer-events: none; }
.toast--good { border-color: color-mix(in oklch, var(--good) 45%, var(--line)); }
.toast--gold { border-color: oklch(0.7 0.11 82 / 0.55); background: linear-gradient(100deg, oklch(0.3 0.04 80), oklch(0.26 0.018 262) 70%); }
.toast--bad { border-color: oklch(0.55 0.15 27 / 0.7); background: oklch(0.27 0.04 27); }
.toast--action { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 10px 10px 10px 16px; }
.toast__btn {
  flex: none; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 0;
  background: var(--signal); color: var(--on-signal); font-weight: 600; font-size: 13.5px;
}
.toast__btn:hover { background: var(--signal-hi); }
.toast--gold .toast__btn { background: var(--gold); color: var(--gold-ink); }
@media (max-width: 899px) { .toasts { top: calc(var(--safe-t) + var(--topbar-h) + 8px); } }

/* ---------------------------------------------------------------- en-têtes, liens */
.vhead .kicker { margin-top: 2px; }
.vhead--row { display: grid; gap: 14px; }
@media (min-width: 900px) { .vhead--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.atelier-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-panel); text-decoration: none;
  background: linear-gradient(100deg, oklch(0.26 0.02 85 / 0.7), var(--bg-elev) 60%); border: 1px solid var(--line-soft);
  transition: border-color 0.2s;
}
.atelier-link:hover { border-color: var(--line); }
.atelier-link__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg-elev-2); color: var(--stone); }
.atelier-link__ico .ico { width: 21px; height: 21px; }
.atelier-link__text { display: grid; gap: 1px; min-width: 0; }
.atelier-link__text b { font-weight: 600; }
.atelier-link__text span { font-size: 13px; color: var(--ink-3); }
.atelier-link__chev { color: var(--ink-3); }
button.slot { cursor: pointer; }
button.slot:not(.is-owned):hover { border-color: var(--ink-3); color: var(--ink-2); }
.badge {
  display: inline-flex; width: fit-content; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.badge--gold { background: oklch(0.86 0.12 90 / 0.15); color: var(--gold-hi); border: 1px solid oklch(0.86 0.12 90 / 0.35); }
.badge--signal { background: oklch(0.555 0.205 27 / 0.15); color: var(--signal-hi); border: 1px solid oklch(0.555 0.205 27 / 0.4); }
.home-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  margin-top: 24px; padding: 14px 16px; text-decoration: none;
}
.home-note > .ico { color: var(--signal-hi); }
.home-note > span { display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-3); }
.home-note b { color: var(--ink); font-weight: 600; font-size: 14.5px; }
.home-note__chev { color: var(--ink-3); }
.view--target .target-card { margin: 0 0 24px; }
.results__none { padding: 8px 2px; }
.result__body { display: grid; gap: 1px; min-width: 0; }
.result__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result__tier { color: var(--c); }
.result .card__plate { flex: none; }
.result .card__plate b { font-size: 15px; padding: 4px 6px 3px; }

/* ---------------------------------------------------------------- atelier */
.wrap--mid { max-width: 880px; }
.btn--lg { min-height: 52px; font-size: 16px; }
.balance {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
  padding: 18px; margin-bottom: 16px; overflow: hidden;
  background:
    repeating-radial-gradient(circle at 100% 0%, transparent 0 11px, oklch(0.84 0.035 85 / 0.06) 11px 12px),
    linear-gradient(160deg, oklch(0.25 0.022 85), var(--bg-elev) 70%);
}
.balance__main { display: flex; align-items: center; gap: 14px; }
.balance__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: oklch(0.3 0.025 85); color: var(--stone); box-shadow: inset 0 0 0 1px oklch(0.84 0.035 85 / 0.2); }
.balance__ico .ico { width: 34px; height: 34px; }
.balance__n { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 38px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.balance__unit { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.balance__side { display: grid; gap: 1px; text-align: right; font-size: 13px; color: var(--ink-3); }
.balance__side b { color: var(--ink); font-weight: 600; font-size: 14.5px; }
.balance__pass { position: absolute; right: 12px; top: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--gold); }
.balance__pass .ico { width: 13px; height: 13px; }
.balance:has(.balance__pass) .balance__side { margin-top: 10px; }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--line-soft); }
.seg__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: 999px;
  border: 0; background: transparent; color: var(--ink-3); font-weight: 600; font-size: 15px;
  transition: background-color 0.25s var(--ease), color 0.2s;
}
.seg__btn .ico { width: 19px; height: 19px; }
.seg__btn[aria-selected="true"] { background: var(--bg-elev-2); color: var(--ink); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 4px 14px -6px rgb(0 0 0 / 0.6); }
.seg__btn:hover { color: var(--ink); }

.recycle-all { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; }
.recycle-all__big { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.05; margin-top: 4px; }
.recycle-all__big span { color: var(--stone); }
.atelier-panel .section { margin-top: 28px; }

.tierlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tierrow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px;
  padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--line-soft);
}
.tierrow.is-empty { opacity: 0.5; }
.tierrow__gem { width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; background: var(--c); }
.tierrow__name { display: grid; font-weight: 600; font-size: 14.5px; line-height: 1.2; }
.tierrow__name small { font-weight: 400; font-size: 12px; color: var(--ink-3); }
.tierrow__n { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.tierrow__gain { font-family: var(--font-mono); font-weight: 600; font-size: 14px; min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.tierrow__pad { width: 82px; }
.tierrow .btn { min-width: 82px; }
@media (max-width: 480px) {
  .tierrow { grid-template-columns: auto minmax(0, 1fr) auto auto; row-gap: 2px; }
  .tierrow__n { grid-column: 2; grid-row: 2; }
  .tierrow__name { grid-row: 1; }
  .tierrow__gain { grid-row: 1 / span 2; grid-column: 3; }
  .tierrow .btn, .tierrow__pad { grid-row: 1 / span 2; grid-column: 4; }
  .tierrow__gem { grid-row: 1 / span 2; }
}

.dupes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
@media (min-width: 640px) { .dupes { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 900px) { .dupes { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.dupes__item { position: relative; display: grid; justify-items: center; gap: 6px; }
.dupes__item .tag { padding: 2px 8px; font-family: var(--font-mono); }
.recap { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.recap li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--bg-elev-2); }
.recap__gem { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--c); }
.recap b { font-family: var(--font-mono); color: var(--ink); }

.cost {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 11px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-mono); font-weight: 600; font-size: 13.5px; color: var(--ink);
  background: var(--bg-elev-2); border: 1px solid var(--line-soft); font-variant-numeric: tabular-nums;
}
.cost .ico { width: 15px; height: 15px; color: var(--stone); }
.cost.is-short { color: var(--ink-3); }
.result--craft { border-left: 3px solid var(--c); }
.result__flag { color: var(--signal-hi); font-weight: 600; }
.suggest { margin-top: 18px; }
.suggest__title { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.suggest .results { margin-top: 0; }
#craft-results { min-height: 40px; }
.scale { margin-top: 28px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.scale summary { cursor: pointer; font-weight: 600; color: var(--ink-2); font-size: 14.5px; list-style: none; display: flex; align-items: center; gap: 8px; }
.scale summary::-webkit-details-marker { display: none; }
.scale summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s; }
.scale[open] summary::before { transform: rotate(45deg); }
.scale table { margin-top: 10px; }
.scale .fineprint { margin-top: 8px; }

.sheet--craft .sheet__panel { max-width: 440px; }
.craft { display: grid; justify-items: center; gap: 12px; text-align: center; }
.craft__card { position: relative; width: min(56vw, 230px, calc((100dvh - 420px) * 0.716)); min-width: 150px; }
.craft__card .card { position: relative; z-index: 1; }
.craft__glow {
  position: absolute; inset: -14%; border-radius: 50%; opacity: 0.35;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--c) 55%, transparent), transparent 75%);
}
.craft__info { display: grid; gap: 2px; }
.craft__name { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.05; color: var(--ink); overflow-wrap: anywhere; }
.craft__meta { font-size: 13.5px; color: var(--ink-3); }
.craft__status { font-size: 14px; color: var(--ink-2); text-wrap: pretty; }
.craft__status .tag { margin-right: 4px; vertical-align: 1px; }
.craft__short { color: var(--signal-hi); font-weight: 600; }

/* ---------------------------------------------------------------- profil */
.idcard {
  --h: 250;
  position: relative; overflow: hidden; display: grid; gap: 12px; padding: 16px 18px 12px; margin-bottom: 16px;
  border-radius: 18px; color: oklch(0.24 0.02 262);
  background:
    repeating-radial-gradient(circle at -8% 120%, transparent 0 9px, color-mix(in oklch, oklch(0.56 0.105 var(--h)) 12%, transparent) 9px 10px),
    repeating-radial-gradient(circle at 108% -20%, transparent 0 9px, color-mix(in oklch, oklch(0.56 0.105 var(--h)) 12%, transparent) 9px 10px),
    linear-gradient(160deg, oklch(0.97 0.012 var(--h)), oklch(0.92 0.03 var(--h)));
  box-shadow: 0 0 0 4px oklch(0.56 0.105 var(--h)), 0 24px 50px -24px rgb(0 0 0 / 0.8);
  margin-inline: 4px;
}
.idcard--pass { box-shadow: 0 0 0 4px var(--gold-lo), 0 0 0 5px var(--gold-hi), 0 24px 50px -24px rgb(0 0 0 / 0.8); }
.idcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.idcard__kicker { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(0.38 0.085 var(--h)); }
.idcard__no { font-family: var(--font-mono); font-size: 11px; color: oklch(0.45 0.02 262); }
.idcard__pass { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: oklch(0.86 0.12 88); color: var(--gold-ink); font-weight: 700; font-size: 12px; }
.idcard__pass .ico { width: 14px; height: 14px; }
.idcard__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.idcard__photo {
  display: grid; place-items: center; width: 84px; aspect-ratio: 0.8; border-radius: 10px;
  background: linear-gradient(160deg, oklch(0.6 0.1 var(--h)), oklch(0.45 0.1 var(--h)));
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.25);
}
.idcard__photo .sign { font-size: 38px; }
.idcard__photo .sign__in { padding: 0.12em 0.3em 0.06em; }
.idcard__fields { display: grid; min-width: 0; }
.idcard__label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: oklch(0.5 0.03 262); }
.idcard__name { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; margin-bottom: 8px; overflow-wrap: anywhere; color: oklch(0.2 0.02 262); }
.idcard__value { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idcard__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding-top: 10px; border-top: 1px solid oklch(0.56 0.105 var(--h) / 0.25); }
.idcard__stats div { display: grid; gap: 1px; min-width: 0; }
.idcard__stats dt { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: oklch(0.5 0.03 262); }
.idcard__stats dd { margin: 0; font-family: var(--font-mono); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.idcard__mrz {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: oklch(0.45 0.03 262 / 0.75);
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}

.pf { display: grid; gap: 12px; padding: 18px 16px; margin-top: 12px; }
.pf__title { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; }
.pf__title .ico { width: 20px; height: 20px; color: var(--ink-3); }
.pf__text { font-size: 14px; color: var(--ink-2); text-wrap: pretty; }
.pf__text b { color: var(--ink); }
.pf__sub { font-size: 14px; font-weight: 600; color: var(--ink); }
.pf__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pf--pass.is-active { border-color: oklch(0.7 0.11 82 / 0.4); background: linear-gradient(160deg, oklch(0.25 0.03 82), var(--bg-elev) 65%); }
.pf--pass .pf__title .ico { color: var(--gold); }
.pf--links { gap: 0; padding: 6px 4px; }
.morelink { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 14.5px; }
.morelink:hover { background: var(--bg-elev-2); }
.morelink > .ico:first-child { color: var(--ink-3); }
.morelink + .morelink { border-top: 1px solid var(--line-soft); }
.morelink__chev { color: var(--ink-3); width: 16px; height: 16px; }
.notice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--bg-elev-2); font-size: 13.5px; color: var(--ink-2); }
.notice .ico { width: 17px; height: 17px; color: var(--ink-3); }
.notice code { font-family: var(--font-mono); color: var(--ink); }
.notice--bad { background: oklch(0.27 0.04 27); color: var(--ink); }
.count-pill { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--signal); color: var(--on-signal); font: 600 12px/1 var(--font-mono); }

.inline-form { display: flex; gap: 8px; }
.inline-form .input { flex: 1; min-width: 0; }
.input--plain { padding-left: 16px; }
.input--code { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.input--code::placeholder { letter-spacing: 0.08em; }
.inline-form .btn { min-height: 52px; flex: none; }
.input:disabled { opacity: 0.55; }
.field__error { font-size: 13.5px; color: oklch(0.78 0.13 27); font-weight: 500; }
.results--tight { margin-top: 4px; }

.homechip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.homechip__sign { font-size: 22px; max-width: 100%; }
.homechip__sign .sign__in { padding: 0.14em 0.5em 0.08em; text-align: center; overflow-wrap: anywhere; }
.homechip__dep { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.homechip__dep .card__plate b { font-size: 15px; padding: 4px 6px 3px; }

.savecode { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px dashed var(--line); }
.savecode__code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 19px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink); overflow-wrap: anywhere; }
.iconbtn--sm { width: 38px; height: 38px; }
.iconbtn--sm .ico { width: 19px; height: 19px; }

.ref { display: grid; gap: 12px; }
.ref__link { padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line-soft); overflow: hidden; }
.ref__link code { font-family: var(--font-mono); font-size: 14px; color: var(--ink); white-space: nowrap; }
.ref__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ref__stats div { padding: 10px 12px; border-radius: 10px; background: var(--bg-elev-2); }
.ref__stats dt { font-size: 12px; color: var(--ink-3); }
.ref__stats dd { margin: 0; font-family: var(--font-mono); font-weight: 600; font-size: 20px; }
.ref__claim { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }

.inbox { list-style: none; margin: 0; padding: 0; display: grid; }
.inbox__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px 2px; border-top: 1px solid var(--line-soft); }
.inbox__item:first-child { border-top: 0; padding-top: 2px; }
.inbox__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--bg-elev-2); color: var(--ink-3); }
.inbox__ico .ico { width: 17px; height: 17px; }
.inbox__item.is-new .inbox__ico { background: oklch(0.32 0.08 27 / 0.7); color: var(--signal-hi); }
.inbox__body { display: grid; gap: 2px; min-width: 0; }
.inbox__text { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.inbox__time { font-size: 12px; color: var(--ink-3); }
.inbox__empty { font-size: 13.5px; color: var(--ink-3); padding: 4px 0; }

.ob__lead { font-size: 14.5px; }
.ob__chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ob__chosen:empty { display: none; }
.sheet--onboarding .sheet__panel { max-width: 500px; }

/* ---------------------------------------------------------------- pied de page */
.site-foot { display: grid; justify-items: center; gap: 12px; padding: 34px 0 8px; margin-top: 16px; border-top: 1px solid var(--line-soft); text-align: center; }
.sign--foot { font-size: 13px; opacity: 0.85; }
.site-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.site-foot__links a { color: var(--ink-3); font-size: 13px; text-decoration: none; padding: 4px 0; }
.site-foot__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-foot__fine { font-size: 11.5px; color: color-mix(in oklch, var(--ink-3) 75%, transparent); max-width: 44ch; }

/* ---------------------------------------------------------------- écran d'accès (hors ligne, session) */
.gate {
  position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; overflow-y: auto;
  padding: calc(var(--safe-t) + 24px) var(--gutter) calc(var(--safe-b) + 24px);
  background:
    radial-gradient(70% 45% at 50% 30%, oklch(0.26 0.03 262), transparent 70%),
    radial-gradient(1px 1px at 20% 18%, rgb(255 255 255 / 0.5), transparent),
    radial-gradient(1px 1px at 78% 12%, rgb(255 255 255 / 0.35), transparent),
    radial-gradient(1.5px 1.5px at 64% 30%, rgb(255 255 255 / 0.3), transparent),
    radial-gradient(1px 1px at 34% 8%, rgb(255 255 255 / 0.35), transparent),
    oklch(0.13 0.014 262);
}
.gate__inner { width: min(100%, 420px); display: grid; justify-items: center; gap: 14px; text-align: center; }
.exit-sign { position: relative; margin-bottom: 14px; }
.exit-sign .sign { font-size: clamp(44px, 14vw, 64px); }
.exit-sign::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 7px; height: 70px; translate: -50% 0; z-index: -1;
  background: linear-gradient(90deg, oklch(0.5 0.01 262), oklch(0.72 0.01 262) 45%, oklch(0.42 0.01 262));
}
.exit-sign__bar {
  position: absolute; left: 4%; right: 4%; top: 50%; height: 0.11em; font-size: clamp(44px, 14vw, 64px);
  background: var(--signal); border-radius: 2px; transform-origin: 50% 50%; rotate: -16deg; translate: 0 -50%;
}
.exit-sign--auth .exit-sign__bar { display: none; }
.gate__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 9vw, 46px); line-height: 1; margin-top: 40px; }
.gate__text { color: var(--ink-2); font-size: 15.5px; text-wrap: pretty; }
.gate__text .mono { color: var(--ink); }
.gate__fine { font-size: 13px; color: var(--ink-3); }
.gate .btn--xl { width: min(100%, 320px); margin-top: 6px; }
.gate__form { width: 100%; display: grid; gap: 8px; text-align: left; margin-top: 6px; }
.gate__or { width: 100%; display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; }
.gate__or::before, .gate__or::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* ---------------------------------------------------------------- vues en préparation (modules de B absents) */
.feature { min-height: 50vh; }
.prep { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 48px 0 24px; }
.prep__sign .sign { font-size: 40px; }
.prep__sign .sign__in { padding: 0.25em 0.45em; }
.prep__sign .ico { width: 1em; height: 1em; color: var(--sign-ink); }
.prep__text { color: var(--ink-3); font-size: 14px; max-width: 40ch; margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .home__rays { animation: none; }
  .live-dot::after, .netbar__dot { animation: none; }
}
.mission__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mission--full .mission__side { justify-content: flex-start; }
.mission--full.is-claimed .reward { opacity: 0.5; }
@media (min-width: 900px) {
  .nav__ico .pip { right: auto; left: -9px; top: -7px; }
  .nav__ico .pip--dot { left: -4px; top: -3px; }
}
.widget__title { white-space: nowrap; }
.war__top { list-style: none; margin: 0; padding: 10px 0 0; display: grid; gap: 6px; border-top: 1px solid var(--line-soft); }
.war__top li { display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.war__top li.is-mine { color: var(--ink); font-weight: 600; }
.war__top .war__pos { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink-3); text-align: right; }
.war__top li:first-child .war__pos { color: var(--gold); }
.war__top .card__plate b { font-size: 12px; padding: 2px 4px 1px; }
.war__top span:nth-child(3) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.war__top b.mono { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }

/* gros bouton en attente du prochain paquet : un compte à rebours, pas un bouton éteint */
.home__actions .btn--xl.is-waiting:disabled {
  opacity: 1; cursor: default; color: var(--ink-2);
  background: var(--bg-elev); border-color: var(--line); box-shadow: none;
}
.home__actions .btn--xl.is-waiting .mono { color: var(--ink); }
.widget__head { flex-wrap: wrap; row-gap: 4px; }
.widget { grid-template-columns: minmax(0, 1fr); }
.mapbox__foot span:last-child { white-space: nowrap; }
.homechip__sign .sign__in span { display: block; }
.empty__actions { display: flex; flex-wrap: wrap; gap: 8px; }