/* ==========================================================================
   GT Magny-Cours 2026
   --------------------------------------------------------------------------
   Mobile d'abord, testé à 375 px, zones tactiles de 44 px minimum.

   Fond clair par défaut : l'app se lit en plein soleil, un thème sombre
   intégral y serait illisible. Le panneau de stand, lui, reste une ardoise
   sombre en permanence, c'est l'élément identitaire. Le thème sombre du
   système bascule le reste pour les sessions de nuit.
   ========================================================================== */

:root {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --tap-min: 44px; /* zone tactile minimale, BRIEF chapitre 4 */

  --fond: #f2f1ee;
  --carte: #ffffff;
  --encre: #14181f;
  --encre-douce: #5b6472;
  --trait: #d9d7d1;
  --ardoise: #11151f;
  --ardoise-clair: #1c2331;
  --ardoise-encre: #f4f2ec;
  --accent: #d41f2c;        /* le rouge des panneaux du circuit */
  --accent-encre: #ffffff;
  --perso: #0a6ec4;         /* nos rendez-vous, distincts d'une session de piste */
  --perso-fond: #e4f0fb;
  --alerte: #9a3b00;
  --alerte-fond: #fdefe2;
  --vert: #1f7a45;
  --ombre: 0 1px 2px rgba(18, 22, 30, .08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0f1218;
    --carte: #171c25;
    --encre: #ecefF3;
    --encre-douce: #97a1b0;
    --trait: #2a3140;
    --perso-fond: #12283d;
    --alerte-fond: #351f10;
    --alerte: #f0a566;
    --vert: #4ac07c;
    --ombre: none;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  color: var(--encre);
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
  padding-bottom: calc(var(--tap-min) + 12px + env(safe-area-inset-bottom, 0px));
}

h2 {
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 26px 0 10px;
  color: var(--encre-douce);
}

h3 { font-size: 1rem; margin: 0 0 4px; }

p { margin: 0 0 10px; }

button, input, textarea {
  font-family: inherit;
  font-size: 1rem;
  color: inherit;
}

button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--perso);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -- Panneau de stand ---------------------------------------------------- */

.stand-board {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ardoise);
  color: var(--ardoise-encre);
  padding: 8px 10px calc(8px + env(safe-area-inset-top, 0px));
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

