/* ============================================================
   MTGG — Component layer
   Remplace l'ancien parchment.css. À charger APRÈS tokens.css.

   Convention :
   - Une classe par composant (.btn, .chip, .nav-link, …)
   - Variantes en BEM léger (.btn--primary, .btn--sm)
   - États avec is-* (.is-active, .is-disabled)
   - Aucun composant ne porte de marge externe ; l'auteur du template
     compose avec gap/space-y.
   ============================================================ */

/* ---------- Typo helpers ---------- */
.mono    { font-family: var(--font-mono); }

.h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
}
.meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: .02em;
}

/* En-têtes de section utilisés sur Trades/Groups/etc. */
.section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title--with-badge { /* alias sémantique, mêmes styles */ }

/* Alias rétrocompatible — à supprimer après refactor complet des templates */
.label-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: .15em;
  text-transform: uppercase;
}


/* ============================================================
   BOUTONS — système unifié
   ============================================================ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: transparent;
  --btn-hover-bg: var(--bg-3);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--control-h-md);
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--r-2);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  user-select: none;
}
.btn:hover { background: var(--btn-hover-bg); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
  border-color: var(--accent);
}
.btn:disabled, .btn.is-disabled {
  opacity: .5;
  pointer-events: none;
}
.btn svg { flex-shrink: 0; }

/* Variantes */
.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-border: var(--accent);
  --btn-hover-bg: var(--accent-2);
}
.btn--primary:hover { border-color: var(--accent-2); }

.btn--ghost {
  --btn-bg: var(--bg-2);
  --btn-fg: var(--ink);
  --btn-border: var(--line-strong);
  --btn-hover-bg: var(--bg-3);
}

.btn--danger {
  --btn-bg: var(--bg-2);
  --btn-fg: var(--danger);
  --btn-border: var(--line-strong);
  --btn-hover-bg: #FEF2F2;
}
.btn--danger:hover { border-color: var(--danger); }

.btn--purple {
  --btn-bg: #9333EA;          /* purple-600 */
  --btn-fg: #fff;
  --btn-border: #9333EA;
  --btn-hover-bg: #7E22CE;    /* purple-700 */
}
.btn--purple:hover { border-color: #7E22CE; }

/* Tailles */
.btn--sm {
  height: var(--control-h-sm);
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--r-1);
}
.btn--lg {
  height: var(--control-h-lg);
  padding: 0 18px;
  font-size: 14px;
}

/* Modifieurs */
.btn--block { display: flex; width: 100%; }
.btn--icon  {
  padding: 0;
  width: var(--control-h-md);
}
.btn--icon.btn--sm { width: var(--control-h-sm); }
.btn--icon.btn--lg { width: var(--control-h-lg); }


/* ============================================================
   FORMULAIRES — input / select / search
   Hauteur partagée 36px (md)
   ============================================================ */
.input,
.select {
  height: var(--control-h-md);
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus,
.select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.input::placeholder { color: var(--ink-mute); }

.select {
  padding-right: 30px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 8l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

/* Search composite (icône + input nu) */
.search {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h-md);
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  flex: 1;
  min-width: 200px;
  transition: border-color .15s, box-shadow .15s;
}
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.search__icon {
  width: 14px; height: 14px;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  min-width: 0;
}
.search input::placeholder { color: var(--ink-mute); }

/* Zoom iOS : Safari zoome au focus de tout champ sous 16px et LAISSE la page
   zoomée après — sur la barre de filtres, le popover qu'on s'apprêtait à ouvrir
   se retrouve hors écran. 16px en base ; la densité desktop (13px) ne revient
   que sur un vrai pointeur fin, car un iPad en paysage fait exactement 1024px
   et zoomerait sinon. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .input,
  .select { font-size: 13px; }
  .search input { font-size: 13px; }
}


/* ============================================================
   CHIPS — segmented control / filtres rapides
   ============================================================ */
.chip-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: var(--control-h-md);
  padding: 2px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
}
.chip {
  height: calc(var(--control-h-md) - 6px);
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  border-radius: var(--r-1);
  color: var(--ink-dim);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.chip:hover { background: var(--bg-3); color: var(--ink); }
.chip.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}
.chip--icon {
  width: calc(var(--control-h-md) - 6px);
  padding: 0;
}
/* Chip autonome (hors .chip-group) : bordé pour ressembler à un bouton. */
.chip--btn {
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
}
.chip--sm {
  height: 32px;
  padding: 0 8px;
  font-size: 11px;
}
@media (min-width: 1024px) { .chip--sm { height: 24px; } }
.chip--danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
.chip--danger:hover {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}

/* Badge de priorité d'un feedback (1 = haute → 3 = basse). */
.prio-badge {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--r-1);
  font-size: 11px;
  font-weight: 600;
}
.prio-badge--1 { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.prio-badge--2 { background: var(--accent-soft); color: var(--accent); }
.prio-badge--3 { background: var(--bg-3); color: var(--ink-dim); }


/* ============================================================
   NAV LINKS
   ============================================================ */
.nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) { .nav { padding: 12px 24px; } }
@media (min-width: 1024px) { .nav { gap: 24px; padding: 12px 28px; } }
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
}
/* Hors desktop, les 5 liens ne tiennent pas dans la barre : ils descendent
   dans `.tabbar` (barre fixe en bas) et le header ne garde que le brand et le
   kebab. À partir de 1024px ils reviennent ici et tiennent sans déborder. */
.nav-links {
  display: none;
  gap: 2px;
  margin-left: 8px;
  min-width: 0;                       /* sinon le flex item refuse de passer sous sa taille de contenu */
  flex-wrap: nowrap;
}
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: var(--r-2);
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--ink); background: var(--bg-3); }
.nav-link.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  background: var(--accent-soft);
  color: var(--accent);
}
.nav-badge--alert { background: var(--danger-soft); color: var(--danger); }

/* `.nav-brand` et `.nav-user` sont tous deux `flex-shrink: 0` (seule la bande de
   liens absorbe le débordement) : à 320px leur somme dépassait la barre de ~2px.
   Les deux cibles font déjà 44px, un écart de 4px entre elles suffit — le confort
   de 14px revient en desktop. */
.nav-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-dim);
}
@media (min-width: 1024px) { .nav-user { gap: 14px; } }

/* ============================================================
   TAB BAR (navigation principale hors desktop)
   ============================================================
   `.bulk-bar` (z-index 40) la RECOUVRE volontairement : en mode sélection, la
   navigation n'a pas à rester atteignable, et ça évite d'empiler deux barres
   fixes. Le padding bas du body est porté par `body:has(.tabbar)` : les pages
   au chrome custom (landing, mur de vérification) n'ont pas de tab bar, donc
   pas de réserve inutile. */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;                        /* sous .bulk-bar (40), .popover (41), la modale (50) */
  display: flex;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body:has(.tabbar) {
  --tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: var(--tabbar-h);
}
@media (min-width: 1024px) {
  .tabbar { display: none; }
  body:has(.tabbar) { --tabbar-h: 0px; padding-bottom: 0; }
}
.tab-link {
  flex: 1 1 0;
  min-width: 0;                       /* sinon les 5 onglets débordent à 320px */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 56px;
  padding: 0 2px;
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}
.tab-link__icon {
  position: relative;                 /* ancre du badge d'alerte */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 26px;
  border-radius: var(--r-pill);
  transition: background .15s, color .15s;
}
.tab-link__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Pastille derrière l'icône : l'état actif ne repose pas que sur la couleur. */
.tab-link.is-active { color: var(--accent); }
.tab-link.is-active .tab-link__icon { background: var(--accent-soft); }
.tab-badge { position: absolute; top: -3px; right: 2px; }

/* Badge "Beta" à côté du wordmark */
.beta-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  margin-left: 2px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
}

/* Menu kebab (⋮) du header */
.kebab-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--r-2);
  color: var(--ink-dim);
  cursor: pointer;
}
@media (min-width: 1024px) { .kebab-trigger { width: 32px; height: 32px; } }
.kebab-trigger:hover,
.anchor[open] > .kebab-trigger { color: var(--ink); background: var(--bg-3); }
.popover.popover--menu { right: 0; left: auto; min-width: 210px; padding: 6px; }
.menu-user {
  padding: 6px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* Reset commun bouton/lien : les trois actions doivent être strictement identiques. */
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 10px;
  border: none;
  border-radius: var(--r-2);
  background: transparent;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-dim);
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
@media (min-width: 1024px) { .menu-item { height: 34px; } }
.menu-item:hover { background: var(--bg-3); color: var(--ink); }
/* Icône de fin de ligne (ex. lune/soleil du switch de thème) : poussée à droite
   pour que TOUS les labels du menu restent alignés sur la même marge gauche. */
