/* ─────────────────────────────────────────────────────────────────────────────
 * public/style.css — Feuille de styles globale Astarun / Pathfinder 2e
 * Thème sombre · variables CSS custom · composants réutilisables
 * Couvre : layout, header, fiches, bataille, contexte/campagne
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── Variables ─────────────────────────────────────── */
/*
 * CONTRAINTE D'ACCESSIBILITÉ — ratio de contraste minimum : 5:1 (WCAG AA+)
 *
 * Toute modification de couleur doit maintenir un ratio ≥ 5:1 entre le texte
 * et son fond. Les paires critiques à vérifier après chaque changement :
 *
 *   --text-muted  sur --surface-3 (#2e3340)  → 5.13:1
 *   --text-muted  sur --surface-2 (#252932)  → 5.92:1
 *   --text-dim    sur --surface-3 (#2e3340)  → 5.07:1
 *   --text-dim    sur --surface-2 (#252932)  → 5.85:1
 *   --text-dim    sur --bg        (#111318)  → 7.46:1
 *   --red         sur --surface   (#1c1f27)  → 5.66:1
 *   --red         sur --surface-2 (#252932)  → 5.01:1
 *   --accent-hi   sur --surface   (#1c1f27)  → 5.66:1
 *   --blue        sur --surface-2 (#252932)  → 5.46:1
 *   --rank-e bg   texte #fff                 → 5.95:1
 *   --rank-ex bg  texte #111318              → 6.47:1
 *
 * Script de vérification : bun -e "$(cat scripts/check-contrast.js)"
 * (ou relancer l'audit inline dans src/smoke-test.ts)
 */
:root {
  --bg:        #111318;
  --surface:   #1c1f27;
  --surface-2: #252932;
  --surface-3: #2e3340;
  --border:    #333a4a;
  --border-hi: #4a5570;

  --accent:    #c0392b;
  --accent-hi: #ff6459;
  --gold:      #d4a017;
  --gold-hi:   #f0bc1e;

  --text:      #e8eaf0;
  --text-muted:#9ca5be;
  --text-dim:  #9ba4bc;

  --green:     #27ae60;
  --green-hi:  #2ecc71;
  --yellow:    #f39c12;
  --red:       #ff6459;
  --blue:      #4ba8d6;

  --rank-u:    #555e73;
  --rank-e:    #1868a0;
  --rank-ex:   #27ae60;
  --rank-m:    #8e44ad;
  --rank-l:    #d4a017;

  --radius:    6px;
  --radius-lg: 10px;
  --shadow:    0 2px 12px rgba(0,0,0,.45);

  /* Couleurs races & factions (contexte) */
  --empire:     #c0392b;
  --coalition:  #2471a3;
  --drow:       #b0a0e0;
  --orc:        #90c878;
  --gobelin:    #d4a840;
  --hobgobelin: #d4a840;
  --kholo:      #c86858;
  --tieffelin:  #c060a0;
  --dhampir:    #8090c0;
  --humain:     #c8b060;
  --elfe:       #70c0e0;
  --nain:       #a09080;
  --halfelin:   #80c070;
  --gnome:      #50d0c8;
  --centaure:   #c09050;
  --anadi:        #90a8c8;
  --orc-oréade:   #7ab868;
  --automaton:    #909090;
  --divine:     #f0c040;
}

/* ── Reset & base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }
input, select, textarea {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: .3rem .6rem;
  font: inherit;
  font-size: .9rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
}
button { cursor: pointer; font: inherit; border: none; }

/* ── Layout ────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem; }

/* ── App header ────────────────────────────────────── */
.app-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  max-width: 1200px; margin: 0 auto;
  padding: .6rem 1rem;
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
}
.app-title {
  font-size: 1.15rem; font-weight: 700;
  color: var(--text);
  display: flex; align-items: center; gap: .5rem;
}
.app-title .accent { color: var(--accent-hi); }
.title-sub { font-size: .75rem; font-weight: 400; color: var(--text-muted); }
.header-nav { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.nav-link { font-size: .9rem; color: var(--text-muted); }
.nav-link:hover, .nav-link.active { color: var(--text); }
.header-user { display: flex; align-items: center; gap: .5rem; margin-left: auto; padding-left: .75rem; border-left: 1px solid var(--border); }

/* ── Tooltips de calcul ────────────────────────────── */
[data-tip] { position: relative; cursor: default; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  background: var(--surface-3);
  border: 1px solid var(--border-hi);
  color: var(--text);
  font-size: .72rem; font-weight: 400;
  white-space: nowrap;
  padding: .3rem .6rem;
  border-radius: 5px;
  box-shadow: var(--shadow);
  pointer-events: none;
  opacity: 0; transition: opacity .12s;
  z-index: 400;
}
[data-tip]:hover::after { opacity: 1; }

/* ── Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem; border-radius: var(--radius);
  font-size: .875rem; font-weight: 500; transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn-primary   { background: var(--accent); color: #fff; }
.btn-secondary { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); }
.btn-ghost     { background: none; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--border-hi); }
.btn-danger    { background: none; color: var(--red); border: 1px solid #5a2020; }
.btn-danger:hover { background: #3a1515; }
.btn-sm { padding: .2rem .55rem; font-size: .8rem; }
.btn-icon { padding: .3rem .5rem; }
.btn-rm {
  background: none; border: none; color: var(--red);
  font-size: .8rem; line-height: 1; padding: .1rem .3rem;
  border-radius: 3px; opacity: .45; transition: opacity .1s, background .1s;
  cursor: pointer; flex-shrink: 0;
}
.btn-rm:hover { opacity: 1; background: rgba(231,76,60,.12); }

/* ── Cards ─────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
}

/* ── Character grid (index) ────────────────────────── */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.char-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.char-card:hover { border-color: var(--border-hi); transform: translateY(-2px); }
.char-card-name {
  font-size: 1.15rem; font-weight: 700;
  color: var(--text); margin-bottom: .15rem;
}
.char-card-sub {
  font-size: .8rem; color: var(--text-muted); margin-bottom: .75rem;
}
.char-card-stats {
  display: flex; gap: 1rem; font-size: .85rem; margin-bottom: .6rem;
}
.stat-chip {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface-2); border-radius: var(--radius);
  padding: .25rem .6rem; min-width: 44px;
}
.stat-chip .label { font-size: .65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.stat-chip .value { font-size: .95rem; font-weight: 700; }
.hp-bar {
  height: 5px; background: var(--surface-3);
  border-radius: 3px; overflow: hidden; margin-top: .5rem;
}
.hp-bar-fill { height: 100%; border-radius: 3px; transition: width .3s; }

/* ── Character sheet layout ────────────────────────── */
.sheet-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1rem;
  display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between;
  flex-wrap: wrap;
}
.sheet-name { font-size: 1.6rem; font-weight: 800; }
.sheet-identity { font-size: .85rem; color: var(--text-muted); margin-top: .15rem; }
.sheet-actions { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }

.sheet-portrait {
  position: relative; flex-shrink: 0;
  width: 72px; height: 96px;
  border-radius: 6px; overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.sheet-portrait-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet-portrait-placeholder { font-size: 2.4rem; color: var(--text-dim); }
.sheet-portrait.has-portrait .sheet-portrait-placeholder { display: none; }
.sheet-portrait-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; opacity: 0; transition: opacity .15s;
}
.sheet-portrait:hover .sheet-portrait-overlay { opacity: 1; }

.sheet-body { padding: 1rem; }
.sheet-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 700px) { .sheet-grid { grid-template-columns: 1fr; } }

.section { margin-bottom: 1rem; }
.section-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border); padding-bottom: .3rem; margin-bottom: .6rem;
}

/* ── Ability scores ────────────────────────────────── */
.abilities-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
.ability-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .5rem .4rem;
  text-align: center;
}
.ability-box .ab-name { font-size: .65rem; color: var(--text-muted); text-transform: uppercase; }
.ability-box .ab-mod  { font-size: 1.3rem; font-weight: 800; line-height: 1.1; }
.ability-box .ab-score { font-size: .7rem; color: var(--text-muted); }
.ability-box.editable:hover { border-color: var(--gold); cursor: text; }

/* ── Saves / core numbers ──────────────────────────── */
.saves-grid { display: flex; flex-direction: column; gap: .4rem; }
.save-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface-2); border-radius: var(--radius); padding: .35rem .6rem;
}
.save-row .save-name { font-size: .8rem; color: var(--text-muted); }
.save-row .save-val  { font-size: .95rem; font-weight: 700; }

.core-nums { display: flex; flex-direction: column; gap: .4rem; }
.num-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .3rem 0; border-bottom: 1px solid var(--border);
}
.num-row:last-child { border-bottom: none; }
.num-row .num-label { font-size: .8rem; color: var(--text-muted); }
.num-row .num-val   { font-size: .95rem; font-weight: 700; }

/* ── HP block ──────────────────────────────────────── */
.hp-block {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .6rem .8rem; margin-bottom: .6rem;
}
.hp-numbers {
  display: flex; align-items: baseline; gap: .3rem;
  font-size: 1.6rem; font-weight: 800; margin-bottom: .3rem;
}
.hp-numbers .hp-sep { font-size: 1rem; color: var(--text-muted); font-weight: 400; }
.hp-numbers .hp-max { font-size: 1rem; color: var(--text-muted); }
.hp-numbers .hp-tmp { font-size: .85rem; color: var(--blue); }
.hp-meta { display: flex; gap: .5rem; font-size: .75rem; color: var(--text-muted); }
.ac-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .4rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .4rem .7rem; margin-bottom: .4rem;
}

