/* ==========================================================================
   Jupiler Pro League 2026-2027 · DH Les Sports+
   Charte propre au dossier, volontairement éloignée de la Ligue des
   nations : nuit violette #15012a en fond, menthe #3ff3b4 comme couleur
   qui attire le regard, rouge DH #fe1940 en touche.

   Une couleur = un sens :
     menthe (--rose)  tout ce qui est interactif et « mon club » ;
     rouge DH (--dh)  le direct et l'urgence, plus le logo et le titre ;
     bleu, ambre, violet  les zones européennes du classement ;
     gris-violet  la relégation.

   Les noms de variables sont restés ceux du châssis (--nuit, --rose) pour
   ne pas réécrire 900 lignes : --rose EST désormais la menthe. Sur fond
   clair (le récit, la fête), la menthe passe en --rose-sombre, sinon elle
   disparaît. Le texte posé SUR la menthe est toujours --nuit, jamais
   blanc : #fff sur menthe ne passe aucun test de contraste.

   Grille : Bootstrap (grille seule), rythme vertical sur une unité de 8 px,
   colonnes et gouttières alignées façon Müller-Brockmann : tout part du
   bord gauche du container, rien n'est centré sauf le récit.
   ========================================================================== */

:root {
  --nuit: #15012a;
  --nuit-2: #1f0836;
  --nuit-3: #2b1049;
  --filet: rgba(185, 169, 207, .24);
  --rose: #3ff3b4;
  --rose-texte: #3ff3b4;
  --rose-sombre: #0a7d5a;   /* menthe lisible sur fond clair */
  --dh: #fe1940;            /* la touche DH : le direct, le logo, le titre */
  --dh-sombre: #d9002f;     /* le même rouge, lisible sur fond clair (4,8:1) */
  --dh-doux: rgba(254, 25, 64, .18);
  --rose-doux: rgba(63, 243, 180, .16);
  --encre: #f7f2fc;
  --encre-douce: #b9a9cf;
  --ligue-a: #6fb8ff;
  --ligue-b: #c09bff;
  --ligue-c: #ffb648;
  --ligue-d: #8f7fb5;
  --u: 8px;
  --h-bandeau: 125px;   /* hauteur de la pilule du bandeau, marge comprise */
  --titre: "Akt", "Arial Black", system-ui, sans-serif;
  --texte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --chiffre: "Cousine", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ressort: cubic-bezier(.2, .9, .25, 1.15);
  --doux: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* Ancrage des sections.

   Le defaut etait une valeur fixe de 112px (--u * 14) qui ne suivait
   aucune des deux hauteurs reelles du bandeau :
     desktop  --h-bandeau = 125px  ->  la section arrivait 13px trop haut,
                                       son titre passait sous le bandeau
     mobile   --h-bandeau =  74px  ->  la section arrivait 38px trop bas,
                                       on voyait du vide avant le titre
   C'est ce qui donnait l'impression que le menu "ne va pas jusqu'a la
   section". On se cale donc sur la variable elle-meme, plus une marge de
   respiration. Comme --h-bandeau est redefinie dans la media query
   mobile, l'ancrage suit automatiquement. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-bandeau) + 16px);
  -webkit-text-size-adjust: 100%;
}

/* Les cibles d'ancre portent la meme marge : scroll-padding-top seul ne
   suffit pas quand une section est la derniere de la page, le navigateur
   ne pouvant plus defiler assez loin. On nomme les sections une par une
   plutot que d'ecrire [id] : une regle aussi large toucherait aussi les
   elements places dans des conteneurs a defilement (tabbar, modales),
   ou une marge de defilement n'a rien a faire. */
#le-point, #direct, #calendrier, #classement, #favoris, #jeux,
#articles, #clubs, #ou-voir, #format, #sources {
  scroll-margin-top: calc(var(--h-bandeau) + 16px);
}
body {
  margin: 0;
  background: var(--nuit);
  color: var(--encre);
  font: 400 1.0625rem/1.6 var(--texte);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--rose); text-underline-offset: .2em; }
/* Le survol ne change plus la couleur du texte : sur fond clair, le blanc
   faisait disparaître les liens. Et il ne souligne que les liens de
   lecture, jamais les cartes, les boutons ou les onglets, où un trait
   apparaissait sans raison. */
a:hover { text-decoration: none; }
.recit-carte a:hover, .sources a:hover, .note a:hover, .methode a:hover,
.eclairage a:hover, .pied-liens a:hover, .renvoi:hover, .liste-sources a:hover {
  text-decoration: underline; text-underline-offset: 3px;
}
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 4px; }
.chiffre { font-family: var(--chiffre); font-variant-numeric: tabular-nums; }

/* Sélection de texte : le rose du dossier, blanc dessus pour rester
   lisible, y compris sur le fond clair du récit. */
::selection { background: var(--rose); color: var(--nuit); text-shadow: none; }
::-moz-selection { background: var(--rose); color: #fff; text-shadow: none; }
.recit-carte ::selection, .porte-carte ::selection { background: var(--rose); color: var(--nuit); }

/* ---- Pointeur en point (js/pointeur.js) --------------------------------
   Posé seulement sur les souris, jamais au doigt ni en mouvements réduits.
   Le curseur système disparaît, remplacé par un disque et son anneau.
   ------------------------------------------------------------------------ */
.a-pointeur, .a-pointeur a, .a-pointeur button, .a-pointeur summary, .a-pointeur label, .a-pointeur [role="button"] { cursor: none; }
.pointeur-point, .pointeur-anneau {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  border-radius: 999px; will-change: transform; opacity: 0;
  transition: opacity .25s ease, width .25s var(--ressort), height .25s var(--ressort),
              background-color .25s ease, border-color .25s ease, border-radius .25s ease;
}
body[data-pointeur="visible"] .pointeur-point,
body[data-pointeur="visible"] .pointeur-anneau { opacity: 1; }
.pointeur-point { width: 7px; height: 7px; background: var(--rose); }
.pointeur-anneau { width: 34px; height: 34px; border: 1.5px solid rgba(63, 243, 180, .7); }
.pointeur-anneau[data-etat="clic"] { width: 54px; height: 54px; background: var(--rose-doux); border-color: var(--rose); }
.pointeur-point[data-etat="clic"] { width: 0; height: 0; }
.pointeur-anneau[data-etat="texte"] { width: 2px; height: 26px; border-radius: 2px; background: var(--rose); border-color: transparent; }
.pointeur-point[data-etat="texte"] { width: 0; height: 0; }
.pointeur-anneau[data-appui] { width: 22px; height: 22px; background: var(--rose); border-color: var(--rose); }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .pointeur-point, .pointeur-anneau { display: none; }
  .a-pointeur, .a-pointeur a, .a-pointeur button { cursor: auto; }
}
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut-contenu { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--rose); color: var(--nuit); padding: 8px 16px; }
.saut-contenu:focus { left: 8px; }

/* Badge « en construction », dans l'esprit de celui de raphaelbatista.com,
   posé dans le bandeau : vert vif sur fond nuit, en chasse fixe. */
.chantier {
  margin: 0 auto 0 4px; padding: 6px 14px; border-radius: 999px;
  background: var(--ligue-b); color: var(--nuit);
  font: 700 .7rem/1 var(--chiffre); letter-spacing: .03em; white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .chantier { animation: chantier-pouls 3.4s ease-in-out infinite; }
}
@keyframes chantier-pouls { 50% { opacity: .55; } }
@media (max-width: 767px) { .chantier { font-size: .62rem; padding: 5px 10px; } }
[hidden] { display: none !important; }

/* ---- Boutons et puces --------------------------------------------------- */
.bouton, .bouton-fantome {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px; padding: 0 calc(var(--u) * 2.5);
  border-radius: 999px; border: 2px solid var(--rose);
  font: 700 .95rem/1 var(--texte); text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ressort), background-color .2s;
}
.bouton { background: var(--rose); color: var(--nuit); }
.bouton-fantome { background: transparent; color: var(--encre); border-color: var(--filet); }
.bouton:hover, .bouton-fantome:hover { transform: translateY(-2px); }
.bouton:active, .bouton-fantome:active { transform: scale(.97); }
.bouton:disabled { opacity: .5; cursor: wait; }

