/* ==========================================================================
   Mondiaux de cyclisme sur route, Montréal 2026 · DH Les Sports+
   Feuille de style.

   Le châssis, les noms de jetons et la typographie sont ceux du dossier
   Belgian Cats à Berlin. Seule la famille de rouges change.

   LA RAMPE DE ROUGES
   Le dossier Cats utilisait trois rouges qui faisaient trois métiers :
   #e1001a en accent principal, #ff2d45 et #ff6b7a pour la Belgique et le
   direct. Les écraser avec une seule valeur aplatit la hiérarchie et le
   dossier perd son relief. On garde donc trois niveaux, mais tous issus
   du #da273b demandé :
       --gazon-vif   #da273b   accent principal, titres, traits, actifs
       --lion        #f2536a   éclairci : la Belgique, les mises en avant
       --lion-clair  #ff8a9b   très clair : survols, halos, dégradés
       --rouge-fonce #9e1a2a   assombri : fonds, profondeurs, bordures
   Le #da273b passe le contraste AA sur le fond ardoise #1b1f26 en gros
   caractères et en aplat. En texte courant sur fond sombre, on écrit en
   --lion, jamais en --gazon-vif : le rouge principal est une couleur de
   structure, pas de lecture.

   L'ARC-EN-CIEL
   Les cinq couleurs du maillot de champion du monde sont le seul autre
   jeu chromatique autorisé. Elles ne servent qu'aux podiums, aux
   médailles et au bandeau du hero. Partout ailleurs, ce serait un sapin
   de Noël.

   Grille calée sur le système de Josef Müller-Brockmann : module de 8,
   colonnes de Bootstrap, gouttières constantes, échelle typographique en
   ratio 1.25.

   Zéro tiret cadratin dans ce fichier.
   ========================================================================== */

:root {
  /* Encres */
  --encre:        #ffffff;
  --encre-doux:   #c3c7ce;
  --encre-faible: #8b919c;
  --fond-encre:   #22262e;

  /* Fonds

     LES QUATRE NIVEAUX DE GRIS, ET COMMENT LES BOUGER
     La rédaction trouvait le dossier trop sombre. Le fond général est donc
     remonté du quasi-noir vers un ardoise, et les cartes suivent d'un cran
     au-dessus pour garder l'écart qui les détache. Les sections marine ont
     été éclaircies d'autant.

     Ces quatre valeurs pilotent toute la page, et elles sont les seules à
     toucher si l'on veut aller plus loin. Remonter --papier sans remonter
     --papier-haut aplatirait le relief : les deux se déplacent ensemble,
     avec une douzaine de points d'écart entre eux.

     Repère : en dessous de #14, on retombe dans le noir de cave ; au-delà
     de #2a, le blanc du texte commence à manquer de contraste et il faut
     repasser sur les gris de texte. */
  --papier:       #1b1f26;   /* ardoise, fond général */
  --papier-haut:  #272c35;   /* cartes, un cran au-dessus */
  --gazon:        #123253;   /* marine DH éclaircie, sections sombres */
  --gazon-fonce:  #0f1319;

  /* La rampe de rouges, dérivée de #da273b */
  --gazon-vif:    #da273b;
  --lion:         #f2536a;
  --lion-clair:   #ff8a9b;
  --rouge-fonce:  #9e1a2a;

  /* Accents de service */
  --or:           #ffc94d;
  --argent:       #c9ccd4;
  --bronze:       #c98b52;
  --craie:        #ffffff;
  --bleu-clair:   #7fb3ff;
  --encre-accent: #7fb3ff;
  --cyan:         #00e5ff;
  --vert-signal:  #32ff9a;

  /* Les cinq bandes du maillot arc-en-ciel */
  --ac-bleu:  #0033a0;
  --ac-rouge: #d7282f;
  --ac-noir:  #111111;
  --ac-jaune: #f7c600;
  --ac-vert:  #00954b;

  /* Filets */
  --ligne:        rgba(255, 255, 255, .13);
  --ligne-forte:  rgba(255, 255, 255, .24);

  /* Verre */
  --verre:        rgba(255, 255, 255, .06);
  --verre-fort:   rgba(255, 255, 255, .11);
  --verre-bord:   rgba(255, 255, 255, .16);
  --flou:         22px;

  /* Typographie */
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --texte:   "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --data:    "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-xs:   .75rem;
  --t-sm:   .8125rem;
  --t-md:   .9375rem;
  --t-base: 1.0625rem;
  --t-lg:   1.3125rem;
  --t-xl:   1.625rem;
  --t-2xl:  2.125rem;
  --t-3xl:  3rem;
  --t-4xl:  4.25rem;

  /* Rythme vertical, module de 8 */
  --e-1: .5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4.5rem;
  --e-7: 7rem;

  --rayon:        10px;
  --rayon-carte:  18px;
  --rayon-bloc:   28px;
  --transition:   280ms cubic-bezier(.2, .7, .3, 1);

  --bandeau-h: 104px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bandeau-h) + 16px); }

/* Sur écran tactile, le défilement doux se superpose à l'inertie du
   navigateur et donne une impression de page molle. On le laisse aux
   souris. */
