*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:       #0d0f1a;
  --surface:  #181b2e;
  --surface2: #1f2340;
  --border:   #2a2f52;
  --accent:   #f59e0b;
  --accent-lo:rgba(245,158,11,.12);
  --green:    #4ade80;
  --green-lo: rgba(74,222,128,.12);
  --red:      #f87171;
  --red-lo:   rgba(248,113,113,.12);
  --text:     #e2e8f0;
  --muted:    #64748b;
  --muted2:   #94a3b8;
  --radius:   12px;
  --radius-sm:7px;
}
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  font-size: 15px;
}

/* ── SCREENS ─────────────────────────────────── */
.screen { display: none; }
.screen.active { display: flex; }

/* ── AUTH / SETUP ────────────────────────────── */
#screenAuth {
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px;
  text-align: center;
}
.auth-card h1 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 4px; }
.auth-card .auth-sub { font-size: 13px; color: var(--muted2); margin-bottom: 28px; }
.auth-field { margin-bottom: 14px; text-align: left; }
.auth-field label { display: block; font-size: 12px; color: var(--muted2); font-weight: 600; margin-bottom: 6px; letter-spacing: .03em; }
.auth-field input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  padding: 11px 14px;
  font-family: inherit;
  transition: border-color .15s;
}
.auth-field input:focus { outline: none; border-color: var(--accent); }
.auth-btn {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: filter .15s;
}
.auth-btn:hover { filter: brightness(1.1); }
.auth-error {
  font-size: 13px;
  color: var(--red);
  margin-top: 12px;
  min-height: 18px;
}
.auth-version {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--muted);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 2px 10px;
  margin-bottom: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.auth-version:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
/* Même panneau, même défaut que dans Le Cairn : `var(--card)` n'existe dans
   aucune de ces deux palettes — ici la couleur s'appelle `--surface`. Une
   variable inconnue vaut TRANSPARENT, pas « rien » : le fond disparaissait. Et
   le reset (`* { margin:0 }`) privait <dialog> du `margin:auto` qui le centre. */
#changelogDialog { border:none; border-radius:18px; background:var(--surface); color:var(--text); padding:0; width:88%; max-width:340px; margin:auto; box-shadow:0 16px 48px rgba(0,0,0,.5); }
#changelogDialog::backdrop { background:rgba(0,0,0,.55); }
.changelog-content { padding:24px 20px 20px; }
.changelog-title { font-size:17px; font-weight:800; margin-bottom:16px; }
.changelog-list { list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow-y:auto; overscroll-behavior:contain; }
/* Une <li> en display:flex fait de CHAQUE <b> un élément de flex à part : les
   notes de version, qui en contiennent plusieurs, se brisaient en colonnes de
   deux mots et débordaient de l écran sur iPhone. Le texte doit rester un seul
   flux, le badge simplement posé devant lui. */
.changelog-list li { font-size:13px; line-height:1.5; }
.changelog-badge { font-size:10px; font-weight:700; color:var(--accent); background:rgba(255,122,24,.12); border-radius:20px; padding:2px 8px; white-space:nowrap; display:inline-block; margin-right:8px; }
.changelog-close { width:100%; padding:12px; background:#25282f; border:1px solid #2e3038; border-radius:10px; color:var(--text); font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }

/* ── ADMIN PANEL ─────────────────────────────── */
#screenAdmin {
  flex-direction: column;
  min-height: 100dvh;
}
.admin-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}
.admin-header h1 { font-size: 17px; font-weight: 700; flex: 1; letter-spacing: -.2px; }
.admin-header .user-chip {
  font-size: 12px;
  color: var(--muted2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
}
.logout-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted2);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.logout-btn:hover { color: var(--red); border-color: var(--red); background: var(--red-lo); }

