/* ============================================================
   LISTES — les pages Équipes, Blessures et Transferts.

   Ce sont des pages qu'on consulte, pas qu'on admire : on cherche
   une ligne précise. Donc des filets, des colonnes alignées et
   des chiffres tabulaires — jamais des cartes empilées.
   ============================================================ */

.page-head { display: flex; flex-direction: column; gap: var(--s2); }
.page-head .lede { max-width: 60ch; font-size: var(--t-base); }

/* ---- barre de filtres ---- */

/* Deux filtres côte à côte : le championnat, et la compétition. Ils se
   combinent, d'où les deux groupes étiquetés plutôt qu'une seule rangée —
   sans étiquette, « Ligue des Champions » aurait l'air d'être un
   championnat de plus, ce qu'elle n'est pas. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: flex-end;
  padding: var(--s1) 0;
}

.fgroup { display: flex; flex-direction: column; gap: var(--s2); }

.flabel {
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.fchips { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* le filtre compétition est séparé du reste par un filet vertical :
   il ne joue pas dans la même catégorie */
@media (min-width: 40rem) {
  .fgroup + .fgroup {
    border-left: 1px solid var(--line);
    padding-left: var(--s5);
  }
}

.chip {
  font-family: var(--body);
  font-size: var(--t-md);
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  min-height: 36px;
  padding: var(--s1) var(--s3);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink-soft); color: var(--ink); }

.chip[aria-pressed="true"] {
  background: var(--a);
  border-color: var(--a);
  color: var(--on-accent);
  font-weight: 600;
}

.count { font-size: var(--t-md); color: var(--ink-faint); margin-left: auto; }

/* ---- la barre des pages Équipes / Blessures / Transferts ----

   Le filtre Compétition ne comptait qu'une puce ; il en a sept depuis
   qu'on y a mis les cinq coupes nationales. Il ne tient plus à côté du
   filtre Championnat, il passe à la ligne — et le filet vertical qui
   séparait les deux groupes se retrouvait alors en début de ligne, où il
   ressemblait à un décalage maladroit plutôt qu'à une séparation.

   Les deux groupes sont donc empilés pour de bon, séparés par un filet
   horizontal. La page Actualités, elle, n'a qu'un seul groupe et garde
   sa disposition en ligne : cette règle ne vise que #filters. */
#filters {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
}

#filters .fgroup { width: 100%; }

#filters .fgroup + .fgroup {
  border-left: none;
  padding-left: 0;
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
}

#filters .count { margin-left: 0; align-self: flex-end; }

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

.tbl-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-md);
}

caption { text-align: left; font-size: var(--t-sm); color: var(--ink-faint); padding-bottom: var(--s3); }

thead th {
  text-align: left;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-faint);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

thead th.r, tbody td.r { text-align: right; }

tbody td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-alt); }

/* Le joueur passe en tête de ligne : c'est lui qu'on cherche dans une page
   de blessures. On ne touche pas au style de .club, qui sert aussi de
   colonne principale sur la page Équipes : l'affaiblir ici l'affaiblirait
   là-bas, où le club est le sujet. */
.joueur { font-weight: 600; white-space: nowrap; }

/* ---- le portrait d'un joueur, dans le tableau des passeurs ----

   Rond, et pas carré : les photos du fournisseur sont toutes cadrées de
   la même façon — buste de face, tête au centre, fond uni — et un cercle
   garde le visage en supprimant les coins de fond, qui n'apportent rien.

   Le fond derrière le cercle sert aux photos dont le fond est
   transparent : sans lui, la tête flotterait sur la ligne du tableau. */
.avec-portrait {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-width: 0;
}

.portrait {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  /* Le fournisseur envoie des carrés de 150 × 150 : « cover » ne rogne donc
     rien aujourd'hui. Il est là au cas où une photo arriverait dans un autre
     format, pour qu'elle remplisse le cercle au lieu de s'y déformer. */
  object-fit: cover;
  background: var(--surface-alt);
  border: 1px solid var(--line-soft);
}