@media (hover: none) { html { scroll-behavior: auto; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

/* L'attribut hidden doit gagner contre toute règle d'affichage. Sans ça,
   un élément en display:flex ou display:grid reste visible malgré hidden,
   et c'est exactement ce qui faisait apparaître un filtre de catégorie à
   choix unique alors que le script l'avait masqué. */
[hidden] { display: none !important; }
a { color: var(--lion); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lion-clair); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   LE CONTENEUR

   Il est défini ici et non laissé à Bootstrap seul. Raison : le dossier
   n'utilise la grille Bootstrap que pour cette classe, aucun .row ni
   .col. Faire dépendre toute la mise en page d'un fichier externe qu'on
   copie à la main d'un dossier à l'autre, c'est se garantir une mise en
   ligne où tout se colle au bord gauche le jour où on oublie le fichier.

   Les valeurs sont rigoureusement celles de Bootstrap 5, aux mêmes points
   de rupture : si bootstrap-grid.min.css est bien présent, les deux
   déclarations disent la même chose et il n'y a aucun conflit. S'il
   manque, le dossier reste debout.
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--bs-gutter-x, .75rem);
  padding-left:  var(--bs-gutter-x, .75rem);
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* --------------------------------------------------------------------------
   REPLI TYPOGRAPHIQUE
   Si css/fonts.css ou le dossier /fonts manquent, le navigateur descend
   sur les familles listées dans les jetons. Les substituts sont choisis
   pour garder des proportions proches, pas au hasard : le dossier reste
   présentable même mal déployé.
   -------------------------------------------------------------------------- */

.svg-sprite { display: none; }

.ico { width: 1.15em; height: 1.15em; vertical-align: -.18em; flex: none; }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--gazon-vif); color: #fff;
  padding: var(--e-1) var(--e-2); border-radius: var(--rayon); z-index: 999;
}
.saut-contenu:focus { left: var(--e-2); top: var(--e-2); }

:focus-visible { outline: 2px solid var(--lion-clair); outline-offset: 3px; border-radius: 4px; }

.oeil {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lion);
  margin: 0 0 var(--e-1);
}

.sous-titre {
  font-family: var(--display);
  font-size: var(--t-lg);
  letter-spacing: .02em;
  color: var(--encre);
  margin: 0 0 var(--e-2);
}

.mention-source {
  font-size: var(--t-xs);
  color: var(--encre-faible);
  margin: var(--e-1) 0 0;
}

/* --------------------------------------------------------------------------
   LE BANDEAU, EN VERRE

   L'effet ne vient pas d'une seule règle mais de quatre couches empilées :
     1. un flou de fond avec sursaturation, qui fait ressortir les couleurs
        de la page à travers la barre plutôt que de les laver ;
     2. un dégradé très léger de haut en bas, qui donne de l'épaisseur ;
     3. un liseré clair sur l'arête haute, qui simule la réfraction ;
     4. une ombre portée basse et large, qui décolle la barre du contenu.
   Retirer l'une des quatre et ça redevient un simple fond translucide.

   La barre flotte : elle est détachée des bords, et le contenu passe
   dessous. C'est ce qui donne la sensation de matière.
   -------------------------------------------------------------------------- */
/* COLLANT, ET NON FIXE. C'est le point qui rendait le dossier instable sur
   iPhone : un élément en position fixed, flouté par backdrop-filter, saute
   à chaque fois que Safari escamote ou rétablit sa barre d'adresse, et la
   page entière semble flotter. En position sticky, la barre appartient au
   flux, Safari n'a plus rien à recalculer, et l'effet flottant reste le
   même dès qu'on commence à défiler. */
.bandeau {
  position: sticky;
  top: 10px; z-index: 80;
  padding: 10px 12px 0;
  pointer-events: none;   /* seul le verre reçoit les clics */
}

.bandeau-verre {
  pointer-events: auto;
  max-width: 1320px;
  margin: 0 auto;
  padding: 9px 16px;
  border-radius: 20px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 42%, rgba(255,255,255,.02) 100%),
    rgba(27, 31, 38, .62);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);

  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),   /* l'arête qui capte la lumière */
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 18px 44px -20px rgba(0,0,0,.85);

  /* Seuls la couleur et l'ombre sont animées. Faire varier la hauteur ou
     les marges pendant le défilement oblige le navigateur à recalculer la
     mise en page à chaque image, et la barre vibre. */
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Au défilement, la barre s'opacifie pour rester lisible par-dessus les
   sections claires. Sa géométrie, elle, ne bouge pas. */
.bandeau.est-compact .bandeau-verre {
  padding: 5px 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%),
    rgba(27, 31, 38, .88);
  border-color: rgba(255,255,255,.18);
}

.bandeau-haut { display: flex; align-items: center; gap: var(--e-3); }
/* Le logo est la signature du titre : il doit se lire d'un coup d'oeil,
   pas se deviner. Le fichier a été recadré sur son contenu réel, l'export
   d'Illustrator traînait un cadre de planche aux deux tiers vide. À 34
   pixels de haut, le logo visible est donc plus grand qu'il ne l'était à
   76 pixels avant recadrage, et sans espace mort autour.
   Il garde sa taille quand la barre se resserre au défilement, c'est le
   reste qui se compacte autour de lui. */
.marque { flex: none; line-height: 0; }
.marque-logo { height: 34px; width: auto; display: block; }

.bandeau-infos {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--e-3); margin-left: auto; flex-wrap: wrap;
}
@media (max-width: 991.98px) {
  .bandeau-infos { flex-direction: column; align-items: flex-end; gap: 2px; }
}
.bandeau-info {
  margin: 0;
  display: flex; align-items: center; gap: .45em;
  font-family: var(--data);
  font-size: var(--t-xs);
  color: var(--encre-doux);
  white-space: nowrap;
}
.bandeau-info:empty { display: none; }
.bandeau-meteo .meteo-icone { font-size: 1.05rem; line-height: 1; }
.bandeau-meteo .meteo-temp { color: var(--encre); font-weight: 500; }
.bandeau-compte {
  color: var(--lion);
  padding: .25em .7em;
  border-radius: 999px;
  background: rgba(218, 39, 59, .16);
  border: 1px solid rgba(242, 83, 106, .30);
}

