/* Page publique de suivi en direct. Lue sur un téléphone, souvent d'une main, souvent en
   marchant : d'où la hiérarchie brutale — score, chrono, exclusions, puis le fil. Rien
   d'autre ne doit disputer l'attention à ces quatre-là.

   Convention du dépôt : variables CSS uniquement, jamais de couleur en dur ailleurs. */

:root {
  --fond: #0f172a;
  --carte: #1e293b;
  --carte-haute: #243347;
  --bordure: rgba(148, 163, 184, 0.18);
  --texte: #f1f5f9;
  --efface: #94a3b8;
  --tres-efface: #64748b;

  /* Couleur d'ENCRE de chaque équipe : celle qu'on peut écrire sur la page. Repeinte à
     la réception de l'état si la couleur de maillot est connue (cf. live.js). */
  --a: #3b82f6;          /* équipe A — bleu, à défaut de couleur de maillot */
  --b: #ef4444;          /* équipe B — rouge, à défaut */
  /* Couleur d'APLAT et son encre lisible : un maillot blanc ou jaune ne peut pas porter
     du texte blanc, et c'est ce couple qui le dit. */
  --a-fond: #3b82f6;
  --a-texte: #ffffff;
  --b-fond: #ef4444;
  --b-texte: #ffffff;
  --direct: #22c55e;
  --jaune: #eab308;
  --rouge: #dc2626;
  --orange: #f97316;

  --rayon: 14px;
  --ombre: 0 10px 30px rgba(0, 0, 0, 0.35);
  --largeur: 680px;
}

@media (prefers-color-scheme: light) {
  :root {
    --fond: #eef2f7;
    --carte: #ffffff;
    --carte-haute: #f8fafc;
    --bordure: rgba(15, 23, 42, 0.1);
    --texte: #0f172a;
    --efface: #64748b;
    --tres-efface: #94a3b8;
    --ombre: 0 10px 30px rgba(15, 23, 42, 0.1);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--fond);
  color: var(--texte);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.45;
  padding-bottom: 2rem;
}

.sprite { display: none; }

main { max-width: var(--largeur); margin: 0 auto; padding: 0 0.75rem; }

/* ------------------------------------------------------------------- bandeau */

.bandeau {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0.9rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bandeau-gauche { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1 1 auto; }

.etat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--efface);
}

.etat .point {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tres-efface);
}

/* Le pouls ne bat que si le match est réellement en cours : un direct figé qui clignote
   ment au spectateur. */
.etat.direct { color: var(--direct); }
.etat.direct .point { background: var(--direct); animation: pouls 1.8s ease-in-out infinite; }