@media (max-width: 40rem) {
  .portrait { width: 1.5rem; height: 1.5rem; }
}

/* le rappel « noms fictifs », dans le rouge des avertissements du site */
.fictif { color: var(--warn); }

.club { font-weight: 600; white-space: nowrap; }
.club a { color: inherit; text-decoration: none; }
.club a:hover { color: var(--a); text-decoration: underline; }

.lg-cell { color: var(--ink-faint); font-size: var(--t-md); white-space: nowrap; }

/* Les points portent le classement : ils sont la colonne qu'on lit
   après le nom du club. Les colonnes de contexte — matchs joués,
   différence de buts — restent en retrait pour ne pas leur voler la
   vedette. */
.pts { font-weight: 700; color: var(--ink); }
td.douce { color: var(--ink-faint); }

td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* une jauge dans la cellule : on compare d'un coup d'œil, sans lire */
.gauge {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 7rem;
}

.gauge .track {
  flex: 1;
  height: 0.35rem;
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  overflow: hidden;
}

.gauge .track > i { display: block; height: 100%; border-radius: var(--r-pill); }
.gauge.att .track > i { background: var(--a); }
.gauge.def .track > i { background: var(--b); }

.gauge .v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  width: 2.4rem;
  text-align: right;
}

/* la forme, en petit */
.mini { display: flex; gap: var(--s1); }
.mini span {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.34rem;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--on-fill);
}
.mini .V { background: var(--win); }
.mini .N { background: var(--draw); }
.mini .D { background: var(--loss); }

/* étiquettes de statut */
.tag {
  font-size: var(--t-xs);
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: var(--s1) var(--s3);
  white-space: nowrap;
  display: inline-block;
}
.tag.in    { background: var(--a-soft);    color: var(--a); }
.tag.out   { background: var(--warn-soft); color: var(--warn); }
.tag.pret  { background: var(--n-soft);    color: var(--ink-soft); }
.tag.blesse{ background: var(--live-soft); color: var(--live); }
.tag.susp  { background: var(--n-soft);    color: var(--ink-soft); }

/* « Absent » sans être blessé ni suspendu : hors liste, en sélection,
   écarté par l'entraîneur, retenu par une clause de prêt. Ni rouge ni
   sanction — l'étiquette la plus discrète des trois, parce que c'est
   l'information la moins lourde de conséquence. */
.tag.autre { background: var(--n-soft);    color: var(--ink-faint); }

.motif { color: var(--ink-soft); }
.duree { color: var(--ink-faint); font-size: var(--t-md); white-space: nowrap; }

.go-link { font-size: var(--t-sm); color: var(--a); text-decoration: none; white-space: nowrap; }
.go-link:hover { text-decoration: underline; }

/* état vide : une invitation à agir, pas un cul-de-sac */
.empty-state {
  padding: var(--s6) var(--s4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
}
.empty-state p { color: var(--ink-soft); max-width: 40ch; }

/* Les notes qui expliquent un état de la page — un championnat qui
   n'a pas encore commencé, une coupe sans classement, un aperçu daté —
   se distinguent des notes de bas de page : elles se lisent AVANT le
   tableau, pas après.

   C'était un filet ambre de trois pixels le long du bord gauche. Ce
   trait-là est devenu la signature des interfaces fabriquées à la
   chaîne, on le voit partout et il ne veut plus rien dire. La note
   devient donc un vrai encart : un fond ambre très bas et une arête
   d'un pixel tout autour. Elle se distingue autant, sans le tic. */
.note.depart,
.note.coupe,
.note.joueurs,
.note.apercu {
  border-top: none;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--a-soft);
  border-radius: var(--r-sm);
  background: var(--a-soft);
  color: var(--ink-soft);
}