.puces { display: flex; flex-wrap: wrap; gap: var(--u); margin: 0 0 calc(var(--u) * 2); }
.puce {
  min-height: 40px; padding: 0 calc(var(--u) * 2); border-radius: 999px;
  border: 1px solid var(--filet); background: transparent; color: var(--encre-douce);
  font: 500 .9rem/1 var(--chiffre); cursor: pointer; transition: all .2s;
}
.puce[aria-pressed="true"] { background: var(--encre); color: var(--nuit); border-color: var(--encre); font-weight: 700; }
.puce:hover { color: var(--encre); border-color: var(--encre-douce); }

/* ---- Bandeau : pilule de verre flottante (effet Apple, comme les Cats) -- */
.bandeau { position: sticky; top: 0; z-index: 50; padding: 12px 0 0; pointer-events: none; }
.bandeau > .container {
  pointer-events: auto;
  background: rgba(31, 8, 54, .62);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset, 0 18px 44px -28px rgba(0, 0, 0, .9);
  transition: background-color .3s, box-shadow .3s;
}
.bandeau-plein > .container { background: rgba(31, 8, 54, .82); }
@media (prefers-reduced-transparency: reduce) {
  .bandeau > .container { background: var(--nuit-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.bandeau-haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.marque-logo { height: 24px; width: auto; }
.marque-titre { font: 800 1.05rem/1 var(--titre); letter-spacing: -.01em; color: var(--dh); padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .28); line-height: 24px; }
.horloge { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 20px; font: 400 .78rem/1 var(--chiffre); color: var(--encre-douce); }
.horloge > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
/* Sélecteur de langue : trois codes courts, à droite de la navigation,
   la langue active en rose. */
.nav-langues { display: flex; gap: 2px; margin-left: auto; }
.nav-langues a {
  padding: 4px 7px; border-radius: 6px; text-decoration: none; color: var(--encre-douce);
  font: 700 .7rem/1 var(--chiffre); transition: background-color .2s, color .2s;
}
.nav-langues a:hover { background: rgba(255, 255, 255, .08); color: var(--encre); }
.nav-langues a[aria-current="true"] { background: var(--rose); color: #fff; }
/* Mention « bêta » : discrète, mais présente tant que la relecture n'est
   pas faite. Elle disparaît d'elle-même en français. */
.nav-beta {
  align-self: center; margin-left: 6px; padding: 3px 6px; border-radius: 4px;
  border: 1px solid var(--filet); color: var(--encre-douce);
  font: 400 .58rem/1 var(--chiffre); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  text-decoration: none;
}
.nav-beta:hover { border-color: var(--rose); color: var(--encre); }
/* Arrivée par la mention « bêta » : le point de méthode s'éclaire un instant. */
.methode-traduction { scroll-margin-top: calc(var(--h-bandeau) + 24px); }
.methode-traduction:target { animation: repere 2.4s var(--doux); border-radius: 8px; }
@keyframes repere { 0%, 40% { background: var(--rose-doux, rgba(63, 243, 180, .15)); } 100% { background: transparent; } }
.methode-traduction { color: var(--encre); }
.methode-traduction::before { background: var(--ligue-c) !important; }
.horloge i { color: var(--rose-texte); }
.horloge-date span { display: inline-block; }
.horloge-date span::first-letter { text-transform: uppercase; }
.horloge-heure time { color: var(--encre); font-weight: 700; }
.horloge-meteo[data-etat="charge"] { opacity: .5; }
.horloge-meteo { gap: 4px !important; }
.position-bouton, .lieu-bouton {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; margin: -6px 0;
  border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.position-bouton { width: 32px; justify-content: center; }
.position-bouton:hover, .lieu-bouton:hover { background: rgba(255, 255, 255, .08); color: var(--encre); }
.position-bouton[data-actif="true"] { background: var(--rose-doux); }
.position-bouton[data-actif="true"] i { color: var(--encre); }
.position-bouton[data-etat="attente"] i { animation: clignote 1s steps(2) infinite; }
.lieu-bouton[data-mode="coords"] { color: var(--ligue-a); }
.horloge-meteo[data-etat="ok"] { color: var(--encre); }
/* La barre de navigation aligne le menu à gauche et les langues à droite. */
.bandeau-nav { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.nav-liens { display: flex; flex: 1 1 auto; gap: calc(var(--u) * 3); list-style: none; margin: 0; padding: 12px 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-liens::-webkit-scrollbar { display: none; }
.nav-liens a { position: relative; font: 600 .9rem/1 var(--texte); color: var(--encre-douce); text-decoration: none; padding: 6px 0; }
.nav-liens a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 0; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--doux); }
.nav-liens a:hover, .nav-liens a[aria-current="true"] { color: var(--encre); }
.nav-liens a[aria-current="true"]::after { transform: scaleX(1); }
@media (max-width: 991px) {
  :root { --h-bandeau: 74px; }
  .bandeau { padding-top: 8px; }
  .horloge-date { display: none !important; }
  .bandeau-haut { border-bottom: 0; }
}
@media (max-width: 575px) {
  .marque-titre { display: none; }
  .horloge { font-size: .72rem; gap: 12px; }
}

/* ---- Le tableau du jour ----------------------------------------------- */
/* Le tableau du jour prend toute la largeur de la fenêtre : la bande de
   scores respire, et on voit deux ou trois matchs de plus sans défiler.
   Seul l'intitulé reste aligné sur la grille du dossier. */
.tableau {
  /* Voile translucide sur toute la largeur, et qui remonte jusqu'en haut
     de la page : il passe derrière la pilule du bandeau, ce qui soude le
     menu et la bande de scores en un seul bloc. La marge négative tire le
     fond vers le haut, la marge intérieure rend la place au contenu. */
  margin-top: calc(-1 * var(--h-bandeau));
  padding: calc(var(--h-bandeau) + 12px) 0 14px;
  background: rgba(31, 8, 54, .45);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
@media (prefers-reduced-transparency: reduce) {
  .tableau { background: rgba(31, 8, 54, .92); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.tableau > .container { max-width: none; width: 100%; padding-left: clamp(12px, 3vw, 28px); padding-right: 0; }
.tableau-entete { padding-right: clamp(12px, 3vw, 28px); }
.tableau-entete { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 400 .72rem/1 var(--chiffre); color: var(--encre-douce); }
.tableau-entete #tableau-titre::first-letter { text-transform: uppercase; }
.tableau-piste {
  --fondu-g: 0px; --fondu-d: 48px;
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; touch-action: pan-x pan-y;
  scrollbar-width: none; scroll-snap-type: x proximity;
  padding: 2px 0;
  padding-right: clamp(12px, 3vw, 28px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fondu-g), #000 calc(100% - var(--fondu-d)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fondu-g), #000 calc(100% - var(--fondu-d)), transparent 100%);
}
.tableau-piste::-webkit-scrollbar { display: none; }
.tableau-piste[data-debut="false"] { --fondu-g: 48px; }

/* Flèches de la bande : dossier et embeds. */
.tableau-cadre { position: relative; }
.tableau-fleche {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .38); background: rgba(31, 8, 54, .9); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer; font-size: .8rem; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6);
  transition: opacity .2s, background-color .2s, transform .2s;
}
.tableau-fleche-g { left: 4px; }
.tableau-fleche-d { right: 4px; }
/* Dans le dossier, la bande touche le bord de la fenêtre : la flèche de
   droite rentre d'autant, pour ne pas coller au bord. */
.tableau .tableau-fleche-d { right: clamp(12px, 3vw, 28px); }
.tableau-fleche:hover { background: var(--rose); border-color: var(--rose); color: var(--nuit); }
.tableau-fleche:active { transform: translateY(-50%) scale(.94); }
.tableau-fleche:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.tableau-fleche:disabled { opacity: 0; pointer-events: none; }
.tableau-cadre[data-defile="false"] .tableau-fleche { display: none; }
/* Sur écran tactile, le doigt suffit : pas de flèches. */
@media (hover: none), (pointer: coarse) { .tableau-fleche { display: none; } }
.tableau-piste[data-fin="true"] { --fondu-d: 0px; }
.tableau-match {
  flex: 0 0 auto; min-width: 212px; display: grid; gap: 6px; padding: 10px 14px;
  scroll-snap-align: start; text-decoration: none; color: var(--encre);
  /* Les cartes s'éclaircissent légèrement sur le bandeau noir plutôt que
     d'ajouter une seconde couche sombre. */
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
  transition: border-color .2s, background-color .2s;
}
.tableau-match:hover { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .12); color: var(--encre); }
/* « data-belge » : le nom vient du châssis, il désigne ici mon club. */
.tableau-match[data-belge="true"] { background: rgba(63, 243, 180, .14); box-shadow: inset 3px 0 0 var(--rose); }
.tableau-match[data-etat="en-cours"] { border-color: var(--dh); box-shadow: 0 0 0 1px var(--dh); }
.tableau-tete { display: flex; justify-content: space-between; gap: 8px; font: 400 .68rem/1.2 var(--chiffre); color: var(--encre-douce); }
.tableau-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 700 .92rem/1.2 var(--texte); }
.tableau-eq { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tableau-eq .blason { width: 22px; height: 22px; flex: 0 0 auto; }
.tableau-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tableau-ligne .bel { color: var(--rose-texte); }
.tableau-ligne b { font-size: 1.05rem; flex: 0 0 auto; }
.tableau-ligne b[data-vide="true"] { color: var(--encre-douce); font-weight: 400; }
.tableau-live { display: inline-flex; align-items: center; gap: 5px; color: #fff; background: var(--dh); padding: 2px 7px; border-radius: 4px; font: 700 .66rem/1.3 var(--chiffre); }
.tableau-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: clignote 1.2s steps(2) infinite; }
.tableau-fin { color: var(--encre); font-weight: 700; }
.tableau-vide { margin: 0; padding: 8px 0; font: 400 .78rem/1.2 var(--chiffre); color: var(--encre-douce); }
@media print { .tableau { display: none; } }

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; padding: calc(var(--u) * 6) 0 calc(var(--u) * 7); }
body { position: relative; isolation: isolate; }
.aurore {
  position: absolute; top: 0; left: 0; right: 0; height: 1100px; overflow: hidden; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}

/* Aurore : trois halos flous qui dérivent lentement, façon fond Apple. */
.hero-aurore { position: absolute; inset: -10% -20%; filter: blur(60px) saturate(170%); opacity: 1; pointer-events: none; }
.hero-aurore span { position: absolute; border-radius: 50%; will-change: transform; }
/* Trois halos qui dérivent lentement derrière le hero. Leurs couleurs
   sont voisines du fond (#15012a) : un violet plus clair qui donne la
   profondeur, la menthe du dossier, et une pointe de rouge DH tenue en
   retrait pour ne pas virer au néon. */
.hero-aurore span:nth-child(1) { width: 52%; height: 64%; left: 46%; top: 2%; background: radial-gradient(circle, rgba(109, 40, 217, .78), transparent 64%); }
.hero-aurore span:nth-child(2) { width: 44%; height: 56%; left: 2%; top: 42%; background: radial-gradient(circle, rgba(63, 243, 180, .34), transparent 64%); }
.hero-aurore span:nth-child(3) { width: 40%; height: 52%; left: 28%; top: 26%; background: radial-gradient(circle, rgba(254, 25, 64, .34), transparent 62%); }
@media (prefers-reduced-motion: no-preference) {
  .hero-aurore span:nth-child(1) { animation: derive-1 11s ease-in-out infinite alternate; }
  .hero-aurore span:nth-child(2) { animation: derive-2 13s ease-in-out infinite alternate; }
  .hero-aurore span:nth-child(3) { animation: derive-3 16s ease-in-out infinite alternate; }
}
@keyframes derive-1 { 50% { transform: translate(-30%, 25%) scale(1.35); } to { transform: translate(-55%, -5%) scale(.9); } }
@keyframes derive-2 { 50% { transform: translate(45%, -30%) scale(1.3); } to { transform: translate(90%, 10%) scale(.8); } }
@keyframes derive-3 { 33% { transform: translate(40%, 25%) scale(1.4); } 66% { transform: translate(-35%, 15%) scale(.85); } to { transform: translate(10%, -30%) scale(1.2); } }

.hero-titre {
  margin: 0 0 calc(var(--u) * 2);
  font: 900 clamp(2.8rem, 6.4vw, 5.6rem)/.9 var(--titre);
  letter-spacing: -.035em;
}
.hero-titre span:nth-child(2) { color: var(--dh); }
.hero-sous { max-width: 34em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; margin: 0 0 calc(var(--u) * 2); }
.hero-resume { max-width: 40em; font-size: .95rem; line-height: 1.6; color: var(--encre-douce); margin: 0 0 calc(var(--u) * 2); padding-left: 14px; border-left: 3px solid var(--rose); }
.hero-resume strong { color: var(--encre); }
.hero-meta { color: var(--encre-douce); font-size: .8rem; margin: 0 0 calc(var(--u) * 3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-titre span { display: inline-block; opacity: 0; transform: translateY(.3em); animation: monte .9s var(--doux) forwards; }
  .hero-titre span:nth-child(2) { animation-delay: .1s; }
}
@keyframes monte { to { opacity: 1; transform: none; } }

/* Fiche compétition (carte de verre) */
.fiche-comp {
  margin: calc(var(--u) * 4) 0 0; padding: calc(var(--u) * 3);
  background: rgba(31, 8, 54, .45); border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 24px 60px -40px rgba(0, 0, 0, .9);
}
@media (min-width: 992px) { .fiche-comp { margin-top: 0; } }
.fiche-comp-titre { font: 700 .72rem/1 var(--chiffre); color: var(--encre-douce); margin-bottom: 16px; }
.fiche-comp-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 20px; }
.fiche-comp-chiffres div { border-left: 1px solid var(--filet); padding-left: 10px; }
.fiche-comp-chiffres dt { font-size: .7rem; color: var(--encre-douce); line-height: 1.2; }
.fiche-comp-chiffres dd { margin: 4px 0 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; line-height: 1; }

/* Matrice compacte : une ligne de points par ligue */
.matrice { display: grid; gap: 8px; }
.matrice-ligue { display: grid; grid-template-columns: 20px 1fr 24px; align-items: center; gap: 10px; }
.matrice-nom, .matrice-nb { font: 700 .75rem/1 var(--chiffre); color: var(--c); }
.matrice-nb { text-align: right; color: var(--encre-douce); font-weight: 400; }
.matrice-points { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 0; padding: 0; }
.pastille {
  position: relative; width: 11px; height: 11px; border-radius: 50%;
  background: var(--c); opacity: .55; transform: scale(0);
  transition: transform .45s var(--ressort) calc(var(--i) * 14ms), opacity .2s;
}
.matrice-prete .pastille { transform: scale(1); }
.sans-anim .pastille { transition: none; }
.pastille:hover, .pastille:focus-visible { opacity: 1; outline-offset: 2px; }
.pastille-bel { background: var(--rose); opacity: 1; box-shadow: 0 0 0 3px var(--rose-doux); }
@media (prefers-reduced-motion: no-preference) {
  .matrice-prete .pastille-bel { animation: pouls 2.4s ease-in-out 1.2s infinite; }
}
@keyframes pouls { 50% { box-shadow: 0 0 0 7px rgba(254, 25, 64, 0); } }
.pastille[data-nom]:hover::after, .pastille[data-nom]:focus-visible::after {
  content: attr(data-nom); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--encre); color: var(--nuit); font: 700 .72rem/1 var(--texte);
  padding: 6px 8px; border-radius: 4px; pointer-events: none; z-index: 3;
}
.matrice-legende { font-size: .75rem; color: var(--encre-douce); margin: 14px 0 0; }

/* ---- Blocs -------------------------------------------------------------- */
.bloc { padding: calc(var(--u) * 10) 0; border-top: 1px solid var(--filet); }
.bloc-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: calc(var(--u) * 4); }
.bloc-titre {
  flex: 1 1 100%; margin: 0;
  font: 900 clamp(2.4rem, 6vw, 4.5rem)/.92 var(--titre); letter-spacing: -.035em;
}
.bloc-chapo { flex: 1 1 100%; max-width: 40em; margin: 0; color: var(--encre-douce); font-size: 1.1rem; }
.sous-titre { font: 800 1.5rem/1.1 var(--titre); letter-spacing: -.02em; margin: calc(var(--u) * 6) 0 calc(var(--u) * 2); }
.note { font-size: .82rem; color: var(--encre-douce); margin: var(--u) 0; }
.grille-matchs > .vide, .grille-articles > .vide, .grille-groupes > .vide { grid-column: 1 / -1; }
.vide { color: var(--encre-douce); font-style: italic; padding: calc(var(--u) * 2) 0; margin: 0; }
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Live --------------------------------------------------------------- */
.etiquette-live {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  background: var(--dh); color: #fff; padding: 4px 12px; border-radius: 4px;
  font: 700 .8rem/1.4 var(--chiffre);
}
.etiquette-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: clignote 1.2s steps(2) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.direct-etat { margin: 0; font-size: .8rem; color: var(--encre-douce); }

.rebours {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 32px; align-items: end;
  padding: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 4);
  background: linear-gradient(120deg, var(--dh) 0%, #7d0020 100%); border-radius: 16px;
  /* Le compte à rebours est le seul grand aplat rouge DH de la page. */
  color: #fff;
}
.rebours .rebours-titre, .rebours-quand, .rebours-cases li { color: rgba(255, 255, 255, .88); }
.rebours-titre { margin: 0; font-weight: 700; font-size: .9rem; }
.rebours-affiche { margin: 0; font: 900 clamp(1.8rem, 4.5vw, 3.2rem)/1 var(--titre); letter-spacing: -.03em; grid-column: 1; }
.rebours-quand { margin: 0; grid-column: 1; }
.rebours-cases { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; font-size: .7rem; }
.rebours-cases li { display: grid; text-align: center; min-width: 56px; }
.rebours-cases span { font-size: 2.4rem; font-weight: 700; line-height: 1; }
@media (max-width: 767px) {
  .rebours { grid-template-columns: 1fr; }
  .rebours-cases { grid-column: 1; grid-row: auto; justify-content: space-between; }
}

.grille-matchs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: calc(var(--u) * 2); }
.match {
  display: grid; gap: var(--u); padding: calc(var(--u) * 2);
  background: var(--nuit-2); border: 1px solid var(--filet); border-radius: 12px;
}
.match-belge { border-color: var(--rose); box-shadow: inset 4px 0 0 var(--rose); }
.match-tete { display: flex; justify-content: space-between; margin: 0; font: 400 .78rem/1 var(--chiffre); color: var(--encre-douce); }
.statut-en-cours .match-etat { color: var(--dh); font-weight: 700; }
.match-corps { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.match-equipe { display: grid; justify-items: center; gap: 6px; text-align: center; font-weight: 700; font-size: .92rem; line-height: 1.2; }
.match-score { margin: 0; font-size: 1.7rem; font-weight: 700; white-space: nowrap; }
.match-score small { display: block; font-size: .7rem; text-align: center; color: var(--encre-douce); }
.statut-en-cours .match-score { color: var(--dh); }
.match-lieu { margin: 0; font-size: .78rem; color: var(--encre-douce); text-align: center; }
.bouton-agenda { justify-self: center; min-height: 38px; font-size: .82rem; }
.blason { object-fit: contain; }
.blason-vide { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--nuit-3); font: 700 .65rem/1 var(--chiffre); }

