:root {
  --bg: #0d1117;
  --fg: #e6edf3;
  --muted: #8b949e;
  --line: #21262d;
  --accent: #58a6ff;
  --code-bg: #161b22;
  --import-bg: #161b22;
  --import-border: #58a6ff;
  --place: #f0c674;
  --add-bg: #1a3a2a;
  --adjust-bg: #3a2a1a;
  --xx: #6e7681;
  /* Entrant / sortant d'un échange entre deux listes. Déclarés ici, comme le reste : la
     première version les codait en dur dans les règles, donc hors du thème. */
  --in: #56d364;
  --out: #f0883e;
  background-color: #0d1117;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fafaf7;
    --fg: #1a1a1a;
    --muted: #555;
    --line: #d8d8d2;
    --accent: #1d4ed8;
    --code-bg: #f0f0ea;
    --import-bg: #eef4ff;
    --import-border: #1d4ed8;
    --place: #8a6d00;
    --add-bg: #e6f4ea;
    --adjust-bg: #fef3e6;
    --xx: #888;
    background-color: #fafaf7;
  }
}

* { box-sizing: border-box; }

html { font-size: 16px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

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

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
}

.site-header {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  align-items: baseline; justify-content: space-between;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--line);
}
.site-home { font-weight: 700; color: var(--fg); }
.site-header nav a { margin-right: 0.75rem; }
.site-footer {
  padding: 1rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.85rem;
}

main { padding: 1rem; max-width: 48rem; margin: 0 auto; }

/* Bloc import — traité comme un terminal : surface sombre distincte, police à espacement
   fixe, marqueur de prompt injecté en CSS (jamais dans le HTML, sinon il serait copié
   avec la commande et la casserait). user-select:all pour qu'un clic sélectionne tout. */
.import-block {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--import-bg);
  border: 2px solid var(--import-border);
  border-radius: 0.5rem;
}
.import-title { margin: 0 0 0.25rem; font-size: 1.1rem; }
.import-help { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9rem; }
.import-cmd {
  margin: 0; padding: 0.75rem 1rem;
  background: #000; color: #e6edf3;
  border: 1px solid var(--line); border-radius: 0.25rem;
  white-space: pre-wrap; word-break: break-all;
  user-select: all; font-size: 0.9rem;
  overflow-wrap: break-word;
}
.import-cmd::before { content: "$ "; color: var(--accent); }
.import-cmd code { background: none; padding: 0; color: inherit; }
.import-direct { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }
.import-direct a { color: var(--accent); }

.page-head h1 { margin: 0 0 0.25rem; }
.page-meta { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9rem; }
.page-meta span { margin-right: 0.75rem; }
.t-source { color: var(--muted); font-size: 0.85rem; word-break: break-all; }

.tournament-list, .archetype-list, .format-list { list-style: none; padding: 0; }
.tournament-list li, .archetype-list li, .format-list li {
  border-bottom: 1px solid var(--line);
}
.tournament-list a, .archetype-list a, .format-list a {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem;
  align-items: baseline; padding: 0.5rem 0;
}
.t-name { font-weight: 600; }
.t-date, .t-count, .a-count, .f-count { color: var(--muted); font-size: 0.85rem; }
.a-count, .f-count { margin-left: auto; }
.f-label { font-weight: 600; }
.t-format {
  color: var(--accent); font-size: 0.8rem; font-weight: 600;
  background: var(--code-bg); padding: 0.05rem 0.4rem; border-radius: 0.2rem;
}

/* Decks */
.deck-list { list-style: none; padding: 0; }
.deck { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.deck-details { margin: 0; }
.deck-summary {
  cursor: pointer; display: flex; flex-wrap: wrap;
  gap: 0.25rem 0.75rem; align-items: baseline; padding: 0.25rem 0;
}
.deck-summary::-webkit-details-marker { margin-right: 0.25rem; }
.d-place { font-weight: 700; min-width: 2.5rem; }
.place { font-weight: 700; color: var(--place); }
.d-archetype, .d-player { font-weight: 600; }
.d-leader-id { color: var(--muted); font-size: 0.85rem; font-weight: 400; }
.d-raw { color: var(--xx); font-style: italic; }
.d-provenance { margin: 0.25rem 0; color: var(--muted); font-size: 0.9rem; }
.converg-notice {
  margin: 0.25rem 0; padding: 0.25rem 0.5rem;
  background: var(--code-bg); border-left: 3px solid var(--accent);
  font-size: 0.85rem; color: var(--text);
}
.converg-n { font-weight: 700; color: var(--accent); }
.format-role-label {
  display: inline-block; margin: 0 0 0.25rem;
  font-size: 0.8rem; font-weight: 600; color: var(--accent);
  background: var(--code-bg); padding: 0.05rem 0.5rem; border-radius: 0.2rem;
}
.d-var-tag {
  color: var(--accent); font-size: 0.8rem; font-weight: 600;
  background: var(--code-bg); padding: 0.05rem 0.4rem; border-radius: 0.2rem;
}
.card-list {
  list-style: none; padding: 0; margin: 0.25rem 0;
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem;
}
.card-list li { background: var(--code-bg); padding: 0.1rem 0.4rem; border-radius: 0.2rem; }
.card-list code { background: none; padding: 0; }
.qty { font-weight: 700; color: var(--accent); }
.deck-unparsed { color: var(--muted); }
.deck-import-single { margin-top: 0.5rem; }
.deck-import-single summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }

/* Decklist native — copier-coller verbatim vers le simulateur, sans installation.
   user-select:all pour un geste ; police à espacement fixe ; pas de tri d'affichage. */
.decklist-native { margin-top: 0.5rem; }
.decklist-native summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.decklist {
  margin: 0.25rem 0; padding: 0.5rem 0.75rem;
  background: #000; color: #e6edf3;
  border: 1px solid var(--line); border-radius: 0.25rem;
  white-space: pre-wrap; word-break: break-all;
  user-select: all; font-size: 0.85rem; overflow-wrap: break-word;
}
.decklist code { background: none; padding: 0; color: inherit; }

/* Cœur commun et écarts */
.core-section { margin: 1rem 0; }
.core-cards {
  padding: 0.5rem 0.75rem; background: var(--code-bg);
  border: 1px solid var(--line); border-radius: 0.4rem;
}
.core-cards summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.core-hint { color: var(--muted); font-weight: 400; font-size: 0.8rem; }
.d-var-zero { margin: 0.25rem 0; color: var(--muted); font-size: 0.85rem; font-style: italic; }
.d-add > code { background: var(--add-bg); }
.d-adjust > code { background: var(--adjust-bg); }
.d-core-qty { color: var(--muted); font-size: 0.75rem; margin-left: 0.25rem; }

.meta-group { margin-bottom: 1.5rem; }
.meta-group h3 { border-bottom: 1px solid var(--line); padding-bottom: 0.25rem; }
.deck-list.compact .deck { padding: 0.5rem 0; }

.intro h1 { margin: 0 0 0.25rem; }
.intro p { color: var(--muted); }
.meta-link { background: var(--code-bg); padding: 0.75rem 1rem; border-radius: 0.4rem; }

.formats { margin-bottom: 1rem; }
.format-role { margin-bottom: 0.75rem; }
.format-section { margin-bottom: 2rem; }
.format-section > h2 { border-bottom: 2px solid var(--accent); padding-bottom: 0.25rem; }
.import-compact { padding: 0.5rem 0.75rem; border-width: 1px; }
.import-compact .import-title { display: none; }
.import-compact .import-help { margin: 0 0 0.25rem; font-size: 0.85rem; }
.decks-capped { color: var(--muted); font-size: 0.85rem; margin-top: 0.5rem; }
.page-help { color: var(--muted); font-size: 0.85rem; margin: 0.25rem 0 0; }
.import-relegue { margin-top: 2rem; opacity: 0.85; border-width: 1px; }
.import-relegue .import-title { font-size: 0.95rem; }

/* Page légale : du texte long, donc une mesure de ligne lisible et des sections
   nettement séparées. Le pied de page gagne une ligne fine pour les mentions
   permanentes (non-affiliation, sources) sans écraser le reste. */
.legal { max-width: 42rem; margin-bottom: 2.2rem; }
.legal h2 { margin-top: 1.8rem; }
.legal h3 { margin-top: 1.2rem; font-size: 1rem; }
.legal p, .legal li { line-height: 1.65; }
.legal ul { padding-left: 1.1rem; }
.legal li { margin-bottom: 0.5rem; }
.footer-fine { font-size: 0.82rem; opacity: 0.75; }

/* Groupes de listes quasi-identiques. Un groupe doit se distinguer d'une liste isolée d'un
   coup d'œil, sans crier : une simple barre à gauche suffit. */
