/* Design tokens — handoff Claude Design, section « Design tokens ». */
:root {
  --fond: #161616;
  --surface: #1E1E1E;
  --surface-tete: #1B1B1B;
  --bordure: rgba(255, 255, 255, .08);
  --bordure-tete: rgba(255, 255, 255, .1);
  --bordure-ligne: rgba(255, 255, 255, .055);

  --txt-1: #FEFEFE;
  --txt-2: #C0C0C0;
  --txt-3: #8A8A8A;
  --inactif: #4A4A4A;

  --accent: #FEBE10;
  --alerte: #DA1F26;
  --alerte-txt: #FF6A5A;
  --vert: #4ADE80;
  --violet: #C084FC;
  --bronze: #CD7F32;
  --voile-leader: rgba(254, 190, 16, .05);

  --ui: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}

* { box-sizing: border-box; }

/* ⚠️ `hidden` doit VRAIMENT masquer.
   `[hidden] { display: none }` vient de la feuille du NAVIGATEUR : n'importe
   quelle regle d'AUTEUR posant un `display` l'emporte, quelle que soit la
   specificite. Le back-office en a fait les frais — tous ses panneaux
   s'affichaient en meme temps, onglets apparemment morts. Les elements
   masquables de cette page (bannieres, chips de compte, carte video) sont dans
   le meme cas des qu'on leur pose un display. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--txt-1);
  font-family: var(--ui);
  font-weight: 400;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  /* Densite d'affichage. 1.2 par defaut : les tokens du handoff sont calibres
     pour une reference 1440 px, un peu serres sur un ecran de portable.
     Reglable dans le panneau Reglages, memorise par navigateur. */
  zoom: 1.2;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }

/* micro-libellé */
.k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.k.d { text-align: right; }

.note { font-size: 11px; color: var(--txt-3); }

.separateur { width: 1px; height: 18px; background: rgba(255, 255, 255, .14); }

/* ---------------------------------------------------------------- entête */
#entete {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--bordure);
}
.marque {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--alerte));
  flex: none;
}
.wordmark { font-size: 12px; font-weight: 400; letter-spacing: .2em; }

.filet {
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--alerte) 55%, rgba(218, 31, 38, 0));
}

/* ---------------------------------------------------------------- chips */
.chip {
  font-family: var(--ui); font-size: 11px; color: var(--txt-2);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 99px;
  padding: 5px 12px;
  cursor: pointer;
}
.chip:hover { border-color: rgba(255, 255, 255, .25); color: var(--txt-1); }
.chip.actif { background: var(--txt-1); color: var(--fond); border-color: var(--txt-1); font-weight: 500; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- bandeau */
#bandeau {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px;
  background: linear-gradient(90deg, rgba(74, 222, 128, .13), rgba(74, 222, 128, 0) 60%);
  transition: background .4s;
}
#bandeau[data-drapeau="jaune"] { background: linear-gradient(90deg, rgba(254, 190, 16, .13), rgba(254, 190, 16, 0) 60%); }
#bandeau[data-drapeau="rouge"] { background: linear-gradient(90deg, rgba(218, 31, 38, .16), rgba(218, 31, 38, 0) 60%); }
#bandeau[data-drapeau="inconnu"] { background: linear-gradient(90deg, rgba(192, 132, 252, .14), rgba(192, 132, 252, 0) 60%); }

.pastille-drapeau { width: 12px; height: 26px; border-radius: 3px; background: var(--vert); flex: none; }
#bandeau[data-drapeau="jaune"] .pastille-drapeau { background: var(--accent); }
#bandeau[data-drapeau="rouge"] .pastille-drapeau { background: var(--alerte); }
#bandeau[data-drapeau="inconnu"] .pastille-drapeau { background: var(--violet); }

/* Fin de course. `damier` = drapeau tombe, `terminee` = seance figee : deux
   etats distincts du chrono, meme lecture visuelle — la course est finie. */
