/* =========================================================================
   Cardfolio — direction artistique « Stone »
   Monochrome minéral · grotesk large · un seul accent (os) · filets fins.
   Principes Apple : une seule couleur d'accent, CTA en pilule, aucune ombre
   sur l'interface (seule l'image de carte en porte une), poids 400/600/700,
   matériaux translucides, retour visuel immédiat à l'appui.
   ========================================================================= */

:root {
  /* Surfaces — l'élévation vient du changement de surface, pas des ombres */
  --canvas: #050505;
  --tile: #0d0d0d;
  --tile-2: #141414;
  --tile-3: #1c1c1c;
  --stone-tile: radial-gradient(120% 160% at 100% 0%, #1b1b1b 0%, #121212 45%, #0d0d0d 100%);

  /* Encre */
  --ink: #f2efe8;
  --ink-80: #c9c6bf;
  --ink-56: #8d8a84;
  --ink-36: #5d5b57;

  /* Accent unique : os / ivoire */
  --accent: #ece6d6;
  --accent-ink: #0a0a0a;
  --accent-soft: rgba(236, 230, 214, .08);
  --accent-line: rgba(236, 230, 214, .5);

  /* Filets */
  --hairline: rgba(242, 239, 232, .12);
  --hairline-soft: rgba(242, 239, 232, .07);

  /* Statut uniquement (gains / pertes / avertissement) */
  --up: #8fd6a8;
  --down: #f08a8a;
  --warn: #e3c98a;

  /* Rayons — échelle fixe */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Espacements */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;

  /* Typo */
  --display: "Archivo", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;

  /* Mouvement */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.64, 0, .78, 0);
  --sidebar: 248px;

  /* Matière : roche veinée (bruit de turbulence) + grain */
  /* Fond neutre : plus de texture de roche, juste un léger dégradé de lumière */
  --stone: none;
  --rock: none;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas);
  color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
}
/* Grain très léger sur toute l'application */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background-image: var(--grain); opacity: .045; mix-blend-mode: overlay;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--ink-56); }
.mono, .num { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.hidden { display: none !important; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* Étiquettes éditoriales « ( Libellé ) » */
.eyebrow { font-family: var(--serif); font-size: 15px; color: var(--ink-56); letter-spacing: 0; }
.caps { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-56); }
.display { font-family: var(--display); font-stretch: 125%; font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; line-height: .92; }

/* ---------- Structure ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar);
  background: rgba(8, 8, 8, .72); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-right: 1px solid var(--hairline-soft);
  padding: var(--s-8) var(--s-5); display: flex; flex-direction: column; gap: 2px; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 var(--s-2) var(--s-10); }
.brand img { width: 26px; height: 26px; }
.brand span { font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; }
.brand-lg { justify-content: center; padding-bottom: 0; flex-direction: column; gap: 14px; }
.brand-lg img { width: 40px; height: 40px; }
.brand-lg span { font-size: 30px; letter-spacing: -.02em; }

.nav-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-pill);
  color: var(--ink-56); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; border: 0; background: none; width: 100%; text-align: left;
  transition: background .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.nav-link svg { width: 17px; height: 17px; flex: none; }
.nav-link:hover { color: var(--ink); text-decoration: none; background: var(--accent-soft); }
.nav-link:active { transform: scale(.97); }
.nav-link.active { color: var(--accent-ink); background: var(--accent); }
.sidebar .spacer { flex: 1; }
.sidebar-foot { font-size: 12px; color: var(--ink-56); padding: var(--s-4) var(--s-3) 0; border-top: 1px solid var(--hairline); line-height: 1.6; }
.sidebar-foot b { color: var(--ink-80); font-weight: 600; }

.main { flex: 1; margin-left: var(--sidebar); min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-5) var(--s-10); background: rgba(5, 5, 5, .7);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
}
/* Effet de bord au défilement plutôt qu'un trait dur */
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 18px; pointer-events: none; background: linear-gradient(rgba(5, 5, 5, .55), transparent); }
.topbar h1 { font-family: var(--display); font-stretch: 125%; font-weight: 700; text-transform: uppercase; font-size: 20px; letter-spacing: -.01em; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .price-stamp { font-size: 12px; color: var(--ink-56); text-align: right; line-height: 1.45; }
.topbar .price-stamp b { color: var(--ink-80); font-weight: 600; }
.content { padding: var(--s-6) var(--s-10) var(--s-14); max-width: 1520px; }
.bottom-nav { display: none; }

@media (max-width: 900px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .topbar { padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); }
  .topbar h1 { font-size: 17px; }
  .topbar .price-stamp { display: none; }
  .content { padding: var(--s-4) 16px calc(104px + env(safe-area-inset-bottom)); }
  .bottom-nav {
    display: flex; gap: 4px; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30;
    background: rgba(18, 18, 18, .72); backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 6px;
  }
  .bottom-nav .nav-link { flex-direction: column; gap: 3px; font-size: 9.5px; letter-spacing: .08em; padding: 8px 2px; text-align: center; align-items: center; }
  .bottom-nav .nav-link svg { width: 20px; height: 20px; }
}

