/* ============================================================
   COUPES — l'arbre, et les tours du début.

   Un tableau de coupe se lit de gauche à droite : plus on avance,
   moins il reste de monde. La forme dit déjà l'histoire, à
   condition que les colonnes soient alignées sur leurs milieux —
   c'est ce qui fait qu'on voit d'un coup d'œil quel huitième mène
   à quel quart, sans avoir besoin de tracer un seul trait.

   D'où le choix technique : chaque colonne est une boîte flexible
   qui répartit ses cartes autour d'espaces égaux. Deux cartes dans
   la colonne des demi-finales se placent alors exactement en face
   des paires de quarts correspondantes. Aucun calcul, aucun
   javascript de mise en page : c'est la répartition elle-même qui
   dessine l'arbre.
   ============================================================ */

.cp-tete { display: flex; justify-content: flex-end; }

.cp-mot {
  padding: var(--s6) 0;
  color: var(--ink-soft);
  font-size: var(--t-base);
  line-height: 1.6;
  max-width: 60ch;
}

.cp-panne { color: var(--warn); }

.cp-final h2,
.cp-cal h2,
.cp-cls h2 {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 700;
  font-stretch: var(--w-serre);
  letter-spacing: -0.015em;
  margin-bottom: var(--s3);
}

/* ---- l'arbre ---- */

/* Cinq colonnes ne tiennent pas sur un téléphone, et les compresser
   rendrait les noms illisibles. Elles défilent horizontalement, à
   l'intérieur de leur cadre : c'est le geste naturel sur un tableau
   de coupe, et la page elle-même ne bouge pas. */
.cp-arbre-cadre {
  overflow-x: auto;
  padding-bottom: var(--s3);
}

.cp-arbre {
  display: flex;
  gap: var(--s4);
  align-items: stretch;
  min-height: 26rem;
}

.cp-col {
  display: flex;
  flex-direction: column;
  flex: 0 0 13.5rem;
  min-width: 0;
}

/* Le titre reste en haut ; SEULES les cartes se répartissent. Quand le
   titre participait à la répartition, il descendait d'une colonne à
   l'autre — « FINALE » se retrouvait cent cinquante pixels plus bas que
   « 8ES DE FINALE », et l'en-tête du tableau partait en escalier. */
.cp-col-corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--s2);
  min-height: 0;
}

.cp-col-titre {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  flex: none;
}

.cp-col-n {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  opacity: 0.75;
}

/* ---- une confrontation ---- */

.cp-carte {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s3);
  flex: none;
}

.cp-eq {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-md);
  color: var(--ink-soft);
  min-width: 0;
}

.cp-logo {
  flex: none;
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 3px;
}

.cp-logo-vide { background: var(--surface-alt); }

/* Un nom de club amateur peut être très long — « Crépy-en-Valois »,
   « Saint-Jean-Beaulieu ». Il se coupe proprement plutôt que de
   pousser le score hors de la carte. */
.cp-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-b { flex: none; color: var(--ink-faint); }

/* le qualifié ressort : c'est la seule chose qu'on cherche dans un tableau */
.cp-eq.gagne { color: var(--ink); font-weight: 650; }
.cp-eq.gagne .cp-b { color: var(--ink); }

.cp-pied {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  padding-top: var(--s1);
}

/* ---- la carte devient un lien, quand la rencontre est jouée ----

   Une confrontation à venir n'a rien à montrer derrière elle : elle
   reste une simple carte. Une fois jouée, elle mène à la fiche du
   match — le déroulé, les statistiques, les absents — donc elle en
   prend l'apparence : le curseur le dit, et un léger relief au survol
   confirme qu'il y a quelque chose à cliquer. */
