/* Tribune 2030 — feuille de style du hub.
   DA « Grand Journal » (fusion Claude x Kimi, validée le 30/08/2026) portée de la
   préviz `previz-da/FUSION-grand-journal.html` vers le site réel.

   Arbitrages de la DA, non négociables : Playfair Display en display, Nunito en
   texte, palette du kit Koorami avec le marine en encre, zéro cadratin, pas de
   rouge sous 18px (il ne sert qu'aux marqueurs et aux gros caractères), pas
   d'ombre dure, pas de fond sombre, pas de compte à rebours.

   Polices auto-hébergées : aucune requête vers Google Fonts, qui transmettrait
   l'adresse IP de chaque lecteur à un tiers. */

@font-face {
  font-family: 'Nunito';
  src: url('/assets/fonts/nunito-variable.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* Le display du journal : une grotesque CONDENSEE et massive, pas une serif.
   Choix du 15/09/2026, en remplacement de Playfair Display, dont le fichier
   n'avait jamais ete depose : la page tournait donc en Georgia depuis la mise
   en ligne, ce qui datait le site de vingt ans. Une condensee lourde, c'est la
   langue de la presse sportive (une de quotidien, tableau de scores), et elle
   encaisse des titres de huit mots sans casser la colonne.
   Deux sous-ensembles, comme les sert Google : latin + latin-ext, ce dernier
   portant les accents espagnols et portugais (Estadio Gran Canaria, Dragao). */
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('/assets/fonts/big-shoulders-display-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('/assets/fonts/big-shoulders-display-latin-ext.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Une variable CSS ordinaire est remplacée TELLE QUELLE, comme du texte : écrire
   `--barre: calc(100vw - 100%)` puis `width: calc(100vw - var(--barre))` donne
   `calc(100vw - calc(100vw - 100%))`, c'est-à-dire `100%`, et le plein-cadre ne
   sort jamais du gabarit (vu en préviz le 15/09/2026). Déclarée via @property
   avec un type, la valeur est CALCULÉE là où elle est posée — sur <body>, où
   `100%` vaut bien la largeur de page sans la barre de défilement. */
@property --barre {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

:root {
  --creme: #fefaee;
  --blanc: #ffffff;
  --marine: #22334a;
  --rouge: #c0392b;
  --ardoise: #5a6b7f;
  --papier-doux: #f6efdd;
  --filet: #22334a;
  --filet-clair: #cfc6ae;

  /* Pile de repli sur des condensees systeme : si le woff2 tombe, on ne
     retombe pas sur une romaine large qui casserait toutes les mesures. */
  --display: 'Big Shoulders Display', 'Haettenschweiler', 'Arial Narrow', sans-serif-condensed, system-ui, sans-serif;
  --sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gabarit: 1100px;
  --gouttiere: 24px;

  /* ===== Relief =========================================================
     « Du relief » (demande de Remi, 15/09/2026) se traduit ici en TRANCHE,
     pas en ombre floue : un aplat decale de quelques pixels sous la surface,
     comme un bloc de plomb sur une forme d'imprimerie. Zero flou, zero
     glassmorphisme, et ca s'enfonce au clic. */
  --tranche: 4px;
  --tranche-forte: 6px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* `clip` et non `hidden` : hidden ferait de <html> un conteneur de
     defilement et tuerait le collant du bandeau de rubriques. */
  overflow-x: clip;
}

body {
  /* Largeur de la barre de défilement : `100vw` la compte, `100%` non. Sans
     cette mesure, tout bloc plein-cadre part 7 px trop à gauche et la photo
     d'ouverture est visiblement décentrée. */
  --barre: calc(100vw - 100%);
  background: var(--creme);
  color: var(--marine);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

/* Un lecteur au clavier doit toujours voir où il est. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 2px;
}

.gabarit { max-width: var(--gabarit); margin: 0 auto; padding: 0 24px; }

/* Accès direct au contenu, avant la navigation : lecteurs d'écran et clavier. */
.saut-contenu {
  position: absolute;
  left: -9999px;
  background: var(--marine);
  color: var(--creme);
  padding: 12px 18px;
  font-weight: 800;
  z-index: 50;
}
.saut-contenu:focus { left: 12px; top: 12px; }

/* ===== Bandeau d'édition ================================================= */
.bandeau-edition { border-bottom: 1px solid var(--filet); background: var(--blanc); }
.bandeau-edition .interieur {
  max-width: var(--gabarit);
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ardoise);
}
.bandeau-edition .secondaire { text-align: center; flex: 1; }

/* ===== Masthead et rubriques ============================================= */
.masthead { text-align: center; padding: 26px 0 0; }
.masthead .surmast {
  font-size: .78rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ardoise);
}
.masthead .titre-journal {
  display: inline-block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.4rem, 11vw, 7.6rem);
  letter-spacing: -.012em;
  line-height: .86;
  margin-top: 2px;
  text-decoration: none;
}
.masthead .titre-journal .point { color: var(--rouge); }

.filet-double {
  border-top: 3px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  height: 7px;
  margin: 18px 0 0;
}

.bandeau-rubriques {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding: 12px 0;
  border-bottom: 1px solid var(--filet);
}
.bandeau-rubriques a {
  font-weight: 800;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  text-decoration: none;
  padding-bottom: 9px;
  border-bottom: 3px solid transparent;
}
.bandeau-rubriques a:hover { border-bottom-color: var(--filet-clair); }
.bandeau-rubriques a.actif { border-bottom-color: var(--rouge); }

/* ===== Titres de section ================================================= */
.section-titre { display: flex; align-items: center; gap: 16px; margin: 46px 0 20px; }
.section-titre h2 { font-family: var(--display); font-weight: 800; font-size: 2.15rem; letter-spacing: -.01em; }
.section-titre::after { content: ""; flex: 1; border-top: 3px double var(--filet); }

/* ===== La une ============================================================ */
.la-une { display: grid; grid-template-columns: 1.9fr 1fr; margin-top: 30px; }
.une-principale { padding-right: 32px; border-right: 1px solid var(--filet); }
.une-principale > a { text-decoration: none; display: block; }
.surtitre {
  display: inline-block;
  background: var(--rouge);
  color: #fff;
  font-weight: 800;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 3px 10px;
  border-radius: 3px;
}
.une-principale h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.7rem, 6.4vw, 4.9rem);
  line-height: .92;
  letter-spacing: -.015em;
  margin: 16px 0 14px;
}
.une-principale a:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; }
.une-principale .chapo { font-size: 1.08rem; color: var(--ardoise); max-width: 58ch; }