/* Le bouton de menu n'apparaît qu'en mobile */
.bandeau-burger { display: none; }

.bandeau-nav { margin-top: 6px; }
.bandeau-nav ul {
  display: flex; gap: var(--e-3);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.bandeau-nav ul::-webkit-scrollbar { display: none; }
.bandeau-nav a {
  font-family: var(--display);
  font-size: var(--t-md);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-doux);
  text-decoration: none;
  white-space: nowrap;
  padding: 3px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.bandeau-nav a:hover,
.bandeau-nav a.est-actif { color: var(--encre); border-bottom-color: var(--gazon-vif); }

@media (max-width: 767.98px) {
  .bandeau { top: 8px; padding: 0 8px; }
  .bandeau-verre { padding: 7px 12px; border-radius: 16px; }
  .marque-logo { height: 28px; }
  .bandeau-infos { gap: var(--e-2); }
  .bandeau-compte { display: none; }

  /* Menu replié derrière un bouton, déplié en liste verticale. */
  .bandeau-burger {
    display: grid; gap: 4px; flex: none;
    width: 38px; height: 38px;
    place-content: center; padding: 0;
    border-radius: 12px; cursor: pointer;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
  }
  .bandeau-burger span {
    display: block; width: 17px; height: 2px; border-radius: 2px;
    background: var(--encre);
    transition: transform var(--transition), opacity var(--transition);
  }
  .bandeau-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .bandeau-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .bandeau-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .bandeau-nav {
    display: grid; grid-template-rows: 0fr;
    margin-top: 0; overflow: hidden;
    transition: grid-template-rows var(--transition), margin-top var(--transition);
  }
  .bandeau-nav > ul { min-height: 0; flex-direction: column; gap: 0; overflow: visible; }
  .bandeau.est-ouvert .bandeau-nav { grid-template-rows: 1fr; margin-top: 10px; }
  .bandeau-nav a {
    display: block; padding: .7em 0;
    border-bottom: 1px solid var(--ligne);
    font-size: var(--t-lg);
  }
  .bandeau-nav li:last-child a { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: var(--e-5) 0 var(--e-6); overflow: hidden; margin-top: calc(var(--e-4) * -1); }

.hero-fond {
  position: absolute; inset: -140px 0 0;   /* remonte derrière le bandeau */
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(218, 39, 59, .28), transparent 62%),
    radial-gradient(900px 520px at 88% 12%, rgba(5, 31, 58, .85), transparent 58%),
    linear-gradient(180deg, #242932 0%, var(--papier) 68%);
}
.hero-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .38;
  /* La photo est cadrée sur le tiers haut : sur un peloton, l'intérêt est
     en haut de l'image, pas au milieu. */
  object-position: 50% 35%;
}
/* Voile dégradé : garantit la lisibilité du titre quelle que soit la
   photo déposée. Sans lui, une image claire rendrait le hero illisible. */
.hero-voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(27,31,38,.62) 0%, rgba(27,31,38,.34) 45%, var(--papier) 100%),
    linear-gradient(90deg, rgba(27,31,38,.80) 0%, rgba(27,31,38,.20) 62%, transparent 100%);
}

.hero-fond::after {
  /* Trame fine, rappel du grain d'impression du journal */
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  opacity: .45;
}

.hero-corps { position: relative; }

.hero-titre {
  font-size: clamp(3.5rem, 13vw, 9rem);
  line-height: .86;
  margin: 0 0 var(--e-2);
}
.hero-titre-l1 { display: block; }
.hero-titre-l2 {
  display: block;
  color: transparent;
  -webkit-text-stroke: 2px var(--gazon-vif);
  paint-order: stroke fill;
}

.arcenciel {
  display: flex; width: min(420px, 100%); height: 10px;
  border-radius: 999px; overflow: hidden;
  margin: 0 0 var(--e-3);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.arcenciel:hover { transform: scaleY(1.5); box-shadow: 0 0 24px rgba(255,255,255,.18); }
/* Les cinq bandes sont séparées par un filet clair. Sans lui, la bande
   noire du maillot se confond avec le fond nuit et l'arc-en-ciel semble
   troué entre le rouge et le jaune. Constaté en ligne, corrigé ici. */
.arcenciel span { flex: 1; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28); }
.ac-n { position: relative; }
.ac-b { background: var(--ac-bleu); }
.ac-r { background: var(--ac-rouge); }
.ac-n { background: var(--ac-noir); }
.ac-j { background: var(--ac-jaune); }
.ac-v { background: var(--ac-vert); }

.hero-chapo {
  max-width: 58ch;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--encre-doux);
  margin: 0 0 var(--e-4);
}

.hero-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
  padding: var(--e-3) 0;
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
}
.hero-chiffres div { margin: 0; }
.hero-chiffres dt {
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-faible);
}
.hero-chiffres dd {
  margin: 2px 0 0;
  font-family: var(--display);
  font-size: var(--t-2xl);
  line-height: 1;
  color: var(--encre);
}
.hero-chiffres dd small { font-size: var(--t-md); color: var(--encre-faible); }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.cta {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--display);
  font-size: var(--t-md);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre);
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  border-radius: 999px;
  padding: .7em 1.3em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.cta:hover { background: var(--verre-fort); border-color: var(--ligne-forte); transform: translateY(-1px); color: var(--encre); }