.cp-carte-lien {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cp-carte-lien:hover {
  border-color: var(--ink-soft);
  transform: translateY(-1px);
}

/* La petite finale ne mène nulle part : elle se pose sous l'arbre, dans
   sa propre boîte, à la largeur d'une colonne. */
.cp-petite {
  margin-top: var(--s5);
  max-width: 13.5rem;
}

.cp-petite .cp-col-titre { margin-bottom: var(--s2); }

/* ---- le calendrier : tout ce qui précède les phases finales ----

   Les accordéons « tours précédents » qui vivaient ici ont disparu avec la
   vue Calendrier : ils repliaient les mêmes matchs sous le tableau, et un
   contenu qu'il faut déplier pour savoir s'il vaut le coup ne se déplie
   jamais. Le calendrier les montre à plat, dans l'ordre du parcours. */

.cp-cal-intro {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  max-width: 60ch;
  margin-bottom: var(--s2);
}

.cp-cal-intro strong {
  color: var(--ink);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* La frontière entre le joué et le reste à jouer. C'est la seule ligne du
   calendrier qui mérite l'ambre du site : tout le reste est de l'archive,
   celle-ci est le présent. */
.cp-cal-sep {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s6) 0 var(--s1);
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 700;
  font-stretch: var(--w-serre);
  color: var(--a);
}

.cp-cal-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--a);
  opacity: 0.35;
}
/* la journée, écrite une fois pour toutes les rencontres qu'elle porte —
   avec le tour où en est la compétition juste à côté de la date */
.cp-l-jour {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: var(--s5) 0 var(--s2);
}

/* Le tour prend l'ambre du site, parce que c'est LUI qu'on cherche en
   parcourant la page : la date situe dans le temps, le tour situe dans la
   compétition, et c'est la seconde question qu'on se pose devant un
   calendrier de coupe. Le point médian est dessiné en gris pour rester une
   ponctuation, pas un élément de plus à lire. */
.cp-l-tour { color: var(--a); }

.cp-l-tour::before {
  content: "·";
  margin-right: var(--s2);
  color: var(--ink-faint);
}

.cp-l-tour:empty { display: none; }

/* ---- les rencontres d'une journée ----

   Les mêmes cartes que le tableau final, mais rangées en grille plutôt
   qu'en colonne : une journée de 7e tour compte quatre-vingt-dix matchs,
   et une seule colonne en ferait un ruban interminable. La grille se
   remplit toute seule selon la largeur — quatre cartes sur un écran
   d'ordinateur, une seule sur un téléphone — sans point de rupture à
   écrire ni à maintenir. */
.cp-cal-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--s3);
}

/* Dans l'arbre, une carte se serre au plus juste pour tenir dans sa
   colonne. Ici elle occupe sa case entière, pour que toutes les cartes
   d'une journée fassent la même hauteur et que les lignes restent droites. */
.cp-cal-grille .cp-carte { height: 100%; }

/* Une rencontre à venir est annoncée, pas racontée : pas de score, pas de
   vainqueur en gras, et un cadre un peu plus discret que les autres. */
.cp-carte.a-venir { border-style: dashed; }
.cp-carte.a-venir .cp-eq { color: var(--ink-soft); }

/* la note « aperçu daté », dans l'ambre du site — en encart et non en
   filet latéral, comme les notes de listes.css : le trait de trois
   pixels à gauche est le tic des interfaces faites à la chaîne. */
.note.edition {
  border-top: none;
  border: 1px solid var(--a-soft);
  border-radius: var(--r-sm);
  background: var(--a-soft);
  padding: var(--s3) var(--s4);
  color: var(--ink-soft);
}

.note.edition:empty { display: none; }
.note.edition strong { color: var(--ink); }

/* La grille des rencontres se réduit d'elle-même à une carte par ligne sur
   un téléphone : c'est « auto-fill » qui s'en charge, sans point de rupture
   à écrire ici. */

/* ---- les classements de joueurs d'une coupe ----

   Le tableau lui-même n'a pas de style à lui : il reprend celui des
   tableaux de la page Équipes (listes.css, que cette page charge déjà),
   pour que les buteurs d'une coupe se lisent exactement comme ceux d'un
   championnat. Il ne reste ici que l'avertissement. */

/* « Qualifications comprises ». C'est un panneau d'attention, pas une note
   de bas de page : sans lui, un lecteur qui connaît le football croit le
   site cassé en voyant l'Algérie en tête de la Coupe du monde 2022. Il
   prend donc l'ambre du site, comme la note d'édition. */
.cp-cls-large {
  border: 1px solid var(--a-soft);
  border-radius: var(--r-sm);
  background: var(--a-soft);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  color: var(--ink-soft);
  font-size: var(--t-sm);
  max-width: 70ch;
}

.cp-cls-large strong { color: var(--ink); }