.chiffre-une { display: flex; align-items: baseline; gap: 14px; margin: 20px 0 6px; flex-wrap: wrap; }
.chiffre-une .gros { font-family: var(--display); font-weight: 900; font-size: 5.6rem; line-height: .82; letter-spacing: -.02em; }
.chiffre-une .legende { font-weight: 700; color: var(--ardoise); max-width: 22ch; }

/* La signature de vérification : elle EST le concept du journal, pas un ornement. */
.verif {
  display: inline-flex;
  /* La signature passe sur deux lignes en écran étroit : la pastille reste
     accrochée à la première ligne au lieu de flotter au milieu du bloc. */
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: .8rem;
  font-weight: 700;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 5px 10px;
}
.verif .pastille {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rouge);
  flex: none; margin-top: .45em;
}

.colonne-droite { padding-left: 32px; display: flex; flex-direction: column; gap: 18px; }
.citation {
  background: var(--papier-doux);
  border: 1px solid var(--filet);
  padding: 34px 26px;
  text-align: center;
}
/* Pas d'italique : la condensee n'en a pas, et un oblique synthetique la
   deforme. L'accent vient de l'echelle et de la casse, pas de la pente. */
.citation p {
  font-family: var(--display); font-weight: 800;
  font-size: 1.75rem; line-height: 1.08; letter-spacing: -.005em;
}
.citation footer {
  margin-top: 14px; font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise);
}

.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.bouton {
  display: inline-block;
  font-weight: 800;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 4px;
  border: 2px solid var(--marine);
  cursor: pointer;
  font-family: var(--sans);
  transition: background-color .18s ease, color .18s ease;
}
.bouton-plein { background: var(--marine); color: var(--creme); }
.bouton-plein:hover { background: #1a2839; }
.bouton-contour { color: var(--marine); background: transparent; }
.bouton-contour:hover { background: var(--papier-doux); }

/* ===== Grille du journal ================================================= */
.entete-journal {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 46px 0 0; border-bottom: 2px solid var(--filet); padding-bottom: 8px; gap: 16px;
}
.entete-journal h2 { font-family: var(--display); font-size: 1.6rem; font-weight: 900; }
.entete-journal a, .entete-journal span {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ardoise);
}

.grille-journal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 2px; }

/* Colonne flex : les chapôs n'ont pas la même longueur (et ne sont jamais
   tronqués), mais les pieds d'article restent alignés sur une même ligne. */
.article-nu {
  border-top: 2px solid var(--filet);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
}
.article-nu > a { text-decoration: none; display: block; }
.article-nu .numero { font-family: var(--display); font-weight: 900; font-size: 1.7rem; color: var(--rouge); }
.article-nu .kicker {
  display: block; font-size: .7rem; font-weight: 900; letter-spacing: .13em;
  text-transform: uppercase; margin: 6px 0;
}
.article-nu .kicker::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  background: var(--rouge); margin-right: 7px;
}
.article-nu h3 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; margin-bottom: 6px; }
.article-nu a:hover h3 { text-decoration: underline; }
.article-nu p { font-size: .88rem; color: var(--ardoise); margin-bottom: 12px; }
.article-nu .pied-article {
  margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--filet-clair);
  font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ardoise);
}

/* ===== L'almanach ======================================================== */
.almanach { border-left: 2px solid var(--filet); margin-left: 14px; }
.jalon { position: relative; padding: 0 0 24px 34px; }
.jalon .puce {
  position: absolute; left: -15px; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .85rem; background: var(--blanc); border: 2px solid var(--marine);
}
.jalon.fait .puce { background: var(--marine); color: #fff; }
.jalon.attente .puce { border-style: dashed; color: var(--ardoise); border-color: var(--ardoise); }
.jalon .quand {
  font-size: .76rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ardoise);
}
.jalon h3 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin: 2px 0 3px; }
.jalon p { font-size: .95rem; color: var(--ardoise); max-width: 64ch; }

