/* ============================================================
   Spellforge — Station Arcanique & Grimoire MTG
   Palette « Sanctuaire Arcanique » + 6 thèmes à variables CSS
   ============================================================ */

/* ═══════════ THÈMES ═══════════
   data-theme sur <html> — chaque thème redéfinit les variables */

/* 1. Arcanique (défaut — la maquette « aide 2 ») */
:root, [data-theme="arcane"] {
  --bg: #15100e;
  --surface-lowest: #15100e;
  --surface-low: #1e1815;
  --surface: #241d19;
  --surface-high: #2c231f;
  --surface-highest: #382c26;
  --surface-bright: #3b302a;
  --on-surface: #f2eae4;
  --on-surface-var: #d3c2b4;
  --outline: #8a7566;
  --outline-subtle: #4a3c33;
  --primary: #e5a855;
  --primary-light: #f3d8a8;
  --primary-dark: #c67d26;
  --on-primary: #4a2800;
  --brass: #c89d5c;
  --brass-muted: #6a5436;
  --gradient-card: linear-gradient(180deg, #241c18, #1a1411);
  --glow: rgba(229, 168, 85, .25);
  color-scheme: dark;
}

/* 2. Lumière — pergamin chaud */
[data-theme="light"] {
  --bg: #f4ede2;
  --surface-lowest: #faf5ec;
  --surface-low: #f1e8da;
  --surface: #e9ddcc;
  --surface-high: #e0d2bd;
  --surface-highest: #d6c6ac;
  --surface-bright: #fffdf7;
  --on-surface: #33261a;
  --on-surface-var: #5c4a38;
  --outline: #9c8467;
  --outline-subtle: #d8c4a8;
  --primary: #b06f1f;
  --primary-light: #8a5210;
  --primary-dark: #d89a3e;
  --on-primary: #fff8ec;
  --brass: #a67c3f;
  --brass-muted: #cbb489;
  --gradient-card: linear-gradient(180deg, #fffdf7, #f3e9d8);
  --glow: rgba(176, 111, 31, .2);
  color-scheme: light;
}

/* 3. Sombre pur — encre & obsidienne */
[data-theme="obsidian"] {
  --bg: #0b0c10;
  --surface-lowest: #0b0c10;
  --surface-low: #131519;
  --surface: #191c21;
  --surface-high: #21242b;
  --surface-highest: #2a2e37;
  --surface-bright: #333845;
  --on-surface: #e8eaf0;
  --on-surface-var: #b9bfcc;
  --outline: #7c8496;
  --outline-subtle: #383e4c;
  --primary: #c9a6ff;
  --primary-light: #e4d6ff;
  --primary-dark: #9d6ff0;
  --on-primary: #221040;
  --brass: #a88fe0;
  --brass-muted: #5a4a7d;
  --gradient-card: linear-gradient(180deg, #1b1e25, #12141a);
  --glow: rgba(201, 166, 255, .25);
  color-scheme: dark;
}

/* 4. Émeraude — cabinet d'alchimiste */
[data-theme="emerald"] {
  --bg: #0c1410;
  --surface-lowest: #0c1410;
  --surface-low: #132018;
  --surface: #18291e;
  --surface-high: #1e3225;
  --surface-highest: #26402e;
  --surface-bright: #2f4d37;
  --on-surface: #e6f2e9;
  --on-surface-var: #bed4c3;
  --outline: #7fa389;
  --outline-subtle: #3b5544;
  --primary: #5fd68f;
  --primary-light: #a8f0c4;
  --primary-dark: #2fa962;
  --on-primary: #062813;
  --brass: #74c69d;
  --brass-muted: #3f6b52;
  --gradient-card: linear-gradient(180deg, #17251c, #0f1a14);
  --glow: rgba(95, 214, 143, .25);
  color-scheme: dark;
}

/* 5. Océan — fonds du mage bleu */
[data-theme="ocean"] {
  --bg: #0a1119;
  --surface-lowest: #0a1119;
  --surface-low: #101a26;
  --surface: #152231;
  --surface-high: #1b2c3f;
  --surface-highest: #22384f;
  --surface-bright: #2b4763;
  --on-surface: #e4eef8;
  --on-surface-var: #b7cbdd;
  --outline: #7e99b3;
  --outline-subtle: #36485c;
  --primary: #58b6ff;
  --primary-light: #a8d9ff;
  --primary-dark: #2d8fe0;
  --on-primary: #04213b;
  --brass: #6fb3e0;
  --brass-muted: #3c6280;
  --gradient-card: linear-gradient(180deg, #14202e, #0d1622);
  --glow: rgba(88, 182, 255, .28);
  color-scheme: dark;
}

/* 6. Sang & ombre — vampire rouge sombre */
[data-theme="crimson"] {
  --bg: #130b0c;
  --surface-lowest: #130b0c;
  --surface-low: #1d1113;
  --surface: #251618;
  --surface-high: #2f1b1e;
  --surface-highest: #3d2226;
  --surface-bright: #4b2a2f;
  --on-surface: #f5e8e8;
  --on-surface-var: #dcc0c0;
  --outline: #a97e80;
  --outline-subtle: #50343a;
  --primary: #ff7d70;
  --primary-light: #ffb3ab;
  --primary-dark: #e04f42;
  --on-primary: #3b0a06;
  --brass: #e08a80;
  --brass-muted: #7d453f;
  --gradient-card: linear-gradient(180deg, #251619, #180f11);
  --glow: rgba(255, 125, 112, .28);
  color-scheme: dark;
}

/* ═══════════ BASE ═══════════ */
* { box-sizing: border-box; }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* L'attribut hidden doit TOUJOURS masquer, même sur les éléments
   qui ont un display défini (menu thème, grille, boutons…) */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--on-surface);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background .25s, color .25s;
}

.font-cinzel { font-family: "Cinzel", Georgia, serif; }
.font-serif-reading { font-family: "Newsreader", Georgia, serif; }
.font-mono-arcane { font-family: "JetBrains Mono", Consolas, monospace; }
.muted { color: var(--outline); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-lowest); }
::-webkit-scrollbar-thumb { background: var(--outline-subtle); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--outline); }

/* ═══════════ GEMMES DE MANA ═══════════ */
.mana-gem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-family: "JetBrains Mono", Consolas, monospace;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 2px 4px rgba(0,0,0,.6);
  flex: none;
}
.gm-W { background: #f7f2d5; color: #241c04; }
.gm-U { background: #54b2f7; color: #04222e; }
.gm-B { background: #b87be8; color: #2a1040; }
.gm-R { background: #ff7d70; color: #3b0a06; }
.gm-G { background: #43c777; color: #052e18; }
.gm-C { background: var(--surface-highest); color: var(--on-surface-var); }
.gm-num { background: var(--surface-highest); color: var(--on-surface-var); }
.mana-gem img {
  width: 15px;
  height: 15px;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Symbole de mana en image (tableau, tags, etc.) */
.msym {
  width: 17px;
  height: 17px;
  flex: none;
  display: inline-block;
  pointer-events: none;
  user-select: none;
}
.mana-symbol {
  width: 17px;
  height: 17px;
  border-radius: 9999px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-family: "JetBrains Mono", Consolas, monospace;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 2px 4px rgba(0,0,0,.6);
}

/* ═══════════ TOP BAR ═══════════ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 76px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--surface-lowest) 95%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--outline-subtle);
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
}
.topbar__left { display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; cursor: default; }
.brand__name {
  font-family: "Cinzel", Georgia, serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--primary-light);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 18px var(--glow);
}
.brand__name b { font-weight: 800; color: var(--primary); }
.mainnav { display: flex; align-items: center; gap: 24px; }
.mainnav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  color: var(--on-surface-var);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color .15s;
}
.mainnav__link:hover { color: var(--primary-light); }
.mainnav__link.is-active { color: var(--primary); border-color: var(--primary); }

.topbar__right { display: flex; align-items: center; gap: 16px; }
.badge-cercle {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--surface);
  border: 1px solid var(--brass-muted);
  border-radius: 999px;
  color: var(--primary-light);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
@media (min-width: 900px) { .badge-cercle { display: inline-flex; } }

.iconbtn {
  position: relative;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--surface-low);
  border: 1px solid var(--outline-subtle);
  border-radius: 10px;
  color: var(--outline);
  font-size: 16px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.iconbtn:hover { border-color: rgba(200,157,92,.7); color: var(--primary-light); }
.dot-notif {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 6px var(--glow);
}

/* ── SÉLECTEUR DE THÈME ── */
.theme-picker { position: relative; }
.theme-picker__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--brass);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  padding: 8px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-picker__title {
  font-family: "Cinzel", Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary-light);
  padding: 6px 10px 4px;
}
.theme-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--on-surface);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.theme-opt:hover { background: var(--surface-high); }
.theme-opt.is-current { background: var(--surface-high); color: var(--primary-light); font-weight: 700; }
.theme-opt__swatches { display: flex; gap: 3px; flex: none; }
.theme-opt__swatches span {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.theme-opt__check { margin-left: auto; color: var(--primary); font-weight: 700; }

.usercard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 16px 7px 8px;
  background: var(--surface-low);
  border: 1px solid var(--outline-subtle);
  border-radius: 14px;
  cursor: default;
  transition: border-color .15s, background .15s;
}
.usercard:hover { background: var(--surface); border-color: rgba(200,157,92,.7); }
.usercard__avatar {
  flex: none;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(200,157,92,.7);
  background: var(--surface-highest);
  font-size: 28px;
  box-shadow: 0 0 12px var(--glow);
}
.usercard__info { display: flex; flex-direction: column; gap: 4px; }
.usercard__name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.2; }
.lvl {
  display: inline-block;
  padding: 1px 7px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 6px;
  color: var(--primary);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
}
.usercard__sub { font-size: 11px; color: var(--outline); font-family: "JetBrains Mono", monospace; line-height: 1; }

/* ── Barre d'XP du header : plus grosse, texte dans la barre ── */
.usercard__xp { position: relative; display: block; }
.usercard__xp-bar {
  display: block;
  width: 210px;
  height: 18px;
  background: var(--surface-highest);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--outline-subtle));
  border-radius: 9999px;
  overflow: hidden;
}
.usercard__xp-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light));
  transition: width .45s ease;
}
.usercard__xp-label {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.6);
  white-space: nowrap;
  pointer-events: none;
}