/* ---------- Boutons (pilules) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--hairline);
  background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .01em; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
  white-space: nowrap; text-decoration: none !important;
}
.btn:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #fffaf0; border-color: #fffaf0; }
.btn-ghost { border-color: transparent; color: var(--ink-80); }
.btn-ghost:hover { border-color: transparent; color: var(--ink); }
.btn-danger { color: var(--down); border-color: rgba(240, 138, 138, .35); }
.btn-danger:hover { background: rgba(240, 138, 138, .1); border-color: var(--down); }
.btn-sm { height: 32px; padding: 0 14px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn-icon { width: 40px; padding: 0; }
.btn-sm.btn-icon { width: 32px; }
.btn.loading svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Champs ---------- */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > span { font-size: 11px; color: var(--ink-56); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.input, .field input, .field select, .field textarea, select.input {
  height: 44px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: var(--tile); outline: none; width: 100%; min-width: 0; font-size: 16px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
@media (min-width: 901px) { .input, .field input, .field select, .field textarea, select.input { font-size: 14px; } }
.field textarea { height: auto; min-height: 84px; padding: 12px 14px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: var(--tile-2); }
.input::placeholder, .field input::placeholder, textarea::placeholder { color: var(--ink-36); }
.field input[type=file] { padding: 9px 12px; color: var(--ink-56); }
input[type=file]::file-selector-button { font: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--hairline); background: transparent; color: var(--ink); border-radius: var(--r-pill); padding: 4px 12px; margin-right: 10px; cursor: pointer; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d8a84' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 36px !important; }
.check { display: flex; align-items: center; gap: 9px; cursor: pointer; color: var(--ink-80); font-size: 14px; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); }
.form-error { color: var(--down); font-size: 13px; margin: 4px 0 0; }

/* ---------- Tuiles (pas d'ombre : changement de surface + filet) ---------- */
.panel { background: var(--tile); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); padding: var(--s-6); min-width: 0; position: relative; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); padding-bottom: var(--s-3); border-bottom: 1px solid var(--hairline-soft); }
.panel-head h2, .panel h2 { font-size: 11px; font-weight: 600; margin: 0; color: var(--ink-80); letter-spacing: .14em; text-transform: uppercase; }
.panel h3 { font-size: 13px; margin: 0 0 10px; color: var(--ink-80); }

.grid { display: grid; gap: var(--s-3); }
.grid-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid-halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1200px) { .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1050px) { .grid-2, .grid-halves, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }

/* KPI */
.kpi { padding: var(--s-5) var(--s-5) var(--s-4); display: flex; flex-direction: column; justify-content: space-between; min-height: 132px; }
.kpi .label { font-size: 11px; color: var(--ink-56); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.kpi .value { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 28px; margin-top: var(--s-4); letter-spacing: -.03em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12.5px; color: var(--ink-56); margin-top: var(--s-2); }
.kpi .value.small { font-size: 17px; letter-spacing: -.01em; }
@media (max-width: 560px) {
  .grid-kpi { gap: 8px; }
  .kpi { padding: 14px; min-height: 108px; }
  .kpi .value { font-size: 19px; }
}
.pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid currentColor; }
.pill.flat { color: var(--ink-56); }

/* ---------- Héros du tableau de bord (matière roche) ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl); margin-bottom: var(--s-3);
  background: var(--stone-tile); border: 1px solid var(--hairline-soft); min-height: 340px; padding: var(--s-8) var(--s-8) var(--s-6);
  display: grid; grid-template-rows: auto 1fr auto; isolation: isolate; container-type: inline-size;
}
/* Roche : la matière reste en arrière-plan, la lecture d'abord */
.hero::before { content: ""; position: absolute; inset: -10%; z-index: -2; background-image: var(--rock); background-size: 800px; opacity: .32; transform: rotate(-8deg) scale(1.1); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(180deg, rgba(5, 5, 5, .1) 0%, rgba(5, 5, 5, .55) 55%, rgba(5, 5, 5, .92) 100%), var(--stone), radial-gradient(90% 120% at 100% 0%, transparent 20%, rgba(5, 5, 5, .9) 80%);
  background-size: 100%, 1100px, 100%; background-position: 0 0, 60% 30%, 0 0;
  -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,.25) 0%, #000 55%); mask-image: linear-gradient(115deg, rgba(0,0,0,.25) 0%, #000 55%);
  opacity: .62;
}
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.hero-top .eyebrow { color: var(--ink-80); }
.hero-word { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); margin: var(--s-8) 0 var(--s-6); }
/* La taille suit la largeur réelle du bloc (container query) et le nombre de caractères */
.hero-word .display { font-size: min(112px, calc((100cqi - 150px) / (var(--n, 12) * .82))); white-space: nowrap; }
.hero-word .mark { font-family: var(--serif); font-size: 14px; line-height: 1.35; color: var(--ink-56); text-align: center; white-space: nowrap; }
.hero-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); border-top: 1px solid var(--hairline); padding-top: var(--s-4); }
.hero-figures div { min-width: 0; }
.hero-figures span { display: block; }
.hero-figures b { display: block; font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 26px; letter-spacing: -.03em; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.hero-figures .big b { font-size: 34px; }
@media (max-width: 900px) {
  .hero { padding: var(--s-5); min-height: 0; border-radius: var(--r-lg); }
}
@container (max-width: 620px) {
  .hero-word { margin: var(--s-6) 0 var(--s-5); grid-template-columns: 1fr; gap: 4px; }
  .hero-word .mark { display: none; }
  .hero-word .display { font-size: min(76px, calc(100cqi / (var(--n1, 8) * .98))); }
  .hero-word .display + .mark + .display { font-size: min(76px, calc(100cqi / (var(--n2, 8) * .9))); }
  .hero-top > .caps { display: none; }
}
@media (max-width: 900px) {
  .hero-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); }
  .hero-figures b, .hero-figures .big b { font-size: 21px; }
}

