/* Écran d'arène public (#136) — lisible à plusieurs mètres, sur un
 * téléviseur ou un écran posé sur l'arène. Grande typographie, fort
 * contraste, aucun élément interactif (pas de survol à concevoir : personne
 * ne tient de souris devant cet écran). */

body {
  background: var(--fond);
  color: var(--texte);
  min-height: 100vh;
}

.chargement {
  font-size: 1.5rem;
  color: var(--texte-att);
}

/* Bandeau et pied (#196) : ceux de base.css, affichés par js/main.js pour un
 * visiteur connecté seulement. `[hidden]` doit l'emporter sur leur
 * `display: flex` — même piège que .champ/.case (#99) : sans cette règle, le
 * kiosque (téléviseur sans compte) verrait un bandeau et des liens légaux qui
 * ne mènent nulle part sans session. */
.bandeau[hidden],
.pied[hidden] { display: none; }

/* Le remplissage vit sur <main>, pas sur <body> (#196) : le bandeau collant
 * et le pied doivent courir sur toute la largeur. Rendu du kiosque inchangé. */
.ecran {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--espace-6);
  box-sizing: border-box;
}

.description-site {
  margin: var(--espace-2) 0 0;
  font-size: 1.1rem;
  color: var(--texte);
  max-width: 60ch;
}

/* Panneau d'administration (#94, déplacé ici le 08/09/2026) — visuellement
 * distinct du contenu public par une bordure haute nette : personne ne doit
 * confondre « ce que voit tout le monde » et « ce que seul l'admin édite ». */
.administration {
  margin-top: var(--espace-6);
  padding-top: var(--espace-5);
  border-top: 2px solid var(--bordure);
}
.administration h2 { margin: 0 0 var(--espace-4); font-size: 1.3rem; }

.contenu {
  display: flex;
  flex-direction: column;
  gap: var(--espace-6);
}

/* Présentation de l'arène (#145) — le seul bloc toujours présent de cet
 * écran. Même habillage de carte que l'activité en dessous : c'est un contenu
 * à part entière, pas un simple titre de page. */
.presentation-site {
  display: flex;
  align-items: center;
  gap: var(--espace-5);
  background: var(--fond-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  padding: var(--espace-5);
}

.photo-site {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: var(--rayon-md);
  flex: none;
  background: var(--fond-eleve);
}

.presentation-site-texte h1 {
  margin: 0;
  font-size: 3rem;
  line-height: 1.1;
}

/* Localité et heure sur une même ligne, séparées visuellement plutôt que par
 * un caractère écrit : l'une des deux peut manquer (fuseau inconnu, localité
 * non renseignée) sans laisser de séparateur orphelin. */
.presentation-site-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espace-2) var(--espace-4);
  margin: var(--espace-2) 0 0;
}

.localite-site {
  font-size: 1.5rem;
  color: var(--texte-att);
}

.heure-site {
  font-size: 1.5rem;
  color: var(--texte-att);
  font-variant-numeric: tabular-nums;
}

/* Météo instantanée (#145). `display: inline-flex` exige la garde
 * `:not([hidden])` — sans elle, `hidden` n'aurait aucun effet visuel et le
 * badge resterait affiché vide tant qu'aucune météo n'est connue (leçon de
 * #99, déjà payée une fois sur .champ/.case/.bascule-cible). */
.meteo-site:not([hidden]) {
  display: inline-flex;
  align-items: baseline;
  gap: var(--espace-1);
  font-size: 1.5rem;
  color: var(--texte-att);
}

