/* ==========================================================================
   marque-lalibre.css : la version La Libre.
   Même dossier, autre maison. Fond clair, magenta et marine, Manuale pour
   les titres et Libre Franklin pour le texte, et le dégradé animé des
   halos repris du dossier Calendrier scolaire : quatre disques flous en
   fusion « multiply » sur fond blanc, dérives lentes de 27 à 47 secondes.
   Chargé après style.css : il ne fait que redéfinir des variables et
   quelques blocs, jamais dupliquer la feuille principale.
   ========================================================================== */

:root {
  /* La charte : magenta #AC115D, marine #061E4D. Le fond devient clair,
     donc « nuit » devient la valeur claire et « encre » la valeur sombre :
     tout le reste de la feuille suit sans être réécrit. */
  --nuit: #ffffff;
  --nuit-2: #f6f4f2;
  --nuit-3: #efeaf1;
  --filet: rgba(6, 30, 77, .16);
  --rose: #ac115d;
  --rose-doux: rgba(172, 17, 93, .12);
  --encre: #061e4d;
  --encre-douce: #5a6488;
  --ligue-a: #3b2c7a;
  --ligue-b: #1f7a5a;
  --ligue-c: #b4761a;
  --ligue-d: #7b3fbf;
  --titre: "Manuale", Georgia, "Times New Roman", serif;
  --texte: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --chiffre: "Libre Franklin", ui-monospace, Menlo, monospace;
}

body { font-weight: 400; }
.bloc-titre, .hero-titre, .recit-titre { letter-spacing: -.01em; }
.hero-titre { font-weight: 800; }
.hero-titre span:nth-child(2) { color: var(--rose); }

/* Toutes les surfaces en verre du dossier DH sont posées sur un bleu nuit
   codé en dur : on les repasse en blanc translucide, sinon rien n'est
   lisible sur fond clair. */