.menu-item__trail { margin-left: auto; flex-shrink: 0; color: var(--ink-mute); }
.menu-item:hover .menu-item__trail { color: var(--ink); }
.menu-item--danger { color: var(--danger); }
.menu-item--danger:hover { color: var(--danger); }


/* ============================================================
   PANELS
   ============================================================ */
.panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 18px;
}


/* ============================================================
   TABS — onglets segmentés (variante longue des chips)
   ============================================================ */
.tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--bg-3);
  border-radius: var(--r-2);
}
.tab {
  height: 36px;
  padding: 0 10px;
  border: none;
  background: transparent;
  border-radius: var(--r-1);
  color: var(--ink-dim);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .15s, color .15s;
}
@media (min-width: 1024px) { .tab { height: 26px; } }
.tab:hover { color: var(--ink); }
.tab.is-active {
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}


/* ============================================================
   BULK ACTION BAR (collection / trade table)
   ============================================================ */
.bulk-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-3);
}
@media (min-width: 1024px) { .bulk-bar { padding: 12px 24px; } }
.bulk-bar__count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  margin-right: auto;
}
/* Groupe de contrôles solidaires (les 3 statuts de trade). Sur mobile il occupe
   une ligne entière : la barre s'enroule au niveau du GROUPE, pas du bouton,
   sinon les trois statuts se dispersent. En desktop c'est un item de flex
   ordinaire — même gap que la barre, donc rendu identique à des boutons nus. */
.bulk-bar__group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 0 100%;
}
@media (min-width: 1024px) { .bulk-bar__group { flex: 0 1 auto; } }

/* Les toasts se posaient sur les boutons de droite de la bulk bar. Celle-ci
   s'enroule sur 2 ou 3 lignes, sa hauteur n'est connue qu'au runtime :
   `updateBulkBar` (trade_badge.js) publie `--bulk-bar-h`, à 0px barre fermée.
   `max()` et non une somme : la bulk bar recouvre la tab bar, elles ne
   s'empilent pas — c'est la plus haute des deux qu'il faut dégager. */
#notifications { bottom: calc(16px + max(var(--bulk-bar-h, 0px), var(--tabbar-h, 0px))); }


/* ============================================================
   TRADE BADGE — version agrandie pour la barre de pied des cartes
   ============================================================ */
.trade-badge-lg [data-trade-badge],
.trade-badge-lg > span {
  width: 26px;
  height: 26px;
}
.trade-badge-lg svg {
  width: 19px;
  height: 19px;
}

.heart-lg [data-interest-heart] {
  width: 26px;
  height: 26px;
}
.heart-lg svg {
  width: 19px;
  height: 19px;
}


/* ============================================================
   QUANTITY BADGE (overlay sur les cartes du grid collection)
   ============================================================ */
.qty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  box-shadow: var(--shadow-1);
}


/* ============================================================
   LOGO MARK
   ============================================================ */
.logo-mark {
  width: 26px; height: 26px;
  border-radius: var(--r-2);
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.02em;
}

.logo-mark svg { width: 62%; height: 62%; display: block; }

/* Wordmark "Mulligang" — Poppins 700, les deux "ll" en indigo, décalés
   verticalement (écho de l'icône). Hérite de la taille du parent. */