/* ── Avatar choisissable ── */
.usercard__avatar {
  cursor: pointer;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: 0;
}
.usercard__avatar:hover { border-color: var(--primary); box-shadow: 0 0 8px var(--glow); }
.usercard__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.lvl { cursor: pointer; font-family: "JetBrains Mono", monospace; }
button.lvl:hover { background: color-mix(in srgb, var(--primary) 25%, transparent); }

/* ── Badge crédits ── */
.credits-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--surface-low);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 9999px;
  color: var(--primary);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.credits-badge:hover { border-color: var(--primary); box-shadow: 0 0 10px var(--glow); }

/* ═══════════ WORKSPACE (bandeau horizontal de filtres) ═══════════ */
.workspace {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px);
  overflow: hidden;
}

/* ────────── Bandeau de filtres ────────── */
.drawer {
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 52vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-low);
  border-bottom: 1px solid var(--outline-subtle);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  border-bottom: 1px solid var(--outline-subtle);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.drawer__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary-light);
}
.drawer__actions { display: flex; align-items: center; gap: 8px; }

.linkbtn {
  background: none;
  border: none;
  padding: 0;
  color: var(--outline);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  cursor: pointer;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.linkbtn:hover { color: var(--primary); }
.linkbtn--primary { color: var(--primary); font-weight: 600; }
.linkbtn--primary:hover { text-decoration: underline; color: var(--primary-light); }
.linkbtn--sm { font-size: 11px; }
.sep { color: var(--outline-subtle); }

.drawer__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
}

/* Colonnes du bandeau : une colonne = un bloc encadré regroupant ses sections */
.fcol {
  flex: 1 1 300px;
  min-width: 290px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--outline-subtle) 60%, transparent);
  border-radius: 14px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.18);
}
/* Les sections se collent en haut de leur colonne, à leur hauteur naturelle : pas d'étirement
   vertical qui donnerait un effet « centrage » entre les blocs. */
.fcol > .fsection { flex: 0 0 auto; min-width: 0; max-width: none; }
.fcol { justify-content: flex-start; align-content: flex-start; }
.fsection {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.fsection__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fsection__head-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fsection__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary-light);
}
.hint { font-size: 11px; color: var(--outline); font-family: "JetBrains Mono", monospace; }
.nowrap { white-space: nowrap; }
.hr { height: 1px; background: transparent; }

.textfield {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-subtle) 90%, transparent);
  border-radius: 10px;
  color: var(--on-surface);
  font-family: inherit;
  font-size: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.textfield:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.textfield::placeholder { color: color-mix(in srgb, var(--outline) 70%, transparent); }
.textfield--mono { font-family: "JetBrains Mono", monospace; color: var(--primary); }
.textfield--inline { width: auto; flex: 1; min-width: 120px; }

.checkrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11px; }
.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--on-surface-var);
  cursor: pointer;
  user-select: none;
}
.check:hover { color: var(--on-surface); }
.check input {
  width: 13px; height: 13px;
  accent-color: var(--primary);
  background: var(--surface-lowest);
  cursor: pointer;
}
.copies { color: var(--outline); }

/* ── Sélecteur FR/EN ── */
.langtoggle {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-subtle);
  border-radius: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}
.lang, .opbtn {
  padding: 2px 8px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--outline);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: all .12s;
}
.lang.is-active, .opbtn.is-active { background: var(--surface-bright); color: var(--primary); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.lang:hover:not(.is-active), .opbtn:hover:not(.is-active) { color: var(--on-surface); }

/* ── Bouton « Masquer » (cartes non disponibles dans la langue choisie) ──
   Même graphisme que les pills et champs de filtres ; au survol (ou focus clavier)
   une infobulle révèle « Masquer les cartes non disponibles dans cette langue ». */
.hidemissing {
  position: relative;
  flex: none;
  padding: 3px 11px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-subtle);
  border-radius: 999px;
  color: var(--on-surface-var);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: all .12s;
}
.hidemissing:hover:not(.is-active), .hidemissing:focus-visible { color: var(--on-surface); border-color: rgba(200,157,92,.5); }
.hidemissing.is-active {
  background: color-mix(in srgb, var(--primary) 20%, var(--surface-lowest));
  border-color: var(--brass);
  color: var(--primary-light);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.hidemissing__tip {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  padding: 5px 10px;
  background: var(--surface-bright);
  border: 1px solid var(--outline);
  border-radius: 8px;
  color: var(--on-surface);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 45;
}
.hidemissing:hover .hidemissing__tip,
.hidemissing:focus-visible .hidemissing__tip { opacity: 1; transform: translateY(0); }

/* ── Sélecteur de langue repliable (à droite du titre Recherche Texte) ──
   Replié : petit bloc compact = langue voisine (indice) + langue active à droite.
   Au survol (ou focus clavier) : le cadre s'agrandit vers la gauche (largeur
   animée) et révèle toutes les langues, par-dessus le contenu. */
.langtoggle--langs {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  z-index: 5;
}
.langtoggle--langs .langtoggle__panel {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 68px;
  padding: 2px 3px;
  overflow: hidden;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-subtle);
  border-radius: 8px;
  transition: width .2s ease, height .2s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.langtoggle--langs .lang { padding: 2px 7px; letter-spacing: .02em; border-radius: 6px; display: inline-flex; }
.langtoggle--langs .lang.lang-hide { display: none; }
.langtoggle--langs.is-open { z-index: 40; }
.langtoggle--langs.is-open .langtoggle__panel {
  justify-content: flex-start;
  background: var(--surface);
  border-color: var(--outline);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.langtoggle--langs.no-anim .langtoggle__panel { transition: none !important; }

/* ── Grille de mana cliquable ── */
.managrid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  padding: 6px;
  background: var(--surface-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-subtle) 80%, transparent);
  border-radius: 10px;
}
.mg {
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  cursor: pointer;
  transition: all .12s;
}
.mg img {
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
  user-select: none;
}
.mg:hover { filter: brightness(1.25); }
.mg.is-active { border-width: 2px; box-shadow: 0 0 8px var(--glow); }
.mg--W { background: rgba(247,242,213,.15); color: #f7f2d5; border-color: rgba(237,227,184,.4); }
.mg--W.is-active { border-color: #ede3b8; }
.mg--U { background: rgba(29,82,122,.4); color: #7cc8ff; border-color: rgba(84,178,247,.4); }
.mg--U.is-active { border-color: #54b2f7; box-shadow: 0 0 8px rgba(84,178,247,.35); }
.mg--B { background: rgba(54,30,71,.5); color: #d6a5fa; border-color: rgba(184,123,232,.4); }
.mg--B.is-active { border-color: #b87be8; box-shadow: 0 0 8px rgba(184,123,232,.35); }
.mg--R { background: rgba(143,47,37,.2); color: #ff9e94; border-color: rgba(214,87,71,.4); }
.mg--R.is-active { border-color: #d65747; box-shadow: 0 0 8px rgba(214,87,71,.35); }
.mg--G { background: rgba(25,89,50,.4); color: #6ee79b; border-color: rgba(67,199,119,.4); }
.mg--G.is-active { border-color: #43c777; box-shadow: 0 0 8px rgba(67,199,119,.35); }
.mg--C, .mg--S, .mg--P, .mg--X {
  background: var(--surface);
  color: var(--outline);
  border-color: var(--outline-subtle);
}
.mg--C:hover, .mg--S:hover, .mg--P:hover, .mg--X:hover { color: var(--on-surface); }
.mg--C.is-active { border-color: var(--brass); color: var(--primary-light); }
.mg--S.is-active { border-color: #9be7ff; color: #9be7ff; }
.mg--P.is-active { border-color: #d4d4d8; color: #e4e4e7; }
.mg--X.is-active { border-color: var(--primary); color: var(--primary); }

.logicgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 11px;
  color: var(--on-surface-var);
}
.inlinefield { display: flex; align-items: center; gap: 8px; }
.inlinefield .hint { white-space: nowrap; }

/* ── Slider CMC ── */
.cmc-slider {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--surface-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-subtle) 80%, transparent);
  border-radius: 10px;
}
.cmc-slider__top { display: flex; align-items: center; justify-content: space-between; }
.cmc-slider__row { display: flex; align-items: center; gap: 10px; }

/* ── Valeurs mécaniques : petits blocs ──
   Ligne 1 : texte + opérateur (≤ = ≥) à droite du texte
   Ligne 2 : slider + valeur numérique à droite */
.mechrow {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label label"
    "range num"
    "ticks num"; /* la graduation s'aligne sur le slider (colonne « range »), pas sur toute la ligne */
  align-items: center;
  gap: 4px 10px;
  padding: 6px 10px;
  background: var(--surface-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-subtle) 80%, transparent);
  border-radius: 10px;
}
/* Graduation sous le slider : 0 1 2 3 … puis « Tous » collé à droite. Chaque tick est centré
   sur sa fraction de la piste (même géométrie que le thumb : demi-largeur de marge de chaque côté). */
.mechrow__ticks {
  grid-area: ticks;
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  column-gap: 0;
  padding: 0 8px; /* = 8px (demi-thumb) de chaque côté : tick 0 sous bord gauche du thumb, tick max sous thumb max */
  margin-top: -1px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  line-height: 1;
  color: var(--outline);
  user-select: none;
  pointer-events: none;
}
.mechrow__ticks > span {
  justify-self: center;
  text-align: center;
  width: 2ch;
  margin-left: -1ch;
}
.mechrow__ticks > span.is-current { color: var(--primary-light); font-weight: 700; }
.mechrow__ticks > span + span:not(.is-current) { opacity: .85; }
.mechrow__tick-all {
  grid-row: 2 !important;
  width: auto !important;
  margin-left: auto !important;
  font-size: 7.5px;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--outline) 70%, transparent);
  opacity: 1 !important;
}
.mechrow__label {
  grid-area: label;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.mechrow__name { font-size: 11px; color: var(--on-surface-var); white-space: nowrap; }
/* Valeur du curseur de format d'extensions (s'allume en laiton quand un format est choisi) */
.extfmt__val {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--outline);
  white-space: nowrap;
}
.extfmt__val.is-active { color: var(--primary-light); }
.mechrow--extension .mechrow__num {
  width: 44px;
  color: var(--outline);
  font-weight: 500;
  cursor: default;
}
.langtoggle--mini { padding: 1px; border-radius: 6px; }
.langtoggle--mini .opbtn { padding: 0 5px; font-size: 10px; }
.mechrow input[type="range"] { grid-area: range; min-width: 0; }
.mechrow__num {
  grid-area: num;
  width: 56px;
  padding: 4px 6px;
  text-align: center;
  background: var(--surface-bright);
  border: 1px solid var(--outline-subtle);
  border-radius: 8px;
  color: var(--primary);
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
}
.mechrow__num:focus { outline: none; border-color: var(--brass); }
.mechrow__num::placeholder { color: var(--outline); font-weight: 400; }
.stat-slider {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--surface-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-subtle) 80%, transparent);
  border-radius: 10px;
}
.stat-slider__row { display: flex; align-items: center; gap: 8px; }
.stat-slider__label { font-size: 11px; color: var(--on-surface-var); white-space: nowrap; min-width: 68px; }
.stat-slider .langtoggle { flex: none; }
.stat-slider input[type="range"] { flex: 1; min-width: 0; }
.stat-slider .cmc-slider__val { min-width: 42px; }
.cmc-slider__val {
  min-width: 44px;
  text-align: center;
  padding: 3px 6px;
  background: var(--surface-bright);
  border: 1px solid var(--outline-subtle);
  border-radius: 6px;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  flex: none;
}
#f-cmc-range,
#f-pow-range,
#f-tou-range {
  --cmc-fill: 100%;
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--outline-subtle);
  border-radius: 9999px;
  background: linear-gradient(to right, var(--primary) var(--cmc-fill), var(--surface-highest) var(--cmc-fill));
  outline: none;
  cursor: pointer;
}
#f-cmc-range::-webkit-slider-thumb,
#f-pow-range::-webkit-slider-thumb,
#f-tou-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid color-mix(in srgb, #000 35%, var(--primary));
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  cursor: grab;
}
#f-cmc-range::-webkit-slider-thumb:active,
#f-pow-range::-webkit-slider-thumb:active,
#f-tou-range::-webkit-slider-thumb:active { cursor: grabbing; }
#f-cmc-range::-moz-range-thumb,
#f-pow-range::-moz-range-thumb,
#f-tou-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid color-mix(in srgb, #000 35%, var(--primary));
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  cursor: grab;
}
#f-cmc-range::-moz-range-track,
#f-pow-range::-moz-range-track,
#f-tou-range::-moz-range-track {
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--primary) var(--cmc-fill), var(--surface-highest) var(--cmc-fill));
}