#bandeau[data-drapeau="damier"],
#bandeau[data-drapeau="terminee"] {
  background: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, .10) 0 11px, rgba(255, 255, 255, .028) 11px 22px);
}
#bandeau[data-drapeau="damier"] .pastille-drapeau,
#bandeau[data-drapeau="terminee"] .pastille-drapeau {
  background: repeating-conic-gradient(#FEFEFE 0 25%, #2A2A2A 0 50%) 0 0 / 7px 7px;
}
/* Dernier tour : un liseré ambre, lisible de loin dans un stand. */
#bandeau.dernier-tour { box-shadow: inset 0 -3px 0 var(--accent); }

.drapeau-libelle { font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.titre-session { color: var(--txt-2); font-size: 13px; }
.bloc-etat { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.grand { font-size: 30px; font-weight: 500; line-height: 1; }
.moyen { font-size: 19px; font-weight: 500; line-height: 1; }

/* ---------------------------------------------------------------- bannières
   Ce qui met en doute ce qu'on lit se dit EN HAUT, avant le contenu. */
#banniere-simulateur, #banniere-chrono {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 9px 22px; text-align: center;
}

/* Bandeau de simulation : impossible de le confondre avec du vrai. */
#banniere-simulateur {
  background: repeating-linear-gradient(45deg,
    rgba(254, 190, 16, .14) 0 12px, rgba(254, 190, 16, .07) 12px 24px);
  border-bottom: 1px solid rgba(254, 190, 16, .4);
  color: var(--accent);
}

/*
 * Chronometrage en retard ou perdu.
 *
 * Deux intensites, et l'ecart entre les deux est voulu. « Retard » est
 * frequent et benin — un snapshot manque, une seance qui s'acheve — donc
 * discret. « Perdu » veut dire que le classement affiche n'est plus mis a
 * jour du tout : la, il faut que ce soit impossible a rater, parce que rien
 * d'autre a l'ecran ne distingue ce cas d'une course neutralisee.
 */
#banniere-chrono[data-etat="retard"] {
  background: rgba(254, 190, 16, .10);
  border-bottom: 1px solid rgba(254, 190, 16, .3);
  color: var(--accent);
}
#banniere-chrono[data-etat="perdu"] {
  background: repeating-linear-gradient(45deg,
    rgba(218, 31, 38, .22) 0 12px, rgba(218, 31, 38, .11) 12px 24px);
  border-bottom: 1px solid rgba(218, 31, 38, .55);
  color: var(--alerte-txt);
  font-weight: 500;
}

/* ---------------------------------------------------------------- réglages */
#panneau-reglages {
  border-bottom: 1px solid var(--bordure);
  background: var(--surface-tete);
  padding: 14px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
#panneau-reglages .rangee { display: flex; align-items: center; gap: 14px; }
#panneau-reglages .rangee > .k:first-child { width: 150px; flex: none; }

/* ---------------------------------------------------------------- corps */
main { display: grid; grid-template-columns: 1fr 420px; align-items: start; }
#colonne-droite {
  border-left: 1px solid var(--bordure);
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 0;
}

#barre-filtres { display: flex; align-items: center; gap: 12px; padding: 13px 18px; }

/* ---------------------------------------------------------------- table */
#tete-table, .ligne {
  display: grid;
  grid-template-columns: 34px 34px 3px 46px 1fr 76px 76px 62px 58px 54px 54px 54px 30px 44px;
  gap: 10px;
  align-items: center;
  padding: 0 18px;
}
#tete-table {
  height: 30px;
  background: var(--surface-tete);
  border-bottom: 1px solid var(--bordure-tete);
  border-top: 1px solid var(--bordure-tete);
}
.ligne {
  height: 46px;
  border-bottom: 1px solid var(--bordure-ligne);
  cursor: pointer;
}
.ligne:hover { background: rgba(255, 255, 255, .02); }
.ligne.leader { background: var(--voile-leader); }
.ligne.pit { background: rgba(254, 190, 16, .04); }
.ligne.abandon { opacity: .5; }

