/* Design system — Dissidia 012 [duodecim] guides
   Nuit violette, or « Holy », Cinzel/Inter. */
:root {
  --bg: #141021;
  --surface: #1d1734;
  --surface-2: #272049;
  --text: #efeaf8;
  --muted: #a89ec6;
  --gold: #f0c05a;
  --violet: #9d86e8;
  --success: #7fd8a6;
  --danger: #ef8896;
  --font-display: "Cinzel", "Times New Roman", Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --radius: 10px;
  --maxw: 1200px;
}

* { box-sizing: border-box; }

/* Toutes les <img> portent des attributs width/height : le navigateur réserve
   ainsi leur place avant le chargement et la page ne se décale plus. Mais dès
   que la largeur est pilotée en CSS, la hauteur doit redevenir « auto », sinon
   l'attribut height s'applique tel quel et déforme l'image (portrait carré rendu
   en 190×256). Les règles qui veulent une hauteur imposée la déclarent
   explicitement — leur spécificité l'emporte sur celle-ci. */
img { height: auto; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; }
h2 { font-size: 1.6rem; color: var(--gold); margin: 2.2rem 0 0.8rem; }
h3 { font-size: 1.15rem; color: var(--violet); margin: 1.4rem 0 0.5rem; }
a { color: var(--violet); }
a:hover { color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.2rem; }

/* ---------- Header global du site ---------- */
.site-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.6rem 0.9rem;
  background: linear-gradient(90deg, var(--surface-2), var(--surface) 55%, transparent);
  border-bottom: 1px solid var(--surface-2);
}
.sh-brand {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
a.sh-brand:hover, a.sh-brand:focus-visible { color: var(--text); }
a.sh-brand:hover .gold { text-shadow: 0 0 14px rgba(240, 192, 90, 0.55); }
.sh-brand .gold { color: var(--gold); }
.sh-brand .sh-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.62em;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 0.5rem;
}
/* --- Menus déroulants (desktop) --- */
.sh-groups { margin-left: auto; display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; }
.sh-group { position: relative; }
.sh-group-label {
  display: inline-block;
  cursor: default;
  white-space: nowrap;
  color: var(--muted);
  border: 1px solid var(--surface-2);
  border-radius: 999px;
  padding: 0.24rem 0.9rem;
  font-size: 0.86rem;
  transition: color 120ms ease, border-color 120ms ease;
}
.sh-group-label::after { content: " ▾"; font-size: 0.72em; opacity: 0.7; }
/* Entrée de menu qui est un lien direct : pas de panneau, donc pas de chevron. */
.sh-group-link { text-decoration: none; cursor: pointer; }
.sh-group-link::after { content: none; }
.sh-group-link:hover, .sh-group-link:focus-visible, .sh-group-link.is-active { color: var(--gold); border-color: var(--gold); }
.sh-group:hover .sh-group-label,
.sh-group:focus-within .sh-group-label,
.sh-group.is-active .sh-group-label { color: var(--gold); border-color: var(--gold); }
.sh-drop {
  /* masqué par opacité (pas par visibility ni display) : les liens restent dans
     l'ordre de tabulation, et :focus-within rouvre le panneau au clavier */
  opacity: 0;
  translate: 0 6px;
  pointer-events: none;
  transition: opacity 130ms ease, translate 130ms ease;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  padding: 0.45rem;
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  z-index: 60;
}
/* Les panneaux restent dans le flux (masqués par opacité) : ceux des derniers
   groupes doivent s'ouvrir vers la gauche, sinon ils poussent la page en
   défilement horizontal quand la barre compte quatre menus. */
.sh-group:nth-last-child(-n + 2) .sh-drop { left: auto; right: 0; }
.sh-group:hover .sh-drop, .sh-group:focus-within .sh-drop {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
.sh-drop a {
  display: block;
  padding: 0.45rem 0.8rem;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}
.sh-drop a:hover, .sh-drop a:focus-visible { background: var(--surface-2); color: var(--gold); }
.sh-drop a[aria-current="page"] { color: var(--gold); }

/* Icône « lien externe » des items de menu pointant hors du site */
.ext-ico {
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.35em;
  opacity: 0.7;
  flex: none;
}
.sh-drop a, .sh-panel a { display: flex; align-items: center; }

/* --- Burger + volet latéral (mobile) --- */
.sh-drawer { display: none; margin-left: auto; }
.sh-drawer summary {
  list-style: none;
  cursor: pointer;
  width: 42px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface-2);
  border-radius: 8px;
}
.sh-drawer summary::-webkit-details-marker { display: none; }
.sh-burger, .sh-burger::before, .sh-burger::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  position: relative;
  transition: transform 150ms ease, background 150ms ease, top 150ms ease;
}
.sh-burger::before { position: absolute; top: -6px; }
.sh-burger::after { position: absolute; top: 6px; }
/* burger -> croix quand le volet est ouvert ; le bouton reste au-dessus du volet */
.sh-drawer[open] summary { position: relative; z-index: 90; border-color: var(--gold); }
.sh-drawer[open] .sh-burger { background: transparent; }
.sh-drawer[open] .sh-burger::before { top: 0; transform: rotate(45deg); }
.sh-drawer[open] .sh-burger::after { top: 0; transform: rotate(-45deg); }
.sh-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(78vw, 300px);
  background: var(--surface);
  border-left: 1px solid var(--surface-2);
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.55);
  padding: 4rem 1.1rem 1.6rem;
  overflow-y: auto;
  z-index: 80;
  animation: drawer-in 180ms ease;
}
@keyframes drawer-in { from { transform: translateX(28px); opacity: 0; } }
.sh-cat {
  margin: 1.1rem 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.sh-panel .sh-cat:first-child { margin-top: 0; }
.sh-panel a {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
}
.sh-panel a:hover, .sh-panel a:focus-visible { background: var(--surface-2); color: var(--gold); }
.sh-panel a[aria-current="page"] { color: var(--gold); }

/* Tablette : tant que la ligne unique ne tient pas, « guides compétitifs » passe
   sous le titre et les menus restent alignés sur la ligne « Dissidia 012 ». */
@media (min-width: 768px) and (max-width: 1319px) {
  .site-header { flex-wrap: nowrap; align-items: flex-start; }
  .sh-brand { white-space: normal; }
  .sh-brand .sh-sub { display: block; margin-left: 0; margin-top: 0.1rem; }
  .sh-groups { margin-top: 0.25rem; justify-content: flex-end; }
}

/* Appareils tactiles (pas de vrai survol) : les menus déroulants au hover sont
   inutilisables au doigt — on sert le volet burger à toutes les largeurs. */
@media (hover: none) and (pointer: coarse) {
  .sh-groups { display: none; }
  .sh-drawer { display: block; }
}

@media (max-width: 767px) {
  .sh-groups { display: none; }
  .sh-drawer { display: block; }
  /* Header collant : il suit le scroll. Hauteur verrouillée par min-height pour
     que la barre de sections (.guide-top) puisse se coller juste en dessous. */
  :root { --mob-header-h: 5.3rem; }
  .site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: var(--mob-header-h);
    /* Fond opaque, sans backdrop-filter : un filtre ferait du header le bloc
       conteneur du volet burger (position: fixed), qui se retrouverait confiné
       dans ses 85px au lieu de couvrir l'écran. */
    background: linear-gradient(90deg, var(--surface-2), var(--surface));
  }
  nav.guide-top { top: var(--mob-header-h); }
  /* marque sur deux lignes (« guides compétitifs » passe dessous), burger aligné
     sur la ligne du titre */
  .site-header { flex-wrap: nowrap; align-items: flex-start; }
  .sh-brand { flex: 1; min-width: 0; white-space: normal; }
  .sh-brand .sh-sub { display: block; margin-left: 0; margin-top: 0.1rem; }
  .sh-drawer summary { margin-top: -0.1rem; }
}