/* ===== Encart de la lettre =============================================== */
.encart-lettre {
  margin: 48px 0 0;
  border: 2px solid var(--filet);
  background: var(--blanc);
  text-align: center;
  padding: 34px 24px;
}
.encart-lettre h2 { font-family: var(--display); font-weight: 900; font-size: 1.7rem; }
.encart-lettre > p { color: var(--ardoise); margin: 8px auto 18px; max-width: 52ch; }

.form-lettre { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.form-lettre .champ-groupe {
  display: flex;
  border: 2px solid var(--filet);
  border-radius: 4px;
  overflow: hidden;
  background: var(--blanc);
}
.form-lettre input[type="email"] {
  border: none; background: var(--blanc); padding: 12px 16px;
  font-family: var(--sans); font-size: .95rem; min-width: 260px; color: var(--marine);
}
.form-lettre input[type="email"]:focus-visible { outline-offset: -3px; }
.form-lettre button {
  border: none; background: var(--rouge); color: #fff; font-weight: 900;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em;
  padding: 12px 22px; font-size: .85rem; cursor: pointer;
}
.form-lettre button:hover { background: #a63324; }
.mention-form { font-size: .8rem; color: var(--ardoise); margin-top: 14px; }

.sujets-alerte {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin: 18px auto 4px; max-width: 640px; text-align: left;
}
.sujets-alerte label { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; }
.sujets-alerte input { margin-top: 4px; accent-color: var(--marine); }

.message-erreur {
  border: 2px solid var(--rouge);
  background: var(--blanc);
  padding: 12px 16px;
  border-radius: 4px;
  font-weight: 700;
  margin: 0 auto 18px;
  max-width: 52ch;
}

/* ===== Page compétition : chiffres de cadrage et stades ================== */
.cadrage { display: flex; flex-wrap: wrap; gap: 2px; margin: 28px 0 0; background: var(--filet); border: 1px solid var(--filet); }
.cadrage .case { flex: 1 1 150px; background: var(--creme); padding: 18px 16px; text-align: center; }
.cadrage .valeur { font-family: var(--display); font-weight: 900; font-size: 3.4rem; line-height: .88; letter-spacing: -.015em; }
.cadrage .valeur-texte { font-size: 1.85rem; line-height: 1.05; }
.cadrage .libelle {
  display: block; margin-top: 6px; font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise);
}

.pays-bloc { margin-top: 42px; }
.pays-entete { border-bottom: 2px solid var(--filet); padding-bottom: 10px; }
.pays-entete h2 { font-family: var(--display); font-weight: 900; font-size: 2.6rem; line-height: .95; }
.pays-entete .compte {
  font-size: .75rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ardoise);
}
.pays-entete .note { color: var(--ardoise); margin-top: 8px; max-width: 70ch; font-size: .95rem; }

.liste-stades { margin-top: 4px; }
.stade {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  border-bottom: 1px solid var(--filet-clair); padding: 16px 0;
}
/* La vignette ouvre la ligne. Elle est décorative : le nom du stade juste à
   côté porte déjà le lien et le texte, donc alt="" et pas de second arrêt au
   clavier — sinon le lecteur d'écran annonce deux fois la même destination. */
.stade .miniature { flex: none; width: 150px; display: block; }
.stade .identite { flex: 1 1 auto; }
.stade .miniature img {
  display: block; width: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid var(--filet); background: var(--papier-doux);
}
.stade.vedette .miniature { width: 220px; }
.stade .identite h3 { font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1.02; }
.stade .identite .ville {
  font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ardoise);
}
.stade .identite .statut { font-size: .9rem; color: var(--ardoise); margin-top: 4px; }
.stade .capacite { text-align: right; flex: none; }
.stade .capacite .valeur { font-family: var(--display); font-weight: 900; font-size: 2.6rem; line-height: .9; }
.stade .capacite .unite {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ardoise); margin-top: 2px;
}
.stade.vedette {
  background: var(--papier-doux);
  border: 1px solid var(--filet);
  padding: 22px 20px;
  margin-bottom: 6px;
}
.stade.vedette .identite h3 { font-size: 2.3rem; }
.stade.vedette .capacite .valeur { font-size: 3.8rem; }

/* Ce que nous n'avons pas encore vérifié : dit, jamais comblé.
   Traité comme un encadré de rédaction (papier plus chaud, filet haut), et non
   avec un liseré latéral coloré : la barre de couleur à gauche est l'un des
   marqueurs les plus sûrs d'une interface produite par défaut. */
.note-honnete {
  background: var(--papier-doux);
  border-top: 2px solid var(--filet);
  padding: 16px 20px;
  margin-top: 18px;
  color: var(--ardoise);
  font-size: .95rem;
  max-width: 76ch;
}
.note-honnete strong { color: var(--marine); }

/* ===== Article =========================================================== */
.article-page { max-width: 760px; margin: 34px auto 0; }
.article-page .surtitre { margin-bottom: 14px; }
.article-page h1 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: .93;
  letter-spacing: -.015em; margin-bottom: 16px;
}
.article-page .chapo { font-size: 1.15rem; color: var(--ardoise); margin-bottom: 18px; }
.article-page .signature {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  border-top: 2px solid var(--filet); border-bottom: 1px solid var(--filet);
  padding: 12px 0; margin-bottom: 28px;
  font-size: .76rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ardoise);
}
.corps-article p { margin-bottom: 18px; }
.corps-article h2 {
  font-family: var(--display); font-weight: 900; font-size: 1.5rem;
  margin: 34px 0 12px; padding-top: 8px; border-top: 1px solid var(--filet-clair);
}
.corps-article strong { font-weight: 800; }