.groups-rule { font-size: 0.85rem; opacity: 0.7; margin: 0.2rem 0 0.8rem; max-width: 46rem; }
.deck-group { border-left: 2px solid var(--accent); padding-left: 0.6rem; }
.d-group-tag {
  font-size: 0.78rem; padding: 0.05rem 0.4rem; border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  /* Pas d'interdiction de retour à la ligne ici. Un test de contrat la bannit de TOUTE la
     feuille pour protéger la commande d'import du défilement horizontal — 65 % de la
     commande était cachée en mobile. L'interdiction est plus large que son motif, et elle
     porte même sur les commentaires (le test dépouille les espaces avant de chercher) ;
     mais une puce de deux mots qui revient à la ligne ne coûte rien, et on n'affaiblit pas
     un garde-fou pour de la cosmétique. */
}
.group-members > summary { cursor: pointer; font-size: 0.88rem; opacity: 0.85; }
.member-list { list-style: none; padding-left: 0; margin: 0.4rem 0 0; }
.member {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline;
  padding: 0.25rem 0; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  font-size: 0.9rem;
}
.m-player { font-weight: 600; }
.m-swap { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
/* L'entrant et le sortant doivent se lire sans compter les signes. */
.m-in  { color: var(--in); }
.m-out { color: var(--out); }
.m-same { opacity: 0.6; font-style: italic; }
.m-tournament { font-size: 0.85rem; opacity: 0.8; }
.m-import { font-size: 0.78rem; opacity: 0.75; word-break: break-all; user-select: all; }

/* Distribution du champ sur /meta/. Une barre proportionnelle en CSS pur — la largeur vient
   d'une variable posée par le gabarit, donc aucun script. */
.field-rule { font-size: 0.85rem; opacity: 0.7; max-width: 46rem; margin: 0.2rem 0 0.8rem; }
.field-list { list-style: none; padding-left: 0; margin: 0; }
/* La part est peinte en FOND DE LIGNE, pas dans une colonne dédiée.
   Première version : une quatrième colonne pour la barre. En 375 px, le nom mangeait toute
   la largeur et la barre se réduisait à quelques pixels identiques pour 33 % comme pour 1 % —
   elle ne disait plus rien. En fond, la proportion reste lisible à n'importe quelle largeur,
   et une colonne de moins libère la place du libellé. */
.field-row {
  display: grid; grid-template-columns: 1fr 2.5rem 3rem;
  gap: 0.5rem; align-items: center; padding: 0.25rem 0.4rem; font-size: 0.92rem;
  border-radius: 3px;
  /* Un DÉGRADÉ, pas un pseudo-élément. La version précédente peignait la part dans un
     `::before` absolu en `z-index: -1` : la géométrie était juste (113 px pour 33 %) mais
     le négatif la plaçait DERRIÈRE le fond de la section, donc invisible. Un dégradé à
     arrêt net tient dans une seule propriété, ne crée aucun contexte d'empilement, et rien
     ne peut passer devant. */
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--accent) 20%, transparent) calc(var(--share) * 1%),
    transparent calc(var(--share) * 1%));
}
.field-n { text-align: right; font-variant-numeric: tabular-nums; opacity: 0.8; }
.field-share { text-align: right; font-variant-numeric: tabular-nums; }

/* Index des tournois. Une grille, pour que la date et le nombre de decks s'alignent d'une
   ligne à l'autre — c'est ce qui rend une liste de 134 entrées parcourable à l'œil. */
.tournament-index { list-style: none; padding-left: 0; margin: 0.4rem 0 0; }
.ti-row {
  display: grid; gap: 0.5rem; align-items: baseline; padding: 0.3rem 0;
  grid-template-columns: 1fr 6.5rem 4rem 5rem;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  font-size: 0.92rem;
}
.ti-name { font-weight: 600; }
.ti-date, .ti-n { font-variant-numeric: tabular-nums; opacity: 0.75; }
.ti-circuit { font-size: 0.75rem; opacity: 0.7; text-transform: uppercase; }
.ti-online { color: var(--accent); }
/* En dessous de ~640 px la grille à cinq colonnes se casse : on empile. */
@media (max-width: 640px) {
  .ti-row { grid-template-columns: 1fr auto; }
  .ti-date, .ti-circuit, .ti-n { font-size: 0.8rem; }
}

/* Le geste « un clic sélectionne tout » est porté par `user-select: all`, mais il est
   INVISIBLE : rien dans la page ne l'annonçait, donc personne ne l'essayait. Le curseur en
   cellule de texte et le liseré au survol le rendent découvrable — sans une ligne de script,
   ce que le site s'interdit et que sa page légale affirme publiquement. */
.import-cmd, .decklist { cursor: cell; }
.import-cmd:hover, .decklist:hover,
.import-cmd:focus-within, .decklist:focus-within {
  border-color: var(--accent);
}
.select-hint { opacity: 0.65; font-weight: 400; }

/* « voir tout » : un raccourci vers l'index complet depuis l'extrait de l'accueil. Discret,
   mais présent — c'est le chaînon qui manquait quand la liste de l'accueil était la SEULE. */
.see-all { font-size: 0.82rem; font-weight: 400; margin-left: 0.5rem; }