/* ── Skills ────────────────────────────────────────── */
.skill-list { display: flex; flex-direction: column; gap: 2px; }
.skill-row {
  display: flex; align-items: center; gap: .4rem;
  padding: .25rem .4rem; border-radius: 4px;
}
.skill-row:hover { background: var(--surface-2); }
.rank-badge {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; cursor: pointer; flex-shrink: 0;
  transition: opacity .15s;
}
.rank-badge:hover { opacity: .8; }
.rank-0  { background: var(--rank-u);  color: #fff; }
.rank-2  { background: var(--rank-e);  color: #fff; }
.rank-4  { background: var(--rank-ex); color: #111318; }
.rank-6  { background: var(--rank-m);  color: #fff; }
.rank-8  { background: var(--rank-l);  color: #111; }
.skill-name  { flex: 1; font-size: .82rem; }
.skill-total { font-size: .85rem; font-weight: 700; text-align: right; min-width: 32px; }
.skill-ab    { font-size: .7rem; color: var(--text-dim); min-width: 26px; }

/* ── Weapons table ─────────────────────────────────── */
.weapon-list { display: flex; flex-direction: column; gap: .5rem; }
.weapon-row {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .5rem .75rem;
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: .5rem; align-items: center;
}
.weapon-name { font-size: .9rem; font-weight: 600; }
.weapon-atk  { font-size: .85rem; font-weight: 700; color: var(--green-hi); }
.weapon-dmg  { font-size: .82rem; color: var(--text-muted); }
.weapon-traits { font-size: .7rem; color: var(--text-dim); grid-column: 1/-1; }
.weapon-row--innate {
  grid-template-columns: 1fr auto auto;
  border-style: dashed; opacity: .85;
}

/* ── Feats ─────────────────────────────────────────── */
.feat-list { display: flex; flex-direction: column; gap: .4rem; }
.feat-row {
  background: var(--surface-2); border-radius: var(--radius);
  padding: .4rem .6rem; display: flex; gap: .5rem; align-items: flex-start;
}
.feat-type {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  padding: .1rem .35rem; border-radius: 3px;
  background: var(--surface-3); color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0;
  width: 82px; text-align: center;
}
.feat-type[data-type="ascendance"] { background: #332400; color: #d4a017; }
.feat-type[data-type="heritage"]   { background: #331800; color: #e0843a; }
.feat-type[data-type="classe"]     { background: #0a2340; color: #4a9fd4; }
.feat-type[data-type="general"]    { background: #0a2d18; color: #3dba6e; }
.feat-type[data-type="competence"] { background: #082828; color: #2ec4b6; }
.feat-type[data-type="archetype"]  { background: #25103a; color: #b57ce0; }
.feat-type[data-type="bonus"]      { background: var(--surface-3); color: #9da5bc; }
.feat-name { font-size: .85rem; font-weight: 600; }
.feat-desc { font-size: .78rem; color: var(--text-muted); }

/* ── Spellcasting ──────────────────────────────────── */
.spell-slots-grid {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem;
}
.spell-slot-block {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .4rem .6rem; text-align: center; min-width: 52px;
}
.spell-slot-block .slot-rank { font-size: .65rem; color: var(--text-muted); text-transform: uppercase; }
.spell-slot-block .slot-val  { font-weight: 700; font-size: .9rem; }
.spell-list-section { display: flex; flex-direction: column; gap: .3rem; }
.spell-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .5rem; border-radius: 4px;
}
.spell-row:hover { background: var(--surface-2); }
.spell-rank-badge {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; flex-shrink: 0;
}
.spell-rank-0 { background: var(--accent); color: #fff; }
.spell-name { flex: 1; font-size: .85rem; }

/* ── Inventory ─────────────────────────────────────── */
.inventory-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.inventory-table th {
  text-align: left; font-size: .7rem; text-transform: uppercase;
  color: var(--text-muted); padding: .3rem .4rem; border-bottom: 1px solid var(--border);
}
.inventory-table td { padding: .3rem .4rem; border-bottom: 1px solid var(--border); }
.inventory-table tr:last-child td { border-bottom: none; }
.inventory-table tr:hover td { background: var(--surface-2); }

.currency-row {
  display: flex; gap: .75rem; margin-top: .5rem; font-size: .85rem;
}
.currency-item { display: flex; align-items: center; gap: .25rem; }
.currency-item .coin { font-size: .7rem; color: var(--text-muted); }

/* ── Notes textarea ────────────────────────────────── */
.notes-area {
  width: 100%; min-height: 100px; resize: vertical;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: .85rem;
  padding: .5rem .7rem; font-family: inherit;
}

/* ── Conditions ────────────────────────────────────── */
.conditions-row { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.condition-badge {
  background: #5a2020; color: #ff9999;
  font-size: .7rem; padding: .15rem .5rem; border-radius: 20px;
  display: flex; align-items: center; gap: .3rem;
}
.condition-badge .rm { cursor: pointer; opacity: .6; }
.condition-badge .rm:hover { opacity: 1; }

/* ── Inline editable ───────────────────────────────── */
.editable {
  cursor: text; border-bottom: 1px dashed transparent; transition: border-color .15s;
}
.editable:hover { border-color: var(--gold); }
.inline-input {
  background: var(--surface-3) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 4px !important;
  padding: .1rem .4rem !important;
  font-size: inherit; font-weight: inherit;
  width: auto; min-width: 40px;
}
.inline-select {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1rem .3rem;
  font-size: .75rem;
  color: var(--text);
}
.btn-worn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer; font-size: .9rem; padding: .1rem .3rem;
  opacity: .55; transition: opacity .15s, border-color .15s, background .15s;
  line-height: 1.4;
}
.btn-worn:hover { opacity: .9; border-color: var(--border-hi); }
.btn-worn.worn  { opacity: 1; border-color: var(--gold); background: rgba(212,160,23,.1); }
tr.inv-worn > td:nth-child(2) { font-weight: 500; }

.rune-line { display: inline-flex; gap: .25rem; margin-left: .35rem; vertical-align: middle; }
.rune-badge {
  display: inline-block;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 3px; font-size: .65rem; font-weight: 600;
  padding: 0 .3rem; line-height: 1.6;
  color: var(--text-muted);
}
.rune-cycle { cursor: pointer; transition: border-color .1s, color .1s; }
.rune-cycle:hover { border-color: var(--gold); color: var(--text); }
.rune-active { border-color: var(--gold); color: var(--gold); }
.rune-prop { color: var(--blue); border-color: var(--blue); }
.rune-rm {
  cursor: pointer; margin-left: .2rem; opacity: .6;
  font-size: .6rem; color: var(--red);
}
.rune-rm:hover { opacity: 1; }
.rune-add-select {
  background: var(--surface-3); border: 1px dashed var(--border);
  border-radius: 3px; font-size: .65rem; padding: 0 .2rem;
  color: var(--text-muted); cursor: pointer; height: 1.6em;
}
.rune-add-select:hover { border-color: var(--gold); }

/* ── Add-item form ─────────────────────────────────── */
.add-form {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem; margin-top: .5rem;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end;
}
.add-form label { font-size: .75rem; color: var(--text-muted); display: block; margin-bottom: .2rem; }
.add-form input, .add-form select { width: 100%; }
.add-form .field { flex: 1; min-width: 80px; }

/* ── Create form ───────────────────────────────────── */
.create-form { max-width: 700px; margin: 0 auto; }
.create-form h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 500px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: .3rem; }
.form-field label { font-size: .8rem; color: var(--text-muted); }
.form-field input, .form-field select { width: 100%; }
.form-section { margin: 1.25rem 0 .5rem; }
.form-section-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
  padding-bottom: .3rem; margin-bottom: .75rem;
}
.abilities-form { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
@media (max-width: 500px) { .abilities-form { grid-template-columns: repeat(3, 1fr); } }
.abilities-form .form-field label { text-align: center; }
.abilities-form .form-field input { text-align: center; }
.rank-select { display: flex; gap: 3px; }
.rank-opt {
  flex: 1; padding: .3rem; text-align: center; font-size: .75rem; font-weight: 700;
  border-radius: 4px; cursor: pointer; background: var(--surface-3);
  border: 1px solid var(--border); color: var(--text-muted); transition: all .12s;
}
.rank-opt.selected { color: #fff; border-color: transparent; }
.rank-opt[data-rank="0"].selected  { background: var(--rank-u); }
.rank-opt[data-rank="2"].selected  { background: var(--rank-e); }
.rank-opt[data-rank="4"].selected  { background: var(--rank-ex); color: #111318; }
.rank-opt[data-rank="6"].selected  { background: var(--rank-m); }
.rank-opt[data-rank="8"].selected  { background: var(--rank-l); color: #111; }

/* ── Autocomplete ──────────────────────────────────── */
.ac-dropdown {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: var(--surface-3); border: 1px solid var(--border-hi);
  border-radius: var(--radius); z-index: 200;
  max-height: 220px; overflow-y: auto; display: none;
  box-shadow: var(--shadow);
}
.ac-item {
  padding: .4rem .7rem; cursor: pointer; font-size: .85rem;
  border-bottom: 1px solid var(--border);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.ac-active { background: var(--surface-2); color: var(--gold); }

/* ── Boost picker ──────────────────────────────────── */
.boost-panel {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .7rem .8rem; margin-top: .5rem;
}
.boost-panel-title {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); margin-bottom: .55rem;
}
.boost-slot { margin-bottom: .45rem; }
.boost-slot:last-of-type { margin-bottom: 0; }
.boost-opts { display: flex; gap: .3rem; flex-wrap: wrap; }
.boost-opt {
  padding: .2rem .55rem; font-size: .78rem; font-weight: 700;
  border-radius: 4px; background: var(--surface-3); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; transition: all .12s;
}
.boost-opt:hover:not([disabled]) { border-color: var(--gold); color: var(--text); }
.boost-opt.selected  { background: var(--gold); color: #111; border-color: var(--gold); }
.boost-opt.taken, .boost-opt[disabled] { opacity: .3; cursor: default; }
.boost-fixed   { font-size: .82rem; font-weight: 700; color: var(--green-hi); }
.boost-tag-fixed {
  font-size: .65rem; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 3px; padding: .05rem .3rem; margin-left: .3rem;
}
.boost-flaw    { font-size: .78rem; margin-top: .5rem; }
.boost-flaw-chip {
  display: inline-block; background: rgba(231,76,60,.15); color: var(--red);
  border: 1px solid rgba(231,76,60,.3); border-radius: 4px;
  padding: .1rem .4rem; font-size: .75rem; font-weight: 700; margin-right: .25rem;
}

/* ── Ability summary (create form) ────────────────── */
.ability-summary-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin-top: .5rem;
}
@media (max-width: 500px) { .ability-summary-grid { grid-template-columns: repeat(3, 1fr); } }
.ability-summary-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .45rem .3rem; text-align: center;
}
.ability-summary-box .ab-key { font-size: .6rem; color: var(--text-muted); text-transform: uppercase; }
.ability-summary-box .ab-total { font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.ability-summary-box .ab-mod-small { font-size: .65rem; color: var(--text-muted); }

/* ── Misc ──────────────────────────────────────────── */
.text-muted { color: var(--text-muted); }
.text-green { color: var(--green-hi); }
.text-red   { color: var(--red); }
.text-gold  { color: var(--gold); }
.flex-gap { display: flex; gap: .5rem; flex-wrap: wrap; }
.loading  { color: var(--text-muted); padding: 2rem; text-align: center; }
.empty    { color: var(--text-dim);   padding: 1rem; text-align: center; font-size: .85rem; }
hr { border: none; border-top: 1px solid var(--border); margin: .75rem 0; }

/* ── Level-up wizard ────────────────────────────────── */
.wizard-card           { max-width: 640px; margin: 2rem auto; }
.wizard-card--wide     { max-width: 900px; }

.feat-picker-bar {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .6rem;
}
.feat-picker-bar input {
  flex: 1; padding: .4rem .65rem; font-size: .9rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text);
}
.feat-picker-bar input:focus { outline: none; border-color: var(--accent); }

.feat-picker-list {
  display: flex; flex-direction: column; gap: .35rem;
  max-height: 58vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
  padding: .4rem;
  background: var(--surface-1);
}

.wizard-progress {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border);
}
.wizard-char       { font-weight: 600; color: var(--gold); }
.wizard-step-label { font-size: .8rem; color: var(--text-muted); }
.wizard-card h3    { margin: 0 0 1rem; font-size: 1.1rem; color: var(--text); }
.wizard-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1.5rem; padding-top: .75rem; border-top: 1px solid var(--border);
}
.wizard-summary { padding: 0 0 0 1.25rem; margin: 0 0 .5rem; line-height: 2; color: var(--text); }
.wizard-summary li { margin-bottom: .15rem; }

.feat-preview-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: .75rem 1rem; margin-top: .5rem;
}
.feat-preview-name   { font-weight: 600; margin-bottom: .2rem; }
.feat-preview-traits { font-size: .78rem; color: var(--text-muted); margin-bottom: .35rem; }
.feat-preview-desc   { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }

/* ── Feat picker ───────────────────────────────────── */
.fp-header {
  display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; width: 100%;
}
.fp-header input[type="search"] { flex: 1; min-width: 0; }
.fp-header select { flex: 0 0 130px; }
.fp-results {
  width: 100%; max-height: 280px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-3);
}
.fp-empty {
  padding: .7rem 1rem; font-size: .82rem; color: var(--text-muted); text-align: center;
}
.fp-row {
  padding: .45rem .75rem; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s;
}
.fp-row:last-child { border-bottom: none; }
.fp-row:hover:not(.fp-unavail) { background: var(--surface-2); }
.fp-unavail { opacity: .45; cursor: not-allowed; }
.fp-main { display: flex; align-items: baseline; gap: .5rem; }
.fp-name { font-size: .87rem; font-weight: 600; }
.fp-meta { font-size: .75rem; color: var(--text-muted); }
.fp-prereqs { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.fp-prereq {
  font-size: .72rem; padding: .1rem .4rem; border-radius: 3px; font-weight: 500;
}
.fp-prereq-ok   { background: #1a3a25; color: var(--green-hi); }
.fp-prereq-fail { background: #3a1a1a; color: var(--red); }

/* ── Roll dice buttons ──────────────────────────────── */
.roll-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; padding: 0; font-size: .78rem;
  background: transparent; border: 1px solid var(--border);
  border-radius: 4px; color: var(--text-dim); cursor: pointer;
  transition: all .12s; flex-shrink: 0; vertical-align: middle; line-height: 1;
}
.roll-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(212,160,23,.09); }

/* ── Roll log bar (fixed bottom) ─────────────────────── */
body { padding-bottom: 2.4rem; }

/* ── Layout bataille : chat fixe en bas, contenu scrollable ── */
.battle-page {
  display: flex; flex-direction: column;
  height: 100dvh; overflow: hidden;
  padding-bottom: 0;
}
.battle-page #app-header { flex-shrink: 0; }
.battle-page #battle-root { flex: 1; overflow-y: auto; padding-bottom: 0; }

/* ── Panneau chat de la vue bataille ─────────────────────────────────────── */
#battle-chat-panel {
  flex-shrink: 0;
  height: 14rem;
  background: var(--surface); border-top: 2px solid var(--border);
  font-size: .8rem; display: flex; flex-direction: column;
}
#battle-chat-header {
  display: flex; align-items: center; gap: .6rem;
  padding: .2rem .8rem; user-select: none;
}
.battle-chat-title { font-weight: 600; }
.btn-roll-toggle {
  margin-left: auto;
  background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; font-size: .75rem; padding: .1rem .5rem; border-radius: 3px;
}
.btn-roll-toggle:hover { background: var(--surface-2); color: var(--text); }

#battle-chat-messages {
  flex: 1; overflow-y: auto;
  padding: .2rem .6rem;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .05rem;
}
.battle-chat-collapsed { height: auto; }
.battle-chat-collapsed #battle-chat-messages,
.battle-chat-collapsed #battle-chat-input-row,
.battle-chat-collapsed #chat-cooldown { display: none; }

#battle-chat-input-row {
  display: flex; gap: .4rem; padding: .2rem .6rem;
  border-top: 1px solid var(--border);
}
#battle-chat-input {
  flex: 1; padding: .3rem .5rem; font-size: .8rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
}
.chat-cooldown-note {
  font-size: .65rem; color: var(--text-dim); font-style: italic;
  padding: 0 .6rem .15rem; min-height: .85rem;
}

.battle-chat-entry {
  display: flex; align-items: baseline; gap: .4rem;
  padding: .15rem .25rem; border-radius: 3px; line-height: 1.4;
}
.battle-chat-time { color: var(--text-dim); font-size: .68rem; white-space: nowrap; flex-shrink: 0; }
.battle-chat-from { font-weight: 700; color: var(--gold); white-space: nowrap; flex-shrink: 0; }
.battle-chat-text { flex: 1; word-break: break-word; }
.battle-chat-roll { }
.battle-chat-chat { background: rgba(212,160,23,.04); }
.roll-crit        { background: rgba(39,174,96,.1); }
.roll-fumble      { background: rgba(231,76,60,.08); }
.roll-badge-crit   { background: var(--green);  color: #111318; border-radius: 3px; padding: 0 .3rem; font-size: .65rem; font-weight: 700; }
.roll-badge-fumble { background: var(--accent); color: #fff;    border-radius: 3px; padding: 0 .3rem; font-size: .65rem; font-weight: 700; }

/* WebSocket status dot */
.ws-dot { width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; }
.ws-on  { background: var(--green); }
.ws-off { background: var(--text-dim); }

/* ── Rang boosté par un don ─────────────────────────── */
.rank-badge.rank-feat {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* ── Toast notifications ────────────────────────────── */
.toast {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%) translateY(8px);
  z-index: 500; min-width: 260px; max-width: 500px;
  padding: .55rem 1rem; border-radius: var(--radius);
  font-size: .83rem; font-weight: 500; text-align: center;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
  box-shadow: var(--shadow);
}
.toast.toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-warn  { background: #3a2800; color: var(--yellow); border: 1px solid #6a4800; }
.toast-error { background: #3a1515; color: var(--red);    border: 1px solid #6a2020; }
.toast-info  { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }

/* ── Vue tactique (battle.html) ─────────────────────── */

.battle-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1rem 1.5rem .8rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.battle-name {
  font-size: 1.4rem; font-weight: 700; color: var(--text);
}
.battle-identity {
  font-size: .8rem; color: var(--text-muted); margin-top: .2rem;
}
.battle-nav { display: flex; gap: .5rem; align-items: center; }

/* ── Strip horizontal : HP | CA | Saves ── */
.battle-strip {
  display: flex; align-items: center; flex-wrap: nowrap;
  background: var(--surface); border-bottom: 1px solid var(--border);
  font-size: .8rem; overflow-x: auto;
}

/* Section générique dans le strip */
.battle-strip-section {
  display: flex; align-items: center; gap: .45rem; flex-shrink: 0;
  padding: .45rem .8rem;
  border-right: 1px solid var(--border);
}

/* Section HP (flex: 1 pour absorber l'espace) */
.battle-strip-hp {
  display: flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; flex: 1; min-width: 0;
  border-right: 1px solid var(--border);
}

.battle-strip-label {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); flex-shrink: 0;
}
.battle-strip-big   { font-size: 1.5rem; font-weight: 800; line-height: 1; cursor: pointer; }
.battle-strip-num   { font-weight: 700; color: var(--text); }
.battle-strip-sub   { font-size: .72rem; color: var(--text-muted); }
.battle-strip-meta  { font-size: .72rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.battle-strip-meta .editable { cursor: pointer; }
.battle-strip-divider { width: 1px; height: 1rem; background: var(--border); flex-shrink: 0; }
.battle-strip-saves { gap: .6rem; }
.battle-strip-save  { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }

/* HP inline */
.battle-hp-cur { font-size: 1.5rem; font-weight: 800; line-height: 1; cursor: pointer; }
.battle-hp-sep { font-size: 1rem; color: var(--text-dim); }
.battle-hp-max { font-size: 1rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.battle-hp-tmp {
  font-size: .75rem; font-weight: 600; color: var(--blue);
  background: rgba(75,168,214,.15); border-radius: 999px; padding: .05rem .35rem;
}
.battle-hp-bar {
  flex: 1; min-width: 40px; height: 5px;
  background: var(--surface-3); border-radius: 3px; overflow: hidden;
}
.battle-hp-fill { height: 100%; border-radius: 3px; transition: width .3s; }

/* Saves inline */
.battle-save-name { font-size: .75rem; color: var(--text-muted); }
.battle-save-val  { font-size: .95rem; font-weight: 700; color: var(--text); min-width: 1.8rem; text-align: right; }

/* ── Conditions ── */
.battle-conditions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  padding: .3rem 1rem;
  min-height: 2rem;
}

/* ── Weapons section ── */
.battle-section {
  padding: .55rem 1rem;
}
.battle-section + .battle-section { border-top: 1px solid var(--border); }
.battle-section-title {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); margin-bottom: .7rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.battle-active-bonus {
  font-size: .75rem; color: var(--green-hi);
  background: rgba(46,204,113,.12); border-radius: 999px;
  padding: .15rem .5rem; font-weight: 600; text-transform: none; letter-spacing: 0;
}

.battle-weapon-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap;
  padding: .4rem .8rem; font-size: .82rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.battle-weapon-row:last-child { border-bottom: none; }
.battle-weapon-row-divider { width: 1px; height: 1rem; background: var(--border); flex-shrink: 0; }
.battle-weapon-name  { font-weight: 700; font-size: .88rem; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.battle-weapon-type  {
  font-size: .65rem; padding: .05rem .4rem;
  background: var(--surface-3); border-radius: 999px; color: var(--text-muted); flex-shrink: 0;
}
.battle-weapon-traits { font-size: .7rem; color: var(--text-dim); white-space: nowrap; }
.battle-atk-val  { font-size: 1.2rem; font-weight: 800; color: var(--text); line-height: 1; flex-shrink: 0; }
.battle-atk-map  { font-size: .7rem; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
.battle-dmg-dice { font-size: .88rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.battle-dmg-note {
  font-size: .72rem; color: var(--green-hi);
  background: rgba(46,204,113,.1); border-radius: 999px;
  padding: .1rem .4rem; white-space: nowrap;
}
.roll-btn-atk {
  font-size: .82rem; font-weight: 700; padding: .15rem .45rem;
  border-radius: var(--radius); cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--border); transition: background .12s;
  line-height: 1.3;
}
.roll-btn-atk.atk-1 { background: var(--surface-2); color: var(--text); }
.roll-btn-atk.atk-2 { background: var(--surface-2); color: var(--gold); border-color: rgba(212,160,23,.4); }
.roll-btn-atk.atk-3 { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
.roll-btn-atk:hover { background: var(--surface-3); }
.battle-active-chip {
  font-size: .72rem; color: var(--text-dim);
  background: var(--surface-2); border-radius: 999px;
  padding: .1rem .4rem;
}

/* ── Combat feats panel ── */
.battle-feat-legend {
  display: flex; gap: .8rem; font-size: .7rem; color: var(--text-dim);
  text-transform: none; letter-spacing: 0; margin-left: auto;
}
.battle-feat-group { margin-bottom: .8rem; }
.battle-feat-group:last-child { margin-bottom: 0; }
.battle-feat-group-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); margin-bottom: .35rem; display: block;
}
.battle-feat-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.battle-feat-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .65rem; font-size: .78rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; color: var(--text-muted);
  transition: background .12s, border-color .12s, color .12s;
  text-align: left;
}
.battle-feat-toggle:hover { background: var(--surface-2); color: var(--text); }
.battle-feat-toggle.active {
  background: rgba(212,160,23,.12); border-color: var(--gold);
  color: var(--gold-hi); font-weight: 600;
}

/* ── Contexte / Campagne ─────────────────────────────── */

.page-intro { margin-bottom: 1.75rem; }
.page-intro h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: .2rem; }
.page-intro .subtitle { font-size: .875rem; color: var(--text-muted); }

.ctx-section { margin-bottom: 2rem; }
.ctx-section-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border); padding-bottom: .3rem;
  margin-bottom: 1rem;
}

.faction-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 700px) { .faction-grid { grid-template-columns: 1fr; } }

.faction-card { border-top: 3px solid var(--border-hi); }
.faction-card.empire    { border-top-color: var(--empire); }
.faction-card.coalition { border-top-color: var(--coalition); }
.faction-card h2 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.faction-card p  { font-size: .84rem; color: var(--text-muted); margin-bottom: .6rem; }

.faction-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: .6rem; }

.tag {
  display: inline-block; padding: .15rem .5rem; border-radius: 20px;
  font-size: .72rem; font-weight: 600; text-decoration: none; transition: opacity .15s;
}
.tag:hover { opacity: .8; }
.tag-drow       { background: rgba(176,160,224,.12); color: var(--drow);       border: 1px solid var(--drow); }
.tag-orc        { background: rgba(144,200,120,.12); color: var(--orc);        border: 1px solid var(--orc); }
.tag-gobelin    { background: rgba(212,168,64,.12);  color: var(--gobelin);    border: 1px solid var(--gobelin); }
.tag-hobgobelin { background: rgba(212,168,64,.12);  color: var(--hobgobelin); border: 1px solid var(--hobgobelin); }
.tag-kholo      { background: rgba(200,104,88,.12);  color: var(--kholo);      border: 1px solid var(--kholo); }
.tag-dhampir    { background: rgba(128,144,192,.12); color: var(--dhampir);    border: 1px solid var(--dhampir); }
.tag-tieffelin  { background: rgba(192,96,160,.12);  color: var(--tieffelin);  border: 1px solid var(--tieffelin); }
.tag-humain     { background: rgba(200,176,96,.12);  color: var(--humain);     border: 1px solid var(--humain); }
.tag-nain       { background: rgba(160,144,128,.12); color: var(--nain);       border: 1px solid var(--nain); }
.tag-elfe       { background: rgba(112,192,224,.12); color: var(--elfe);       border: 1px solid var(--elfe); }
.tag-halfelin   { background: rgba(128,192,112,.12); color: var(--halfelin);   border: 1px solid var(--halfelin); }
.tag-gnome      { background: rgba(80,208,200,.12);  color: var(--gnome);      border: 1px solid var(--gnome); }
.tag-centaure   { background: rgba(192,144,80,.12);  color: var(--centaure);   border: 1px solid var(--centaure); }
.tag-anadi     { background: rgba(144,168,200,.12); color: var(--anadi);     border: 1px solid var(--anadi); }
.tag-orc-oréade { background: rgba(122,184,104,.12); color: var(--orc-oréade); border: 1px solid var(--orc-oréade); }
.tag-automaton  { background: rgba(144,144,144,.12); color: var(--automaton);  border: 1px solid var(--automaton); }

.threat-list { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; }
.threat-row  { display: flex; gap: .5rem; align-items: center; }
.threat-dir  { font-weight: 700; color: var(--red); min-width: 55px; }
.faction-info { font-size: .82rem; color: var(--text-muted); }

.corps-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.corps-table tr { border-bottom: 1px solid var(--border); }
.corps-table tr:last-child { border-bottom: none; }
.corps-table td { padding: .5rem .6rem; vertical-align: top; }
.corps-num  { font-weight: 700; color: var(--text-muted); white-space: nowrap; width: 44px; }
.corps-name { font-size: .88rem; }
.corps-note { font-size: .72rem; color: var(--text-dim); display: block; margin-top: .1rem; }
.corps-gen  { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.corps-gen.rotating { color: var(--yellow); }
.corps-gen.unknown  { color: var(--text-dim); font-style: italic; }
.corps-gen.divine   { color: var(--divine); font-weight: 600; }

.corps-legend {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem;
  padding-top: .6rem; border-top: 1px solid var(--border);
  font-size: .74rem; color: var(--text-muted);
}
.corps-legend-item { display: flex; align-items: center; gap: .35rem; }
.corps-legend-dot  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.deity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem; margin-bottom: .75rem;
}
.deity-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .65rem .85rem;
}
.deity-card.emperor { border-color: var(--divine); background: rgba(212,160,23,.06); }
.deity-name { font-size: .93rem; font-weight: 700; margin-bottom: .1rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.deity-role { font-size: .78rem; color: var(--text-muted); margin-bottom: .2rem; }
.deity-note { font-size: .73rem; color: var(--text-dim); line-height: 1.5; }

.lore-grid { display: flex; flex-direction: column; gap: .75rem; }
.lore-block {
  border-left: 3px solid var(--border-hi);
  padding: .7rem .9rem;
  background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .85rem; line-height: 1.6;
}
.lore-block.empire    { border-left-color: var(--empire); }
.lore-block.coalition { border-left-color: var(--coalition); }
.lore-block.neutral   { border-left-color: var(--border-hi); }
.lore-block[data-race="drow"]       { border-left-color: var(--drow); }
.lore-block[data-race="orc"]        { border-left-color: var(--orc); }
.lore-block[data-race="gobelin"]    { border-left-color: var(--gobelin); }
.lore-block[data-race="hobgobelin"] { border-left-color: var(--hobgobelin); }
.lore-block[data-race="kholo"]      { border-left-color: var(--kholo); }
.lore-block[data-race="tieffelin"]  { border-left-color: var(--tieffelin); }
.lore-block[data-race="dhampir"]    { border-left-color: var(--dhampir); }
.lore-block[data-race="humain"]     { border-left-color: var(--humain); }
.lore-block[data-race="nain"]       { border-left-color: var(--nain); }
.lore-block[data-race="elfe"]       { border-left-color: var(--elfe); }
.lore-block[data-race="halfelin"]   { border-left-color: var(--halfelin); }
.lore-block[data-race="gnome"]      { border-left-color: var(--gnome); }
.lore-block[data-race="centaure"]   { border-left-color: var(--centaure); }
.lore-block[data-race="anadi"]       { border-left-color: var(--anadi); }
.lore-block[data-race="orc-oréade"]  { border-left-color: var(--orc-oréade); }
.lore-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin-bottom: .4rem;
}
.lore-block p { color: var(--text-muted); margin: 0; }
.lore-block p + p { margin-top: .5rem; }
.lore-block .highlight { color: var(--gold); font-weight: 600; }

.hierarchy-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.hierarchy-table tr { border-bottom: 1px solid var(--border); }
.hierarchy-table tr:last-child { border-bottom: none; }
.hierarchy-table td { padding: .45rem .6rem; vertical-align: top; }
.hierarchy-sym   { color: var(--gobelin); font-weight: 700; width: 28px; }
.hierarchy-race  { font-weight: 600; color: var(--gobelin); }
.hierarchy-note  { font-size: .72rem; color: var(--text-dim); display: block; margin-top: .1rem; }
.hierarchy-corps { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }

/* ── Carte interactive ───────────────────────────────── */
.map-filters {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .65rem;
}
.map-filter-btn {
  padding: .32rem .85rem; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--btn-color, var(--border-hi));
  background: transparent; color: var(--btn-color, var(--text));
  font-size: .78rem; font-weight: 600; font-family: inherit;
  transition: background .15s;
}
.map-filter-btn:hover {
  background: color-mix(in srgb, var(--btn-color, var(--border-hi)) 14%, transparent);
}
.map-filter-btn.active {
  background: color-mix(in srgb, var(--btn-color, var(--border-hi)) 22%, transparent);
}

.map-interactive {
  position: relative; display: block;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border);
}
.map-interactive img {
  width: 100%; display: block; cursor: zoom-in;
}
.map-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.map-zone {
  pointer-events: all; cursor: pointer;
  fill-opacity: .15; stroke-opacity: .35; stroke-width: 1.5;
  transition: fill-opacity .18s, stroke-opacity .18s;
}
.map-zone:hover {
  fill-opacity: .52 !important;
  stroke-opacity: 1   !important;
}
/* Filtre actif : dim les non-concernés, boost les concernés */
.map-interactive[class*="filter-"] .map-zone {
  fill-opacity: .04; stroke-opacity: .08;
}
.map-interactive.filter-faction .map-zone[data-group="faction"],
.map-interactive.filter-menace  .map-zone[data-group="menace"],
.map-interactive.filter-marche  .map-zone[data-group="marche"] {
  fill-opacity: .38; stroke-opacity: .75;
}
.map-interactive[class*="filter-"] .map-zone:hover {
  fill-opacity: .62 !important; stroke-opacity: 1 !important;
}

/* Tooltip */
.map-tooltip {
  position: fixed; pointer-events: none; z-index: 300;
  background: var(--surface); border: 1px solid var(--border-hi);
  border-radius: var(--radius); padding: .65rem .9rem;
  max-width: 300px; opacity: 0; transition: opacity .12s;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.map-tooltip.visible { opacity: 1; }

/* Calibration */
.map-cal-bar {
  display: none; flex-direction: column; gap: .45rem;
  padding: .55rem .8rem; margin-bottom: .5rem;
  background: var(--surface-2); border-radius: var(--radius);
  border: 1px solid var(--border-hi);
}
.map-cal-bar.visible { display: flex; }
.map-cal-bar > :first-child { display: flex; align-items: center; gap: .75rem; }
.map-cal-hint  { font-size: .75rem; color: var(--text-dim); flex: 1; }
.map-cal-copy  {
  padding: .2rem .6rem; border-radius: var(--radius);
  background: var(--surface-3); border: 1px solid var(--border-hi);
  color: var(--text-muted); font-size: .75rem; cursor: pointer;
  transition: color .15s;
}
.map-cal-copy:hover { color: var(--text); }
#map-cal-log {
  font-family: monospace; font-size: .72rem; color: var(--text-muted);
  white-space: pre; overflow-x: auto; line-height: 1.6;
  max-height: 180px; overflow-y: auto;
}
.map-interactive.calibrating { cursor: default; }
.map-interactive.calibrating .map-zone { pointer-events: none; }
.map-interactive.calibrating polygon.map-zone { pointer-events: all; cursor: cell; }
.cal-handle {
  pointer-events: all; cursor: grab;
  transition: r .1s;
}
.cal-handle:active { cursor: grabbing; }
.map-tooltip-group {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: .2rem;
}
.map-tooltip-title {
  font-size: .88rem; font-weight: 700; color: var(--text); margin-bottom: .35rem;
}
.map-tooltip-desc {
  font-size: .78rem; color: var(--text-muted); line-height: 1.55;
}

.map-lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.88); align-items: center; justify-content: center;
  cursor: zoom-out;
}
.map-lightbox.open { display: flex; }
.map-lightbox img  { max-width: 95vw; max-height: 95vh; border-radius: var(--radius-lg); }