.board-classement {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.board-joueur {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 6px;
  align-items: baseline;
  background: var(--ardoise-clair);
  border-radius: 6px;
  padding: 4px 7px;
  border-left: 3px solid transparent;
}

.board-joueur.est-leader { border-left-color: var(--accent); }

.board-rang {
  font-family: var(--mono);
  font-size: .72rem;
  color: #8b96a8;
  grid-row: 1;
}

.board-nom {
  font-size: .72rem;
  letter-spacing: .12em;
  color: #b9c2cf;
  grid-row: 1;
}

.board-pts {
  grid-row: 2;
  grid-column: 1 / 3;
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.board-ecart {
  grid-row: 2;
  grid-column: 2;
  justify-self: end;
  align-self: end;
  font-family: var(--mono);
  font-size: .74rem;
  color: #f2c14e;
  font-variant-numeric: tabular-nums;
}

.board-joueur.est-leader .board-ecart { color: #8b96a8; }

.board-creneau {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  margin-top: 4px;
  border-left: 3px solid #4a5566;
}

.board-creneau.est-perso {
  border-left-color: #4fa3ea;
  background: rgba(79, 163, 234, .14);
}

.board-creneau.est-encours { border-left-color: var(--accent); }

.board-tag {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #97a3b4;
}

.board-titre {
  font-size: .86rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-heure {
  font-family: var(--mono);
  font-size: .76rem;
  color: #c3ccd8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board-heure b { color: #f2c14e; }

/* Une seule échelle typographique pour les cinq écrans : titre de ligne à
   .92rem, texte secondaire à .84rem, mention grise à .8rem. Les chiffres
   gardent leur taille, ce sont eux qu'on lit vite. */

/* -- Écrans -------------------------------------------------------------- */

.screen {
  padding: 12px 12px 24px;
  max-width: 640px;
  margin: 0 auto;
}

.screen[hidden] { display: none; }

/* -- Programme ----------------------------------------------------------- */

.jours {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.jour {
  flex: 1;
  min-height: var(--tap-min);
  border: 1px solid var(--trait);
  background: var(--carte);
  border-radius: 8px;
  font-weight: 600;
}

/* Le jour actif doit se voir sans hésitation dans les deux thèmes : en sombre,
   une ardoise sur un fond déjà sombre ne se distingue pas. */
.jour.est-actif {
  background: var(--accent);
  color: var(--accent-encre);
  border-color: var(--accent);
}

.alerte {
  background: var(--alerte-fond);
  border: 1px solid var(--alerte);
  border-left-width: 5px;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.alerte h3 { color: var(--alerte); }
.alerte p { margin: 0; font-size: .92rem; }

.creneaux {
  list-style: none;
  margin: 0;
  padding: 0;
}

.creneau {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  padding: 7px 10px;
  line-height: 1.35;
  border-bottom: 1px solid var(--trait);
  background: var(--carte);
}

.creneau:first-child { border-radius: 8px 8px 0 0; }
.creneau:last-of-type { border-radius: 0 0 8px 8px; border-bottom: none; }

.creneau.est-passe { opacity: .45; }

.creneau.est-encours {
  background: color-mix(in srgb, var(--accent) 10%, var(--carte));
  border-left: 4px solid var(--accent);
  padding-left: 6px;
}

.creneau.prio-perso {
  background: var(--perso-fond);
  border-left: 4px solid var(--perso);
  padding-left: 6px;
}

.creneau.prio-perso.est-alerte {
  background: var(--alerte-fond);
  border-left-color: var(--alerte);
}

.creneau.prio-mineur { opacity: .7; }
.creneau.prio-mineur .creneau-titre { font-size: .84rem; font-weight: 500; }

.creneau-heure {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .88rem;
}

.creneau-fin {
  display: block;
  font-weight: 400;
  font-size: .74rem;
  color: var(--encre-douce);
}

/* Le programme est une longue liste qu'on parcourt du regard : à 1 rem les
   libellés du timetable, souvent longs, passaient à la ligne pour rien. */
.creneau-titre { font-weight: 600; font-size: .92rem; }

.creneau-soustitre {
  font-size: .8rem;
  color: var(--encre-douce);
}

.marque {
  display: inline-block;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: 2px;
  font-weight: 700;
}

/* Une course se repère à son heure en rouge : un badge de plus aurait fait
   passer le libellé à la ligne pour redire ce qu'il dit déjà. */
.creneau.kind-course .creneau-heure { color: var(--accent); }
.creneau.kind-course .creneau-titre { font-weight: 700; }
.marque.nuit { background: #2b3b57; color: #cfe0f7; }
.marque.live { background: var(--accent); color: var(--accent-encre); }

.lien-photo {
  margin-top: 4px;
  background: none;
  border: none;
  padding: 6px 0;
  min-height: 32px;
  color: var(--perso);
  text-decoration: underline;
  font-size: .84rem;
}

.bascule {
  width: 100%;
  min-height: var(--tap-min);
  margin-top: 10px;
  border: 1px dashed var(--trait);
  background: none;
  border-radius: 8px;
  color: var(--encre-douce);
}

.bon-a-savoir .savoir {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 8px;
  margin-bottom: 6px;
  padding: 0 10px;
}

.savoir.est-alerte { border-color: var(--alerte); }

.savoir summary {
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
}

.savoir p { font-size: .84rem; }
.savoir .source { color: var(--encre-douce); font-size: .74rem; }

.fiabilite {
  margin-top: 18px;
  font-size: .76rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--trait);
  padding-top: 8px;
}

/* -- Plan ---------------------------------------------------------------- */

/* Le plan est large et bas : cadre plus haut que l'image pour laisser de la
   place au déplacement une fois zoomé, sinon on tire sur une bande de 180 px. */
.plan-cadre {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--trait);
  background: var(--ardoise);
  touch-action: none;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
}

.plan-cadre img {
  width: 100%;
  display: block;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.plan-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.plan-actions button {
  flex: 1;
  min-height: var(--tap-min);
  border: 1px solid var(--trait);
  background: var(--carte);
  border-radius: 8px;
}

.aide { font-size: .8rem; color: var(--encre-douce); margin-top: 6px; }

.lieux { list-style: none; margin: 0; padding: 0; }

.lieu {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.lieu.est-alerte { border-color: var(--alerte); background: var(--alerte-fond); }
.lieu > h3 { font-size: .92rem; }
.lieu p { font-size: .84rem; margin: 0 0 4px; }
.lieu .quand { color: var(--encre-douce); font-size: .8rem; }

.photo-plein {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 10, 15, .96);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
}

.photo-plein img { max-width: 100%; max-height: 76vh; border-radius: 8px; }

.photo-plein .fermer {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: none;
  border-radius: 8px;
}

/* -- Jeux ---------------------------------------------------------------- */

.jeu {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
}

.jeu h2 { margin-top: 0; color: var(--encre); }

.regle { font-size: .84rem; color: var(--encre-douce); }
.regle.petite { font-size: .78rem; }

.avertissement {
  font-size: .84rem;
  background: var(--alerte-fond);
  border-left: 4px solid var(--alerte);
  padding: 8px 10px;
  border-radius: 0 6px 6px 0;
}

.repere {
  font-size: .86rem;
  background: var(--perso-fond);
  border-left: 4px solid var(--perso);
  padding: 8px 10px;
  border-radius: 0 6px 6px 0;
}

.reglages {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: .88rem;
  color: var(--encre-douce);
}

.pastille {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 12px;
  border: 1px solid var(--trait);
  background: var(--fond);
  border-radius: 8px;
  font-weight: 600;
}

.pastille.est-actif {
  background: var(--ardoise);
  color: var(--ardoise-encre);
  border-color: var(--ardoise);
}

.pastille.large { flex: 1; }

.principal {
  min-height: var(--tap-min);
  padding: 0 14px;
  border: none;
  background: var(--accent);
  color: var(--accent-encre);
  border-radius: 8px;
  font-weight: 700;
}






.vide { color: var(--encre-douce); font-style: italic; }

.saisie, .course, .bingo-joueur {
  border: 1px solid var(--trait);
  border-radius: 8px;
  margin-bottom: 6px;
  padding: 0 10px;
}

.saisie summary, .course summary, .bingo-joueur summary {
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: .9rem;
}

.course.est-verrouille summary { color: var(--encre-douce); }

.course-heure { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.course-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.cadenas {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--trait);
  color: var(--encre-douce);
  padding: 2px 6px;
  border-radius: 4px;
}

.champ {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.champ > span { min-width: 88px; font-size: .88rem; color: var(--encre-douce); }

.champ input {
  flex: 1;
  min-height: var(--tap-min);
  padding: 0 10px;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--fond);
  font-family: var(--mono);
  min-width: 0;
}

.champ .lecture {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--encre-douce);
  min-width: 66px;
  text-align: right;
}

.champ-reel input { border-color: var(--accent); }

.grille-top10 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 8px 0 10px;
}

/* Sans min-width: 0, une case de grille refuse de descendre sous la largeur
   intrinsèque d'un champ nombre, et la grille déborde de la carte. */
.grille-top10 > * { min-width: 0; }

.champ.mini { margin: 0; }
.champ.mini > span {
  min-width: 22px;
  font-family: var(--mono);
  text-align: right;
  font-weight: 700;
  color: var(--encre);
}

.separateur-jour {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--encre-douce);
  margin: 12px 0 6px;
}

table.pronos {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0;
  font-size: .86rem;
}

table.pronos th, table.pronos td {
  padding: 3px 2px;
  text-align: left;
  border-bottom: 1px solid var(--trait);
}

table.pronos thead th {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--encre-douce);
}

table.pronos input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 6px;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--fond);
  font-family: var(--mono);
}

table.pronos input:disabled { opacity: .5; }

.oui-non, .bonus {
  min-height: 38px;
  min-width: 42px;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--fond);
  font-weight: 700;
  font-family: var(--mono);
}

