/* Gyn Replays — Matchups Nunu · esport clean, accent glace */

:root {
  --bg: #0a0e14;
  --panel: #101722;
  --line: #1d2735;
  --text: #e9f0f7;
  --muted: #8593a5;
  --text-soft: #c2cedd; /* texte de lecture secondaire, plus lisible que --muted */
  --accent: #6fd3ff;
  --accent-soft: #a5e3ff;
  --accent-dim: rgba(111, 211, 255, 0.14);
  --chip: #22314a;
  --chip-text: #9db0c4; /* ≥ 4.5:1 sur --chip (AA petits textes) */
  --win: #39d98a;
  --loss: #ff7a7a;
  --ban: #ff5a5a;
  --ban-dim: rgba(255, 90, 90, 0.13);
  --lvl-facile: #39d98a;
  --lvl-moyen: #ffab3d;
  --lvl-dur: #ff5a5a;
  --lvl-tresdur: #8d0f1c;
  --font-display: "Chakra Petch", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-soft); }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.shell { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: 20px; }
/* Une fenêtre de largeur impaire (c'est le cas dès qu'une barre de défilement
   mange 15 px) centre le contenu sur un demi-pixel, et tout ce qui est dedans
   — les icônes de runes en particulier — est redessiné entre deux pixels.
   La marge est donc arrondie au pixel entier : un demi-pixel de décentrage
   que personne ne voit, contre un flou que tout le monde voit. */
@supports (margin-left: round(down, 1px, 1px)) {
  .shell {
    margin-left: round(down, calc((100% - min(1280px, 100%)) / 2), 1px);
    margin-right: auto;
  }
}

/* ---------- Barre ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10, 14, 20, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 6px;
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); min-height: 44px; }
.brand-flake { width: 26px; height: 26px; color: var(--accent); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }

#lang-toggle {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  min-height: 44px;
}
#lang-toggle:hover { color: var(--text); border-color: var(--accent); }
#lang-toggle .on { color: var(--accent); }

.yt-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}
.yt-link svg { width: 18px; height: 18px; color: #ff5a5a; }
.yt-link:hover { border-color: var(--accent); color: var(--text); }

/* Onglets de rôle — signature : biseau glace 8° sous l'onglet actif */

.roles {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.roles::-webkit-scrollbar { display: none; }

.role-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  white-space: nowrap;
  flex: none;
}
.role-tab svg { width: 16px; height: 16px; }
.role-tab .count {
  font-size: 11px;
  color: var(--chip-text);
  background: var(--chip);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}
.role-tab:hover { color: var(--text); }
.role-tab[aria-current="true"] { color: var(--accent); }
.role-tab[aria-current="true"] .count { color: var(--accent); background: var(--accent-dim); }
.role-tab[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  background: var(--accent);
  transform: skewX(-8deg);
}

/* ---------- Sections ---------- */

main { flex: 1; padding-top: 28px; padding-bottom: 48px; }

.section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  /* 13 px × 1,5 = 19,5 px : le demi-pixel se propageait à tout ce qui suit et
     faisait rendre la page de runes entre deux pixels. Interligne entier. */
  line-height: 20px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Derniers replays */

.latest { margin-bottom: 36px; }

.latest-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.latest-row::-webkit-scrollbar { height: 6px; }
.latest-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.latest-row::-webkit-scrollbar-track { background: transparent; }

.latest-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  color: var(--text);
}
.latest-card:hover { border-color: var(--accent); color: var(--text); }
.latest-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.latest-card .latest-meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.latest-card .latest-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Grille des matchups */

.matchups-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.role-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.role-title .vs { color: var(--accent); }

.coverage {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.coverage strong { color: var(--accent); font-weight: 600; }

.search {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 10px 14px;
  min-height: 44px;
  width: 240px;
  font: inherit;
}
.search::placeholder { color: var(--muted); }
.search:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  position: relative;
  min-height: 44px;
}
.tile img, .tile .tile-letter {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
}
.tile .tile-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chip);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--muted);
}
.tile .tile-name {
  font-size: 11.5px;
  color: var(--text);
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile .tile-count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--accent);
  color: #062033;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 5px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}