/* ── Chips de couleurs ── */
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.mana-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-subtle);
  border-radius: 999px;
  font-size: 12px;
  color: var(--on-surface-var);
  cursor: pointer;
  user-select: none;
  transition: all .12s;
}
.mana-chip:hover { border-color: rgba(200,157,92,.5); color: var(--on-surface); }
.mana-chip input { display: none; }
.mana-chip.checked {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary-light);
  font-weight: 600;
}
.vsep-w { width: 1px; height: 24px; background: var(--outline-subtle); }

/* ── Modes couleur ── */
.modegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-subtle);
  border-radius: 10px;
  font-size: 12px;
  color: var(--on-surface);
  cursor: pointer;
  user-select: none;
  transition: border-color .12s;
}
.mode:hover { border-color: rgba(200,157,92,.5); }
.mode input { accent-color: var(--primary); }
.mode:has(input:checked) { border-color: var(--brass); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.mode--accent:has(input:checked) { color: var(--primary-light); font-weight: 600; }

/* ── Modes mana (uniquement/sauf + mono/multi) : deux boutons côte à côte ── */
.manamodes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}
.mmode {
  padding: 6px 12px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-subtle);
  border-radius: 999px;
  color: var(--on-surface-var);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  transition: all .12s;
}
.mmode:hover:not(.is-active) { color: var(--on-surface); border-color: rgba(200,157,92,.5); }
.mmode.is-active {
  background: color-mix(in srgb, var(--primary) 20%, var(--surface-lowest));
  border-color: var(--brass);
  color: var(--primary-light);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.mmode--cycle::before { content: "○ "; font-size: 10px; }
.mmode--cycle.is-active::before { content: "● "; }

/* ── Pills de types ── */
.pillrow { display: flex; flex-wrap: wrap; gap: 6px; }
/* Icônes de logotypes d'extension dans les boutons de Rareté (apparaissent quand une extension
   est cochée dans le sélecteur « Extension ») ; cachées si aucune extension sélectionnée. */
.ricons {
  display: none;
  align-items: center;
  gap: 3px;
  margin-left: 5px;
}
.ricons:has(img) { display: inline-flex; }
.ricons:empty { display: none; }
.ricons__sym {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
  vertical-align: middle;
}
.pill {
  padding: 4px 10px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-subtle);
  border-radius: 999px;
  font-size: 12px;
  color: var(--on-surface-var);
  cursor: pointer;
  user-select: none;
  transition: all .12s;
}
.pill:hover { color: var(--on-surface); border-color: rgba(200,157,92,.5); }
/* Sous-titre de période dans une pill (ex. « depuis 2012 » sous « Pioneer ») */
.pill__date {
  display: block;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 400;
  opacity: .75;
  font-family: "JetBrains Mono", monospace;
  margin-top: 1px;
}
.pill.checked .pill__date { opacity: .95; }
.pill.checked {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary-light);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.pill input { display: none; }

/* ── Numériques ── */
.numgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.numbox {
  padding: 8px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-subtle);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.numbox__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--outline);
  font-family: "JetBrains Mono", monospace;
}
.numbox__row { display: flex; gap: 4px; }
.opselect {
  padding: 3px 4px;
  background: var(--surface);
  border: 1px solid var(--outline-subtle);
  border-radius: 6px;
  color: var(--on-surface);
  font-size: 11px;
}
.numinput {
  width: 100%;
  min-width: 0;
  padding: 3px 6px;
  background: var(--surface);
  border: 1px solid var(--outline-subtle);
  border-radius: 6px;
  color: var(--primary);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-align: center;
}
.numinput:focus { outline: none; border-color: var(--brass); }

.selectfield {
  width: 100%;
  padding: 6px 10px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-subtle);
  border-radius: 10px;
  color: var(--on-surface);
  font-family: inherit;
  font-size: 12px;
}
.selectfield:focus { outline: none; border-color: var(--brass); }
.selectfield--multi { resize: vertical; min-height: 120px; }
.selectfield--sm { width: auto; padding: 4px 10px; border-radius: 8px; }
.selectfield--lang { max-width: 165px; font-size: 11px; padding: 3px 8px; }

/* ── Sous-types : double liste (disponibles ↔ choisis) ── */
.dualbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dualbox__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dualbox__head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--outline);
  font-family: "JetBrains Mono", monospace;
}
.dualbox__list {
  flex: 1;
  min-height: 90px;
  max-height: 150px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: var(--surface-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-subtle) 80%, transparent);
  border-radius: 10px;
}
.dualbox__col--chosen .dualbox__list { border-color: color-mix(in srgb, var(--primary) 40%, var(--outline-subtle)); }
.dual-item {
  padding: 3px 8px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--on-surface-var);
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: all .12s;
}
.dual-item:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.dualbox__col--chosen .dual-item {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  font-weight: 600;
}
.dualbox__col--chosen .dual-item:hover { background: color-mix(in srgb, var(--primary) 26%, transparent); }
.dual-item--custom {
  border: 1px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  color: var(--primary);
}
.dual-item--custom:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.dualbox__empty { font-size: 11px; color: var(--outline); align-self: center; margin: auto; }
.selectfield option:checked { background: var(--primary-dark); color: var(--on-primary); }