.cta-plein { background: var(--gazon-vif); border-color: var(--gazon-vif); color: #fff; }
.cta-plein:hover { background: var(--lion); border-color: var(--lion); color: #fff; }

/* --------------------------------------------------------------------------
   Emplacement publicitaire

   Il vit désormais dans la colonne de droite du tableau des médailles.
   La réserve de place est déclarée en dur pour éviter le décalage de mise
   en page au chargement du tag (Core Web Vitals, CLS).
   -------------------------------------------------------------------------- */
.pub-emplacement { margin: 0; }
.pub-mention {
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre-faible);
  margin: 0 0 var(--e-1);
  text-align: center;
}
.pub-cadre {
  width: 300px; height: 600px;
  margin: 0 auto;
  background: var(--verre);
  border: 1px dashed var(--ligne);
  border-radius: var(--rayon);
}
@media (max-width: 991.98px) {
  .pub-cadre { width: 300px; height: 250px; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: var(--e-6) 0; border-bottom: 1px solid var(--ligne); }
.section-sombre { background: linear-gradient(180deg, var(--gazon) 0%, #0c2340 100%); }

.section-tete { max-width: 68ch; margin: 0 0 var(--e-5); }
.section-titre { font-size: clamp(2rem, 5vw, var(--t-3xl)); margin: 0 0 var(--e-2); }
.section-chapo { color: var(--encre-doux); margin: 0; }

/* --------------------------------------------------------------------------
   Les classements

   Deux colonnes : les tableaux de résultats, et la publicité collante tant
   que la section défile.
   -------------------------------------------------------------------------- */
.classements-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--e-5);
  align-items: start;
}
.classements-grille > .pub-emplacement { position: sticky; top: calc(var(--bandeau-h) + 16px); }

.classement-carte {
  background: var(--papier-haut);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  padding: var(--e-3);
  margin-bottom: var(--e-3);
}
.classement-carte.est-a-venir { opacity: .68; }

.classement-tete { margin-bottom: var(--e-2); }
.classement-jour {
  font-family: var(--data); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-faible); margin: 0 0 4px;
}
.classement-nom { font-family: var(--display); font-size: var(--t-xl); margin: 0; }
.classement-chiffres {
  font-family: var(--data); font-size: var(--t-sm);
  color: var(--lion); margin: 4px 0 0;
}
.classement-attente { font-size: var(--t-sm); color: var(--encre-faible); margin: 0; }

.classement-table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.classement-table th, .classement-table td {
  padding: .55em .5em; border-bottom: 1px solid var(--ligne); text-align: left;
}
.classement-table th {
  font-family: var(--display); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--encre-faible);
}
.classement-table .col-pos { width: 3.2em; font-family: var(--display); font-size: var(--t-lg); color: var(--encre-faible); }
.classement-table .col-pays { width: 4.5em; font-family: var(--data); font-size: var(--t-sm); color: var(--encre-doux); }
.classement-table .col-temps { text-align: right; font-family: var(--data); font-size: var(--t-sm); color: var(--encre-doux); white-space: nowrap; }

/* Les trois premiers portent les couleurs du podium, la Belgique passe
   devant tout le reste : c'est ce qu'un lecteur belge cherche en premier. */
.classement-table tr.est-podium .col-pos { color: var(--encre); }
.classement-table tr:first-child .col-pos { color: var(--or); }
.classement-table tr.est-belge { background: rgba(242, 83, 106, .10); }
.classement-table tr.est-belge .col-coureur { color: var(--lion); font-weight: 600; }
.classement-table tr.est-repliee { display: none; }

.classement-carte .cta { margin-top: var(--e-2); }

/* Le palmarès : même carte, mais il ne doit pas se lire comme un résultat
   de course, d'où l'année en tête de ligne et le lieu en fin. */
.palmares-carte { border-color: var(--ligne-forte); }
.palmares-note { font-size: var(--t-sm); color: var(--encre-doux); margin: 0 0 var(--e-2); }
.classement-table .col-annee { font-family: var(--data); font-size: var(--t-md); color: var(--lion); width: 4.5em; }
.classement-table .col-lieu { color: var(--encre-faible); text-align: right; }
.palmares-carte .classement-table tr:first-child .col-pos { color: var(--lion); }

@media (max-width: 991.98px) {
  .classements-grille { grid-template-columns: 1fr; }
  .classements-grille > .pub-emplacement { position: static; }
}

/* --------------------------------------------------------------------------
   Le circuit

   Le profil prend toute la largeur, le compteur de tours est une barre
   horizontale posée au-dessus, les quatre difficultés sont alignées en
   dessous. La version précédente opposait un graphique à un pavé de texte
   dans deux colonnes : deux objets de poids visuel incomparable, la page
   penchait.
   -------------------------------------------------------------------------- */
.tours-barre {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-3) var(--e-5);
  align-items: end;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  border-radius: var(--rayon-carte);
  padding: var(--e-3);
  margin-bottom: var(--e-3);
}
.tours-curseur { min-width: 0; }
.circuit-label {
  display: block;
  font-family: var(--display); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--encre-faible);
  margin-bottom: var(--e-1);
}
.tours-cumul { display: flex; gap: var(--e-4); margin: 0; }
.tours-cumul dt {
  font-family: var(--display); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--encre-faible);
}
.tours-cumul dd {
  margin: 2px 0 0; font-family: var(--display);
  font-size: var(--t-2xl); line-height: 1; white-space: nowrap;
}
.tours-cumul div:first-child dd { color: var(--gazon-vif); }
.tours-equiv {
  grid-column: 1 / -1;
  margin: 0; padding-top: var(--e-2);
  border-top: 1px solid var(--ligne);
  font-size: var(--t-sm); color: var(--encre-doux);
}