.tile:hover { border-color: var(--accent); }
.tile.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.tile.off img { filter: grayscale(0.85) brightness(0.55); }
.tile.off .tile-name { color: var(--muted); }
.tile.off:hover { border-color: #2c3a4f; }

/* Ban de rôle : le champion reste lisible (pas de grisé « sans replay »),
   il est rouge et porte sa pastille BAN. */
.tile.ban { border-color: rgba(255, 90, 90, 0.55); background: linear-gradient(180deg, var(--ban-dim), transparent 70%); }
.tile.ban:hover { border-color: var(--ban); }
.tile.ban.selected { border-color: var(--ban); box-shadow: 0 0 0 1px var(--ban); }
.tile.ban.off img { filter: grayscale(0.5) brightness(0.75); }
.tile.ban .tile-name, .tile.ban.off .tile-name { color: var(--ban); font-weight: 600; }
.tile .tile-ban {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--ban);
  color: #1a0508;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 3px 4px;
  border-radius: 3px;
}

.ban-line { color: var(--ban); }
.ban-line::before { content: "·"; color: var(--muted); margin: 0 6px; }

.no-results { color: var(--muted); padding: 24px 0; }

/* Panneau matchup — signature : bord gauche biseauté */

.panel {
  margin-top: 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
/* Biseau borné à la tête du panneau : étiré sur toute la hauteur, le skew
   deviendrait une diagonale qui traverse le contenu dès que la liste grandit. */
.panel::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -8px;
  height: 104px;
  width: 14px;
  background: var(--accent);
  transform: skewX(-8deg);
  pointer-events: none;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-left: 12px;
}
.panel-portrait { width: 72px; height: 72px; border-radius: 8px; flex: none; background: var(--chip); }
.panel-head > div { min-width: 0; }
.panel-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.panel-title .vs { color: var(--accent); }
.panel-sub { color: var(--muted); font-size: 13px; }
.panel-close {
  margin-left: auto;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 44px;
  height: 44px;
  flex: none;
}
.panel-close:hover { color: var(--text); border-color: var(--accent); }

.title-ban {
  display: inline-block;
  vertical-align: middle;
  background: var(--ban);
  color: #1a0508;
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* Vidéos à gauche, grille « à savoir » à droite ; empilé sous 980px. */
.panel-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }

.video-list { display: flex; flex-direction: column; gap: 12px; padding-left: 12px; }

.panel-body.solo { grid-template-columns: 1fr; }
.panel-body.solo .video-list:empty { display: none; }
.panel-body.solo .notes-col { padding-left: 12px; }
.panel-body.solo .notes-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.notes-col { min-width: 0; }
.notes-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.notes-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.note {
  position: relative;
  padding: 12px 0 12px 28px;
  border-bottom: 1px solid var(--line);
}
.note::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 11px;
  color: var(--accent);
  font-weight: 700;
}
.note-text { font-size: 13px; line-height: 1.5; color: var(--chip-text); }
.note-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 0;
  margin-top: 4px;
  padding: 3px 6px;
  border: 1px solid rgba(111, 211, 255, 0.28);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.note-link::before {
  content: "";
  position: absolute;
  inset: -12px -8px;
}
.note-link:hover { border-color: var(--accent); color: var(--accent-soft); }