.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.twocol .col { display: flex; flex-direction: column; gap: 6px; }
.twocol .fsection__title { font-size: 11px; }

/* ── Pied du tiroir ── */
.drawer__foot {
  display: flex;
  gap: 10px;
  padding: 10px 20px;
  background: var(--surface-lowest);
  border-top: 1px solid var(--outline-subtle);
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light));
  border: none;
  border-radius: 12px;
  color: var(--on-primary);
  font-family: "Cinzel", Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s;
  box-shadow: 0 4px 16px var(--glow);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-primary:active:not(:disabled) { filter: brightness(.95); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary--grow { flex: 1; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--outline-subtle);
  border-radius: 12px;
  color: var(--on-surface);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.btn-ghost:hover { background: var(--surface-bright); border-color: var(--brass); color: var(--primary-light); }
.btn-icon {
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--outline-subtle);
  border-radius: 12px;
  color: var(--outline);
  font-size: 15px;
  cursor: pointer;
  transition: all .15s;
}
.btn-icon:hover { border-color: var(--brass); color: var(--primary-light); }

/* ── Recherche en direct (état au pied du tiroir, à la place du bouton de validation) ── */
.search-status {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--outline-subtle);
  border-radius: 12px;
  color: var(--outline);
  font-family: "Cinzel", Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}
.search-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brass); flex: none; }
.search-status.is-live .search-status__dot { animation: searchpulse 1.6s ease-in-out infinite; }
.search-status.is-pending { color: var(--primary); border-color: var(--brass); }
.search-status.is-pending .search-status__dot { background: var(--primary-light); animation: searchpulse .8s ease-in-out infinite; }
@keyframes searchpulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .search-status.is-live .search-status__dot,
  .search-status.is-pending .search-status__dot { animation: none; }
}

/* ────────── Zone résultats ────────── */
.results {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}
.subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 0 24px;
  border-bottom: 1px solid var(--outline-subtle);
  background: color-mix(in srgb, var(--surface-lowest) 80%, transparent);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.subheader__left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.count { display: flex; align-items: baseline; gap: 8px; }
.count strong {
  font-family: "Cinzel", Georgia, serif;
  font-size: 20px;
  color: var(--primary);
  font-weight: 700;
}
.count em {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--on-surface-var);
}
.vsep { width: 1px; height: 16px; background: var(--outline-subtle); }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid rgba(200,157,92,.4);
  border-radius: 999px;
  color: var(--primary-light);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}
.tag button {
  background: none;
  border: none;
  color: var(--outline);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  transition: color .12s;
}
.tag button:hover { color: var(--on-surface); }
.subheader__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sortbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--outline);
}
.viewtoggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--outline-subtle);
  border-radius: 10px;
}
.vt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--outline);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
.vt.is-active { background: var(--surface-bright); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.vt:hover:not(.is-active) { color: var(--on-surface); }

.results__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sectiontitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sectiontitle h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary-light);
}
.sectiontitle .hint { font-size: 11px; }

/* ── Grille de vignettes (style maquette) ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--gradient-card);
  border: 1px solid color-mix(in srgb, var(--outline-subtle) 80%, transparent);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  position: relative;
}
.card:hover {
  border-color: var(--brass);
  box-shadow: 0 8px 24px var(--glow);
}
.card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 8px 24px var(--glow);
}
.card.selected::after {
  content: "✓";
  position: absolute;
  top: 18px; left: 18px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--primary);
  border-radius: 50%;
  color: var(--on-primary);
  font-size: 13px;
  font-weight: 700;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.card__img {
  width: 100%;
  aspect-ratio: 63 / 88;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-subtle) 80%, transparent);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
  transition: transform .3s;
}
.card:hover .card__img { transform: scale(1.02); }
.card__img--fallback {
  background:
    radial-gradient(circle at 50% 42%, #513a20 0 11%, transparent 12%),
    repeating-linear-gradient(45deg, #241b12 0 12px, #2e2317 12px 24px),
    #1c150e;
}
.card__sigil {
  font-size: 44px;
  color: var(--primary);
  text-shadow: 0 2px 8px #000, 0 0 20px var(--glow);
}
.card__flags { position: absolute; top: 18px; right: 18px; display: flex; gap: 3px; z-index: 2; }
.flag {
  padding: 1px 6px;
  background: color-mix(in srgb, var(--surface-lowest) 85%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid color-mix(in srgb, var(--brass) 50%, transparent);
  border-radius: 6px;
  color: var(--primary);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
}
.card__body { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.card__topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card__name {
  font-family: "Newsreader", Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s;
}
.card:hover .card__name { color: var(--primary); }
.card__rar {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
}
.card__type { font-size: 12px; color: var(--outline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__footline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--outline-subtle) 60%, transparent);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--on-surface-var);
}
.card__cmc { color: var(--primary); font-weight: 700; }
.card__colors { display: flex; gap: 3px; }
.cc { font-size: 11px; font-weight: 700; }
.cc-W { color: #f7f2d5; } .cc-U { color: #54b2f7; } .cc-B { color: #b87be8; }
.cc-R { color: #ff7d70; } .cc-G { color: #43c777; } .cc-C { color: var(--outline); }

/* ── Tableau dense ── */
.tablewrap {
  background: var(--surface-low);
  border: 1px solid var(--outline-subtle);
  border-radius: 14px;
  overflow: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.datatable { width: 100%; border-collapse: collapse; font-size: 12px; }
.datatable th {
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--outline-subtle);
  color: var(--outline);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}
.datatable td { padding: 12px 16px; border-bottom: 1px solid color-mix(in srgb, var(--outline-subtle) 50%, transparent); }
.datatable tbody tr { cursor: pointer; transition: background .12s; }
.datatable tbody tr:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.datatable tbody tr.selected { background: color-mix(in srgb, var(--primary) 8%, transparent); box-shadow: inset 3px 0 0 var(--primary); }
.c-num { width: 40px; text-align: center; color: var(--outline); font-family: "JetBrains Mono", monospace; }
.c-center { text-align: center; }
.c-right { text-align: right; }
.dt-name {
  font-family: "Newsreader", Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .12s;
}
.datatable tbody tr:hover .dt-name { color: var(--primary); }
.dt-name .selmark { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 80%, transparent); flex: none; opacity: .25; }
tr.selected .dt-name .selmark { opacity: 1; }
.dt-cost { display: flex; gap: 4px; }
.dt-type { color: var(--outline); }
.dt-cmc { font-family: "JetBrains Mono", monospace; font-weight: 700; color: var(--primary); text-align: center; }
.dt-pt { font-family: "JetBrains Mono", monospace; color: var(--outline); text-align: center; }
.dt-set { color: var(--outline); font-size: 11px; }
.rar {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
}
.rar--rare { color: #b8c4d4; border-color: rgba(184,196,212,.3); background: rgba(184,196,212,.08); }
.rar--uncommon { color: #7cc8ff; border-color: rgba(124,200,255,.3); background: rgba(124,200,255,.08); }
.rar--common { color: var(--outline); border-color: var(--outline-subtle); background: var(--surface); }
.dt-actions { text-align: right; white-space: nowrap; }
.btn-sheet {
  padding: 4px 10px;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border: 1px solid rgba(200,157,92,.5);
  border-radius: 8px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
.btn-sheet:hover { background: var(--primary); color: var(--on-primary); }
.btn-sheet.is-in { background: var(--primary); color: var(--on-primary); }

/* ── États ── */
.empty {
  text-align: center;
  color: var(--outline);
  font-size: 15px;
  padding: 60px 0;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
}
.load-more { align-self: center; margin: 4px 0; }

/* ── Dock (Grimoire & Atelier) ── */
.sheetdock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px;
  background: linear-gradient(90deg, var(--surface-low), var(--surface), var(--surface-low));
  border: 1px solid rgba(200,157,92,.5);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.sheetdock__left { display: flex; align-items: center; gap: 16px; }
.sheetdock__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-dark) 40%, transparent), var(--surface-highest));
  border: 1px solid var(--brass);
  border-radius: 12px;
  color: var(--primary);
  font-size: 22px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.3);
}
.sheetdock__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 15px;
  color: var(--primary-light);
  font-weight: 700;
}
.sheetdock__title .hint { font-family: "JetBrains Mono", monospace; font-weight: 400; }
.sheetdock__sub { display: block; font-size: 12px; color: var(--outline); margin-top: 2px; font-family: "Newsreader", Georgia, serif; }
.sheetdock__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── Barre d'état ── */
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  height: 32px;
  padding: 0 24px;
  background: var(--surface-lowest);
  border-top: 1px solid var(--outline-subtle);
  color: var(--outline);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  flex-shrink: 0;
}
.statusbar__left, .statusbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.statusbar .lit { color: var(--primary-light); display: inline-flex; align-items: center; gap: 6px; }
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ────────── Planches d'impression ────────── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(5, 4, 3, .92);
  overflow: auto;
  padding: 24px;
}
.overlay__panel { max-width: 920px; margin: 0 auto; }
.overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.overlay__head h2 { margin: 0; font-family: "Cinzel", Georgia, serif; font-size: 20px; color: var(--primary-light); }
.overlay__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.overlay__help {
  font-size: 12px;
  color: var(--on-surface-var);
  background: var(--surface);
  border: 1px solid var(--outline-subtle);
  border-radius: 12px;
  padding: 10px 14px;
}
.sheets { display: flex; flex-direction: column; gap: 22px; margin-top: 16px; }