/* ---- Route vers la finale ---------------------------------------------- */
.route {
  list-style: none; margin: 0 0 calc(var(--u) * 4); padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  counter-reset: none;
}
.etape { position: relative; padding: calc(var(--u) * 4) calc(var(--u) * 2) 0 0; border-top: 3px solid var(--filet); }
.etape::before {
  content: ""; position: absolute; top: -10px; left: 0;
  width: 17px; height: 17px; border-radius: 50%; background: var(--nuit); border: 3px solid var(--encre-douce);
}
.etape-passe { border-top-color: var(--encre-douce); opacity: .6; }
.etape-passe::before { background: var(--encre-douce); }
.etape-actuel { border-top-color: var(--rose); }
.etape-actuel::before { border-color: var(--rose); background: var(--rose); box-shadow: 0 0 0 6px var(--rose-doux); }
.etape:last-child .etape-titre { color: var(--rose-texte); }
.etape-date { margin: 0 0 4px; font-size: .78rem; color: var(--encre-douce); }
.etape-titre { margin: 0 0 6px; font: 800 1.15rem/1.1 var(--titre); }
.etape-texte { margin: 0; font-size: .88rem; color: var(--encre-douce); }
@container (max-width: 760px) {
  .route { grid-template-columns: 1fr; }
  .etape { border-top: 0; border-left: 3px solid var(--filet); padding: 0 0 calc(var(--u) * 3) calc(var(--u) * 3); }
  .etape::before { top: 0; left: -10px; }
  .etape-passe { border-left-color: var(--encre-douce); }
  .etape-actuel { border-left-color: var(--rose); }
}