/* Plate de section (« Sélection du personnage ») : en haut à droite, au-dessus
   du portrait. Le dégradé s'éclaircit vers la droite pour accrocher le halo du
   portrait, et la pointe du parallélogramme suit ce nouvel ancrage. */
.vs-right { display: flex; flex-direction: column; min-width: 0; }
.plate-row { display: flex; justify-content: flex-end; padding: 1.2rem 1.6rem 0; }
.plate-row .vs-plate {
  white-space: nowrap;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  padding: 0.32rem 1.6rem;
  color: var(--bg);
  background: linear-gradient(90deg, var(--surface-2) -15%, var(--violet) 45%);
  clip-path: polygon(0 0, 94% 0, 100% 100%, 6% 100%);
}

/* ---------- Landing : écran « Player Select » du mode versus ---------- */
.select-screen { min-height: 100vh; display: flex; flex-direction: column; }
.vs-plate {
  font-family: var(--font-display);
  background: linear-gradient(90deg, var(--violet), var(--surface-2));
  color: var(--bg);
  font-weight: 700;
  padding: 0.15rem 1.3rem;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.vs-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 0;
  align-items: stretch;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}
.vs-left { padding: 1.2rem 1.4rem 0.6rem; min-width: 0; }

/* Panneau d'infos (nom + jeu + tier), mis à jour au survol */
.vs-info { min-height: 6.4rem; margin-bottom: 0.9rem; }
.vs-origin {
  display: inline-block;
  margin: 0;
  color: var(--bg);
  background: var(--gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.1rem 0.7rem;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.vs-name {
  margin: 0.25rem 0 0.15rem;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  color: var(--gold);
  text-shadow: 0 0 24px rgba(240, 192, 90, 0.35);
  line-height: 1.05;
}
.vs-sub { margin: 0; color: var(--muted); font-size: 0.92rem; }
.vs-sub .badge { margin-right: 0.5rem; }
.vs-anim { transition: opacity 160ms ease, transform 160ms ease; }
.vs-anim.switching { opacity: 0; transform: translateY(4px); }

/* Grande illustration à droite (crossfade au survol) */
.vs-portrait {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 70% 30%, rgba(157, 134, 232, 0.14), transparent 65%);
}
.vs-portrait img {
  position: sticky;
  top: 3.2rem;
  margin-top: 1.6rem;
  width: min(100%, 380px);
  height: auto;
  filter: drop-shadow(0 0 34px rgba(157, 134, 232, 0.35));
  transition: opacity 180ms ease, transform 180ms ease;
}
.vs-portrait img.switching { opacity: 0; transform: scale(0.985); }

/* Grille en rangées, comme l'écran du jeu (rangées partielles centrées) */
.char-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.char-row { display: flex; justify-content: center; gap: 7px; }
.char-cell { position: relative; }
.char-cell a {
  display: block;
  width: clamp(52px, 6.4vw, 78px);
  border: 2px solid var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.char-cell img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.char-cell a:hover, .char-cell a:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(240, 192, 90, 0.45);
  transform: scale(1.07);
  z-index: 2;
  outline: none;
}
/* Curseur de sélection : main dorée à gauche de la case, comme en jeu */
.char-cell a::before {
  content: "☞";
  position: absolute;
  left: -1.15em;
  top: 50%;
  translate: 0 -55%;
  color: var(--gold);
  font-size: 1.15rem;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(240, 192, 90, 0.7);
}
.char-cell a:hover::before, .char-cell a:focus-visible::before {
  opacity: 1;
  animation: cursor-nudge 700ms ease-in-out infinite;
}
@keyframes cursor-nudge {
  0%, 100% { margin-left: 0; }
  50% { margin-left: -4px; }
}
.select-extras { text-align: center; padding: 0.9rem 1rem 1.4rem; color: var(--muted); font-size: 0.92rem; }
.select-extras a { margin: 0 0.6rem; }

.tier-badge {
  /* Hors du lien : ancré à la cellule, il reste immobile quand la vignette
     scale au survol (un transform ferait sinon basculer son référent). */
  position: absolute; top: 2px; right: 2px;
  z-index: 3;
  background: rgba(20, 16, 33, 0.85);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  padding: 1px 4px;
  border-radius: 4px;
  pointer-events: none;
}

/* ---------- Guides ---------- */
.guide-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 2rem; max-width: var(--maxw); margin: 0 auto; padding: 0 1.2rem; }
.guide-toc { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; padding: 1.4rem 0; font-size: 0.92rem; }
.guide-toc ol { list-style: none; margin: 0; padding: 0; }
.guide-toc a { display: block; padding: 0.32rem 0.6rem; color: var(--muted); text-decoration: none; border-left: 2px solid var(--surface-2); }
.guide-toc a:hover, .guide-toc a:focus-visible { color: var(--gold); border-left-color: var(--gold); }
.guide-main { min-width: 0; padding-bottom: 4rem; }