.ligne .num, .ligne .val { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.ligne .pos { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ligne .tla { font-family: var(--mono); font-weight: 500; letter-spacing: .04em; }
.ligne .pilote { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne .pilote b { font-weight: 500; }
.ligne .pilote span { font-weight: 400; color: var(--txt-2); }
.barre-cat { width: 3px; height: 26px; border-radius: 2px; background: var(--inactif); }
.barre-cat.moto5 { background: var(--accent); }
.barre-cat.premoto4 { background: #5B8DEF; }

.val.vide { color: var(--txt-3); }
.val.record-perimetre { color: var(--violet); }
.val.record-perso { color: var(--vert); }
.val.secteur-pb { color: var(--vert); }

.badge-rage {
  background: linear-gradient(135deg, var(--accent), var(--alerte));
  color: var(--fond);
  font-family: var(--mono); font-weight: 600; font-size: 8px; letter-spacing: .1em;
  padding: 4px 5px; border-radius: 3px; text-align: center;
}
.chip-pit {
  border: 1px solid var(--accent); color: var(--accent);
  font-size: 9px; letter-spacing: .1em; padding: 2px 5px; border-radius: 3px;
  font-family: var(--mono);
}

/* ---------------------------------------------------------------- arrivée
   Le damier par pilote et les medailles ne se posent que sur des signaux du
   chrono : `arrive` vient du passage de TourRestant a « Arrivee », qui tombe au
   meme snapshot que le drapeau damier. Rien n'est deduit ici.

   ⚠️ Ces regles viennent APRES `.ligne.leader` : a specificite egale, la
   derniere l'emporte, et un podium doit primer sur le voile du leader. */
.ligne .damier { margin-right: 3px; font-size: 11px; line-height: 1; }
.ligne.arrive { background: rgba(255, 255, 255, .022); }
.ligne .pos.medaille { font-size: 15px; line-height: 1; }
.ligne.podium-1 { background: rgba(254, 190, 16, .10); }
.ligne.podium-2 { background: rgba(255, 255, 255, .055); }
.ligne.podium-3 { background: rgba(205, 127, 50, .09); }

/* ligne dépliée */
.detail { padding: 0 18px 18px; background: rgba(254, 190, 16, .03); }
.detail .cartes { display: grid; grid-template-columns: repeat(5, 1fr) 1.6fr; gap: 12px; }
.carte-canal {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 10px;
  padding: 11px 13px; display: flex; flex-direction: column; gap: 6px;
}
.carte-canal .valeur { font-family: var(--mono); font-weight: 500; font-size: 32px; line-height: 1; }
.carte-canal.masque { border-color: rgba(218, 31, 38, .35); }
.carte-canal.masque .k { color: var(--alerte-txt); }
.rail { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.rail i { display: block; height: 100%; background: var(--accent); }
.rail.brake i { background: var(--alerte); }
.detail .indispo { grid-column: 1 / -1; color: var(--txt-3); font-size: 11px; padding: 12px 0; }

#pied-table {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; color: var(--txt-2); font-size: 12px;
  border-top: 1px solid var(--bordure);
}

/* ---------------------------------------------------------------- cartes */
.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: 10px; padding: 13px; }
.carte-entete { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

#carte-map svg { width: 100%; height: 280px; display: block; }
#carte-map { background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 34px 34px,
    var(--surface); }

.point-vif {
  width: 7px; height: 7px; border-radius: 50%; background: var(--vert);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.pilote-map circle { transition: none; }
.pilote-map text {
  font-family: var(--mono); font-size: 2.6px; font-weight: 500;
  fill: var(--fond); text-anchor: middle; dominant-baseline: middle;
}

#messages { display: flex; flex-direction: column; gap: 7px; max-height: 150px; overflow-y: auto; }
.msg { display: flex; gap: 9px; align-items: baseline; }
.msg .h { font-family: var(--mono); font-size: 11px; color: var(--txt-3); flex: none; }
.msg .t { font-size: 12px; color: var(--txt-2); }
.msg.vert .t { color: var(--vert); }
/* La direction de course annonce le damier en clair, une douzaine de secondes
   avant que l'enumeration ne bascule : ce message merite d'etre lu. */
.msg.damier .t { color: var(--txt-1); font-weight: 500; }

#diagnostic.alerte { color: var(--alerte-txt); }

/* ---------------------------------------------------------------- tablette */
@media (max-width: 1100px) {
  main { grid-template-columns: 1fr; }
  #colonne-droite { border-left: none; border-top: 1px solid var(--bordure); position: static; }
  #tete-table, .ligne { grid-template-columns: 30px 30px 3px 42px 1fr 72px 72px 58px 30px 40px; }
  #tete-table > *:nth-child(n+9):nth-child(-n+12), .ligne > *:nth-child(n+9):nth-child(-n+12) { display: none; }
}

/* ================================================================ mobile 2c
   Ecran 2c du handoff. Les deux colonnes du desktop deviennent des onglets ;
   le tableau perd secteurs, meilleur tour et ecart au precedent, qui restent
   accessibles dans la ligne depliee. Cibles tactiles >= 44 px. */

#onglets-mobile, #vue-pilote-mobile, #pied-mobile { display: none; }

@media (max-width: 760px) {
  #onglets-mobile {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--bordure);
  }
  .onglet-m {
    background: none; border: none; cursor: pointer;
    font-family: var(--ui); font-size: 13px; color: var(--txt-3);
    padding: 14px 0;
  }
  .onglet-m.actif { color: var(--txt-1); font-weight: 500; box-shadow: inset 0 -2px 0 var(--accent); }

  /* entete et bandeau compactes */
  #entete { padding: 11px 14px; gap: 10px; }
  .marque { width: 22px; height: 22px; }
  .wordmark { font-size: 10px; }
  #entete-event, #entete .separateur:last-of-type { display: none; }

  #banniere-simulateur, #banniere-chrono { padding: 8px 14px; font-size: 10.5px; }

  #bandeau { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .pastille-drapeau { width: 10px; height: 22px; }
  .drapeau-libelle { font-size: 13px; }
  .titre-session { flex-basis: 100%; order: 9; font-size: 12px; }
  .grand { font-size: 22px; }
  .moyen { font-size: 15px; }

  main { display: block; }
  #colonne-droite { padding: 14px; gap: 12px; }
  #barre-filtres { padding: 11px 14px; overflow-x: auto; }
  #chips-categorie { flex-wrap: nowrap; }
  #maj-chrono { display: none; }          /* repris dans le pied */

  /* bascule par onglet */
  body[data-vue="classement"] #colonne-droite,
  body[data-vue="classement"] #vue-pilote-mobile,
  body[data-vue="carte"] #colonne-gauche,
  body[data-vue="carte"] #vue-pilote-mobile,
  body[data-vue="pilote"] #colonne-gauche,
  body[data-vue="pilote"] #colonne-droite { display: none; }
  body[data-vue="pilote"] #vue-pilote-mobile { display: block; padding: 14px; }

  /* tableau reduit : P. · N° · barre · Pilote · Dernier · Ecart · R */
  #tete-table, .ligne {
    grid-template-columns: 22px 26px 3px 1fr 66px 56px 22px;
    gap: 8px; padding: 0 14px;
  }
  .ligne { height: 52px; }                /* cible tactile */
  #tete-table { height: auto; padding-top: 7px; padding-bottom: 7px; }
  #tete-table > *:nth-child(4), .ligne > *:nth-child(4),
  #tete-table > *:nth-child(7), .ligne > *:nth-child(7),
  #tete-table > *:nth-child(n+9):nth-child(-n+13),
  .ligne > *:nth-child(n+9):nth-child(-n+13) { display: none; }

  .badge-rage { font-size: 0; padding: 4px 0; }
  .badge-rage::after { content: 'R'; font-size: 9px; }

  .detail { background: var(--surface-tete); padding: 0 14px 14px; }
  .detail .cartes { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .carte-canal .valeur { font-size: 26px; }

  #pied-mobile {
    display: flex; align-items: center; gap: 9px;
    padding: 12px 14px;
    border-top: 1px solid var(--bordure);
    position: sticky; bottom: 0; background: var(--fond);
  }

  /* onglet Pilote */
  .entete-pilote-m { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .tla-m { font-family: var(--mono); font-weight: 500; font-size: 20px; letter-spacing: .04em; }
  .cartes-m { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
  .barres-m { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
  #pm-graphe { width: 100%; height: 48px; display: block; }
}