.oui-non.est-oui { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.oui-non.est-non { background: var(--vert); color: #fff; border-color: var(--vert); }
.oui-non:disabled { opacity: .5; }

.reel {
  background: var(--fond);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 8px 0;
}

.reel h4 { margin: 0 0 4px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); }
.reel .oui-non { width: 100%; min-height: var(--tap-min); }





.defi { margin-bottom: 10px; }
.defi h3 { display: flex; justify-content: space-between; align-items: baseline; }
.defi h3 span { font-size: .78rem; color: var(--encre-douce); font-weight: 400; }
.defi > div { display: flex; gap: 6px; }

.points-jeu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
  border-top: 1px solid var(--trait);
  padding-top: 8px;
}

.points-jeu div { text-align: center; }
.points-jeu span { display: block; font-size: .74rem; color: var(--encre-douce); }
.points-jeu b { font-family: var(--mono); font-size: 1.15rem; }

/* -- Classement ---------------------------------------------------------- */

.podium { list-style: none; margin: 0 0 14px; padding: 0; }

.podium li {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
}

.podium .rang { font-family: var(--mono); font-size: 1.3rem; color: var(--encre-douce); }
.podium .nom { font-weight: 600; font-size: .95rem; }
.podium .pts { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; }
.podium .ecart { font-family: var(--mono); font-size: .8rem; color: var(--alerte); min-width: 34px; text-align: right; }
.podium .rang-1 { border-color: var(--accent); }