.diables-agenda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: calc(var(--u) * 6); }
.diables-agenda .sous-titre { margin: 0; }

/* Calendrier complet */
.filtres { display: grid; gap: 0; }
.calendrier-jour { font: 700 .95rem/1 var(--texte); color: var(--encre-douce); margin: calc(var(--u) * 3) 0 var(--u); text-transform: none; }
.calendrier-jour::first-letter { text-transform: uppercase; }
.ligne-match {
  display: grid; grid-template-columns: 56px 1fr 88px 1fr; align-items: center; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--filet);
}
.ligne-belge { background: var(--rose-doux); border-radius: 8px; }
.ligne-groupe { font-size: .75rem; color: var(--encre-douce); }
.ligne-eq { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.ligne-eq span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-dom { justify-content: flex-end; text-align: right; }
.ligne-score { text-align: center; font-weight: 700; }
@media (max-width: 575px) {
  .ligne-match { grid-template-columns: 1fr 64px 1fr; }
  .ligne-groupe { display: none; }
  .ligne-eq { font-size: .85rem; }
}

/* ---- Jeux --------------------------------------------------------------- */
.pseudo {
  display: grid; gap: 6px; max-width: 420px; font-weight: 700; font-size: .95rem;
  margin-bottom: calc(var(--u) * 3); padding: 14px 16px;
  border-radius: 14px; border: 1px solid var(--filet); background: var(--nuit-2);
  border-left: 4px solid var(--rose);
}
.pseudo-aide { display: block; font-weight: 400; font-size: .78rem; color: var(--encre-douce); }
.pseudo:focus-within { border-color: var(--rose); }
.pseudo[data-manquant] { border-color: var(--rose); background: var(--rose-doux); animation: secousse .4s; }
.pseudo[data-manquant] .pseudo-aide { color: #fff; }
@keyframes secousse { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pseudo input, .prono-champ {
  min-height: 44px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--filet); background: var(--nuit); color: var(--encre); font: inherit;
}
.pronos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 2); }
.pronos > .vide { grid-column: 1 / -1; }
@container (max-width: 640px) { .pronos { grid-template-columns: 1fr; } }
.jeux-classement { max-width: 560px; }
.prono { padding: 14px; background: var(--nuit-2); border: 1px solid var(--filet); border-radius: 12px; display: grid; gap: 12px; }
.prono-ferme { opacity: .75; }
.prono-tete { margin: 0; font-size: .78rem; color: var(--encre-douce); }
.prono-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 48px 10px 48px minmax(0, 1fr); align-items: center; gap: 6px; }
.prono-eq { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 700; font-size: .82rem; text-align: center; min-width: 0; }

.prono-champ { width: 48px; padding: 0 4px; text-align: center; font-size: 1.2rem; font-family: var(--chiffre); }
.prono-tiret { text-align: center; }
.prono .bouton { justify-self: stretch; justify-content: center; min-height: 40px; font-size: .85rem; }
.prono-points { margin: 0; color: var(--ligue-b); font-weight: 700; }
.foule { display: flex; gap: 2px; border-radius: 6px; overflow: hidden; font: 700 .7rem/1 var(--chiffre); }
.foule span { padding: 6px 8px; white-space: nowrap; }
.foule-1 { background: var(--ligue-a); color: var(--nuit); }
.foule-N { background: var(--encre-douce); color: var(--nuit); }
.foule-2 { background: var(--ligue-c); color: var(--nuit); }

