/* ==================================================================
   Duel Ligue — theme "arcane"

   Nuit d'encre violacee, or de chandelle.

   Deux principes :
   1. Le fond est presque noir et neutre, les surfaces sont opaques et
      clairement etagees. Une couleur mise partout ne signale plus rien.
   2. L'or est chaud, le fond est froid. C'est ce contraste de
      temperature, plus que la luminosite, qui fait ressortir les
      chiffres et le podium.
   ================================================================== */

:root {
  /* Etagement des surfaces, du plus sombre au plus clair */
  --bg:          #08070e;
  --surface-0:   #0b0a12;
  --surface-1:   #100e1a;
  --surface-2:   #171425;
  --surface-3:   #211c33;

  --line:        #2f2845;
  --line-soft:   #1f1a2e;

  --text:        #ece7f5;
  --text-dim:    #bcb3ce;
  --muted:       #a69cba;

  /* L'or : reserve a la cote, au podium, aux liens et au champ actif */
  --accent:      #e0b45f;
  --accent-soft: #f2d391;
  --accent-dim:  #8a6a2c;
  --accent-glow: rgba(224, 180, 95, .22);

  /* Le violet : uniquement decoratif (brume, particules) */
  --arcane:      #a488e0;

  --win:         #5cc98f;
  --draw:        #a0a8bd;
  --loss:        #e2717f;

  --radius:      12px;
  --shadow:      0 10px 30px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------- fond */

/* Deux couches distinctes :
   - la brume (CSS) donne la profondeur, elle bouge a peine ;
   - les particules (canvas) donnent la vie, elles sont minuscules.
   Les durees des voiles n'ont pas de multiple commun, le fond ne repasse
   donc jamais par la meme configuration. */
.mist {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.mist span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.mist-a {
  width: 80vw; height: 80vw;
  left: -24vw; top: -28vw;
  background: radial-gradient(circle, rgba(125, 92, 192, .13), transparent 66%);
  animation: derive-a 71s ease-in-out infinite alternate;
}
.mist-b {
  width: 68vw; height: 68vw;
  right: -22vw; top: 4vh;
  background: radial-gradient(circle, rgba(74, 58, 158, .11), transparent 68%);
  animation: derive-b 97s ease-in-out infinite alternate;
}
/* Lueur chaude en bas : rappel de la chandelle, tres faible */
.mist-c {
  width: 94vw; height: 64vw;
  left: 6vw; bottom: -30vw;
  background: radial-gradient(circle, rgba(150, 104, 46, .09), transparent 70%);
  animation: derive-c 127s ease-in-out infinite alternate;
}
@keyframes derive-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(13vw, 8vh, 0) scale(1.2); }
}
@keyframes derive-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-11vw, 15vh, 0) scale(.92); }
}
@keyframes derive-c {
  from { transform: translate3d(0, 0, 0) scale(.95); }
  to   { transform: translate3d(-15vw, -9vh, 0) scale(1.14); }
}

/* Le contenu passe systematiquement au-dessus du fond */
.site-header, main, .site-footer { position: relative; z-index: 1; }

.wrap { width: min(1080px, 92vw); margin-inline: auto; }

a { color: var(--accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-soft); text-decoration: underline; }

h1, h3 { font-weight: 600; letter-spacing: .01em; line-height: 1.25; }
h1 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.45rem); margin: 0 0 .25em; }
h2 {
  margin: 2.4rem 0 .9rem;
  color: var(--text-dim);
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
}
.lede { color: var(--muted); margin-top: 0; }

/* ---------------------------------------------------------------- header */

.site-header {
  background: var(--surface-0);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.site-header::after {
  /* Fin liseré doré : marque la limite sans ajouter d'aplat */
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-dim) 35%, var(--accent-dim) 65%, transparent);
  opacity: .55;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: .85rem 0;
}