/* ── Page race ───────────────────────────────────────── */

.race-back {
  display: inline-block; margin-bottom: 1.25rem;
  font-size: .85rem; color: var(--text-muted);
}
.race-back:hover { color: var(--text); }

.race-header {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.race-title {
  font-size: 2rem; font-weight: 800; margin: 0;
}
/* Couleur du titre selon la race */
.race-drow       { color: var(--drow); }
.race-orc        { color: var(--orc); }
.race-gobelin    { color: var(--gobelin); }
.race-hobgobelin { color: var(--hobgobelin); }
.race-kholo      { color: var(--kholo); }
.race-tieffelin  { color: var(--tieffelin); }
.race-dhampir    { color: var(--dhampir); }
.race-humain     { color: var(--humain); }
.race-nain       { color: var(--nain); }
.race-elfe       { color: var(--elfe); }
.race-halfelin   { color: var(--halfelin); }
.race-gnome      { color: var(--gnome); }
.race-centaure   { color: var(--centaure); }
.race-anadi     { color: var(--anadi); }
.race-orc-oréade { color: var(--orc-oréade); }
.race-automaton  { color: var(--automaton); }

.race-gallery {
  display: flex; gap: .75rem; overflow-x: auto;
  padding-bottom: .5rem; margin-bottom: 1.5rem;
  scrollbar-width: thin;
}
.race-img {
  height: 220px; width: auto; flex-shrink: 0;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  cursor: zoom-in; object-fit: cover;
  transition: opacity .15s, border-color .15s;
}
.race-img:hover { opacity: .9; border-color: var(--border-hi); }

@media (max-width: 600px) {
  .race-title { font-size: 1.5rem; }
  .race-img   { height: 160px; }
}

.ancestry-desc {
  line-height: 1.65;
  color: var(--text-muted);
  font-size: .95rem;
  max-width: 72ch;
}

/* ── Contexte mobile ─────────────────────────────────── */

@media (max-width: 600px) {
  .page-intro h1 { font-size: 1.25rem; }

  .corps-table,
  .corps-table tbody,
  .corps-table tr,
  .corps-table td { display: block; width: 100%; }
  .corps-table tr { padding: .5rem 0; border-bottom: 1px solid var(--border); }
  .corps-table tr:last-child { border-bottom: none; }
  .corps-table td { padding: .1rem 0; border: none; }
  .corps-num  { font-size: .72rem; color: var(--text-dim); }
  .corps-name { font-size: .88rem; font-weight: 600; }
  .corps-gen  { white-space: normal; font-size: .78rem; padding-left: .75rem; }
  .corps-gen::before { content: "↳ "; color: var(--text-dim); }

  .hierarchy-table,
  .hierarchy-table tbody,
  .hierarchy-table tr,
  .hierarchy-table td { display: block; width: 100%; }
  .hierarchy-table tr { padding: .45rem 0; border-bottom: 1px solid var(--border); }
  .hierarchy-table tr:last-child { border-bottom: none; }
  .hierarchy-table td { padding: .1rem 0; border: none; }
  .hierarchy-sym  { display: inline; }
  .hierarchy-corps { padding-left: .75rem; font-size: .76rem; }
  .hierarchy-corps::before { content: "↳ "; color: var(--text-dim); }

  .deity-grid { grid-template-columns: 1fr; }
  .deity-name { font-size: .88rem; }

  .lore-block { padding: .55rem .7rem; font-size: .82rem; }

  .ctx-section { margin-bottom: 1.25rem; }
  .ctx-section.card { padding: .75rem; }

  .map-interactive img { cursor: default; }
}

/* ── Wizard archétype ──────────────────────────────── */

.feat-mode-toggle {
  display: flex;
  gap: .4rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .6rem;
}

.arch-feat-list,
#arch-feat-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-height: 340px;
  overflow-y: auto;
  margin-top: .5rem;
  padding-right: .2rem;
}