.video-card {
  display: flex;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  color: var(--text);
}
.video-card:hover { border-color: var(--accent); color: var(--text); }
.video-card img { width: 200px; aspect-ratio: 16 / 9; object-fit: cover; flex: none; }
.video-card .video-meta {
  padding: 12px 14px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.video-card .video-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  background: var(--chip);
  color: var(--chip-text);
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 4px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip.role { color: var(--accent); background: var(--accent-dim); text-transform: uppercase; font-family: var(--font-display); letter-spacing: 0.06em; }
.chip.win { color: var(--win); background: rgba(57, 217, 138, 0.12); }
.chip.loss { color: var(--loss); background: rgba(255, 122, 122, 0.12); }
.chip.date { background: none; padding-left: 0; }

/* Rangs : les 10 paliers, du fer au challenger. La série monte de Gold à
   Master, la couleur doit donc rester lisible à chaque étape du climb —
   teintes claires sur fond sombre, jamais le bleu de l'accent (réservé au
   rôle) sauf pour Challenger, qui porte en plus un liseré. */
.chip.rank { color: var(--rank); background: var(--rank-dim); }
.chip.rank-iron { --rank: #a7aeb8; --rank-dim: rgba(167, 174, 184, 0.14); }
.chip.rank-bronze { --rank: #cd9061; --rank-dim: rgba(205, 144, 97, 0.15); }
.chip.rank-silver { --rank: #c2cedb; --rank-dim: rgba(194, 206, 219, 0.13); }
.chip.rank-gold { --rank: #ffc95c; --rank-dim: rgba(255, 201, 92, 0.14); }
.chip.rank-platinum { --rank: #5fe0d0; --rank-dim: rgba(95, 224, 208, 0.13); }
.chip.rank-emerald { --rank: #4fd97f; --rank-dim: rgba(79, 217, 127, 0.13); }
.chip.rank-diamond { --rank: #8ab8ff; --rank-dim: rgba(138, 184, 255, 0.15); }
.chip.rank-master { --rank: #c98cff; --rank-dim: rgba(201, 140, 255, 0.15); }
.chip.rank-grandmaster { --rank: #ff8f8f; --rank-dim: rgba(255, 143, 143, 0.14); }
.chip.rank-challenger {
  --rank: #ffe6a3;
  --rank-dim: rgba(255, 230, 163, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 163, 0.45);
}

/* ---------- Pied ---------- */

.footer { border-top: 1px solid var(--line); }
/* Les liens sont ajoutés sans texte entre eux : sans conteneur flex qui
   retourne à la ligne, la liste forme une seule ligne insécable et fait
   défiler toute la page horizontalement. */
/* display:flex écrase le display:none du navigateur pour [hidden] : sans cette
   règle, les liens de matchups restent visibles sous la vue runes & build. */
.matchup-links[hidden] { display: none; }
.matchup-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 2px;
  padding-top: 16px;
  font-size: 12px;
  color: var(--muted);
  line-height: 2;
}
.matchup-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  white-space: nowrap;
}
.matchup-links a:hover { color: var(--accent); }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 28px;
  color: var(--muted);
  font-size: 13px;
}
.footer-inner > p { min-width: 0; max-width: 100%; }
.footer-inner > p a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  vertical-align: middle;
}
.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--muted);
  font-size: 13px;
}
.footer-links a:hover { color: var(--accent); }
.subscribe {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 10px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.subscribe:hover { background: var(--accent-dim); }

.noscript { padding: 40px 20px; text-align: center; color: var(--muted); }

/* ---------- Mobile ---------- */

@media (max-width: 720px) {
  .brand-sub { display: none; }
  .yt-link span { display: none; }
  .topbar-row { padding-top: 10px; }
  .matchups-head { align-items: stretch; flex-direction: column; }
  .search { width: 100%; }
  .role-title { font-size: 21px; }
  .latest-row { grid-auto-columns: 240px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
  .tile img, .tile .tile-letter { width: 48px; height: 48px; }
  .video-card { flex-direction: column; }
  .video-card img { width: 100%; }
  .video-card .video-meta { padding: 0 14px 12px; }
  .panel { padding: 16px; }
  .panel-title { font-size: 17px; }
  .panel-portrait { width: 56px; height: 56px; }
}

@media (max-width: 980px) {
  .panel-body { grid-template-columns: 1fr; }
  .notes-col { padding-left: 12px; }
  .notes-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* ---------- Motion ---------- */

.tile, .video-card, .latest-card, .role-tab, .yt-link, #lang-toggle, .subscribe, .panel-close,
.setup-link, .note-link {
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}


/* ---------- Difficulté du matchup ----------
   Facile / Moyen / Difficile / Très dur : affiché en tête du matchup ouvert
   seulement — les tuiles de la grille restent nues. Texte foncé sur aplat
   plein (contraste AA), sauf « Très dur » qui inverse. */
.level-badge {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0a0e14;
  border-radius: 4px;
  display: inline-block;
}
.level-badge {
  font-size: 12.5px;
  line-height: 1;
  padding: 5px 9px;
  margin-right: 10px;
  vertical-align: middle;
}
.lvl-facile { background: var(--lvl-facile); }
.lvl-moyen { background: var(--lvl-moyen); }
.lvl-dur { background: var(--lvl-dur); }
/* Cran au-dessus de « Difficile » : rouge sombre, donc texte clair pour rester lisible. */
.lvl-tresdur { background: var(--lvl-tresdur); color: #ffe3e6; }

/* ---------- Runes & build ----------
   Vue à part, sans rapport avec les rôles : ma page et mon build d'abord, les
   variantes ensuite. La page de runes est dessinée comme en jeu — les runes
   non prises restent visibles mais éteintes, sinon on ne lit pas la forme de
   la page, seulement une liste d'icônes. */

.setup-link {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.setup-link:hover { border-color: var(--accent); color: var(--accent-soft); }
.setup-link[aria-current="true"] { border-color: var(--accent); color: var(--accent); }

.setup-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* 15 px × 1,5 = 22,5 px : sur téléphone l'intro passe à trois lignes et le
   demi-pixel redescend sur la page de runes. Interligne entier, ici aussi. */
.setup-intro { color: var(--muted); max-width: 62ch; margin: 8px 0 28px; line-height: 24px; }
.setup-status { color: var(--muted); padding: 24px 0; }
.build-notice {
  max-width: 64ch;
  margin: 0 0 18px;
  padding: 10px 12px;
  border-left: 2px solid var(--accent);
  background: var(--accent-dim);
  color: var(--text-soft);
  font-size: 14px;
  line-height: 22px;
}
.setup-switcher {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.setup-switcher::-webkit-scrollbar { display: none; }
.setup-tab {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 2px 12px;
  position: relative;
  flex: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.setup-tab:hover { color: var(--text); }
.setup-tab[aria-selected="true"] { color: var(--accent); }
.setup-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: skewX(-12deg);
}
.setup-panel { min-width: 0; }
.setup-block { margin-bottom: 36px; }

/* Conseils généraux : une liste éditoriale, pas une rangée de cartes clonées.
   Ils vivent dans leur onglet, loin de la page de runes. */
.tips-block {
  max-width: none;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.tips-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.tips-head .section-title { margin-bottom: 6px; }
.tips-list {
  list-style: none;
  counter-reset: tips;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(220px, 1fr));
  border-top: 1px solid var(--line);
}
.tips-item {
  counter-increment: tips;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
  padding: 22px 28px 23px 0;
  border-bottom: 1px solid var(--line);
  align-content: start;
}
.tips-item:nth-child(odd) { border-right: 1px solid var(--line); }
.tips-item:nth-child(even) { padding-left: 28px; }
.tips-item:nth-child(1) { grid-column: 1 / 7; grid-row: 1; }
.tips-item:nth-child(2) { grid-column: 7 / -1; grid-row: 1 / span 2; }
.tips-item:nth-child(3) { grid-column: 1 / 7; grid-row: 2; }
.tips-item:nth-child(4) {
  grid-column: 1 / 8;
  grid-row: 3;
  padding-left: 0;
  border-right: 1px solid var(--line);
}
.tips-item:nth-child(5) {
  grid-column: 8 / -1;
  grid-row: 3;
  padding-left: 28px;
  border-right: 0;
}
.tips-item::before {
  content: counter(tips, decimal-leading-zero);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 22px;
  grid-column: 1;
  grid-row: 1 / span 2;
}
.tips-item h3,
.tips-item p,
.tips-item .tips-sublist,
.tips-item .tips-spell-sequence {
  grid-column: 2;
}
.tips-item h3 {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 20px;
  text-transform: uppercase;
}
.tips-item p {
  color: var(--text-soft);
  font-size: 15px;
  line-height: 24px;
  margin-top: 8px;
}
.tips-sublist {
  list-style: none;
  display: grid;
  gap: 18px;
  margin-top: 20px;
}
.tips-sublist li {
  position: relative;
  padding-left: 28px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 24px;
}
.tips-sublist li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.tips-spell-sequence {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tips-spell-row {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.tips-spell-label {
  width: 42px;
  flex: 0 0 42px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 16px;
  text-transform: uppercase;
}
.tips-spell-track {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tips-spell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  background: var(--panel);
}
.tips-spell img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: cover;
}
.tips-spell-key {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 15px;
  padding: 1px 3px;
  color: #f4fbff;
  background: rgba(5, 9, 14, 0.84);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}
.tips-spell-arrow {
  color: var(--accent);
  font-size: 17px;
  line-height: 1;
}
.tips-item:nth-child(6) {
  grid-column: 1 / -1;
  grid-row: 4;
  padding-left: 0;
  border-right: 0;
}
/* Deux colonnes dès que la largeur le permet : une page de runes fait ~520 px,
   étalée sur toute la largeur elle laisse un grand vide à droite. Le min() évite
   qu'une colonne de 520 px force un défilement sur téléphone. */
.setup-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
  gap: 16px;
  align-items: start;
}

.setup-card {
  /* Seule sur sa ligne, une carte étirée sur 1240 px laisse son contenu perdu
     à gauche : elle s'arrête à la largeur qu'une page de runes demande. */
  max-width: 760px;
  /* MA page prend la ligne entière, les variantes se partagent celle du dessous :
     la hiérarchie se voit avant même de lire les titres. */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
/* Même biseau glace que le panneau de matchup, réservé à MA page / MON build :
   c'est la seule chose qui distingue le choix par défaut des variantes. */
.setup-card.is-mine { grid-column: 1 / -1; border-color: rgba(111, 211, 255, 0.35); }
.setup-card.is-mine::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -8px;
  height: 88px;
  width: 14px;
  background: var(--accent);
  transform: skewX(-8deg);
  pointer-events: none;
}
.setup-card.is-mine .setup-card-head,
.setup-card.is-mine .rune-page,
.setup-card.is-mine .build-body { padding-left: 12px; }

/* Une variante ne rivalise pas avec ma page : fond plus sourd et titre plus
   petit, moins clair. La pastille grise de « variante » est gardée telle
   quelle — elle plaît, et elle dit ce qu'est la carte d'un coup d'œil. Les
   runes, elles, gardent leur contraste : c'est ce qu'on vient lire. */
.setup-card:not(.is-mine) { background: rgba(16, 23, 34, 0.55); }
.setup-card:not(.is-mine) .setup-card-title h3 { font-size: 13px; color: var(--muted); }

.setup-card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setup-card-title h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.setup-badge {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--chip-text);
  background: var(--chip);
  border-radius: 4px;
  padding: 3px 8px;
}
.is-mine .setup-badge { color: #0a0e14; background: var(--accent); }
/* Le « pourquoi » porte un ou plusieurs points. Liste alignée sur une seule
   marge, texte plus contrasté que le gris d'étiquette : c'est du texte à lire,
   pas une légende. */
.setup-why {
  list-style: none;
  margin-top: 10px;
  max-width: 64ch;
  display: grid;
  gap: 6px;
}
.setup-why li {
  position: relative;
  padding-left: 16px;
  color: var(--text-soft);
  /* Tailles et interlignes en pixels ENTIERS : une ligne de 23,2 px décale
     toute la page de runes d'un demi-pixel, et le navigateur rééchantillonne
     alors chaque icône — c'est ce qui donnait l'impression de flou. */
  font-size: 15px;
  line-height: 24px;
}
.setup-why li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.75;
}
.why-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 6px;
  padding: 8px 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.why-link:hover { color: var(--accent-soft); }

/* Page de runes */

.rune-page {
  display: flex;
  flex-wrap: wrap;
  /* Écart de colonne serré : à deux cartes par ligne, la page ne dispose que
     de ~480 px et les trois colonnes doivent y tenir sans passer à la ligne. */
  gap: 24px 16px;
  margin-top: 20px;
  align-items: start;
}
/* padding-top réserve la place de la tête, qui est sortie du flux : ainsi la
   largeur de la colonne vient des lignes de runes (nombres entiers) et non
   d'un mot en petites capitales espacées, dont la largeur fractionnaire
   décalait la colonne suivante d'un demi-pixel — donc floue. */
/* min-width entier : la tête est hors du flux, la colonne doit donc réserver
   la place du plus long nom d'arbre (« Sorcellerie », « Inspiration »).
   144 px les couvre tous, en FR comme en EN ; le libellé étant hors du flux,
   les deux ou trois pixels d'un mot plus long débordent dans l'écart. La
   colonne des fragments n'a pas d'icône et se contente de ses lignes. */
.rune-tree { min-width: 144px; display: flex; flex-direction: column; position: relative; padding-top: 44px; }
/* Un filet entre les colonnes : sans lui, trois colonnes de ronds se lisent
   comme une seule grille en désordre. */
.rune-tree + .rune-tree { border-left: 1px solid var(--line); padding-left: 16px; }
.rune-tree + .rune-tree .tree-head { left: 16px; }
.rune-tree.shards { min-width: 116px; }
/* Hauteur fixe : la colonne Fragments n'a pas d'icône d'arbre, sans cela sa
   première ligne remonte de quelques pixels et les trois colonnes décrochent. */
.tree-head {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  height: 32px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Taille réelle de l'icône Data Dragon : à 24 px elle était redessinée. */
.tree-head img { width: 32px; height: 32px; flex: none; }
/* Même hauteur pour toutes les lignes, quelle que soit la taille des icônes
   (44 px pour les runes clefs, 30 px pour les mineures, 26 px pour les
   fragments) : la ligne n de chaque colonne tombe à la même hauteur. */
.rune-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.rune-row.keystones { gap: 10px; }

/* Une rune non prise reste lisible en forme mais s'efface : c'est le contraste
   entre les deux qui dessine la page. */
.rune { display: inline-flex; border-radius: 50%; }
.rune img { border-radius: 50%; opacity: 0.3; filter: grayscale(1) contrast(1.2); }
.rune.on img { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--accent); }
.rune-row.keystones .rune.on img { box-shadow: 0 0 0 2px var(--accent), 0 0 14px var(--accent-dim); }

.rune-unknown {
  display: inline-block;
  font-size: 12px;
  color: var(--chip-text);
  background: var(--chip);
  border-radius: 4px;
  padding: 3px 8px;
  margin-top: 6px;
}

/* Build */

.build-body { margin-top: 16px; display: grid; gap: 16px; }
.build-row h4 {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.item-row { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.item-row.ordered { gap: 12px 22px; }
.item { width: 68px; text-align: center; position: relative; }
.item img { width: 44px; height: 44px; border-radius: 6px; margin: 0 auto; background: var(--chip); }
.item-name { display: block; font-size: 11px; line-height: 16px; color: var(--muted); margin-top: 5px; }
/* Le chevron dit l'ordre d'achat sans numéroter : il se loge dans l'écart. */
.item-row.ordered .item + .item::before {
  content: "\203A";
  position: absolute;
  left: -15px;
  top: 10px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.setup-link .lbl-short { display: none; }

@media (max-width: 720px) {
  .setup-title { font-size: 20px; }
  .setup-card { padding: 16px; }
  .tips-head { display: block; }
  .tips-list { grid-template-columns: 1fr; grid-template-rows: none; }
  .tips-item,
  .tips-item:nth-child(even) {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 14px 0 15px;
    border-right: 0;
  }
  .tips-item:nth-child(2),
  .tips-item:nth-child(3),
  .tips-item:nth-child(4),
  .tips-item:nth-child(5),
  .tips-item:nth-child(6),
  .tips-item:nth-child(1) {
    grid-column: auto;
    grid-row: auto;
    padding-left: 0;
  }
  .tips-item p { font-size: 14px; line-height: 22px; }
  .tips-sublist { gap: 14px; margin-top: 18px; }
  .tips-sublist li { padding-left: 24px; font-size: 14px; line-height: 22px; }
  .tips-spell-sequence { gap: 10px; margin-top: 14px; padding-top: 12px; }
  .tips-spell-row { gap: 10px; }
  .tips-spell-label { width: 34px; flex-basis: 34px; font-size: 10px; }
  .tips-spell-track { gap: 7px; }
  .tips-spell,
  .tips-spell img { width: 38px; height: 38px; }
  .tips-spell { flex-basis: 38px; }
  /* L'arbre principal prend sa propre ligne : ses 4 runes clefs ne tiennent
     pas à côté de l'arbre secondaire sur un téléphone. */
  .rune-page { gap: 18px; }
  .rune-page .rune-tree.primary { flex-basis: 100%; }
  /* Les colonnes passent à la ligne : un filet à gauche ne relierait plus rien. */
  .rune-tree + .rune-tree { border-left: 0; padding-left: 0; }
  .rune-tree + .rune-tree .tree-head { left: 0; }
  .rune-row { gap: 7px; min-height: 40px; }
  .rune-row.keystones { gap: 8px; }
  .setup-why li { font-size: 14px; line-height: 22px; }
  .item-row.ordered { gap: 12px; }
  .item-row.ordered .item + .item::before { left: -10px; }
  .item { width: 60px; }
  .item img { width: 40px; height: 40px; }
  .setup-link { font-size: 11px; padding: 8px 9px; }
  .setup-link .lbl-full { display: none; }
  .setup-link .lbl-short { display: inline; }
  /* Trois boutons dans la barre au lieu de deux : on resserre les écarts et le
     nom de la chaine, sinon la page entiere defile de cote. */
  .topbar-actions { gap: 6px; }
  .brand-name { font-size: 15px; }
}

/* Très petits téléphones (320 px) : le nom de la chaine et les écarts cèdent
   les derniers pixels, sinon la barre pousse la page de côté. */
@media (max-width: 400px) {
  .topbar-row { gap: 8px; }
  .brand { gap: 6px; }
  .brand-flake { width: 22px; height: 22px; }
  .brand-name { font-size: 12px; letter-spacing: 0.05em; }
  .topbar-actions { gap: 4px; }
  .setup-link { font-size: 10px; padding: 8px 4px; }
  #lang-toggle { font-size: 10.5px; padding: 8px 6px; }
  .yt-link { padding: 8px; }
  /* On ne resserre pas le sélecteur de langue : à 320 px, « FR / EN » passe à
     la ligne et le bouton double de hauteur. */
  #lang-toggle { white-space: nowrap; }
}

/* Sous 360 px, le nom de la chaine cede la place : il ne reste que le flocon,
   la barre garde ses trois boutons entiers et la page ne defile plus de cote. */
@media (max-width: 360px) {
  .brand-name { display: none; }
  .brand {
    width: 44px;
    min-width: 44px;
    justify-content: center;
    margin-right: -16px;
  }
}