.chart-box { position: relative; height: 290px; }
.chart-box.sm { height: 220px; }
.empty-chart { height: 100%; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; text-align: center; color: var(--ink-56); font-size: 13px; padding: 20px; border-radius: var(--r-md); background: var(--tile-2); }
.empty-chart .eyebrow { font-size: 18px; color: var(--ink-80); }

.game-row { display: grid; grid-template-columns: 22px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline-soft); }
.game-row:last-child { border-bottom: 0; }
.game-row .dot { width: 10px; height: 10px; border-radius: 50%; }
.game-row .idx { font-size: 11px; color: var(--ink-36); font-variant-numeric: tabular-nums; }
.game-row .bar { height: 2px; background: var(--hairline); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.game-row .bar i { display: block; height: 100%; background: var(--accent); transition: width .6s var(--ease); }
.game-row .meta { font-size: 12px; color: var(--ink-56); }
.game-row .amount { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.list-row { display: flex; align-items: center; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--hairline-soft); cursor: pointer; transition: opacity .2s; }
.list-row:last-child { border-bottom: 0; }
.list-row:hover .lr-name { color: var(--accent); }
.list-row:active { opacity: .7; }
.list-row .thumb { width: 36px; height: 50px; border-radius: 4px; object-fit: cover; background: var(--tile-3); flex: none; }
.list-row .lr-main { flex: 1; min-width: 0; }
.list-row .lr-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.list-row .lr-sub { font-size: 12px; color: var(--ink-56); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .lr-val { text-align: right; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Collection ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: var(--s-4); }
.toolbar .search { flex: 1 1 280px; position: relative; }
.toolbar .search svg { position: absolute; left: 16px; top: 14px; width: 16px; height: 16px; color: var(--ink-56); }
.toolbar .search input { padding-left: 42px; border-radius: var(--r-pill); }
.toolbar select.input { width: auto; flex: 0 1 180px; border-radius: var(--r-pill); }
.toolbar .price-range { display: flex; gap: 6px; align-items: center; flex: 0 1 220px; }
.toolbar .price-range input { width: 100px; border-radius: var(--r-pill); }
@media (max-width: 560px) {
  .toolbar { gap: 8px; }
  .toolbar .search { flex-basis: 100%; }
  .toolbar select.input, .toolbar .price-range { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .toolbar .price-range input { width: auto; flex: 1; min-width: 0; }
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s-5); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: transparent; color: var(--ink-80); cursor: pointer; font-weight: 600; font-size: 12.5px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.chip:active { transform: scale(.96); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip .count { font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; }
.result-meta { font-size: 13px; color: var(--ink-56); margin-bottom: var(--s-5); display: flex; gap: var(--s-5); flex-wrap: wrap; padding-bottom: var(--s-3); border-bottom: 1px solid var(--hairline-soft); }
.result-meta b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: var(--s-3); }
@media (max-width: 560px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.tcg {
  background: var(--tile); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); overflow: hidden;
  cursor: pointer; display: flex; flex-direction: column; min-width: 0;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .14s var(--ease);
}
.tcg:hover { background: var(--tile-2); border-color: var(--hairline); }
.tcg:active { transform: scale(.98); }
.tcg .art { position: relative; aspect-ratio: 63 / 88; background: var(--tile-2); padding: 14px 14px 0; overflow: hidden; isolation: isolate; }
.tcg .art::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--stone); background-size: 600px; opacity: .18; }
.tcg .art img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6)); transition: transform .5s var(--ease); }
.tcg:hover .art img { transform: translateY(-4px) scale(1.015); }
.tcg .art .noimg { width: 100%; height: 100%; border-radius: var(--r-sm); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-family: var(--serif); font-size: 17px; color: var(--ink-56); }
.tcg .badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 6px; pointer-events: none; }
.badge { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 4px 9px; border-radius: var(--r-pill); background: rgba(10, 10, 10, .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--hairline); white-space: nowrap; color: var(--ink); }
.badge.grade { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.badge.qty { font-variant-numeric: tabular-nums; }
.tcg .body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tcg .title { font-weight: 600; font-size: 14.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.tcg .meta { font-size: 11.5px; color: var(--ink-56); display: flex; flex-wrap: wrap; gap: 2px 8px; }
.tcg .meta .gdot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.tcg .prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 10px; padding-top: 10px; border-top: 1px solid var(--hairline-soft); margin-top: auto; }
.tcg .prices div { min-width: 0; }
.tcg .prices span { display: block; font-size: 9.5px; font-weight: 600; color: var(--ink-36); text-transform: uppercase; letter-spacing: .12em; }
.tcg .prices b { font-size: 13.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tcg .src { font-size: 9px; font-weight: 700; color: var(--ink-56); margin-left: 4px; letter-spacing: .08em; }
@media (max-width: 560px) {
  .tcg .art { padding: 10px 10px 0; }
  .tcg .body { padding: 10px; gap: 6px; }
  .tcg .title { font-size: 13px; }
  .tcg .prices b { font-size: 12px; }
  .tcg .prices span { font-size: 8.5px; letter-spacing: .08em; }
}

.empty { text-align: center; padding: 72px 20px; color: var(--ink-56); }
.empty h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); font-size: 30px; margin: 0 0 8px; letter-spacing: -.01em; }
.empty .btn { margin-top: var(--s-5); }

