/* ==========================================================================
   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); }

/* ---------------------------------------------------------------- v1.2 · comme une appli sur téléphone
   Pas d'éclair gris au toucher, pas de rafraîchissement par glissé vers le bas au milieu d'un paquet,
   pas de sélection du texte d'un bouton par appui long, réaction immédiate au toucher (sans délai de 300 ms),
   champs à 16 px (iOS ne zoome plus). Les survols ne vivent que sous (hover: hover) and (pointer: fine). */
html {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  scrollbar-color: var(--line) transparent;
}
body { overscroll-behavior-y: none; caret-color: var(--signal-hi); }
::selection { background: color-mix(in oklch, var(--signal) 55%, transparent); color: var(--ink); }
button, a, summary, label, [role="button"], [tabindex="0"] { touch-action: manipulation; }
button, [role="button"], .btn, .link, .iconbtn, .tag, .nav__link, .wallet__item, .me-btn, .brand, .card-btn, .card, .pack, .seg__btn {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
@media (pointer: coarse) {
  :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { font-size: 16px; }
}
.sheet__panel, .sheet__body { overscroll-behavior: contain; }

/* ---------------------------------------------------------------- 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: 4px;
  min-width: 0;
  color: var(--ink-3); text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: 0.005em;
  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); }
/* v1.2 · un seul indicateur, qui glisse d'un onglet à l'autre (js/main.js pose --ind-x et --ind-w) */
.nav__ind {
  position: absolute; top: 0; left: 0; width: var(--ind-w, 28px); height: 3px; border-radius: 0 0 3px 3px;
  background: var(--signal); pointer-events: none; opacity: 0;
  transform: translateX(var(--ind-x, 0px));
}
.nav.has-ind .nav__ind { opacity: 1; }
.nav.is-ready .nav__ind { transition: transform 0.36s var(--ease), width 0.36s var(--ease), opacity 0.2s var(--ease); }
.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 */
/* v1.2 · changement d'onglet orienté : la vue arrive du côté de l'onglet touché (court, souvent répété) */
.view { animation: view-in 0.3s var(--ease) both; }
.view[data-enter="r"] { animation-name: view-in-r; }
.view[data-enter="l"] { animation-name: view-in-l; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes view-in-r { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes view-in-l { from { opacity: 0; transform: translateX(-18px); } 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);
}
@media (hover: hover) and (pointer: fine) { .btn--primary:hover:not(:disabled) { background: var(--signal-hi); } }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); } }
.btn--quiet { background: var(--bg-elev); border-color: var(--line-soft); }
@media (hover: hover) and (pointer: fine) { .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;
}
@media (hover: hover) and (pointer: fine) { .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);
}
@media (hover: hover) and (pointer: fine) { .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__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; }
.home__tools .help-btn { margin-left: -6px; }

.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;
}
@media (hover: hover) and (pointer: fine) { .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; }
  @media (hover: hover) and (pointer: fine) { .nav__link:hover { color: var(--ink); background: var(--bg-elev); } }
  .nav { position: relative; isolation: isolate; }
  .nav__ind { top: 50%; height: 36px; margin-top: -18px; border-radius: 999px; background: var(--bg-elev-2); z-index: -1; }
  .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__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;
  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;
}
/* une couche graphique seulement pour les cartes qui bougent (avant : chaque miniature d'un classeur en
   avait une, des centaines sur iPhone, au risque de tuiles qui clignotent quand la mémoire manque) */
.card.is-live .card__tilt, .card.is-flip .card__tilt { 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;
  /* groupe isolé : les modes de fusion du film holographique se mélangent au papier (pas au contexte 3D du retournement) */
  isolation: isolate;
  -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); }
/* Retournement (Safari iOS) : deux faces au même plan se départagent par l'ordre du DOM, et le verso (second)
   passe devant le recto dès qu'une couche du film holographique échappe à backface-visibility. Décollées
   d'un demi-pixel, chacune de son côté, la face tournée vers le joueur gagne toujours. */
.card.is-flip .card__front { transform: translateZ(0.5px); }
.card.is-flip .card__back { transform: rotateY(180deg) translateZ(0.5px); }
/* une carte qui ne se retourne jamais (classeurs, récapitulatifs, miniatures) n'a pas de verso à dessiner :
   deux fois moins de calques, et aucun verso qui passe devant si un moteur rate le masquage de la face arrière */