@keyframes pouls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%      { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

.periode {
  min-width: 0;
  font-size: 0.82rem;
  color: var(--efface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.non-officiel {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tres-efface);
  white-space: nowrap;
}

/* ------------------------------------------------------------------- tableau */

.tableau {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.25rem 0.75rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 0.5rem;
}

.equipe { text-align: center; min-width: 0; }

.ecu {
  width: 58px; height: 58px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--carte-haute);
  border: 2px solid var(--bordure);
  overflow: hidden;
}
.cote-a .ecu { border-color: color-mix(in srgb, var(--a) 55%, transparent); }
.cote-b .ecu { border-color: color-mix(in srgb, var(--b) 55%, transparent); }

.ecu img { width: 100%; height: 100%; object-fit: contain; }
.ecu img:not([src]), .ecu img[src=""] { display: none; }
.ecu span { font-size: 1.05rem; font-weight: 700; color: var(--efface); }

.equipe .nom {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.centre { text-align: center; padding: 0 0.4rem; }

.scores {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
}

.score {
  font-size: 3.1rem;
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score.marque { animation: but 1.1s ease-out; }

@keyframes but {
  0%   { transform: scale(1);    color: var(--texte); }
  25%  { transform: scale(1.35); color: var(--direct); }
  100% { transform: scale(1);    color: var(--texte); }
}

.tiret { font-size: 1.6rem; color: var(--tres-efface); font-weight: 300; }

.chrono {
  margin-top: 0.35rem;
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
/* Chrono arrêté : on l'écrit, plutôt que de laisser croire à un direct gelé.
   Un pictogramme « pause » y tenait auparavant — deux barres nues qu'il fallait
   deviner, et qu'on prend pour un artefact de rendu. Sur un téléphone au fond d'un
   gymnase, le mot se lit ; le symbole se demande. */
.chrono.arrete { color: var(--efface); }
.chrono.arrete::after {
  content: "arrêté";
  display: inline-block;
  margin-left: 0.45rem;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.18em;
}

.temps-morts {
  margin-top: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  color: var(--tres-efface);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tm { display: inline-flex; gap: 3px; }
.tm i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tres-efface);
  opacity: 0.35;
}
.tm i.pris { opacity: 1; background: var(--efface); }

/* ---------------------------------------------------------------- exclusions */

.exclusions {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Toute icône est bornée ici, et pas seulement dans le fil : un SVG sans dimension prend
   la largeur de son conteneur et fait déborder la page. */
.icone { width: 18px; height: 18px; flex: none; }

.exclusion {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--cote);
  border-radius: 10px;
  font-size: 0.85rem;
}
.exclusion.cote-a { --cote: var(--a); }
.exclusion.cote-b { --cote: var(--b); }

.exclusion .icone { color: var(--cote); }
.exclusion .qui { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exclusion .reste {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--orange);
}
/* Les 15 dernières secondes : le retour est imminent, l'entraîneur le regarde. */
.exclusion .reste.imminent { color: var(--direct); }

/* ----------------------------------------------------------------------- fil */

.fil { margin-top: 1.5rem; }

.titre-fil {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tres-efface);
  margin-bottom: 0.6rem;
  padding-left: 0.25rem;
}

#faits { list-style: none; position: relative; }

/* L'axe central : c'est lui qui rend le fil lisible d'un coup d'œil, chaque camp de son
   côté. Il s'efface sous 520 px, où la place manque pour deux colonnes. */
#faits::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: var(--bordure);
  transform: translateX(-0.5px);
}

.fait {
  display: grid;
  grid-template-columns: 1fr 3.6rem 1fr;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0;
}

/* Ligne explicite pour les deux enfants : la minute occupant la colonne du milieu, une
   carte placée en colonne 1 serait sinon repoussée à la ligne suivante — le placement
   automatique avance, il ne revient jamais en arrière. */
.fait .minute, .fait .contenu { grid-row: 1; }

.fait .minute {
  grid-column: 2;
  text-align: center;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--tres-efface);
  background: var(--fond);
  padding: 0.1rem 0;
  z-index: 1;
}

.fait .contenu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  min-width: 0;
}
.fait.a .contenu { grid-column: 1; }
.fait.b .contenu { grid-column: 3; flex-direction: row-reverse; text-align: right; }

.fait.a .icone { color: var(--a); }
.fait.b .icone { color: var(--b); }
.fait .icone.jaune { color: var(--jaune); }
.fait .icone.rouge { color: var(--rouge); }
.fait .icone.orange { color: var(--orange); }