.hero {
  display: flex; gap: 1.6rem; align-items: flex-end;
  background: linear-gradient(160deg, var(--surface-2), var(--surface) 65%);
  border-radius: var(--radius);
  padding: 1.6rem;
  margin-top: 1.4rem;
  flex-wrap: wrap;
}
.hero img.portrait { width: 190px; border-radius: 8px; border: 2px solid var(--violet); background: var(--bg); }
.hero .hero-id { min-width: 0; flex: 1; }
.hero .hero-id h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--gold); }
.hero .hero-id .origin { color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; }
.hero .tagline { color: var(--text); font-style: italic; margin: 0.5rem 0 0.8rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.chip {
  background: var(--bg);
  border: 1px solid var(--surface-2);
  color: var(--text);
  border-radius: 999px;
  padding: 0.22rem 0.75rem;
  font-size: 0.82rem;
  white-space: nowrap;
}
.chip b { color: var(--gold); font-weight: 600; }
.chip.ok b { color: var(--success); }
.chip.no b { color: var(--danger); }

.card { background: var(--surface); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 0.9rem 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.card.strengths h3 { color: var(--success); margin-top: 0; }
.card.weaknesses h3 { color: var(--danger); margin-top: 0; }
.card ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.card li { margin: 0.3rem 0; }

table.stats, table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 0.7rem 0;
}
table.stats th, table.stats td, table.data th, table.data td {
  text-align: left;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--surface-2);
  vertical-align: top;
}
/* La largeur ne vaut que pour la colonne des libellés : dans les tableaux à
   variantes (Switch / On Hand / EX Mode…), chaque en-tête de variante est aussi
   un th, et une largeur globale écraserait la dernière colonne. */
table.stats th { color: var(--muted); font-weight: 500; }
table.stats tr > th:first-child { width: 42%; }
table.data th { color: var(--gold); font-family: var(--font-display); font-weight: 600; }
.mono, td.mono { font-family: var(--font-mono); font-size: 0.88em; }
.table-scroll { overflow-x: auto; }

/* Accordéons de coups */
details.move {
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: 8px;
  margin: 0.5rem 0;
}
details.move summary {
  cursor: pointer;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  list-style: none;
}
details.move summary::-webkit-details-marker { display: none; }
details.move summary::before { content: "▸"; color: var(--gold); transition: transform 120ms; }
details.move[open] summary::before { transform: rotate(90deg); }
details.move summary .mv-name { font-family: var(--font-display); font-weight: 600; color: var(--text); }
/* Variante d'un coup : indentée sous son parent, liseré violet */
details.move.variant {
  margin-left: 1.8rem;
  border-left: 3px solid var(--violet);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
details.move.variant summary .mv-name { font-size: 0.94em; color: var(--muted); }
details.move.variant summary::before { color: var(--violet); }
@media (max-width: 599px) {
  details.move.variant { margin-left: 1rem; }
}
details.move summary .mv-meta { color: var(--muted); font-family: var(--font-mono); font-size: 0.8rem; }
details.move .mv-body { padding: 0 1rem 1rem; }
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  border-radius: 4px;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--surface-2);
  color: var(--muted);
}
.badge.prio-melee-low { color: var(--muted); }
.badge.prio-melee-mid { color: var(--violet); border-color: var(--violet); }
.badge.prio-melee-high { color: var(--gold); border-color: var(--gold); }
.badge.prio-ranged { color: var(--success); border-color: var(--success); }
.mv-desc { color: var(--muted); font-style: italic; font-size: 0.9rem; }
.mv-shot {
  float: right;
  width: min(240px, 42%);
  margin: 0 0 0.6rem 0.9rem;
  border-radius: 6px;
  border: 2px solid var(--surface-2);
}
details.move .mv-body::after { content: ""; display: block; clear: both; }
@media (max-width: 599px) {
  .mv-shot { float: none; width: 100%; margin: 0 0 0.7rem; }
}
.mv-note { border-left: 3px solid var(--gold); padding: 0.15rem 0 0.15rem 0.8rem; margin: 0.6rem 0; }

/* ---------- Page d'installation ---------- */
.install-hero {
  background: linear-gradient(160deg, var(--surface-2), var(--surface) 65%);
  border-radius: var(--radius);
  padding: 1.6rem;
  margin-top: 1.4rem;
}
.install-hero h1 { margin: 0.25rem 0 0; font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--gold); }
.install-hero .origin { margin: 0; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; }
.install-hero .tagline { margin: 0.7rem 0 0; max-width: 62ch; }

h2 .plat-sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 0.8rem;
}

.card.step { padding: 1.2rem 1.4rem; }
.step-title { display: flex; align-items: baseline; gap: 0.7rem; margin-top: 0; }
.step-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--bg);
  background: var(--violet);
  border-radius: 999px;
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1.6rem;
  text-align: center;
}
ol.steps { margin: 0.6rem 0 0; padding-left: 1.4rem; }
ol.steps li { margin: 0.5rem 0; padding-left: 0.2rem; }
ol.steps li::marker { color: var(--gold); font-weight: 600; }
ol.steps li strong { color: var(--text); }
.step-notes { margin: 0.8rem 0 0; padding-left: 1.2rem; color: var(--muted); font-size: 0.92rem; }
.step-notes li { margin: 0.3rem 0; }

ul.checklist { list-style: none; margin: 0; padding: 0; }
ul.checklist li { margin: 0.45rem 0; padding-left: 1.7rem; position: relative; }
ul.checklist li::before {
  content: "☐";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1.4;
}

table.data caption {
  caption-side: top;
  text-align: left;
  color: var(--muted);
  font-size: 0.88rem;
  font-style: italic;
  padding-bottom: 0.35rem;
}

.guide-toc ol.toc-sub { padding-left: 0.7rem; }
.guide-toc ol.toc-sub a { font-size: 0.86rem; padding: 0.22rem 0.6rem; }

/* Tableaux empilables : sous 640px, chaque ligne devient une carte lisible
   (la 1re colonne fait titre, les suivantes s'empilent avec leur intitulé). */
@media (max-width: 639px) {
  table.stack-sm, table.stack-sm tbody { display: block; }
  table.stack-sm caption { display: block; width: 100%; }
  table.stack-sm tr:first-child { display: none; }
  table.stack-sm tr {
    display: block;
    background: rgba(20, 16, 33, 0.55);
    border: 1px solid var(--surface-2);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    margin: 0.6rem 0;
  }
  table.stack-sm td { display: block; border: none; padding: 0.12rem 0; }
  table.stack-sm td:first-child { font-weight: 600; color: var(--text); padding-bottom: 0.25rem; }
  table.stack-sm td[data-label]::before {
    content: attr(data-label) " : ";
    color: var(--muted);
    font-weight: 400;
  }
  table.stack-sm td:nth-child(2) { color: var(--gold); }
  table.stack-sm td:nth-child(3) { color: var(--muted); font-size: 0.88rem; }
}