.card:not(.is-flip) .card__back { display: none; }

/* 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);
}

/* ---------------------------------------------------------------- film holographique (raretés 3 à 6)
   Un film de sécurité comme sur une pièce d'identité : irisation, réseau d'hexagones, paillettes,
   reflet qui suit la lumière (souris, doigt, inclinaison du téléphone). js/holo.js pose --px, --py
   (0 à 100), --shine et --fc (0 à 1) sur .card__fx, .card__mapfx et .card__aura de la carte vivante.
   Lisibilité d'abord : sur papier clair les couleurs passent en multiply (le texte ne pâlit jamais),
   l'éclat vif reste sur le cadre (color-dodge) ; la nuit des Légendaires prend tout en color-dodge.
   Au repos (classeurs, miniatures, mouvement réduit), le film reste visible, figé sous un bel angle.
   .card__fx ne crée pas de contexte d'empilement : ses couches se mélangent au papier. */
.card { --foil: 0; --frame-foil: 0; --lattice: 0; --sparkle: 0; --mapfoil: 0; --glare: 0.42; }
.card[data-tier="3"] { --foil: 0.62; --frame-foil: 0.5; --glare: 0.5; }
.card[data-tier="4"] { --foil: 0.34; --frame-foil: 0.66; --lattice: 0.5; --mapfoil: 0.55; --glare: 0.56; }
.card[data-tier="5"] { --foil: 0.46; --frame-foil: 0.82; --lattice: 0.62; --sparkle: 0.7; --mapfoil: 0.7; --glare: 0.62; }
.card[data-tier="6"] { --foil: 0.52; --frame-foil: 1; --lattice: 0.7; --sparkle: 1; --mapfoil: 0.55; --glare: 0.66; }