.note.depart strong,
.note.coupe strong,
.note.joueurs strong,
.note.apercu strong { color: var(--ink); }

/* note honnête en bas de page */
.note {
  font-size: var(--t-sm);
  color: var(--ink-faint);
  line-height: 1.6;
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
  max-width: 68ch;
}

@media (max-width: 44rem) {
  .hide-s { display: none; }
  .count { margin-left: 0; width: 100%; }
}

/* ============================================================
   LES CLUBS SUIVIS.

   Deux endroits : l'étoile dans le tableau, qui sert à choisir, et
   le bandeau du haut, qui sert à consulter. Le premier doit être
   discret — c'est une commande, pas une information ; le second
   doit être la première chose qu'on voit en arrivant.
   ============================================================ */

/* ---- l'étoile, dans le tableau ---- */

/* La colonne n'a pas de titre lisible : « Suivi » écrit au-dessus d'une
   étoile n'apprend rien et vole de la largeur. Le mot reste tout de même
   dans la page, invisible à l'œil mais lu par les lecteurs d'écran, sans
   quoi la colonne n'aurait pas de nom du tout. */
.cache-visuel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

thead th.fav-h, tbody td.fav-c {
  width: 1%;
  padding-right: 0;
  padding-left: var(--s2);
}

.etoile {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--s1) var(--s2);
  line-height: 1;
  font-size: 1.05rem;
  color: var(--ink-faint);
  border-radius: var(--r-sm);
  /* l'étoile pleine est plus large que l'étoile vide : sans largeur fixe,
     toute la colonne du dessous se décalait à chaque clic */
  min-width: 2rem;
  text-align: center;
}

.etoile:hover { color: var(--a); background: var(--a-soft); }
.etoile.on { color: var(--a); }
.etoile:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }

/* La ligne d'un club suivi se repère dans un tableau de vingt lignes, sans
   pour autant crier : un filet ambre à gauche, et rien d'autre. Colorer la
   ligne entière la rendrait plus lisible que le classement lui-même. */
tbody tr.suivie td:first-child { box-shadow: inset 3px 0 0 var(--a); }

/* l'étoile citée dans le texte de l'état vide */
.etoile-demo { color: var(--a); font-size: 1.05rem; }

/* le compteur porté par la puce « Mes clubs » */
.chip-fav .chip-n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  opacity: 0.75;
  margin-left: var(--s1);
}

/* ---- le bloc « Mes équipes » ----

   L'étiquette se pose au-dessus du cadre, pas dedans : c'est une
   section de la page, au même titre que « Championnat » plus bas.
   Le cadre, lui, ne contient que le contenu. */

.suivi {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.suivi-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}

.suivi-titre {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.suivi-etoile { color: var(--a); font-size: 0.95rem; letter-spacing: 0; }

.suivi-n { font-size: var(--t-sm); color: var(--ink-faint); }

/* PAS DE CADRE AUTOUR DES CARTES.

   Le bloc était un cadre contenant des cartes : deux bordures et deux
   fonds emboîtés pour une seule information. C'est ce qui donnait à
   l'ensemble son air lourd et administratif — un dossier, pas des
   clubs. Les cartes se posent maintenant directement sur la page, et
   ce sont elles qui portent le relief.

   Le cadre survit au seul endroit où il en reste un vrai besoin :
   l'état vide, ci-dessous, où il n'y a aucune carte à l'intérieur et
   où il devient lui-même l'objet qui invite. */
.suivi-corps {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.suivi-corps.vide {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s4) var(--s5) var(--s5);
}

/* Vide, le cadre change de rôle : il ne présente plus rien, il propose.
   D'où l'ambre du site, en filet et en lueur très basse — assez pour
   qu'on le remarque en arrivant, pas assez pour qu'il crie plus fort
   que le classement juste en dessous. */
.suivi-corps.vide {
  /* Deux écritures : la première tient partout, la seconde l'adoucit sur
     les navigateurs qui savent mélanger deux couleurs. Un navigateur qui
     ignore la seconde garde simplement un filet ambre plus franc. */
  border-color: var(--a);
  background: var(--a-soft);
  border-color: color-mix(in srgb, var(--a) 60%, transparent);
  background:
    radial-gradient(120% 140% at 50% 0%,
      color-mix(in srgb, var(--a) 13%, transparent) 0%, transparent 72%),
    var(--surface);
}

.suivi-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s3);
  padding: var(--s6) var(--s4);
}