.fait .texte { min-width: 0; }
.fait .qui {
  font-size: 0.86rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fait .quoi { font-size: 0.72rem; color: var(--efface); }

.fait .numero {
  display: inline-block;
  min-width: 1.35em;
  padding: 0 0.25em;
  margin-right: 0.3em;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
}
.fait.a .numero { background: var(--a-fond); color: var(--a-texte); }
.fait.b .numero { background: var(--b-fond); color: var(--b-texte); }

/* Un but pèse plus lourd que le reste : il le montre. */
.fait.majeur .contenu { background: var(--carte-haute); border-color: color-mix(in srgb, var(--direct) 30%, var(--bordure)); }
.fait.majeur .qui { font-size: 0.92rem; }

/* Faits de match (coup d'envoi, mi-temps) : pleine largeur, en travers de l'axe. */
.fait.neutre .contenu {
  grid-column: 1 / -1;
  justify-content: center;
  background: transparent;
  border-style: dashed;
  color: var(--efface);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.fait.neutre .icone { color: var(--tres-efface); }

.fait.nouveau { animation: apparait 0.45s ease-out; }
@keyframes apparait {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.vide { color: var(--tres-efface); font-size: 0.86rem; padding: 1rem 0.25rem; }

/* ---------------------------------------------------------------------- pied */

.pied {
  max-width: var(--largeur);
  margin: 2rem auto 0;
  padding: 0 0.75rem;
  font-size: 0.72rem;
  color: var(--tres-efface);
}
.pied .mention { margin-top: 0.35rem; }

/* --------------------------------------------------------------- téléphone */

@media (max-width: 520px) {
  #faits::before { display: none; }

  /* Le miroir de l'axe central, en deux colonnes : la recevante s'appuie à gauche et
     porte sa minute à droite, la visiteuse fait l'inverse. Sur un écran étroit, cette
     asymétrie dit à qui appartient le fait avant même qu'on lise le nom — ce qu'une
     colonne de minutes alignée pour tout le monde ne disait plus. */
  .fait .minute { background: none; }

  .fait.a { grid-template-columns: 1fr 2.9rem; }
  .fait.a .contenu { grid-column: 1; border-left: 3px solid var(--a); }
  .fait.a .minute { grid-column: 2; text-align: right; }

  .fait.b { grid-template-columns: 2.9rem 1fr; }
  .fait.b .minute { grid-column: 1; text-align: left; }
  .fait.b .contenu { grid-column: 2; border-right: 3px solid var(--b); }

  /* Neutre : ni côté ni minute en colonne, la ligne prend toute la largeur. */
  .fait.neutre { grid-template-columns: 1fr; }
  .fait.neutre .contenu { grid-column: 1 / -1; flex-direction: row; }

  .score { font-size: 2.6rem; }
  .ecu { width: 46px; height: 46px; }

  /* Sur telephone, on RESSERRE au lieu de masquer : la pleine largeur a rendu la place,
     et une info retiree ne revient jamais. Seuls les noms tres longs s'abregent. */
  .buteur { gap: 0.45rem; padding: 0.4rem 0.5rem; }
  .buteur-nom { font-size: 0.84rem; }
  .pastille-7m { font-size: 0.6rem; padding: 0.08em 0.35em; }
  .buteur-pct { min-width: 2.8em; font-size: 0.68rem; }

  /* Le centre du tableau est etroit entre les deux ecus : la mention passe sous
     l'heure plutot que de la serrer ou de deborder. */
  .chrono.arrete::after {
    display: block;
    margin-left: 0;
    margin-top: 0.15rem;
    vertical-align: baseline;
  }
}

/* ---- Mode « numéros seuls » et suivi figé ---- */

/* Quand les noms ne sont pas diffusés, la pastille du numéro est seule sur sa ligne :
   sans un peu d'air, elle flotte contre l'icône. */
.fait .qui.sans-nom { gap: 0; }
.fait .qui.sans-nom .numero { margin-right: 0; }

/* L'agent s'est tu : on décolore sans masquer. Le dernier état connu reste la meilleure
   information disponible — il ne devient faux que si on le fait passer pour actuel.

   La composition est épargnée : un portrait de joueur ne se périme pas. Le score et le chrono
   cessent d'être vrais quand l'agent se tait, la photo de quelqu'un non. L'atténuer n'informait
   de rien et abîmait le seul contenu qui reste valable une fois le suivi coupé — au point
   qu'on a d'abord pris ce voile pour un défaut d'affichage des portraits. */
body.fige main > *:not(#vue-compo) { opacity: 0.62; transition: opacity 0.4s ease; }
body.fige .etat .point { animation: none; background: var(--tres-efface); }

/* ---- Ecran de message : lien mort, ou racine du domaine ---- */

/* Il occupe la page au lieu de se glisser sous un tableau a 0-0 : le spectateur doit
   comprendre en une seconde qu'il n'y a rien a attendre ici. */
.ecran-message {
  max-width: var(--largeur);
  margin: 12vh auto 0;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--efface);
}
.ecran-message svg {
  width: 46px; height: 46px;
  color: var(--tres-efface);
  margin-bottom: 1rem;
}
.ecran-message h1 {
  margin: 0 0 0.6rem;
  font-size: 1.25rem;
  color: var(--texte);
}
.ecran-message p {
  margin: 0 auto;
  max-width: 34rem;
  line-height: 1.55;
  font-size: 0.95rem;
}

/* ---- Page d'accueil : les rencontres du jour ---- */

.accueil {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2.2rem 1rem 3rem;
}
.accueil h1 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.accueil-intro {
  margin: 0.35rem 0 1.4rem;
  color: var(--efface);
  font-size: 0.92rem;
}
.accueil-vide {
  color: var(--efface);
  text-align: center;
  padding: 2.5rem 1rem;
}

.carte-match {
  display: block;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0.95rem 1.1rem;
  margin-bottom: 0.7rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.carte-match:hover { border-color: var(--direct); transform: translateY(-1px); }

/* Match en cours : un point qui bat, a gauche de la carte. Le pouls ne se justifie que
   la : partout ailleurs il attirerait l'oeil sur ce qui ne bouge pas. */
.carte-match.en-direct { border-color: color-mix(in srgb, var(--direct) 45%, transparent); }
.carte-match.en-direct::before {
  content: "";
  position: absolute;
  left: 0.55rem; top: 1.15rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--direct);
  animation: pouls 1.8s ease-in-out infinite;
}
.carte-match.en-direct { position: relative; padding-left: 1.5rem; }

/* Diffusion non ouverte : la carte informe, mais ne promet pas un lien qui n'existe pas. */
.carte-match.inerte { opacity: 0.55; }
.carte-match.inerte:hover { border-color: var(--bordure); transform: none; }

.carte-haut { display: flex; align-items: center; gap: 0.75rem; }
.carte-equipe {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 0.55rem;
}
/* L'equipe de droite se lit vers le centre, comme sur le tableau du match. */
.carte-equipe:last-child { flex-direction: row-reverse; text-align: right; }

.carte-ecu {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--carte-haute);
  font-size: 0.72rem; font-weight: 700;
  color: var(--efface);
  overflow: hidden;
}
.carte-ecu img { width: 100%; height: 100%; object-fit: contain; }

.carte-nom {
  min-width: 0;
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.carte-centre {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem; font-weight: 700;
}
/* Pas encore de score : l'heure ne doit pas se lire comme un resultat. */
.carte-centre.sans-score { font-size: 0.9rem; font-weight: 600; color: var(--efface); }

.carte-bas {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--efface);
  text-transform: lowercase;
}

@media (max-width: 480px) {
  .carte-nom { font-size: 0.9rem; }
}

/* Les deux onglets de l'accueil reprennent ceux du fil : même dessin, mais collés sous
   l'intro plutôt que centrés sous le tableau. */
.accueil-onglets { margin: 0 0 1rem; padding: 0; }

/* Un match passé se lit comme une carte du jour, en plus discret : rien n'y bat, rien n'y
   attend. Le score final tient la place de l'heure. */
.carte-match.passe { opacity: 0.85; }
.carte-match.passe:hover { opacity: 1; }

.voir-plus {
  display: block;
  margin: 0.4rem auto 0;
  padding: 0.55rem 1.4rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--efface);
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  cursor: pointer;
}
.voir-plus:hover { border-color: var(--direct); color: var(--texte); }
.voir-plus:disabled { opacity: 0.5; cursor: default; }

/* Relecture d'un match archivé : le bandeau dit « Terminé le … » et rien ne bat. */
body.archive .etat .point { animation: none; background: var(--tres-efface); }

/* ---- Onglets : fil / statistiques ---- */

.onglets {
  display: flex;
  gap: 0.4rem;
  max-width: var(--largeur);
  margin: 1.6rem auto 0.9rem;
  padding: 0 0.2rem;
  border-bottom: 1px solid var(--bordure);
}
.onglet {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tres-efface);
  cursor: pointer;
}
.onglet:hover { color: var(--efface); }
.onglet.actif { color: var(--texte); border-bottom-color: var(--direct); }