/* ---- Classements -------------------------------------------------------- */
.grille-groupes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 3); }
.groupe { background: var(--nuit-2); border-radius: 12px; padding: calc(var(--u) * 2); border: 1px solid var(--filet); }
.groupe-titre { margin: 0 0 12px; font: 800 1.1rem/1 var(--titre); }
.table-classement, .table-palmares { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table-classement th, .table-palmares th { font: 400 .72rem/1 var(--chiffre); color: var(--encre-douce); text-align: center; padding: 8px 4px; border-bottom: 1px solid var(--filet); }
.table-classement th:nth-child(2), .table-palmares th { text-align: left; }
.table-classement abbr { text-decoration: none; }
.table-classement td { padding: 8px 4px; text-align: center; border-bottom: 1px solid var(--filet); }
.table-classement tr:last-child td { border-bottom: 0; }
.cel-equipe { text-align: left !important; font-weight: 600; }
.cel-equipe-bloc { display: flex; align-items: center; gap: 8px; }
.cel-pts { font-weight: 700; }
.table-classement tr[class*="zone-"] td:first-child { box-shadow: inset 3px 0 0 var(--z); }
.zone-quarts { --z: var(--ligue-a); }
.zone-montee { --z: var(--ligue-b); }
.zone-barrage, .zone-barrage-bas { --z: var(--ligue-c); }
.zone-releg { --z: var(--encre-douce); }
.table-classement tr.ligne-belge { background: var(--rose-doux); }
.legende { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0 0 16px; font-size: .8rem; color: var(--encre-douce); }
.legende li::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--z); }
.legende-quarts { --z: var(--ligue-a); }
.legende-montee { --z: var(--ligue-b); }
.legende-barrage, .legende-barrage-bas { --z: var(--ligue-c); }
.legende-releg { --z: var(--encre-douce); }

.chiffres-cles { margin-top: calc(var(--u) * 2); }
.palmares-joueurs { list-style: none; margin: 0; padding: 0; counter-reset: rang; }
.palmares-joueurs li {
  counter-increment: rang; display: grid; grid-template-columns: 32px 1fr auto auto; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--filet);
}
.palmares-joueurs li::before { content: counter(rang); font-family: var(--chiffre); color: var(--encre-douce); }
.palmares-joueurs .ligne-belge { background: var(--rose-doux); }
.pj-nom { font-weight: 700; }
.pj-eq { color: var(--encre-douce); font-size: .85rem; }
.pj-val { font-weight: 700; color: var(--rose-texte); }

/* ---- Récit -------------------------------------------------------------- */
.recit-carte { background: #f4f7fb; color: var(--nuit); border-radius: 24px; padding: clamp(24px, 5vw, 64px); }
.recit-texte { max-width: 44em; }
.recit-carte a { color: var(--nuit); }
.recit-carte p { font-size: 1.12rem; line-height: 1.7; }
.recit-carte .bloc-titre { margin-bottom: calc(var(--u) * 4); }
.faq { display: grid; gap: 10px; margin-bottom: calc(var(--u) * 3); }
.faq-item { border: 1px solid rgba(21, 1, 42, .18); border-radius: 12px; padding: 14px 18px; background: rgba(21, 1, 42, .03); }
.faq-question { font: 800 1.05rem/1.35 var(--titre); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: "+"; font-family: var(--chiffre); color: var(--rose-sombre); }
.faq-item[open] .faq-question::after { content: "−"; }
.faq-reponse { margin: 10px 0 0; font-size: 1rem !important; line-height: 1.6 !important; }
.recit-titre { font: 800 1.7rem/1.1 var(--titre); letter-spacing: -.02em; margin: calc(var(--u) * 6) 0 calc(var(--u) * 2); }
.synthese { border-left: 6px solid var(--rose); padding: 4px 0 4px calc(var(--u) * 3); margin-bottom: calc(var(--u) * 4); }
.synthese p { font-size: 1.2rem; margin: 0; }
.table-palmares { font-size: 1rem; }
.recit-carte .table-palmares th { color: #3d5673; border-bottom-color: rgba(21, 1, 42, .2); }
.table-palmares td { padding: 12px 8px 12px 0; border-bottom: 1px solid rgba(21, 1, 42, .15); vertical-align: top; }
.table-palmares td:nth-child(2) { font: 800 1.1rem/1.2 var(--titre); }
.ligne-future td { color: var(--rose-sombre); }

/* ---- Diables ------------------------------------------------------------ */
.diables-tete { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 5); align-items: start; }
@container (max-width: 820px) { .diables-tete { grid-template-columns: 1fr; } }
.selectionneur { padding: calc(var(--u) * 3); border-radius: 16px; background: linear-gradient(150deg, var(--nuit-3), var(--nuit-2)); border: 1px solid var(--filet); }
.selectionneur-role { margin: 0; font: 700 .72rem/1 var(--chiffre); color: var(--rose-texte); }
.selectionneur-nom { margin: 8px 0 16px; font: 900 2rem/1 var(--titre); letter-spacing: -.02em; }
.selectionneur-infos { margin: 0; display: grid; gap: 10px; }
.selectionneur-infos div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; border-top: 1px solid var(--filet); padding-top: 10px; }
.selectionneur-infos dt { font-size: .78rem; color: var(--encre-douce); }
.selectionneur-infos dd { margin: 0; font-weight: 600; font-size: .92rem; }
.attente { padding: calc(var(--u) * 3); border-radius: 16px; border: 1px dashed var(--rose); }
.attente-titre { margin: 0 0 4px; font: 800 1.3rem/1.25 var(--titre); }
.absences { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.absences li { padding-left: 16px; position: relative; }
.absences li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); }
.renvoi { color: var(--encre); }
.poste { margin-bottom: calc(var(--u) * 5); }
.poste-titre { font: 800 1.3rem/1 var(--titre); margin: 0 0 16px; color: var(--encre-douce); }
.grille-joueurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: calc(var(--u) * 3); }
.grille-joueurs > .vide { grid-column: 1 / -1; }
.legende-metal { max-width: 60em; }

/* ---- Cartes joueurs façon FUT ------------------------------------------
   Trois métaux selon les matchs joués (js/diables.js), reflet qui suit la
   souris, légère inclinaison 3D. Le numéro de maillot est dans un carré
   rose, sans ombre. L'étoile marque les favoris du lecteur.
   ------------------------------------------------------------------------ */
