@charset "utf-8";
/* =========================================================================
   home.css — couche de l'agent « home » (RESTRUCTURATION.md §6).
   Chargee APRES theme.css (gelee) et shell.css, sur l'accueil seulement.
   -------------------------------------------------------------------------
   L'identite ne change pas (« ouverture claire » : feuille claire, vert
   terrain, Archivo + IBM Plex Mono, photos Commons, jauge du registre). On
   change l'EXECUTION : une seule vue de hero, des sections qui n'existent que
   si leurs cibles existent, des chiffres lisibles a toutes les largeurs.
   Toutes les classes nouvelles sont prefixees `hm-` / `hp-` : aucune regle de
   cette feuille ne peut toucher une page interieure, meme si elle y etait
   chargee par erreur.

   Deux regles de microtypographie tiennent toute la feuille (REV1-04,
   PERFA11Y-15, VISUALMOBILE-22, contrat §3.5) :
    - PLANCHER de 12px pour tout texte mono, approche <= .08em ;
    - mono en CAPITALES reserve aux etiquettes de trois mots au plus. Une
      PHRASE (legende, repere, libelle de chiffre) passe en Archivo, casse
      normale. Les sources (« FIFA · as of 19 Jul 2026 ») restent en mono,
      en casse normale.
   ========================================================================= */

/* ---------- 0. Une seule gouttiere ------------------------------------------
   theme.css (gele) donne `margin-inline: var(--gut)` aux titres de section,
   aux grilles de cartes et aux listes, A L'INTERIEUR d'un .wrap qui porte deja
   `padding-inline: var(--gut)` : deux bords gauches sur la meme page (titres a
   x=100, panneaux et H1 a x=85 au bureau ; 30 contre 15 a 375 — REV1-03,
   VISUALMOBILE-18). Sur l'accueil, la seule gouttiere est celle du .wrap. */
.hm-players .sec-head,
.hm-sheet .sec-head,
.hm-records .sec-head,
.hm-road .sec-head { margin-inline: 0; }
.hm-news,
.hm-records .edition,
.hm-road .qlist,
.hm-road .qfoot,
.hm-road .gal-foot,
.hm-road .banner { margin-inline: 0; }

/* ---------- 1. Hero : une seule vue -------------------------------------- */

/* theme.css donnait 820px fixes au hero parce que trois vues absolues s'y
   superposaient. Il n'y a plus qu'une vue, en flux : sa hauteur est celle de
   son contenu, et rien ne peut plus deborder par le bas. */
.hm-hero { height: auto; min-height: 0; }

/* La grille du hero. Colonnes nommees : la tete et la plaque restent dans la
   largeur de lecture (--wrap), la bande photo et le rail vont bord a bord
   comme dans la maquette validee. Ordre du DOM : tete, bande, plaque — la
   grille remet la plaque a droite au bureau. */
.hm-hero-in {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gut), 1fr)
    [lede-start] minmax(0, calc(var(--wrap) - 2 * var(--gut) - var(--oc-aside) - var(--oc-gap)))
    [lede-end] var(--oc-gap)
    [figs-start] var(--oc-aside)
    [figs-end] minmax(var(--gut), 1fr) [full-end];
  row-gap: 12px;
  padding-top: var(--oc-top);
}
.hm-lede { grid-column: lede-start / lede-end; grid-row: 1; align-self: center; padding-bottom: 12px; }
.hm-figures { grid-column: figs-start / figs-end; grid-row: 1; }
.hm-strip { grid-column: full-start / full-end; grid-row: 2; }
.hm-hero-in--nofigs .hm-lede { grid-column: lede-start / figs-end; }

/* Sur-titre court (trois mots) : l'approche de .18em tombe a .08em. */
.hm-hero .eyebrow { letter-spacing: .08em; }
.hm-hero .hm-dek { font-size: 18px; line-height: 28px; max-width: 46ch; margin: 0 0 18px; }
.hm-hero .hero-acts { margin: 0; row-gap: 12px; }

/* La plaque verte : trois faits du registre. Le libelle est une PHRASE
   (« Most goals in one tournament: Just Fontaine, 13 goals in 1958 ») : il
   passe en Archivo, casse normale. La source reste en mono, 12px. */