.card__fx, .card__mapfx {
  --px: 50; --py: 50; --shine: 0; --fc: 0;
  /* décalage des dégradés : un cycle d'irisation d'un bord de la carte à l'autre */
  --bx: calc(50% + (var(--px) - 50) * 0.62%);
  --by: calc(50% + (var(--py) - 50) * 0.62%);
  --bx2: calc(50% - (var(--px) - 50) * 0.4%);
  --by2: calc(50% - (var(--py) - 50) * 0.4%);
  --lx: calc(var(--px) * 1%);
  --ly: calc(var(--py) * 1%);
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.card__fx > i { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }

/* irisation du papier : pastels en multiply */
.fx-foil {
  opacity: calc(var(--foil) * (0.55 + var(--shine) * 0.45));
  background-image: repeating-linear-gradient(115deg,
    oklch(0.9 0.08 20) 0%, oklch(0.95 0.08 95) 5%, oklch(0.93 0.08 155) 10%,
    oklch(0.91 0.07 210) 15%, oklch(0.89 0.08 280) 20%, oklch(0.9 0.08 340) 25%, oklch(0.9 0.08 20) 30%);
  background-size: 200% 200%;
  background-position: var(--bx) var(--by);
  mix-blend-mode: multiply;
}
/* éclat du cadre : arc-en-ciel métallisé, en color-dodge, limité à la bordure */
.fx-frame {
  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);
  opacity: calc(var(--frame-foil) * (0.5 + var(--shine) * 0.5));
  background-image:
    repeating-linear-gradient(115deg,
      oklch(0.62 0.17 20) 0%, oklch(0.78 0.15 95) 5%, oklch(0.72 0.16 150) 10%,
      oklch(0.66 0.12 210) 15%, oklch(0.56 0.15 285) 20%, oklch(0.62 0.17 340) 25%, oklch(0.62 0.17 20) 30%),
    repeating-linear-gradient(62deg, oklch(0.35 0.02 262) 0%, oklch(0.85 0.02 262) 2.4%, oklch(0.35 0.02 262) 4.8%);
  background-size: 200% 200%, 300% 300%;
  background-position: var(--bx) var(--by), var(--bx2) var(--by2);
  background-blend-mode: soft-light;
  mix-blend-mode: color-dodge;
}
/* réseau d'hexagones de sécurité : il s'allume là où tombe la lumière */
.fx-lattice {
  opacity: calc(var(--lattice) * (0.3 + var(--shine) * 0.7));
  background-image: repeating-linear-gradient(115deg,
    oklch(0.6 0.2 20) 0%, oklch(0.75 0.17 95) 5%, oklch(0.68 0.19 150) 10%,
    oklch(0.62 0.15 220) 15%, oklch(0.55 0.2 290) 20%, oklch(0.6 0.2 340) 25%, oklch(0.6 0.2 20) 30%);
  background-size: 200% 200%;
  background-position: var(--bx2) var(--by2);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.32' height='30' viewBox='0 0 17.32 30'%3E%3Cpath d='M8.66 0 17.32 5v10L8.66 20 0 15V5zM8.66 20v10' fill='none' stroke='%23000' stroke-width='.9'/%3E%3C/svg%3E"), radial-gradient(circle at var(--lx) var(--ly), #000 0%, rgb(0 0 0 / 0.55) 30%, transparent 62%);
  -webkit-mask-size: 7.2cqw auto, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.32' height='30' viewBox='0 0 17.32 30'%3E%3Cpath d='M8.66 0 17.32 5v10L8.66 20 0 15V5zM8.66 20v10' fill='none' stroke='%23000' stroke-width='.9'/%3E%3C/svg%3E"), radial-gradient(circle at var(--lx) var(--ly), #000 0%, rgb(0 0 0 / 0.55) 30%, transparent 62%);
  mask-size: 7.2cqw auto, 100% 100%;
  mask-composite: intersect;
  mix-blend-mode: multiply;
}
/* paillettes : seules celles qui croisent la lumière scintillent (Capitale : cadre et carte ; Légendaire : ciel étoilé) */
.fx-sparkle {
  opacity: calc(var(--sparkle) * (0.4 + var(--shine) * 0.6));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='6' cy='9' r='0.9'/%3E%3Ccircle cx='21' cy='3' r='0.5'/%3E%3Ccircle cx='37' cy='12' r='1.25'/%3E%3Ccircle cx='55' cy='6' r='0.6'/%3E%3Ccircle cx='12' cy='26' r='0.6'/%3E%3Ccircle cx='29' cy='22' r='0.8'/%3E%3Ccircle cx='47' cy='28' r='0.5'/%3E%3Ccircle cx='60' cy='20' r='1'/%3E%3Ccircle cx='4' cy='41' r='1.1'/%3E%3Ccircle cx='19' cy='47' r='0.5'/%3E%3Ccircle cx='33' cy='38' r='0.7'/%3E%3Ccircle cx='50' cy='44' r='1.3'/%3E%3Ccircle cx='62' cy='52' r='0.5'/%3E%3Ccircle cx='9' cy='58' r='0.7'/%3E%3Ccircle cx='26' cy='60' r='1'/%3E%3Ccircle cx='42' cy='55' r='0.6'/%3E%3Ccircle cx='57' cy='35' r='0.4'/%3E%3Ccircle cx='15' cy='15' r='0.4'/%3E%3Ccircle cx='44' cy='2' r='0.4'/%3E%3Ccircle cx='3' cy='30' r='0.3'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='6' cy='9' r='0.9'/%3E%3Ccircle cx='21' cy='3' r='0.5'/%3E%3Ccircle cx='37' cy='12' r='1.25'/%3E%3Ccircle cx='55' cy='6' r='0.6'/%3E%3Ccircle cx='12' cy='26' r='0.6'/%3E%3Ccircle cx='29' cy='22' r='0.8'/%3E%3Ccircle cx='47' cy='28' r='0.5'/%3E%3Ccircle cx='60' cy='20' r='1'/%3E%3Ccircle cx='4' cy='41' r='1.1'/%3E%3Ccircle cx='19' cy='47' r='0.5'/%3E%3Ccircle cx='33' cy='38' r='0.7'/%3E%3Ccircle cx='50' cy='44' r='1.3'/%3E%3Ccircle cx='62' cy='52' r='0.5'/%3E%3Ccircle cx='9' cy='58' r='0.7'/%3E%3Ccircle cx='26' cy='60' r='1'/%3E%3Ccircle cx='42' cy='55' r='0.6'/%3E%3Ccircle cx='57' cy='35' r='0.4'/%3E%3Ccircle cx='15' cy='15' r='0.4'/%3E%3Ccircle cx='44' cy='2' r='0.4'/%3E%3Ccircle cx='3' cy='30' r='0.3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 21cqw 21cqw, 13cqw 13cqw;
  background-position: calc(var(--px) * -0.1cqw) calc(var(--py) * -0.1cqw), calc(var(--px) * 0.07cqw + 6cqw) calc(var(--py) * 0.07cqw + 3cqw);
  -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 0%, rgb(0 0 0 / 0.4) 38%, transparent 75%);
  mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 0%, rgb(0 0 0 / 0.4) 38%, transparent 75%);
  mix-blend-mode: color-dodge;
}
/* lumière : ombre de la lampe en multiply (papier clair) et reflet spéculaire en overlay (toutes raretés) */
.fx-shade {
  opacity: calc(var(--shine) * 0.85);
  background: radial-gradient(farthest-corner circle at var(--lx) var(--ly), transparent 28%, oklch(0.6 0.035 262 / 0.3) 100%);
  mix-blend-mode: multiply;
}
.fx-glare {
  opacity: calc(var(--shine) * var(--glare));
  background: radial-gradient(farthest-corner circle at var(--lx) var(--ly), oklch(1 0 0 / 0.85) 0%, oklch(1 0 0 / 0.32) 16%, transparent 48%);
  mix-blend-mode: overlay;
}
/* fenêtre de la carte de France (Préfecture et plus) : irisation propre, comme l'image d'une carte holo */
.card__mapfx {
  z-index: 0;
  opacity: calc(var(--mapfoil) * (0.5 + var(--shine) * 0.5));
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='6' cy='9' r='0.9'/%3E%3Ccircle cx='21' cy='3' r='0.5'/%3E%3Ccircle cx='37' cy='12' r='1.25'/%3E%3Ccircle cx='55' cy='6' r='0.6'/%3E%3Ccircle cx='12' cy='26' r='0.6'/%3E%3Ccircle cx='29' cy='22' r='0.8'/%3E%3Ccircle cx='47' cy='28' r='0.5'/%3E%3Ccircle cx='60' cy='20' r='1'/%3E%3Ccircle cx='4' cy='41' r='1.1'/%3E%3Ccircle cx='19' cy='47' r='0.5'/%3E%3Ccircle cx='33' cy='38' r='0.7'/%3E%3Ccircle cx='50' cy='44' r='1.3'/%3E%3Ccircle cx='62' cy='52' r='0.5'/%3E%3Ccircle cx='9' cy='58' r='0.7'/%3E%3Ccircle cx='26' cy='60' r='1'/%3E%3Ccircle cx='42' cy='55' r='0.6'/%3E%3Ccircle cx='57' cy='35' r='0.4'/%3E%3Ccircle cx='15' cy='15' r='0.4'/%3E%3Ccircle cx='44' cy='2' r='0.4'/%3E%3Ccircle cx='3' cy='30' r='0.3'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(115deg,
      oklch(0.8 0.13 20) 0%, oklch(0.9 0.12 95) 5%, oklch(0.86 0.13 155) 10%,
      oklch(0.82 0.11 210) 15%, oklch(0.78 0.13 280) 20%, oklch(0.8 0.13 340) 25%, oklch(0.8 0.13 20) 30%);
  background-size: 12cqw 12cqw, 220% 220%;
  background-position: calc(var(--px) * -0.08cqw) calc(var(--py) * -0.08cqw), var(--bx) var(--by);
  mix-blend-mode: multiply;
}
.card__coord { z-index: 1; }
/* aura des Légendaires (carte vivante seulement) */
.card__aura {
  --shine: 0;
  position: absolute; inset: -2cqw; border-radius: 7cqw; pointer-events: none;
  opacity: 0;
  background: conic-gradient(from 200deg, oklch(0.86 0.13 90 / 0.9), oklch(0.8 0.14 60 / 0.6), oklch(0.9 0.1 100 / 0.9), oklch(0.78 0.13 75 / 0.6), oklch(0.86 0.13 90 / 0.9));
  filter: blur(5cqw);
  transition: opacity 0.6s var(--ease);
}
.card.is-live .card__aura { opacity: var(--aura, 0); transition: none; } /* --aura monte en douceur (js/holo.js) */
/* carte vivante : pas de couche graphique par calque du film (v1.4) : background-position se repeint de toute
   façon, et sur Safari une couche à part en mix-blend-mode change de rendu au moment où elle est créée (le film
   « sautait » quand la carte devenait vivante). Seule .card__tilt est promue. */