.fut {
  position: relative; aspect-ratio: .6 / 1; border-radius: 16px; cursor: pointer;
  transform-style: preserve-3d; perspective: 900px;
  transform: rotateY(var(--rx, 0deg)) rotateX(var(--ry, 0deg));
  transition: transform .18s var(--doux);
  --c1: #e9c45a; --c2: #b8862f; --encre-carte: #2b1f05;
}
.fut:focus-visible { outline: 3px solid var(--rose); outline-offset: 4px; }
.fut-or { --c1: #f6d97f; --c2: #c79a34; --encre-carte: #33260a; }
.fut-argent { --c1: #dfe3ec; --c2: #97a0b0; --encre-carte: #1d2128; }
.fut-bronze { --c1: #e2ab77; --c2: #a4652f; --encre-carte: #33200d; }
.fut-inner {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; color: var(--encre-carte);
  background: linear-gradient(160deg, var(--c1), var(--c2) 62%, #1a1206 165%);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .8);
}
.fut-brillance {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 60%);
  mix-blend-mode: soft-light;
}
.fut:hover .fut-brillance { opacity: 1; }
/* Rail de largeur fixe : sinon « Défenseur » élargit la colonne et la
   photo rétrécit, d'où des carrés de tailles différentes d'une carte à
   l'autre. Colonne figée, photo toujours identique. */
.fut-haut { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 14px 14px 0; align-items: start; }
.fut-rail { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.fut-num {
  display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px;
  background: var(--rose); color: #fff; border-radius: 6px;
  font-size: 1.15rem; font-weight: 700; line-height: 1; text-shadow: none;
}
.fut-poste { margin-top: 8px; font: 700 .62rem/1.1 var(--texte); letter-spacing: 0; max-width: 100%; overflow-wrap: anywhere; }
.fut-filet { width: 26px; height: 1px; background: currentColor; opacity: .45; margin: 8px 0; }
.fut-drapeau { font: 700 .7rem/1 var(--chiffre); opacity: .8; }
/* Photos en portrait, toutes au même format : les fichiers iDalgo
   arrivent en tailles variables (souvent 100x141), on recadre plutôt que
   de déformer. Le rail de gauche a une largeur fixe, donc la photo fait
   exactement la même taille sur toutes les cartes. Cadrage haut : on
   garde le visage. */
.fut-photo {
  width: 100%; aspect-ratio: 5 / 7; border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .04));
}
.fut-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.fut-nom {
  margin: 0; padding: 6px 12px 4px; text-align: center;
  font: 900 1.05rem/1 var(--titre); letter-spacing: -.01em;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.fut-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 6px; padding: 8px 12px 12px; }
.fut-stat { display: grid; justify-items: center; line-height: 1.1; }
.fut-stat b { font: 700 1.05rem/1 var(--chiffre); }
.fut-stat i { font: 600 .58rem/1.2 var(--texte); font-style: normal; opacity: .75; }
.fut-etoile {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rose); color: #fff; font-size: .8rem;
}
.fut[data-absent="true"] .fut-inner { filter: grayscale(.85); opacity: .78; }
.fut-forfait {
  position: absolute; top: 28%; left: -34px; margin: 0; z-index: 2;
  transform: rotate(-20deg); padding: 5px 40px;
  background: var(--nuit); color: #fff; font: 700 .72rem/1.2 var(--chiffre); letter-spacing: .12em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.note-forfait { color: var(--rose-texte); }
.fut[data-suivre="true"] .fut-inner { border-color: var(--rose); box-shadow: 0 0 0 2px var(--rose-doux), 0 22px 44px -22px rgba(0, 0, 0, .8); }
@media (prefers-reduced-motion: reduce) {
  .fut { transform: none !important; }
  .fut-brillance { display: none; }
}

.fiche {
  width: min(640px, calc(100vw - 32px)); max-height: 85vh; padding: 0; border: 1px solid var(--filet); border-radius: 16px;
  background: var(--nuit-2); color: var(--encre);
}
.fiche::backdrop { background: rgba(21, 1, 42, .75); backdrop-filter: blur(4px); }
.a-pointeur dialog, .a-pointeur dialog * { cursor: none; }
/* Dans une fenêtre modale, le fond est rose ou très sombre : le pointeur
   passe en blanc pour rester visible. */
dialog .pointeur-point { background: #fff; }
dialog .pointeur-anneau { border-color: rgba(255, 255, 255, .8); }
dialog .pointeur-anneau[data-etat="clic"] { background: rgba(255, 255, 255, .22); border-color: #fff; }
dialog .pointeur-anneau[data-etat="texte"] { background: #fff; border-color: transparent; }
dialog .pointeur-anneau[data-appui] { background: #fff; border-color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .fiche[open] { animation: fiche .4s var(--ressort); }
}
@keyframes fiche { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.fiche-tete { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; background: var(--rose); }
.fiche-nom { margin: 0; font: 900 1.8rem/1 var(--titre); letter-spacing: -.02em; }
.fiche-fermer { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(21, 1, 42, .25); color: #fff; font-size: 1.2rem; cursor: pointer; }
#fiche-corps { padding: 20px 24px 24px; }
.stats-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin: 0; }
.stat { background: var(--nuit); border-radius: 8px; padding: 12px; }
.stat dt { font-size: .72rem; color: var(--encre-douce); }
.stat dd { margin: 4px 0 0; font-size: 1.2rem; font-weight: 700; }
.fiche-sous { font: 800 1.1rem/1 var(--titre); margin: 24px 0 8px; }

/* ---- Articles ----------------------------------------------------------- */
.grille-articles { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: calc(var(--u) * 3); }
/* La Une à gauche sur deux rangées, deux articles plus petits à droite */
.grille-articles > .article:first-child { grid-row: 1 / span 2; }
.grille-articles > .article:first-child .article-titre { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.05; }
.grille-articles > .article:first-child .article-chapo { font-size: 1rem; }
.grille-articles > .article:first-child .article-corps { padding: 20px 24px 24px; }
.grille-articles > .article:not(:first-child) { position: relative; padding-left: 40%; min-height: 180px; }
.grille-articles > .article:not(:first-child) .article-image { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; height: 100%; aspect-ratio: auto; }
.grille-articles > .article:not(:first-child) .article-chapo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@container (max-width: 720px) {
  .grille-articles { grid-template-columns: 1fr; }
  .grille-articles > .article:first-child { grid-row: auto; }
}
@container (max-width: 460px) {
  .grille-articles > .article:not(:first-child) { padding-left: 0; }
  .grille-articles > .article:not(:first-child) .article-image { position: static; width: 100%; aspect-ratio: 16 / 9; height: auto; }
}
.articles-tous { margin: calc(var(--u) * 4) 0 0; }
.article { display: grid; align-content: start; text-decoration: none; border-radius: 12px; overflow: hidden; background: var(--nuit-2); transition: transform .3s var(--ressort); }
.article:hover { transform: translateY(-4px); }
.article-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-corps { padding: 16px; display: grid; gap: 6px; }
.article-surtitre { margin: 0; font-size: .78rem; font-weight: 700; color: var(--rose-texte); }
.article-titre { margin: 0; font: 800 1.2rem/1.15 var(--titre); }
.article-chapo { margin: 0; font-size: .9rem; color: var(--encre-douce); }
.article-date { font-size: .75rem; color: var(--encre-douce); }

/* ---- Tableau de la phase finale ----------------------------------------
   Trois colonnes : quarts, demies, puis le centre avec la finale, le
   trophée et le match pour la troisième place. Les cases vides portent
   la date et l'origine des équipes attendues.
   ------------------------------------------------------------------------ */
.tableau-final { margin-bottom: calc(var(--u) * 2); }
.bk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2); align-items: stretch; }
.bk-col { display: grid; align-content: start; gap: 4px; }
.bk-tour { margin: 0; font: 800 1rem/1.1 var(--titre); }
.bk-tour-petit { margin-top: 14px; font-size: .85rem; color: var(--encre-douce); }
.bk-periode { margin: 0 0 10px; font-size: .72rem; color: var(--encre-douce); }
.bk-cases { display: grid; gap: 10px; align-content: center; height: 100%; }
.bk-case {
  display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px;
  background: var(--nuit-2); border: 1px solid var(--filet);
}
.bk-belge { border-color: var(--rose); box-shadow: inset 3px 0 0 var(--rose); background: rgba(63, 243, 180, .12); }
.bk-vide { border-style: dashed; background: transparent; }
.bk-quand { margin: 0; font-size: .68rem; color: var(--encre-douce); }
.bk-attente { margin: 0; font-size: .8rem; color: var(--encre-douce); font-style: italic; }
.bk-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 .88rem/1.2 var(--texte); color: var(--encre-douce); }
.bk-eq { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bk-eq span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-gagne { color: var(--encre); font-weight: 800; }
.bk-bel { color: var(--rose-texte); }
.bk-ligne b { font-family: var(--chiffre); }
.bk-note { margin: 2px 0 0; font: 400 .68rem/1.2 var(--chiffre); color: var(--encre-douce); }
.bk-centre .bk-cases { justify-items: stretch; }
.bk-trophee { margin: 10px 0 0; text-align: center; font-size: 2rem; color: #f5c542; }
@container (max-width: 760px) {
  .bk { grid-template-columns: 1fr; }
  .bk-trophee { font-size: 1.6rem; }
}

/* ---- Où voir le match --------------------------------------------------- */
.carte-embed { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--filet); background: var(--nuit-2); }
.carte-embed iframe { display: block; width: 100%; height: 640px; border: 0; }
@container (max-width: 700px) { .carte-embed iframe { height: 520px; } }
.ou-voir .note a { color: var(--encre); }
.carte-cta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  margin-top: 16px; padding: 20px 24px; text-decoration: none; color: var(--encre);
  background: var(--nuit-2); border: 1px solid var(--filet); border-left: 5px solid var(--rose); border-radius: 16px;
  transition: transform .3s var(--ressort), border-color .2s, background-color .2s;
}
.carte-cta:hover { transform: translateY(-2px); background: var(--nuit-3); border-color: var(--rose); }
.cc-txt b { display: block; font: 900 1.25rem/1.1 var(--titre); letter-spacing: -.01em; margin-bottom: 4px; }
.cc-txt span { color: var(--encre-douce); font-size: .92rem; }
.cc-btn {
  display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto;
  min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--rose); color: #fff;
  font: 700 .92rem/1 var(--texte);
}
@media (max-width: 575px) { .carte-cta { padding: 18px; } .cc-btn { width: 100%; justify-content: center; } }

/* ---- Éclairages (version La Libre) ------------------------------------- */
.eclairages { padding-top: calc(var(--u) * 8); padding-bottom: calc(var(--u) * 8); }
.eclairages .bloc-tete { margin-bottom: calc(var(--u) * 4); }

/* ---- Zones publicitaires -----------------------------------------------
   Grille à deux colonnes : les sections à gauche, la pub à droite sur
   toute la hauteur de la zone. Le cadre intérieur est collant : il suit
   la lecture puis s'arrête en bas de sa zone. Sous 992 px : une seule
   colonne, et l'IMU se glisse après la première section de la zone.
   ------------------------------------------------------------------------ */
.zone { display: grid; grid-template-columns: minmax(0, 1fr); padding-left: 12px; padding-right: 12px; }
.zone > .bloc { grid-column: 1; min-width: 0; }
.bloc-interieur { container-type: inline-size; }
.zone-pub { grid-column: 1; grid-row: 2; display: flex; justify-content: center; padding: calc(var(--u) * 4) 0; border-top: 1px solid var(--filet); }
.zone[data-pub="off"] { grid-template-columns: minmax(0, 1fr); }
.zone[data-pub="off"] .zone-pub { display: none; }
.pub-collant { display: grid; justify-items: center; gap: 6px; }
.pub-mention { margin: 0; font: 400 .65rem/1 var(--chiffre); color: var(--encre-douce); }
.pub-cadre { display: grid; place-items: center; }
.pub-slot-halfpage { width: 300px; min-height: 600px; }
.pub-slot-imu { width: 300px; min-height: 250px; }
/* Réserve visible en attendant les tags de la régie */
.pub-attente {
  display: grid; place-content: center; gap: 8px; text-align: center; padding: 16px;
  border: 1px dashed rgba(255, 255, 255, .22); border-radius: 12px; color: var(--encre-douce);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 12px, transparent 12px 24px);
}
.pub-attente strong { font: 800 1rem/1.2 var(--titre); color: var(--encre); }
.pub-attente span { font: 400 .72rem/1 var(--chiffre); }
@media (min-width: 992px) {
  .zone { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; }
  .zone-pub { grid-column: 2; grid-row: 1 / span 20; display: block; padding: calc(var(--u) * 10) 0 calc(var(--u) * 4); border-top: 1px solid var(--filet); }
  /* Collée juste sous la pilule du bandeau (12 px de marge + ~101 px) */
  .pub-collant { position: sticky; top: 128px; }
}

/* ---- Sources, pub, pied ------------------------------------------------- */
.sources p { max-width: 46em; color: var(--encre-douce); }
.remerciement { border-left: 3px solid var(--rose); padding-left: 14px; }
.sources strong { color: var(--encre); }
.sources-grille { row-gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 2); }
.sources-grille .sous-titre { margin-top: 0; }
.methode { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: .88rem; color: var(--encre-douce); }
.methode li { padding-left: 18px; position: relative; }
.methode li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); }
.methode strong { color: var(--encre); }
.liste-sources { padding-left: 1.2em; font-size: .9rem; }
.liste-sources li { margin-bottom: 8px; }
.source-type { display: inline-block; font: 400 .7rem/1 var(--chiffre); padding: 3px 6px; margin-right: 8px; border: 1px solid var(--filet); border-radius: 4px; color: var(--encre-douce); }
.source-media { font-weight: 700; }


