/* Page publique : lisible sur téléphone, clair ou sombre selon le réglage de l'appareil. */
:root {
  --fond: #f6f7f9;
  --carte: #ffffff;
  --texte: #15181d;
  --texte-2: #5b6470;
  --bord: #dde1e6;
  --accent: #c8102e;
  --vert: #1a7f37;
  --orange: #b35900;
  --rouge: #c8102e;
  --gris: #8a929c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #111418;
    --carte: #1b2027;
    --texte: #eef1f4;
    --texte-2: #a3acb6;
    --bord: #2d343d;
    --accent: #ff5a6e;
    --vert: #4cc26b;
    --orange: #f0a040;
    --rouge: #ff5a6e;
    --gris: #7d8690;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.4;
}
header, main, footer { max-width: 760px; margin: 0 auto; padding: 0 16px; }
header { padding-top: 20px; }
h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1.2rem; margin: 24px 0 4px; }
.sous-titre, .aide, footer { color: var(--texte-2); font-size: .9rem; }
.sous-titre { margin: 4px 0 0; }
.lien-site { margin: 0 0 8px; font-size: .95rem; }
.lien-site a { color: var(--texte-2); }
[hidden] { display: none !important; }
.aide { margin: 0 0 8px; }
footer { padding-bottom: 32px; padding-top: 16px; }
.bandeau-test {
  background: var(--orange); color: #000; font-weight: 700; padding: 8px 12px; border-radius: 8px; margin: 12px 0 0;
}

.etat {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 12px;
  padding: 16px; margin-top: 16px; text-align: center;
}
.etat p { margin: 0; }
.etat-titre { font-size: 1.1rem; font-weight: 600; }
.etat-compte { font-size: 3rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.etat-detail { color: var(--texte-2); margin-top: 4px !important; }

.totaux { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
@media (min-width: 560px) { .totaux { grid-template-columns: repeat(4, 1fr); } }
.total {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; align-items: center;
}
.total .valeur { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.total .libelle { color: var(--texte-2); font-size: .85rem; }
.total-dons .valeur { color: var(--accent); }

.fraicheur { text-align: center; font-size: .9rem; color: var(--texte-2); margin: 12px 0 0; }
.fraicheur.retard { color: var(--orange); font-weight: 600; }
.fraicheur.ancien { color: var(--rouge); font-weight: 600; }

.coureurs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.coureurs details {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; overflow: hidden;
}
.coureurs summary {
  display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer; list-style: none;
}
.coureurs summary::-webkit-details-marker { display: none; }
.rang { font-weight: 700; color: var(--texte-2); text-align: right; }
.qui { min-width: 0; }
.qui .nom { font-weight: 600; overflow-wrap: anywhere; }
.qui .dossard { color: var(--texte-2); font-size: .85rem; margin-right: 4px; }
.qui .etat-coureur { display: block; font-size: .85rem; color: var(--texte-2); }
.etat-coureur.en_course, .etat-coureur.vainqueur { color: var(--vert); }
.etat-coureur.elimine, .etat-coureur.abandon { color: var(--gris); }
.nb { text-align: right; }
.nb strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.nb span { display: block; font-size: .75rem; color: var(--texte-2); }
.sorti summary { opacity: .75; }
.vainqueur-ligne { border-color: var(--accent) !important; border-width: 2px !important; }

.detail { border-top: 1px solid var(--bord); padding: 10px 12px; font-size: .9rem; }
.detail .resume { color: var(--texte-2); margin: 0 0 8px; }
.temps { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.temps li { background: var(--fond); border-radius: 6px; padding: 4px 6px; font-variant-numeric: tabular-nums; }
.temps li span { color: var(--texte-2); font-size: .8rem; margin-right: 4px; }
.vide { color: var(--texte-2); text-align: center; padding: 16px; }