/* ---------- Vue par extension ---------- */
.view-switch { margin-bottom: var(--s-5); }
.set-section { margin-bottom: var(--s-8); }
.set-section-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--s-3); margin-bottom: var(--s-4); border-bottom: 1px solid var(--hairline); }
.set-section-head .eyebrow { font-size: 20px; color: var(--ink); }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-3); }
@media (max-width: 560px) { .set-grid { grid-template-columns: minmax(0, 1fr); } }
.set-tile {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-4); align-items: center;
  background: var(--tile); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); padding: var(--s-4); color: var(--ink);
  text-decoration: none !important; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease), transform .14s var(--ease);
}
.set-tile:hover { background: var(--tile-2); border-color: var(--hairline); }
.set-tile:active { transform: scale(.985); }
.set-fan { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--tile-2); overflow: hidden; isolation: isolate; }
.set-fan::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--stone); background-size: 500px; opacity: .2; }
.set-fan img { position: absolute; width: 70px; border-radius: 4px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6));
  transform: translateX(calc((var(--i) - (var(--n) - 1) / 2) * 20px)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 9deg)); transition: transform .4s var(--ease); }
.set-tile:hover .set-fan img { transform: translateX(calc((var(--i) - (var(--n) - 1) / 2) * 28px)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 13deg)) translateY(-3px); }
.set-fan .eyebrow { font-size: 13px; }
.set-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.set-info h3 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 700; text-transform: uppercase; font-size: 17px; letter-spacing: -.01em; line-height: 1.1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.set-progress { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; }
.set-progress b { font-family: var(--display); font-stretch: 112%; font-size: 24px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.set-progress b span { font-size: 14px; color: var(--ink-56); letter-spacing: 0; }
.set-progress .muted { font-size: 12px; }
.set-info .bar { height: 2px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.set-info .bar i { display: block; height: 100%; background: var(--accent); }
.set-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-56); font-variant-numeric: tabular-nums; }
.set-tile.nolist .set-progress .muted { color: var(--ink-36); }