.sheet {
  background: #fff;
  width: 100%;
  max-width: 794px;
  aspect-ratio: 210 / 297;
  margin: 0 auto;
  padding: 8mm;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 0;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  border-radius: 4px;
}
.sheet__cell { width: 100%; height: 100%; background-size: cover; background-position: center; overflow: hidden; }
.sheet--flip .sheet__cell:nth-child(even) { transform: rotate(180deg); }
.card__img--fallback {
  background:
    radial-gradient(circle at 50% 42%, #513a20 0 11%, transparent 12%),
    repeating-linear-gradient(45deg, #241b12 0 12px, #2e2317 12px 24px),
    #1c150e;
}

/* ────────── Impression ────────── */
@media print {
  body > *:not(#print-overlay) { display: none !important; }
  #print-overlay { position: static !important; background: #fff !important; padding: 0 !important; overflow: visible !important; }
  .overlay__head, .overlay__help { display: none !important; }
  .sheets { gap: 0 !important; margin: 0 !important; display: block !important; }
  .sheet {
    max-width: none !important;
    width: 210mm !important;
    height: 297mm !important;
    aspect-ratio: auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    page-break-after: always;
    break-after: page;
  }
  .sheet:last-child { page-break-after: auto; break-after: auto; }
}

/* ────────── Bandeau horizontal : réglages fins ────────── */
.workspace > .results { flex: 1 1 0; min-height: 240px; }
@media (max-width: 1100px) {
  .drawer { max-height: none; }
}

/* ────────── Responsive ────────── */
@media (max-width: 1100px) {
  .workspace { height: auto; overflow: visible; }
  .drawer__scroll { max-height: 420px; }
  .results { overflow: visible; }
  .results__scroll { overflow: visible; }
  .mainnav { display: none; }
}


/* ═══════════ FRISE CHRONOLOGIQUE DES FORMATS (pied du tiroir) ═══════════ */
.drawer { max-height: 74vh; overflow-y: auto; }
.drawer__head { position: sticky; top: 0; z-index: 5; }
.drawer__scroll { flex: 1 0 auto; min-height: 150px; max-height: 26vh; }
.drawer__actions .search-status { flex: none; padding: 3px 10px; font-size: 11px; border-radius: 999px; }
.drawer__actions .search-status:not(.is-pending) { border-color: transparent; background: transparent; }

.frise {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 14px 20px 14px;
  background: var(--surface-lowest);
  border-top: 1px solid var(--outline-subtle);
}
.frise__main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.frise__info, .frise__fiches { grid-column: 1 / -1; }

.frise__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 18px; flex-wrap: wrap; }
.frise__title { margin: 0 0 3px; font-family: "Cinzel", Georgia, serif; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-light); }
.frise__help { margin: 0; font-size: 12px; line-height: 1.45; color: var(--outline); max-width: 62ch; }
.frise__period-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.frise__period {
  font-family: "Cinzel", Georgia, serif; font-size: 16px; font-weight: 700; color: var(--primary-light);
  padding: 4px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--brass);
  white-space: nowrap;
}
.frise__period.is-all { font-size: 13px; color: var(--on-surface); border-color: var(--outline-subtle); }
.frise__reset:disabled { opacity: .4; cursor: default; }
.frise__reset { padding: 6px 12px; font-size: 12px; }

.frise__plot { padding: 8px 24px 0; display: flex; align-items: flex-start; gap: 18px; }
.frise__plot .frise__scale { flex: 1 1 auto; min-width: 0; }
.frise__legacy { flex: none; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.frise__legacy .agechip { justify-content: center; }
.band.is-included { background: color-mix(in srgb, var(--fc) 40%, var(--surface)); box-shadow: inset 0 0 0 1px var(--fc); }
.band--tiny .band__sub { display: none; }
.frise__scale { position: relative; }
.frise__window {
  position: absolute; top: 0; bottom: 22px; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--primary) 13%, transparent);
  border-left: 1px dashed var(--primary); border-right: 1px dashed var(--primary);
  transition: left .12s ease, width .12s ease;
}
.frise__lanes { position: relative; z-index: 2; }
.frise__lane { position: relative; height: 30px; margin-bottom: 4px; }
.band {
  position: absolute; top: 0; height: 100%;
  display: flex; align-items: center; padding: 0 10px; min-width: 14px;
  background: color-mix(in srgb, var(--fc) 28%, var(--surface));
  border: 1px solid var(--fc); border-radius: 7px;
  color: var(--on-surface); font-family: inherit; font-size: 12px; text-align: left;
  cursor: pointer; overflow: hidden; white-space: nowrap;
  transition: opacity .15s, box-shadow .15s, background .15s, filter .15s;
}
.band__txt { display: inline-flex; align-items: baseline; gap: 8px; overflow: hidden; text-overflow: ellipsis; }
.band__txt b { font-weight: 700; }
.band__sub { color: color-mix(in srgb, var(--on-surface) 72%, transparent); font-size: 11px; }
.band:hover { background: color-mix(in srgb, var(--fc) 45%, var(--surface)); }
.band--narrow { overflow: visible; padding: 0; }
.band--narrow .band__txt { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.band--narrow.band--lbl-right .band__txt { right: auto; left: calc(100% + 8px); }
.band.is-selected, .agechip.is-selected {
  background: color-mix(in srgb, var(--fc) 62%, var(--surface));
  box-shadow: 0 0 0 2px var(--fc), 0 0 16px color-mix(in srgb, var(--fc) 55%, transparent);
}
.band.is-dim, .agechip.is-dim { opacity: .38; }
.band.is-off, .agechip.is-off { opacity: .22; filter: grayscale(1); cursor: not-allowed; }
.band:focus-visible, .agechip:focus-visible, .seg:focus-visible, .tick:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }

.frise__track { position: relative; z-index: 3; height: 38px; margin-top: 4px; cursor: pointer; touch-action: none; }
.frise__rail, .frise__fill { position: absolute; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 3px; }
.frise__rail { left: 0; right: 0; background: var(--outline-subtle); }
.frise__fill { background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)); transition: left .12s ease, width .12s ease; }
.thumb {
  position: absolute; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0;
  border-radius: 50%; background: var(--primary); border: 3px solid var(--surface-lowest);
  box-shadow: 0 0 0 2px var(--primary-light), 0 3px 10px rgba(0,0,0,.55);
  cursor: grab; touch-action: none; transition: left .12s ease, transform .1s;
}
.thumb--b { z-index: 2; }
.thumb.is-drag { cursor: grabbing; transform: scale(1.12); transition: transform .1s; }
.thumb:focus-visible { outline: 2px solid var(--on-surface); outline-offset: 3px; }

.frise__ticks { position: relative; height: 22px; }
.tick {
  position: absolute; top: 0; transform: translateX(-50%); background: none; border: 0; padding: 4px 4px 2px;
  color: var(--outline); font: 600 12px "JetBrains Mono", monospace; cursor: pointer;
}
.tick::before { content: ""; position: absolute; left: 50%; top: -4px; width: 1px; height: 6px; background: var(--outline); }
.tick:hover { color: var(--primary-light); }

.frise__allages { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 2px; }
.frise__allages-label { font-family: "Cinzel", Georgia, serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-light); }
.frise__allages-label small { font: 400 11px "Manrope", sans-serif; text-transform: none; letter-spacing: 0; color: var(--outline); margin-left: 4px; }
.frise__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.agechip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 11px;
  background: color-mix(in srgb, var(--fc) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--fc) 60%, var(--outline-subtle));
  border-radius: 999px; color: var(--on-surface); font: 600 12px "Manrope", sans-serif; cursor: pointer;
  transition: opacity .15s, box-shadow .15s, background .15s;
}
.agechip:hover { background: color-mix(in srgb, var(--fc) 30%, var(--surface)); }
.agechip__i { font-size: 13px; }

.frise__side {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; align-self: start;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--outline-subtle) 60%, transparent); border-radius: 14px;
}
.frise__groups { display: grid; gap: 10px; }
.fgroup { display: flex; flex-direction: column; gap: 5px; }
.fgroup__title { font: 600 10px "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--outline); }
.fgroup__row { display: flex; flex-wrap: wrap; gap: 6px; }
.seg {
  min-height: 30px; padding: 4px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--outline-subtle);
  color: var(--on-surface); font: 500 12px "Manrope", sans-serif; cursor: pointer; transition: all .15s;
}
.seg:hover { border-color: var(--brass); color: var(--primary-light); }
.seg.is-on { background: var(--primary-dark); border-color: var(--primary); color: var(--on-primary); font-weight: 700; }
.frise__side .frise__reset { align-self: flex-start; }

.frise__info {
  padding: 9px 14px; border-left: 3px solid var(--primary); border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface)); font-size: 12.5px; line-height: 1.5; color: var(--on-surface);
}
.frise__info p { margin: 0 0 3px; }
.frise__info p:last-child { margin-bottom: 0; }
.frise__muted { color: var(--outline); font-size: 11px; }