input[type="range"] {
  width: 100%; height: 26px; margin: 0;
  background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gazon-vif) 0%, var(--gazon-vif) var(--remplissage, 50%), rgba(255,255,255,.16) var(--remplissage, 50%), rgba(255,255,255,.16) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%; background: #fff; border: 3px solid var(--gazon-vif);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,.16); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--gazon-vif); }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--gazon-vif);
}

.circuit-profil {
  background: rgba(0, 0, 0, .18);
  border: 1px solid var(--verre-bord);
  border-radius: var(--rayon-carte);
  padding: var(--e-2);
}
.circuit-profil svg { display: block; width: 100%; height: auto; }

.profil-remplissage { fill: url(#grad-profil); }
.profil-trait { fill: none; stroke: var(--lion); stroke-width: 2.4; stroke-linejoin: round; }
.profil-grille { stroke: rgba(255,255,255,.10); stroke-width: 1; }
.profil-texte { font-family: var(--data); font-size: 10px; fill: var(--encre-faible); }
.profil-cote-zone { fill: rgba(218, 39, 59, .18); }
.profil-cote-trait { stroke: var(--gazon-vif); stroke-width: 1; stroke-dasharray: 3 3; }
.profil-cote-nom { font-family: var(--display); font-size: 11px; fill: var(--encre); letter-spacing: .04em; }

.sous-titre-espace { margin-top: var(--e-5); }

.cotes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e-2);
  list-style: none; margin: 0; padding: 0;
  counter-reset: cote;
}
.cotes-grille li {
  counter-increment: cote;
  background: var(--papier-haut);
  border: 1px solid var(--ligne);
  border-top: 3px solid var(--gazon-vif);
  border-radius: var(--rayon-carte);
  padding: var(--e-3);
}
.cotes-grille li::before {
  content: counter(cote);
  display: block;
  font-family: var(--display); font-size: var(--t-xl);
  line-height: 1; color: var(--gazon-vif); margin-bottom: var(--e-1);
}
.cote-nom { display: block; font-family: var(--display); font-size: var(--t-lg); letter-spacing: .02em; }
.cote-chiffres { font-family: var(--data); font-size: var(--t-xs); color: var(--lion); display: block; margin: 4px 0 var(--e-1); }
.cote-note { font-size: var(--t-sm); color: var(--encre-doux); margin: 0; }

.circuit-carte { margin-top: var(--e-5); }

/* La carte. Aucun fond de carte, aucune tuile chargée chez un tiers : le
   tracé se suffit à lui-même et le dossier ne fuite rien vers un service
   de cartographie. */
/* La carte Leaflet. Hauteur fixe déclarée ici : sans elle, Leaflet ne sait
   pas dans quoi dessiner et la carte reste invisible. */
/* Les tuiles OpenStreetMap sont claires. Plutôt que de dépendre d'un
   fournisseur de fonds sombres à clé, on les assombrit en CSS : inversion
   puis rotation de teinte, la recette classique du mode nuit
   cartographique. Aucune clé, aucun compte, aucun risque de coupure. */
.carte-leaflet .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(1.02) contrast(.82) saturate(.65);
}

.carte-leaflet {
  height: 560px;
  border: 1px solid var(--verre-bord);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  background: #1b1f26;
  z-index: 0;   /* reste sous le bandeau collant */
}
@media (max-width: 767.98px) { .carte-leaflet { height: 420px; } }

/* Habillage sombre des commandes et de l'attribution, pour que la carte
   ne jure pas avec le dossier. L'attribution reste lisible : elle est
   obligatoire, on la fond dans la charte, on ne la cache pas. */
.carte-leaflet .leaflet-control-zoom a {
  background: var(--papier-haut);
  color: var(--encre);
  border-color: var(--ligne);
}
.carte-leaflet .leaflet-control-zoom a:hover { background: var(--fond-encre); }
.carte-leaflet .leaflet-control-attribution {
  background: rgba(27, 31, 38, .86);
  color: var(--encre-faible);
  font-size: 11px;
}
.carte-leaflet .leaflet-control-attribution a { color: var(--encre-doux); }
.carte-leaflet .leaflet-popup-content-wrapper,
.carte-leaflet .leaflet-popup-tip {
  background: var(--papier-haut);
  color: var(--encre);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.8);
}
.carte-leaflet .leaflet-popup-content { font-family: var(--texte); font-size: var(--t-sm); }
.carte-leaflet .leaflet-container a.leaflet-popup-close-button { color: var(--encre-faible); }

