/* Scornade — thème « nuit et braise », repris de l'icône.
   Un fond nuit-violet, des surfaces violettes à peine plus claires, et un seul
   accent : la braise en sombre, le violet en clair. Il ne marque que ce qui
   est actionnable ou sélectionné. Le sombre est le thème par défaut ; le
   clair reste proposé dans les réglages.
   Les noms --blue et --blue-deep sont historiques : ils portent l'accent,
   quelle que soit sa teinte. Mise en page : une colonne sur téléphone, rail
   latéral et deux colonnes à partir de 900 px. */

:root {
  /* Thème clair. */
  --ink: #1a1033;
  --ink-2: #6b6485;
  --bg: #ffffff;
  --bg-alt: #f5f2fc;
  --hairline: #e2dcf0;
  --blue: #6d28d9;
  --blue-deep: #5b21b6;
  --on-accent: #ffffff;
  --accent-fill: #6d28d9;
  --tint: rgba(109, 40, 217, .12);
  --neutral-tint: rgba(26, 16, 51, .08);
  --green: #248a3d;
  --green-bg: rgba(52, 199, 89, .14);
  --red: #d70015;
  --red-bg: rgba(255, 59, 48, .13);
  --orange: #ff9500;
  --yellow: #e5b800;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(26, 16, 51, .06), 0 8px 24px rgba(26, 16, 51, .08);
  --page: #ffffff;

  /* Polices : les mêmes que le portfolio JMprojectlab. SF Pro, déjà
     installée, sur les appareils Apple ; Segoe UI sur Windows, Roboto sur
     Android. SF Pro ne peut pas être embarquée sur le web (licence Apple) :
     on l'appelle, on ne la télécharge pas. Helvetica en dernier recours. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Teintes des graphiques.
     L'ordre des créneaux n'est pas décoratif : c'est lui qui garantit que deux
     parts voisines restent distinguables, y compris en vision daltonienne. Il a
     été retenu en énumérant les ordres possibles et en ne gardant que ceux qui
     passent toutes les portes dans les deux modes (140 sur 720). Ne pas
     réordonner sans revalider. Écart minimal ici : ΔE 19,5 daltonien et 23,5 en
     vision normale, sur fond clair.
     En mode clair, l'orange et le cyan passent sous 3:1 face au fond : les
     valeurs sont donc toujours écrites dans la légende, jamais portées par la
     seule couleur. */
  --s1: #0a84ff;
  --s2: #ff9500;
  --s3: #30b0c7;
  --s4: #5e5ce6;
  --s5: #ff2d55;
  --s6: #af52de;
  --grid: #e5e5ea;
}

/* Thème sombre « nuit et braise » : le défaut (voir store.js), le choix
   explicite, ou le choix « Système » sur un appareil réglé en sombre.
   La braise #ff7a2f fait 7,4:1 sur la nuit ; les boutons pleins y portent un
   texte nuit (7,1:1) et non blanc, qui tomberait à 2,6:1. Les deux blocs
   ci-dessous sont identiques : le CSS ne sait pas partager une règle entre
   un sélecteur et une requête média. */