/* Bandeaux */
.banner {
  border: 1px dashed var(--danger);
  background: rgba(239, 136, 150, 0.07);
  color: var(--text);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin: 0.8rem 0;
  font-size: 0.94rem;
}
.banner.info { border-color: var(--violet); background: rgba(157, 134, 232, 0.08); }

/* Diagrammes */
.diagram { background: var(--surface); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
.diagram svg { width: 100%; height: auto; display: block; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.6rem 0; }
.chain .pill {
  background: var(--surface-2);
  border: 1px solid var(--violet);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  font-size: 0.85rem;
  white-space: nowrap;
}
.chain .pill.hp { border-color: var(--gold); color: var(--gold); }
.chain .arrow { color: var(--gold); font-weight: bold; }

/* Diagramme Skillchain : une rangée par chaîne, nom en badge or */
.sc-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--surface-2);
  flex-wrap: wrap;
}
.sc-row:last-of-type { border-bottom: none; }
.sc-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
  min-width: 9.5rem;
  font-size: 0.95rem;
}
.sc-row .chain { margin: 0; flex: 1; min-width: 0; }
@media (max-width: 599px) {
  .sc-name { min-width: 100%; }
}

/* Sources / footer */
.video-link a {
  display: inline-block;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.2rem 0.8rem;
  font-size: 0.88rem;
}
.video-link a:hover, .video-link a:focus-visible { background: rgba(240, 192, 90, 0.12); }
.sources-list { font-size: 0.88rem; color: var(--muted); }
.sources-list li { margin: 0.3rem 0; overflow-wrap: anywhere; }
footer.site {
  border-top: 1px solid var(--surface-2);
  margin-top: 2.5rem;
  padding: 1.8rem 1.2rem 1.4rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
  /* Léger dégradé vers le haut : le pied se détache du contenu sans trait dur. */
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015));
}
footer.site .wrap { max-width: 1080px; }
footer.site a { color: var(--muted); text-decoration-color: var(--surface-2); }
footer.site a:hover, footer.site a:focus-visible { color: var(--gold); text-decoration-color: currentColor; }

/* Une colonne par défaut, trois dès qu'il y a la place. Grille explicite plutôt
   qu'`auto-fit` : ce dernier crée une quatrième piste vide qui consomme un gap
   et décale le bloc vers la gauche. */
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem 2.4rem;
  align-items: start;
}
@media (min-width: 700px) {
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
}
.foot-col p { margin: 0 0 0.45rem; }
.foot-col p:last-child { margin-bottom: 0; }
.foot-h {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
}
/* Mention de fraîcheur : la pastille signale « vivant » sans mot de plus. */
.foot-updated {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
}
.foot-updated-note { font-size: 0.72rem; opacity: 0.75; }
.foot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
  flex: none;
}
.foot-updated time { color: var(--text); }
/* Filet de séparation avant le pavé de licences, aligné sur la grille. */
.foot-bottom {
  margin-top: 1.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--surface-2);
  text-align: center;
}
/* Détail des licences replié par défaut : une ligne discrète, le reste à la demande */
.foot-more { margin-top: 0; }
.foot-more summary {
  cursor: pointer;
  display: inline-block;
  list-style: none;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.75;
  text-decoration: underline dotted;
}
.foot-more summary::-webkit-details-marker { display: none; }
.foot-more[open] summary { opacity: 1; }
.foot-more p { margin: 0.5rem auto 0; max-width: 720px; }

/* Nav haute des guides */
.guide-top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(20, 16, 33, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--surface-2);
  display: none;
}
.guide-top .chips-nav {
  display: flex; gap: 0.5rem; overflow-x: auto;
  padding: 0.55rem 1rem;
  -webkit-overflow-scrolling: touch;
}
.guide-top .chips-nav a {
  white-space: nowrap;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid var(--surface-2);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.82rem;
}
.guide-top .chips-nav a:hover, .guide-top .chips-nav a:focus-visible { color: var(--gold); border-color: var(--gold); }
.backlink { font-size: 0.9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .guide-layout { display: block; }
  .guide-toc { display: none; }
  .guide-top { display: block; }
  .two-col { grid-template-columns: 1fr; }
  .vs-body { grid-template-columns: minmax(0, 1fr) minmax(190px, 260px); }
  .char-row { flex-wrap: wrap; }
}
@media (max-width: 599px) {
  .vs-body { grid-template-columns: 1fr; }
  .vs-portrait { display: none; }
  .vs-right { order: -1; }
  .plate-row { justify-content: flex-start; padding: 1rem 1.2rem 0; }
  .vs-info { min-height: 5.2rem; }
  .char-cell a { width: clamp(56px, 20vw, 72px); }
  .char-cell a::before { display: none; }
  /* Hero mobile : portrait flotté en haut à gauche, nom/tagline à côté,
     chips en dessous sur toute la largeur en rangées équilibrées */
  .hero { display: block; padding: 1.1rem; }
  .hero::after { content: ""; display: block; clear: both; }
  .hero img.portrait { float: left; width: 104px; margin: 0 0.9rem 0.4rem 0; }
  .hero .hero-id h1 { font-size: 1.6rem; }
  .chips { clear: both; padding-top: 0.7rem; gap: 0.45rem; }
  .chip {
    flex: 1 1 auto;
    white-space: normal;
    overflow-wrap: anywhere;
    border-radius: 10px;
    text-align: center;
    padding: 0.3rem 0.7rem;
  }
  .card { padding: 0.9rem 1rem; }
  h2 { font-size: 1.35rem; }
}