/* ---- Statistiques ---- */

.stats { max-width: var(--largeur); margin: 0 auto; padding: 0 0.2rem 2rem; }

.stats-entete {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.2rem;
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.stats-equipe { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-equipe.cote-a { color: var(--a); }
.stats-equipe.cote-b { color: var(--b); text-align: right; }

.stats-groupe { margin-bottom: 1.6rem; }
.stats-groupe h3 {
  margin: 0 0 0.7rem;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tres-efface);
}

.stats-ligne {
  display: grid;
  grid-template-columns: 2.4rem 1fr 2.4rem;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.65rem;
}
/* Sous-total d'une ligne principale (les 7 m dans les buts) : il compte, mais il ne pese
   pas le meme poids visuel que le total au-dessus. */
.stats-ligne.mineure { opacity: 0.72; font-size: 0.9em; }

.stats-valeur {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}
.stats-centre { min-width: 0; text-align: center; }
.stats-libelle {
  display: block;
  font-size: 0.76rem;
  color: var(--efface);
  margin-bottom: 0.28rem;
}

.stats-barre {
  display: flex;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--carte-haute);
}
.stats-barre i { display: block; transition: width 0.35s ease; }
.stats-barre .part-a { background: var(--a-fond); }
.stats-barre .part-b { background: var(--b-fond); margin-left: auto; }