table.detail {
  width: 100%;
  border-collapse: collapse;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 8px;
  overflow: hidden;
  font-size: .88rem;
}

table.detail th, table.detail td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--trait);
  text-align: right;
}

table.detail thead th { text-align: right; font-size: .74rem; text-transform: uppercase; color: var(--encre-douce); }
table.detail th[scope="row"], table.detail thead th:first-child { text-align: left; font-weight: 600; }
table.detail td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.detail .total { background: var(--fond); font-weight: 700; }

.bonus-libre { display: flex; gap: 6px; }
.bonus-libre .pastille { flex-direction: column; }
.bonus-libre b { display: block; font-family: var(--mono); font-size: 1.1rem; }

.joueurs-edition .champ input { font-family: var(--sans); }

.actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* Un display: flex d'auteur l'emporte sur le display: none que le navigateur
   applique à [hidden] : sans cette ligne, les boutons Restaurer et Annuler
   restent visibles alors que la zone de collage est fermée. */
[hidden] { display: none !important; }

/* Deux boutons par ligne à 375 px : environ 170 px chacun. À 1 rem, « Partager
   le classement » passait à la ligne et les quatre boutons n'avaient plus la
   même hauteur. On resserre la police et les marges plutôt que d'abréger les
   libellés, qui disent ce qu'ils font. */
.actions button {
  flex: 1 1 45%;
  min-height: var(--tap-min);
  padding: 6px 8px;
  border: 1px solid var(--trait);
  background: var(--carte);
  border-radius: 8px;
  font-size: .84rem;
  line-height: 1.25;
  font-weight: 400;
}

.actions .principal { border: none; }
.actions .danger { color: var(--accent); border-color: var(--accent); }

.zone-import {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 8px;
  background: var(--carte);
  font-family: var(--mono);
  font-size: .8rem;
}

.message { min-height: 1.4em; color: var(--vert); font-size: .88rem; font-weight: 600; }

.sources { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.sources li { padding: 4px 0; border-bottom: 1px solid var(--trait); }
.sources span { color: var(--encre-douce); font-size: .76rem; }

/* -- Navigation basse ---------------------------------------------------- */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  background: var(--carte);
  border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tab {
  flex: 1;
  min-height: var(--tap-min);
  border: none;
  background: none;
  font-size: .82rem;
  font-weight: 600;
  color: var(--encre-douce);
  border-top: 3px solid transparent;
}

.tab.est-actif { color: var(--encre); border-top-color: var(--accent); }

/* -- Écrans un peu plus larges ------------------------------------------- */

@media (min-width: 420px) {
  .grille-top10 { grid-template-columns: repeat(5, 1fr); }
}

/* -- Blocs ajoutés à la refonte du 30/07 --------------------------------- */

/* Le titre et ses badges : un espace réel, pour que le lecteur d'écran ne
   colle pas « Essais Qualificatifs » et « direct » en un seul mot. */
.creneau-titre > span { margin-right: 4px; }

.bonus-tag {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--fond);
  border: 1px solid var(--trait);
  color: var(--encre-douce);
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: 2px;
}