.suivi-badge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-md);
  background: var(--surface-alt);
  color: var(--ink-faint);
  font-size: 1.35rem;
  line-height: 1;
}

.suivi-invite h3 {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  font-stretch: var(--w-serre);
  letter-spacing: -0.015em;
  color: var(--ink);
}

.suivi-invite p {
  color: var(--ink-soft);
  font-size: var(--t-base);
  line-height: 1.6;
  max-width: 42ch;
}

.suivi-cta {
  font-family: var(--body);
  font-size: var(--t-md);
  font-weight: 650;
  color: var(--on-accent);
  background: var(--a);
  border: none;
  border-radius: var(--r-pill);
  min-height: 40px;
  padding: var(--s2) var(--s5);
  margin-top: var(--s1);
  cursor: pointer;
}

.suivi-cta:hover { filter: brightness(1.08); }
.suivi-cta:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; }

/* ---- une équipe suivie ---- */

/* Autant de colonnes que la largeur en permet, jamais plus étroites que
   quinze caractères de nom de club : au-delà, « Borussia Mönchengladbach »
   se coupe et la carte ne sert plus à rien. */
.suivi-cartes {
  display: grid;
  /* 19rem et non 16 : à seize, « se déplace à Aston Villa » se coupait en
     trois lignes et la carte devenait un paragraphe. */
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--s4);
}

/* LA CARTE SE POSE SUR LA PAGE AU LIEU D'Y ÊTRE CREUSÉE.

   Son fond était --ground, c'est-à-dire plus SOMBRE que le cadre qui la
   contenait : elle s'enfonçait dans la page comme un trou. Une carte de
   club doit être un objet qu'on a envie de prendre. Elle passe donc
   au-dessus du fond, avec l'arête haute éclairée par le projecteur —
   la même construction que .card dans socle.css. */
.suivi-c {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background-color: var(--surface);
  background-image: linear-gradient(to bottom, var(--lustre), transparent 40%);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

/* La carte n'est pas cliquable en entier — elle contient deux liens et
   une étoile — mais elle doit répondre quand la souris passe dessus,
   sinon on ne devine pas qu'il y a quelque chose à y faire. */
.suivi-c:hover { border-color: var(--a); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .suivi-c { transition: none; }
  .suivi-c:hover { transform: none; }
}

.suivi-haut {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
}

.suivi-nom {
  flex: 1;
  min-width: 0;
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suivi-nom:hover { color: var(--a); text-decoration: underline; }

.suivi-haut .etoile { flex: none; }

/* La ligne d'identité : le championnat en pastille colorée, puis la
   place et les points. Les trois s'alignent et passent à la ligne
   ensemble plutôt que de former une phrase à points-milieu. */
.suivi-rang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  font-size: var(--t-sm);
  color: var(--ink-faint);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line-soft);
}

.suivi-stat { white-space: nowrap; }
.suivi-rang b { color: var(--ink); font-weight: 650; }
.suivi-rang sup { font-size: 0.7em; }

/* LA COLONNE D'ÉTIQUETTES A DISPARU.

   « PROCHAIN » et « DERNIER » occupaient une colonne fixe de 4,4 rem à
   gauche, et tout le contenu se pressait dans ce qui restait — d'où le
   nom d'un club renvoyé à la ligne suivante, puis la date à la
   troisième. Une carte de club de trois lignes par fait ressemblait à
   un tableur.

   L'étiquette passe donc AU-DESSUS, en tout petit : elle rend toute la
   largeur au contenu, et les deux faits restent parfaitement
   distincts. */