/* Repli sans Leaflet */
.carte-svg {
  display: block; width: 100%; height: auto;
  background: rgba(0, 0, 0, .18);
  border: 1px solid var(--verre-bord);
  border-radius: var(--rayon-carte);
}
.carte-ombre { fill: none; stroke: rgba(0, 0, 0, .55); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.carte-trace { fill: none; stroke: var(--lion); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.carte-cote { fill: none; stroke: var(--or); stroke-width: 5; stroke-linecap: round; }
.carte-etiquette { font-family: var(--display); font-size: 12px; fill: var(--encre); letter-spacing: .04em; }
.carte-etiquette-fond { fill: rgba(27,31,38,.86); stroke: var(--ligne); stroke-width: 1; }

.carte-repere circle { fill: var(--encre-faible); stroke: rgba(0,0,0,.5); stroke-width: 1.5; }
.carte-repere-feed circle { fill: var(--vert-signal); }
.carte-repere-warnleft circle { fill: var(--or); }
.carte-repere-info circle { fill: var(--bleu-clair); }

.carte-borne circle { stroke: rgba(0,0,0,.6); stroke-width: 2.5; }
.carte-depart circle { fill: var(--craie); }
.carte-arrivee circle { fill: var(--gazon-vif); }

.carte-legende {
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3);
  margin: var(--e-2) 0 0; padding: 0; list-style: none;
  font-size: var(--t-xs); color: var(--encre-doux);
}
.carte-legende li { display: flex; align-items: center; gap: .45em; }
.carte-legende i { width: .7em; height: .7em; border-radius: 50%; display: inline-block; }

.carte-absente {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3);
  background: var(--verre);
  border: 1px dashed var(--ligne-forte);
  border-radius: var(--rayon-carte);
  padding: var(--e-3);
}
.carte-absente p { margin: 0; color: var(--encre-doux); font-size: var(--t-sm); max-width: 62ch; }

@media (max-width: 767.98px) {
  .tours-barre { grid-template-columns: 1fr; }
  .tours-cumul { justify-content: space-between; gap: var(--e-2); }
}

/* --------------------------------------------------------------------------
   Frise des épreuves
   -------------------------------------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-4); }
.filtres-groupe { display: flex; flex-wrap: wrap; gap: var(--e-1); }

.puce {
  font-family: var(--display); font-size: var(--t-sm);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-doux);
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  border-radius: 999px;
  padding: .45em 1em; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.puce:hover { background: var(--verre-fort); color: var(--encre); }
.puce[aria-pressed="true"] { background: var(--gazon-vif); border-color: var(--gazon-vif); color: #fff; }

.frise { display: grid; gap: var(--e-3); }

.frise-jour { border-left: 2px solid var(--ligne); padding-left: var(--e-3); position: relative; }
.frise-jour::before {
  content: ""; position: absolute; left: -6px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gazon-vif);
}
.frise-jour-titre {
  font-family: var(--display); font-size: var(--t-lg);
  letter-spacing: .04em; margin: 0 0 var(--e-2);
}
.frise-jour.est-repos::before { background: var(--encre-faible); }
.frise-jour-note { font-size: var(--t-sm); color: var(--encre-faible); margin: 0; }

.epreuve {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: var(--e-2);
  align-items: start;
  padding: var(--e-2) 0;
  border-top: 1px solid var(--ligne);
}
.epreuve:first-of-type { border-top: 0; }
.epreuve.est-phare { background: rgba(218, 39, 59, .07); border-radius: var(--rayon); padding-inline: var(--e-2); }

.epreuve-heures { display: grid; gap: 1px; }
.epreuve-heure {
  font-family: var(--display); font-size: var(--t-xl);
  line-height: 1; color: var(--encre); margin: 0;
}
.epreuve-fin { font-family: var(--data); font-size: var(--t-xs); color: var(--lion); }
/* L'heure de Montréal est une information de second rang : elle sert au
   lecteur qui croise la presse canadienne, pas à celui qui programme sa
   soirée. */
.epreuve-locale { font-family: var(--data); font-size: var(--t-xs); color: var(--encre-faible); }
.epreuve-cat { font-family: var(--display); font-size: var(--t-lg); letter-spacing: .03em; }
.epreuve-type {
  font-family: var(--display); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--encre-faible);
  display: block;
}
.epreuve-resume { font-size: var(--t-sm); color: var(--encre-doux); margin: var(--e-1) 0 0; max-width: 68ch; }
.epreuve-chiffres { font-family: var(--data); font-size: var(--t-sm); color: var(--encre-doux); text-align: right; white-space: nowrap; }
.epreuve-chiffres b { display: block; font-family: var(--display); font-size: var(--t-lg); color: var(--encre); font-weight: 700; }
.epreuve-tours { color: var(--lion); }

@media (max-width: 575.98px) {
  .epreuve { grid-template-columns: 92px minmax(0, 1fr); }
  .epreuve-chiffres { grid-column: 2; text-align: left; margin-top: var(--e-1); }
}

/* --------------------------------------------------------------------------
   Favoris, en grille de cartes
   -------------------------------------------------------------------------- */
.favoris-selecteur { margin-bottom: var(--e-4); }

.favoris-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--e-3);
}

.favori {
  display: flex; flex-direction: column;
  background: var(--papier-haut);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  padding: var(--e-3);
  transition: transform var(--transition), border-color var(--transition);
}
.favori:hover { transform: translateY(-4px); border-color: var(--ligne-forte); }
.favori.est-belge {
  border-color: rgba(242, 83, 106, .55);
  background: linear-gradient(180deg, rgba(218,39,59,.10), var(--papier-haut) 60%);
}

.favori-statut {
  font-family: var(--display); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--lion);
  margin: 0 0 var(--e-1);
}
.favori-nom { font-family: var(--display); font-size: var(--t-xl); margin: 0; }
.favori-pays { font-family: var(--data); font-size: var(--t-xs); color: var(--encre-faible); letter-spacing: .1em; text-transform: uppercase; }
.favori-atout { font-size: var(--t-sm); color: var(--encre-doux); margin: var(--e-2) 0 0; }
.favori-stats { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-2) 0 0; padding: 0; list-style: none; }
.favori-stats li { font-family: var(--data); font-size: var(--t-xs); color: var(--encre-doux); }
.favori-stats b { display: block; font-family: var(--display); font-size: var(--t-lg); color: var(--encre); }

