/* ==========================================================================
   Ligue des nations 2026-2027 · DH Les Sports+
   Charte : nuit UEFA #030632, rose signal #f30e4a (info importante, live,
   Belgique). Les quatre ligues ont chacune leur couleur, reprise partout
   (matrice, puces, légendes). Le rouge DH reste dans le logo.

   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: #030632;
  --nuit-2: #0a0f45;
  --nuit-3: #151c63;
  --filet: rgba(166, 174, 219, .22);
  --rose: #f30e4a;
  --rose-doux: rgba(243, 14, 74, .16);
  --encre: #f3f5ff;
  --encre-douce: #a6aedb;
  --ligue-a: #3fd0ff;
  --ligue-b: #b8f04a;
  --ligue-c: #ffa31a;
  --ligue-d: #a78bfa;
  --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; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--u) * 14); -webkit-text-size-adjust: 100%; }
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: #fff; text-shadow: none; }
::-moz-selection { background: var(--rose); color: #fff; text-shadow: none; }
.recit-carte ::selection, .porte-carte ::selection { background: var(--rose); color: #fff; }

/* ---- 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(243, 14, 74, .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: #fff; 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: #fff; }
.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(10, 15, 69, .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(10, 15, 69, .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(--rose); 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(243, 14, 74, .15)); } 100% { background: transparent; } }
.methode-traduction { color: var(--encre); }
.methode-traduction::before { background: var(--ligue-c) !important; }
.horloge i { color: var(--rose); }
.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(10, 15, 69, .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(10, 15, 69, .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(10, 15, 69, .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); }
.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); }
.tableau-match[data-belge="true"] { background: rgba(243, 14, 74, .22); box-shadow: inset 3px 0 0 var(--rose); }
.tableau-match[data-etat="en-cours"] { border-color: var(--rose); }
.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); }
.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(--rose); 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; }
.hero-aurore span:nth-child(1) { width: 46%; height: 60%; left: 50%; top: 5%; background: radial-gradient(circle, rgba(63, 208, 255, .7), transparent 62%); }
.hero-aurore span:nth-child(2) { width: 42%; height: 55%; left: 5%; top: 45%; background: radial-gradient(circle, rgba(243, 14, 74, .7), transparent 62%); }
.hero-aurore span:nth-child(3) { width: 38%; height: 50%; left: 30%; top: 30%; background: radial-gradient(circle, rgba(167, 139, 250, .6), 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(--rose); }
.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(10, 15, 69, .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(243, 14, 74, 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(--rose); 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(--rose) 0%, #b10a39 100%); border-radius: 16px;
  /* Fond rose plein : le texte est blanc dans les deux chartes. */
  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(--rose); 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(--rose); }
.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); }
.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); }

/* ---- Récit -------------------------------------------------------------- */
.recit-carte { background: #f3f5ff; 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(3, 6, 50, .18); border-radius: 12px; padding: 14px 18px; background: rgba(3, 6, 50, .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); }
.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: #4a5190; border-bottom-color: rgba(3, 6, 50, .2); }
.table-palmares td { padding: 12px 8px 12px 0; border-bottom: 1px solid rgba(3, 6, 50, .15); vertical-align: top; }
.table-palmares td:nth-child(2) { font: 800 1.1rem/1.2 var(--titre); }
.ligne-future td { color: var(--rose); }

/* ---- 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); }
.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); }
.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(3, 6, 50, .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(3, 6, 50, .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); }
.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(243, 14, 74, .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); }
.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: #02041f; 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: #fff; 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(10, 15, 69, .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: #fff; }
  .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);
}

.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(--rose), #8d0a2d 120%); color: #fff; text-align: center;
}
.fete::backdrop { background: rgba(3, 6, 50, .8); 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); 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; }
}