/* --- Calendrier des tournois (futurs-tournois.html) --- */
.cal { margin: 1rem 0 2rem; }
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.cal-nav { display: flex; gap: 0.4rem; }
.cal-nav button {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid rgba(157, 134, 232, 0.35);
  border-radius: var(--radius);
  padding: 0.35rem 0.75rem;
  font: inherit;
  cursor: pointer;
}
.cal-nav button:hover { border-color: var(--gold); color: var(--gold); }
.cal-label { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold); margin: 0; text-transform: capitalize; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  background: var(--surface);
  border: 1px solid rgba(157, 134, 232, 0.25);
  border-radius: var(--radius);
  padding: 0.5rem;
}
.cal-head { text-align: center; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem 0; }
.cal-cell { min-height: 4.2rem; background: var(--bg); border-radius: 6px; padding: 0.25rem; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-pad { background: transparent; }
.cal-num { font-size: 0.75rem; color: var(--muted); }
.cal-today { outline: 1px solid var(--gold); }
.cal-today .cal-num { color: var(--gold); font-weight: 700; }
.cal-ev {
  display: block;
  font-size: 0.72rem;
  line-height: 1.25;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-ev-past { background: rgba(157, 134, 232, 0.18); color: var(--violet); border: 1px solid rgba(157, 134, 232, 0.4); }
.cal-ev-up { background: rgba(240, 192, 90, 0.15); color: var(--gold); border: 1px solid rgba(240, 192, 90, 0.5); }
.cal-ev:hover { filter: brightness(1.25); }
.cal-legend { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted); }
.cal-key::before { content: ''; display: inline-block; width: 0.7em; height: 0.7em; border-radius: 3px; margin-right: 0.35em; vertical-align: baseline; }
.cal-key-past::before { background: rgba(157, 134, 232, 0.5); }
.cal-key-up::before { background: rgba(240, 192, 90, 0.6); }
.cal-list { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.cal-list li { padding: 0.3rem 0; border-bottom: 1px solid rgba(157, 134, 232, 0.15); }
.cal-list .cal-ev { display: inline; white-space: normal; background: none; border: none; padding: 0; text-decoration: underline; }
.cal-empty { color: var(--muted); font-style: italic; margin: 0.8rem 0 0; }
@media (max-width: 640px) {
  .cal-cell { min-height: 2.6rem; padding: 0.15rem; }
  .cal-ev { font-size: 0; padding: 0; width: 0.55rem; height: 0.55rem; border-radius: 50%; }
  .cal-num { font-size: 0.68rem; }
}

/* ---------- Créateur de builds ---------- */
.bc-main { padding-bottom: 3rem; }

/* Bandeau des 31 personnages : défilement horizontal en petit écran */
.bc-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.5rem;
}
.bc-char {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.2rem;
  background: var(--bg);
  border: 1px solid rgba(157, 134, 232, 0.25);
  border-radius: var(--radius);
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.bc-char img { border-radius: 6px; display: block; width: 56px; height: 56px; aspect-ratio: 1; object-fit: cover; }
.bc-char-fallback { width: 56px; height: 56px; border-radius: 6px; background: var(--surface-2); display: block; }
.bc-char-name { text-align: center; line-height: 1.2; }
.bc-char:hover { border-color: var(--violet); color: var(--text); transform: translateY(-2px); }
.bc-char[aria-checked="true"] { border-color: var(--gold); color: var(--gold); background: var(--surface-2); }

/* Jauge de CP : couleurs du jeu — vert pomme les attaques, bleu ciel les abilities */
.bc-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  /* Fond opaque : un dégradé vers le transparent laissait le contenu des onglets
     transparaître sous le panneau d'état quand la page défilait. */
  background: var(--surface);
  padding: 0.6rem 0 0.5rem;
  margin: 0.6rem 0 1rem;
  border-bottom: 1px solid rgba(157, 134, 232, 0.2);
}
.bc-gauge {
  display: flex;
  height: 1.1rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid rgba(157, 134, 232, 0.35);
  overflow: hidden;
}
.bc-gauge-fill { display: block; height: 100%; transition: width 0.18s ease; }
.bc-gauge-attacks { background: #86d94b; }
.bc-gauge-abilities { background: #66c6f0; }
.bc-gauge-wrap.is-over .bc-gauge { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(239, 136, 150, 0.35); }
.bc-gauge-wrap.is-over .bc-gauge-attacks { background: #ef8896; }
.bc-gauge-wrap.is-over .bc-gauge-abilities { background: #c4566a; }
.bc-gauge-text { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: baseline; }
.bc-gauge-text strong { color: var(--text); font-size: 1.05rem; }
.bc-legend { display: inline-flex; align-items: center; gap: 0.3rem; }
.bc-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; }
.bc-dot-attacks { background: #86d94b; }
.bc-dot-abilities { background: #66c6f0; }

.bc-status { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
.bc-stat-line { margin: 0; display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.85rem; }
.bc-stat strong { color: var(--gold); font-weight: 600; margin-right: 0.2rem; }
.bc-alert { margin: 0; font-size: 0.83rem; padding: 0.35rem 0.6rem; border-radius: 6px; border-left: 3px solid; }
.bc-alert-error { background: rgba(239, 136, 150, 0.12); border-color: var(--danger); color: #ffc9d1; }
.bc-alert-info { background: rgba(157, 134, 232, 0.12); border-color: var(--violet); color: var(--text); }
.bc-alert-muted { background: transparent; border-color: rgba(157, 134, 232, 0.3); color: var(--muted); }

/* Modificateurs détaillés — dépliant du panneau collant. Le corps est borné en
   hauteur et défile pour lui-même : ouvert sur un build chargé, il couvrirait
   sinon la totalité de l'écran et masquerait les onglets qu'on est en train de
   remplir. */
.bc-detail { margin-top: 0.5rem; font-size: 0.83rem; }
.bc-detail summary {
  cursor: pointer;
  color: var(--muted);
  padding: 0.15rem 0;
  list-style: none;
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}
.bc-detail summary::-webkit-details-marker { display: none; }
.bc-detail summary::before { content: "▸"; color: var(--gold); transition: transform 120ms; }
.bc-detail[open] summary::before { transform: rotate(90deg); }
.bc-detail summary:hover { color: var(--text); }
.bc-detail-count { color: var(--gold); font-family: var(--font-mono); font-size: 0.78rem; }
/* Deux colonnes : les modificateurs à gauche, les boosters à droite. Chacune
   défile pour elle-même — la hauteur est bornée pour que le panneau collant ne
   recouvre pas les onglets qu'on est en train de remplir. */
.bc-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 19rem);
  gap: 0.4rem 1.2rem;
  align-items: start;
  padding: 0.2rem 0.1rem 0.1rem;
}
.bc-detail-main, .bc-detail-boosters { max-height: 40vh; overflow-y: auto; }
.bc-detail-group {
  margin: 0.7rem 0 0.3rem;
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bc-detail-group:first-child { margin-top: 0.2rem; }
.bc-detail-note { margin: 0.2rem 0; color: var(--muted); font-size: 0.78rem; }
/* Deux colonnes : le libellé garde une largeur fixe pour que les valeurs
   s'alignent, la seconde colonne porte la valeur puis son détail. */
.bc-detail-list { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 0.15rem 0.7rem; margin: 0; }
.bc-detail-list dt { color: var(--text); }
.bc-detail-list dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.bc-detail-value { font-family: var(--font-mono); color: var(--gold); font-weight: 600; }
.bc-detail-from { color: var(--muted); font-size: 0.76rem; }
.bc-detail-others { margin: 0.2rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.bc-detail-others li { margin-bottom: 0.15rem; }
.bc-detail-others strong { color: var(--text); font-weight: 600; }

/* Boosters : une case par booster équipé, sa condition de combat en dessous. */
.bc-detail-boosters {
  border-left: 1px solid rgba(157, 134, 232, 0.25);
  padding-left: 1rem;
}
.bc-booster {
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
  padding: 0.25rem 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(157, 134, 232, 0.12);
}
.bc-booster:hover { color: var(--text); }
.bc-booster input { accent-color: var(--gold); flex: none; }
.bc-booster-text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.bc-booster-name { display: flex; gap: 0.4rem; align-items: baseline; justify-content: space-between; }
.bc-booster-mult { font-family: var(--font-mono); color: var(--gold); flex: none; }
.bc-booster-req { color: var(--muted); font-size: 0.76rem; }
/* Une case décochée reste lisible, mais visiblement hors du compte. */
.bc-booster:has(input:not(:checked)) .bc-booster-name span { color: var(--muted); text-decoration: line-through; }
.bc-booster:has(input:not(:checked)) .bc-booster-mult { text-decoration: line-through; }
.bc-booster-total {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(157, 134, 232, 0.3);
  font-weight: 600;
}
.bc-booster-total-value { font-family: var(--font-mono); color: var(--gold); font-size: 1.05em; }
@media (max-width: 1023px) {
  /* Sous 1024 px, la colonne des boosters passe sous les modificateurs : à deux
     colonnes, ni l'une ni l'autre n'a la place de tenir sa ligne. */
  .bc-detail-body { grid-template-columns: 1fr; max-height: 45vh; overflow-y: auto; }
  .bc-detail-main, .bc-detail-boosters { max-height: none; overflow-y: visible; }
  .bc-detail-boosters {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(157, 134, 232, 0.25);
    padding-top: 0.4rem;
    margin-top: 0.4rem;
  }
}
@media (max-width: 599px) {
  /* Une seule colonne : à 14 rem de libellé, la valeur se retrouvait écrasée. */
  .bc-detail-list { grid-template-columns: 1fr; gap: 0 0; }
  .bc-detail-list dd { margin-bottom: 0.3rem; }
  /* Le panneau collant occupait 87 % d'un écran de téléphone une fois déplié :
     il ne doit pas chasser de l'écran l'onglet qu'on est en train de remplir. */
  .bc-detail-body { max-height: 32vh; }
}

/* Fenêtre de choix — ouverte depuis un emplacement à remplir. */
body.bc-modal-open { overflow: hidden; }
.bc-modal-back {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8, 6, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.bc-modal {
  background: var(--surface);
  border: 1px solid rgba(157, 134, 232, 0.4);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  width: min(46rem, 100%);
  max-height: min(38rem, 90vh);
  display: flex;
  flex-direction: column;
}
.bc-modal-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.9rem 1rem 0.6rem;
  border-bottom: 1px solid rgba(157, 134, 232, 0.25);
}
.bc-modal-head h3 { margin: 0; color: var(--gold); font-size: 1.05rem; }
.bc-modal-titles { min-width: 0; }
.bc-modal-titles .bc-note { margin: 0.2rem 0 0; }
/* Le corps ne défile pas lui-même : c'est la liste qu'il contient qui défile,
   pour que la barre de recherche reste visible pendant qu'on parcourt. */
.bc-modal-body { display: flex; flex-direction: column; min-height: 0; padding: 0.7rem 1rem 1rem; }
/* Seule l'enveloppe du sélecteur devient une colonne. Viser tous les enfants
   attrapait aussi la barre de filtres, dont le champ de recherche — étiré en
   hauteur par le `flex: 1` prévu pour l'étirer en largeur — occupait alors la
   moitié de la fenêtre. */
.bc-modal-body > .bc-chooser { display: flex; flex-direction: column; min-height: 0; gap: 0.5rem; flex: 1; }
.bc-modal-body .bc-list-scroll { max-height: none; flex: 1; overflow-y: auto; }

/* Emplacements — attaques, équipements, accessoires partagent la même ligne. */
.bc-slot-grid { display: flex; flex-direction: column; gap: 0.35rem; }
.bc-slot-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(157, 134, 232, 0.25);
  border-radius: 8px;
  background: rgba(157, 134, 232, 0.06);
  color: var(--text);
  font: inherit;
}
button.bc-slot-row { cursor: pointer; }
button.bc-slot-row:hover, button.bc-slot-row:focus-visible { border-color: var(--gold); background: rgba(212, 175, 90, 0.1); }
.bc-slot-row.is-empty { background: transparent; border-style: dashed; }
/* La commande, en tête de ligne : c'est elle qui identifie l'emplacement. */
.bc-slot-badge {
  flex: none;
  min-width: 3.4rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--gold);
  text-align: center;
  white-space: nowrap;
}
.bc-badge-branch { color: var(--violet); font-size: 0.85rem; }
.bc-slot-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.bc-slot-empty { color: var(--muted); font-style: italic; }
.bc-slot-plus { color: var(--gold); font-size: 1.2rem; line-height: 1; flex: none; }
.bc-slot-actions { display: flex; align-items: center; gap: 0.35rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }

/* Poignée de déplacement. `touch-action: none` est indispensable : sans elle,
   le doigt fait défiler la page au lieu de déplacer la ligne. */
.bc-drag-handle {
  flex: none;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0.2rem 0.15rem;
  cursor: grab;
  touch-action: none;
  border-radius: 4px;
}
.bc-drag-handle:hover, .bc-drag-handle:focus-visible { color: var(--gold); }
.bc-slot-row.is-dragging { opacity: 0.5; cursor: grabbing; }
.bc-slot-row.is-dragging .bc-drag-handle { cursor: grabbing; }
/* La cible se signale par un liseré or : déplacer une ligne ne réordonne rien
   avant le relâchement, il faut donc montrer où elle atterrira. */
.bc-slot-row.is-drop-target { border-color: var(--gold); background: rgba(212, 175, 90, 0.14); }
body.bc-dragging { user-select: none; cursor: grabbing; }

/* Embranchement HP : décalé sous la bravery qu'il prolonge, comme à l'écran
   du jeu. Le trait de liaison rend la dépendance lisible sans texte. */
.bc-branch-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: 1.6rem;
  padding: 0.35rem 0.7rem;
  border-left: 2px solid rgba(157, 134, 232, 0.4);
  border-radius: 0 8px 8px 0;
  background: rgba(157, 134, 232, 0.04);
}
.bc-branch-add {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  padding: 0.15rem 0;
  text-align: left;
}
.bc-branch-add:hover, .bc-branch-add:focus-visible { color: var(--text); }
.bc-slot-followup .bc-slot-badge { color: var(--violet); }
.bc-group.is-locked { opacity: 0.6; }

@media (max-width: 599px) {
  .bc-modal-back { padding: 0; }
  .bc-modal { max-height: 100vh; height: 100%; width: 100%; border-radius: 0; border: none; }
  /* Les actions passent sous le nom : à 375 px, nom et boutons sur une seule
     ligne réduisaient le nom à deux mots. */
  .bc-slot-row { flex-wrap: wrap; }
  .bc-slot-main { flex-basis: calc(100% - 4.1rem); }
  .bc-slot-actions { width: 100%; justify-content: flex-start; }
  .bc-branch-row { margin-left: 0.8rem; flex-wrap: wrap; }
}

/* Onglets */
.bc-tablist { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 1px solid rgba(157, 134, 232, 0.25); margin-bottom: 1rem; }
.bc-tab {
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 0.5rem 0.9rem;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.bc-tab:hover { color: var(--text); }
.bc-tab[aria-selected="true"] { color: var(--gold); border-color: rgba(157, 134, 232, 0.35); background: var(--surface-2); }
.bc-panel:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* Listes d'items */
.bc-group { border: 1px solid rgba(157, 134, 232, 0.2); border-radius: var(--radius); padding: 0.6rem 0.8rem 0.8rem; margin: 0 0 1rem; }
.bc-group legend { color: var(--violet); font-weight: 600; padding: 0 0.4rem; }
.bc-list { display: flex; flex-direction: column; gap: 0.25rem; }
.bc-list-scroll { max-height: 26rem; overflow-y: auto; padding-right: 0.3rem; }
.bc-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  background: var(--bg);
  border: 1px solid rgba(157, 134, 232, 0.18);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font: inherit;
}
.bc-row:hover { border-color: var(--violet); }
.bc-row.is-disabled { opacity: 0.42; cursor: not-allowed; }
.bc-row.is-disabled:hover { border-color: rgba(157, 134, 232, 0.18); }

/* Compteur d'emplacements dans la légende du groupe */
.bc-slots { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.bc-slots.is-full { color: var(--gold); }
.bc-group.is-full > legend { color: var(--gold); }

/* Embranchement d'un coup (enchaînement, HP link) : replié par défaut, indenté */
.bc-branch, .bc-followups {
  margin: 0.15rem 0 0.3rem 1.6rem;
  border-left: 2px solid rgba(157, 134, 232, 0.35);
  padding-left: 0.6rem;
}
.bc-branch > summary, .bc-followups > summary {
  font-size: 0.78rem;
  color: var(--violet);
  cursor: pointer;
  padding: 0.15rem 0;
  list-style: none;
}
.bc-branch > summary::before, .bc-followups > summary::before { content: "↳ "; opacity: 0.8; }
.bc-branch > summary::-webkit-details-marker, .bc-followups > summary::-webkit-details-marker { display: none; }
.bc-branch > summary:hover, .bc-followups > summary:hover { color: var(--gold); }
.bc-branch .bc-list, .bc-followups .bc-list { margin-top: 0.2rem; }
/* Embranchement verrouille tant que l attaque de depart n est pas equipee */
.bc-branch.is-locked { border-left-color: rgba(157, 134, 232, 0.15); }
.bc-branch.is-locked > summary { color: var(--muted); font-style: italic; }
.bc-followups { margin-left: 0; margin-bottom: 1rem; }
.bc-row-btn.is-selected { border-color: var(--gold); background: var(--surface-2); }
.bc-row-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.bc-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bc-row-name { font-weight: 500; }
.bc-row-meta { font-size: 0.78rem; color: var(--muted); }
.bc-cp { font-family: var(--font-mono); font-size: 0.8rem; color: var(--gold); white-space: nowrap; }
.bc-count { margin: 0 0 0.3rem; font-size: 0.78rem; color: var(--muted); }
.bc-note { font-size: 0.82rem; color: var(--muted); margin: 0 0 0.6rem; }

.bc-tag { font-size: 0.68rem; padding: 0.1rem 0.4rem; border-radius: 999px; white-space: nowrap; border: 1px solid; }
.bc-tag-info { color: var(--violet); border-color: rgba(157, 134, 232, 0.5); }
.bc-tag-warn { color: var(--gold); border-color: rgba(240, 192, 90, 0.5); }
.bc-tag-illegal { color: var(--danger); border-color: rgba(239, 136, 150, 0.6); }
.bc-tag-glitch { color: #7fd8a6; border-color: rgba(127, 216, 166, 0.6); }
.bc-tag-excl { color: var(--danger); border-color: rgba(239, 136, 150, 0.5); }
.bc-tag-mult { color: #66c6f0; border-color: rgba(102, 198, 240, 0.6); font-family: var(--font-mono); }

/* Filtres, emplacements, actions */
.bc-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.bc-filters input, .bc-filters select, .bc-editor input[type="text"], .bc-main textarea {
  background: var(--bg);
  border: 1px solid rgba(157, 134, 232, 0.3);
  border-radius: 7px;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.55rem;
}
.bc-filters input[type="search"] { flex: 1 1 12rem; min-width: 0; }
.bc-main textarea { width: 100%; resize: vertical; }
.bc-slot { margin-bottom: 1.6rem; }
.bc-current { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.85rem; margin: 0 0 0.5rem; }
.bc-acc-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.35rem; margin-bottom: 1.2rem; }
.bc-acc-slot { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; background: var(--bg); border: 1px solid rgba(157, 134, 232, 0.18); border-radius: 8px; }
.bc-acc-slot.is-empty { border-style: dashed; color: var(--muted); }
.bc-acc-index { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); min-width: 1.2rem; }

.bc-editor-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; }
.bc-build-meta { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; }
.bc-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); }
.bc-field-inline { flex-direction: row; align-items: center; gap: 0.4rem; }
.bc-illegal-toggle { margin-bottom: 0.8rem; }

.bc-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.bc-btn {
  background: var(--surface-2);
  border: 1px solid rgba(157, 134, 232, 0.35);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}
.bc-btn:hover { border-color: var(--gold); color: var(--gold); }
.bc-btn-primary { background: var(--gold); color: #241b06; border-color: var(--gold); font-weight: 600; }
.bc-btn-primary:hover { filter: brightness(1.1); color: #241b06; }
.bc-btn-small { font-size: 0.75rem; padding: 0.2rem 0.55rem; }
/* Bascule du sens de tri : carrée, alignée sur la hauteur des champs de filtre,
   et assez grande pour le doigt (44 px de cible tactile). */
.bc-sort-dir {
  min-width: 2.2rem;
  min-height: 2.2rem;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.2rem 0.5rem;
}
.bc-sort-dir[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
@media (hover: none) and (pointer: coarse) {
  .bc-sort-dir { min-width: 44px; min-height: 44px; }
}
.bc-btn-danger:hover { border-color: var(--danger); color: var(--danger); }
.bc-btn-file { display: inline-flex; align-items: center; }
.bc-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; background: var(--bg); border: 1px solid rgba(157, 134, 232, 0.18); border-radius: 8px; margin-bottom: 0.3rem; }
.bc-saved-list { margin-bottom: 1rem; }
.bc-notes-label { margin: 0 0 0.3rem; font-size: 0.8rem; color: var(--muted); }

.bc-toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  /* La seule translation ne suffisait pas à sortir le bandeau de l'écran : sa
     bordure restait visible en bas. On le rend franchement invisible et
     inatteignable au repos, la translation ne servant plus qu'à l'animation. */
  transform: translateX(-50%) translateY(120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--violet);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem 0.6rem 1rem;
  font-size: 0.85rem;
  max-width: min(90vw, 34rem);
  z-index: 50;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
}
.bc-toast-text { flex: 1; }
.bc-toast-close {
  flex: none;
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
}
.bc-toast-close:hover { color: var(--gold); }
/* Les URLs de sources sont longues et insécables : sans cette règle elles
   poussent la page en défilement horizontal sur mobile. */
.bc-main .sources-list a { overflow-wrap: anywhere; }

.bc-toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s;
}
.bc-toast.is-error { border-color: var(--danger); color: #ffc9d1; }

@media (max-width: 1023px) {
  .bc-list-scroll { max-height: 22rem; }
}
@media (max-width: 767px) {
  /* Sous 768px le header du site devient collant : la jauge se cale dessous,
     comme la barre de sections des guides. */
  .bc-sticky { top: var(--mob-header-h); }
}
@media (max-width: 599px) {
  /* Bandeau de personnages sur deux rangées qui défilent horizontalement :
     à une seule rangée, retrouver un personnage demandait trop de défilement. */
  .bc-roster {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 5.2rem;
    overflow-x: auto;
    gap: 0.4rem;
    padding-bottom: 0.4rem;
    scroll-snap-type: x proximity;
  }
  .bc-char { scroll-snap-align: start; }
  .bc-tablist { flex-wrap: nowrap; overflow-x: auto; }
  .bc-tab { white-space: nowrap; padding: 0.45rem 0.7rem; font-size: 0.85rem; }
  .bc-acc-slots { grid-template-columns: 1fr; }
  .bc-editor-head { flex-direction: column; align-items: stretch; }
  .bc-row { flex-wrap: wrap; }
}

/* --- Internationalisation : sélecteur de langue et bandeau de proposition --- */

/* Texte réservé aux lecteurs d'écran : le sélecteur affiche « EN » / « FR »,
   trop court pour être compris hors contexte visuel — le nom complet de la
   langue l'accompagne donc, visible pour les seules technologies d'assistance. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Zone d'outils du header, à droite des menus. La barre de recherche viendra s'y
   ajouter après le sélecteur : la place est réservée dès maintenant pour ne pas
   avoir à remanier le header une seconde fois. */
.sh-tools { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.6rem; }

.lang-switch { display: flex; align-items: center; gap: 0.15rem; }
.lang-opt {
  display: inline-block;
  padding: 0.24rem 0.5rem;
  border: 1px solid var(--surface-2);
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease;
}
.lang-opt:hover, .lang-opt:focus-visible { color: var(--gold); border-color: var(--gold); }
/* La langue courante n'est pas un lien vers elle-même : c'est un repère. */
.lang-opt.is-current { color: var(--gold); border-color: var(--gold); background: rgba(240, 192, 90, 0.1); cursor: default; }

/* Dans le volet mobile, le sélecteur reprend la mise en page des catégories.
   Il ouvre le volet : le filet le sépare donc du menu qui le suit, en dessous. */
.lang-switch-drawer { margin-bottom: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--surface-2); gap: 0.35rem; }
/* Cible tactile d'au moins 44 px de haut : au doigt, la pastille du header
   (dimensionnée pour la souris) serait trop basse. */
.lang-switch-drawer .lang-opt { padding: 0.55rem 0.9rem; font-size: 0.95rem; min-height: 44px; display: inline-flex; align-items: center; }

/* Bandeau de proposition linguistique. Inséré en tête de page par
   scripts/lang.js quand le navigateur réclame une langue publiée qui n'est pas
   celle de la page. Discret et fermable : il ne redirige rien, il propose. */
.lang-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  padding: 0.55rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--violet);
  font-size: 0.9rem;
  color: var(--text);
}
.lang-bar-go { color: var(--gold); font-weight: 600; }
.lang-bar-close {
  background: none;
  border: 1px solid var(--surface-2);
  border-radius: 999px;
  color: var(--muted);
  padding: 0.15rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.lang-bar-close:hover, .lang-bar-close:focus-visible { color: var(--text); border-color: var(--muted); }

/* Le sélecteur du header suit le sort des menus déroulants : sur mobile et sur
   les appareils tactiles, c'est celui du volet burger qui prend le relais. */
@media (hover: none) and (pointer: coarse) {
  .sh-tools { display: none; }
}
@media (max-width: 767px) {
  .sh-tools { display: none; }
  .lang-bar { font-size: 0.85rem; padding: 0.5rem 0.75rem; }
}