/* --------------------------------------------------------------------------
   Nations
   -------------------------------------------------------------------------- */
.nation-heros {
  background: linear-gradient(135deg, rgba(218,39,59,.16), rgba(5,31,58,.5));
  border: 1px solid rgba(242, 83, 106, .4);
  border-radius: var(--rayon-bloc);
  padding: var(--e-4);
  margin-bottom: var(--e-4);
}
.nation-heros-nom { font-size: var(--t-2xl); margin: 0 0 var(--e-1); }
.nation-heros-note { color: var(--encre-doux); margin: 0 0 var(--e-3); max-width: 70ch; }
.nation-selectionneur {
  font-family: var(--data); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--lion); margin: 0 0 var(--e-2);
}
.nation-forfaits { font-size: var(--t-sm); color: var(--encre-faible); margin: var(--e-3) 0 0; }

.effectifs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-3);
  padding-top: var(--e-3); border-top: 1px solid var(--ligne);
}
.effectif h4 {
  font-family: var(--display); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-faible); margin: 0 0 var(--e-1);
}
.effectif ul { list-style: none; margin: 0; padding: 0; }
.effectif li {
  padding: .35em 0; border-top: 1px solid var(--ligne);
  font-size: var(--t-md); color: var(--encre-doux);
}
/* Les leaders désignés sortent du lot : c'est l'information utile. */
.effectif li.est-leader {
  color: var(--encre); font-weight: 600;
  display: flex; align-items: center; gap: .5em;
}
.effectif li.est-leader::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gazon-vif); flex: none;
}
.nation-effectif { font-size: var(--t-xs); color: var(--encre-faible); margin: var(--e-1) 0 0; }

.nations-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--e-2);
}
.nation-carte {
  background: var(--papier-haut);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  padding: var(--e-3);
}
.nation-code { font-family: var(--data); font-size: var(--t-xs); color: var(--encre-faible); letter-spacing: .14em; }
.nation-nom { font-family: var(--display); font-size: var(--t-lg); margin: 0; }
.nation-note { font-size: var(--t-sm); color: var(--encre-doux); margin: var(--e-1) 0 0; }

/* --------------------------------------------------------------------------
   Articles
   -------------------------------------------------------------------------- */
.signature { padding: var(--e-6) 0; border-bottom: 1px solid var(--ligne); }

/* Quatre blocs en ligne sur grand écran, la mise en page habituelle des
   dossiers DH. On descend à deux colonnes en tablette et une en mobile
   plutôt que de laisser l'auto-fill décider : à 1 320 px il en calait cinq,
   et les vignettes devenaient trop étroites pour leur titre. */
.articles-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}
@media (max-width: 991.98px) { .articles-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .articles-grille { grid-template-columns: 1fr; } }
.article-carte {
  display: flex; flex-direction: column;
  background: var(--papier-haut);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--transition), border-color var(--transition);
}
.article-carte:hover { transform: translateY(-3px); border-color: var(--ligne-forte); color: inherit; }
.article-image { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--verre); }
.article-corps { padding: var(--e-2) var(--e-3) var(--e-3); }
.article-titre { font-family: var(--display); font-size: var(--t-lg); line-height: 1.1; margin: 0 0 var(--e-1); }
.article-date { font-family: var(--data); font-size: var(--t-xs); color: var(--encre-faible); }

.articles-pied { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* --------------------------------------------------------------------------
   Le quiz

   Plus de zone Piano ni de vitrine : le quiz est ouvert à tout le monde.
   Si le paywall devait revenir un jour, penser à remettre .piano-zone en
   position absolue hors du flux, c'est ce qui empêchait le formulaire de
   connexion de faire sauter la page au rechargement.
   -------------------------------------------------------------------------- */
.is-hidden { display: none !important; }

.quiz { max-width: 46rem; }
.quiz-question {
  background: var(--papier-haut);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-carte);
  padding: var(--e-3);
  margin-bottom: var(--e-2);
}
.quiz-intitule { font-family: var(--display); font-size: var(--t-lg); margin: 0 0 var(--e-2); }
.quiz-reponses { display: grid; gap: var(--e-1); }
.quiz-reponse {
  text-align: left;
  background: var(--verre); color: var(--encre);
  border: 1px solid var(--verre-bord); border-radius: var(--rayon);
  padding: .7em 1em; cursor: pointer; font: inherit; font-size: var(--t-md);
  transition: background var(--transition), border-color var(--transition);
}
.quiz-reponse:hover:not(:disabled) { background: var(--verre-fort); }
.quiz-reponse.est-juste { background: rgba(50, 255, 154, .16); border-color: var(--vert-signal); }
.quiz-reponse.est-faux  { background: rgba(218, 39, 59, .18); border-color: var(--gazon-vif); }
.quiz-explication { font-size: var(--t-sm); color: var(--encre-doux); margin: var(--e-2) 0 0; }
.quiz-score {
  font-family: var(--display); font-size: var(--t-xl);
  padding: var(--e-3); border-top: 1px solid var(--ligne);
}

/* --------------------------------------------------------------------------
   Comprendre, repères, sources
   -------------------------------------------------------------------------- */
.faq { max-width: 74ch; }
.faq-bloc { border-top: 1px solid var(--ligne); padding: var(--e-3) 0; }
.faq-q { font-family: var(--display); font-size: var(--t-xl); margin: 0 0 var(--e-1); }
.faq-r { color: var(--encre-doux); margin: 0; }