.meteo-site--pluie, .meteo-site--orage { color: var(--accent); }
.meteo-site--neige { color: #cfe6ff; }
.meteo-site-symbole { font-size: 1.3rem; }
.meteo-site-temperature { font-variant-numeric: tabular-nums; }

/* `:not([hidden])` obligatoire (leçon de #99) : depuis #145, ce bloc est
 * masqué par l'attribut `hidden` quand aucune activité n'est ouverte — sans
 * cette garde, `display: flex` l'emporterait sur `hidden` et le cadre
 * resterait affiché, vide, exactement ce que ce changement supprime. */
.bloc-activite:not([hidden]) {
  display: flex;
  gap: var(--espace-5);
  align-items: center;
  background: var(--fond-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  padding: var(--espace-5);
}

.photo-activite {
  width: 220px;
  /* Format 3:1 imposé nulle part ici — celui du spike #44 est propre à la
   * vue arrière caméra. Une photo d'activité garde son ratio naturel. */
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--rayon-md);
  flex: none;
}

.activite-surtitre {
  margin: 0 0 var(--espace-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1rem;
  color: var(--marque);
}

.activite-texte h2 {
  margin: 0;
  font-size: 2.25rem;
  line-height: 1.15;
}

.texte-activite {
  margin: var(--espace-2) 0 0;
  font-size: 1.25rem;
  color: var(--texte-att);
}

/* Tourniquet de photos de l'activité (retour du 08/09/2026) — complète le
 * commentaire global ci-dessus, jamais ne le remplace. Même habillage que
 * .bloc-activite pour rester visuellement de la même famille. */
.tourniquet {
  background: var(--fond-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
  padding: var(--espace-5);
}

.tourniquet-image-conteneur {
  position: relative;
  display: flex;
  justify-content: center;
}

.tourniquet-photo {
  max-width: 100%;
  max-height: 320px;
  border-radius: var(--rayon-md);
  object-fit: cover;
}

/* Flèches superposées à l'image — assez grandes pour rester des cibles
 * tactiles franches (CLAUDE.md : ≥ 44 px), jamais un survol au clavier
 * seul pour un visiteur qui feuillette au doigt. */
.tourniquet-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: var(--texte);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.tourniquet-fleche:hover { background: rgba(0, 0, 0, 0.75); }
.tourniquet-fleche--gauche { left: var(--espace-3); }
.tourniquet-fleche--droite { right: var(--espace-3); }

.tourniquet-legende {
  margin: var(--espace-3) 0 0;
  font-size: 1.1rem;
  max-width: 60ch;
}

.tourniquet-position {
  margin: var(--espace-1) 0 0;
  text-align: center;
}

.bloc-classement-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
}
.bloc-classement h2 {
  margin: 0 0 var(--espace-3);
  font-size: 1.75rem;
}

/* Actions d'admin sur la vraie grille (retour de test du 09/09/2026), pas un
 * bloc de paramétrage à part. Vide et sans effet pour un visiteur anonyme —
 * seul js/main.js y ajoute des boutons, et seulement pour l'administrateur. */
.classement-actions {
  display: flex;
  gap: var(--espace-2);
  margin-bottom: var(--espace-3);
}
.classement-actions:empty { display: none; }
.bouton-classement {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--bordure);
  background: var(--fond-panneau);
  color: var(--texte);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.bouton-classement:hover { background: var(--fond-eleve); }

/* Icône de pilote : l'avatar Google du compte quand il en a un (retour de
 * test du 09/09/2026), repli en initiales sinon — jamais une image cassée. */
.avatar-pilote {
  width: 1.6em;
  height: 1.6em;
  border-radius: 999px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: var(--espace-2);
}
.avatar-pilote--initiales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fond-eleve);
  color: var(--texte-att);
  font-size: 0.7em;
  font-weight: 600;
}

.table-classement {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.5rem;
}

.table-classement th {
  text-align: left;
  color: var(--texte-att);
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--espace-2) var(--espace-3);
  border-bottom: 1px solid var(--bordure);
}

.table-classement td {
  padding: var(--espace-3);
  border-bottom: 1px solid var(--bordure);
}

/* Premier rang distingué par la TYPOGRAPHIE (gras + couleur), pas par la
 * seule couleur — même règle que la grille de tours du pilotage (#134). */
.table-classement tbody tr:first-child td {
  font-weight: 700;
  color: var(--ok);
}

.col-rang { width: 3.5rem; color: var(--texte-att); }
.table-classement tbody tr:first-child .col-rang { color: var(--ok); }
.col-temps, .col-ecart { font-variant-numeric: tabular-nums; }

.pied-ecran {
  text-align: right;
  color: var(--texte-att);
  font-size: 1rem;
}

@media (max-width: 700px) {
  .entete-site, .bloc-activite { flex-direction: column; align-items: flex-start; }
  .photo-site, .photo-activite { width: 100%; height: auto; max-height: 200px; }
  .entete-site-texte h1 { font-size: 2rem; }
}