.bandeau > .container,
.bandeau-plein > .container {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(6, 30, 77, .12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -30px rgba(6, 30, 77, .5);
}
.tableau { background: rgba(255, 255, 255, .72); border-bottom-color: rgba(6, 30, 77, .12); }
.fiche-comp { background: rgba(255, 255, 255, .78); border-color: rgba(6, 30, 77, .12); }
.tabbar { background: rgba(255, 255, 255, .92) !important; border-top: 1px solid rgba(6, 30, 77, .12); }
.pub-attente { border-color: rgba(6, 30, 77, .2); background: repeating-linear-gradient(135deg, rgba(6, 30, 77, .04) 0 12px, transparent 12px 24px); }
.pub-attente strong { color: var(--encre); }
.fut-etoile { color: #fff; }
.chantier { background: var(--rose); color: #fff; }
.nav-langues a[aria-current="true"] { background: var(--rose); }
.nav-beta { border-color: rgba(6, 30, 77, .25); }
.tableau-match { background: #fff; border-color: rgba(6, 30, 77, .12); }
.tableau-match:hover { background: #fff; border-color: rgba(6, 30, 77, .35); }
.tableau-match[data-belge="true"] { background: rgba(172, 17, 93, .07); }

/* Halos animés, repris du Calendrier scolaire. */
.aurore { height: 1200px; }
.hero-aurore { filter: blur(72px) saturate(100%); opacity: .5; }
.hero-aurore span { mix-blend-mode: multiply; border-radius: 50%; }
.hero-aurore span:nth-child(1) { width: 54%; height: 54%; left: -6%; top: -2%; background: #ac115d; animation: derive-llb-1 34s var(--doux) infinite; }
.hero-aurore span:nth-child(2) { width: 48%; height: 48%; left: 28%; top: 20%; background: #7b3fbf; animation: derive-llb-2 27s var(--doux) infinite; }
.hero-aurore span:nth-child(3) { width: 44%; height: 44%; left: 56%; top: -8%; background: #3b2c7a; opacity: .55; animation: derive-llb-3 41s var(--doux) infinite; }
@keyframes derive-llb-1 { 0% { transform: translate3d(0,0,0) scale(1); } 38% { transform: translate3d(18%, 14%, 0) scale(1.12); } 72% { transform: translate3d(-12%, 22%, 0) scale(.92); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes derive-llb-2 { 0% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(-22%, 18%, 0) scale(1.2); } 66% { transform: translate3d(16%, -14%, 0) scale(.88); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes derive-llb-3 { 0% { transform: translate3d(0,0,0) scale(1); } 36% { transform: translate3d(40%, -26%, 0) scale(1.18); } 70% { transform: translate3d(-24%, 18%, 0) scale(.86); } 100% { transform: translate3d(0,0,0) scale(1); } }

/* Cartes et surfaces : la version claire a besoin d'ombres, pas de lueurs. */
.fiche-comp, .carte, .prono, .article, .selectionneur, .bk-case, .tableau-match {
  box-shadow: 0 18px 40px -34px rgba(6, 30, 77, .6);
}
/* La feuille DH écrit « color: var(--nuit) » sur les surfaces claires :
   avec l'inversion des variables, cela donnait du blanc sur blanc. On
   rétablit l'encre marine partout où c'était le cas. */
.recit-carte, .recit-carte p, .recit-carte a, .recit-carte li, .recit-carte td, .recit-carte th,
.recit-titre, .faq-question, .faq-reponse { color: var(--encre); }
.recit-carte { background: #f6f4f2; }
.recit-carte .bloc-titre { color: var(--encre); }
.puce[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.pastille[data-nom]:hover::after, .pastille[data-nom]:focus-visible::after { background: var(--encre); color: #fff; }
.foule-1, .foule-N, .foule-2 { color: #fff; }
.toast { background: var(--encre); color: #fff; }
.chantier { background: var(--rose); color: #fff; }

.fiche-fermer { background: rgba(255, 255, 255, .25); color: #fff; }
.tableau-live, .bouton, .cc-btn, .embed-lien { color: #fff; }
/* Pied de page marine : tout le texte passe en clair, y compris les
   crédits qui héritaient sinon du gris de lecture du fond blanc. */
.pied { background: var(--encre); color: rgba(255, 255, 255, .86); }
.pied p, .pied li, .pied .note { color: rgba(255, 255, 255, .78); }
.pied a, .pied .pied-titre, .pied strong { color: #fff; }
.pied .bouton-fantome { border-color: rgba(255, 255, 255, .4); color: #fff; }
.pied-liens a:hover { color: #f3c6dd; }

/* Les cartes joueurs gardent leurs métaux : ils restent lisibles sur clair. */
.fut-inner { border-color: rgba(6, 30, 77, .18); }

/* ---- Éclairages : la couche éditoriale propre à La Libre -------------- */
.eclairages { background: #f6f4f2; border-radius: 24px; padding: calc(var(--u) * 6) calc(var(--u) * 5); }
@media (max-width: 767px) { .eclairages { border-radius: 16px; padding: calc(var(--u) * 4) calc(var(--u) * 2); } }
.grille-eclairages { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: calc(var(--u) * 3); }
.eclairage {
  background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: calc(var(--u) * 3);
  display: grid; gap: 10px; align-content: start;
}
.eclairage-oeil { margin: 0; font: 700 .7rem/1 var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--rose); }
.eclairage-titre { margin: 0; font: 800 1.35rem/1.15 var(--titre); }
.eclairage p { margin: 0; font-size: .96rem; line-height: 1.65; color: #2c3660; }
.eclairage-chiffre { font: 800 2.6rem/1 var(--titre); color: var(--rose); }
.eclairage-source { font-size: .76rem; color: var(--encre-douce); }
.eclairage-source a { color: var(--encre); }

/* Flèches de la bande en charte La Libre. */
.tableau-fleche { background: #fff; color: var(--encre); border-color: rgba(6, 30, 77, .18); box-shadow: 0 6px 18px -10px rgba(6, 30, 77, .6); }
.tableau-fleche:hover { background: var(--rose); color: #fff; border-color: var(--rose); }