.encadre-source {
  border: 2px solid var(--filet); background: var(--blanc);
  padding: 18px 20px; margin: 32px 0 0;
}
.encadre-source h2 {
  font-size: .78rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 8px;
}
.encadre-source p { font-size: .92rem; color: var(--ardoise); }
.encadre-source a { color: var(--marine); }

.lire-aussi { margin-top: 42px; }
.lire-aussi .grille { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

/* ===== Liste des parutions ============================================== */
.liste-parutions { margin-top: 10px; }
.parution { border-bottom: 1px solid var(--filet-clair); padding: 22px 0; }
.parution > a { text-decoration: none; display: block; }
.parution .kicker {
  display: inline-block; font-size: .7rem; font-weight: 900; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 6px;
}
.parution .kicker::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  background: var(--rouge); margin-right: 7px;
}
.parution h2 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
.parution a:hover h2 { text-decoration: underline; }
.parution p { color: var(--ardoise); margin-top: 6px; max-width: 72ch; }
.parution .meta {
  margin-top: 10px; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ardoise);
}

/* ===== Pages de prose (méthode, légal, confirmation) ==================== */
.page-prose { max-width: 720px; margin: 34px auto 0; }
.page-prose h1 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; margin-bottom: 18px;
}
.page-prose h2 {
  font-family: var(--display); font-weight: 900; font-size: 1.4rem;
  margin: 32px 0 10px; padding-top: 10px; border-top: 1px solid var(--filet-clair);
}
.page-prose p, .page-prose li { margin-bottom: 14px; }
.page-prose ul { padding-left: 22px; }
.page-prose .intro { font-size: 1.1rem; color: var(--ardoise); }

/* ===== Questions fréquentes (rendu visible du FAQPage JSON-LD) ==========
   Le contenu structuré doit correspondre à du texte VISIBLE sur la page :
   une FAQPage déclarée en JSON-LD sans son texte affiché est un signal
   trompeur pour les moteurs, pas une optimisation. */
.liste-faq { max-width: 76ch; }
.item-faq { border-top: 1px solid var(--filet-clair); padding: 18px 0; }
.item-faq:first-child { border-top: none; padding-top: 0; }
.item-faq h3 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin-bottom: 6px; }
.item-faq p { color: var(--ardoise); margin-bottom: 0; }

/* ===== Questions (M6) =================================================== */
.reponse-courte {
  font-size: 1.2rem; font-weight: 700; line-height: 1.5;
  border-top: 2px solid var(--filet); border-bottom: 1px solid var(--filet);
  padding: 16px 0; margin: 18px 0 16px;
}
.liste-questions { list-style: none; max-width: 76ch; }
.liste-questions li { border-bottom: 1px solid var(--filet-clair); padding: 9px 0; font-size: .98rem; }
.liste-questions li a { text-decoration: none; }
.liste-questions li a:hover { text-decoration: underline; }
.liste-questions.colonnes { max-width: none; columns: 2; column-gap: 40px; }
.liste-questions.colonnes li { break-inside: avoid; }

/* ===== Histoire (M9) ==================================================== */
.defilement { overflow-x: auto; }
.tableau-palmares { border-collapse: collapse; width: 100%; max-width: 76ch; font-size: .95rem; }
.tableau-palmares th {
  text-align: left; font-size: .72rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ardoise); border-bottom: 2px solid var(--filet); padding: 8px 10px 8px 0;
}
.tableau-palmares td { border-bottom: 1px solid var(--filet-clair); padding: 9px 10px 9px 0; vertical-align: top; }
.tableau-palmares td:first-child { font-family: var(--display); font-weight: 700; }
.tableau-palmares .nombre { font-family: var(--display); font-weight: 900; font-size: 1.15rem; text-align: center; }

/* ===== Quiz (M7) : une édition spéciale du journal, pas un encart arcade == */
.quiz { max-width: 760px; margin: 30px auto 0; }
.quiz-question { border: none; border-top: 2px solid var(--filet); padding: 18px 0 8px; margin: 0 0 10px; }
/* La légende est sortie de la bordure du fieldset (float) : sinon le filet
   supérieur se dessine à droite du titre, comme un trait de soulignement. */
.quiz-question legend {
  float: left; width: 100%;
  font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.3; padding: 0 0 12px;
}
.quiz-question .quiz-choix { clear: both; }
.quiz-question .numero, .quiz-intitule .numero {
  font-family: var(--display); font-weight: 900; color: var(--rouge); margin-right: 10px;
}
.quiz-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.quiz-choix label {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--filet-clair); background: var(--blanc); cursor: pointer;
}
.quiz-choix label:hover { border-color: var(--filet); }
.quiz-choix input { margin-top: 5px; accent-color: var(--marine); flex: none; }
.quiz-actions { margin-top: 26px; align-items: center; }

.quiz-correction { border-top: 1px solid var(--filet-clair); padding: 16px 0; max-width: 76ch; }
.quiz-correction .quiz-intitule { font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; }
.quiz-correction .explication { color: var(--ardoise); font-size: .95rem; margin-top: 4px; }
.quiz-correction.juste strong { color: var(--marine); }
.quiz-correction.faux strong { color: var(--rouge); font-size: 1.05rem; }