.arch-feat-item {
  padding: .55rem .7rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.arch-feat-item:hover:not(.unavailable) { border-color: var(--accent); background: var(--surface-3); }
.arch-feat-item.selected { border-color: var(--accent); background: var(--surface-3); }
.arch-feat-item.unavailable { opacity: .5; cursor: not-allowed; }

.arch-feat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
}
.arch-feat-name  { font-weight: 600; font-size: .9rem; }
.arch-feat-level { font-size: .78rem; color: var(--text-dim); white-space: nowrap; }
.arch-feat-prereq { font-size: .75rem; color: var(--text-dim); margin-top: .25rem; }
.arch-feat-block  { font-size: .75rem; color: var(--red); margin-top: .2rem; }
.arch-feat-desc   { font-size: .78rem; color: var(--text-muted); margin-top: .3rem; line-height: 1.45; }

.arch-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .1em .45em;
  border-radius: 3px;
  background: var(--accent);
  color: var(--bg);
  vertical-align: middle;
  margin-left: .35rem;
}
.arch-badge--ded {
  background: var(--gold);
  color: var(--bg);
}

/* ── Résumé du groupe (index + battle) ───────────────────────────────────── */
.group-summary {
  margin-bottom: 1.5rem;
}
.group-summary-header,
.battle-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.group-summary-title,
.battle-group-title {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}