.frise__fiches > summary {
  cursor: pointer; list-style: none; padding: 6px 2px; font: 700 12px "Cinzel", Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-light);
}
.frise__fiches > summary::-webkit-details-marker { display: none; }
.frise__fiches > summary::before { content: "▸ "; }
.frise__fiches[open] > summary::before { content: "▾ "; }
.frise__fiches > summary small { font: 400 11px "Manrope", sans-serif; text-transform: none; letter-spacing: 0; color: var(--outline); margin-left: 6px; }
.fiches { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.fiches__h { margin: 0 0 8px; font: 700 12px "Manrope", sans-serif; color: var(--on-surface-variant, var(--outline)); letter-spacing: .02em; }
.fiches__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.fiche {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--fc) 40%, var(--outline-subtle)); border-top: 3px solid var(--fc); border-radius: 10px;
}
.fiche.is-selected { box-shadow: 0 0 0 2px var(--fc); }
.fiche__head { display: flex; align-items: center; gap: 10px; }
.fiche__icon { font-size: 22px; line-height: 1; }
.fiche__name { margin: 0 0 2px; font: 700 14px "Cinzel", Georgia, serif; color: var(--on-surface); }
.fiche__badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 10.5px "Manrope", sans-serif; border: 1px solid currentColor; }
.fiche__badge--rotation { color: #f0b050; }
.fiche__badge--norotation { color: #7fb7ff; }
.fiche__badge--pool { color: #7fd9a8; }
.fiche__desc, .fiche__period { margin: 0; font-size: 12px; line-height: 1.45; color: var(--on-surface); }
.fiche__period { color: var(--outline); }
.fiche__period b { color: var(--on-surface); font-weight: 600; }
.fiche__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.fiche__btn { padding: 5px 11px; border-radius: 8px; background: var(--primary-dark); border: 1px solid var(--primary); color: var(--on-primary); font: 600 12px "Manrope", sans-serif; cursor: pointer; }
.fiche__btn:hover { filter: brightness(1.12); }
.fiche__link { font-size: 12px; color: var(--primary-light); text-decoration: none; }
.fiche__link:hover { text-decoration: underline; }
.fiche__link--none { color: var(--outline); }

.selectfield.flash { animation: friseflash 1.2s ease-out; }
@keyframes friseflash { 0% { box-shadow: 0 0 0 3px var(--primary-light); } 100% { box-shadow: 0 0 0 0 transparent; } }

@media (max-width: 900px) {
  .frise { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .frise__side { align-self: stretch; }
  .frise__plot { padding: 8px 20px 0; }
  .drawer { max-height: none; overflow: visible; }
  .drawer__scroll { max-height: 420px; }
  .thumb { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .frise__track { height: 44px; }
  .band { font-size: 11px; padding: 0 6px; }
  .band__sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .frise__window, .frise__fill, .thumb { transition: none; }
  .selectfield.flash { animation: none; }
}

.frise__other { display: inline-flex; align-items: center; gap: 8px; font: 600 11px "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--outline); }
.frise__other select { min-width: 150px; }

.frise__format { display: flex; flex-direction: column; gap: 3px; }
.frise__format-label { font: 600 10px "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--outline); }
.frise__format-select {
  min-width: 230px; padding: 7px 34px 7px 14px; border-radius: 12px; cursor: pointer;
  background: var(--surface); color: var(--primary-light); border: 1px solid var(--brass);
  font: 700 17px "Cinzel", Georgia, serif; letter-spacing: .04em;
  box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 22%, transparent);
}
.frise__format-select:hover, .frise__format-select:focus-visible { border-color: var(--primary-light); outline: none; box-shadow: 0 0 16px var(--glow); }
.frise__format-select option, .frise__format-select optgroup { font: 500 13px "Manrope", sans-serif; color: var(--on-surface); background: var(--surface); }

.frise__intro { flex: 1 1 260px; min-width: 0; }
.frise__head { align-items: center; }

.frise__mode { display: inline-flex; gap: 0; border: 1px solid var(--outline-subtle); border-radius: 999px; overflow: hidden; background: var(--surface); }
.frise__mode .seg { border: 0; border-radius: 0; min-height: 32px; padding: 4px 14px; }
.thumb[hidden] { display: none; }
.frise__zoom { margin-top: 4px; padding: 10px 12px 12px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--outline-subtle)); border-radius: 12px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.zoom__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.zoom__title { font: 700 11px "Cinzel", Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-light); }
.zoom__row { display: flex; align-items: flex-end; gap: 22px; overflow-x: auto; padding-bottom: 6px; scroll-behavior: smooth; }
.zgroup { flex: none; display: flex; flex-direction: column; gap: 5px; }
.zgroup__year { font: 700 13px "JetBrains Mono", monospace; color: var(--primary-light); }
.zgroup__sets { display: flex; gap: 8px; }
.zgroup--side { opacity: .5; }
.zgroup--side .zgroup__year { color: var(--outline); }
.zgroup--side .zset { width: 108px; padding: 6px 8px; }
.zgroup--side .zset__logo { height: 22px; }
.zgroup--side .zset__name { font-size: 10.5px; }
.zgroup--side:hover { opacity: .85; }
.zgroup__none { font-size: 12px; color: var(--outline); padding: 10px 0; }
.zset {
  width: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 10px; text-align: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--outline-subtle); border-radius: 10px; color: var(--on-surface); font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.zset:hover { border-color: var(--brass); }
.zset.is-selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, var(--surface)); box-shadow: 0 0 0 2px var(--primary), 0 0 14px var(--glow); }
.zset__logo { height: 34px; max-width: 100%; object-fit: contain; filter: invert(.85) sepia(.2); }
.zset__name { font: 600 12px "Manrope", sans-serif; line-height: 1.25; }
.zset__date { font: 400 10.5px "JetBrains Mono", monospace; color: var(--outline); }

/* ── En-tête de la frise : titre à gauche, format, info (i), mode, période ── */
.frise__head { justify-content: flex-start; align-items: center; gap: 12px 22px; }
.frise__intro { flex: none; display: grid; width: max-content; max-width: 100%; }
.frise__title { white-space: nowrap; font-size: 13px; }
.frise__help { width: 0; min-width: 100%; font-size: 11px; line-height: 1.35; margin: 0; }
.frise__period-box { margin-left: auto; }
.frise__infobox { position: relative; flex: none; align-self: flex-end; margin-bottom: 4px; }
.frise__i {
  width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: help;
  background: var(--surface); border: 1px solid var(--brass); color: var(--primary-light);
  font: italic 700 15px "Cinzel", Georgia, serif;
}
.frise__i:hover, .frise__i:focus-visible { background: var(--primary-dark); color: var(--on-primary); outline: none; }
.frise__infobox .frise__info {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: min(620px, 82vw);
  visibility: hidden; opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .15s, transform .15s, visibility .15s;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-lowest)); box-shadow: 0 10px 30px rgba(0,0,0,.55); border: 1px solid var(--brass);
}
.frise__infobox:hover .frise__info, .frise__infobox:focus-within .frise__info { visibility: visible; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .frise__infobox .frise__info { transition: none; } }