.hm-figures .chit .lab {
  font-family: var(--display); font-size: 15px; line-height: 21px;
  letter-spacing: 0; text-transform: none; color: var(--oc-on-green-3);
}
/* Pas de mot orphelin (« …13 goals in / 1958 » a 1280, capture). */
.hm-figures .chit .lab, .hm-strip .oc-frame figcaption, .hm-band .hm-band-note,
.hm-info-text, .hm-rec-text { text-wrap: pretty; }
.hm-figures .chit .src {
  font-size: 13px; letter-spacing: .04em; text-transform: none; line-height: 17px;
  color: var(--oc-on-green-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  justify-self: start;
}
.hm-figures .chit .src:hover, .hm-figures .chit .src:focus-visible { color: #fff; }
.hm-figures :focus-visible { outline-color: var(--oc-on-green); }

/* La bande photo. Legendes EXACTES, donc parfois longues : elles passent a la
   ligne au lieu de finir en points de suspension (« Moroccan league title
   presentation · May… » a 1280, mesure). Archivo 14px, casse normale (contrat
   §3.5) ; la figure devient une colonne pour que les bandes vertes des quatre
   legendes gardent la meme hauteur quelle que soit la longueur du texte. */
.hm-strip .oc-frame { display: flex; flex-direction: column; }
.hm-strip .oc-frame figcaption {
  flex: 1 0 auto;
  height: auto; min-height: var(--oc-cap);
  padding: 6px 12px 7px;
  font-family: var(--display); font-size: 14px; line-height: 18px;
  letter-spacing: 0; text-transform: none;
  white-space: normal; overflow: visible; text-overflow: clip;
}

/* Le rail est dans le flux, sous la bande : plus de position absolue a caler
   sur une hauteur fixe. */
.hm-hero .rail { position: relative; inset: auto; }
.hm-hero .rail .rail-year { font-size: 13px; letter-spacing: .04em; }

/* Cran sans lien (rail decoratif, ou edition non publiee dans le rail de
   navigation) : un <span> reprend la boite du lien qu'il remplace, pour que
   le trait reste cale sur le bas du rail. */
.hm-hero .rail .rail-mark {
  display: flex; width: 100%; height: 100%; position: relative;
  align-items: flex-end; justify-content: center;
}

/* ---------- 2. Bande 1930 / 100 / 2030 ------------------------------------ */

/* Etiquettes courtes : codes pays, lieux (trois mots), « Years ». */
.hm-band .flag { font-size: 13px; letter-spacing: .08em; }
.hm-band .band-side .place { letter-spacing: .08em; }
.hm-band .band-100 > span { letter-spacing: .08em; }

/* Les sources de la bande : mono 12px, casse normale. */
.hm-band-src { margin-top: -2px; }
.hm-band-src .src, .hm-band .band-info .src {
  font-size: 13px; letter-spacing: .04em; text-transform: none;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.hm-band-src .src:hover, .hm-band-src .src:focus-visible,
.hm-band .band-info .src:hover, .hm-band .band-info .src:focus-visible { color: var(--stamp); }

/* La phrase du centenaire est une PHRASE : Archivo, casse normale. */
.hm-band .hm-band-note {
  display: block; max-width: 36ch;
  font-family: var(--display); font-size: 15px; line-height: 22px;
  letter-spacing: 0; text-transform: none; text-align: right; color: var(--ink);
}

/* Les deux reperes : icone | enonce, la source dessous. Enonce en Archivo
   (ce sont des phrases), source en mono. */
.hm-band .band-info .item {
  display: grid;
  grid-template-columns: 15px minmax(0, auto);
  column-gap: 10px; row-gap: 3px;
  align-items: baseline;
  font-family: var(--display); font-size: 15px; line-height: 22px;
  letter-spacing: 0; text-transform: none; color: var(--ink);
  text-align: left;
}
.hm-band .band-info .item svg { grid-column: 1; grid-row: 1; align-self: center; }
.hm-info-text { grid-column: 2; grid-row: 1; }
.hm-info-src { grid-column: 2; grid-row: 2; line-height: 17px; }

/* ---------- 3. Players : cartes et piste native --------------------------- */

.hm-players { min-height: 0; }

/* Piste NATIVE : defilement horizontal + scroll-snap, sans fleches ni script.
   Le focus clavier fait defiler la piste de lui-meme — plus de carte hors
   cadre focalisable en silence (HOME-20). Le padding de 6px garde une marge
   dans une boite qui coupe ce qui deborde ; la marge negative de meme valeur
   remet le bord des cartes sur la gouttiere unique (REV1-03).

   L'INDICE DE DEFILEMENT EST CALCULE, pas laisse au hasard (R2-02). Avec des
   colonnes fixes de 136px, le bord de la piste tombait pile entre deux
   cartes a certaines largeurs : a 768px, cinq cartes entieres, Romario et
   Platini caches sans aucun signe — et la barre de defilement est invisible
   sur tablette tactile. Le balayage de 320 a 1280px (pas de 8px) trouvait le
   meme defaut a 320-344, 440-496, 592-640, 744-792, 888-944 et 1040-1064px.
   Desormais, QUAND la piste deborde, on voit exactement K cartes entieres et
   une fraction F de la suivante : largeur minimale = (100% - K x gap) / (K + F).
   Quand toutes les cartes tiennent, `1fr` les etire et rien ne defile (sept
   fiches au bureau : 7 x 146,6 + 6 x 14 = les 1 110px utiles). K et F
   changent par paliers de largeur (section 8) ; la formule vaut quel que soit
   le nombre de fiches publiees. */
.hp-track {
  --hp-gap: 14px;
  --hp-k: 7;
  --hp-f: .5;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(calc((100% - var(--hp-k) * var(--hp-gap)) / (var(--hp-k) + var(--hp-f))), 1fr);
  gap: var(--hp-gap);
  margin: 0 -6px;
  padding: 6px 6px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--stamp) transparent;
}
.hp-item { display: flex; min-width: 0; scroll-snap-align: start; }

.hp-card {
  position: relative;
  display: flex; flex-direction: column; width: 100%;
  background: var(--sheet); color: var(--ink);
}
/* Anneau de focus DOUBLE, dessine DANS la carte (R2-04, PERFA11Y-17) : un
   trait creme puis un trait encre. Le contour vert de 3px decale a
   l'exterieur se perdait sur la tete verte des cartes et sur la foule rouge et
   verte de la planche (capture de la recette, carte Romario a 375px). Creme
   et encre ne peuvent pas disparaitre ensemble, quel que soit le fond : sur
   la plaque verte, les deux se voient ; sur le corps creme, l'encre. Le
   contour reste declare, transparent : en couleurs forcees (Windows), le
   navigateur le repeint et l'anneau ne disparait jamais. */
.hp-card:focus-visible { outline: 3px solid transparent; outline-offset: -3px; }
.hp-card:focus-visible::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border: 3px solid var(--sheet);
  box-shadow: inset 0 0 0 3px var(--ink);
  pointer-events: none;
}

/* Le cadre carre : portrait curate OU plaque typographique verte. */
.hp-fig { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--panel); }
.hp-fig img { width: 100%; height: 100%; object-fit: cover; background: var(--panel); }