/* Panneau dans la vue combat */
.battle-group-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}

/* Grille de chips */
.gs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.gs-chip {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .45rem .65rem;
  min-width: 9rem;
  max-width: 14rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s;
}
.gs-chip:hover       { border-color: var(--accent); }
.gs-chip-current     { border-color: var(--accent); background: var(--accent-muted); }
.gs-name             { font-weight: 600; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-hp-row           { display: flex; align-items: center; gap: .4rem; font-size: .78rem; }
.gs-ca               { margin-left: auto; color: var(--text-dim); font-size: .72rem; }
.gs-tmp              { font-size: .72rem; color: var(--accent-hi); }
.gs-bar-track        { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.gs-bar-fill         { height: 100%; border-radius: 2px; transition: width .3s; }
.gs-conds            { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .1rem; }
.condition-badge-xs  { font-size: .65rem; padding: .05em .3em; }

/* ── Vue MJ ──────────────────────────────────────────────────────────────── */
.gm-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
  height: calc(100vh - 56px);
}
@media (max-width: 800px) {
  .gm-layout { grid-template-columns: 1fr; height: auto; }
}

.gm-left  { display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; }
.gm-right { display: flex; flex-direction: column; min-height: 0; }

.gm-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
}
.gm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .75rem;
}
.gm-panel-title {
  font-weight: 600;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Combattants */
.combatant-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .45rem .5rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  margin-bottom: .3rem;
  cursor: grab;
  transition: background .12s, border-color .12s;
}
.combatant-row:hover       { background: var(--bg); }
.combatant-row.combatant-active { border-color: var(--accent); background: var(--accent-muted); }
.combatant-row.dragging    { opacity: .4; }
.combatant-icon            { font-size: 1.1rem; line-height: 1; padding-top: .1rem; }
.combatant-info            { flex: 1; min-width: 0; }
.combatant-header-row      { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.combatant-name            { font-weight: 600; font-size: .85rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combatant-stats-row       { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; font-size: .78rem; flex-wrap: wrap; }
.combatant-hp              { font-weight: 600; }
.combatant-ac              { color: var(--text-dim); }
.combatant-bar-track       { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: .2rem; }
.combatant-bar-fill        { height: 100%; border-radius: 2px; }
.combatant-conds           { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .2rem; }
.init-input                { width: 52px; padding: .15rem .35rem; font-size: .78rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); text-align: center; }
.btn-xs                    { font-size: .7rem; padding: .1em .4em; }
.btn-danger                { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover          { opacity: .85; }

/* Chat */
.gm-chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.gm-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: .4rem 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.gm-chat-entry      { display: flex; align-items: baseline; gap: .5rem; font-size: .8rem; line-height: 1.4; padding: .15rem 0; }
.gm-chat-time       { color: var(--text-dim); font-size: .7rem; white-space: nowrap; }
.gm-chat-from       { font-weight: 600; white-space: nowrap; }
.gm-chat-text       { flex: 1; word-break: break-word; }
.gm-chat-roll       { background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 4px; padding: .1rem .35rem; }
.gm-chat-system     { color: var(--text-dim); font-style: italic; }
.gm-chat-input-row  { display: flex; gap: .5rem; margin-top: .5rem; }
.gm-chat-input      { flex: 1; }
.gm-chat-help       { font-size: .7rem; color: var(--text-dim); margin-top: .3rem; }
.gm-chat-help code  { font-size: .72rem; color: var(--accent-hi); }

/* ── Groupes de combat ─────────────────────────────────────────── */
.gm-combatants-panel { flex: 1; min-height: 0; overflow-y: auto; }
.gm-groups-content   { display: flex; flex-direction: column; }

.group-section { border-bottom: 1px solid var(--border); }
.group-section:last-child { border-bottom: none; }

.group-section-header {
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  padding: .35rem .5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.group-section--collapsed .group-section-header { border-bottom: none; }

.group-collapse-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: .72rem; padding: 0 .15rem; line-height: 1; flex-shrink: 0;
}
.group-collapse-btn:hover { color: var(--text); }

.group-section-name {
  font-weight: 700; font-size: .83rem; flex: 1; min-width: 4rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.group-section-name:hover { text-decoration: underline dotted; }

.group-comb-count {
  background: var(--border); border-radius: 999px; flex-shrink: 0;
  font-size: .67rem; min-width: 1.15rem; text-align: center;
  padding: 0 .3rem; color: var(--text-dim);
}

.group-active-badge {
  font-size: .7rem; padding: .1rem .4rem; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-dim); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.group-active-badge:hover  { border-color: var(--accent); color: var(--accent-hi); }
.group-active-badge--on    { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); color: var(--accent-hi); font-weight: 600; }

.group-rm-btn  { flex-shrink: 0; }
.group-init-list { display: flex; flex-direction: column; }
.group-empty { padding: .45rem .7rem; font-size: .78rem; color: var(--text-dim); font-style: italic; }

.init-input {
  width: 3.5rem; padding: .15rem .3rem; font-size: .75rem;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text); text-align: center;
}

/* Drag & drop highlights */
.combatant-row.drop-over        { outline: 2px dashed var(--accent); outline-offset: -2px; }
.group-section-header.drop-over { background: var(--accent-muted); outline: 2px dashed var(--accent); outline-offset: -2px; }

/* Modale personnages — multi-select */
.modal-results--checkboxes { gap: 0; }
.modal-checkbox-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .42rem .75rem; cursor: pointer;
  border-bottom: 1px solid var(--border); transition: background .1s;
}
.modal-checkbox-row:last-child { border-bottom: none; }
.modal-checkbox-row:hover { background: var(--bg); }
.modal-checkbox-row input[type="checkbox"] { flex-shrink: 0; width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--accent); }
.modal-checkbox-row .modal-result-name { flex: 1; }
.modal-footer {
  display: flex; justify-content: flex-end; padding-top: .5rem;
  border-top: 1px solid var(--border); margin-top: .25rem;
}

/* Modales */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  width: min(480px, 94vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.modal-box-sm { width: min(320px, 94vw); }
.modal-header { display: flex; align-items: center; justify-content: space-between; }
.modal-title  { font-weight: 700; font-size: 1rem; }
.modal-search {
  width: 100%;
  padding: .4rem .6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .9rem;
}
.modal-results      { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; }
.modal-result-row   {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--text);
  transition: border-color .12s;
}
.modal-result-row:hover   { border-color: var(--accent); }
.modal-result-name        { font-weight: 600; font-size: .85rem; }
.modal-result-meta        { font-size: .75rem; color: var(--text-dim); white-space: nowrap; }

.battle-hp-gm-note {
  font-size: .68rem;
  color: var(--text-dim);
  margin-top: .3rem;
  font-style: italic;
}