.wm {
  font-family: 'Poppins', var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 1.15em; /* un peu plus gros que le texte parent (nav/footer) */
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}
.wm .l { color: var(--accent); display: inline-block; }
.wm .l:nth-of-type(1) { transform: translateY(-.10em); }
.wm .l:nth-of-type(2) { transform: translateY(.04em); }
/* Sur fond sombre (hero vitrine), le wordmark et ses "ll" passent en blanc. */
.hero-dark .wm,
.hero-dark .wm .l { color: #fff; }


/* ============================================================
   PIPS MTG (W/U/B/R/G/C/M) — fond clair
   ============================================================ */
.pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em; height: 1.5em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .75em;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.18);
}
.pip-W { background: linear-gradient(135deg, var(--mtg-w-from), var(--mtg-w-to)); color: #3F3414; }
.pip-U { background: linear-gradient(135deg, var(--mtg-u-from), var(--mtg-u-to)); color: #fff; }
.pip-B { background: linear-gradient(135deg, var(--mtg-b-from), var(--mtg-b-to)); color: #F3EAD7; }
.pip-R { background: linear-gradient(135deg, var(--mtg-r-from), var(--mtg-r-to)); color: #fff; }
.pip-G { background: linear-gradient(135deg, var(--mtg-g-from), var(--mtg-g-to)); color: #fff; }
.pip-C { background: linear-gradient(135deg, var(--mtg-c-from), var(--mtg-c-to)); color: #1A1408; }
.pip-M { background: linear-gradient(135deg, var(--mtg-m-from), var(--mtg-m-to)); color: #1A1408; }


/* ============================================================
   TOOLTIP (JS-driven, voir static/js/tooltip.js)
   ============================================================ */
#js-tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--ink);
  color: var(--bg-2);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 4px 8px;
  border-radius: var(--r-1);
  font-size: 11px;
  font-family: var(--font-mono);
  line-height: 1.3;
  /* Certains tooltips sont longs (l'explication d'équilibre du composeur fait
     ~200 caractères) : sans largeur max ils se rendaient sur une seule ligne
     plus large que l'écran. tooltip.js borne la position aux deux axes. */
  white-space: normal;
  max-width: min(280px, calc(100vw - 24px));
  box-shadow: var(--shadow-2);
  z-index: 99999;
  opacity: 0;
  transition: opacity .1s ease-out;
}
#js-tooltip[data-visible="1"] { opacity: 1; }


/* ============================================================
   MODE SÉLECTION MULTIPLE (collection, trade table)
   ============================================================ */
body[data-selection-mode] [data-trade-badge],
body[data-selection-mode] [data-interest-heart] { display: none; }
body[data-selection-mode] [data-trade-checkbox-wrap] { display: inline-flex; }
body[data-selection-mode] [data-only-in-selection] { display: inline-flex !important; }
body[data-selection-mode] [data-trade-card][data-selected="true"] {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-color: var(--accent);
}


/* ============================================================
   CARD MODAL (direction B)
   ============================================================ */
.card-modal__backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(15, 23, 42, .40);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
/* Bande basse réservée aux flèches prev/next, uniquement quand au moins une est
   active : le script inline de _card_modal.html retire `disabled` après le swap
   et :has() se ré-évalue. Les autres overlays qui réutilisent ce backdrop
   (.pick-modal, _reset_blocked, _trade_in_flight_block) n'ont pas de
   .card-modal__nav du tout → aucune bande réservée chez eux. */
.card-modal__backdrop:has(.card-modal__nav:not(:disabled)) {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
.card-modal {
  background: var(--bg-2);
  border-radius: var(--r-4);
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 24px 60px rgba(15,23,42,.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 1080px;
  width: 100%;
  /* Se résout sur la boîte de contenu du backdrop, donc s'adapte tout seul à
     la bande des flèches ci-dessus. Le desktop repasse en dvh explicite. */
  max-height: 100%;
  position: relative;
}
.card-modal__img-pane {
  flex-shrink: 0;
  background: linear-gradient(180deg, #f5f3ee, #ebe7df);
  padding: 16px;
  display: flex; align-items: flex-start; justify-content: center;
  border-bottom: 1px solid var(--line);
}
.card-modal__img-pane img {
  /* Plafond en dvh : garantit un plancher de hauteur au volet contenu quel que
     soit l'écran (sinon l'image seule mange ~80 % d'un écran de 667px). */
  width: auto;
  max-width: 100%;
  max-height: 46dvh;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.12);
}
.card-modal__body {
  flex: 1;
  min-width: 0;
  /* Sans ça, en direction colonne le body reste à la hauteur de son contenu
     (min-height: auto) et l'overflow:hidden de .card-modal rogne le footer. */
  min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.card-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 44px; height: 44px;
  border: none;
  background: var(--bg-3);
  color: var(--ink-dim);
  border-radius: var(--r-2);
  font-size: 18px; line-height: 1;
  cursor: pointer; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (min-width: 1024px) { .card-modal__close { width: 28px; height: 28px; } }
.card-modal__close:hover { color: var(--ink); }

/* External prev/next arrows on the backdrop.
   Mobile : dans la bande basse du backdrop, sous la modale — à `left/right: 20px`
   et centrées verticalement elles recouvraient la modale dès qu'elle occupe
   toute la largeur. Desktop : restaurées sur les flancs. */
.card-modal__nav {
  position: absolute;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.card-modal__nav:hover { background: rgba(255,255,255,.22); }
/* Mobile : une flèche inactive est retirée du flux, en accord avec le :has()
   qui ne réserve alors aucune bande (cas de la liste de deck, dont les lignes
   ne portent pas [data-trade-card] : les deux flèches restent disabled). */
.card-modal__nav:disabled { opacity: .35; cursor: default; display: none; }
.card-modal__nav--prev { left: 12px; }
.card-modal__nav--next { right: 12px; }

/* ------------------------------------------------------------
   Modale carte — restauration desktop (deux volets)
   768px : c'est la largeur en-dessous de laquelle le volet image de 380px ne
   laisse plus de place au volet contenu. Au-dessus, rien ne bouge.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  .card-modal__backdrop { padding: 24px; }
  .card-modal__backdrop:has(.card-modal__nav:not(:disabled)) { padding-bottom: 24px; }
  .card-modal {
    flex-direction: row;
    max-height: calc(100dvh - 48px);
  }
  .card-modal__img-pane {
    width: 380px;
    padding: 24px;
    border-bottom: none;
    border-right: 1px solid var(--line);
  }
  .card-modal__img-pane img { width: 100%; max-height: none; }
  .card-modal__nav {
    top: 50%; bottom: auto; transform: translateY(-50%);
    width: 40px; height: 40px;
  }
  .card-modal__nav:disabled { display: inline-flex; }
  .card-modal__nav--prev { left: 20px; }
  .card-modal__nav--next { right: 20px; }
}

/* Mobile : le fond ne scrolle pas derrière une modale quasi plein écran.
   Dérivé du DOM et non d'un flag JS : les modales sont vidées par
   `innerHTML=''` depuis six chemins différents (backdrop, ×, Échap…), un flag
   resterait bloqué si l'un d'eux oubliait le nettoyage. N'utilise SURTOUT PAS
   display:none sur la grille : _card_modal.html construit sa navigation
   prev/next avec un test `offsetParent !== null`. */
body:has(#card-modal > *),
body:has(#import-modal-container > *) { overflow: hidden; }
@media (min-width: 768px) {
  body:has(#card-modal > *),
  body:has(#import-modal-container > *) { overflow: visible; }
}

/* Sections inside the body */
.card-modal__section {
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
}
.card-modal__section:last-child { border-bottom: none; }
.card-modal__section--quiet { background: var(--bg); }

.card-modal__header { padding: 22px 28px 18px; padding-right: 60px; }
.card-modal__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
  /* Ne mord que sur un nom plus long que la ligne (« Asmoranomardicadaistinaculdacar »
     débordait le volet contenu à 375px) : sans effet aux largeurs desktop. */
  overflow-wrap: break-word;
}
.card-modal__sub {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px;
  color: var(--ink-dim);
  font-size: 13.5px;
}
.card-modal__sub-dot { color: var(--ink-mute); }
.card-modal__price {
  text-align: right; flex-shrink: 0;
  font-family: var(--font-mono);
}
.card-modal__price-main {
  font-size: 18px; font-weight: 600; color: var(--ink);
}

/* "Used in" pills */
.deck-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
.deck-pill:hover { border-color: var(--accent); background: var(--accent-soft); }
.deck-pill__qty {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--bg-3); color: var(--ink-dim);
  padding: 1px 5px; border-radius: 3px;
}

/* Number stepper (quantity) */
.stepper {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--bg-2);
  height: 44px;
  overflow: hidden;
}
.stepper button {
  width: 44px; height: 100%;
  border: none; background: transparent;
  color: var(--ink-dim);
  font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (min-width: 1024px) {
  .stepper { height: 36px; }
  .stepper button { width: 32px; }
}
.stepper button:hover:not(:disabled) { background: var(--bg-3); color: var(--ink); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper__value {
  min-width: 44px; padding: 0 8px;
  text-align: center;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Trade segmented control */
.trade-seg {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--bg-2);
  height: 36px;
  padding: 2px;
  gap: 2px;
  width: 100%;
}
.trade-seg button {
  flex: 1;
  border: none; background: transparent;
  border-radius: var(--r-1);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
  color: var(--ink-dim);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.trade-seg button:hover { background: var(--bg-3); color: var(--ink); }
.trade-seg button[aria-pressed="true"][data-status="open"]   { background: #DCFCE7; color: #15803D; }
.trade-seg button[aria-pressed="true"][data-status="maybe"]  { background: var(--bg-3); color: var(--ink); }
.trade-seg button[aria-pressed="true"][data-status="locked"] { background: #FEE2E2; color: #B91C1C; }

/* Foil checkbox styled like a chip */
.foil-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  font-size: 13px;
  color: var(--ink-dim);
  cursor: pointer;
  user-select: none;
}
.foil-chip input { accent-color: var(--accent); margin: 0; }
.foil-chip:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Tag chips (oracle categories) */
.tag {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  background: var(--bg-3);
  color: var(--ink-dim);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ============================================================
   VALIDATION STATUS (format/budget sidebar)
   ============================================================ */

/* Status row — PAS un bouton. Pastille + texte. */
.status-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
}
.status-row--ok   { color: var(--success); }
.status-row--bad  { color: var(--danger); }

.status-dot {
  width: 18px; height: 18px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.status-row--ok   .status-dot { background: var(--success-soft); }
.status-row--bad  .status-dot { background: var(--danger-soft); }

/* Error list — left accent block instead of floating red bullets */
.issue-block {
  border-left: 2px solid var(--danger);
  padding-left: 11px;
  display: flex; flex-direction: column; gap: 6px;
}
.issue-block--warn { border-left-color: var(--warning); }
.issue-block__item {
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.45;
}
.issue-block__item .muted { color: var(--ink-mute); }
.issue-block--rules { gap: 8px; }
.issue-block__rule { color: var(--danger); }

/* ============================================================
   BUDGET BAR
   ============================================================ */
.budget-head {
  display: flex; align-items: center; justify-content: space-between;
}
.budget-capform { display: inline-flex; align-items: center; gap: 6px; }
.budget-capform .prefix { color: var(--ink-mute); font-size: 13px; }
.budget-capform input {
  width: 96px; height: 44px;
  padding: 0 8px;
  text-align: right;
  font-family: var(--font-mono); font-size: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  color: var(--ink); outline: none;
}
/* La largeur suit la police : « No limit » en 16px mono ne tient pas dans 76px.
   cf. « Zoom iOS » dans la section FORMULAIRES */
@media (min-width: 1024px) {
  .budget-capform input { width: 76px; height: 30px; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .budget-capform input { font-size: 13px; }
}
.budget-capform input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.budget-meter { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.budget-meter__top {
  display: flex; align-items: baseline; justify-content: space-between;
}
.budget-meter__amount { display: flex; align-items: baseline; gap: 5px; }
.budget-meter__spent {
  font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--ink);
}
.budget-meter__cap { font-size: 13px; color: var(--ink-mute); }
.budget-meter__pct { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.budget-meter__pct--ok  { color: var(--success); }
.budget-meter__pct--bad { color: var(--danger); }

.budget-track {
  height: 6px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
}
.budget-track__fill {
  height: 100%;
  border-radius: 999px;
  transition: width .3s ease;
}
.budget-track__fill--ok  { background: var(--success); }
.budget-track__fill--bad { background: var(--danger); }

.budget-meter__foot { font-size: 12px; color: var(--ink-mute); }
.budget-meter__foot--bad { color: var(--danger); }

/* No-cap state — just the spent total, no bar */
.budget-nolimit {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono); font-size: 15px; color: var(--ink);
  margin-top: 10px;
}
.budget-nolimit .label { font-family: var(--font-sans); font-size: 12px; color: var(--ink-mute); }

/* ============================================================
   TRADE TABLE — how-it-works one-liner (toujours visible)
   ============================================================ */
.howto-line {
  font-size: 13px;
  color: var(--ink-dim);
}
.howto-line strong { color: var(--ink); font-weight: 600; }
.howto-line__arrow {
  color: var(--accent);
  font-weight: 700;
  margin: 0 4px;
}

/* Heart + label on each trade-table card */
.want-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-dim);
}
.want-label--on { color: var(--danger); }


/* ============================================================
   HOMEPAGE / LANDING (Direction C — "Bold mix")
   Hero indigo sombre → aperçu app (clair) → 4 piliers → footer.
   ============================================================ */
.landing { display: flex; flex-direction: column; flex: 1; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* ── boutons spécifiques au hero ── */
.btn--on-dark {
  --btn-bg: rgba(255, 255, 255, .10);
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, .22);
  --btn-hover-bg: rgba(255, 255, 255, .18);
}
.btn--on-light {              /* CTA blanc plein sur fond sombre */
  --btn-bg: #fff;
  --btn-fg: var(--accent-2);
  --btn-border: #fff;
  --btn-hover-bg: #fff;
}
.btn--on-light:hover { filter: brightness(.97); }

/* ── hero (bande sombre) ── */
.hero-dark {
  background: linear-gradient(160deg, #1b1d3a 0%, #2b2566 52%, #3f37a8 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero-dark .eyebrow { color: rgba(255, 255, 255, .62); }

/* nav vitrine (transparente au-dessus du hero) */
.lnav { display: flex; align-items: center; gap: 24px; height: 64px; }
/* `.nav-links` est déjà masqué sous 1024px ; ici on ne règle que la gouttière. */
.lnav .nav-links { margin-left: 8px; }
.lnav__cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hero-dark .nav-brand { color: #fff; }
.hero-dark .nav-link { color: rgba(255, 255, 255, .72); }
.hero-dark .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .10); }
.hero-dark .lnav__login { color: rgba(255, 255, 255, .82); }
.hero-dark .lnav__login:hover { color: #fff; background: rgba(255, 255, 255, .10); }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  padding-top: 36px;
  padding-bottom: 48px;
}
.hero-h1 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin: 18px 0 0;
  color: #fff;
  max-width: 560px;
}
.hero-lead {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
  margin: 22px 0 0;
  max-width: 430px;
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; margin-top: 30px; }
.hero-fan { display: none; justify-content: flex-end; }

/* ── section "aperçu app" (claire) ── */
.section-head { margin-bottom: 30px; max-width: 720px; }
.section-head .eyebrow { display: block; margin-bottom: 12px; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.08;
  margin: 0;
  color: var(--ink);
}

.app-preview { padding: 56px 0; }
.preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
.preview-h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
  margin: 0;
  color: var(--ink);
}
.preview-body {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 14px 0 0;
}

/* ── piliers ── */
.pillars-band {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 60px 0 66px;
}
.pillar-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.pillar {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-5);
  padding: 28px 28px 30px;
  transition: border-color .15s, box-shadow .15s;
}
.pillar:hover {
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -28px rgba(15, 23, 42, .22);
}
.pillar__top { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.pillar__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-3);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pillar__cat {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pillar__num { color: var(--accent); }
.pillar__title {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 0 0 9px;
  color: var(--ink);
}
.pillar__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0;
  text-wrap: pretty;
}
.pillar__body b { color: var(--ink); font-weight: 600; }

/* ── éventail de role cards (conteneur ; les cartes sont des .rcard) ── */
.fan { position: relative; width: 295px; height: 246px; }

/* ── role card (visuel propriétaire, sans illustration ni nom de carte) ── */
.rcard {
  width: 170px; height: 238px;
  border-radius: 13px;
  background: var(--bg-2);
  border: 1px solid rgba(15, 23, 42, .14);
  padding: 8px;
  box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rcard__title {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  flex-shrink: 0;
  padding: 0 8px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.rcard__title .pip { margin-left: auto; width: 17px; height: 17px; font-size: 9.5px; }
.rcard__art {
  flex: 1;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.rcard__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .24));
}
.rcard__icon { position: relative; z-index: 1; color: #fff; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .35)); }
.rcard__type {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
}
.rcard__type::before { content: ""; width: 4px; height: 4px; border-radius: 999px; background: currentColor; }
.rcard__text { display: flex; flex-direction: column; gap: 4px; padding: 1px; flex-shrink: 0; }
.rcard__tag { font-size: 9.5px; font-style: italic; color: var(--ink-dim); line-height: 1.25; margin: 0 0 2px; }
.rcard__line { height: 3px; border-radius: 2px; background: var(--bg-3); }

/* variante mini (tuiles trade table) — le texte est remplacé par un footer trade */
.rcard--mini { width: auto; height: auto; padding: 6px; gap: 5px; border-radius: 9px; box-shadow: none; }
.rcard--mini .rcard__title { height: 20px; font-size: 10px; padding: 0 6px; border-radius: 5px; }
.rcard--mini .rcard__art { flex: none; aspect-ratio: 488 / 340; border-radius: 6px; }
.rcard__foot { display: flex; align-items: center; gap: 6px; padding: 1px 2px 0; flex-shrink: 0; }
.rcard__owners { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); }

/* placeholders d'art (gradients par couleur, pas d'image réelle) */
.art-w { background: linear-gradient(155deg, #f3ead0 0%, #d6c290 100%); }
.art-u { background: linear-gradient(155deg, #4f86bd 0%, #1c3f63 100%); }
.art-b { background: linear-gradient(155deg, #54484a 0%, #1b1517 100%); }
.art-r { background: linear-gradient(155deg, #cf6347 0%, #7c2415 100%); }
.art-g { background: linear-gradient(155deg, #5a9966 0%, #234d30 100%); }

/* ── browser preview frame ── */
.bframe {
  border-radius: var(--r-5);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 40px 80px -50px rgba(15, 23, 42, .5);
}
.bframe__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
}
.bframe__dot { width: 11px; height: 11px; border-radius: 999px; background: var(--line-strong); }
.bframe__url {
  margin-left: 10px;
  flex: 1;
  height: 22px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.bframe__body { padding: 22px; background: var(--bg); }
.bframe__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.bframe__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* ── footer ── */
.foot { border-top: 1px solid var(--line); background: var(--bg-2); }
.foot__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 16px;
  max-width: 1080px;
  margin: 0 auto;
}
.foot__tag { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.foot__links { display: flex; gap: 20px; margin-left: auto; }
.foot__links a { color: var(--ink-dim); text-decoration: none; font-size: 13px; }
.foot__links a:hover { color: var(--ink); }
.foot__legal {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px 20px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-mute);
}

/* ── responsive (mobile-first : les règles ci-dessus sont l'état mobile) ── */
@media (min-width: 640px) {
  .wrap { padding: 0 24px; }
  .foot__row { padding: 20px 24px; }
  .foot__legal { padding: 0 24px 20px; }
}
@media (min-width: 768px) {
  .mini-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .wrap { padding: 0 56px; }
  .hero-grid { grid-template-columns: 1fr 400px; gap: 48px; padding-top: 54px; padding-bottom: 70px; }
  .hero-h1 { font-size: 56px; }
  .hero-fan { display: flex; }
  .preview-grid { grid-template-columns: 300px 1fr; gap: 44px; }
  .section-head h2 { font-size: 36px; }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .foot__row { flex-wrap: nowrap; padding: 26px 56px; }
  .foot__legal { padding: 0 56px 26px; }
}

/* ============================================================
   Discover — navigation du catalogue (picker de sets, rôles, grille)
   Porté du handoff design (discover-c.html). Réutilise les tokens.
   ============================================================ */
.discover { width: 100%; max-width: 1280px; margin: 0 auto; }

/* header */
.dvhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.dvhead + .howto-line { margin-bottom: 20px; }
.dvhead__title { font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -.015em; margin: 0; }
.dvhead__meta { font-size: 13px; color: var(--ink-mute); }

.fdrop.fdrop--lg { height: 44px; padding: 0 14px; border-radius: var(--r-3); font-size: 14px; font-weight: 600; color: var(--ink); }

/* anchor = <details> ; on neutralise le marqueur natif */
.anchor { position: relative; display: inline-flex; }
.anchor > summary { list-style: none; cursor: pointer; }
.anchor > summary::-webkit-details-marker { display: none; }
.ic-chev { transition: transform .12s; }
.anchor[open] > summary .ic-chev { transform: rotate(180deg); }

/* trigger principal (set picker) */
.seltrig { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r-3); color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.seltrig:hover { border-color: var(--ink-mute); }
.anchor[open] > .seltrig { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.seltrig__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.seltrig__code { font-size: 10px; letter-spacing: .1em; color: var(--ink-mute); text-transform: uppercase; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.seltrig__name { font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; max-width: min(240px, 100%); overflow: hidden; text-overflow: ellipsis; }
.seltrig__chev { color: var(--ink-mute); display: inline-flex; margin-left: 2px; }
/* Desktop : le nom d'édition s'ellipse plus tôt pour ne pas pousser la barre
   de filtres au-delà de la ligne. */
@media (min-width: 1024px) {
  .seltrig { min-width: 0; max-width: 100%; }
  .seltrig__name { max-width: min(170px, 100%); }
}

/* petit trigger (couleur/type/rareté/rôle) */
.fdrop { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: var(--r-2); border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--ink-dim); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.fdrop:hover { border-color: var(--ink-mute); color: var(--ink); }
.fdrop.is-set { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.anchor[open] > .fdrop { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.fdrop__count { font-family: var(--font-mono); font-size: 10px; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 6px; }
.fdrop__count[hidden] { display: none; }

/* Category filter — promu (filtre signature de l'app) : icône de tête accent,
   label plus présent, ressort parmi les filtres neutres. */
.fdrop--cat { color: var(--ink); font-weight: 600; }
.fdrop__lead { width: 24px; height: 24px; margin-left: -2px; border-radius: var(--r-2); background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fdrop--cat.is-set .fdrop__lead { background: #fff; color: var(--accent); }

/* popover */
/* `max-width` = plafond de sécurité pour TOUS les popovers (y compris
   `.popover--menu`) : deux gouttières mobiles (`main` en `px-4`). Sans effet sur
   les 380/420px du desktop. Formule de la maison, cf. `.popover--wide`. */
.popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 41; min-width: 200px; max-width: calc(100vw - 32px); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-4); box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 28px 60px -22px rgba(15,23,42,.4); overflow: hidden; }
.popover--wide { width: min(420px, calc(100vw - 40px)); }
.popover--roles { width: 380px; }
.poplist { max-height: 360px; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.poplist--compact { max-height: 320px; }
.poplist::-webkit-scrollbar { width: 8px; }
.poplist::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.popgroup { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); padding: 10px 10px 5px; position: sticky; top: 0; background: var(--bg-2); }
.poplist__empty { padding: 24px; text-align: center; color: var(--ink-mute); font-size: 13px; }
.poplist__empty[hidden] { display: none; }

/* set row */
.setrow { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r-2); cursor: pointer; text-align: left; width: 100%; border: none; background: transparent; }
.setrow:hover { background: var(--bg-3); }
.setrow.is-on { background: var(--accent-soft); }
.setrow[hidden] { display: none; }
.setrow__main { flex: 1; min-width: 0; }
.setrow__name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setrow__sub { display: block; font-size: 10.5px; color: var(--ink-mute); margin-top: 1px; }
.setrow__pct { font-size: 11px; color: var(--ink-dim); flex-shrink: 0; text-align: right; }
.setrow__pct small { display: block; color: var(--ink-mute); font-size: 9px; }
.popgroup[hidden] { display: none; }

/* grille de rôles dans le popover */
.dv-rolehead { padding-top: 12px; }
.rolegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px; }
.roletoggle { display: inline-flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-2); border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; font-size: 13px; color: var(--ink-dim); }
.roletoggle:hover { background: var(--bg-3); color: var(--ink); }
.roletoggle.is-on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); font-weight: 600; }
.roletoggle__ic { width: 28px; height: 28px; border-radius: var(--r-2); background: var(--bg-3); color: var(--ink-dim); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.roletoggle.is-on .roletoggle__ic { background: #fff; color: var(--accent); }
.pop-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--line); }
.pop-clear { background: none; border: none; color: var(--ink-mute); font-size: 12.5px; cursor: pointer; }
.pop-clear:hover { color: var(--danger); }

/* option row (type/rareté/couleur) */
.optrow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-2); cursor: pointer; font-size: 13.5px; color: var(--ink-dim); border: none; background: transparent; width: 100%; text-align: left; }
.optrow:hover { background: var(--bg-3); color: var(--ink); }
.optrow.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* color dots */
.cdot { width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 10px; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.16); }
.cdot--sm { width: 18px; height: 18px; font-size: 9px; }
.cdot-W { background: linear-gradient(135deg, #f5edc8, #c9b470); color: #5a4a18; }
.cdot-U { background: linear-gradient(135deg, #5b9fd6, #1f4e7a); color: #fff; }
.cdot-B { background: linear-gradient(135deg, #6b6168, #211c20); color: #f3ead7; }
.cdot-R { background: linear-gradient(135deg, #d97455, #8a2818); color: #fff; }
.cdot-G { background: linear-gradient(135deg, #7fb888, #2c5d3a); color: #fff; }
.cdot-C { background: linear-gradient(135deg, #cbd0d8, #9aa3ad); color: #3a4048; }
.cdot-M { background: linear-gradient(135deg, #e0c068, #a87f28); color: #3a2e0a; }

/* rarity gem */
.gem { width: 11px; height: 11px; border-radius: 999px; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 1px rgba(0,0,0,.25); }
.gem--common { background: radial-gradient(circle at 35% 30%, #5b5f66, #1c2024); }
.gem--uncommon { background: radial-gradient(circle at 35% 30%, #d3dbe4, #818b99); }
.gem--rare { background: radial-gradient(circle at 35% 30%, #f0d98a, #b08a2a); }
.gem--mythic { background: radial-gradient(circle at 35% 30%, #f6a55a, #c2410c); }

.dv-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dv-chips[hidden] { display: none; }
[data-role-chips] { margin-bottom: 16px; }
[data-role-chips]:empty { margin-bottom: 0; }
/* active role chip (removable) */
.achip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 500; }
.achip__i { display: inline-flex; }
/* Le `display: inline-flex` ne change AUCUNE largeur tant que min-* vaut 0 :
   le desktop reste identique au pixel, le mobile gagne une vraie zone de tap. */
.achip__x { cursor: pointer; font-size: 15px; line-height: 1; opacity: .8; background: none; border: none; color: inherit; padding: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; }
@media (min-width: 1024px) { .achip__x { min-width: 0; min-height: 0; } }
.achip__x:hover { opacity: 1; }

/* ============================================================
   Filter bar (Collection + Trade) — carte groupée, 2 zones.
   Ligne 1 : contrôles séparés par des filets verticaux ; ligne 2 : chips
   actifs. Réutilise les macros de filtre existantes en les rendant « flush »
   à l'intérieur de la carte (le cadre vient de la carte, plus des contrôles).
   ============================================================ */
.fbar { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-4); box-shadow: 0 1px 2px rgba(15,23,42,.04); margin-bottom: 18px; }
.fbar__row { display: flex; align-items: stretch; flex-wrap: wrap; }

/* Recherche : occupe l'espace flexible, sans cadre propre (la carte le fournit). */
.fbar .search.fbar__search { flex: 1 1 0%; min-width: 200px; height: 44px; border: none; background: transparent; border-radius: 0; }
.fbar .search.fbar__search:focus-within { box-shadow: none; }

/* Déclencheurs de dropdown rendus flush dans la barre. */
.fbar .fdrop { height: 44px; border: none; background: transparent; border-radius: 0; }
.fbar .fdrop:hover { background: var(--bg-3); color: var(--ink); }
.fbar .fdrop.is-set { background: var(--accent-soft); color: var(--accent); }
.fbar .anchor[open] > .fdrop { background: var(--bg-3); box-shadow: none; }
.fbar .anchor[open] > .fdrop.is-set { background: var(--accent-soft); }

/* Sélecteur d'édition (Discover) rendu flush comme les autres cellules. */
.fbar .seltrig { height: 44px; border: none; background: transparent; border-radius: 0; }
.fbar .seltrig:hover { border-color: transparent; background: var(--bg-3); }
.fbar .anchor[open] > .seltrig { background: var(--bg-3); box-shadow: none; }

/* Cellule segmentée (statut de trade, page Collection). */
.fbar .chip-group { height: 44px; padding: 0 10px; border: none; background: transparent; border-radius: 0; }

/* Cellule bascule (« My wishlist », page Trade) : la case native est masquée
   (mais focusable au clavier) ; l'état actif teinte la cellule en danger. */
.fbar-check { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-mute); user-select: none; }
.fbar-check input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fbar-check:hover { background: var(--bg-3); color: var(--ink); }
.fbar-check:focus-within { box-shadow: inset 0 0 0 2px var(--accent-ring); }
.fbar-check:has(input:checked) { background: var(--danger-soft); color: var(--danger); }

/* Compteur de résultats. */
.fbar__count { display: inline-flex; align-items: center; font-size: 12px; color: var(--ink-mute); white-space: nowrap; padding: 0 14px; }

/* Filets verticaux entre cellules — portés par le bord GAUCHE de chaque cellule
   sauf la première, et compensés par une marge négative : largeur des cellules
   et position des filets inchangées.
   Intérêt : au wrap, le filet appartient à la cellule qui OUVRE la ligne, donc
   il tombe à x = -1px, pile sur la bordure gauche de `.fbar` — même couleur,
   invisible. Plus aucun filet pendant en fin de ligne wrappée, à toutes les
   largeurs, sans `:has()` ni `nth-child`.
   ATTENTION cascade — deux contraintes, vérifiées au rendu :
   1. `:not(:first-child)` et non `* + *` : le sélecteur universel ne pèse RIEN,
      `* + *` plafonnait à (0,2,0) et perdait contre `.fbar .search.fbar__search`.
   2. la règle doit rester APRÈS les remises à plat « flush » ci-dessus : à
      spécificité égale (0,3,0) avec `.fbar .search.fbar__search`, c'est l'ordre
      du fichier qui la fait gagner sur son `border: none`. */
.fbar .fbar__row > *:not(:first-child) { border-left: 1px solid var(--line); margin-left: -1px; }

/* Bouton + popover « Other filters ». */
.fbar-more__pop { width: 340px; overflow: visible; }
.fbar-more__body { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.fbar-sect { display: flex; flex-direction: column; gap: 9px; }
.fbar-sect__lbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
/* Les macros réutilisées (minidrop / kindred / keyword) prennent toute la largeur
   de la section et retrouvent leur cadre bordé (annule le flush de la barre). */
.fbar-sect .anchor { display: flex; }
.fbar-sect .fdrop { width: 100%; height: 36px; justify-content: space-between; border: 1px solid var(--line-strong); background: var(--bg-2); border-radius: var(--r-3); padding: 0 11px; }
.fbar-sect .fdrop:hover { border-color: var(--ink-mute); background: var(--bg-2); }
.fbar-sect .fdrop.is-set { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.fbar-sect .anchor[open] > .fdrop { background: var(--bg-2); box-shadow: 0 0 0 3px var(--accent-ring); }
.fbar-sect .search { flex: none; width: 100%; min-width: 0; height: 36px; }
.fbar-sect .search:focus-within { box-shadow: 0 0 0 3px var(--accent-ring); }
.fbar-sect .select { width: 100%; }

/* Liste d'autocomplétion (Kindred / Keyword) : dropdown stylé cohérent avec les
   popovers, en remplacement du <datalist> natif. Positionné sous le champ. */
.fsug { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 18px 40px -18px rgba(15,23,42,.35); max-height: 220px; overflow-y: auto; padding: 4px; scrollbar-width: thin; }
.fsug[hidden] { display: none; }
.fsug__opt { display: flex; align-items: center; width: 100%; padding: 7px 10px; border: none; border-radius: var(--r-2); background: transparent; color: var(--ink-dim); font-size: 13px; text-align: left; cursor: pointer; font-family: inherit; }
.fsug__opt:hover, .fsug__opt.is-active { background: var(--bg-3); color: var(--ink); }

/* Sélecteurs exposés (color / rarity / mana) : options toutes visibles, cliquables. */
.fbar-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.fbar-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--ink-dim); font-size: 12px; font-weight: 500; cursor: pointer; user-select: none; }
.fbar-pill:hover { border-color: var(--ink-mute); color: var(--ink); }
.fbar-pill.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.fbar-pill--text { justify-content: center; min-width: 34px; padding: 0 9px; font-family: var(--font-mono); }
/* Pastilles de couleur : anneau de sélection autour du disque coloré. */
.fbar-pill--dots { width: 30px; height: 30px; padding: 1px; justify-content: center; border: 2px solid transparent; background: transparent; }
.fbar-pill--dots:hover { border-color: var(--line-strong); background: transparent; }
.fbar-pill--dots.is-on { border-color: var(--accent); background: transparent; }
.fbar-pill--dots .cdot { width: 22px; height: 22px; }

/* Popover ancré à droite (Other filters est proche du bord droit). */
.popover--right { left: auto; right: 0; }

/* ── Popovers de la barre de filtres : pleine largeur sous 1024px ────────────
   Généralisation du patron `.fbar--compact` ci-dessous (cf.
   docs/responsive-decisions.md §2) : l'ancre remonte à la ligne, le panneau
   occupe toute la largeur de la barre. Un panneau de 340/380px ne peut donc plus
   déborder d'un viewport de 375px, ni partir hors écran quand la ligne a wrappé
   et que le déclencheur a atterri à un x imprévisible.
   Le panneau reste DANS son `<details>` : l'invariant « clic extérieur ferme »
   (base.html) — dont dépendent discover.js et suggest.js — n'est pas touché.
   Tous les sélecteurs partent de `.fbar__row > .anchor` : `.fbar-more__pop`
   utilisé hors barre de filtres (`_trade_picker.html`, Phase 7) n'est pas
   concerné, et les variantes `--roles` / `--wide` / `--right` ne sont pas
   modifiées. */
.fbar__row { position: relative; }
.fbar__row > .anchor { position: static; }
.fbar__row > .anchor > .popover { left: 0; right: 0; width: auto; }
/* Panneau pleine largeur ancré sous une ligne wrappée = panneau potentiellement
   haut : zone de scroll interne plutôt qu'un débordement sous le viewport. */
.fbar__row > .anchor > .popover > .rolegrid,
.fbar__row > .anchor > .popover > .fbar-more__body { max-height: 60vh; overflow-y: auto; }

/* Desktop : la barre tient sur une ligne, chaque panneau retrouve son ancre et sa
   largeur. `.fbar--compact` est exclu des restaurations de position/largeur : la
   sidebar 22rem du deck builder garde le panneau pleine largeur à TOUTES les
   largeurs, c'est sa raison d'être. Le préfixe `.fbar` porte la spécificité
   au-dessus des règles mobiles (0,3,0), sans dépendre de l'ordre du fichier. */
@media (min-width: 1024px) {
  .fbar:not(.fbar--compact) .fbar__row > .anchor { position: relative; }
  .fbar:not(.fbar--compact) .fbar__row > .anchor > .popover { right: auto; }
  .fbar:not(.fbar--compact) .fbar__row > .anchor > .popover--right { left: auto; right: 0; }
  .fbar:not(.fbar--compact) .fbar__row > .anchor > .fbar-more__pop { width: 340px; }
  .fbar .fbar__row > .anchor > .popover--roles { width: 380px; }
  .fbar .fbar__row > .anchor > .popover--wide { width: min(420px, calc(100vw - 40px)); }
  .fbar .fbar__row > .anchor > .popover > .rolegrid,
  .fbar .fbar__row > .anchor > .popover > .fbar-more__body { max-height: none; overflow-y: visible; }
}

/* ── Barre de filtres du picker de trade (_trade_picker.html) ────────────────
   Même patron que `.fbar__row` ci-dessus, mais cette barre n'est pas une `.fbar`
   (filtrage client, pas de chips ni de compteur) : les règles ci-dessus, toutes
   préfixées `.fbar__row`, ne l'atteignaient pas. Son popover « Other » gardait
   donc `popover--right` + 340px, ancré à un déclencheur dont le x dépend du wrap
   de la ligne — d'où un panneau hors écran en mobile. */
.tp-filters { position: relative; }
.tp-filters > .anchor { position: static; }
.tp-filters > .anchor > .popover { left: 0; right: 0; width: auto; }
/* Six sections empilées : sans plafond le panneau part sous le viewport. */
.tp-filters > .anchor > .popover > .fbar-more__body { max-height: 60vh; overflow-y: auto; }
@media (min-width: 1024px) {
  .tp-filters > .anchor { position: relative; }
  .tp-filters > .anchor > .popover--right { left: auto; right: 0; }
  .tp-filters > .anchor > .fbar-more__pop { width: 340px; }
  .tp-filters > .anchor > .popover > .fbar-more__body { max-height: none; overflow-y: visible; }
}

/* Variante compacte (constructeur de deck, sidebar étroite ~22rem) : une seule
   ligne — Category · nom · Other — avec contrôles réduits. Le popover « Other »
   se déroule sous TOUTE la barre (largeur de la sidebar) pour ne jamais déborder
   horizontalement dans la colonne à overflow masqué. */
.fbar--compact .fbar__row { position: relative; }
.fbar--compact .fdrop { height: 36px; padding: 0 10px; gap: 5px; font-size: 12.5px; }
.fbar--compact .search.fbar__search { height: 36px; min-width: 64px; }
.fbar--compact [data-mini-label] { display: inline-block; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.fbar--compact .fbar-more { position: static; }
.fbar--compact .fbar-more__pop { top: calc(100% + 6px); left: 0; right: 0; width: auto; }
.fbar--compact .fbar__chips { padding: 8px 10px; }

/* Ligne 2 : chips actifs, dans la même carte (fond différencié, filet supérieur). */
.fbar__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg); border-radius: 0 0 var(--r-4) var(--r-4); }
.fbar__chips[hidden] { display: none; }
.fbar-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 10px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 500; }
.fbar-chip__k { font-weight: 400; opacity: .7; }
/* cf. .achip__x — même patron. La chip s'élargit de 26 à 32px sur mobile pour
   héberger la zone de tap sans la faire déborder. */
.fbar-chip__x { cursor: pointer; font-size: 14px; line-height: 1; opacity: .8; background: none; border: none; color: inherit; padding: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; }
@media (min-width: 1024px) { .fbar-chip__x { min-width: 0; min-height: 0; } }
.fbar-chip__x:hover { opacity: 1; }
.fbar-reset { background: none; border: none; color: var(--ink-mute); font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; }
.fbar-reset:hover { color: var(--danger); }
/* « Save to Looking for » : action de ligne (groupée avec « Reset all »), pas un
   chip. Style texte + séparateur à gauche pour la détacher des filtres remplis.
   Le séparateur encode « à gauche de Reset all » (ordre d'insertion de
   discover.js:213-236, inchangé). Mobile : la ligne de chips wrappe et le bouton
   ouvre souvent une ligne — le filet deviendrait un tiret parasite en bord de
   zone (ici, contrairement à `.fbar__row`, le padding empêche la bordure de la
   carte de l'absorber). On le retire sous 1024px ; l'accent, l'icône et le
   libellé suffisent à détacher l'action. */
.fbar-save { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; padding: 0 2px; border: none; border-radius: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; }
@media (min-width: 1024px) { .fbar-save { padding-left: 12px; border-left: 1px solid var(--line); } }
.fbar-save svg { width: 13px; height: 13px; }
.fbar-save:hover { text-decoration: underline; text-underline-offset: 2px; }
.fbar-save:disabled { opacity: .5; cursor: default; text-decoration: none; }

/* « Looking for » (page Community) : préférences enregistrées en cartes
   distinctes (une par entrée) + barre d'ajout sans marge basse. */
.lf-bar { margin-bottom: 0; }
.lf-card { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-2); }
.lf-card:hover { border-color: var(--line-strong); }
.lf-card__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1 1 0%; min-width: 0; }
.lf-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-dim); font-size: 11px; font-weight: 500; }
.lf-card__x { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--r-3); background: none; color: var(--ink-mute); font-size: 17px; line-height: 1; cursor: pointer; }
@media (min-width: 1024px) { .lf-card__x { width: 26px; height: 26px; } }
.lf-card__x:hover { border-color: var(--danger); color: var(--danger); }

/* card grid (vraies images Scryfall). Colonnes pilotées par les utilitaires
   Tailwind du conteneur (_discover_results.html), comme les grilles collection
   & trade : une seule échelle 2→3→4→5 sur 640/768/1024. */
.cgrid { display: grid; gap: 16px; }
.cgrid__card { padding: 0; border: none; background: transparent; cursor: pointer; border-radius: 4.75% / 3.5%; overflow: hidden; display: block; box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 6px 16px -7px rgba(0,0,0,.4); transition: transform .14s, box-shadow .14s; }
.cgrid__card:hover { transform: translateY(-5px); box-shadow: 0 12px 26px -9px rgba(0,0,0,.5); }
.cgrid__card img { width: 100%; display: block; border-radius: inherit; }
.cgrid__noimg { aspect-ratio: 5 / 7; display: grid; place-items: center; padding: 8px; text-align: center; background: var(--bg-3); color: var(--ink-mute); font-size: 12px; }
.cgrid__more { grid-column: 1 / -1; height: 46px; margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--ink-dim); border-radius: var(--r-3); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cgrid__more:hover { border-color: var(--ink-mute); color: var(--ink); }
.cgrid__more.htmx-request { opacity: .55; pointer-events: none; }
.cgrid__more-meta { color: var(--ink-mute); font-weight: 500; }

.empty { padding: 60px 20px; text-align: center; color: var(--ink-mute); border: 1px dashed var(--line-strong); border-radius: var(--r-4); }

/* Tuile carte Collection / Trade : visuel propre (type Discover, image arrondie +
   lift au survol) avec un footer conservé pour les infos & actions. */
.ccard { position: relative; display: block; border: 1px solid var(--line); background: var(--bg-2); border-radius: var(--r-4); overflow: hidden; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 6px 16px -7px rgba(0,0,0,.4); transition: transform .14s, box-shadow .14s, border-color .14s; }
.ccard:hover { transform: translateY(-5px); box-shadow: 0 12px 26px -9px rgba(0,0,0,.5); border-color: var(--accent); }
.ccard__media { position: relative; display: block; line-height: 0; z-index: 1; }
.ccard__media img { width: 100%; display: block; border-radius: 0 0 var(--r-4) var(--r-4); }
.ccard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: calc(3px + var(--r-4)) 6px 3px; margin-top: calc(-1 * var(--r-4)); background: var(--bg-2); }
/* En 2 colonnes le pied est à l'étroit : un élément qui ne rentre pas descend
   d'une ligne entière plutôt que de casser un libellé au milieu d'un mot.
   La rangée interne du trade grid (_trade_grid.html) doit wrapper aussi. */
.ccard__foot > div { flex-wrap: wrap; }
.ccard__foot span { white-space: nowrap; }
@media (min-width: 640px) { .ccard__foot { gap: 6px; padding-left: 8px; padding-right: 8px; } }

/* Tuiles « démarrer un trade » (page People) : matches auto vs trade manuel. */
.trade-tile { display: block; width: 100%; text-align: left; font: inherit; color: inherit; border: 1px solid var(--line); border-radius: var(--r-4); background: var(--bg-2); cursor: pointer; transition: border-color .14s, box-shadow .14s; }
.trade-tile:hover { border-color: var(--accent); }
.trade-tile__row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.trade-tile__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--r-3); display: inline-flex; align-items: center; justify-content: center; background: var(--bg-3); color: var(--ink-dim); }
.trade-tile__icon--accent { background: var(--accent-soft); color: var(--accent); }
.trade-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.trade-tile__title { font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing: -.01em; }
.trade-tile__desc { font-size: 12.5px; color: var(--ink-mute); line-height: 1.35; }
.trade-tile__cta { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
/* Carte recommandée mise en avant (Smart matches). */
.trade-tile--on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.trade-tile--on:hover { border-color: var(--accent); }

/* ============================================================
   COMMUNITY — blocs domaine « Trade » / « Groups »
   Direction A : hiérarchie verticale au lieu d'onglets.
   ============================================================ */
.domain {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: 18px 20px 20px;
}
.domain + .domain { margin-top: 22px; }
.domain-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.domain-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.domain-kicker svg { color: var(--accent); flex-shrink: 0; }

/* Activité de trade sous les deux cartes d'action. */
.domain-activity { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.caught-up { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.caught-up svg { color: var(--success); flex-shrink: 0; }
.caught-up__text { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.empty-stats { display: flex; flex-wrap: wrap; gap: 0 22px; padding-left: 21px; }
.empty-stat { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; }
.empty-stat__label { min-width: 96px; }
.empty-stat__msg { font-size: 13px; color: var(--ink-mute); }

/* Ligne d'historique / proposition encadrée. */
.history-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  text-decoration: none;
  color: inherit;
  transition: border-color .14s, background .14s;
}
.history-row:hover { border-color: var(--line-strong); background: var(--bg); }
.history-row__body { flex: 1; min-width: 0; }
.history-row__name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.history-row__note { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Statut + date sont `flex-shrink: 0` : côte à côte ils figeaient ~169px des
   ~313px de la ligne à 375px. Empilés en mobile, ils en rendent la moitié. */
.history-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
@media (min-width: 640px) { .history-row__right { flex-direction: row; align-items: center; gap: 14px; } }
.status-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.status-tag--success { color: var(--success); }
.status-tag--danger { color: var(--danger); }
.status-tag--warning { color: var(--warning); }

/* Avatar lettre (cercle indigo). */
.avatar {
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  flex-shrink: 0;
}

/* Liste de groupes compacte. */
.grp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 8px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  border-radius: var(--r-2);
  transition: background .14s;
}
.grp-row:last-child { border-bottom: none; }
.grp-row:hover { background: var(--bg); }
.grp-ico {
  width: 32px; height: 32px;
  border-radius: var(--r-2);
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.grp-row__body { flex: 1; min-width: 0; }
.grp-row__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.grp-row__arrow { color: var(--accent); flex-shrink: 0; display: inline-flex; }

/* Rangées rejoindre / créer un groupe. */
.domain-join { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.domain-join__row { display: flex; gap: 8px; flex-wrap: wrap; }
.domain-join__row .input { flex: 1; min-width: 0; }
/* Le <form> « code d'invitation » est lui-même une `.domain-join__row` imbriquée.
   Son `min-width: auto` valait sa taille min-content (~295px : largeur
   intrinsèque de l'input + « Join »), qu'aucun `min-width: 0` sur l'input ne
   réduit — le formulaire mangeait donc toute la ligne et « New group » sortait de
   l'écran de 81px à 375px.
   `flex-basis: auto` garde une taille hypothétique fondée sur le contenu, ce qui
   déclenche le wrap sous ~490px (« New group » passe à la ligne au lieu de
   déborder) ; `min-width: 0` autorise la compression quand le formulaire est seul
   sur sa ligne (≤ 375px). En desktop la ligne tient, rendu inchangé. */
.domain-join__row > form.domain-join__row { flex: 1 1 auto; min-width: 0; }
.domain-join__code { font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

/* Modal de sélection du destinataire (Build a trade) */
.pick-modal { background: var(--bg-2); border-radius: var(--r-4); box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 24px 60px rgba(15,23,42,.25); width: 100%; max-width: 420px; max-height: calc(100dvh - 48px); display: flex; flex-direction: column; position: relative; padding: 20px; }
/* 60px : dégage le .card-modal__close, qui fait 44px sous 1024px (phase 2). */
.pick-modal__head { margin-bottom: 14px; padding-right: 60px; }
@media (min-width: 1024px) { .pick-modal__head { padding-right: 32px; } }
.pick-modal__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.pick-modal__sub { font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.pick-modal__search { margin-bottom: 12px; }
.pick-modal__list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.pick-modal__empty { font-size: 13px; color: var(--ink-mute); padding: 12px 4px; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-3); color: var(--ink); }
.pick-row:hover { background: var(--bg-3); }
.pick-row__name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row__go { color: var(--ink-mute); }
.pick-row:hover .pick-row__go { color: var(--accent); }

/* ============================================================
   COMPOSEUR DE TRADE — résumé de la proposition (trade_compose.html)
   ============================================================
   Épinglé en haut et replié sur une ligne : `movePickerRow` déplace la
   carte vers un conteneur très éloigné en une colonne, donc la destination
   doit rester visible pendant qu'on tape « + ».
   Un item de grille est confiné à sa zone de grille et ne collerait jamais
   — d'où le `flex flex-col lg:grid` sur la disposition. */
.tc-summary {
  position: sticky;
  top: 0;
  z-index: 30;  /* sous .popover (41), .fsug (50), la modale (50), les toasts (100) */
  background: var(--bg);  /* opaque : les pickers défilent dessous */
  padding-bottom: 8px;
  box-shadow: 0 1px 0 0 var(--line);
}
/* Borné pour qu'un gros trade n'épingle pas tout l'écran. Exception assumée
   à « un seul axe de scroll » : n'existe que panneau ouvert. */
.tc-summary__body { max-height: 55dvh; overflow-y: auto; }
.tc-summary__toggle[aria-expanded="true"] .ic-chev { transform: rotate(180deg); }
/* Dans la colonne étroite du milieu, les parties `shrink-0` d'une ligne
   (badge, ♥, ◎, ×N, steppers) n'entrent pas côte à côte. `flex-wrap` et non
   `display` : `applyPickerFilters` pilote `display`. */
.tc-summary__body [data-picker-id] { flex-wrap: wrap; }
@keyframes tc-pulse {
  0%   { background: var(--bg); }
  35%  { background: var(--accent-soft); }
  100% { background: var(--bg); }
}
.tc-summary--pulse { animation: tc-pulse .45s ease-out; }
@media (min-width: 1024px) {
  .tc-summary { position: static; z-index: auto; background: none; padding-bottom: 0; box-shadow: none; }
  .tc-summary__body { max-height: none; overflow-y: visible; }
  .tc-summary--pulse { animation: none; }
}

/* Bascule entre les deux collections (hors desktop) ────────────────────────
   En une colonne les deux pickers étaient empilés : atteindre celui du bas
   demandait de traverser toute la première liste. Un seul est affiché à la
   fois, l'autre reste DANS le DOM — ses inputs doivent partir au submit et
   `movePickerRow` continue d'y renvoyer les lignes retirées.
   On pilote `display` sur la COLONNE ; `applyPickerFilters` pilote celui des
   lignes : les deux ne se marchent pas dessus.
   Le segmented control vit dans `.tc-summary` (épinglée) pour rester
   atteignable au milieu d'une longue liste. */
[data-tc-panes][data-tc-active="mine"] > .tc-pane--theirs,
[data-tc-panes][data-tc-active="theirs"] > .tc-pane--mine { display: none; }

.tc-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-2);
}
.tc-tab {
  flex: 1 1 0;
  min-width: 0;                       /* sinon un pseudo long fait déborder la piste */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-mute);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.tc-tab__lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Compteur de cartes engagées de ce côté — remplace le rappel « ↗0 ⇄ ↙0 » de
   l'en-tête replié, qui doublait l'information. Masqué à 0 (cf. JS).
   Aucune déclaration `display` ici, volontairement : le JS le masque avec
   l'utilitaire `hidden`, qui doit gagner sans dépendre de l'ordre des feuilles
   (même règle que `.qty-step`). D'où une pastille en flux inline. */
.tc-tab__n {
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.45;
}
.tc-tab.is-on { background: var(--accent-soft); color: var(--accent); }
.tc-tab.is-on .tc-tab__n { background: var(--accent); color: #fff; }

/* Desktop : les deux colonnes côte à côte, plus de bascule. Sélecteur d'attribut
   répété pour égaler la spécificité des règles de masquage (0,3,0) — une media
   query n'en ajoute aucune ; c'est l'ordre du fichier qui départage. */
@media (min-width: 1024px) {
  [data-tc-panes][data-tc-active] > .tc-pane { display: block; }
  .tc-tabs { display: none; }
}

/* Steppers de quantité du picker (_trade_picker.html). Seule taille du projet
   pilotée par le TYPE DE POINTEUR et non par la largeur : un tap target dépend
   du doigt, pas de la fenêtre (décision §7). Pas de `display` ici — `setRowQty`
   masque le « − » et le compteur via l'utilitaire `hidden`, qui doit gagner. */
.qty-steps { gap: 8px; }
.qty-step  { width: 32px; height: 32px; }
.qty-count { width: 24px; }
@media (hover: hover) and (pointer: fine) {
  .qty-steps { gap: 4px; }
  .qty-step  { width: 24px; height: 24px; }
  .qty-count { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cgrid__card, .cgrid__card:hover { transition: none; transform: none; }
  .ccard, .ccard:hover { transition: none; transform: none; }
  .ic-chev { transition: none; }
  .tc-summary--pulse { animation: none; }
}