/* En-tête d'une extension */
.set-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); background: var(--stone-tile); border: 1px solid var(--hairline-soft); padding: var(--s-6) var(--s-8) var(--s-6); container-type: inline-size; }
.set-hero::before { content: ""; position: absolute; inset: -10%; z-index: -2; background-image: var(--rock); background-size: 800px; opacity: .3; transform: rotate(6deg); }
.set-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(180deg, rgba(5,5,5,.15), rgba(5,5,5,.9)), var(--stone); background-size: 100%, 1000px; opacity: .6; }
.set-hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-6); }
.set-hero-top .btn { margin-left: -14px; }
.set-hero-main { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); }
.set-title { margin: 0; font-size: clamp(30px, 6.2cqi, 76px); overflow-wrap: anywhere; }
.set-count { white-space: nowrap; font-family: var(--display); font-stretch: 112%; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.set-count b { font-size: clamp(36px, 7cqi, 84px); }
.set-count span { font-size: clamp(16px, 2.6cqi, 28px); color: var(--ink-56); margin-left: 6px; }
.set-meter { height: 3px; background: var(--hairline); border-radius: 3px; overflow: hidden; margin: var(--s-5) 0 var(--s-4); }
.set-meter i { display: block; height: 100%; background: var(--accent); transition: width .8s var(--ease); }
.set-stats { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 13px; color: var(--ink-56); }
.set-stats b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
@container (max-width: 560px) {
  .set-hero-main { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}
@media (max-width: 900px) { .set-hero { padding: var(--s-5); border-radius: var(--r-lg); } }

/* Grille de l'extension : possédées en couleur, manquantes grisées */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-4) var(--s-3); }
@media (max-width: 560px) { .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; } }
.slot { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-width: 0; -webkit-tap-highlight-color: transparent; }
.slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-md); }
.slot-art { position: relative; aspect-ratio: 63 / 88; border-radius: 8px; overflow: hidden; background: var(--tile-2); transition: transform .14s var(--ease); }
.slot:active .slot-art { transform: scale(.96); }
.slot-art img { width: 100%; height: 100%; object-fit: cover; transition: filter .6s var(--ease), opacity .6s var(--ease), transform .5s var(--ease); }
.slot-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; font-family: var(--serif); font-size: 15px; line-height: 1.2; color: var(--ink-56); border: 1px solid var(--hairline); border-radius: 8px; }
.slot .badge { position: absolute; top: 6px; right: 6px; font-size: 10px; padding: 3px 7px; }
.slot .badge.grade { right: auto; left: 6px; }
.slot.owned:hover .slot-art img { transform: scale(1.03); }
/* Manquante : grisée, assombrie, avec un « + » au survol */
.slot.missing .slot-art img { filter: grayscale(1) brightness(.5) contrast(.9); opacity: .45; }
.slot.missing .slot-ph { opacity: .55; border-style: dashed; }
.slot.missing:hover .slot-art img { filter: grayscale(1) brightness(.75); opacity: .7; }
.slot-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s var(--ease); }
.slot-lock svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); transform: scale(.85); transition: transform .25s var(--ease); }
.slot.missing:hover .slot-lock, .slot.missing:focus-visible .slot-lock { opacity: 1; }
.slot.missing:hover .slot-lock svg { transform: scale(1); }
@media (hover: none) { .slot-lock { display: none; } }
.slot-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 2px; }
.slot-num { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--ink-36); font-variant-numeric: tabular-nums; }
.slot-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot.missing .slot-name { color: var(--ink-56); font-weight: 400; }
.slot-price { margin-top: 3px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.slot.missing .slot-price { color: var(--ink-80); }
.slot-price.none { font-size: 11px; font-weight: 400; color: var(--ink-36) !important; }
.set-note { margin: var(--s-3) 0 0; font-size: 12px; color: var(--ink-56); }
.slot-tag { font-size: 10px; color: var(--ink-56); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Déblocage : la couleur revient, petit rebond (le geste vient d'un appui) */
.slot.just-unlocked .slot-art { animation: unlock .7s var(--ease); }
.slot.just-unlocked .slot-art img { animation: colorIn 1s var(--ease); }
@keyframes unlock { 0% { transform: scale(.92); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes colorIn { from { filter: grayscale(1) brightness(.5); opacity: .45; } }

/* Liste de souhaits, sélection multiple, catalogue */
.slot .badge.wish { left: 6px; right: auto; top: auto; bottom: 6px; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.slot-price.approx { color: var(--ink-56) !important; font-weight: 400; font-size: 12px; }
.sel-check { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink-80); background: rgba(10, 10, 10, .5); display: none; align-items: center; justify-content: center; }
.sel-check svg { width: 14px; height: 14px; opacity: 0; color: var(--accent-ink); }
.slot-grid.selecting .slot.missing .sel-check { display: flex; }
.slot-grid.selecting .slot-lock { display: none; }
.slot-grid.selecting .slot.owned { opacity: .35; cursor: default; }
.slot.selected .sel-check { background: var(--accent); border-color: var(--accent); }
.slot.selected .sel-check svg { opacity: 1; }
.slot.selected .slot-art { outline: 2px solid var(--accent); outline-offset: 2px; }
.slot.selected .slot-art img { filter: grayscale(.2) brightness(.85); opacity: .9; }
.sel-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 40; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  background: rgba(22, 22, 22, .84); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 8px 8px 8px 18px; animation: toastIn .3s var(--ease); max-width: calc(100vw - 24px); }
.sel-bar #selCount { font-size: 13px; font-weight: 600; margin-right: 6px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .sel-bar { bottom: calc(92px + env(safe-area-inset-bottom)); border-radius: var(--r-lg); padding: 8px; } }
.link-box { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: rgba(13, 13, 13, .7); border: 1px solid var(--accent-line); display: flex; flex-direction: column; gap: 10px; }
.link-box > div:first-child { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.exp-choice.chosen { background: var(--accent-soft); }
.wish-box { display: flex; gap: 8px; align-items: flex-end; padding-top: var(--s-4); border-top: 1px solid var(--hairline-soft); flex-wrap: wrap; }
.browse-cta { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6); border-radius: var(--r-lg); background: var(--tile); border: 1px solid var(--hairline-soft); }
.cat-list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline-soft); }
.cat-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto auto; gap: var(--s-4); align-items: center; padding: 13px 8px; border-bottom: 1px solid var(--hairline-soft); color: var(--ink); text-decoration: none !important; transition: background .15s; }
.cat-row:hover { background: var(--tile); }
.cat-row:active { background: var(--tile-2); }
.cat-code { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--ink-36); }
.cat-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-meta { font-size: 12px; color: var(--ink-56); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat-own { font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.cat-row.mine .cat-name::after { content: " ●"; color: var(--accent); font-size: 9px; vertical-align: 2px; }
@media (max-width: 600px) { .cat-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; } .cat-code { grid-column: 1; } .cat-name { grid-column: 1; } .cat-meta { grid-column: 2; grid-row: 1 / span 2; } .cat-own { grid-column: 1; } }
.chip-sep { width: 1px; background: var(--hairline); margin: 4px 4px; }
a.chip { text-decoration: none !important; }
.wish-list { display: flex; flex-direction: column; gap: 8px; }
.wish-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 120px auto; gap: var(--s-4); align-items: center; padding: 10px 12px; border-radius: var(--r-md); background: var(--tile); border: 1px solid var(--hairline-soft); }
.wish-row.hit { border-color: rgba(143, 214, 168, .45); }
.wr-art { width: 56px; aspect-ratio: 63/88; border-radius: 5px; overflow: hidden; background: var(--tile-2); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 10px; color: var(--ink-56); text-align: center; text-decoration: none !important; }
.wr-art img { width: 100%; height: 100%; object-fit: cover; }
.wr-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wr-name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.wr-price b { font-family: var(--display); font-stretch: 108%; font-size: 18px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wr-price .pill { font-size: 11px; }
.wr-max .input { height: 36px; }
@media (max-width: 700px) { .wish-row { grid-template-columns: 48px minmax(0, 1fr) auto; } .wr-art { width: 48px; } .wr-max { grid-column: 2; } .wish-row [data-del] { grid-column: 3; grid-row: 1; align-self: start; } .wr-price { grid-column: 3; grid-row: 2; } }
.alerts .alert-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.wish-mini { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: var(--r-md); background: var(--tile-2); color: var(--ink); text-decoration: none !important; border: 1px solid rgba(143, 214, 168, .3); }
.wm-art { width: 42px; aspect-ratio: 63/88; border-radius: 4px; overflow: hidden; background: var(--tile-3); flex: none; font-size: 9px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink-56); }
.wm-art img { width: 100%; height: 100%; object-fit: cover; }
.wm-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; }
.wm-info > b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-price b { color: var(--up); font-variant-numeric: tabular-nums; }
/* ---------- Cartes gradées : présentation « slab » ---------- */
.graded-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5) var(--s-8); align-items: end; padding: var(--s-6) var(--s-8);
  margin-bottom: var(--s-4); border-radius: var(--r-xl); background: var(--stone-tile); border: 1px solid var(--hairline-soft); }