/* ===== Affiliation (inactif au lancement, voir AFFILIATION.md) ========== */
.encart-affiliation {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--filet-clair); background: var(--blanc); padding: 16px 20px; margin-top: 34px;
}
.encart-affiliation p { margin: 0; font-size: .95rem; }
.encart-affiliation .mention-affiliation { flex-basis: 100%; font-size: .78rem; color: var(--ardoise); }

/* ===== Renvoi vers l'app de pronostics ================================== */
.encart-koorami {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  border: 1px solid var(--filet); background: var(--papier-doux);
  padding: 20px 22px; margin-top: 42px;
}
.encart-koorami p { font-size: .98rem; max-width: 56ch; }
.encart-koorami strong { font-family: var(--display); font-size: 1.15rem; display: block; margin-bottom: 2px; }

/* ===== Pied de page ===================================================== */
.pied { margin-top: 52px; border-top: 3px solid var(--filet); background: var(--blanc); }
.ours {
  max-width: var(--gabarit); margin: 0 auto; padding: 26px 24px 26px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px;
}
.ours-identite { max-width: 62ch; }
.ours-titre {
  font-family: var(--display); font-weight: 900; font-size: 1.35rem; margin-bottom: 8px;
}
.ours-identite p { font-size: .92rem; color: var(--ardoise); margin-bottom: 10px; }

/* Les liens courent comme un ours de journal, pas en colonnes de gabarit.
   Séparés par l'espace et non par un point médian : en fin de ligne, le point
   se retrouvait orphelin, ce qui se voit tout de suite. */
.ours-liens {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  align-content: start; font-size: .9rem;
}
.ours-liens a { text-decoration: none; padding: 2px 0; border-bottom: 1px solid transparent; }
.ours-liens a:hover { border-bottom-color: var(--marine); }
.pied .signature-pied {
  border-top: 1px solid var(--filet-clair); padding: 14px 24px 26px;
  max-width: var(--gabarit); margin: 0 auto;
  font-size: .82rem; color: var(--ardoise);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}

/* ===== Classes utilitaires ==============================================
   Aucun attribut `style=""` dans les gabarits : la CSP du site interdit le
   style en ligne (`style-src 'self'`, sans 'unsafe-inline'), et un attribut
   style serait silencieusement ignoré par le navigateur. Tout passe par ici. */
.entete-page { max-width: none; margin-top: 30px; }
.prose-large { max-width: 76ch; margin-left: 0; }
.texte-doux { font-size: .92rem; color: var(--ardoise); }
.texte-centre { text-align: center; }
.bloc-centre { max-width: 760px; margin-left: auto; margin-right: auto; }
.espace-haut { margin-top: 34px; }
.form-bloc { display: block; }
.champs-alerte { border: none; }
.champs-alerte legend {
  font-weight: 800; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ardoise);
}
.ligne-champ { display: flex; justify-content: center; margin-top: 22px; }

/* ===== Entrée en cascade ================================================
   L'état de repos reste VISIBLE : l'opacité nulle ne vit que dans l'image clé
   de départ, jamais sur la classe. Si l'animation ne joue pas (mouvement
   réduit, moteur de rendu qui l'ignore, capture d'écran), le contenu est là. */
@keyframes montee-douce {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* L'entrée est réservée aux moments forts de la page : la une et les deux
   grilles courtes. Les longues listes (stades, parutions) ne s'animent pas :
   une même animation posée sur chaque bloc cesse d'être une chorégraphie et
   devient un réflexe, en plus de faire vibrer vingt lignes à l'arrivée. */
.une-principale,
.colonne-droite,
.article-nu,
.jalon { animation: montee-douce .55s cubic-bezier(.22, .61, .36, 1) both; }

.article-nu:nth-child(1), .jalon:nth-child(1) { animation-delay: .04s; }
.article-nu:nth-child(2), .jalon:nth-child(2) { animation-delay: .10s; }
.article-nu:nth-child(3), .jalon:nth-child(3) { animation-delay: .16s; }
.article-nu:nth-child(4), .jalon:nth-child(4) { animation-delay: .22s; }
.colonne-droite { animation-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== Photothèque =======================================================
   Un journal sans photo n'est pas un journal. Toutes les images sont
   hébergées ici (aucune requête tierce) et affichent leur crédit : les
   licences CC BY / CC BY-SA l'exigent, ce n'est pas un ornement.

   Les images portent width/height en attributs et un rapport fixé en CSS :
   la place est réservée avant le téléchargement, la page ne saute pas. */

figure { margin: 0; }

.credit {
  font-size: .68rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ardoise);
}
.credit a { color: inherit; text-underline-offset: 2px; text-decoration-color: var(--filet-clair); }
.credit a:hover { color: var(--marine); text-decoration-color: var(--rouge); }

/* --- Vidéo : carte animée -------------------------------------------------
   Même relief que les cartes de la DA 2026 (.voisin, .stade.vedette) : un
   aplat qui sort de la page à la tranche, pas une ombre floue. Le lecteur
   natif du navigateur porte ses propres contrôles ; on ne les recouvre pas. */
.video-carte { margin-top: 4px; }
.video-carte video {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--marine);
  box-shadow: 6px 6px 0 var(--rouge);
  background: var(--papier-doux);
}
.video-carte figcaption { margin-top: 14px; max-width: 76ch; }
.video-carte .legende {
  display: block; font-size: .95rem; line-height: 1.45;
  color: var(--ardoise); margin-bottom: 6px;
}