/* ── Zoom des extensions : rangée continue qui défile avec le curseur ── */
.zoom__head { justify-content: flex-end; margin-bottom: 4px; }
.zoom__row { overflow-x: hidden; gap: 0; align-items: flex-end; padding-bottom: 4px; scroll-behavior: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.zspacer { flex: 0 0 45%; }
.zgroup { padding: 0 14px; opacity: max(.16, calc(1 - var(--d, 9) * .38)); transition: opacity .25s ease; align-items: center; }
.zgroup__year { transition: color .25s, transform .25s; transform: scale(max(.8, calc(1 - var(--d, 9) * .08))); }
.zgroup.is-cur .zgroup__year { font-size: 18px; }
.zgroup .zset { transform: scale(max(.7, calc(1 - var(--d, 9) * .1))); transform-origin: 50% 100%; transition: transform .25s ease, border-color .15s, box-shadow .15s, background .15s; }
.zgroup--side, .zgroup--cur { opacity: inherit; }

/* ── Zoom : cartes d'extension plus lisibles (sans date ni lien) ── */
.frise__zoom { padding: 12px 12px 10px; }
.zset { width: 176px; padding: 12px 12px 14px; gap: 8px; }
.zset__logo { height: 56px; }
.zset__name { font-size: 14px; line-height: 1.25; }
.zgroup__year { font-size: 14px; }
.zgroup.is-cur .zgroup__year { font-size: 20px; }

/* ── Repères des extensions choisies (sur la frise) + icône dans les tags ── */
.frise__pins { position: relative; z-index: 4; height: 0; }
.frise__window { bottom: calc(22px + var(--pins-h, 0px)); }
.pin { position: absolute; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px; padding: 3px 3px 3px 6px; margin-top: 4px;
  background: var(--primary-dark); border: 1px solid var(--primary); border-radius: 999px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.pin::before { content: ""; position: absolute; left: 50%; top: -6px; width: 1px; height: 6px; background: var(--primary); }
.pin:hover { z-index: 2; background: var(--primary); }
.pin__logo { height: 18px; width: 18px; object-fit: contain; filter: invert(1); }
.pin__code { font: 700 10px "JetBrains Mono", monospace; color: var(--on-primary); }
.pin__x { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: var(--on-primary); font: 700 13px/1 sans-serif; cursor: pointer; }
.pin__x:hover { background: #c0392b; color: #fff; }
.tag__icon { height: 15px; width: 15px; object-fit: contain; filter: invert(.85) sepia(.2); margin-right: 2px; vertical-align: -3px; }

/* ── En-tête de la frise : contrôles alignés sur une même ligne ── */
.frise__head { align-items: center; }
.frise__format-select { height: 38px; padding: 4px 34px 4px 14px; font-size: 15px; }
.frise__infobox { align-self: center; margin-bottom: 0; }
.frise__mode { align-self: center; }
.frise__mode .seg { min-height: 36px; }
.frise__period-box { align-self: center; }
.frise__period { padding: 6px 14px; line-height: 1.2; }
.frise__reset { min-height: 36px; }
.hidemissing--frise {
  align-self: center; display: inline-flex; align-items: center; gap: 9px; max-width: 250px; min-height: 36px;
  padding: 5px 12px; border-radius: 12px; white-space: normal; text-align: left; font-size: 12px; line-height: 1.25;
}
.hidemissing__box { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--outline); display: inline-block; position: relative; }
.hidemissing.is-active .hidemissing__box { background: var(--primary); border-color: var(--primary); }
.hidemissing.is-active .hidemissing__box::after { content: ""; position: absolute; left: 4px; top: 0px; width: 4px; height: 9px; border: solid var(--on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ── Rareté : état enclenché visible + logos d'extension plus gros, centrés en hauteur ── */
.pill:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary-light);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
#rarity-row .pill { display: inline-flex; align-items: center; gap: 2px; min-height: 34px; padding: 4px 12px; }
#rarity-row .pill > span { line-height: 1; }
.ricons { align-items: center; align-self: center; gap: 4px; margin-left: 7px; }
.ricons__sym { width: 24px; height: 24px; margin: 0; }
.pin { margin-top: 0; }
.thumb.is-free { opacity: .55; box-shadow: 0 0 0 2px var(--outline), 0 3px 10px rgba(0,0,0,.45); }
.zoom__row { touch-action: pan-y; cursor: grab; }
.zoom__row.is-drag { cursor: grabbing; user-select: none; }
.zoom__row.is-drag .zgroup, .zoom__row.is-drag .zset { transition: none; }

/* ── Bouton « i » : jaune, texte marron, « i » droit et gras ── */
.frise__i {
  background: #f2c230; border: 1px solid #c99a12; color: #5a3410;
  font: 800 16px/1 "Manrope", system-ui, sans-serif; font-style: normal;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.frise__i:hover, .frise__i:focus-visible { background: #ffd64a; color: #4a2a0a; }
.load-more { opacity: .75; font-size: 12px; }

/* ═══════════ Mise en page compacte, à partir de 1000 px (format carré 1020 × 1020 au minimum) ═══════════
   Les 3 blocs de filtres se partagent toute la largeur et sont aussi bas que possible ;
   la frise garde ses contrôles sur une seule ligne. */
@media (min-width: 1000px) {
  .drawer__scroll { flex-wrap: nowrap; gap: 10px; padding: 8px 16px; max-height: none; min-height: 0; flex: 0 0 auto; }
  .fcol { flex: 1 1 0; min-width: 0; max-width: none; padding: 9px 11px; gap: 7px; }
  .fsection { gap: 6px; }
  .fcol .fsection__head > .hint:not(:has(button)) { display: none; }
  /* Recherche texte : nom et règles côte à côte */
  .drawer__scroll .fcol:first-child .fsection:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .drawer__scroll .fcol:first-child .fsection:first-child > .fsection__head { grid-column: 1 / -1; }
  .textfield { padding-top: 6px; padding-bottom: 6px; }
  /* Manas */
  .managrid { gap: 4px; padding: 4px; }
  .mg { height: 28px; min-width: 0; }
  .mechrow { padding: 4px 9px; gap: 2px 8px; }
  .manamodes { gap: 6px; }
  /* Rareté et types */
  .pillrow { gap: 5px; }
  .pill { padding: 3px 9px; font-size: 11.5px; }
  #rarity-row .pill { min-height: 30px; padding: 3px 10px; }
  .ricons__sym { width: 22px; height: 22px; }
  .dualbox__list { min-height: 62px; max-height: 80px; }
  .dualbox { gap: 6px; }
  /* Frise */
  .frise { padding: 8px 16px 10px; gap: 6px; }
  .frise__head { gap: 8px 12px; }
  .frise__format-select { min-width: 176px; height: 34px; font-size: 14px; }
  .frise__mode .seg { min-height: 32px; padding: 3px 12px; }
  .hidemissing--frise { margin-left: auto; max-width: 215px; min-height: 32px; padding: 3px 10px; font-size: 11.5px; }
  .frise__lane { height: 26px; margin-bottom: 2px; }
  .frise__track { height: 30px; margin-top: 2px; }
  .frise__ticks { height: 20px; }
  .frise__window { bottom: calc(20px + var(--pins-h, 0px)); }
  .frise__zoom { padding: 6px 10px 6px; margin-top: 0; }
  .zset { width: 144px; padding: 8px 8px 10px; gap: 5px; }
  .zset__logo { height: 42px; }
  .zset__name { font-size: 13px; }
  .zgroup__year { font-size: 13px; }
  .zgroup.is-cur .zgroup__year { font-size: 17px; }
  .zspacer { flex-basis: 42%; }
}
@media (min-width: 1000px) {
  .frise__head { flex-wrap: nowrap; }
  .frise__title { font-size: 12px; letter-spacing: .07em; }
  .frise__format-select { min-width: 0; width: 206px; font-size: 13px; padding-right: 30px; }
  .frise__mode .seg { padding: 3px 10px; font-size: 11.5px; }
  .hidemissing--frise { flex: 0 1 200px; min-width: 0; }
  .mmode { font-size: 11px; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
}

/* ── Panneau du haut replié au défilement ── */
.drawer.is-collapsed { overflow: hidden; }
.drawer.is-collapsed .drawer__scroll, .drawer.is-collapsed .frise { display: none; }
.drawer__toggle {
  margin-left: 14px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  background: var(--primary-dark); border: 1px solid var(--primary); color: var(--on-primary);
  font: 700 12px "Manrope", sans-serif; letter-spacing: .02em;
}
.drawer__toggle:hover { filter: brightness(1.12); }
.drawer__toggle[hidden] { display: none; }
.drawer__head { justify-content: flex-start; }
.drawer__head .drawer__actions { margin-left: auto; }

/* ── Frise « slider » (pages Booster / Draft) : curseur + rangée d'extensions + repères seulement ── */
.frise--slider { display: block; padding: 0; background: transparent; border-top: 0; margin-bottom: 14px; }
.frise--slider .frise__lanes, .frise--slider .frise__format, .frise--slider .frise__infobox,
.frise--slider .frise__mode { display: none; }
.frise--slider .frise__window, .frise--slider .frise__fill { display: none !important; }
.frise--slider .frise__zoom { margin-top: 4px; }

.draft-field--wide { width: 100%; }
.draft-field--wide .draft-field__label small { font-weight: 400; color: var(--outline); margin-left: 6px; }
.draft-mix { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.draft-mix__label { font: 600 11px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--outline); margin-right: 4px; }
.frise--slider .frise__head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.frise--slider .frise__intro { width: auto; display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.frise--slider .frise__help { width: auto; min-width: 0; font-size: 12px; }
.frise--slider .frise__intro { flex: 1 1 100%; width: 100%; }
.frise--slider .frise__help { width: auto; white-space: normal; }

/* ═══════════ Panneau de sélection (par-dessus la page, à droite) ═══════════ */
.selpanel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(400px, 92vw);
  display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px;
  background: color-mix(in srgb, var(--surface-low) 96%, #000); border-left: 1px solid var(--brass);
  box-shadow: -14px 0 40px rgba(0,0,0,.55);
  animation: selin .26s cubic-bezier(.2,.8,.2,1);
}
.selpanel[hidden] { display: none; }
@keyframes selin { from { transform: translateX(100%); opacity: .4; } to { transform: none; opacity: 1; } }
.selpanel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.selpanel__title { font: 700 15px "Cinzel", Georgia, serif; letter-spacing: .06em; color: var(--primary-light); }
.selpanel__title small { font: 500 12px "Manrope", sans-serif; letter-spacing: 0; color: var(--outline); margin-left: 6px; }
.selpanel__x { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--outline-subtle); background: var(--surface); color: var(--on-surface); cursor: pointer; font-size: 14px; }
.selpanel__x:hover { border-color: var(--brass); color: var(--primary-light); }
.selpanel__create { width: 100%; padding: 11px 14px; font-size: 13px; }
.selpanel__list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.selpanel__empty { margin: 30px 10px; text-align: center; color: var(--outline); font-size: 13px; line-height: 1.6; }
.selrow {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--outline-subtle);
}
.selrow:hover { border-color: var(--primary); }
.selrow__count {
  flex: none; min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px;
  border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface-lowest));
  color: var(--primary-light); font: 700 16px "JetBrains Mono", monospace;
}
.selrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.selrow__name { font: 600 13px "Manrope", sans-serif; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selrow__meta { display: flex; align-items: center; gap: 8px; }
.selrow__cost { display: inline-flex; gap: 1px; align-items: center; }
.selrow__cost .msym { width: 15px; height: 15px; }
.selrow__cols { display: inline-flex; gap: 3px; }
.selrow__btns { flex: none; display: flex; gap: 4px; }
.selpanel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--outline-subtle); }
.selpanel__foot .btn-primary { flex: 1 1 auto; padding: 8px 10px; font-size: 12px; }
.selpanel__foot .btn-ghost { padding: 6px 10px; font-size: 12px; }
.seltab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 85; padding: 12px 10px 12px 14px;
  border-radius: 14px 0 0 14px; border: 1px solid var(--brass); border-right: 0; background: var(--primary-dark); color: var(--on-primary);
  font: 700 15px "Manrope", sans-serif; cursor: pointer; box-shadow: -4px 4px 16px rgba(0,0,0,.45);
}
.seltab[hidden] { display: none; }
.seltab:hover { filter: brightness(1.12); }
.card.selected .card__deckbadge { opacity: 1; }

/* ═══════════ Panneau de sélection : à côté de la liste des cartes (sous les filtres) ═══════════ */
.workspace > .results, .decksearch__results { position: relative; }
.results { --selw: 380px; transition: padding-right .26s cubic-bezier(.2,.8,.2,1); }
.results.has-panel { padding-right: var(--selw); }
.selpanel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 30; width: var(--selw);
  box-shadow: -8px 0 24px rgba(0,0,0,.4);
  padding-top: 12px;
}
.seltab { position: absolute; z-index: 25; }
@media (max-width: 1100px) {
  .selpanel { position: fixed; top: 0; z-index: 90; width: min(380px, 92vw); }
  .results.has-panel { padding-right: 0; }
}