.oui-non.large {
  width: 100%;
  min-height: var(--tap-min);
  margin-top: 6px;
  font-family: var(--sans);
}

/* Détail des points d'une course : d'où viennent les points, joueur par
   joueur. Il n'apparaît qu'une fois l'arrivée saisie. */
.detail-course {
  border-top: 1px solid var(--trait);
  margin-top: 10px;
  padding-top: 8px;
}

.detail-course h4 {
  margin: 0 0 6px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--encre-douce);
}

.detail-joueur {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  padding: 4px 0;
  border-bottom: 1px solid var(--trait);
  font-size: .8rem;
}

.detail-joueur:last-child { border-bottom: none; }
.detail-joueur > b { min-width: 34px; }

.detail-joueur span {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--fond);
  color: var(--encre-douce);
  font-family: var(--mono);
  font-size: .74rem;
}

.detail-joueur span.gagne {
  background: var(--vert);
  color: #fff;
  font-weight: 700;
}

.detail-joueur em {
  margin-left: auto;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 700;
}

/* Liste des 45 engagés, en consultation pendant les courses GT3. */
.engages { list-style: none; margin: 0; padding: 0; }

.engages li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--trait);
  font-size: .84rem;
  line-height: 1.35;
}

.engages li:last-child { border-bottom: none; }
.engages li b { font-family: var(--mono); }
.engages li span { display: block; color: var(--encre-douce); font-size: .74rem; }

/* -- Écran Engagés -------------------------------------------------------- */

.serie {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
}

.serie > h3 {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  font-size: .95rem;
}

.serie > h3 span {
  font-size: .76rem;
  font-weight: 400;
  color: var(--encre-douce);
  text-transform: none;
  letter-spacing: 0;
}

table.classement-serie {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  margin-bottom: 8px;
}

table.classement-serie tr { border-bottom: 1px solid var(--trait); }
table.classement-serie tr:last-child { border-bottom: none; }

table.classement-serie th {
  text-align: left;
  font-weight: 500;
  padding: 5px 6px;
}

table.classement-serie th .num {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--encre-douce);
  margin-left: 5px;
}

table.classement-serie .cat {
  font-size: .58rem;
  padding: 0 5px;
  vertical-align: 1px;
}

.saisie summary .cat { margin-left: 4px; }

table.classement-serie .pos {
  width: 30px;
  font-family: var(--mono);
  color: var(--encre-douce);
  text-align: right;
  padding: 5px 0;
}

table.classement-serie .pts {
  width: 52px;
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: 5px 0;
}

/* Les trois premiers d'un championnat se repèrent d'un coup d'oeil. */
table.classement-serie tr:nth-child(-n+3) .pts { color: var(--accent); }

.engages li .cat {
  display: inline-block;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--fond);
  border: 1px solid var(--trait);
  color: var(--encre-douce);
  border-radius: 4px;
  padding: 0 5px;
  margin-left: 6px;
}

/* Couleurs de catégorie. Elles ne changent rien au barème, elles disent d'un
   coup d'oeil à quoi on a affaire : du rouge le plus fort au bleu le plus
   modeste, dans l'ordre théorique PRO, GOLD, SILVER, BRONZE côté GT3, et
   Pro-Am, Am, Ginetta Cup, Alpine Elf Cup Series côté FFSA GT. Teintes assez
   sombres pour rester lisibles en blanc, de jour comme de nuit. */