/* Légendaire : nuit étoilée, or brossé */
.card[data-tier="6"] .fx-foil {
  background-image: repeating-linear-gradient(115deg,
    oklch(0.46 0.16 20) 0%, oklch(0.58 0.13 90) 5%, oklch(0.52 0.15 155) 10%,
    oklch(0.48 0.12 220) 15%, oklch(0.42 0.17 290) 20%, oklch(0.46 0.16 340) 25%, oklch(0.46 0.16 20) 30%);
  mix-blend-mode: color-dodge;
  /* la nébuleuse reste sur le papier : le cadre garde son or brossé */
  padding: 3.3cqw;
  -webkit-mask-image: linear-gradient(160deg, #000 10%, rgb(0 0 0 / 0.45) 55%, #000 100%);
  mask-image: linear-gradient(160deg, #000 10%, rgb(0 0 0 / 0.45) 55%, #000 100%);
  -webkit-mask-clip: content-box;
  mask-clip: content-box;
}
.card[data-tier="6"] .fx-frame {
  background-image:
    repeating-linear-gradient(108deg,
      oklch(0.5 0.1 70) 0%, oklch(0.96 0.07 95) 3.5%, oklch(0.62 0.11 78) 7%, oklch(0.88 0.1 90) 10.5%, oklch(0.5 0.1 70) 14%),
    repeating-linear-gradient(115deg,
      oklch(0.58 0.08 20) 0%, oklch(0.66 0.08 95) 5%, oklch(0.62 0.08 150) 10%, oklch(0.6 0.06 210) 15%, oklch(0.55 0.08 285) 20%, oklch(0.58 0.08 20) 25%);
  background-blend-mode: soft-light;
}
.card[data-tier="6"] .fx-lattice {
  background-image: linear-gradient(oklch(0.72 0.12 85), oklch(0.6 0.12 70));
  mix-blend-mode: color-dodge;
}
.card[data-tier="6"] .fx-glare { mix-blend-mode: soft-light; }
.card[data-tier="6"] .card__mapfx { mix-blend-mode: color-dodge; }

/* 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);
}
.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__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__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; }
  /* miniature : l'irisation et l'éclat du cadre suffisent à lire la rareté */
  .fx-lattice, .fx-sparkle, .fx-shade, .fx-glare { display: none; }
  .card__mapfx { background-size: 0 0, 220% 220%; }
}

/* 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; }
@media (hover: hover) and (pointer: fine) { .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;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  --deck-w: min(76vw, 330px, calc((100dvh - 300px) * 0.716));
}
.stage:focus { outline: none; }
/* le fond se lève seul (--bg-o, js/opening.js) : le sachet qui part de l'accueil reste opaque pendant le fondu */
.stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 45%, oklch(0.22 0.03 262), oklch(0.12 0.015 262) 70%);
  opacity: var(--bg-o, 1);
}
.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__ring {
  grid-area: 1 / 1; width: var(--deck-w); aspect-ratio: 63 / 88; border-radius: 6%;
  border: 2px solid var(--c); pointer-events: none; z-index: 0;
  box-shadow: 0 0 34px 4px color-mix(in oklch, var(--c) 70%, transparent), inset 0 0 26px color-mix(in oklch, var(--c) 60%, transparent);
}
.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; padding-top: 30px; }
.summary__close { position: absolute; top: calc(var(--safe-t) + 12px); right: max(10px, var(--gutter) - 6px); z-index: 2; }
@media (min-width: 760px) { .summary__head { padding-top: 0; } }
.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; min-height: 44px;
  color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 600; padding: 6px 12px 6px 0;
}
.back .ico { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .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)); }
@media (hover: hover) and (pointer: fine) { .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);
}
@media (hover: hover) and (pointer: fine) { .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:focus-visible { background: var(--bg-elev-2); border-color: var(--line); }
@media (hover: hover) and (pointer: fine) { .result:hover { 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; }
.holo-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: -4px;
  min-height: 36px; padding: 6px 14px 6px 11px; border-radius: 999px;
  border: 1px solid oklch(0.86 0.12 88 / 0.28);
  background: linear-gradient(100deg, oklch(0.86 0.12 88 / 0.1), oklch(0.74 0.17 350 / 0.08) 50%, oklch(0.73 0.13 242 / 0.1));
  color: var(--ink-2); font-size: 13.5px; font-weight: 500; line-height: 1.25; text-align: left;
  animation: chip-in 0.5s var(--ease) 0.6s both;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.holo-chip .ico { color: var(--gold, oklch(0.86 0.12 88)); }
.holo-chip:active:not(:disabled) { transform: scale(0.97); }
.holo-chip.is-done { border-color: var(--line-soft); }
.holo-chip.is-out { opacity: 0; transform: translateY(-4px); }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px); } }
.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);
}
@media (hover: hover) and (pointer: fine) { .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;
}
@media (hover: hover) and (pointer: fine) { .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;
}
@media (hover: hover) and (pointer: fine) { .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; } }