/* Le chiffre des buts vit toujours dans le cadre, sur le vert du registre.
   Sur le vert, les soulignements de statut repassent en clair (meme
   reaffectation que la plaque du hero). */
.hp-goals {
  display: flex; align-items: baseline; gap: 6px;
  color: var(--oc-on-green);
  font-variant-numeric: tabular-nums;
}
.hp-goals .val {
  font-stretch: 110%; font-weight: 800; line-height: .9; color: var(--oc-on-green);
  padding-bottom: 3px;
}
.hp-goals .val[data-state="ratified"],
.hp-goals .val[data-state="announced"],
.hp-goals .val[data-state="announced_by_confederation"] { box-shadow: inset 0 -2px 0 0 var(--oc-mark); }
.hp-goals .val[data-state="derived"],
.hp-goals .val[data-state="reported"],
.hp-goals .val[data-state="projected"] {
  box-shadow: none;
  background-image: linear-gradient(90deg, var(--oc-mark-2) 0 4px, transparent 4px 8px);
}
.hp-goals .val[data-state="unknown"], .hp-goals .val[data-state="disputed"] { color: var(--oc-on-green-4); box-shadow: none; }
.hp-unit {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--oc-on-green-2);
}

/* Portrait : une pastille verte en bas a gauche. */
.hp-fig--photo .hp-goals {
  position: absolute; left: 0; bottom: 0;
  padding: 7px 10px 6px;
  background: var(--stamp);
}
.hp-fig--photo .hp-goals .val { font-size: 30px; }

