/* ==========================================================================
   jpl.css : les composants propres au dossier Jupiler Pro League.
   Chargé après style.css (châssis Ligue des nations, couleurs DH). Aucun
   jeton redéfini ici : on ne fait qu'ajouter.

   Méthode Refactoring UI, appliquée ici :
   - la hiérarchie par le poids et la couleur avant la taille ;
   - une seule échelle d'espacement (unité 8 px, var(--u)) ;
   - moins de bordures : des fonds légèrement plus clairs pour séparer ;
   - les chiffres en chasse fixe, alignés, jamais centrés dans un tableau ;
   - une couleur = un sens : menthe pour « mon club » et l'interactif,
     rouge DH pour le direct, bleu pour la Ligue des champions, ambre pour
     l'Europa League, violet pour la Conference League, gris-violet pour
     la relégation.
   ========================================================================== */

/* ---- Zones du classement ------------------------------------------------ */
.zone-c1, .zone-c1-tour { --z: var(--ligue-a); }
.zone-europa { --z: var(--ligue-c); }
.zone-conference { --z: var(--ligue-b); }
.zone-releg { --z: #8f7fb5; }
.legende-c1, .legende-c1-tour { --z: var(--ligue-a); }
.legende-c1-tour::before { opacity: .55; }
.legende-europa { --z: var(--ligue-c); }
.legende-conference { --z: var(--ligue-b); }
.legende-releg { --z: #8f7fb5; }
.zone-c1-tour td:first-child { box-shadow: inset 3px 0 0 rgba(111, 184, 255, .55) !important; }

/* ---- Tableau de classement ---------------------------------------------- */
.table-jpl td, .table-jpl th { padding: 10px 6px; }
.table-jpl td.chiffre, .table-jpl th:not(:nth-child(2)) { text-align: right; }
.table-jpl .cel-pts { font-size: 1.05rem; color: var(--encre); }
.table-jpl tbody tr:hover { background: rgba(255, 255, 255, .04); }
.table-jpl tr.ligne-belge:hover { background: var(--rose-doux); }
.cel-rang { white-space: nowrap; }
.cel-rang-n { display: inline-block; min-width: 1.6em; }
.evol { display: inline-block; min-width: 2.2em; margin-left: 4px; font-size: .68rem; text-align: left; color: var(--encre-douce); }
.evol[data-sens="hausse"] { color: var(--rose); }
.evol[data-sens="baisse"] { color: var(--dh); }
.evol[data-sens="stable"] { opacity: .45; }

/* Le nom du club est un bouton (il ouvre la fiche) : on lui retire tout
   habit de bouton, il doit se lire comme du texte. */
button.cel-equipe-bloc {
  width: 100%; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
button.cel-equipe-bloc:hover span { text-decoration: underline; text-decoration-color: var(--rose); text-underline-offset: 3px; }

/* Forme : cinq carrés, du plus ancien au plus récent. */
.forme { display: inline-flex; gap: 3px; vertical-align: middle; }
.forme span {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px;
  font: 700 .6rem/1 var(--chiffre); color: var(--nuit);
}
.forme-V { background: var(--rose); }
.forme-N { background: #9d8cb8; }
.forme-D { background: var(--dh); color: #fff !important; }
@media (max-width: 767px) {
  .table-jpl .col-forme, .table-jpl .col-buts { display: none; }
  .table-jpl td, .table-jpl th { padding: 9px 4px; }
}

/* ---- Frise des 34 journées ---------------------------------------------- */
.frise {
  display: flex; gap: 6px; overflow-x: auto; list-style: none;
  margin: 0 0 calc(var(--u) * 4); padding: 4px 2px calc(var(--u) * 1.5);
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.frise-j { flex: 0 0 auto; scroll-snap-align: center; }
.frise-bouton {
  display: grid; gap: 4px; justify-items: center; min-width: 64px; padding: 10px 8px;
  border: 1px solid var(--filet); border-radius: 10px; background: transparent;
  color: var(--encre-douce); cursor: pointer; font: inherit;
  transition: background-color .2s ease, border-color .2s ease;
}
.frise-bouton:hover { background: rgba(255, 255, 255, .06); color: var(--encre); }
.frise-n { font-weight: 700; font-size: .95rem; color: var(--encre); }
.frise-date { font-size: .68rem; white-space: nowrap; }
.frise-passe .frise-bouton { background: var(--nuit-2); border-color: transparent; }
.frise-passe .frise-n { color: var(--encre-douce); }
.frise-actuel .frise-bouton { background: var(--rose); border-color: var(--rose); color: var(--nuit); }
.frise-actuel .frise-n { color: var(--nuit); }

/* ---- Mon club ----------------------------------------------------------- */
.mon-club {
  margin: 0 0 calc(var(--u) * 5); padding: calc(var(--u) * 3);
  background: var(--nuit-2); border-radius: 16px;
}
.mon-club-tete { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 2); }
.mon-club-tete .sous-titre { margin: 0; }
.choix-club {
  min-height: 44px; padding: 0 40px 0 16px; border-radius: 999px;
  border: 1px solid var(--filet); background: var(--nuit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b9a9cf' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--encre); font: 600 .95rem/1 var(--texte); appearance: none; cursor: pointer;
}
.choix-club:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }

/* Barre des journées du calendrier complet : une ligne, qui défile. */
.puces-defile { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--u); scrollbar-width: thin; }
.puces-defile .puce { flex: 0 0 auto; }
.calendrier-liste .ligne-groupe { color: var(--encre-douce); }

/* ---- Hero : la saison en 306 points ------------------------------------- */
.fiche-comp-chiffres small { font-size: .55em; color: var(--encre-douce); margin-left: 2px; }
#chiffre-journees, #chiffre-playoffs { cursor: default; }
.saison-grille { display: grid; grid-template-columns: repeat(34, 1fr); gap: 3px; }
.saison-col { display: grid; grid-template-rows: repeat(9, 1fr); gap: 3px; }
.saison-point {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(185, 169, 207, .35); background: transparent;
  transform: scale(0); transition: transform .45s var(--ressort) calc(var(--i, 0) * 18ms);
}
.matrice-prete .saison-point { transform: scale(1); }
.sans-anim .saison-point { transition: none; transform: scale(1); }
.saison-dom, .saison-ext, .saison-nul { border-color: transparent; background: var(--encre-douce); }
.saison-nul { opacity: .55; }
.saison-live { border-color: var(--dh); background: var(--dh); }
.saison-active .saison-avenir { border-color: var(--encre); }
.saison-moi { box-shadow: 0 0 0 2px var(--rose); }
/* L'info-bulle de la matrice : sa place est réservée en permanence, deux
   lignes, et elle ne fait que devenir visible. Sans cela, la carte « La
   saison en chiffres » grandissait au survol et tout le bloc sautait. */
.saison-bulle {
  margin: 10px 0 0; height: 2.6em; overflow: hidden;
  font: 400 .75rem/1.3 var(--chiffre); color: var(--encre);
  opacity: 0; transition: opacity .15s ease;
}
.saison-bulle[data-visible="true"] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .matrice-prete .saison-live { animation: pouls 2s ease-in-out infinite; }
}

/* ---- Le mur des clubs --------------------------------------------------- */
.mur-clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: calc(var(--u) * 2); }
.club-carte {
  display: grid; gap: calc(var(--u) * 1.5); align-content: start; padding: calc(var(--u) * 2.5);
  border: 1px solid transparent; border-radius: 16px; background: var(--nuit-2);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: transform .25s var(--doux), background-color .2s ease, border-color .2s ease;
}
.club-carte:hover { transform: translateY(-3px); background: var(--nuit-3); }
.club-carte[data-moi="true"] { border-color: var(--rose); box-shadow: inset 4px 0 0 var(--rose); }
.club-tete { display: flex; justify-content: space-between; align-items: flex-start; }
.club-rang { font-size: 1.4rem; font-weight: 700; color: var(--encre-douce); }
.club-corps { display: grid; gap: 4px; }
.club-nom { font: 800 1.1rem/1.15 var(--titre); letter-spacing: -.01em; }
.club-lieu { font-size: .8rem; color: var(--encre-douce); }
.club-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.club-pts { font-weight: 700; }

/* ---- Fiche d'un club ---------------------------------------------------- */
.fiche-nom { display: flex; align-items: center; gap: 12px; }
.fiche-club { display: grid; gap: calc(var(--u) * 2); }
.fiche-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--u); margin: 0; }
.fiche-chiffres div { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.fiche-chiffres dt { font-size: .72rem; color: var(--encre-douce); }
.fiche-chiffres dd { margin: 4px 0 0; font-size: 1.25rem; font-weight: 700; }
.fiche-faits { display: grid; gap: 0; margin: 0; }
.fiche-fait { display: grid; grid-template-columns: 9em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.fiche-fait dt { color: var(--encre-douce); font-size: .85rem; }
.fiche-fait dd { margin: 0; font-weight: 600; }
.fiche-stade { margin: 0; }
.fiche-stade img { width: 100%; max-width: 420px; border-radius: 12px; display: block; }
.fiche-stade figcaption { font-size: .7rem; color: var(--encre-douce); margin-top: 4px; }
.grille-fiche { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.fiche-actions { margin: var(--u) 0 0; }
@media (max-width: 575px) {
  .fiche-chiffres { grid-template-columns: repeat(2, 1fr); }
  .fiche-fait { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- Où voir ------------------------------------------------------------ */
.diffuseurs { row-gap: calc(var(--u) * 2); }
.diffuseur {
  display: grid; gap: 6px; height: 100%; margin: 0; padding: calc(var(--u) * 2.5);
  border-radius: 16px; background: var(--nuit-2);
}
.diffuseur strong { font: 800 1.15rem/1 var(--titre); }
.diffuseur span { font-size: .85rem; color: var(--encre-douce); }

/* ---- Jeux --------------------------------------------------------------- */
.prono-journee { grid-column: 1 / -1; margin: calc(var(--u) * 2) 0 0; font: 800 1.05rem/1.2 var(--titre); }
.prono-journee:first-child { margin-top: 0; }
.prono-ferme { opacity: .72; }
.prono-moi { box-shadow: inset 4px 0 0 var(--rose); }

/* ---- Surprises ---------------------------------------------------------- */
.confetti-demi { border-radius: 50% 50% 0 0; }

/* ---- Téléphone ----------------------------------------------------------
   Les 34 colonnes de la matrice tiennent sur 320 px si on resserre les
   gouttières, sinon les points deviennent des poussières. Le reste suit :
   une seule colonne pour les commandes, et le sélecteur de club pleine
   largeur, plus facile à atteindre au pouce.
   ------------------------------------------------------------------------ */
@media (max-width: 575px) {
  .saison-grille, .saison-col { gap: 2px; }
  .saison-bulle { height: 3.2em; }
  .mon-club { padding: calc(var(--u) * 2); }
  .mon-club-tete { display: grid; gap: var(--u); }
  .choix-club, .mon-club-tete .bouton { width: 100%; justify-content: center; }
  .mur-clubs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--u); }
  .club-carte { padding: calc(var(--u) * 1.5); }
  .club-nom { font-size: .95rem; }
  .frise-bouton { min-width: 56px; padding: 8px 6px; }
  .diffuseur { padding: calc(var(--u) * 2); }
}

/* ---- Titre du hero : l'angle du dossier sous le nom ----------------------
   Le H1 porte désormais « Jupiler Pro League 2026-2027 : la saison sans
   play-offs ». Le troisième morceau descend d'une ligne, plus petit, pour
   rester un titre lisible et pas un pavé.
   ------------------------------------------------------------------------ */
.hero-angle {
  display: block;
  margin-top: .15em;
  font-size: .34em;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--rose);
  text-transform: none;
}

/* ---- Le point après la journée, et la course au titre -------------------- */
.point-saison { padding-block: calc(var(--u) * 4); }
.point-saison .bloc-titre { margin-bottom: calc(var(--u) * 2); }
.point-saison p { max-width: 62ch; font-size: 1.02rem; line-height: 1.65; }
.point-saison .note { color: var(--encre-douce); font-size: .8rem; }

/* ---- Maillage vers les rubriques clubs ----------------------------------- */
.articles-clubs { font-size: .9rem; color: var(--encre-douce); margin-top: var(--u); }
.articles-clubs a { color: var(--rose); text-decoration: none; }
.articles-clubs a:hover { text-decoration: underline; }

/* ---- Intertitres de date dans le calendrier ------------------------------ */
.calendrier-date {
  margin: calc(var(--u) * 2) 0 var(--u);
  font: 700 .82rem/1 var(--chiffre);
  letter-spacing: .04em; text-transform: uppercase; color: var(--encre-douce);
}