.gh-figs { display: flex; gap: var(--s-8); }
.gh-figs div { display: flex; flex-direction: column; gap: 6px; }
.gh-figs b { font-family: var(--display); font-stretch: 112%; font-size: 24px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; padding-top: var(--s-4); border-top: 1px solid var(--hairline-soft); }
@media (max-width: 760px) { .graded-hero { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); } .gh-figs { gap: var(--s-5); flex-wrap: wrap; } .gh-figs b { font-size: 19px; } }

.slab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); }
@media (max-width: 560px) { .slab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
/* Le boîtier : plastique transparent légèrement bleuté, coins arrondis, étiquette en haut */
.slab { cursor: pointer; border-radius: 14px; padding: 7px; background: linear-gradient(160deg, rgba(242, 239, 232, .14), rgba(242, 239, 232, .04) 40%, rgba(242, 239, 232, .09));
  border: 1px solid rgba(242, 239, 232, .2); display: flex; flex-direction: column; gap: 7px; min-width: 0; transition: transform .14s var(--ease), border-color .25s var(--ease); }
.slab:hover { border-color: rgba(242, 239, 232, .38); }
.slab:active { transform: scale(.98); }
.slab.sold { opacity: .55; }
.slab-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 6px;
  background: linear-gradient(180deg, #f4f1ea, #e3ded1); color: #121212; }
.sl-left { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.sl-name { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-sub { font-size: 9.5px; font-weight: 600; color: #4a4740; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .04em; }
.sl-cert { font-size: 9px; color: #6b675e; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.sl-right { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.sl-company { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: #4a4740; }
.sl-grade { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 26px; letter-spacing: -.03em; margin-top: 2px; }
.sl-word { font-size: 7.5px; font-weight: 700; letter-spacing: .12em; color: #4a4740; margin-top: 2px; }
.slab-window { position: relative; aspect-ratio: 63 / 88; border-radius: 6px; overflow: hidden; background: rgba(5, 5, 5, .55); padding: 8px; }
.slab-window img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
.slab-window .noimg { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--serif); color: var(--ink-56); }
.slab-window .badge.qty { position: absolute; top: 8px; right: 8px; }
.slab-info { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 4px 6px 4px; }
.slab-info span { display: block; font-size: 9.5px; font-weight: 600; color: var(--ink-36); text-transform: uppercase; letter-spacing: .1em; }
.slab-info b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slab-info i { font-style: normal; font-weight: 400; font-size: 12px; }
@media (max-width: 560px) { .sl-grade { font-size: 20px; } .slab-label { padding: 6px 8px; } .slab-info b { font-size: 12px; } }

.cert-line { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; margin: -4px 0 14px; padding: 10px 12px; border-radius: var(--r-md); background: var(--tile-2); }
.cert-line a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.cert-line a svg { width: 14px; height: 14px; }
.set-gbadge { font-size: 12px; vertical-align: middle; margin-right: 10px; position: relative; top: -8px; }

.tcg.sold { opacity: .6; }
.tcg.sold .art img { filter: grayscale(.6); }

.coef-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.coef-input { position: relative; }
.coef-input .input { padding-right: 28px; height: 38px; }
.coef-input i { position: absolute; right: 12px; top: 10px; font-style: normal; font-size: 12px; color: var(--ink-56); }

/* Fiche de déblocage */
.unlock { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
@media (max-width: 520px) { .unlock { grid-template-columns: minmax(0, 1fr); } .unlock-art { max-width: 160px; margin: 0 auto; } }
.unlock-art img { width: 100%; border-radius: 8px; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .65)); }
.unlock-art .noimg { aspect-ratio: 63/88; border-radius: 8px; border: 1px dashed var(--hairline); display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-family: var(--serif); font-size: 17px; color: var(--ink-56); }
.unlock-form { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.unlock-name { margin: 4px 0 2px; font-family: var(--display); font-stretch: 112%; font-weight: 700; text-transform: uppercase; font-size: 22px; letter-spacing: -.02em; line-height: 1.05; }

/* ---------- Formulaire ---------- */
.game-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.game-btn { white-space: nowrap; }
@media (max-width: 420px) { .game-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } .game-btn { padding: 12px 10px; font-size: 12.5px; } }
#cardForm, #searchPanel { container-type: inline-size; }
#cardForm.sealed .single-only { display: none !important; }
.panel-head .seg button { font-size: 12px; padding: 6px 12px; }
.game-btn {
  border: 1px solid var(--hairline); background: transparent; border-radius: var(--r-pill); padding: 12px 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 13px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.game-btn:active { transform: scale(.97); }
.game-btn .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.game-btn:hover { border-color: var(--accent-line); }
.game-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.game-btn.active .dot { background: var(--accent-ink) !important; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-4 { grid-column: 1 / -1; }
@container (max-width: 700px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 400px) { .form-grid { grid-template-columns: minmax(0, 1fr); } .form-grid .span-2 { grid-column: auto; } }
.add-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-3); align-items: start; }
@media (max-width: 1200px) { .add-layout { grid-template-columns: minmax(0, 1fr); } .preview-card { display: none; } }
.preview-card { position: sticky; top: 96px; }
.preview-card .art { aspect-ratio: 63 / 88; border-radius: var(--r-md); overflow: hidden; background: var(--tile-2); display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--serif); font-size: 18px; color: var(--ink-56); position: relative; isolation: isolate; padding: 16px; }
.preview-card .art::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--stone); background-size: 600px; opacity: .2; }
.preview-card .art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .65)); }