.admin-body { padding: 20px; max-width: 700px; margin: 0 auto; width: 100%; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.user-count {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
}
.btn-add {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: filter .15s;
}
.btn-add:hover { filter: brightness(1.1); }

/* ── Onglets admin + Fiches produits ─────────── */
.admin-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.admin-tab { flex: 1; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted2); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; }
.admin-tab.active { background: var(--accent); border-color: var(--accent); color: #000; }
.aprod-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.aprod-search { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; padding: 10px 12px; font-family: inherit; }
.aprod-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
.aprod-filter-row select { flex: 1; min-width: 110px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; padding: 8px 10px; font-family: inherit; }
/* Propositions de correction */
.chip-alert { background: var(--accent); color: #000; cursor: pointer; font-weight: 700; }
/* Nouveaux comptes : simple repère de lecture, rien à valider */
.new-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #000; background: var(--accent); border-radius: 20px; padding: 2px 8px; vertical-align: middle; }
.user-card.est-nouveau { border-color: var(--accent); }
.btn-seen { background: none; border: 1px solid var(--border); border-radius: 20px; color: var(--muted2); font-size: 11px; padding: 3px 10px; cursor: pointer; font-family: inherit; }
.btn-seen:hover { border-color: var(--accent); color: var(--accent); }

/* ── Trier et filtrer la liste des comptes (25/08) ─────────────
   Le bouton actif est PLEIN, pas seulement souligné : sur une liste triée
   autrement qu'on ne croit, on cherche l'erreur dans les données avant de
   penser au tri. Il faut que l'ordre en cours se voie sans réfléchir. */
.recherche-comptes { margin: 0 0 10px; }
.tri-bar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 12px; }
.tri-btn {
  background: none; border: 1px solid var(--border); border-radius: 20px;
  color: var(--muted2); font-size: 12px; padding: 5px 12px; cursor: pointer;
  font-family: inherit; transition: all .15s; white-space: nowrap;
}
.tri-btn:hover { border-color: var(--accent); color: var(--accent); }
.tri-btn.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.tri-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }
/* Une demande de compte pro attend une décision humaine. Le bouton le dit
   même ÉTEINT — sinon il faut penser à cliquer pour découvrir qu'on avait
   quelque chose à trancher. Même violet que le badge de la ligne. */