.reperes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.reperes li {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--e-3);
  padding: var(--e-2) 0; border-top: 1px solid var(--ligne);
  align-items: baseline;
}
.repere-annee { font-family: var(--display); font-size: var(--t-2xl); color: var(--gazon-vif); }
.repere-fait { color: var(--encre-doux); margin: 0; }

.sources-liste { list-style: none; margin: 0; padding: 0; max-width: 74ch; }
.sources-liste li { padding: var(--e-2) 0; border-top: 1px solid var(--ligne); font-size: var(--t-sm); }
.sources-liste .date { color: var(--encre-faible); font-family: var(--data); font-size: var(--t-xs); display: block; }

/* --------------------------------------------------------------------------
   Bandeau de mention, quand une donnée n'est pas officielle
   -------------------------------------------------------------------------- */
.avertissement {
  display: flex; gap: var(--e-2); align-items: flex-start;
  background: rgba(255, 201, 77, .10);
  border: 1px solid rgba(255, 201, 77, .38);
  border-radius: var(--rayon);
  padding: var(--e-2) var(--e-3);
  margin: 0 0 var(--e-3);
  font-size: var(--t-sm);
  color: var(--encre-doux);
}
.avertissement b { color: var(--or); font-weight: 600; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied { background: #15181e; padding: var(--e-5) 0 var(--e-6); }

.pied-colophon {
  display: grid; grid-template-columns: 8rem minmax(0,1fr) auto;
  gap: var(--e-3); align-items: start;
  padding-bottom: var(--e-3); margin-bottom: var(--e-3);
  border-bottom: 1px solid var(--ligne);
}
.pied-oeil { margin: 0; }
.pied-credit { margin: 0 0 var(--e-1); }
.pied-ia { margin: 0; font-size: var(--t-sm); color: var(--encre-faible); }
.pied-arret { margin: 0; font-family: var(--data); font-size: var(--t-xs); color: var(--encre-faible); }

.pied-legal { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: var(--e-4); }
.pied-legal-titre {
  font-size: var(--t-sm); letter-spacing: .14em; color: var(--encre-faible);
  margin: 0 0 var(--e-2);
}
.pied-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); }
.pied-liens a { color: var(--encre-doux); font-size: var(--t-sm); text-decoration: none; }
.pied-liens a:hover { color: var(--encre); text-decoration: underline; }

@media (max-width: 767.98px) {
  .pied-colophon, .pied-legal { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Barre d'accès rapide, mobile

   Même matière que le bandeau, flottante et détachée du bord bas pour
   qu'on voie la page défiler dessous. La marge basse respecte la zone
   sûre des iPhone récents.
   -------------------------------------------------------------------------- */
.tabbar { display: none; }

@media (max-width: 767.98px) {
  .tabbar {
    display: block;
    position: fixed; left: 0; right: 0; z-index: 80;
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 0 10px;
    pointer-events: none;
  }
  .tabbar-verre {
    pointer-events: auto;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px;
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 100%),
      rgba(27, 31, 38, .76);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.30),
      inset 0 -1px 0 rgba(0,0,0,.40),
      0 20px 40px -18px rgba(0,0,0,.9);
  }
  .tabbar a {
    position: relative;
    display: grid; justify-items: center; gap: 3px;
    padding: .55em .2em;
    text-decoration: none; color: var(--encre-faible);
    font-family: var(--display); font-size: 9.5px;
    letter-spacing: .05em; text-transform: uppercase;
    border-radius: 16px;
    transition: color var(--transition), background var(--transition);
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar a.est-actif {
    color: var(--encre);
    background: rgba(218, 39, 59, .26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  }
  .tabbar a.est-actif .ico { color: var(--lion-clair); }
  .tabbar .ico { width: 19px; height: 19px; }

  body { padding-bottom: 86px; }
}

/* Plus de compensation en haut : la barre étant collante, elle occupe sa
   propre place dans le flux. Un décalage codé en dur ici rouvrirait le
   problème qu'on vient de fermer. */

/* Filet de sécurité contre le débordement latéral. On utilise clip et non
   hidden : hidden créerait un conteneur de défilement et casserait le
   position sticky du bandeau. */
html { overflow-x: clip; }

/* --------------------------------------------------------------------------
   Les absents
   -------------------------------------------------------------------------- */
.absents {
  margin-top: var(--e-4);
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  border-radius: var(--rayon-carte);
  padding: var(--e-3);
}
.absents h3 { font-family: var(--display); font-size: var(--t-lg); margin: 0 0 var(--e-2); }
.absents ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.absents li {
  display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--e-2); align-items: baseline;
  padding: var(--e-1) 0; border-top: 1px solid var(--ligne);
  font-size: var(--t-sm); color: var(--encre-doux);
}
.absents b { color: var(--encre); font-family: var(--display); font-size: var(--t-md); letter-spacing: .02em; }
.absents .pays { font-family: var(--data); font-size: var(--t-xs); color: var(--encre-faible); }
@media (max-width: 575.98px) { .absents li { grid-template-columns: 1fr; gap: 2px; } }

/* --------------------------------------------------------------------------
   La répétition générale
   -------------------------------------------------------------------------- */
.repetition-carte { border-left: 3px solid var(--or); }
.repetition-note { font-size: var(--t-sm); color: var(--encre-doux); margin: 0 0 var(--e-2); }
.classement-table .col-equipe { color: var(--encre-faible); font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   Impression : le dossier doit rester lisible sur papier, la rédaction
   l'imprime en conférence.
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .bandeau, .tabbar, .bande-pub, .hero-fond, .cf-btn { display: none !important; }
  .section, .section-sombre { background: #fff !important; color: #000; padding: 1cm 0; }
  a { color: #000; }
}