/* ---------------------------------------------------------------- v1.4 · mes classements (accueil) */
.ranks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: min(100%, 460px); margin-top: 2px; }
.rank-tile {
  position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; min-height: 118px;
  padding: 12px 14px; border-radius: var(--r-panel); text-decoration: none; color: var(--ink);
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.16s var(--ease);
}
.rank-tile:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .rank-tile:hover { border-color: var(--line); } }
.rank-tile--league {
  background: linear-gradient(155deg, color-mix(in oklch, var(--lg, var(--t6)) 20%, var(--bg-elev)), var(--bg-elev) 72%);
  border-color: color-mix(in oklch, var(--lg, var(--t6)) 34%, var(--line-soft));
}
.rank-tile--dep {
  background: linear-gradient(155deg, color-mix(in oklch, var(--signal) 17%, var(--bg-elev)), var(--bg-elev) 72%);
  border-color: color-mix(in oklch, var(--signal) 32%, var(--line-soft));
}
.rank-tile__k { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.rank-tile__k .ico { flex: none; width: 15px; height: 15px; color: var(--ink-3); }
.rank-tile__main { display: flex; align-items: center; gap: 9px; min-width: 0; padding-right: 14px; }
.rank-tile__main .lg-badge { width: 36px; height: auto; }
.rank-tile__v { min-width: 0; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 0.95; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-tile__v.is-word { font-size: 22px; line-height: 1.05; }
.rank-tile__plate { min-width: 40px; padding: 6px 7px 4px; border-radius: 6px; font-size: 19px; }
.rank-tile__none { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-elev-2); color: var(--ink-3); }
.rank-tile__none .ico { width: 20px; height: 20px; }
.rank-tile__s {
  font-size: 12.5px; line-height: 1.3; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rank-tile__chev { position: absolute; top: 50px; right: 9px; width: 16px; height: 16px; color: var(--ink-3); }

/* v1.4 · la Boutique sans la chercher : tuile discrète, gros bouton quand la réserve est vide */
.shop-tile { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; color: var(--ink); transition: border-color 0.2s, background-color 0.2s; }
@media (hover: hover) and (pointer: fine) { .shop-tile:hover { border-color: var(--line); background: var(--bg-elev-2); } }
.shop-tile__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in oklch, var(--gold) 15%, var(--bg-elev-2)); color: var(--gold-hi); }
.shop-tile__ico .ico { width: 22px; height: 22px; }
.shop-tile__txt { display: grid; gap: 2px; min-width: 0; }
.shop-tile__txt b { font-size: 15px; font-weight: 600; }
.shop-tile__txt span { font-size: 13.5px; color: var(--ink-3); }
.shop-tile__chev { color: var(--ink-3); }
.home__more .ico { width: 20px; height: 20px; color: var(--gold-hi); }
.mpass--war { display: flex; width: fit-content; margin-top: 18px; border-color: color-mix(in oklch, var(--signal) 40%, transparent); background: color-mix(in oklch, var(--signal) 10%, transparent); color: var(--ink); }
.mpass--war + .mpass { margin-top: 10px; }