/* Plaque typographique : le vert plein, le chiffre monumental. PAS de barres
   devant « World Cup » : sur ce site, des barres a cote d'un chiffre SONT la
   jauge du registre, et deux barres y veulent dire « derived / reported » —
   un fait ratifie aurait eu l'air d'un chiffre de second rang (EXACT-04). Le
   statut du chiffre est porte par son soulignement, comme partout. */
.hp-fig--type {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 13px 14px 14px;
  background: var(--stamp);
}
.hp-kicker {
  font-family: var(--mono); font-size: 13px; line-height: 15px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--oc-on-green-2);
}
.hp-fig--type .hp-goals { flex-direction: column; align-items: flex-start; gap: 6px; }
.hp-fig--type .hp-goals .val { font-size: 76px; }
.hp-goals--none { font-size: 40px; color: var(--oc-on-green-4); }

/* Le corps, identique pour toutes les cartes : les noms s'alignent. */
.hp-body { display: block; flex: 1 1 auto; padding: 12px 13px 14px; }
.hp-name {
  font-stretch: 75%; font-weight: 700; font-size: 18px; line-height: 1.12;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 6px;
}
.hp-card .meta { display: block; font-size: 13px; letter-spacing: .06em; line-height: 17px; }
.hp-card .hp-matches { color: var(--slate); }
a.hp-card:hover .hp-name, a.hp-card:focus-visible .hp-name { color: var(--stamp); }

/* La ligne de sources de la piste (EXACT2-03) : une plaque creme, comme la
   tete de section — sur la planche, seules les plaques portent du texte. Meme
   dessin que la ligne de source du tableau all-time (Archivo 13px, liens
   verts soulignes). */
.hm-track-src {
  margin: 4px 0 0; padding: 10px 18px 11px;
  background: var(--sheet);
}
.hm-track-src .hm-srcline { display: block; text-wrap: pretty; }
.hm-track-src .hm-src-link:hover, .hm-track-src .hm-src-link:focus-visible { color: var(--ink); }

/* La planche photo est un <img> paresseux, plus un fond en ligne. */
.hm-par-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 4. Tableau all-time -------------------------------------------
   Un filet horizontal par ligne, pas de jauge ni de soulignement par cellule,
   colonnes numeriques espacees (« 2134 » ne se lit plus « 21 34 »,
   X-HOME-01, VISUALMOBILE-21), plus de liseré « top ». En-tetes et rangs en
   mono 12px (plancher). */

.hm-sheet .cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.hm-panel { padding: 22px 22px 20px; }
.hm-tbl th, .hm-tbl td { padding: 9px 0 9px 14px; vertical-align: baseline; }
.hm-tbl :is(th, td):first-child { padding-left: 0; }
.hm-tbl thead th {
  padding-top: 0; padding-bottom: 10px;
  font-size: 13px; letter-spacing: .06em; line-height: 15px;
  vertical-align: bottom;
}
.hm-tbl thead th:nth-child(2) { text-align: left; }
.hm-tbl td.hm-rank, .hm-tbl th.hm-rank {
  width: 2.6em; text-align: left;
  font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: .02em;
  text-transform: none; color: var(--muted);
}
/* Le nom du joueur est l'en-tete de sa ligne (PERFA11Y-23) : il reprend le
   dessin que theme.css donnait a la premiere cellule. */
.hm-tbl tbody th {
  text-align: left;
  font-family: var(--display); font-stretch: 87%; font-weight: 700; font-size: 14px;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid rgba(217, 221, 212, .75);
}
/* Un lien se distingue d'un nom sans page par autre chose que la couleur. */
.hm-tbl tbody th a {
  color: var(--ink); display: inline;
  box-shadow: inset 0 -1px 0 0 var(--stamp);
}
.hm-tbl tbody th a:hover, .hm-tbl tbody th a:focus-visible { color: var(--stamp); }
.hm-tbl tbody td { white-space: nowrap; }
/* Double filet evite : le pied du panneau porte deja le sien. */
.hm-tbl tbody tr:last-child > * { border-bottom: 0; }

