/* ============================================================
   LISTES DE MATCHS — utilisées par la page d'analyse (direct et
   calendrier) et par la fiche club (ses prochaines rencontres).

   Écrit une seule fois ici : une ligne de match doit avoir la
   même allure partout sur le site.

   La ligne est tantôt un bouton, tantôt un lien selon la page.
   Les deux sont habillés à l'identique.
   ============================================================ */

.mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

/* le bloc garde une hauteur fixe : la semaine défile à l'intérieur.
   Plafonné en vh pour ne jamais dépasser l'écran sur un petit portable. */
.mlist.scrollable {
  max-height: min(34rem, 62vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: var(--s1);
}

.mday {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-faint);
  padding: var(--s3) 0 var(--s1);
}
.mday:first-child { padding-top: 0; }

/* la date reste visible pendant qu'on descend dans la liste */
.mlist.scrollable .mday {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-soft);
}

/* lignes séparées par un filet, pas des cartes empilées dans une carte */
.mrow {
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: var(--t-base);
  color: inherit;
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  min-height: 44px;
  padding: var(--s2) var(--s2);
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: var(--s3);
  align-items: center;
  cursor: pointer;
  transition: background 0.12s ease;
}

.mlist li:last-child .mrow, .mlist .mrow:last-child { border-bottom: none; }
.mrow:hover { background: var(--a-soft); }

.mrow .when2 {
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: var(--s1);
  white-space: nowrap;
}

.mrow.live .when2 { color: var(--live); font-weight: 600; }

/* repère « en direct » stable : pas de clignotement */
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--live); flex: none; }

.mrow .teams { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.mrow .tm2 { font-size: var(--t-md); line-height: 1.3; }

/* La pastille de championnat (.cp2) est décrite dans socle.css : elle
   sert ici, dans les listes de matchs, et aussi sur les cartes de
   « Mes équipes », qui ne chargent pas cette feuille. */

.mrow .right { display: flex; align-items: center; gap: var(--s3); }

.mrow .live-sc {
  font-family: var(--mono);
  font-size: var(--t-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--live);
  white-space: nowrap;
}

/* « ANALYSER » DOIT AVOIR L'AIR D'UN BOUTON AVANT QU'ON LE SURVOLE.

   C'était du gris clair, qui ne devenait ambre qu'au survol : sur une
   liste, personne ne survole ce qu'il ne prend pas déjà pour un bouton,
   donc l'ambre n'apparaissait jamais. La pastille est maintenant ambre
   au repos et se remplit au survol — l'invitation est visible d'entrée,
   et le survol la confirme. */
.mrow .go {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--a);
  background: var(--a-soft);
  padding: 0.28em 0.7em;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.mrow:hover .go, .mrow:focus-visible .go {
  color: var(--on-accent);
  background: var(--a);
}

/* ============================================================
   UNE LIGNE, DEUX DESTINATIONS

   Depuis qu'un match en cours ou terminé possède une fiche, sa
   ligne mène à DEUX endroits : la ligne entière ouvre le déroulé
   du match, et la mention « Analyser » ouvre la page d'analyse.

   Un lien ne peut pas en contenir un autre — le navigateur ne
   saurait pas lequel suivre, et un lecteur d'écran non plus. Les
   deux sont donc côte à côte dans la liste : le lien de la ligne
   occupe toute la place, et le second est posé par-dessus, à
   droite. Chacun reste un vrai lien, avec sa propre adresse, son
   propre clic-droit et sa propre tabulation.
   ============================================================ */

.mrow-double { position: relative; display: flex; }

/* La réserve à droite est calculée au plus juste : chaque rem pris ici est
   un rem de moins pour les noms de clubs, et « Ipswich Town — Sunderland »
   passait sur deux lignes à cause d'une pastille trop épaisse. */
.mrow-double .mrow { padding-right: 4.8rem; }

/* Même règle que « .go » ci-dessus : la pastille est ambre au repos,
   pleine au survol. C'est le second lien de la ligne, et il doit se
   voir comme un bouton sans avoir à être découvert. */
.mrow-double .go-part {
  position: absolute;
  top: 50%;
  right: var(--s2);
  transform: translateY(-50%);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--a);
  background: var(--a-soft);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.28em 0.7em;
  border-radius: var(--r-pill);
  transition: color 0.15s ease, background 0.15s ease;
}

.mrow-double .go-part:hover,
.mrow-double .go-part:focus-visible { color: var(--on-accent); background: var(--a); }

/* Le score d'un match terminé n'est pas rouge : le rouge, sur ce site,
   veut dire « ça se joue maintenant ». Un résultat acquis est du texte. */
.mrow .fin-sc {
  font-family: var(--mono);
  font-size: var(--t-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

.mrow.fini .when2 { color: var(--ink-faint); }

@media (max-width: 34rem) {
  /* Sur un téléphone, la pastille « Analyser » mangerait la moitié de la
     ligne. On la retire : la ligne mène au match, et l'analyse se lance
     depuis la fiche, où le bouton est en évidence. */
  .mrow-double .mrow { padding-right: var(--s2); }
  .mrow-double .go-part { display: none; }
}

/* la fiche club affiche la date en toutes lettres : elle a besoin de place */
.mrow.wide { grid-template-columns: 11rem 1fr auto; }

@media (max-width: 34rem) {
  .mrow, .mrow.wide { grid-template-columns: 1fr auto; }
  .mrow .when2 { grid-column: 1 / -1; }
  .mrow .go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mrow { transition: none; }
}