:root[data-theme="dark"] {
  --s2: #d97200; --s3: #16a2b9; --grid: #3d3275;
  --ink: #f7f4ff; --ink-2: #d4cdef; --bg: #0f0a24; --bg-alt: #2a2060;
  --hairline: #5b4f99; --blue: #ff7a2f; --blue-deep: #ff8a3d;
  --on-accent: #140f2e;
  --accent-fill: linear-gradient(135deg, #ffb020, #ff5a1f);
  --tint: rgba(255, 122, 47, .16); --neutral-tint: rgba(247, 244, 255, .10);
  --green: #30d158; --green-bg: rgba(48, 209, 88, .16);
  --red: #ff453a; --red-bg: rgba(255, 69, 58, .16);
  --orange: #ff9f0a; --yellow: #ffd60a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .5);
  --page: radial-gradient(1200px 700px at 50% -10%, rgba(255, 90, 31, .18), transparent 60%),
          linear-gradient(160deg, #1a1147 0%, #0f0a24 55%, #0b0820 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s2: #d97200; --s3: #16a2b9; --grid: #3d3275;
    --ink: #f7f4ff; --ink-2: #d4cdef; --bg: #0f0a24; --bg-alt: #2a2060;
    --hairline: #5b4f99; --blue: #ff7a2f; --blue-deep: #ff8a3d;
    --on-accent: #140f2e;
    --accent-fill: linear-gradient(135deg, #ffb020, #ff5a1f);
    --tint: rgba(255, 122, 47, .16); --neutral-tint: rgba(247, 244, 255, .10);
    --green: #30d158; --green-bg: rgba(48, 209, 88, .16);
    --red: #ff453a; --red-bg: rgba(255, 69, 58, .16);
    --orange: #ff9f0a; --yellow: #ffd60a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .5);
    --page: radial-gradient(1200px 700px at 50% -10%, rgba(255, 90, 31, .18), transparent 60%),
            linear-gradient(160deg, #1a1147 0%, #0f0a24 55%, #0b0820 100%);
}
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  background: var(--page);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
}
.tab { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }

/* ---------- ossature ---------- */

.shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--hairline);
  /* Sur un écran étroit, la barre défile plutôt que d'élargir la page : avec
     quatre destinations, les libellés ne tiennent plus sur 390 px. */
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar::-webkit-scrollbar { display: none; }
.topbar .brand {
  font-size: 19px; font-weight: 600; letter-spacing: -.022em;
  flex: 0 0 auto; margin-right: auto;
}
.topbar .ghost { flex: 0 0 auto; }
.topbar .brand span { color: var(--ink-2); font-weight: 400; }

.rail { display: none; }

.content { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 16px 72px; }

/* ---------- boutons et contrôles ---------- */

button { font: inherit; letter-spacing: -.012em; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
/* Un bouton plein désactivé reste lisible : pas de transparence, mais une
   surface neutre bordée et un libellé secondaire. Le dégradé braise est
   réservé à l'action disponible. */
.btn.primary:disabled {
  opacity: 1; background: var(--bg-alt); color: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
}

.btn {
  display: block; width: 100%; border: none; border-radius: 12px;
  padding: 13px 16px; font-size: 16px; font-weight: 500; margin-bottom: 10px;
}
.btn.primary { background: var(--accent-fill); color: var(--on-accent); }
:root[data-theme="dark"] .btn.primary { color: #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #000; } }
.btn.secondary { background: var(--bg-alt); color: var(--ink); }
.btn.danger { background: var(--bg-alt); color: var(--red); }
.btn.outline { background: none; color: var(--ink); border: 1px solid var(--hairline); }

.ghost {
  background: none; border: none; color: var(--blue);
  padding: 6px 8px; border-radius: 8px; font-size: 15px;
}
.icon-btn {
  background: none; border: none; color: var(--ink-2);
  padding: 4px 6px; border-radius: 6px; font-size: 14px; line-height: 1;
}
.icon-btn:hover { color: var(--red); }

.search { margin-bottom: 10px; }
[hidden] { display: none !important; }
.pillbar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; scrollbar-width: none; }
.pillbar::-webkit-scrollbar { display: none; }
.pill {
  border: none; border-radius: 999px; padding: 7px 15px; font-size: 14px;
  background: var(--bg-alt); color: var(--ink); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pill[aria-pressed="true"] { background: var(--tint); color: var(--blue-deep); box-shadow: inset 0 0 0 1.5px var(--blue); }

/* Les pastilles vivent presque toujours dans une .card, qui a déjà le fond
   --bg-alt : sans contraste propre elles disparaîtraient dans la carte. */
.chip {
  flex: 1 1 auto; min-width: 68px; border: 1.5px solid var(--hairline); border-radius: 10px;
  background: var(--bg); color: var(--ink-2); padding: 10px 10px; font-size: 14px;
}
.chip:hover { border-color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--tint); border-color: var(--blue); color: var(--blue-deep); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip.suit { flex: 0 0 auto; min-width: 52px; font-size: 18px; }
.chip.suit.red { color: var(--red); }
.chip.fixed { flex: 0 0 auto; min-width: 46px; }

input[type="text"], input[type="number"], input[type="search"], select {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; width: 100%;
}
input.num { text-align: center; font-variant-numeric: tabular-nums; }
input.short { width: 92px; }
label.field { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 5px; }

/* ---------- blocs ---------- */

.card { background: var(--bg-alt); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.section-label {
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  margin: 22px 0 10px; letter-spacing: .02em; text-transform: uppercase;
}
.hint { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }
.empty { text-align: center; color: var(--ink-2); font-size: 15px; padding: 48px 24px; }

.grid-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gcard {
  background: var(--bg-alt); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 14px; text-align: left; color: var(--ink); display: block; width: 100%;
  transition: transform .12s ease, background .12s ease;
}
.gcard:hover { background: color-mix(in srgb, var(--bg-alt) 70%, var(--tint)); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .gcard { transition: none; } .gcard:hover { transform: none; } }
.gcard .glyph { display: flex; align-items: center; height: 28px; color: var(--ink-2); margin-bottom: 10px; }
.gcard .gname { display: block; font-size: 15px; font-weight: 500; }
.gcard .gtype { display: block; font-size: 12px; color: var(--ink-2); margin-top: 1px; }

.active-card {
  display: block; width: 100%; text-align: left; color: var(--ink);
  background: var(--tint); border: 1.5px solid var(--blue);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
}
.active-top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.active-top .tag { color: var(--blue); font-weight: 600; letter-spacing: .02em; }
.active-top .sub { color: var(--ink-2); }
.active-name { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.active-line { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

.row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.row + .row { border-top: 1px solid var(--hairline); }
.row .name { flex: 1; font-size: 16px; }
.row .sub { font-size: 13px; color: var(--ink-2); }

.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500;
}
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }

.badge { font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 999px; background: var(--tint); color: var(--blue-deep); }
.badge.neutral { background: var(--neutral-tint); color: var(--ink); }
.badge.off { background: none; color: var(--ink-2); }

/* ---------- tableaux de score ---------- */

.teams { display: flex; gap: 10px; align-items: stretch; margin-bottom: 14px; }
.team { flex: 1; border-radius: var(--radius); padding: 14px; }
.team.t1 { background: var(--tint); }
.team.t2 { background: var(--neutral-tint); }
.team .tl { font-size: 13px; font-weight: 500; }
.team.t1 .tl { color: var(--blue-deep); }
.team.t2 .tl { color: var(--ink); }
.team .tn { font-size: 12px; color: var(--ink-2); margin-bottom: 8px; min-height: 16px; }
.team .ts { font-size: 30px; font-weight: 600; letter-spacing: -.022em; margin-bottom: 9px; font-variant-numeric: tabular-nums; }
.team.t1 .ts { color: var(--blue-deep); }
.team.t2 .ts { color: var(--ink); }
.objective { align-self: center; text-align: center; font-size: 12px; color: var(--ink-2); }
.objective b { display: block; font-size: 17px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.track { height: 4px; border-radius: 2px; background: var(--neutral-tint); overflow: hidden; }
.fill { height: 100%; border-radius: 2px; transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .fill { transition: none; } }
.t1 .fill { background: var(--blue); }
.t2 .fill { background: var(--ink); }

.score-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--bg-alt); border: 1.5px solid transparent; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 9px; text-align: left; color: var(--ink);
}
.score-row[aria-pressed="true"] { border-color: var(--blue); background: var(--tint); }
.score-row.out { opacity: .45; }
.score-row .nm { flex: 1; font-size: 16px; }
.score-row .sc { font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.result { border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 12px; }
.result.ok { background: var(--green-bg); color: var(--green); }
.result.ko { background: var(--red-bg); color: var(--red); }
/* Litige : ni contrat tenu ni chute — la donne reste en suspens, d'où le
   traitement informatif plutôt que vert ou rouge. */
.result.tie { background: var(--tint); color: var(--blue-deep); }
.result b { display: block; font-weight: 600; margin-bottom: 5px; }
.result .ln { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }

.note { font-size: 14px; font-weight: 500; color: var(--red); margin-top: 10px; }
.note.ok { color: var(--green); }
.note.tie { color: var(--blue-deep); }

.hist { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 9px 0; border-top: 1px solid var(--hairline); }
.hist .ix { color: var(--ink-2); width: 32px; flex-shrink: 0; font-family: var(--mono); }
.hist .dt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist .st { font-weight: 600; font-size: 12px; }
.hist .st.ok { color: var(--green); }
.hist .st.ko { color: var(--red); }
.hist .st.tie { color: var(--blue-deep); }

/* Une manche se touche pour la corriger : c'est un bouton, mais il doit se
   fondre dans la ligne plutôt que ressembler à une commande de plus. */
.hist-open {
  flex: 1; min-width: 0; display: flex; align-items: center;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.hist-open:hover .dt { color: var(--blue); }
.hist-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.row .hist-open { flex-direction: column; align-items: flex-start; gap: 2px; }

.winner { text-align: center; border-radius: 18px; padding: 26px 18px; background: var(--green-bg); margin-bottom: 14px; }
.winner .cup { font-size: 30px; color: var(--orange); line-height: 1; margin-bottom: 8px; }
.winner .wt { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 5px; }
.winner .wd { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.share-bar { display: flex; justify-content: flex-end; }

/* grille du Yam's */
.yrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.yrow .yl { flex: 1; font-size: 15px; }
.yrow input { width: 80px; }
.ysum { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); padding: 9px 0; }
.ysum b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.ysum.good b { color: var(--green); }
.ytotal { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--hairline); }
.ytotal .val { font-size: 24px; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* statistiques */
.statgrid { display: flex; gap: 8px; text-align: center; }
.statgrid > div { flex: 1; }
/* Chiffres proportionnels ici : à cette taille, `tabular-nums` fait paraître
   un « 121 » trop aéré. Les colonnes alignées, elles, gardent `.tab`. */
.statgrid .v { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.statgrid .k { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.ratio { font-family: var(--mono); font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Les filtres tiennent sur une seule ligne, au-dessus de tout ce qu'ils
   cadrent — jamais dans une carte de graphique, jamais un par graphique. */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.filters label { flex: 1 1 150px; min-width: 0; }
.filters .field { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 5px; }

.chart-card { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut { flex: 0 0 auto; display: block; }
.donut .arc { transition: opacity .12s ease; }
.chart-card:hover .arc { opacity: .55; }
.chart-card .arc:hover, .chart-card .arc:focus-visible { opacity: 1; }
.donut .arc:focus-visible { outline: none; }
.donut-v { font-size: 22px; font-weight: 600; fill: var(--ink); }
.donut-k { font-size: 11px; fill: var(--ink-2); }

/* Plafonnée : sans cela, sur large écran la légende s'étire et la valeur part
   se perdre à l'autre bout de la carte, loin de son libellé. */
.legend { flex: 1 1 190px; max-width: 320px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.legend li { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 14px; }
.legend .key { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.legend .lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend .lv { color: var(--ink-2); font-size: 13px; flex: 0 0 auto; }

.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 14px; border-radius: 8px; }
.bar-lb { flex: 0 0 34%; min-width: 0; display: flex; align-items: center; gap: 7px; }
.bar-lb .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La piste occupe la part de couloir correspondant aux parties jouées ; le
   remplissage, la part gagnée. Une ligne dit donc les deux à la fois : combien
   de parties, et combien de victoires. */
.bar-lane { flex: 1; min-width: 0; }
/* `display: block` n'est pas cosmétique : la piste n'est plus un enfant direct
   du flex, donc sans lui elle reste en ligne et sa largeur est ignorée. */
.bar-track { display: block; height: 10px; background: var(--grid);
  border-radius: 999px; overflow: hidden; min-width: 10px; }
/* Extrémité arrondie côté valeur, carrée sur la ligne de base : la barre part
   d'une origine commune, elle ne flotte pas. */
.bar-fill { display: block; height: 100%; background: var(--s1); border-radius: 0 5px 5px 0; }

/* Deux nuances portent du sens : il faut les nommer. */
.bars-key { display: flex; align-items: center; gap: 6px; margin: 12px 0 0;
  font-size: 12px; color: var(--ink-2); }
.bars-key .k { width: 10px; height: 10px; border-radius: 3px; }
.bars-key .k.on { background: var(--s1); }
.bars-key .k.off { background: var(--grid); margin-left: 10px; }
.bar-v { flex: 0 0 auto; color: var(--ink-2); font-size: 13px; min-width: 46px; text-align: right; }

.meter { height: 8px; background: var(--grid); border-radius: 999px; overflow: hidden; margin-top: 14px; }
.meter-fill { display: block; height: 100%; background: var(--s1); border-radius: 0 4px 4px 0; }

.table-view { margin-top: 4px; }
.table-view summary { font-size: 14px; color: var(--blue); cursor: pointer; padding: 6px 0; }
.table-view table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.table-view th, .table-view td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--hairline); }
.table-view th:first-child, .table-view td:first-child { text-align: left; }
.table-view th { font-size: 12px; color: var(--ink-2); font-weight: 500; }

/* ---------- connexion ---------- */

.login { max-width: 380px; margin: 0 auto; padding: 8vh 24px 40px; text-align: center; }
.login .mark {
  display: block; width: 96px; height: 96px; border-radius: 22px;
  margin: 0 auto 18px; box-shadow: 0 0 48px rgba(255, 90, 31, .45);
}
.login h1 { font-size: 34px; margin-bottom: 6px; }
.login .tagline { color: var(--ink-2); font-size: 17px; margin: 0 0 40px; }
.login .btn { text-align: center; }
.login .legal { font-size: 12px; color: var(--ink-2); margin-top: 18px; line-height: 1.5; }
.login .legal a { color: var(--blue); }
a.btn { text-decoration: none; }
/* Le QR code garde un fond blanc et une marge claire, quel que soit le thème :
   un lecteur en a besoin pour trouver le motif. */
.qr { background: #fff; border-radius: 18px; padding: 10px; width: min(240px, 100%); margin: 0 auto 12px; }
.qr svg { display: block; width: 100%; height: auto; }
.linked { font-size: 13px; }
.sep { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--ink-2); font-size: 13px; }
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* ---------- feuille modale ---------- */

dialog.sheet {
  border: none; padding: 0; border-radius: 18px; max-width: 560px; width: calc(100% - 32px);
  background: var(--bg); color: var(--ink); box-shadow: var(--shadow);
  /* Les règles complètes dépassent la hauteur d'un téléphone : la feuille se
     plafonne et c'est son corps qui défile, en-tête et bouton restant visibles. */
  max-height: min(82vh, 720px);
}
dialog.sheet[open] { display: flex; flex-direction: column; }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .38); }
.sheet-head {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  border-bottom: 1px solid var(--hairline); flex: 0 0 auto;
}
.sheet-head h2 { flex: 1; font-size: 18px; }
.sheet-body { padding: 18px; font-size: 16px; line-height: 1.5; overflow-y: auto; }
/* Rien ne remet les marges de `p` à zéro ailleurs : on fixe les nôtres. */
.sheet-body p { margin: 0 0 12px; }
.sheet-body p:last-child { margin-bottom: 0; }
/* Les puces d'une liste respirent moins que des paragraphes — mais le texte
   qui reprend après la liste retrouve son écart normal. */
.sheet-body p.li { margin: 0 0 3px; padding-left: 4px; }
.sheet-body p.li + p:not(.li) { margin-top: 12px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 999px;
  font-size: 14px; z-index: 60; max-width: min(90vw, 460px); text-align: center;
  box-shadow: var(--shadow);
}

/* ---------- ordinateur ---------- */

@media (min-width: 900px) {
  .shell { flex-direction: row; }

  .topbar { display: none; }

  .rail {
    display: flex; flex-direction: column; gap: 4px;
    width: 248px; flex-shrink: 0; padding: 26px 16px;
    border-right: 1px solid var(--hairline);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
  }
  .rail .brand { font-size: 22px; font-weight: 600; letter-spacing: -.022em; padding: 0 10px 22px; }
  .rail-link {
    display: flex; align-items: center; gap: 11px; width: 100%;
    background: none; border: none; border-radius: 10px;
    padding: 10px 12px; font-size: 15px; color: var(--ink); text-align: left;
  }
  .rail-link:hover { background: var(--bg-alt); }
  .rail-link[aria-current="page"] { background: var(--tint); color: var(--blue-deep); font-weight: 500; }
  .rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 18px; }

  .content { max-width: 940px; padding: 34px 40px 80px; margin: 0; }

  /* L'écran de score se scinde : suivi à gauche, saisie à droite. */
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 28px; align-items: start; }
  .split > * { min-width: 0; }

  .grid-games { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
  .login { padding-top: 12vh; }
}

@media (min-width: 1280px) {
  .content { max-width: 1080px; }
}