.hm-short { display: none; text-decoration: none; cursor: help; }

.hm-panel-foot { align-items: baseline; row-gap: 8px; }
.hm-srcline { font-size: 13px; line-height: 20px; color: var(--slate); }
.hm-src-link { color: var(--stamp); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* « Per match = goals ÷ matches » se lit d'un bloc : a 375, « = goals »
   ouvrait la ligne suivante. */
.hm-nw { white-space: nowrap; }

/* ---------- 5. Latest files ----------------------------------------------- */

/* Le cadre : [portrait carre | plaque verte] ou plaque seule. 360/750 = 48 % :
   la colonne du portrait est exactement carree dans un cadre 750x360. */
.hm-file-fig {
  display: grid; grid-template-columns: minmax(0, 1fr);
  aspect-ratio: 750 / 360; overflow: hidden; background: var(--stamp);
}
.hm-file--photo .hm-file-fig { grid-template-columns: 48% minmax(0, 1fr); }
.hm-file-fig { grid-template-rows: minmax(0, 1fr); }
/* L'image est HORS FLUX : en flux, son `height: 100%` se resolvait contre une
   rangee de grille auto et la faisait monter a 1 500px (mesure), le cadre
   coupant ensuite le visage et le nom de la plaque. */
.hm-file-photo { position: relative; display: block; min-width: 0; background: var(--panel); }
/* `.ncard img` (theme.css) impose un ratio 750/360 : annule, la case est carree. */
.hm-file-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 30%;
}
/* La plaque au nom court. Sans les barres du geste signature (EXACT-04) :
   posees en tete d'une plaque verte, elles se lisaient comme la jauge d'un
   fait « derived », alors qu'il n'y a la aucun chiffre. */
.hm-file-plate {
  position: relative; display: flex; align-items: flex-end;
  min-width: 0; padding: 16px 16px 15px;
  /* Le nom se regle sur la largeur de SA plaque (unites cqi) : jamais coupe au
     milieu d'un mot (« FONTAIN / E », vu sur capture a 1280). */
  container-type: inline-size;
}
.hm-file-name {
  font-stretch: 62%; font-weight: 800; font-size: clamp(18px, 24cqi, 44px); line-height: .92;
  letter-spacing: .01em; text-transform: uppercase; color: var(--oc-on-green);
}
.hm-file .hm-file-kicker { margin: 14px 0 0; font-size: 13px; letter-spacing: .08em; }
/* Le titre est un titre SEO de 60 a 70 caracteres : en capitales (heritage de
   `.ncard h3`, theme.css), il faisait 3 a 4 lignes de « JUST FONTAINE'S
   WORLD CUP RECORD: 13 GOALS… » (R2-03). Les capitales sont reservees aux
   etiquettes courtes (contrat §3.5) : ici la rubrique et la plaque au nom
   court. Titre en casse d'origine, dessin des cartes de la recherche
   (Archivo 87 %, 700, approche nulle). */
.hm-file h3 {
  margin-top: 6px;
  font-stretch: 87%; font-size: 20px; line-height: 25px;
  letter-spacing: 0; text-transform: none;
}
.hm-file p:not(.meta) { margin-bottom: 0; }
/* Focus : le lien du titre couvre toute la carte (`.ncard h3 a::after`) ; son
   anneau encadre toute la carte, meme double trait creme + encre que les
   cartes joueurs (R2-04), au lieu d'un contour autour du seul titre. Dessine
   9px HORS de la carte, pas dedans : la colonne de texte n'a pas de marge
   laterale, et l'anneau interieur mangeait la premiere lettre de chaque
   ligne (« LAYERS », capture de controle a 1280). La feuille est unie et
   rien ne coupe ce qui deborde (grille a 30px de gouttiere, 26px empilee). */
.hm-file h3 a:focus-visible { outline-color: transparent; }
.hm-file h3 a:focus-visible::after {
  inset: -9px;
  border: 3px solid var(--sheet);
  box-shadow: inset 0 0 0 3px var(--ink);
}

/* ---------- 6. Three scoring records -------------------------------------- */