.stats-gardien {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--bordure);
  background: var(--carte);
  border-radius: 0 8px 8px 0;
  margin-bottom: 0.45rem;
}
.stats-gardien.cote-a { border-left-color: var(--a); }
.stats-gardien.cote-b { border-left-color: var(--b); }
.stats-gardien .qui { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.45rem; overflow: hidden; }
.stats-arrets { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.88rem; }

/* ---- Efficacite d'equipe ---- */

/* Le chiffre que le reste des compteurs ne donne pas : buts sur tentatives. Il vaut sa
   propre bande, entre l'attaque et la discipline. */
.stats-efficacite {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.7rem;
  margin: -0.4rem 0 1.6rem;
  padding: 0.6rem 0.7rem;
  background: var(--carte);
  border-radius: 10px;
}
.efficacite { display: flex; flex-direction: column; min-width: 0; }
.efficacite.cote-b { align-items: flex-end; }
.efficacite-ratio { font-weight: 700; font-variant-numeric: tabular-nums; }
.efficacite.cote-a .efficacite-ratio { color: var(--a); }
.efficacite.cote-b .efficacite-ratio { color: var(--b); }
.efficacite-pct { font-size: 0.72rem; color: var(--efface); }
.efficacite-titre {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tres-efface);
  white-space: nowrap;
}

/* ---- Buteurs ---- */

/* Un bloc par equipe, empiles et pleine largeur. Deux colonnes cote a cote tronquaient
   les noms des le format telephone, et un buteur coupe a huit lettres ne sert a rien. */
.buteurs-equipe { margin-bottom: 1.1rem; }
.buteurs-equipe:last-child { margin-bottom: 0; }

.buteurs-titre {
  margin: 0 0 0.4rem;
  padding-left: 0.55rem;
  border-left: 3px solid currentColor;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.buteurs-equipe.cote-a .buteurs-titre { color: var(--a); }
.buteurs-equipe.cote-b .buteurs-titre { color: var(--b); }

/* La ligne : une barre de fond proportionnelle aux buts, qui donne le relief tout en
   portant une information — qui marque le plus — la ou un filet ne ferait que meubler. */
.buteur {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.6rem;
  border-radius: 8px;
  overflow: hidden;
}
.buteur::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--part, 0%);
  border-radius: 8px;
  z-index: 0;
}
.buteurs-equipe.cote-a .buteur::before { background: color-mix(in srgb, var(--a-fond) 16%, transparent); }
.buteurs-equipe.cote-b .buteur::before { background: color-mix(in srgb, var(--b-fond) 16%, transparent); }
.buteur > * { position: relative; z-index: 1; }

/* La pastille du numero : LARGEUR FIXE. Sans elle, un 7 et un 35 donnent deux fonds de
   tailles differentes, et la colonne de noms se decale d'une ligne a l'autre. */
.buteur .numero {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.35rem;
  margin: 0;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.buteurs-equipe.cote-a .numero { background: var(--a-fond); color: var(--a-texte); }
.buteurs-equipe.cote-b .numero { background: var(--b-fond); color: var(--b-texte); }

.buteur-nom {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Les 7 m : une precision, pas une donnee de meme rang que le total. */
.pastille-7m {
  flex: none;
  padding: 0.08em 0.45em;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--efface);
  background: var(--carte-haute);
  white-space: nowrap;
}

.buteur-chiffres {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-variant-numeric: tabular-nums;
}
.buteur-total { font-weight: 700; font-size: 0.95rem; }
/* Largeur fixe : sinon les totaux dansent d'une ligne a l'autre. */
.buteur-pct {
  min-width: 3.1em;
  text-align: right;
  font-size: 0.72rem;
  color: var(--efface);
}

.buteurs-vide { margin: 0.2rem 0 0 0.6rem; font-size: 0.8rem; color: var(--tres-efface); }

/* Le gardien en poste : l'information que le spectateur cherche en premier. */
.badge-actuel {
  flex: none;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--direct) 20%, transparent);
  color: var(--direct);
}