/* --- Photo d'ouverture --- */
.photo-une { margin-top: 28px; }
.photo-une img {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--filet);
  background: var(--papier-doux);
}
.photo-une figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px;
  border-bottom: 1px solid var(--filet-clair);
  padding: 10px 2px 12px;
}
.photo-une .legende {
  flex: 1 1 320px;
  font-family: var(--sans); font-size: .95rem;
  line-height: 1.45; color: var(--ardoise);
}

/* --- Photo en encart, dans la colonne de texte --- */
.bloc-texte-photo {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px; align-items: start;
}
.bloc-texte-photo.sans-encart { display: block; }
.photo-encart img {
  display: block; width: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid var(--filet);
  background: var(--papier-doux);
}
.photo-encart figcaption { padding-top: 9px; }
.photo-encart .legende {
  display: block; font-size: .88rem; line-height: 1.45; margin-bottom: 5px;
}

/* --- Planche de photos ---
   Le nombre de colonnes suit le nombre de photos : une grille de trois
   colonnes avec deux vignettes laisse une case vide en bout de rang, et une
   case vide se lit comme une image qui n'a pas chargé. */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 24px; }
.galerie-1 { grid-template-columns: minmax(0, 560px); }
.galerie-2 { grid-template-columns: repeat(2, 1fr); }
.galerie img {
  display: block; width: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--filet);
  background: var(--papier-doux);
}
.galerie figcaption { padding-top: 9px; }
.galerie .legende {
  display: block; font-size: .88rem; line-height: 1.45; margin-bottom: 5px;
}

/* Une enceinte sans photo libre : on le dit, on n'illustre pas avec autre chose.
   Même traitement que .note-honnete, et pour la même raison : pas de liseré
   latéral coloré, c'est le marqueur d'interface produite par défaut. */
.sans-photo {
  background: var(--papier-doux);
  border-top: 2px solid var(--filet);
  padding: 16px 20px; margin-top: 26px;
  font-size: .95rem; color: var(--ardoise);
}

/* --- Photo de la une, dans la colonne de gauche de l'accueil ---
   Même composant, colonne deux fois plus étroite : la légende repasse sous
   la photo et le crédit se range à droite sur la même ligne. */
.une-principale .photo-une { margin: 20px 0 4px; }
.une-principale .photo-une figcaption { padding-bottom: 10px; }
.une-principale .photo-une .legende { flex-basis: 100%; font-size: .95rem; }

/* --- Bande de photos de stades (accueil) ---
   Format portrait, à l'inverse de la planche (4/3) et des lignes de liste
   (3/2) : trois rythmes d'image différents sur le site, aucun copié-collé. */
/* 6 colonnes, puis 3, puis 2 : toutes divisent le nombre de vignettes servi
   par le contrôleur (6), donc aucune ligne ne se termine par une carte seule. */
.bande-stades { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bande-stades a { text-decoration: none; display: block; }
.bande-stades img {
  display: block; width: 100%;
  aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid var(--filet); background: var(--papier-doux);
  transition: border-color .25s ease;
}
.bande-stades a:hover img { border-color: var(--rouge); }
.bande-stades .nom {
  /* Deux lignes réservées : sans ça, un nom court et un nom long décalent les
     villes d'une ligne et le bas de la bande part en escalier. */
  display: block; margin-top: 10px; min-height: 2.3em;
  font-family: var(--display); font-weight: 800; font-size: 1.2rem; line-height: 1.02;
}
.bande-stades a:hover .nom { text-decoration: underline; text-decoration-thickness: 2px; }
.bande-stades .ou {
  display: block; margin-top: 3px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ardoise);
}

/* --- Vignette de liste (stades, villes) --- */
.vignette {
  display: block; width: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border: 1px solid var(--filet);
  background: var(--papier-doux);
}

/* ===== ÉDITION 2026 : relief, plein-cadre, mouvement ======================
   Révision de la DA « Grand Journal » du 15/09/2026. La palette, les textes et
   la structure éditoriale ne bougent pas ; ce qui change, c'est la MATIÈRE :
   une condensée de presse sportive à la place de la serif, du relief à la
   tranche à la place du plat, une photo qui sort du gabarit, et du mouvement
   sans une ligne de JavaScript. */

/* --- Relief : la tranche ------------------------------------------------
   Un aplat net décalé sous la surface, jamais une ombre floue. C'est la
   physique d'un bloc de plomb posé sur une forme d'imprimerie : la surface
   s'enfonce au clic, et la lumière ne vient de nulle part. */
.bouton {
  border: 2px solid var(--marine);
  box-shadow: var(--tranche) var(--tranche) 0 var(--marine);
  transition: box-shadow .12s ease, transform .12s ease, background .2s ease;
}
.bouton:hover { box-shadow: var(--tranche-forte) var(--tranche-forte) 0 var(--marine); }
.bouton:active {
  box-shadow: 0 0 0 var(--marine);
  transform: translate(var(--tranche), var(--tranche));
}
.bouton-plein { box-shadow: var(--tranche) var(--tranche) 0 var(--rouge); }
.bouton-plein:hover { box-shadow: var(--tranche-forte) var(--tranche-forte) 0 var(--rouge); }
.bouton-plein:active { box-shadow: 0 0 0 var(--rouge); }