/* ---------------------------------------------------------------- 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)); }

.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);
}
@media (hover: hover) and (pointer: fine) { .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__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; }
@media (hover: hover) and (pointer: fine) { .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__rank b.is-none { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.war__lead { font-weight: 600; color: var(--ink); }
.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: 14px 18px; margin-bottom: 14px; }
.mclock__time { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 28px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mclock__time .ico { width: 24px; height: 24px; color: var(--ink-3); }
.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); }
.mclock__score .mclock__claim { color: var(--signal-hi); font-weight: 600; }
.view--missions .vhead { margin-bottom: 16px; }
.vhead__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mpass {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px 8px 12px; border-radius: 999px;
  border: 1px solid oklch(0.8 0.09 85 / 0.35); background: oklch(0.86 0.12 90 / 0.08);
  color: oklch(0.9 0.1 90); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.mpass .ico { width: 16px; height: 16px; }
a.mpass { transition: background-color 0.2s var(--ease), transform 0.16s var(--ease); }
a.mpass:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { a.mpass:hover { background: oklch(0.86 0.12 90 / 0.16); } }

/* ---------------------------------------------------------------- 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;
}
@media (hover: hover) and (pointer: fine) { .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::before { 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; }
.toasts.is-held { visibility: hidden; }
.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;
}
@media (hover: hover) and (pointer: fine) { .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;
}
@media (hover: hover) and (pointer: fine) { .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; }
@media (hover: hover) and (pointer: fine) { 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); }
@media (hover: hover) and (pointer: fine) { .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; }
@media (hover: hover) and (pointer: fine) { .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; }
@media (hover: hover) and (pointer: fine) { .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: flex-start; justify-content: space-between; gap: 10px; }
.mission__top .reward { margin-top: 2px; }
.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; }

/* ==========================================================================
   v1.2 · rétention : le tampon du jour, « Pendant ton absence », installation
   ========================================================================== */