.cat-pro    { --teinte: #b3232f; }
.cat-gold   { --teinte: #9a7113; }
.cat-silver { --teinte: #5c6773; }
.cat-bronze { --teinte: #8a4a22; }
.cat-pro-am { --teinte: #b3232f; }
.cat-am     { --teinte: #5c6773; }
.cat-gcup   { --teinte: #1f6d5a; }
.cat-aecs   { --teinte: #3b5ba8; }
.cat-rookie { --teinte: #6b4a9a; }

/* FFSA Tourisme : six catégories, des TCR les plus rapides aux TC Cup. */
.cat-tcr       { --teinte: #b3232f; }
.cat-tc        { --teinte: #9a5a13; }
.cat-gt-light  { --teinte: #1f6d5a; }
.cat-tca       { --teinte: #3b5ba8; }
.cat-tca-light { --teinte: #5c6773; }
.cat-tc-cup    { --teinte: #6b4a9a; }

.legende-cat {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.cat {
  display: inline-block;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--teinte, var(--encre-douce));
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
}

.engages li.separateur-cat {
  display: block;
  border-bottom: none;
  padding: 10px 0 3px;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teinte, var(--encre-douce));
}

.engages li:not(.separateur-cat) {
  border-left: 3px solid var(--teinte, transparent);
  padding-left: 7px;
}

.engages li .cat { margin-left: 6px; }

/* Dans le détail d'une course, la catégorie est un simple liseré : la ligne est
   déjà chargée, un second badge plein la rendrait illisible. */
.detail-joueur span i.cat {
  font-style: normal;
  background: none;
  color: var(--teinte, var(--encre-douce));
  padding: 0 0 0 5px;
  font-size: .62rem;
}

.detail-joueur span.gagne i.cat { color: rgba(255, 255, 255, .82); }

/* Cinq onglets tiennent à 375 px si le libellé reste court. */
.tab { font-size: .78rem; padding: 0 2px; }

/* -- Vainqueurs de classe ------------------------------------------------- */

table.pronos.classes thead th { padding-bottom: 3px; }
table.pronos.classes .cat { font-size: .56rem; padding: 0 4px; }

.grille-classes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 8px 0 4px;
}

.grille-classes > * { min-width: 0; }
.grille-classes .champ { margin: 0; gap: 5px; }
.grille-classes .cat { flex: none; }

/* Une voiture saisie hors de sa classe : garde-fou visuel, pas une règle de
   score. Le moteur compte ce qui est écrit, il ne corrige personne. */
input.est-incoherent {
  border-color: var(--alerte);
  background: var(--alerte-fond);
}

@media (min-width: 420px) {
  .grille-classes { grid-template-columns: repeat(4, 1fr); }
}

/* -- Compteurs du bonus libre --------------------------------------------- */

.compteurs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.compteur {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 72px;
  padding: 8px 4px;
  line-height: 1.2;
}

.compteur .compteur-nom { font-size: .84rem; }

.compteur b {
  font-family: var(--mono);
  font-size: 1.35rem;
  color: var(--vert);
}


/* -- Allègement des graisses dans les jeux -------------------------------- */
/* Tout était en gras, donc plus rien ne ressortait. On ne garde du poids que
   là où il porte une information : les totaux et les badges de catégorie. Les
   noms de joueurs sont des étiquettes, pas des titres. */

table.pronos th[scope="row"],
.detail-joueur > b,
.compteur .compteur-nom,
.joueurs-edition .champ > span {
  font-weight: 400;
}

#screen-jeux .pastille,
#screen-jeux .oui-non,
#screen-jeux .bonus,
#screen-jeux .champ.mini > span,
.engages li b,
.bonus-libre .pastille {
  font-weight: 500;
}

.points-jeu b,
.compteur b,
.detail-joueur span.gagne {
  font-weight: 500;
}

/* Le total d'une ligne de détail et les points d'un classement gardent leur
   poids : ce sont eux qu'on cherche du regard. */
.detail-joueur em,
table.classement-serie .pts {
  font-weight: 600;
}

.cat, .marque, .bonus-tag { font-weight: 600; }

table.pronos thead th { font-weight: 500; }
.serie > h3 { font-weight: 600; }

/* Les trois lettres d'un joueur dans les jeux : espacées, comme sur le panneau
   de stand, pour qu'on les lise comme un code et non comme un mot tronqué. */
#screen-jeux table.pronos th[scope="row"],
#screen-jeux .champ > span,
#screen-jeux .points-jeu span,
#screen-jeux .detail-joueur > b,
.compteur .compteur-nom {
  letter-spacing: .1em;
  font-size: .78rem;
  color: var(--encre-douce);
}

#screen-jeux table.pronos th[scope="row"] { width: 42px; }

/* Dans les Scores, le gras est réservé aux chiffres du classement. Les boutons
   d'action sont des libellés, leur bordure suffit à les désigner. */
#screen-classement .actions .principal,
#screen-classement .message { font-weight: 500; }