.pied { margin-top: calc(var(--u) * 4); padding: calc(var(--u) * 8) 0 calc(var(--u) * 4); background: #0d0019; border-top: 3px solid var(--rose); font-size: .88rem; color: var(--encre-douce); }
.pied-grille { row-gap: calc(var(--u) * 5); }
.pied-logo { height: 30px; width: auto; margin-bottom: 20px; }
.pied-titre-dossier { font: 900 1.6rem/1 var(--titre); letter-spacing: -.02em; color: var(--encre); margin: 0 0 12px; }
.pied-credit { color: var(--encre); margin: 0 0 6px; }
.pied-ia { margin: 0; font-size: .8rem; }
.pied a { color: inherit; text-decoration: none; transition: color .2s; }
.pied a:hover { color: #fff; }
.pied-credit a { text-decoration: underline; text-decoration-color: var(--rose); }
.pied-titre { font: 700 .75rem/1 var(--chiffre); color: var(--encre); margin: 6px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--filet); }
.pied-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied-reseaux { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pied-reseaux a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filet); font-size: 1rem; transition: background-color .2s, border-color .2s, transform .3s var(--ressort); }
.pied-reseaux a:hover { background: var(--rose); border-color: var(--rose); color: var(--nuit); transform: translateY(-2px); }
.pied-reseaux span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pied-appli { min-height: 40px; font-size: .85rem; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: calc(var(--u) * 6); padding-top: calc(var(--u) * 3); border-top: 1px solid var(--filet); font-size: .78rem; }
.pied-copyright { margin: 0; }
.pied-haut { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--encre) !important; }
@container (max-width: 640px) { .grille-groupes { grid-template-columns: 1fr; } }
@media (max-width: 991px) { .pied { padding-bottom: calc(var(--u) * 14); } }