/* ── Panneau de sélection : lignes avec visuel de la carte, contour à sa couleur, boutons jaune / rouge ── */
.selrow { --cc: var(--outline-subtle); gap: 10px; padding: 6px 8px 6px 6px; border: 2px solid var(--cc); box-shadow: 0 0 8px color-mix(in srgb, var(--cc) 30%, transparent); }
.selrow:hover { border-color: var(--cc); box-shadow: 0 0 12px color-mix(in srgb, var(--cc) 55%, transparent); }
.selrow__art {
  position: relative; flex: none; width: 54px; height: 43px; border-radius: 8px; overflow: hidden;
  border: 2px solid var(--cc); background: var(--surface-lowest) center / cover no-repeat;
}
.selrow__count {
  position: absolute; right: 0; bottom: 0; min-width: 20px; padding: 0 5px; border-radius: 7px 0 0 0;
  background: rgba(10,8,6,.82); color: #fff; font: 700 14px/20px "JetBrains Mono", monospace; text-align: center;
}
.selrow__line { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.selrow__cost { flex: none; display: inline-flex; align-items: center; gap: 1px; }
.selrow__line .selrow__name { flex: 1; min-width: 0; }
.selrow__btns { align-items: center; }
.selbtn {
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 9px; cursor: pointer;
  font: 700 20px/1 "Manrope", system-ui, sans-serif; border: 1px solid transparent; transition: filter .12s, transform .08s;
}
.selbtn:hover { filter: brightness(1.12); }
.selbtn:active { transform: scale(.94); }
.selbtn--add { background: #f2c230; border-color: #c99a12; color: #5a3410; }
.selbtn--remove { background: #c0392b; border-color: #8e2a20; color: #fff; }

/* ── Sélection : l'illustration de la carte couvre toute la ligne (centrée en hauteur, coupée), voile sombre pour la lisibilité ── */
.selrow {
  min-height: 56px;
  background:
    linear-gradient(90deg, rgba(12,9,7,.90) 0%, rgba(12,9,7,.72) 42%, rgba(12,9,7,.40) 100%),
    var(--art, none) center / cover no-repeat,
    var(--surface);
}
.selrow__art { width: 43px; height: 43px; background: rgba(12,9,7,.78); display: grid; place-items: center; }
.selrow__count { position: static; min-width: 0; padding: 0; border-radius: 0; background: none; font: 700 19px/1 "JetBrains Mono", monospace; color: var(--cc); text-shadow: 0 1px 3px #000; }
.selrow__name { text-shadow: 0 1px 4px #000, 0 0 2px #000; color: #fff; }
.selrow {
  background:
    linear-gradient(90deg, rgba(12,9,7,.80) 0%, rgba(12,9,7,.45) 38%, rgba(12,9,7,.08) 100%),
    var(--art, none) center / cover no-repeat,
    var(--surface);
}
.selrow__count { display: block; height: auto; border: 0; box-shadow: none; place-items: initial; }

/* ── Sélection : illustration réduite à 80 % de la ligne, bords gauche et droit fondus dans la couleur de la carte ── */
.selrow {
  --selbase: color-mix(in srgb, var(--cc) 34%, #0c0907);
  position: relative; overflow: hidden;
  background: var(--selbase);
}
.selrow::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 10%; width: 80%;
  background: var(--art, none) center / cover no-repeat;
}
.selrow::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--selbase) 0%, var(--selbase) 13%, transparent 36%, transparent 60%, var(--selbase) 90%, var(--selbase) 100%),
    linear-gradient(90deg, rgba(12,9,7,.35), rgba(12,9,7,.10));
}
.selrow > * { position: relative; z-index: 1; }
/* L'image occupe vraiment 10 % → 90 % de la ligne : le dégradé de couleur ne couvre que les bords */
.selrow::after {
  background:
    linear-gradient(90deg, var(--selbase) 0%, var(--selbase) 5%, transparent 12%, transparent 88%, var(--selbase) 95%, var(--selbase) 100%),
    linear-gradient(90deg, rgba(12,9,7,.42), rgba(12,9,7,.22));
}
/* Illustration descendue de 15 % de la hauteur de la ligne (le sujet principal des illustrations est rarement au centre) */
.selrow::before { background-position: center calc(50% + 0.15 * 56px); }
/* Bords : couleur de la carte à 100 % sur 11 % de chaque côté, puis fondu sur 9 % de plus */
.selrow::after {
  background:
    linear-gradient(90deg, var(--cc) 0%, var(--cc) 11%, transparent 20%, transparent 80%, var(--cc) 89%, var(--cc) 100%),
    linear-gradient(90deg, rgba(12,9,7,.42), rgba(12,9,7,.22));
}
/* Contour / chiffre : --cb (identique à --cc, sauf pour le noir) */
.selrow { border-color: var(--cb, var(--cc)); box-shadow: 0 0 8px color-mix(in srgb, var(--cb, var(--cc)) 30%, transparent); }
.selrow:hover { border-color: var(--cb, var(--cc)); box-shadow: 0 0 12px color-mix(in srgb, var(--cb, var(--cc)) 55%, transparent); }
.selrow__art { border-color: var(--cb, var(--cc)); }
.selrow__count { color: var(--cb, var(--cc)); }
.selpanel__sub { font-size: 11.5px; line-height: 1.4; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--outline-subtle); background: var(--surface); }
.selpanel__sub.is-ok { color: #7fd9a8; border-color: color-mix(in srgb, #7fd9a8 40%, transparent); }
.selpanel__sub.is-warn { color: #f0b050; border-color: color-mix(in srgb, #f0b050 45%, transparent); }
.selpanel__sub[hidden] { display: none; }

/* ── Langue du site (js/i18n.js) ── */
.site-lang__btn { width: auto; min-width: 36px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; }
.site-lang__code { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.site-lang .theme-picker__menu { width: 200px; }
.site-lang__note { font-size: 11px; color: var(--outline); padding: 6px 10px 2px; line-height: 1.3; }

/* Boosters / Draft : extension sans aucune carte dans la langue des cartes (js/langfilter.js) */
.zset--nolang .zset__logo { filter: invert(.55) sepia(1) saturate(9) hue-rotate(-35deg) brightness(.95); }
.zset--nolang .zset__name { color: #ff7d70; }

/* ── Compte Proxy : fenêtre connexion / inscription (js/account.js) ── */
.usercard__login { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); cursor: pointer; text-decoration: underline; }
.account-panel { max-width: 420px; }
.account-panel .overlay__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.account-panel .overlay__head h2 { margin: 0; font-size: 18px; }
.account-panel .overlay__help { color: var(--on-surface-var); font-size: 13px; margin: 0 0 10px; }
.account-form { display: flex; flex-direction: column; gap: 12px; }
.account-form__row { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--on-surface-var); }
.account-form__row[hidden] { display: none; }
.account-form__error { margin: 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, #ff7d70 14%, transparent); border: 1px solid color-mix(in srgb, #ff7d70 45%, transparent); color: #ff9e94; font-size: 12.5px; }
.account-form__switch { text-align: center; margin: 0; }
.account-form__switch a { color: var(--primary); }

/* ── Contour d'avatar (images/contours, détourés depuis tes PNG) ──
   --fw = diamètre du contour pour que son trou (rapport --hole) recouvre juste le bord de l'avatar de 46 px. */
.avwrap { position: relative; flex: none; width: 54px; height: 54px; }
.avwrap .usercard__avatar {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border: 0; box-shadow: none; font-size: 24px;
}
.avwrap__frame {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--fw, 52px); height: var(--fw, 52px);
  background: var(--frame) center / contain no-repeat;
  pointer-events: none; z-index: 2;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.9));
}
.avwrap[data-frame="1"] { --frame: url("../images/contours/contour-1.png"); --fw: 52px; }
.avwrap[data-frame="2"] { --frame: url("../images/contours/contour-2.png"); --fw: 63px; }
.avwrap[data-frame="3"] { --frame: url("../images/contours/contour-3.png"); --fw: 81px; }
.usercard:has(.avwrap[data-frame="3"]) { padding-left: 14px; }