.hm-records { min-height: 0; }
.hm-rec-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin: 0;
}
.hm-rec {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px 20px;
  background: var(--sheet);
  box-shadow: inset 0 3px 0 0 var(--stamp);
}
/* Le titre de plaque garde le libelle du tableau « Record / Holder / Mark »
   de /records/world-cup-top-scorers-all-time/ (« Most goals, single
   tournament », quatre mots) : il passe donc en Archivo, casse normale,
   plutot que d'etre raccourci. */
.hm-rec .hm-rec-kicker {
  margin: 0;
  font-family: var(--display); font-size: 15px; font-weight: 600; line-height: 20px;
  letter-spacing: 0; text-transform: none; color: var(--slate);
}
.hm-rec-fig { display: flex; align-items: center; gap: 12px; margin: 0; }
.hm-rec-num {
  font-stretch: 110%; font-weight: 800; font-size: 64px; line-height: .9;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.hm-rec-num .val { padding-bottom: 4px; }
.hm-rec-text {
  margin: 0; font-stretch: 87%; font-weight: 700; font-size: 19px; line-height: 1.25;
  color: var(--ink);
}
.hm-rec-src { margin: auto 0 0; padding-top: 4px; }
.hm-rec .src {
  font-size: 13px; letter-spacing: .04em; text-transform: none;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
/* Une source ne se coupe qu'APRES « · » : « as of 19 Sep 2026 » est lie par
   des espaces insecables au rendu (wc2030_home_src). « WIKIPEDIA · 19 / SEP
   2026 » coupait la date en deux a 768px ; en `nowrap`, « Wikipedia · as of
   19 Sep 2026 » sortait de sa carte de 192px utiles (capture). */
.hm-rec .src:hover, .hm-rec .src:focus-visible { color: var(--stamp); }

/* ---------- 7. Sections masquees (code conserve) -------------------------- */

.hm-stad { margin: 0; width: 100%; }
.hm-stad img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--panel); }
.hm-stad figcaption { margin-top: 8px; font-family: var(--display); font-size: 14px; line-height: 20px; color: var(--slate); }
.hm-stad-track { grid-auto-columns: minmax(200px, 1fr); }
.hm-road .qrow { font-size: 13px; }

/* ---------- 8. Adaptatif --------------------------------------------------- */