/* ---- Tabbar mobile, toast, easter egg ---------------------------------- */
.tabbar { display: none; }
@media (max-width: 991px) {
  .bandeau-nav { display: none; }
  .tabbar {
    position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 60;
    display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
    padding: 6px; border-radius: 20px; border: 1px solid var(--filet);
    background: rgba(31, 8, 54, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar a {
    flex: 0 0 auto; min-width: 72px; min-height: 52px; display: grid; place-items: center; gap: 2px;
    padding: 6px 8px; border-radius: 14px; text-decoration: none; color: var(--encre-douce);
    transition: background-color .2s, color .2s;
  }
  .tabbar a i { font-size: 1.05rem; }
  .tabbar a span { font-size: .68rem; font-weight: 600; }
  .tabbar a[aria-current="true"] { background: var(--rose); color: var(--nuit); }
  .hero { padding-top: calc(var(--u) * 6); }
  .bloc { padding: calc(var(--u) * 7) 0; }
}

.toast {
  position: fixed; left: 50%; bottom: 96px; z-index: 80; transform: translateX(-50%);
  max-width: min(480px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 12px;
  background: var(--encre); color: var(--nuit); font-weight: 600; font-size: .9rem; box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
/* Le compte des surprises : à la ligne, en rouge DH, sous le clin d'oeil.
   Le fond du toast est clair, d'où --dh-sombre et non --dh. */
.toast-note {
  display: block; margin-top: 5px; color: var(--dh-sombre);
  font-weight: 700; font-size: .82rem; letter-spacing: .01em;
}

.panenka {
  position: fixed; left: 8vw; bottom: 10vh; z-index: 90; font-size: 3rem; color: #fff; pointer-events: none;
  animation: cloche 2.2s cubic-bezier(.3, .1, .3, 1) forwards;
}
@keyframes cloche {
  0% { transform: translate(0, 0) rotate(0); }
  45% { transform: translate(40vw, -60vh) rotate(-300deg); }
  100% { transform: translate(84vw, 4vh) rotate(-640deg); opacity: .2; }
}

/* Fête d'une victoire belge (js/fete.js) */
.fete {
  width: min(520px, calc(100vw - 32px)); padding: 32px; border: 0; border-radius: 24px;
  background: linear-gradient(160deg, var(--dh), #5c0a2b 120%); color: #fff; text-align: center;
}
.fete::backdrop { background: rgba(21, 1, 42, .82); backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: no-preference) { .fete[open] { animation: fiche .5s var(--ressort); } }
.fete-sur { margin: 0; font: 700 .75rem/1 var(--chiffre); opacity: .85; }
.fete-titre { margin: 10px 0 16px; font: 900 clamp(2.2rem, 6vw, 3.4rem)/.95 var(--titre); letter-spacing: -.03em; }
.fete-score { margin: 0 0 6px; font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 700; }
.fete-score b { font-size: 1.6em; }
.fete-bel { text-decoration: underline; text-underline-offset: 4px; }
.fete-quand, .fete-suite { margin: 0 0 6px; font-size: .88rem; opacity: .9; }
.fete-suite { margin-bottom: 22px; }
.fete .bouton { background: #fff; color: var(--rose-sombre); border-color: #fff; }
.fete-confettis { position: fixed; inset: 0; z-index: 94; pointer-events: none; }

/* Surprises (js/surprises.js) */
.pluie { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.pluie > i { position: absolute; top: -8vh; left: var(--x); animation: tombe var(--t) cubic-bezier(.3, .2, .5, 1) var(--d) forwards; }
@keyframes tombe { to { transform: translate(var(--dx), 115vh) rotate(var(--r)); } }
.azulejo {
  width: 44px; height: 44px; border-radius: 3px; border: 2px solid #0b3b8c;
  background-color: #f7f4ea; box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.azulejo-0 { background-image: radial-gradient(circle at 50% 50%, #0b3b8c 0 5px, transparent 6px), radial-gradient(circle at 0 0, #0b3b8c 0 10px, transparent 11px), radial-gradient(circle at 100% 0, #0b3b8c 0 10px, transparent 11px), radial-gradient(circle at 0 100%, #0b3b8c 0 10px, transparent 11px), radial-gradient(circle at 100% 100%, #0b3b8c 0 10px, transparent 11px); }
.azulejo-1 { background-image: linear-gradient(45deg, transparent 42%, #0b3b8c 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #0b3b8c 42% 58%, transparent 58%); }
.azulejo-2 { background-image: radial-gradient(circle, transparent 7px, #0b3b8c 8px 11px, transparent 12px), linear-gradient(#0b3b8c, #0b3b8c) center / 100% 3px no-repeat, linear-gradient(#0b3b8c, #0b3b8c) center / 3px 100% no-repeat; }
.confetti { width: 10px; height: 16px; border-radius: 2px; background: var(--c); }
.trophee-volant {
  position: fixed; left: 50%; top: 50%; z-index: 96; pointer-events: none;
  font-size: 7rem; color: #f5c542; text-shadow: 0 10px 40px rgba(245, 197, 66, .6);
  animation: trophee 2.4s var(--doux) forwards;
}
@keyframes trophee {
  0% { transform: translate(-50%, 40vh) scale(.3) rotateY(0); opacity: 0; }
  30% { opacity: 1; }
  60% { transform: translate(-50%, -50%) scale(1.2) rotateY(720deg); opacity: 1; }
  100% { transform: translate(-50%, -80vh) scale(.6) rotateY(1080deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   « Vous êtes N à suivre en direct »
   Posé dans la pilule de l'horloge, visible seulement pendant un match.
   ========================================================================== */

.foule-direct {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: rgba(243, 14, 74, .14);
  border: 1px solid rgba(243, 14, 74, .4);
  font-size: .72rem; font-weight: 600; color: var(--encre);
  white-space: nowrap;
}
.foule-direct[hidden] { display: none; }

.foule-point {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rose); flex: 0 0 auto;
  animation: foule-pouls 1.8s ease-in-out infinite;
}
@keyframes foule-pouls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .foule-point { animation: none; }
}

/* Sur un petit écran, la pilule de l'horloge est déjà chargée : on garde
   le point et le chiffre, on laisse tomber la phrase complète. */
@media (max-width: 575px) {
  .foule-direct { padding: 2px 8px 2px 6px; font-size: .66rem; }
}

/* ==========================================================================
   Surprises : les nouvelles averses et le mode nocturne.

   .pluie > i pose deja position, top, left et l'animation « tombe » : on
   ne decrit ici que l'apparence, sauf pour la drache qui a besoin d'une
   chute droite et rapide, sans derive ni rotation.
   ========================================================================== */

.frite {
  width: 7px; height: 30px; border-radius: 2px;
  background: linear-gradient(180deg, #f6c445, #e0a21c);
  box-shadow: inset -2px 0 0 rgba(0, 0, 0, .18);
}

.goutte {
  width: 2px; height: 18px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(190, 220, 255, 0), rgba(190, 220, 255, .9));
  /* Une goutte qui tourne sur elle-meme en derivant, ce sont des
     confettis bleus, pas de la pluie. On remplace donc l'animation
     commune par une chute verticale. */
  animation-name: drache !important;
  animation-timing-function: linear !important;
}
@keyframes drache {
  from { transform: translateY(0); opacity: .9; }
  to   { transform: translateY(118vh); opacity: .15; }
}

/* Le soir tombe sur le dossier, six secondes. */
.mode-nocturne body { filter: brightness(.62) saturate(1.15); transition: filter 1.1s ease; }

@media (prefers-reduced-motion: reduce) {
  .frite, .goutte { display: none; }
  .mode-nocturne body { filter: none; }
}

/* Débordement horizontal de quelques pixels en mobile, venu de l'aurore
   du hero et de la frise des journées : on coupe au niveau de la page,
   comme sur le dossier de la Ligue des nations, plutôt que de rogner
   chaque élément décoratif. « clip » plutôt que « hidden » : il coupe
   sans créer de conteneur de défilement, ce qui casserait le
   position: sticky du bandeau. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* ==========================================================================
   La journée en onglets : « Tous », puis un bouton par jour.

   Une journée de D1A s'étale du vendredi au dimanche. Tout empiler dans
   une seule bande obligeait à pousser longtemps pour trouver le match du
   soir ; les onglets découpent par date, « Tous » garde la vue d'ensemble.
   La rangée n'apparaît qu'à partir de deux jours.
   ========================================================================== */
.tableau-jours {
  display: flex; gap: 4px; margin: 0 0 10px; padding: 4px;
  overflow-x: auto; scrollbar-width: none;
  border-radius: 12px; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
}
.tableau-jours::-webkit-scrollbar { display: none; }
.tableau-jour {
  appearance: none; cursor: pointer; border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 12px; background: transparent; color: var(--encre-douce);
  font: 700 .78rem/1 var(--texte);
  transition: background-color .18s ease, color .18s ease;
}
.tableau-jour:hover { color: var(--encre); }
/* Le menthe de la D1A est clair : du texte blanc dessus serait illisible.
   L'onglet actif porte donc l'encre sombre du dossier, comme les pastilles
   de club ailleurs sur la page. */
.tableau-jour[aria-selected="true"] { background: var(--rose); color: var(--nuit); }
.tableau-jour-nb { font-size: .68rem; opacity: .7; padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .12); }
.tableau-jour[aria-selected="true"] .tableau-jour-nb { background: rgba(21, 1, 42, .18); opacity: .95; }

.tableau-quand { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.tableau-date { font-weight: 700; color: var(--encre); }
/* Première lettre en capitale, pas chaque mot : « mar. 3 nov. » devient
   « Mar. 3 nov. » et non « Mar. 3 Nov. », qui n'est pas du français. */
.tableau-date::first-letter { text-transform: uppercase; }
.tableau-heure { opacity: .85; }
.tableau-code { opacity: .6; }
/* Un seul jour affiché : la date répète l'onglet, elle s'efface d'un ton. */
.tableau-piste[data-filtre="jour"] .tableau-date { font-weight: 400; color: inherit; opacity: .8; }

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