.tri-btn.attente { border-color: #7c3aed; color: #7c3aed; font-weight: 700; }
.tri-btn.attente.actif { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.tab-badge { display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 4px; border-radius: 9px; background: var(--accent); color: #000; font-size: 11px; font-weight: 700; }
.admin-tab.active .tab-badge { background: #000; color: var(--accent); }
.bug-texte { font-size:14px; line-height:1.55; margin:10px 0 8px; white-space:pre-wrap; }
.bug-tech { font-size:11px; color:var(--muted); opacity:.75; margin-bottom:10px; word-break:break-word; }
.sg-filter { font-size: 12px; color: var(--muted2); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sgc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; }
.sgc.traite { opacity: .55; }
.sgc-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sgc-nom { font-size: 14px; font-weight: 700; }
.sgc-marque { font-size: 12px; color: var(--muted2); }
.sgc-meta { font-size: 11px; color: var(--muted); margin-left: auto; }
.sgc-statut { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 8px; }
.sgc-statut.nouveau { background: var(--accent); color: #000; }
.sgc-statut.applique { background: rgba(54,201,138,.2); color: #36c98a; }
.sgc-statut.rejete { background: rgba(239,88,104,.18); color: var(--red); }
.sgc-diff { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.sgc-l { display: grid; grid-template-columns: 130px 1fr auto 1fr; gap: 8px; align-items: center; font-size: 12.5px; }
.sgc-champ { color: var(--muted2); }
.sgc-avant { color: var(--muted); text-decoration: line-through; }
.sgc-apres { color: #36c98a; font-weight: 600; }
.sgc-com { font-size: 12.5px; color: var(--muted2); font-style: italic; margin-bottom: 10px; }
.sgc-genre { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--green); background: var(--green-lo); border-radius: 20px; padding: 2px 8px; }
.sgc-src { color: var(--accent); word-break: break-all; }
.sgc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.aprod-grid { display: flex; flex-direction: column; gap: 8px; }
.aprod-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; }
.aprod-card .apc-photo { position: relative; width: 44px; height: 44px; border-radius: 8px; background: #0b0b0d; border: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.aprod-card .apc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aprod-card .apc-main { flex: 1; min-width: 0; }
.apc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apc-name { font-weight: 700; font-size: 14px; }
.apc-type { font-size: 10px; font-weight: 700; color: var(--accent); background: var(--accent-lo); border-radius: 20px; padding: 2px 8px; }
.apc-cert { font-size: 10px; font-weight: 700; color: var(--green); background: var(--green-lo); border-radius: 20px; padding: 2px 8px; cursor: pointer; }
.apc-uncert { font-size: 10px; color: var(--muted); border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px; cursor: pointer; }
.apc-meta { font-size: 12px; color: var(--muted2); margin-top: 2px; }
.apc-creator { color: var(--muted); font-size: 11px; }
.apc-nutri { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 5px; font-size: 11.5px; color: var(--muted2); }
.apc-nutri b { color: var(--text); font-weight: 600; }
.apc-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
.apc-actions button { background: none; border: none; font-size: 15px; cursor: pointer; opacity: .8; }
.aprod-creator { font-size: 12px; color: var(--muted2); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 14px; }

.user-list { display: flex; flex-direction: column; gap: 10px; }

.user-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.user-card-link {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

/* ── L'état des plateformes (27/08) ─────────────── */
.quota-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 12px; }
.quota {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 16px;
  display: flex; flex-direction: column; gap: 9px;
}
.quota h4 { font-size: 13px; font-weight: 700; margin: 0; display: flex; align-items: baseline; gap: 7px; }
.quota h4 small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.quota .ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.quota .ligne span:first-child { color: var(--muted2); }
/* Les chiffres s'alignent : une colonne de nombres qui danse ne se compare pas. */
.quota .ligne b { font-variant-numeric: tabular-nums; }
.quota .muet { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
/* Un flex-container mange l'espace qui suit un emoji : le `gap` du h4 s'en
   charge une fois l'emoji séparé, et la ligne « pas branché » le fait à la main. */
.quota .muet span { margin-right: 4px; }
.quota.alerte { border-color: var(--red); }
.quota .alerte-txt { color: var(--red); font-weight: 700; font-size: 12.5px; }
.quota .ok-txt { color: #36c98a; font-size: 12.5px; }

/* ── RACES MODAL ─────────────────────────────── */
.races-empty { text-align:center; padding:28px 0; color:var(--muted); font-size:14px; }
.race-list { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.race-entry {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  /* ⚠️ La ligne porte un nom, une date, ce que la course contient, et trois
     boutons qui ne se compriment pas. Sans ce repli, le texte se retrouvait
     écrasé à 90 px et le nom sortait un mot par ligne — vu par Pierre le
     04/09, sur une fenêtre restée à la largeur par défaut. */
  flex-wrap: wrap;
}
/* Le texte prend ce qui reste, et cède la ligne aux boutons quand il n'y a
   plus la place. `min-width: 0` sans quoi un long nom refuse de se couper. */
.race-entry-texte { flex: 1 1 240px; min-width: 0; }
.race-entry:hover { border-color: var(--accent); background: var(--accent-lo); }
.race-entry-name { font-weight: 600; font-size: 14px; }
.race-entry-date { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-lo);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-fullname { font-weight: 700; font-size: 15px; }
.user-login {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  background: var(--accent-lo);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 2px 8px;
}
.race-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
}
/* Le badge qui ouvre les courses. C'est un vrai <button> : on l'atteint au
   clavier, et il annonce ce qu'il est. `.race-badge` lui donne déjà sa forme —
   il ne lui manque que la police, qu'un bouton n'hérite pas. */
.race-badge-btn {
  font-family: inherit; line-height: inherit; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.race-badge-btn:hover { border-color: var(--accent); color: var(--accent); }
.race-badge-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.user-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-icon-sm {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted2);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.btn-icon-sm:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-lo); }
.btn-icon-sm.del:hover { color: var(--red); border-color: var(--red); background: var(--red-lo); }

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.empty-state .emoji { font-size: 40px; display: block; margin-bottom: 12px; }

/* ── MODAL ───────────────────────────────────── */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 420px;
  /* Plus haute que l'écran — le formulaire d'une fiche de course avec ses 11
     points —, une modale centrée par flex débordait des deux côtés et son haut
     comme son bas devenaient inatteignables. Signalé par Pierre le 02/09 : elle
     défile maintenant à l'intérieur, la barre de boutons en fin de course. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.modal h2 { font-size: 18px; font-weight: 800; margin-bottom: 20px; }
/* Les courses en ligne (13/09/2026) : le feu FUCHSIA des voyants de la barre des
   menus — #FF2BD6, choisi à l'œil par Pierre le 11/09 —, qui clignote dès qu'un
   caillou est posé. Sans animation pour qui l'a demandé au système : un anneau. */
.course-en-ligne { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.course-en-ligne:last-child { border-bottom: 0; }
.course-en-ligne-nom { font-weight: 700; }
.course-en-ligne-code { font-size: 11px; font-weight: 600; color: var(--muted2); margin-left: 8px; }
.course-en-ligne-infos { font-size: 13px; color: var(--muted2); margin-top: 2px; }
.course-a-venir { display: flex; gap: 14px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 8px; }
.course-a-venir:hover { background: var(--surface2); }
.course-a-venir.test { opacity: .6; }
.course-a-venir-quand { flex: 0 0 64px; display: flex; flex-direction: column; font-size: 12px; color: var(--muted2); line-height: 1.3; }
.course-a-venir-quand b { font-size: 15px; color: var(--text); }
.course-a-venir-texte { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) { .course-a-venir { flex-wrap: wrap; } .course-a-venir-texte { flex-basis: calc(100% - 80px); } .course-a-venir .prepa { flex-basis: 100%; width: 100%; } }
.feu-course { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: #FF2BD6; }
.feu-course.clignote { animation: feu-clignote 1.2s ease-in-out infinite; }
@keyframes feu-clignote { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
  .feu-course.clignote { animation: none; box-shadow: 0 0 0 3px rgba(255,43,214,.35); }
}
.modal-field { margin-bottom: 14px; }
.modal-field label { display: block; font-size: 12px; color: var(--muted2); font-weight: 600; margin-bottom: 6px; letter-spacing: .03em; }
.modal-field input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  padding: 10px 13px;
  font-family: inherit;
  transition: border-color .15s;
}
.modal-field input:focus { outline: none; border-color: var(--accent); }
.modal-field .hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.modal-error { font-size: 13px; color: var(--red); margin-top: 10px; min-height: 16px; }
.mail-check {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--muted2);
  margin: 2px 0 14px; cursor: pointer; user-select: none;
}
.mail-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.admin-check {
  background: var(--accent-lo); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 2px 0 14px; color: var(--text);
}
.admin-badge {
  display: inline-block; font-size: 11px; font-weight: 700; vertical-align: middle;
  color: var(--accent); background: var(--accent-lo); border: 1px solid var(--accent);
  border-radius: 20px; padding: 1px 8px; margin-left: 6px;
}
.live-badge {
  display: inline-block; font-size: 11px; font-weight: 700; vertical-align: middle;
  color: var(--green); background: var(--green-lo); border: 1px solid var(--green);
  border-radius: 20px; padding: 1px 8px; margin-left: 6px;
}
.race-entry.live { border-color: var(--green); background: var(--green-lo); }

.btn {
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: all .15s;
}
.btn-primary { background: var(--accent); color: #000; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary { background: none; color: var(--muted2); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--muted2); color: var(--text); }
.btn-danger { background: var(--red-lo); color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }

/* ── TOAST ───────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--green);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 100px;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 999;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.divider { font-size: 11px; color: var(--muted); text-align: center; margin: 6px 0 14px; position: relative; }
.divider::before, .divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: var(--border);
}
.divider::before { left: 0; }
.divider::after { right: 0; }

/* iPhone : empêche le zoom auto de Safari sur les champs (police < 16px) */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px !important; }
}

/* Le numéro de version de la console, à côté de la déconnexion. Un bouton
   depuis la 1.1.32 : un clic ouvre les notes de version, comme le badge de
   l'écran de connexion (Pierre, 11/09). */
.admin-version {
  font-size: 11.5px; color: var(--muted2); font-variant-numeric: tabular-nums;
  white-space: nowrap; margin-right: 4px;
  background: none; border: 1px solid transparent; border-radius: 100px;
  padding: 2px 8px; font-family: inherit; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.admin-version:hover { color: var(--text); border-color: var(--border); }
.admin-version:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── La panne de base de données ────────────────
   Elle reste affichée tant qu'elle dure : un toast de deux secondes ne serait
   pas vu sur un écran qu'on regarde depuis dix minutes. Et elle est en HAUT,
   parce que le symptôme (« aucun produit ») s'observe plus bas — c'est la
   première chose à lire quand on cherche pourquoi une liste est vide. */
.panne-base {
  position: sticky; top: 0; z-index: 200;
  background: var(--red); color: #000;   /* comme le toast : fond clair, texte noir */
  font-size: 13px; font-weight: 700; line-height: 1.45;
  padding: 11px 16px; text-align: center;
}

/* ── Répondre à un signalement (26/08) ─────────────────────────
   La réponse part chez quelqu'un qui ne s'est pas nommé : elle doit se
   rédiger dans le même geste que le traitement, sinon elle s'oublie. */
.bug-rep-champ {
  width: 100%; margin: 0 0 8px; padding: 9px 11px; box-sizing: border-box;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-family: inherit; font-size: 13px; line-height: 1.45; resize: vertical;
}
.bug-rep-champ:focus { outline: none; border-color: var(--accent); }
.bug-reponse {
  margin: 8px 0 0; padding: 9px 11px; font-size: 13px; line-height: 1.5;
  background: var(--accent-lo); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text);
}
.bug-reponse b { color: var(--accent); margin-right: 6px; }

/* Le bouton des avis : plein quand ils sont actifs. Un simple changement de
   libellé ne se voit pas d'un coup d'œil, et c'est un réglage qu'on vérifie
   plus souvent qu'on ne le change. */
#btnAvis.actif { background: var(--accent); border-color: var(--accent); color: #000; }

/* ── Les fiches de course (1.1) ─────────────────────────────── */
/* Le tableau des barrières : en tête de chaque proposition, avant le nom et
   l'auteur — c'est le seul champ qui blesse. */
.fiche-pts { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 8px; }
.fiche-pts th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 4px 8px 6px; border-bottom: 1px solid var(--border); }
.fiche-pts td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.fiche-pts input, .fiche-pts select { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 7px; font-size: 12.5px; }
.fiche-pts input:focus, .fiche-pts select:focus { outline: none; border-color: var(--accent); }
.fiche-site { font-size: 13px; margin: 6px 0 2px; }
.fiche-prov { font-size: 12px; color: var(--muted2); }
.fiche-prov.relue, .fiche-prov.confirmee { color: var(--green); }
#ficheModal .modal-field select,
#copieModal .modal-field select { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 10px; font-size: 13.5px; }
.roles-aide { margin: 8px 0 4px; font-size: 12.5px; }
.roles-aide summary { color: var(--accent); cursor: pointer; font-weight: 600; }
.roles-aide ul { list-style: none; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.roles-aide li { color: var(--muted2); line-height: 1.45; }
.roles-aide li b { color: var(--text); font-weight: 600; }
.sgc-doublon { background: var(--card-alt, var(--surface2)); border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px; font-size: 12.5px; }
.sgc-doublon.fort { border-left-color: var(--accent); }
.sgc-doublon > b { display: block; margin-bottom: 6px; font-size: 12.5px; }
.sgc-doublon-l { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; color: var(--muted); padding: 2px 0; }
.lien-fiche { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; }

/* ── La fiche d'une course, au clic (04/09) ─────────────────── */
.cf-sous { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.cf-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cf-c { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.cf-n { font-size: 19px; font-weight: 700; line-height: 1.15; }
.cf-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.cf-coureurs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cf-coureurs span { background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.cf-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* Copier une course vers un autre compte. */
.copie-note { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; }
.copie-fait { font-size: 13.5px; line-height: 1.6; margin: 14px 0 0; }

/* ── Le repère d'un menu déroulant passe AVANT le texte ──────────────
   ⚠️ Pierre, 20/09 : « les menus déroulants doivent être avant le texte
   partout, sinon on ne comprend pas ». Dans un tableau, un <select> large
   pousse son chevron natif à l'extrême droite de sa colonne : à cinq cents
   pixels du mot, plus rien ne dit que c'est un menu — on lit « Flasque » et
   on croit une étiquette qu'on ne peut pas changer.
   Le repère se colle donc au texte qu'il commande, à sa gauche.
   ⚠️ `appearance: none` est indispensable : sans lui, le chevron natif RESTE
   à droite et on en aurait deux.
   ⚠️ La règle est en FIN de fichier et nomme chaque famille de menus : une
   déclaration `background:` en raccourci (`.cell-input`, `.field select`)
   remet `background-image` à `none`, et une règle plus faible ou plus haute
   se ferait effacer en silence.
   Le dessin est une donnée SVG : `img-src 'self' data:` l'autorise déjà. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b8b96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 7px center;
  background-size: 10px 6px;
  padding-left: 23px;
}

/* ── Pacing et stratégie dans le résumé d'une course (20/09) ────────
   Demandé par Pierre. Rien n'est calculé ici sauf l'allure moyenne : tout le
   reste est écrit dans la course. Un bloc par coureur, parce qu'un plan de
   course et une stratégie sont propres à quelqu'un. */
.cf-titre {
  margin: 18px 0 8px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.cf-pace {
  padding: 12px 14px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.cf-pace-nom { font-weight: 700; margin-bottom: 4px; }
.cf-pace-l { font-size: 12.5px; color: var(--muted2); line-height: 1.5; }
.cf-pace-vide { color: var(--muted); font-style: italic; }
.cf-pace .fiche-pts { margin-top: 10px; }
/* L'unité en petit : le chiffre est ce qu'on lit, l'unité ce qui le qualifie.
   Les mettre au même poids ferait chercher deux fois. */
.cf-u { font-size: 11px; color: var(--muted); }
/* Le titre d'un des trois tableaux d'un coureur — sections, ravitos,
   stratégie. Sans eux, trois tableaux se suivaient sans qu'on sache lequel
   répondait à quoi. */
.cf-sous {
  margin: 12px 0 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
/* La ligne du total se détache : c'est une somme, pas un segment de plus. */
.cf-sec-total td { border-top: 2px solid var(--border); border-bottom: none; }
/* Un ravito traversé sans s'arrêter reste lisible, mais s'efface : ce qu'on
   cherche dans ce tableau, ce sont les arrêts. */
.cf-rav-passe td { color: var(--muted); }
/* Une marge négative, c'est la barrière manquée. Elle ne doit pas se lire
   comme les autres chiffres. */
.cf-rav-court { color: var(--red); }
/* Le titre d'un groupe de matériel, DANS le tableau : hydratation,
   obligatoire, personnel. Trois tableaux séparés auraient fait trois
   en-têtes identiques pour cinq lignes. */
.cf-mat-groupe td {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  padding-top: 10px; border-bottom: none;
}
.cf-pace tbody tr:first-child .cf-mat-groupe td, .cf-mat-groupe:first-child td { padding-top: 2px; }

/* Le taux de préparation d'une course à venir (25/09) : un anneau qui se
   remplit, le taux, et ce qui manque. Le détail est dans l'infobulle. */
.prepa { display: flex; align-items: center; gap: 8px; flex: 0 0 215px; width: 215px; min-width: 0; }
.prepa-anneau { position: relative; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; }
.prepa-anneau::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bg); }
.prepa-texte { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.3; }
.prepa-texte b { font-size: 12.5px; color: var(--text); white-space: nowrap; }
.prepa-texte span { color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Les cartes des signalements, des suggestions et des autocollants ──
   Elles n'avaient AUCUN style (audit du 25/09) : les classes sg-* et bug-*
   étaient posées, jamais décrites — et une carte « nouveau » ne se
   distinguait pas d'une carte traitée. */
.sg-card, .bug-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 10px;
}
.sg-card.sg-neuf { border-color: var(--accent); background: var(--accent-lo); }
.sg-head, .bug-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.sg-nom { font-weight: 700; }
.sg-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.bug-body { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.sg-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.sg-pill { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 9px; white-space: nowrap; border: 1px solid var(--border); }
.sg-ok { color: var(--green); border-color: var(--green); background: var(--green-lo); }
.sg-ko { color: var(--red); border-color: var(--red); background: var(--red-lo); }