.brand { display: flex; align-items: center; gap: .75rem; color: var(--text); }
.brand:hover { text-decoration: none; color: var(--text); }
.brand strong { display: block; font-size: 1.12rem; letter-spacing: .05em; }
.brand small {
  display: block; color: var(--muted); font-size: .72rem;
  letter-spacing: .13em; text-transform: uppercase;
}
.brand-mark {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  color: var(--accent);
  background: var(--surface-2);
  border: 1px solid var(--accent-dim);
  box-shadow: 0 0 0 4px rgba(224, 180, 95, .05), 0 0 14px rgba(224, 180, 95, .1);
}

.site-header nav { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.site-header nav a, .link-button {
  padding: .4rem .85rem; border-radius: 7px; font-size: .9rem;
  color: var(--muted); border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.site-header nav a:hover, .link-button:hover {
  color: var(--text); background: var(--surface-2); text-decoration: none;
}
.site-header nav a.current {
  color: var(--accent);
  background: var(--surface-2);
  border-color: var(--line);
}
.admin-link { border-color: var(--line) !important; }
/* Qui est connecte, dans la barre d'administration */
.compte-actif {
  padding: .35rem .7rem; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--accent-dim);
  color: var(--accent); font-size: .82rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.inline { display: inline; }
.link-button {
  background: none; border: 1px solid transparent; cursor: pointer;
  font: inherit; font-size: .9rem; color: var(--muted);
}

main { padding: 2.5rem 0 3.5rem; flex: 1 0 auto; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-0);
  padding: 1.5rem 0; margin-top: 2rem;
}
.site-footer p { margin: 0; color: var(--muted); font-size: .85rem; }

/* ---------------------------------------------------------------- surfaces */

/* Les surfaces sont opaques : ni la brume ni les particules ne passent
   derriere du texte, la lisibilite ne depend pas du fond. */
.panel {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.45rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow);
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.cards {
  display: grid; gap: .9rem; margin: 1.7rem 0;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem .95rem;
  overflow: hidden;
  transition: border-color .2s ease;
}
.card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-dim), transparent);
}
.card:hover { border-color: var(--accent-dim); }
.card .value { display: block; font-size: 1.8rem; line-height: 1.2; color: var(--text); }
/* Une carte qui affiche un nom, pas un chiffre : plus petit pour tenir sur une ligne */
.card .value-nom { font-size: 1.35rem; overflow-wrap: break-word; }
.card .label {
  color: var(--muted); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .12em;
}

/* ---------------------------------------------------------------- choix de la ligue */

.tri {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: 1.4rem 0 .6rem;
}
.tri-libelle {
  color: var(--muted); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
  margin-right: .3rem;
}
.tri a {
  padding: .38rem .9rem; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--muted); font-size: .88rem;
}
.tri a:hover { color: var(--text); background: var(--surface-3); text-decoration: none; }
.tri a.actif {
  background: var(--accent); border-color: var(--accent);
  color: #1a1206; font-weight: 700;
}
.tri-explication { max-width: 68ch; margin: 0 0 .4rem; font-size: .95rem; color: var(--text-dim); }

/* La colonne qui sert de critere de classement est mise en avant : on doit voir
   d'un coup d'oeil sur quoi le classement repose. */
thead th.colonne-active { color: var(--accent); }