/* --------------------------------------------------------------- composition

   Deux étages : le carrousel, quand des portraits existent, puis les listes des deux
   équipes, toujours. Les portraits sont détourés sur fond transparent — c'est la couleur de
   l'équipe qui fait le fond, ce qui donne au défilé sa lecture immédiate : on sait de quel
   côté on est avant d'avoir lu le nom. */

.compo {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 0.2rem 2rem;
}

.compo-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.4rem 1rem 1.6rem;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}

/* Halo aux couleurs de l'équipe, derrière le portrait. */
.compo-scene::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 72%;
  background: radial-gradient(ellipse at 50% 100%, var(--cote, var(--a)) 0%, transparent 70%);
  opacity: 0.28;
  pointer-events: none;
}

.compo-equipe {
  position: relative;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cote, var(--a));
}
.compo-scene.cote-a { --cote: var(--a); }
.compo-scene.cote-b { --cote: var(--b); }

.compo-portrait {
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.compo-portrait img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Le détourage laisse un bord net : cette ombre le repose sur le halo. */
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.4));
  /* Ni sélection de texte, ni menu contextuel sur un portrait : « Texte en direct » de Safari
     reconnaît la marque du maillot et propose de la copier, ce qui n'a aucun sens ici, et
     l'appui long ouvrirait « Enregistrer l'image » sur la photo d'un mineur. */
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* Une silhouette tient la place d'un joueur pas encore photographié.
   Elle reste en retrait des vrais portraits — pas d'ombre portée, un peu d'effacement — mais
   pas au point de disparaître : à 55 % sur la carte blanche du thème clair, elle ne se voyait
   plus du tout, et l'emplacement paraissait vide. Sa taille est réduite pour qu'on la lise
   comme un repère et non comme une photo. */
.compo-portrait img.sans-photo {
  opacity: 0.9;
  filter: none;
  max-height: 78%;
}

.compo-identite {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  min-width: 0;
}

.compo-numero {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cote, var(--a));
}

.compo-nom {
  font-size: 1.25rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Jauge d'avancement : dit sans texte qu'une autre slide arrive, et combien de temps reste. */
.compo-jauge {
  height: 3px;
  margin: 0.5rem auto 0;
  max-width: 280px;
  background: var(--bordure);
  border-radius: 999px;
  overflow: hidden;
}

.compo-jauge.court::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--direct);
  transform-origin: left;
  animation: compo-avance var(--duree, 4000ms) linear forwards;
}

@keyframes compo-avance {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.compo-scene.entre { animation: compo-entre 420ms ease-out; }

@keyframes compo-entre {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Un spectateur qui a demandé moins d'animations garde le carrousel — c'est le contenu —
   mais sans le fondu ni la jauge qui glisse. */
@media (prefers-reduced-motion: reduce) {
  .compo-scene.entre { animation: none; }
  .compo-jauge.court::after { animation: none; transform: scaleX(1); }
}

.compo-listes {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}

@media (min-width: 520px) {
  .compo-listes { grid-template-columns: 1fr 1fr; }
}

.compo-liste {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0.9rem 1rem 1rem;
  /* Le liseré de côté remplace un titre coloré : lisible même quand le nom du club est long
     et se coupe. */
  border-top: 3px solid var(--cote, var(--a));
}
.compo-liste.cote-a { --cote: var(--a); }
.compo-liste.cote-b { --cote: var(--b); }

.compo-liste h3 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cote, var(--a));
  margin-bottom: 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compo-liste ul { list-style: none; }

.compo-liste li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.28rem 0;
  border-top: 1px solid var(--bordure);
}
.compo-liste li:first-child { border-top: 0; }

.compo-liste-numero {
  flex: 0 0 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--cote, var(--a));
}

.compo-liste-nom {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Photographié : le nom passe en pleine encre, les autres restent légèrement en retrait.
   Assez pour se repérer, trop peu pour ressembler à un classement. */
.compo-liste li:not(.a-portrait) .compo-liste-nom { color: var(--efface); }