.search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 10px; margin-top: var(--s-4); max-height: 480px; overflow: auto; padding: 2px; }
.sr-item { background: var(--tile-2); border: 1px solid transparent; border-radius: var(--r-md); padding: 7px; cursor: pointer; min-width: 0; transition: border-color .2s var(--ease), transform .12s var(--ease); }
.sr-item:hover { border-color: var(--accent-line); }
.sr-item:active { transform: scale(.97); }
.sr-item .sr-img { aspect-ratio: 63 / 88; border-radius: 6px; background: var(--tile-3); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 12px; font-family: var(--serif); color: var(--ink-56); text-align: center; padding: 4px; }
.sr-item .sr-img img { width: 100%; height: 100%; object-fit: cover; }
.sr-item .sr-name { font-size: 12px; font-weight: 600; margin-top: 7px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sr-item .sr-sub { font-size: 11px; color: var(--ink-56); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-list { margin-top: var(--s-3); max-height: 400px; overflow: auto; border: 1px solid var(--hairline-soft); border-radius: var(--r-md); }
.sr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--hairline-soft); cursor: pointer; align-items: center; transition: background .15s; }
.sr-row:last-child { border-bottom: 0; }
.sr-row:hover { background: var(--tile-2); }
.sr-row .n { font-weight: 600; font-size: 13.5px; }
.sr-row .s { font-size: 12px; color: var(--ink-56); }
.sr-row .p { font-size: 12.5px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.notice { font-size: 13px; color: var(--ink-80); background: var(--tile-2); border-radius: var(--r-md); padding: 12px 14px; border: 1px solid var(--hairline-soft); }
.notice.warn { border-color: rgba(227, 201, 138, .3); }
.notice.warn::before { content: "●"; color: var(--warn); margin-right: 8px; font-size: 9px; vertical-align: 2px; }
.notice.ok::before { content: "●"; color: var(--up); margin-right: 8px; font-size: 9px; vertical-align: 2px; }
.linked { display: flex; align-items: center; gap: var(--s-3); padding: 14px 16px; border-radius: var(--r-md); background: var(--tile-2); border: 1px solid var(--accent-line); }
.linked .grow { flex: 1; min-width: 0; }
@media (max-width: 560px) { .linked { flex-wrap: wrap; } .linked .grow { flex-basis: 100%; } }
.seg { display: inline-flex; background: var(--tile-2); border-radius: var(--r-pill); padding: 4px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 7px 16px; border-radius: var(--r-pill); cursor: pointer; color: var(--ink-56); font-weight: 600; font-size: 12.5px; transition: background .2s var(--ease), color .2s var(--ease); }
.seg button.active { background: var(--accent); color: var(--accent-ink); }

/* ---------- Feuille / modale (matériau + voile) ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow: auto; animation: fade .24s var(--ease); }
.modal { width: 100%; max-width: 1000px; background: var(--tile); border: 1px solid var(--hairline); border-radius: var(--r-xl); animation: rise .38s var(--ease); position: relative; transform-origin: 50% 0; }
.modal.narrow { max-width: 580px; }
.modal-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--hairline-soft); }
.modal-head h2 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; font-size: 19px; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.modal-body { padding: var(--s-6); }
.modal-back.closing { animation: fadeOut .2s var(--ease-in) forwards; }
.modal-back.closing .modal { animation: sink .2s var(--ease-in) forwards; }
@keyframes fade { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.985); } }
@keyframes sink { to { opacity: 0; transform: translateY(24px) scale(.985); } }
@media (max-width: 700px) {
  .modal-back { padding: 0; align-items: stretch; }
  .modal { border-radius: var(--r-xl) var(--r-xl) 0 0; min-height: calc(100% - 24px); margin-top: 24px; border-bottom: 0; }
  .modal-head { position: sticky; top: 0; background: rgba(13, 13, 13, .82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 2; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 16px 18px; }
  .modal-body { padding: 18px; }
  @keyframes rise { from { transform: translateY(100%); } }
  @keyframes sink { to { transform: translateY(100%); } }
}

/* Dialogue de confirmation centré */
.dialog-back { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade .2s var(--ease); }
.dialog { width: 100%; max-width: 380px; background: var(--tile-2); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: var(--s-6); text-align: center; animation: pop .26s var(--ease); }
.dialog h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 8px; letter-spacing: -.01em; }
.dialog p { color: var(--ink-80); margin: 0 0 var(--s-5); font-size: 14px; }
.dialog .actions { display: flex; flex-direction: column; gap: 8px; }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }

.detail { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-8); }
@media (max-width: 760px) { .detail { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .detail .d-art { max-width: 250px; margin: 0 auto; width: 100%; } }
.d-art { position: relative; }
.d-art .frame { position: relative; border-radius: var(--r-lg); padding: 18px; background: var(--tile-2); overflow: hidden; isolation: isolate; }
.d-art .frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--stone); background-size: 700px; opacity: .25; }
.d-art img { width: 100%; border-radius: 10px; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .7)); }
.d-art .noimg { aspect-ratio: 63/88; border-radius: var(--r-md); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--ink-56); font-family: var(--serif); font-size: 18px; }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hairline-soft); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hairline-soft); }
@media (max-width: 560px) { .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kv > div { background: var(--tile); padding: 12px 14px; min-width: 0; }
.kv span { display: block; font-size: 10px; font-weight: 600; color: var(--ink-56); text-transform: uppercase; letter-spacing: .12em; }
.kv b { display: block; font-family: var(--display); font-stretch: 108%; font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kv b small { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0; }
.kv b.txt { font-family: var(--sans); font-size: 13.5px; }
.section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-56); margin: 28px 0 12px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline-soft); }
.meta-line { color: var(--ink-56); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 600; color: var(--ink-56); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 8px; border-bottom: 1px solid var(--hairline); }
.tbl td { padding: 10px 8px; border-bottom: 1px solid var(--hairline-soft); font-variant-numeric: tabular-nums; }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl input { height: 34px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--tile-2); width: 100%; min-width: 60px; outline: none; }
.tbl input:focus { border-color: var(--accent); }
.tbl-wrap { overflow-x: auto; }

/* ---------- Toast (matériau translucide, pas d'ombre) ---------- */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
@media (max-width: 900px) { .toasts { left: 16px; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); align-items: stretch; } }
.toast { background: rgba(28, 28, 28, .82); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 12px 18px; font-size: 13.5px; font-weight: 600; animation: toastIn .34s var(--ease); max-width: 440px; }
.toast.err { border-color: rgba(240, 138, 138, .45); }
.toast.ok { border-color: rgba(143, 214, 168, .35); }
.toast.out { animation: toastOut .22s var(--ease-in) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ---------- Connexion / installation ---------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; overflow: hidden; isolation: isolate; }
.login::before { content: ""; position: absolute; inset: -20%; z-index: -2; background-image: var(--rock); background-size: 800px; opacity: .5; transform: rotate(-12deg); }
.login::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--stone), radial-gradient(60% 60% at 50% 50%, rgba(5, 5, 5, .2), rgba(5, 5, 5, .95)); background-size: 900px, 100%; }
.login-card { width: 100%; max-width: 400px; background: rgba(13, 13, 13, .74); backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 40px 32px 32px; display: flex; flex-direction: column; gap: 18px; animation: rise .5s var(--ease); }
.login-card .muted { text-align: center; margin: -10px 0 8px; font-family: var(--serif); font-size: 17px; }
.login-card h2 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-80); }
.checks { list-style: none; padding: 0; margin: 0; font-size: 13px; display: grid; gap: 4px; }
.checks .ok { color: var(--ink-80); }
.checks .ok::first-letter { color: var(--up); }
.checks .ko { color: var(--down); }

.spinner { width: 18px; height: 18px; border: 2px solid var(--hairline); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: middle; }
.loading-block { padding: 48px; text-align: center; color: var(--ink-56); }

/* ---------- Accessibilité ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar, .topbar, .bottom-nav, .toast, .login-card, .badge, .modal-head { background: var(--tile) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  :root { --hairline: rgba(242, 239, 232, .35); --hairline-soft: rgba(242, 239, 232, .22); --ink-56: #b5b2ab; }
}