.cadrage, .citation, .stade.vedette, .encart-lettre, .encart-koorami {
  box-shadow: var(--tranche) var(--tranche) 0 var(--marine);
}
.form-lettre button { box-shadow: var(--tranche) var(--tranche) 0 var(--marine); transition: box-shadow .12s ease, transform .12s ease; }
.form-lettre button:active { box-shadow: 0 0 0; transform: translate(var(--tranche), var(--tranche)); }

/* --- Plein-cadre --------------------------------------------------------
   Sortir du gabarit sans barre de défilement horizontale : `html` est en
   `overflow-x: clip`, qui rogne les ~15 px de largeur de barre que `100vw`
   compte en trop, sans créer de conteneur de défilement. */
.pleine-largeur { width: calc(100vw - var(--barre)); margin-inline: calc(50% - 50vw + var(--barre) / 2); }

/* --- Ouverture de page : le titre SUR la photo -------------------------- */
.ouverture-bloc { width: calc(100vw - var(--barre)); margin: 0 0 0 calc(50% - 50vw + var(--barre) / 2); }
.ouverture {
  position: relative;
  margin: 0 0 4px;
  min-height: clamp(400px, 64vh, 660px);
  display: flex;
  align-items: flex-end;
  background: var(--marine);
}
.ouverture > img {
  /* `inset: 0` suffit à caler l'image sur la boîte ; `height: auto` du reset
     doit être écrasé, sinon l'image reprend son rapport d'origine et flotte au
     milieu du cadre. Empilement en z-index POSITIFS : un enfant en z-index
     négatif passe sous le fond de son parent dès qu'on isole le contexte. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Voile de lisibilité : dense sous le texte, nul en haut de l'image — un voile
   uniforme éteindrait la photo au lieu de la servir. */
.ouverture::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(16, 24, 36, .92) 0%,
    rgba(16, 24, 36, .74) 26%,
    rgba(16, 24, 36, .22) 58%,
    rgba(16, 24, 36, .05) 100%
  );
}
.ouverture .bloc-titre {
  position: relative; z-index: 2;
  max-width: var(--gabarit);
  width: 100%;
  margin: 0 auto;
  padding: 64px var(--gouttiere) 34px;
  color: var(--creme);
}
.ouverture h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.9rem, 7.4vw, 6rem);
  line-height: .9;
  letter-spacing: -.018em;
  margin: 16px 0 14px;
  text-wrap: balance;
}
.ouverture .chapo {
  font-size: 1.12rem;
  line-height: 1.45;
  max-width: 62ch;
  color: #eef1f5;
}
.ouverture .surtitre { background: var(--rouge); color: #fff; }

/* Légende et crédit sous l'ouverture, dans le gabarit, sur le papier. */
.ouverture-legende {
  max-width: var(--gabarit);
  margin: 0 auto;
  padding: 10px var(--gouttiere) 14px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px;
  border-bottom: 1px solid var(--filet-clair);
}
.ouverture-legende .legende {
  flex: 1 1 320px;
  font-size: .95rem; line-height: 1.4; color: var(--ardoise);
}

/* --- Bandeau de rubriques collant -------------------------------------- */
.bandeau-rubriques {
  position: sticky; top: 0; z-index: 40;
  background: var(--creme);
  border-bottom: 1px solid var(--filet);
  /* Le bandeau colle sur toute la largeur alors qu'il vit dans le gabarit :
     on étale le fond par une ombre latérale pleine, pas par un débord. */
  box-shadow: -100vw 0 0 var(--creme), 100vw 0 0 var(--creme);
}

/* --- Illustrations générées --------------------------------------------
   Elles n'illustrent JAMAIS un lieu réel : ambiance et objets seulement, et
   elles portent la mention « Illustration » au lieu d'un crédit photo. */
.illustration { position: relative; }
.illustration img {
  display: block; width: 100%;
  aspect-ratio: 21 / 9; object-fit: cover;
  border: 1px solid var(--filet);
  background: var(--papier-doux);
}
.illustration figcaption {
  padding-top: 8px;
  font-size: .68rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ardoise);
}
.encart-lettre .illustration img { aspect-ratio: 21 / 6; border: none; border-bottom: 2px solid var(--filet); }

/* --- Mouvement, zéro JavaScript ----------------------------------------
   1. Révélation pilotée par le défilement (`animation-timeline: view()`).
      Tout est enfermé dans @supports : un navigateur qui ne connaît pas la
      propriété n'applique RIEN, donc l'état de repos reste visible.
   2. Transitions entre pages (`@view-transition`) : le masthead et le bandeau
      de rubriques gardent leur place pendant que le contenu se remplace.
      C'est ce qui donne la sensation d'application sans une ligne de script. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* ⚠ Uniquement des blocs PLUS COURTS que la fenêtre. Une section entière
       peut être plus haute que le scrollport : sa plage `entry` ne s'achève
       jamais, l'animation reste sur son image de départ et la section demeure
       à opacité 0 — page blanche, vue en préviz le 15/09/2026. */
    .photo-une, .galerie figure, .cadrage, .bande-stades a,
    .section-titre, .encart-lettre, .encart-koorami, .illustration {
      animation: montee-douce linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    /* La première image de page ne doit pas s'animer : elle est déjà à l'écran
       au chargement, et l'animer la ferait clignoter à l'arrivée. */
    .ouverture, .ouverture * { animation: none; }
  }
}