.dl-stamp { display: block; width: 100%; height: 100%; overflow: visible; }

/* carte de l'accueil */
.dl-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: min(100%, 420px); padding: 10px 12px 10px 10px; text-align: left;
  border-color: oklch(0.6 0.2 28 / 0.35);
  background: linear-gradient(100deg, oklch(0.26 0.05 28 / 0.55), var(--bg-elev) 60%);
}
.dl-card__mark { width: 40px; height: 40px; color: oklch(0.68 0.19 28); transform: rotate(-10deg); opacity: 0.9; }
.dl-card__text { display: grid; gap: 1px; min-width: 0; font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.dl-card__text b { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.dl-streak { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.dl-streak .ico { width: 15px; height: 15px; color: var(--signal-hi); }
.dl-card .btn { white-space: nowrap; }
.dl-card__nums { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.dl-card__gain { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dl-card__gain .ico { width: 15px; height: 15px; }
@media (min-width: 900px) { .dl-card { justify-self: start; } }

/* feuille du tampon */
.sheet--daily .sheet__panel, .sheet--recap .sheet__panel, .sheet--install .sheet__panel { max-width: 480px; }
.dl-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.dl-say { color: var(--ink-2); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.dl-week { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dl-day { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.dl-day__slot {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 12px;
  border: 1.5px dashed var(--line); color: var(--ink-3);
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  background: oklch(0.18 0.014 262);
}
.dl-day__slot .ico { width: 46%; height: 46%; }
.dl-day__gain { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-day--done .dl-day__slot {
  border: 0; color: oklch(0.62 0.2 28); padding: 8%;
  background: oklch(0.95 0.012 85);
  box-shadow: inset 0 0 0 1px oklch(0.85 0.02 85), 0 4px 10px -4px rgb(0 0 0 / 0.6);
}
.dl-day--done .dl-stamp { transform: rotate(-8deg); }
.dl-day--done .dl-day__gain { color: var(--ink-2); }
.dl-day--today .dl-day__slot {
  border: 1.5px solid var(--signal-hi); color: var(--ink);
  background: oklch(0.3 0.08 28 / 0.55);
  box-shadow: 0 0 0 4px oklch(0.6 0.2 28 / 0.18);
}
.dl-day--today .dl-day__gain { color: var(--ink); font-weight: 600; }
.dl-day--pack:not(.dl-day--done) .dl-day__slot { color: var(--gold, oklch(0.86 0.12 88)); border-color: oklch(0.7 0.11 82 / 0.5); }
.dl-day--pack .dl-day__gain { color: var(--gold, oklch(0.86 0.12 88)); }
.dl-week--compact { gap: 5px; }
.dl-week--compact .dl-day__slot { border-radius: 10px; font-size: 15px; }
.dl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dl-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--ink); font-size: 15px; font-weight: 500; }
.dl-next { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }
.dl-next b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }
.dl-next .ico { width: 15px; height: 15px; }

/* pendant ton absence */
.rc-daily {
  display: grid; gap: 10px; padding: 12px; border-radius: 14px;
  border: 1px solid oklch(0.6 0.2 28 / 0.35); background: oklch(0.22 0.03 28 / 0.35);
}
.rc-daily__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rc-daily__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.rc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rc-row {
  position: relative; 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);
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.12s var(--ease);
}
.rc-row__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-elev-2); color: var(--ink-2); }
.rc-row__ico .ico { width: 18px; height: 18px; }
.rc-row__text { display: grid; gap: 2px; min-width: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.rc-row__text b { color: var(--ink); font-weight: 600; font-size: 14.5px; }
.rc-row__text .who--btn { position: relative; z-index: 1; color: var(--ink); font-size: inherit; }
.rc-row__last { display: block; }
.rc-row--signal .rc-row__ico { background: oklch(0.32 0.08 27 / 0.7); color: var(--signal-hi); }
.rc-row--gold .rc-row__ico { background: oklch(0.4 0.07 82 / 0.45); color: var(--gold-hi, oklch(0.92 0.1 92)); }
.rc-row--good .rc-row__ico { background: oklch(0.36 0.07 152 / 0.5); color: var(--good, oklch(0.78 0.14 152)); }
.rc-row.has-go:has(.rc-row__go:active) { transform: scale(0.985); background: var(--bg-elev-2); }
@media (hover: hover) and (pointer: fine) { .rc-row.has-go:has(.rc-row__go:hover) { background: var(--bg-elev-2); border-color: var(--line); } }
.rc-row__go {
  display: inline-flex; align-items: center; gap: 2px; padding: 6px 0; border: 0; background: none;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--signal-hi); white-space: nowrap; cursor: pointer;
}
/* toute la ligne déclenche l'action */
.rc-row__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rc-row__go:focus-visible { outline: none; }
.rc-row:has(.rc-row__go:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.rc-row__go .ico { width: 15px; height: 15px; }
@media (max-width: 380px) { .rc-row__go { font-size: 0; gap: 0; } .rc-row__go .ico { width: 18px; height: 18px; } }

/* installation */
.inst-art { display: grid; justify-items: center; gap: 8px; padding: 6px 0 2px; }
.inst-art__icon { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 0 0 1px oklch(1 0 0 / 0.08), 0 14px 30px -12px rgb(0 0 0 / 0.8); }
.inst-art__name { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.inst-lead { color: var(--ink-2); font-size: 15px; line-height: 1.5; text-align: center; text-wrap: pretty; }
.inst-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.inst-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.inst-steps b { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.inst-steps b .ico { width: 18px; height: 18px; color: oklch(0.72 0.12 245); }
.inst-steps__n {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-elev-2); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 15px;
}

/* ---------------------------------------------------------------- v1.2 · retour au toucher (pointerdown, 120 ms)
   Les panneaux cliquables s'enfoncent légèrement sous le doigt ; les cartes aussi. */
.goal, .widget--war, .special, .dep, .slot, .result, .feed__card, .atelier-link, .morelink, .lu-card .btn {
  transition: transform 0.16s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.goal:active, .widget--war:active, .special:active, .result:active, .feed__card:active, .atelier-link:active, .morelink:active { transform: scale(0.985); }
.slot:active { transform: scale(0.95); }
.card-btn .card__tilt { transition: transform 0.16s var(--ease); }
.card-btn:active .card__tilt { transform: scale(0.965); }
/* pastille qui apparaît (js/notify.js) */
.pip.is-pop { animation: pip-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes pip-pop { from { transform: scale(0.4); opacity: 0; } }

/* ---------------------------------------------------------------- v1.3 · aide « ? »
   Les explications détaillées vivent derrière ce bouton, jamais sur l'écran. */
.help-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; padding: 0; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-3);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.help-btn .ico { width: 18px; height: 18px; }
.help-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .help-btn:hover { color: var(--ink); border-color: var(--ink-3); } }
/* zone tactile de 44 px sans grossir le rond */
.help-btn { position: relative; }
.help-btn::after { content: ""; position: absolute; inset: -6px; }
.sheet--help .sheet__panel { max-width: 460px; }
.help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.help-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--ink-2); line-height: 1.4; }
.help-list__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-elev-2); color: var(--ink); }
.help-list__ico .ico { width: 19px; height: 19px; }
.help-list b { color: var(--ink); }

/* ---------------------------------------------------------------- v1.3 · pseudo cliquable (ouvre le profil public) */
.who { font-weight: 600; color: var(--ink); }
.who--btn {
  display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit;
  text-align: inherit; text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 30%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer;
  transition: text-decoration-color 0.2s var(--ease);
}
.who--btn:active { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .who--btn:hover { text-decoration-color: currentColor; } }