.cote { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cote-valeur { color: var(--accent); font-weight: 700; font-size: 1.08rem; }
.cote-variation { margin-left: .35rem; font-size: .74rem; font-family: ui-sans-serif, system-ui, sans-serif; }
.cote-variation.hausse { color: var(--win); }
.cote-variation.baisse { color: var(--loss); }

/* ---------------------------------------------------------------- podium */

.podiums {
  display: grid; gap: 1rem; margin: 1.8rem 0;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.podium {
  /* Colonne flex pour pouvoir pousser les marches en bas du panneau. */
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.podium-titre {
  margin: 0 0 .3rem;
  color: var(--text-dim);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  text-align: center;
}

/* margin-top: auto colle les marches au bas du panneau. Les deux podiums font
   la meme hauteur (grille), mais leur contenu n'a pas la meme hauteur : sans
   ca, une etiquette « inactif » d'un cote suffisait a decaler sa ligne de sol
   par rapport a l'autre podium.
   La bordure basse fait le sol : les socles reposent dessus au lieu d'aller
   mourir dans les coins arrondis du panneau. */
.podium-marches {
  display: flex; align-items: flex-end; justify-content: center;
  gap: .5rem; margin: auto 0 0; padding: 0; list-style: none;
  border-bottom: 1px solid var(--line);
}
.marche {
  display: flex; flex-direction: column; align-items: center;
  flex: 1 1 0; min-width: 0; text-align: center;
}
/* Le HTML garde l'ordre 1, 2, 3 ; l'affichage met le premier au centre. */
.marche-2 { order: 1; }
.marche-1 { order: 2; }
.marche-3 { order: 3; }

.marche-nom {
  display: block; width: 100%;
  font-weight: 600; font-size: .86rem; line-height: 1.25;
  color: var(--text); overflow-wrap: break-word;
}
.marche-nom:hover { color: var(--accent); text-decoration: none; }
.marche-inactif { margin-top: .2rem; font-size: .6rem; }
.marche-points {
  display: block; margin-top: .15rem;
  color: var(--accent); font-weight: 700; font-size: 1.05rem;
}
.marche-bilan {
  display: block; margin-bottom: .45rem;
  color: var(--muted); font-size: .72rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.marche-socle {
  display: grid; place-items: center;
  width: 100%;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--line); border-bottom: 0;
  background: var(--surface-3);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1.3rem; font-weight: 800;
  color: var(--muted);
}
.marche-1 .marche-socle {
  height: 5.4rem;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  border-color: var(--accent-soft);
  color: #1a1206;
  box-shadow: 0 0 26px var(--accent-glow);
}
.marche-2 .marche-socle {
  height: 3.9rem;
  background: linear-gradient(180deg, rgba(224, 180, 95, .22), rgba(224, 180, 95, .08));
  border-color: var(--accent-dim);
  color: var(--accent);
}
.marche-3 .marche-socle {
  height: 2.9rem;
  background: linear-gradient(180deg, rgba(224, 180, 95, .1), rgba(224, 180, 95, .03));
  border-color: rgba(224, 180, 95, .28);
  color: var(--accent);
}

/* ---------------------------------------------------------------- pagination */

.pagination {
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem; margin: 1rem 0 0;
}
.pagination-compte { margin: 0; color: var(--muted); font-size: .82rem; }
.pagination-liens {
  display: flex; flex-wrap: wrap; gap: .25rem;
  align-items: center; justify-content: center;
}
.pagination-liens a,
.pagination-liens .page-courante,
.pagination-liens .inactif {
  display: inline-grid; place-items: center;
  min-width: 2rem; height: 2rem; padding: 0 .55rem;
  border-radius: 7px; border: 1px solid transparent;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .84rem; font-variant-numeric: tabular-nums;
}
.pagination-liens a { color: var(--muted); border-color: var(--line); }
.pagination-liens a:hover {
  color: var(--text); background: var(--surface-3);
  border-color: var(--accent-dim); text-decoration: none;
}
.pagination-liens .page-courante {
  color: #1a1206; background: var(--accent); border-color: var(--accent); font-weight: 700;
}
.pagination-liens .inactif { color: var(--line); border-color: var(--line-soft); }
.pagination-liens .trou { color: var(--muted); padding: 0 .2rem; }

/* La cible d'un lien de pagination ne doit pas finir sous l'en-tete collant */
h2[id] { scroll-margin-top: 5rem; }

/* Les lignes des autres pages sont dans le HTML mais masquees. Sans !important,
   le display: table-row de la feuille du navigateur l'emporterait sur hidden. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- tableaux */

.table-scroll {
  overflow-x: auto;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
table { width: 100%; border-collapse: collapse; font-size: .95rem; }

thead th {
  text-align: left; padding: .8rem .9rem; white-space: nowrap;
  background: var(--surface-3);
  color: var(--text-dim);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  border-bottom: 1px solid var(--line);
}
tbody td { padding: .72rem .9rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
/* Rayures discretes : l'oeil suit une ligne jusqu'au bout du tableau.
   La classe est posee par le serveur selon la position DANS la page : avec
   :nth-child, une page commencant a un rang impair aurait inverse l'alternance. */
tbody tr.paire { background: rgba(255, 255, 255, .017); }
.table-scroll table:not([data-groupe]) tbody tr:nth-child(even) { background: rgba(255, 255, 255, .017); }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: var(--surface-3); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.rank { width: 4.2rem; white-space: nowrap; }
.player-name { font-weight: 600; color: var(--text); }
a.player-name:hover { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* Pastille de rang : le podium ressort, le reste du tableau reste sobre */
.rank-badge {
  display: inline-grid; place-items: center;
  min-width: 1.75rem; height: 1.75rem; padding: 0 .35rem;
  border-radius: 7px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.rank-badge.rank-1 {
  color: #1a1206;
  background: linear-gradient(160deg, var(--accent-soft), var(--accent));
  border-color: var(--accent-soft);
  box-shadow: 0 0 16px var(--accent-glow);
}
.rank-badge.rank-2 {
  color: var(--accent);
  background: rgba(224, 180, 95, .13);
  border-color: var(--accent-dim);
}
.rank-badge.rank-3 {
  color: var(--accent);
  background: rgba(224, 180, 95, .06);
  border-color: rgba(224, 180, 95, .28);
}
.exaequo { color: var(--muted); font-size: .76rem; margin-left: .3rem; }

/* ---------------------------------------------------------------- badges */

.form-run { display: inline-flex; gap: .22rem; }
.pill {
  display: inline-grid; place-items: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem;
  border-radius: 5px; font-size: .72rem; font-weight: 700;
  font-family: ui-sans-serif, system-ui, sans-serif;
  border: 1px solid transparent;
}
/* Le nul est volontairement neutre : un jaune ici entrerait en concurrence
   avec l'or de la cote et brouillerait la lecture. */
.pill-V { background: rgba(92, 201, 143, .13); color: var(--win);  border-color: rgba(92, 201, 143, .28); }
.pill-N { background: rgba(160, 168, 189, .11); color: var(--draw); border-color: rgba(160, 168, 189, .24); }
.pill-D { background: rgba(226, 113, 127, .11); color: var(--loss); border-color: rgba(226, 113, 127, .25); }

.tag {
  display: inline-block; padding: .12rem .55rem; border-radius: 5px;
  border: 1px solid var(--line); color: var(--muted); background: var(--surface-2);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
}
/* Categorie d'un duelliste, et signalement des duels entre categories */
.tag-categorie {
  color: var(--accent); border-color: var(--accent-dim);
  background: rgba(224, 180, 95, .07);
}
.tag-hors {
  color: var(--arcane); border-color: rgba(164, 136, 224, .32);
  background: rgba(164, 136, 224, .08);
}
/* La ligue d'un duel. L'ouverte se distingue par une teinte froide, la
   officielle reste neutre : l'or est reserve a ce qui porte le classement. */
.tag-ligue { white-space: nowrap; }
.tag-ligue-ouverte {
  color: #7fc4d8; border-color: rgba(127, 196, 216, .3);
  background: rgba(127, 196, 216, .07);
}

/* Sorts bannis en ligue ouverte : une seule ligne discrete sous les noms */
.bans {
  margin-top: .2rem; color: var(--muted); font-size: .84rem; line-height: 1.45;
}
.bans-titre {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: #7fc4d8; margin-right: .5rem;
}
/* Chaque groupe « nom : sorts » passe a la ligne d'un bloc, sans couper un nom */
.ban { display: inline-block; }
.ban-par { color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.ban-par::after { content: " :"; font-weight: 400; color: var(--muted); }
.bans-sep { margin: 0 .5rem; color: var(--line); }

/* Un duel qui ne compte pas est visiblement en retrait : la ligne s'efface
   et son resultat perd sa couleur, pour qu'on ne le lise pas comme un
   resultat de classement. */
.ligne-hors td { opacity: .62; }
.pill-hors {
  background: transparent; color: var(--muted);
  border-color: var(--line); border-style: dashed;
}

/* Le compte de duellistes a cote du titre de categorie */
h2 .muted { font-weight: 400; letter-spacing: .08em; }

.score { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.winner { color: var(--win); }

/* ---------------------------------------------------------------- formulaires */

form.stack { display: grid; gap: 1.05rem; }
.field { display: grid; gap: .38rem; }
.field label {
  font-size: .72rem; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

input, select, textarea, button {
  font: inherit; color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px; padding: .58rem .75rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--accent-dim); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 180, 95, .15);
}
textarea { resize: vertical; min-height: 4.6rem; font-family: inherit; }
input[type="checkbox"] { accent-color: var(--accent); }

button, .button {
  cursor: pointer;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  color: #1a1206;
  border: 1px solid var(--accent-soft);
  font-weight: 700; padding: .58rem 1.2rem;
  border-radius: 8px; display: inline-block; text-align: center;
}
button:hover, .button:hover {
  filter: brightness(1.08); text-decoration: none; color: #1a1206;
  box-shadow: 0 0 18px var(--accent-glow);
}
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; }

button.secondary, .button.secondary {
  background: var(--surface-2); color: var(--text);
  border-color: var(--line); font-weight: 500;
}
button.secondary:hover, .button.secondary:hover {
  background: var(--surface-3); border-color: var(--accent-dim);
  color: var(--text); filter: none; box-shadow: none;
}
button.danger {
  background: transparent; color: var(--loss);
  border-color: rgba(226, 113, 127, .3); font-weight: 500;
  padding: .32rem .72rem; font-size: .85rem;
}
button.danger:hover {
  background: rgba(226, 113, 127, .12); border-color: var(--loss);
  color: var(--loss); filter: none; box-shadow: none;
}

.actions { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- recherche */

.barre-recherche {
  display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
}
.barre-recherche .field { flex: 1 1 220px; }
.barre-recherche .field:not(:first-child) { flex: 0 1 210px; }
.barre-recherche .actions { flex: 0 0 auto; }

/* ---------------------------------------------------------------- admin joueurs */

/* Une ligne de joueur est un formulaire complet : les champs restent alignes
   quelle que soit la longueur du nom, et passent a la ligne sur petit ecran. */
.ligne-joueur {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
}
.ligne-joueur input[name="name"] { flex: 1 1 12rem; min-width: 9rem; }
.ligne-joueur select { flex: 0 0 8.5rem; }
.case-active {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--muted); font-size: .85rem; white-space: nowrap;
}
.case-active input { width: auto; }
.nowrap { white-space: nowrap; }

/* Le taux de victoire : lisible mais moins fort que la cote */
.ratio { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- messages */

.flash {
  padding: .8rem 1.05rem; border-radius: 8px;
  border: 1px solid; border-left-width: 3px; margin: 0 0 1.5rem;
}
.flash-ok    { border-color: rgba(92, 201, 143, .35);  border-left-color: var(--win);  background: rgba(92, 201, 143, .07);  color: var(--win); }
.flash-error { border-color: rgba(226, 113, 127, .35); border-left-color: var(--loss); background: rgba(226, 113, 127, .07); color: var(--loss); }

/* ---------------------------------------------------------------- divers */

.login-page { max-width: 390px; margin: 4rem auto; }
.empty { text-align: center; padding: 2.6rem 1rem; color: var(--muted); }

code {
  background: var(--surface-3); border: 1px solid var(--line);
  padding: .1rem .4rem; border-radius: 5px;
  font-size: .88em; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

@media (max-width: 620px) {
  .hide-sm { display: none; }
  body { font-size: 15px; }
  .panel { padding: 1.05rem 1.1rem; }
  main { padding: 1.8rem 0 2.5rem; }
}

/* Respecte le reglage systeme "reduire les animations" :
   la brume se fige, les particules ne sont pas dessinees du tout. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- saisie : ligue */

.choix-ligue {
  border: 0; padding: 0; margin: 0;
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.choix-ligue legend {
  font-size: .72rem; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 0; margin-bottom: .38rem;
}
.choix-ligue-option {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  padding: .7rem .85rem; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface-1);
}
.choix-ligue-option:has(input:checked) { border-color: var(--accent-dim); background: var(--surface-3); }
.choix-ligue-option input { margin-top: .25rem; accent-color: var(--accent); }
.choix-ligue-option > span { display: grid; gap: .15rem; }

/* ---------------------------------------------------------------- boss */

/* Le rouge sombre des boss : une menace, distincte de l'or du classement */
.boss-nom { color: #e58a7a; letter-spacing: .02em; }
.tag-boss {
  color: #e58a7a; border-color: rgba(229, 138, 122, .32);
  background: rgba(229, 138, 122, .07);
}
.pill-boss-joueurs { background: rgba(92, 201, 143, .13); color: var(--win);  border-color: rgba(92, 201, 143, .28); }
.pill-boss-boss    { background: rgba(226, 113, 127, .11); color: var(--loss); border-color: rgba(226, 113, 127, .25); }
.pill-boss-joueurs, .pill-boss-boss { width: auto; padding: 0 .55rem; white-space: nowrap; }
td.participants { line-height: 1.6; }

/* L'identite du joueur-boss : signalee comme confidentielle dans l'admin */
.secret { color: var(--arcane); }
p.secret { margin: 0; }

.participants-boss { border: 0; padding: 0; margin: 0; display: grid; gap: .8rem; }
.participants-boss legend {
  font-size: .72rem; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: 0; margin-bottom: .38rem;
}
.groupe-cases-titre {
  margin: 0 0 .35rem; color: var(--text-dim); font-size: .8rem; font-weight: 700;
}
.cases {
  display: grid; gap: .3rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.case {
  display: flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .3rem .5rem; border-radius: 6px; font-size: .9rem;
}
.case:hover { background: var(--surface-3); }
.case:has(input:checked) { background: var(--surface-3); color: var(--accent); }
.case input { accent-color: var(--accent); }
.tirage-resultat {
  margin: .9rem 0 .3rem; padding: .7rem .9rem; border-radius: 9px;
  background: var(--surface-1); border: 1px solid var(--accent-dim);
}

/* Presents d'un boss */
.ajout-present { display: flex; gap: .5rem; flex-wrap: wrap; }
.ajout-present input { flex: 1 1 220px; }
.case-nouveau span .muted { color: var(--arcane); }
.case > span { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem; }
.select-mini { padding: .1rem .3rem; font-size: .78rem; width: auto; }

/* ---------------------------------------------------------------- duels : vainqueur */

/* L'or et le gras vont au vainqueur : c'est lui qu'on doit lire en premier.
   Le perdant reste lisible mais en retrait ; a egalite, les deux sont neutres. */
.duelliste { color: var(--text); }
a.duelliste:hover { color: var(--accent); }
.duelliste.vainqueur { color: var(--accent); font-weight: 700; }
.duelliste.vainqueur::before { content: "▲ "; font-size: .62em; vertical-align: .15em; }
.duelliste.perdant { color: var(--muted); }
.contre { color: var(--muted); font-size: .85em; font-style: italic; margin: 0 .2rem; }

/* Bilan V–N–D dans le classement */
.bilan { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.b-v { color: var(--win); font-weight: 700; }
.b-n { color: var(--draw); }
.b-d { color: var(--loss); }