@view-transition { navigation: auto; }
.titre-journal { view-transition-name: masthead; }
.bandeau-rubriques { view-transition-name: rubriques; }
.bandeau-edition { view-transition-name: edition; }
.pied { view-transition-name: ours; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* --- Signature de vérification sous l'ouverture ------------------------ */
.signature-ouverture { margin-top: 18px; }

/* --- Bandeau d'illustration dans un encart ----------------------------- */
/* Les marges négatives collent au padding de .encart-lettre (34px / 24px) :
   le bandeau touche les bords de l'encart au lieu de flotter dedans. */
.illustration-bandeau { margin: -34px -24px 24px; }
.illustration-bandeau img { aspect-ratio: 21 / 6; border: none; border-bottom: 2px solid var(--filet); }
.illustration-bandeau figcaption { padding: 8px 24px 0; }

/* --- Stade précédent / suivant -----------------------------------------
   Deux portes en bas de page plutôt qu'une ligne de liens : le lecteur qui
   finit une fiche veut la suivante, pas un retour au sommaire. Les deux
   colonnes sont toujours pleines (on boucle sur la liste du pays), donc jamais
   de carte orpheline. */
.voisins {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 46px; padding-top: 26px;
  border-top: 3px double var(--filet);
}
.voisin {
  display: block; text-decoration: none;
  border: 1px solid var(--filet);
  background: var(--blanc);
  padding: 0 0 16px;
  box-shadow: var(--tranche) var(--tranche) 0 var(--marine);
  transition: box-shadow .14s ease, transform .14s ease;
}
.voisin:hover { box-shadow: var(--tranche-forte) var(--tranche-forte) 0 var(--rouge); }
.voisin:active { box-shadow: 0 0 0; transform: translate(var(--tranche), var(--tranche)); }
.voisin img {
  display: block; width: 100%;
  aspect-ratio: 16 / 7; object-fit: cover;
  border-bottom: 1px solid var(--filet);
}
.voisin .sens {
  display: block; padding: 12px 18px 0;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rouge);
}
.voisin .nom {
  display: block; padding: 4px 18px 0;
  font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1.02;
}
.voisin .ou {
  display: block; padding: 4px 18px 0;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ardoise);
}
.voisin-suivant { text-align: right; }

/* --- Ouverture de l'accueil ---------------------------------------------
   Plus haute que les autres : c'est la première vue du site, elle doit tenir
   l'écran seule avant que la une ne prenne le relais. */
.accueil-ouverture .ouverture { min-height: clamp(460px, 76vh, 760px); }
.accueil-ouverture .ouverture h1 { font-size: clamp(3rem, 8vw, 6.6rem); }
.accueil-ouverture .ouverture .chapo { max-width: 56ch; }
.accueil-ouverture .ouverture-legende {
  justify-content: flex-end;
  border-bottom: 1px solid var(--filet-clair);
}
.accueil-ouverture .ouverture-legende .legende {
  flex: 0 1 auto; text-align: right;
  font-size: .68rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase;
}
.la-une { margin-top: 40px; }

/* ===== Adaptations ====================================================== */
@media (max-width: 980px) {
  .grille-journal { grid-template-columns: 1fr 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .bande-stades { grid-template-columns: repeat(3, 1fr); }
  .galerie-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .la-une { grid-template-columns: 1fr; }
  .une-principale { border-right: none; padding-right: 0; }
  .colonne-droite { padding-left: 0; margin-top: 22px; }
  .bandeau-edition .interieur { font-size: .66rem; }
  .bandeau-edition .secondaire { display: none; }
  .lire-aussi .grille { grid-template-columns: 1fr; }
  .bloc-texte-photo { grid-template-columns: 1fr; gap: 26px; }
  .photo-encart { max-width: 560px; }
  .ours { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .liste-questions.colonnes { columns: 1; }
  .quiz-choix { grid-template-columns: 1fr; }
  .grille-journal { grid-template-columns: 1fr; }
  .stade { flex-direction: column; align-items: stretch; gap: 10px; }
  .stade .capacite { text-align: left; }
  .stade .miniature, .stade.vedette .miniature { width: 100%; }
  .chiffre-une .gros { font-size: 3.2rem; }
  .galerie { grid-template-columns: 1fr; }
  .bande-stades { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ouverture { min-height: 70vh; }
  .accueil-ouverture .ouverture { min-height: 78vh; }
  .accueil-ouverture .ouverture-legende .legende { text-align: left; }
  .voisins { grid-template-columns: 1fr; }
  .voisin-suivant { text-align: left; }
  .illustration-bandeau { margin-inline: -24px; }
  .ouverture .bloc-titre { padding-top: 40px; padding-bottom: 26px; }
  /* En portrait, un cadre large ne montre plus rien : on rend de la hauteur. */
  .photo-une img { aspect-ratio: 4 / 3; }
  .photo-une .legende { flex-basis: 100%; }
  .form-lettre .champ-groupe { width: 100%; }
  .form-lettre input[type="email"] { min-width: 0; flex: 1; }
}

/* Ligne d'auteur, sous la signature de vérification. */
.auteur-ligne {
  display: block; margin-top: 8px;
  font-size: .8rem; font-weight: 700; color: var(--ardoise);
}
.auteur-ligne a { color: inherit; text-underline-offset: 2px; }
.verif a { color: inherit; text-underline-offset: 2px; }