.suivi-faits {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.suivi-f {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  font-size: var(--t-md);
  color: var(--ink-soft);
  line-height: 1.5;
}

.suivi-k {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.suivi-v { min-width: 0; }

/* LA PASTILLE DU RÉSULTAT — le point fort de la carte.

   Un supporter ouvre ce bloc pour deux raisons : savoir quand son club
   rejoue, et savoir comment s'est passé le dernier match. La seconde
   tient dans cet objet, et il est le seul de la carte à porter un aplat
   plein — c'est ce qui fait qu'on le voit avant de lire quoi que ce
   soit. Vert, gris ou rouge : les trois couleurs d'issue du site,
   déjà utilisées par la forme des cinq derniers matchs. */
.suivi-res {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  vertical-align: -0.12em;
  padding: 0.24em 0.6em;
  border-radius: var(--r-pill);
  color: var(--on-fill);
  font-size: var(--t-md);
  line-height: 1.15;
}

.suivi-res b {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.suivi-res .num {
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.suivi-res.V { background: var(--win); }
.suivi-res.N { background: var(--draw); }
.suivi-res.D { background: var(--loss); }

/* « reçoit » ou « se déplace à » : c'est ce qui change tout dans un match,
   et c'est le mot qu'on cherche en premier */
.suivi-ou { color: var(--ink-faint); }

/* En chasse fixe : « lundi 31 août à 21h » et « il y a 2 jours » sont
   des dates, et deux dates l'une sous l'autre doivent s'aligner. */
.suivi-quand {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
}

.suivi-rien { color: var(--ink-faint); font-size: var(--t-sm); }

/* Le même bouton que « Analyser » dans les listes de matchs : ambre au
   repos, plein au survol. Un lien-texte fléché ne se voyait pas comme
   une action, et c'est pourtant la seule de la carte. */
.suivi-go {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--a);
  background: var(--a-soft);
  text-decoration: none;
  padding: 0.4em 0.9em;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

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

/* ---- une équipe suivie que le site ne retrouve pas ----

   Elle reste dans la grille, à la même taille que les autres, mais sans
   relief : ce n'est pas une carte de club, c'est une explication. Le
   contour discontinu dit « incomplet » sans avoir à écrire le mot, et
   c'est déjà la convention du site pour une rencontre à venir sans
   score (.cp-carte.a-venir dans coupes.css). */
.suivi-c-perdu {
  background-image: none;
  border-style: dashed;
}

.suivi-c-perdu:hover { border-color: var(--line); transform: none; }

.suivi-c-perdu .suivi-nom {
  color: var(--ink-soft);
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suivi-perdu-txt {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-faint);
  text-wrap: pretty;
}

.suivi-source {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  line-height: 1.6;
  max-width: 68ch;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s3);
}

/* ---- les puces « Classement / Buteurs / Passeurs » ----

   Ce ne sont pas des filtres : il y en a toujours exactement une
   d'active, et cliquer dessus change ce qu'on lit, pas ce qu'on
   garde. L'icône est là pour ça — elle les distingue au premier
   coup d'œil des puces de championnat, qui n'en ont pas. */

.chip-vue {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.chip-vue .ci {
  width: 14px;
  height: 14px;
  flex: none;
  /* l'icône suit la couleur du texte, y compris quand la puce est active */
  color: currentColor;
}

/* ---- un mot au milieu du tableau ----

   Le temps d'aller chercher les buteurs, la place du tableau ne doit
   pas s'effondrer à zéro : la page sauterait. Le mot occupe donc de
   la hauteur, comme le fera le tableau qui arrive. */
.tbl-mot {
  padding: var(--s7) var(--s4);
  text-align: center;
  color: var(--ink-faint);
  font-size: var(--t-base);
}