@media (max-width: 1100px) {
  .hm-sheet .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  /* Une colonne, dans l'ordre du DOM : tete, deux photos, plaque. La premiere
     page-ecran montre enfin des photographies (VISUALMOBILE-20, HOME-22). */
  .hm-hero-in {
    grid-template-columns: [full-start] var(--gut) [lede-start figs-start] minmax(0, 1fr) [lede-end figs-end] var(--gut) [full-end];
    row-gap: 22px;
  }
  .hm-lede, .hm-hero-in--nofigs .hm-lede { grid-column: lede-start / lede-end; grid-row: 1; padding-bottom: 0; }
  .hm-strip { grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-figures { grid-column: figs-start / figs-end; grid-row: 3; margin-bottom: 30px; }
  /* theme.css met les trois chiffres en trois colonnes a cette largeur, mais
     garde le filet HAUT qui les separait en pile : il traversait la plaque. */
  .hm-figures .chit + .chit { border-top: 0; border-left: 1px solid rgba(250, 251, 248, .22); padding-left: 14px; }
  /* theme.css passe la bande en 2 x 2 sous 900px ; on garde une rangee de
     quatre sur tablette, deux cadres seulement sur telephone (voir 640px). */
  .hm-strip .oc-frame:nth-child(n + 3) { border-top: 0; }
  .hm-strip .oc-frame + .oc-frame { border-left: 1px solid var(--sheet); }
  .hm-strip .oc-frame figcaption { padding: 6px 10px 7px; }

  /* Bande : 1930 et 2030 cote a cote, le siecle dessous (VISUALMOBILE-32). */
  .hm-band .band-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "past next" "century century"; gap: 26px 30px; }
  .hm-band .band-side { grid-area: past; }
  .hm-band .band-side.right { grid-area: next; }
  .hm-band .band-100 { grid-area: century; }

  /* Tableau et fichiers empiles ; les fichiers restent sur deux colonnes
     jusqu'a 640px (VISUALMOBILE-33). */
  .hm-sheet .cols { grid-template-columns: 1fr; }
  .hm-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hm-hero .hm-dek { font-size: 17px; line-height: 26px; }
  .hm-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-strip .hm-desk-only { display: none; }
  .hm-strip .oc-frame figcaption { font-size: 13px; line-height: 17px; }

  /* Rail decoratif : le siecle entier sur la largeur, sans defilement cache
     (theme.css le faisait defiler en ne montrant que 1930 et 1950, HOME-21).
     Millesimes a 12px : cinq crans (55px a 320) separent deux decennies,
     « 1930 » en occupe 31. */
  .rail--deco .rail-in { overflow: visible; }
  .rail--deco .rail-slot { flex: 1 1 0; min-width: 0; }
  .rail--deco .rail-slot[data-decade] .rail-year { display: block; font-size: 13px; }
  /* Rail de navigation (le jour ou il y en a un) : il defile, et le bord
     s'efface pour le dire. */
  .hm-hero nav.rail .rail-in {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }

  .hm-figures .chit + .chit { border-left: 0; padding-left: 0; border-top: 1px solid rgba(250, 251, 248, .22); }

  .hm-band .band-grid { grid-template-columns: 1fr; grid-template-areas: "past" "century" "next"; gap: 26px; }
  .hm-band .hm-band-note { text-align: center; margin-inline: auto; }
  /* Les reperes restent en grille (icone | texte, source dessous), alignes a
     gauche : une phrase centree sur trois lignes se lit mal. */
  .hm-band .band-info { align-items: stretch; }

  .hm-panel { padding: 18px 14px 16px; }
  .hm-tbl th, .hm-tbl td { padding-left: 10px; }
  .hm-tbl :is(th, td):first-child { padding-left: 0; }
  .hm-long { display: none; }
  .hm-short { display: inline; }

  /* Fichiers sur telephone : vignette carree a gauche, texte a droite — quatre
     bandeaux de 150px empiles faisaient 1 700px de defilement. */
  .hm-news { grid-template-columns: 1fr; gap: 26px; }
  .hm-file { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .hm-file-fig, .hm-file--photo .hm-file-fig { aspect-ratio: 1; grid-template-columns: minmax(0, 1fr); }
  .hm-file--photo .hm-file-plate { display: none; }
  .hm-file-plate { padding: 10px; }
  .hm-file-name, .hm-file--photo .hm-file-name { font-size: 20px; line-height: .95; }
  .hm-file .hm-file-kicker { margin-top: 0; }
  .hm-file h3 { font-size: 18px; line-height: 23px; margin-bottom: 6px; }
  .hm-file p:not(.meta) { font-size: 15px; line-height: 24px; margin-top: 0; }

  .hm-rec-list { grid-template-columns: 1fr; gap: 16px; }
  .hm-rec-num { font-size: 54px; }
}

/* Piste Players : K cartes entieres + une fraction F de la suivante quand la
   piste deborde (formule en section 3, R2-02). Paliers choisis pour garder
   des cartes de 112 a 204px de large (mesure du balayage) :
     >= 1024px : K = 7 — sept fiches tiennent (130 a 147px), rien ne defile ;
     900-1023  : 5,5 cartes visibles (146-168px) ;
     768-899   : 4,5 (152-181px) ;
     520-767   : 3,5 (128-199px) ;
     <= 519    : 2,3 (114-200px) — la troisieme carte depasse d'un tiers. */
@media (max-width: 1023px) { .hp-track { --hp-k: 5; } }
@media (max-width: 899px)  { .hp-track { --hp-k: 4; } }
@media (max-width: 767px)  { .hp-track { --hp-k: 3; } }
@media (max-width: 519px)  { .hp-track { --hp-k: 2; --hp-f: .3; } }

@media (prefers-reduced-motion: reduce) {
  .hp-track { scroll-behavior: auto; }
}

/* ---------- Corrections de la recette finale (23/09/2026) -----------------
   R3-02 — A 768, « Most goals, single tournament » passait sur deux lignes et
   descendait son chiffre de 20 px par rapport aux deux autres plaques. En trois
   colonnes, le libelle reserve deux lignes : chiffres et sources s'alignent. */
@media (min-width: 641px) {
  .hm-rec .hm-rec-kicker { min-height: 40px; }
}