/* Le Grand Tour appliqué à la page d'accueil. Se charge APRÈS grand-tour.css,
   dont elle reprend les jetons. Feuille de remplacement, balises inchangées.

   Deux partis pris que le guide impose et qui se voient tout de suite :
   — les tuiles de jeux perdent leur cadre. Le guide est explicite : « les
     listes de destinations — jeux, palmarès, fiches — sont des billets »,
     c'est-à-dire des rangées séparées par des filets épais, pas des cartes.
   — le sprite d'icônes est repeint depuis le CSS. Ses couleurs sont écrites en
     attributs de présentation (fill=, stroke=), que la moindre règle CSS bat ;
     inutile donc de toucher au balisage. Chaque icône passe en encre + un seul
     accent, jamais deux, comme le veut le système. */

body { font-size: 16px; }
.inner { max-width: 940px; margin: 0 auto; padding: 0 20px; }

/* ---------- le héros ---------- */
/* Le premier écran, en deux morceaux : le contenu prend toute la place
   restante et s'y centre, le bandeau ferme la marche à sa hauteur réelle.
   Réserver une hauteur en dur sous le contenu ne tenait pas — le bandeau se
   replie sur deux lignes en écran étroit et passait sous le champ. */
.hero {
  /* Pas tout à fait un écran plein. Un premier écran qui s'arrête pile au pli
     se lit comme une page entière — on ne cherche pas dessous. Il s'arrête
     donc quatre pour cent plus haut : la bande ne touche plus le bord, et le
     liseré de crème qui apparaît dessous dit qu'il y a une suite.
     Quatre pour cent, et pas dix : à dix, le sur-titre de la section suivante
     dépassait aussi, et l'on savait déjà ce qu'il y avait dessous — la
     découverte était faite avant d'avoir descendu. */
  /* Moins la barre des cinq, collée en haut : le corps a déjà reculé
     d’autant, et sans la retrancher ici le premier écran dépasserait le pli
     de sa hauteur exacte. « --portes-h » est publié par « portes.js ». */
  min-height: calc(96dvh - var(--portes-h, 0px));
  display: flex; flex-direction: column;
  text-align: center; background: var(--color-bg);
}
.hero-in {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  /* sans quoi le bouton, seul enfant en ligne, s'étirerait sur toute la
     largeur : une colonne flex étire ses enfants par défaut */
  align-items: center;
  /* L'AIR SE MESURE EN HAUTEUR D'ÉCRAN, et non en pas fixes. Le premier écran
     promet quatre pour cent de crème sous la bande, mais ce n'est qu'un
     minimum : dès que le contenu dépasse, il pousse la bande hors du pli et
     c'est ELLE qu'on perd — la porte de la suite, coupée en deux. Sur un écran
     large et bas, seize-neuvièmes et 728 pixels de haut, il ne restait que
     deux pixels de marge. Tout ce qui respire ici respire donc à la mesure de
     ce qu'on a : sur un écran haut rien ne change, sur un écran bas tout se
     resserre d'un cran et la bande reste entière. */
  padding: clamp(20px, 4vh, 48px) 20px;
}
/* La rangée des cinq jeux ferme le premier écran, à la place qu'occupait le
   bandeau. Posée APRÈS le héros, elle tombe juste au-dessus du pli : c'est la
   dernière chose qu'on voit sans rien faire, et sur un téléphone c'est la
   seule qui compte. « flex: none » l'empêche de se laisser étirer par la
   colonne qui la contient. */
.hero .bande, .hero .portes { flex: none; }
/* Les pictos des cartes de jeux. Le dessin et le repeint des icônes vivent
   dans « portes.css », partagé avec les pages de jeu ; il ne reste ici que la
   taille qu'elles prennent DANS une carte. */
.pict { display: block; }

/* Les blocs qui doivent garder leur largeur la réclament : dans une colonne
   flex centrée, un enfant est taillé sur son contenu. Le bouton, lui, y gagne
   — il retrouve la taille de son texte. */
.hero-in > h1, .hero-in > .lede, .hero-in > .cherche { width: 100%; }
@supports not (min-height: 100dvh) { .hero { min-height: calc(96vh - var(--portes-h, 0px)); } }
.hero h1 {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em;
  /* La largeur décide de la taille du titre, mais la HAUTEUR a son mot à
     dire : sur un écran bas, soixante-deux pixels sur deux lignes mangent le
     quart de ce qu'on a. Le « min » ne change rien tant qu'il y a de la place. */
  font-size: min(clamp(34px, 6.4vw, 62px), 8.5vh); line-height: 1.02; text-wrap: balance;
  margin: clamp(10px, 2.2vh, 24px) auto clamp(8px, 1.6vh, 16px);
  max-width: 22ch; text-transform: none;
}
.hero h1 em { font-style: normal; color: var(--color-accent-2); }
.hero .lede {
  font-size: clamp(16px, 2vw, 19px); line-height: 1.5; color: var(--sourdine);
  max-width: 46ch; margin: 0 auto clamp(12px, 3vh, 32px);
  /* trois coupures imposées : text-wrap n’a plus rien à équilibrer */
}
/* Le chiffre ressort du chapeau : il passe à l'encre pleine, là où le reste
   de la phrase reste sourd. C'est le seul mot qu'on doit retenir. */
.hero .lede strong {
  font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums;
}
.insecable { white-space: nowrap; }

/* La cocarde du héros porte ses propres couleurs dans le SVG : aucune règle
   ne doit les redéfinir ici. Les deux lignes qui repeignaient cercles et
   tracés dataient de l'ancien panneau au cœur, et teintaient en bleu les
   trois anneaux. */
/* La cocarde est ce qui prend le plus de place et ce qui en demande le moins :
   elle se plafonne aussi à la hauteur de l'écran. */
.panneau { width: min(clamp(96px, 15vw, 148px), 17vh); height: auto; display: block; margin: 0 auto; }

/* Le champ et le bouton de carte partagent la rangée. La largeur maximale
   couvre les deux : le champ garde ainsi les 460 pixels qu'il avait seul, et
   le bouton s'ajoute à côté au lieu de les lui prendre. */
.cherche { max-width: 516px; margin: clamp(12px, 3vh, 32px) auto 0; position: relative; }
.cherche-ligne { display: flex; align-items: center; gap: 10px; }
.cherche .carte-appel { width: 46px; height: 46px; }
.cherche input {
  /* « width: auto » et non « 100 % » : dans une rangée, une largeur de cent
     pour cent prend toute la place et écrase le bouton à zéro pixel. */
  flex: 1 1 auto; min-width: 0; width: auto;
  min-height: 46px; padding: 11px 16px; font: inherit; font-size: 15px;
  color: var(--color-text); caret-color: var(--color-accent-2);
  background: var(--color-surface); border: 2px solid var(--color-text); border-radius: 999px;
  padding-inline: 22px;
}
.cherche input::placeholder { color: var(--sourdine); opacity: 1; }
/* Un seul anneau au focus : le contour suffit, et il ne dépend pas de la
   couleur pour se voir. Recolorer la bordure en plus donnait deux traits
   bleus concentriques. */
/* La liste tombe sous un champ en gélule : un rectangle à angles francs
   dessous jurait. Même bordure de 2 px, rayon assoupli. */
/* La liste s'aligne sur le CHAMP et non sur la rangée : le bouton de carte
   n'a rien à voir avec ce qu'on est en train de taper, et une liste qui passe
   dessous ferait croire le contraire. Quarante-six pixels de bouton plus dix
   d'écart. */
.cherche-res {
  position: absolute; left: 0; right: 56px; z-index: 20; text-align: left;
  background: var(--color-surface); border: 2px solid var(--color-text);
  border-radius: var(--radius-lg); margin-top: 8px; overflow: hidden;
}
.cherche-res[hidden] { display: none; }
.cherche-res a {
  display: block; padding: 10px 14px; color: var(--color-text); text-decoration: none;
  font-size: 14px; border-bottom: 1px solid var(--color-divider);
}
.cherche-res a:last-child { border-bottom: none; }
/* Ce qui est visé — à la souris, au clavier, ou d'emblée à l'ouverture — porte
   la même marque. « vise » est posée par « liste-clavier.js ». */
.cherche-res a.vise { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .cherche-res a:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
}

.cherche-res .ou { color: var(--sourdine); font-size: 13px; }
/* Un lieu n'est pas un carrefour : il porte son échelle en cartouche, et un
   filet le sépare des fiches qui suivent — sans quoi on lirait une seule
   liste où « Rennes » passerait pour un rond-point de plus. */
.cherche-res a.lieu { font-weight: 700; }
.cherche-res a.lieu + a:not(.lieu) { border-top: var(--rule-light); }
.cherche-res .quoi {
  display: inline-block; margin-right: 9px; padding: 2px 8px;
  border: 1.5px solid var(--color-accent); border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent);
  vertical-align: 1px;
}
/* Rien trouvé : une phrase qui respire, et qui mène quelque part. Elle
   n'avait aucune règle et se collait au cadre. */
.cherche-res .vide {
  padding: 14px 20px; color: var(--sourdine); font-size: 14px; line-height: 1.5;
}
.cherche-res .vide a {
  display: inline; padding: 0; border: none; color: var(--color-accent);
  text-decoration: underline; text-underline-offset: 3px; font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .cherche-res .vide a:hover { background: none; color: var(--color-accent-600); }
}


/* ---------- les deux phrases qui coupent la page ----------
   Elles étaient des bandeaux pleins, bleu et coquelicot, d'un bord à l'autre.
   Trop épais : une devise n'a pas besoin de peser trente kilos pour se faire
   entendre, et deux aplats pleine largeur dans une page de papier crème
   pèsent plus que ce qu'ils disent. Reste la phrase, à l'encre bleue, tenue
   par deux tirets quadratins — la ponctuation qui isole sans encadrer. */
.bande {
  background: none; color: var(--color-accent);
  /* Moins d'air qu'un bandeau plein n'en demandait : sans aplat, la phrase
     n'a plus à être calée au milieu d'une barre. */
  text-align: center; padding: var(--space-3) var(--space-6) var(--space-4); margin: 0;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.7;
}
/* Les tirets viennent de la feuille et non du texte : ils sont une marque de
   mise en page, pas des mots. Un lecteur d'écran n'a pas à les lire, et une
   traduction n'a pas à les traduire.
   ILS FLANQUENT LA PHRASE, PAS SES BOUTS. Simples pseudo-éléments dans le fil du
   texte, ils suivaient le retour à la ligne : sur téléphone, où la devise tient
   sur deux lignes, l'ouvrant se retrouvait en tête de la première et le fermant
   à la fin de la seconde, chacun accroché à un bord déchiqueté. La phrase
   devient donc une rangée — tiret, texte, tiret — dont les tirets se centrent
   sur toute la hauteur, quel que soit le nombre de lignes. */
.bande-mot {
  display: inline-flex; align-items: center; gap: 0.55em;
  text-align: center;
}
.bande-mot::before, .bande-mot::after { content: "—"; flex: none; }
/* Ce qui ne doit pas se couper dans une bande : la seconde moitié d'une
   consigne. La ligne passe à la virgule, ou ne passe pas. */
.bande-mot .tenue { white-space: nowrap; }
/* LES TIRETS PRENNENT DE LA LARGEUR À LA PHRASE, puisqu'ils sortent du fil du
   texte : sur un écran de 375 pixels, la devise passait de deux lignes à trois
   et le bandeau gagnait vingt pixels — or on l'avait justement aminci. Le
   retrait latéral leur rend cette largeur. Mesuré : seize pixels suffisent à
   ramener les deux lignes, et le bandeau à sa hauteur d'avant. */
@media (max-width: 640px) {
  .bande { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* La bande du premier écran n'annonce pas seulement la suite : elle y mène. */
.bande-porte { display: block; text-decoration: none; }

/* TROIS CHEVRONS, ALLUMÉS L'UN APRÈS L'AUTRE. Un seul chevron qui monte et
   descend disait « quelque chose bouge » ; trois qui s'éclairent de haut en
   bas disent le sens. Ils se chevauchent d'un tiers — un escalier, pas une
   colonne — et le dernier est le plus pâle au repos, ce qui suffit déjà à
   faire descendre l'œil sans animation. */
.chevrons { display: block; margin-top: 10px; }
.chevrons i {
  display: block; width: 11px; height: 11px; margin: -3px auto 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .5; transition: opacity .3s;
}
.chevrons i:nth-child(2) { opacity: .35; }
.chevrons i:nth-child(3) { opacity: .2; }
/* Descendu d'un pixel, ils n'ont plus rien à dire. Transparents et non
   retirés : ils gardent leur place, sinon la phrase sauterait. */
body.descendu .chevrons i { opacity: 0; animation: none; }
/* La vague : chacun s'allume à son tour, et le retard entre les trois fait
   descendre la lumière. */
@keyframes chevron-vague {
  0%, 60%, 100% { opacity: .18; }
  30%           { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .chevrons i { animation: chevron-vague 1.8s ease-in-out infinite; }
  .chevrons i:nth-child(2) { animation-delay: .2s; }
  .chevrons i:nth-child(3) { animation-delay: .4s; }
}
@media (hover: hover) and (pointer: fine) {
  /* Au survol, la vague s'arrête et les trois s'allument ensemble : la main
     est déjà là, il n'y a plus à la conduire. La couleur du texte est redite —
     la règle générale des liens repeindrait la phrase d'un bleu plus sombre
     sans que le chevron suive. */
  .bande-porte:hover { color: var(--color-accent-600); }
  .bande-porte:hover .chevrons i { animation: none; opacity: 1; }
}

/* Le saut d'ancre se fait en glissant — sauf pour qui a demandé moins de
   mouvement à son système. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* L'ancre ne colle pas au bord haut : une section qui commence à zéro pixel
   du bord paraît décapitée — et la barre des cinq, collée en haut, recouvrirait
   le sur-titre. On lui rend sa hauteur, plus l'air habituel. */
section[id] { scroll-margin-top: calc(var(--portes-h, 0px) + 12px); }

/* Pas de « scroll-snap » ici, et c'est délibéré.
   On avait posé deux points d'accroche — le héros et la section des jeux —
   pour qu'un mouvement vers le bas se pose pile sur « Ils ont tout pour
   plaire ». À la mesure c'était juste ; à l'usage, la page devenait rigide :
   « proximity » reprend aussi le geste qui s'arrête près du haut, et l'on ne
   défile plus, on est déplacé. Le héros s'arrête à 96 dvh, la section suivante
   commence donc juste sous le pli : le geste ordinaire suffit. */

/* ---------- sections ---------- */
/* Les sections respirent : sans barre noire pour les séparer, c'est le blanc
   qui fait le travail, et il lui en faut assez pour qu'on sente la coupure.
   La marge s'ouvre avec l'écran — serrée sur un téléphone, large sur un
   bureau, là où les sections paraissent sinon collées.
   Elle a valu quatre-vingt-seize pixels entre deux sections, puis soixante-
   douze, et c'était encore un désert à traverser : chaque section porte la
   sienne, et deux voisines les additionnent. Moitié moins, donc — au lieu de
   cent quarante-quatre pixels entre deux sections sur un grand écran, soixante-
   douze.
   Le plancher, lui, remonte : à seize pixels de chaque côté, le téléphone
   serrait trop, d'autant que le titre venait de rendre la moitié de sa marge
   basse. Vingt-deux — quarante-quatre entre deux sections. */
section { padding: clamp(22px, 3vw, 36px) 0; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent-2); margin: 0 0 var(--space-2);
}
/* Le titre tient plus près de ce qu'il annonce qu'il ne l'était : trente-deux
   pixels le séparaient de sa liste, autant que deux sections l'une de l'autre,
   et l'on ne savait plus ce qui allait avec quoi. Seize suffisent — un titre
   et son contenu sont une même chose.
   UNE SEULE RÈGLE : il y en avait deux, et la seconde écrasait sans le dire la
   marge basse de la première. */
section h2 {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.015em;
  font-size: clamp(28px, 4.4vw, 42px); line-height: 1.04;
  margin: 0 0 var(--space-4); text-wrap: balance;
  text-transform: none;
}
/* Les sous-titres restent d'un seul ton : le coquelicot est réservé aux
   sur-titres et à ce qui appelle une action. */
section h2 em { font-style: normal; color: inherit; }

/* ---------- les jeux, en billets ---------- */
.cards { display: flex; flex-direction: column; }
.card {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 2px var(--space-4); align-items: center;
  padding: var(--space-4) 2px; border-top: var(--rule);
  color: inherit; text-decoration: none; background: none;
}
.card:last-child { border-bottom: var(--rule); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
}

.card .pict { grid-row: 1 / span 2; align-self: center; width: 52px; height: 52px; }
.card h3 {
  font-family: var(--font-heading); font-weight: 800; font-size: 23px; line-height: 1.05;
  letter-spacing: -0.01em; margin: 0; text-transform: none; color: var(--color-text);
}
.card p { grid-column: 2; margin: 0; font-size: 14.5px; color: var(--sourdine); line-height: 1.5; }
/* La phrase se lit en deux temps, séparés par la ponctuation. Chacun est
   insécable : la ligne ne peut donc casser qu'à leur charnière — et elle ne
   casse que s'il le faut. Tant que la description tient sur une ligne, elle y
   reste ; dès qu'elle déborde, la coupure tombe juste après le deux-points au
   lieu de tomber au milieu du premier temps. */
.card p > span { white-space: nowrap; }
/* Passé un certain resserrement, un des deux temps ne tient plus à lui seul
   sur une ligne : lui interdire de se couper le ferait déborder sur la
   flèche. On lui rend donc sa liberté — l'espace insécable devant le
   deux-points suffit alors à garantir qu'il n'ouvrira jamais une ligne. */
@media (max-width: 430px) {
  .card p > span { white-space: normal; }
}
.card .entrer {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1;
  color: var(--color-accent);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .entrer { color: var(--color-accent-600); }
}

/* Le même appel en lien autonome — « a.entrer » — a déménagé dans
   grand-tour.css : deux familles de pages s'en servent désormais, et la
   feuille de l'accueil ne couvre que l'accueil. Les variantes d'ici, elles,
   restent : la flèche des cartes plus haut, le bleu des fils plus bas. */
@media (max-width: 640px) {
  .card { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .card .pict { width: 42px; height: 42px; }
  .card h3 { font-size: 19px; }
  .card .entrer { font-size: 21px; }
}

/* ---------- questions fréquentes ---------- */
.faq details { border-top: var(--rule); padding: var(--space-3) 0; }
.faq details:last-of-type { border-bottom: var(--rule); }
.faq summary {
  cursor: pointer; font-family: var(--font-heading); font-weight: 800;
  font-size: 19px; line-height: 1.15; letter-spacing: -0.01em; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: var(--space-3) 0 0; font-size: 15px; color: var(--sourdine); }

/* ---------- liens de pied et navigation flottante ---------- */

/* Les mentions sont un paragraphe qu'on lit, pas une barre de navigation :
   ni capitales, ni interlettrage, ni disposition en ligne. Centrées, sourdes,
   d'une largeur de lecture confortable, sous un filet fin.
   Elles héritaient des règles des cartouches ci-dessus, et se retrouvaient en
   capitales espacées. */
.footer-legal {
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-4); padding: var(--space-8) 0 var(--space-4);
  max-width: 720px; margin-inline: auto;
  text-align: center; font-size: 13px; line-height: 1.7; color: var(--sourdine);
}
.footer-legal p { margin: 0 0 var(--space-3); }
.footer-legal p:last-child { margin-bottom: 0; }
.footer-legal a {
  color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) {
  .footer-legal a:hover { color: var(--color-accent-600); }
}

/* les cartouches, elles, ne se soulignent pas : le cadre fait le lien */
.footer-liens a { color: var(--color-text); text-decoration: none; }

/* ---------- « Mes ronds-points » ----------
   Gélule bleue pleine, texte blanc. Le bleu du système porte déjà les flèches
   et l'anneau de la cocarde ; il désigne ici ce qui appartient au visiteur,
   là où le coquelicot d'« Entrer dans la ronde » appelle l'action principale.
   Deux appels pleins, deux rôles, deux couleurs. */
.mes-rp { margin: var(--space-6) 0 0; text-align: center; }
.mes-rp a {
  display: inline-block; text-decoration: none; font-family: var(--font-body);
  font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--color-accent-2);
  border: 2.5px solid var(--color-accent-2); border-radius: 999px;
  padding: 11px 24px;
}
@media (hover: hover) and (pointer: fine) {
  .mes-rp a:hover { background: var(--color-accent-2-600); border-color: var(--color-accent-2-600); color: #fff; }
}


/* ---------- les dernières adoptions ---------- */
/* Le fil lui-même (.fil) vit dans grand-tour.css : la page de tous les
   adoptés le dessine pareil. Ici, seulement le lien qui y mène. */
/* Les liens de fin de section — « Voir tous les adoptés », « Voir tous les
   palmarès » — sont dessinés par « lien-sortie.css », partagé avec Adopte, qui
   pose le même au bas de sa fiche. Ne reste ici que ce qui tient à la page :
   le retrait qui les décolle du fil au-dessus. */
/* Sur les fils, le lien se décolle de la dernière ligne. Sous l'élu, c'est
   « .elu-tous » qui le place — il portait les deux, et se retrouvait trente-six
   pixels sous la carte, trop bas pour lui appartenir encore. */
.vivant .lien-sortie { margin-top: var(--space-4); }

/* ---------- questions fréquentes : le « + » calé à droite ---------- */
.faq summary {
  display: flex; align-items: baseline; gap: var(--space-3);
}
.faq summary::before {
  content: ""; flex: none; align-self: center;
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-2);
}
.faq summary::after {
  /* Le « + » se calait sur la ligne de base du texte, donc il descendait avec
     les questions sur deux lignes. Comme le point rouge, il tient le milieu. */
  content: "+"; flex: none; align-self: center; margin-left: auto;
  color: var(--color-accent); font-weight: 700; line-height: 1;
}
.faq details[open] summary::after { content: "–"; }

/* ---------- la finale ----------
   La cocarde tient la marge de gauche, la citation prend tout le reste :
   c'est la disposition du canevas, et elle laisse la phrase respirer sur sa
   largeur au lieu de la serrer sur une demi-page. */
.finale { padding-top: var(--space-8); }
.finale-duo { display: flex; align-items: center; gap: var(--space-8); }
.cocarde-finale { width: min(120px, 26vw); height: auto; display: block; flex: none; }
/* En colonne, la cocarde se retrouvait posée au-dessus de la phrase comme
   une vignette sans emploi : elle tient la marge de gauche, ou elle s'efface.
   La citation garde son filet, qui suffit à l'annoncer. */
@media (max-width: 640px) { .cocarde-finale { display: none; } }
.citation-finale {
  font-family: var(--font-body); font-weight: 400; font-style: italic;
  font-size: clamp(17px, 2.1vw, 21px); line-height: 1.5; letter-spacing: 0;
  border-left: var(--rule); padding-left: var(--space-6); margin: 0;
}
.citation-finale strong { font-style: normal; font-weight: 700; color: var(--color-accent-2); }

/* ---------- pied de page : trois cartouches côte à côte ---------- */
/* Trois cartouches d'égale largeur, resserrées : dans le canevas elles ne
   filent pas jusqu'aux bords, l'écart entre elles est franc, et le sous-titre
   se replie plutôt que de tirer la boîte. */
/* Le pied de page vit hors de .inner : il lui faut ses propres marges
   latérales, sinon les cartouches viennent buter contre les bords. Les mêmes
   20 px que le reste de la page. */
footer { padding-inline: 20px; }
/* EN RANGÉE CENTRÉE, ET NON EN GRILLE À TROIS COLONNES. La grille comptait
   ses colonnes d'avance : le jour où le troisième lien est parti, les deux
   restants ont gardé les colonnes une et deux et se sont retrouvés poussés à
   gauche, avec un vide à droite. Une rangée centrée ne compte rien — elle
   place ce qu'on lui donne, deux liens comme quatre.
   Les cartes s'étirent jusqu'à trois cent vingt pixels et pas au-delà : à deux
   dans une largeur prévue pour trois, elles s'étaleraient en bandeaux. Sous
   leur base de deux cent vingt, elles passent l'une sous l'autre toutes seules,
   sans point de rupture à entretenir. */
.footer-liens {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-3); padding: var(--space-8) 0 var(--space-6);
  max-width: 720px; margin: 0 auto;
}
.flien {
  flex: 1 1 220px; max-width: 320px;
  /* En rangée depuis que le sous-titre est parti : le dessin, puis le mot. */
  display: flex; align-items: center; justify-content: center;
  gap: 9px; text-align: center; text-decoration: none; color: var(--color-text);
  border: 1.5px solid var(--color-text); border-radius: var(--radius-md);
  padding: var(--space-3);
  /* le papier d un ton plus clair : dans le système, un panneau encadré est
     une carte, et une carte se pose sur --color-surface. Le fond transparent
     laissait voir la page et faisait disparaître la boîte. */
  background: var(--color-surface);
}
@media (hover: hover) and (pointer: fine) {
  .flien:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
}

.flien-titre {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; flex: none;
}
.flien-icone { display: block; flex: none; }
.flien-icone svg { width: 18px; height: 18px; display: block; }

/* ---------- l'élu du jour ---------- */
/* La vitrine des palmarès : un carrefour, et trois places qu'il a vraiment.
   Un billet, comme le guide les veut — filet épais, pas de boîte à ombre —,
   mais tenant sur un écran de téléphone : la photo à gauche, ce qu'on en dit
   à droite, et les trois rangs en dessous. */
/* Le filet qui ferme le titre. Les autres sections l'ont sans y penser : leur
   liste le porte sur sa première ligne. L'élu n'est qu'une fiche, il n'avait
   donc rien pour le poser. */
.elu h2 {
  margin-bottom: 0; padding-bottom: var(--space-5); border-bottom: var(--rule);
}
.elu-carte {
  display: grid; grid-template-columns: minmax(0, 116px) minmax(0, 1fr);
  gap: var(--space-4); align-items: start;
  margin-top: var(--space-5); padding: var(--space-4);
  /* Le filet du dessus tient déjà la structure : la fiche n'a pas à crier
     aussi fort, elle se contente du trait léger. */
  border: var(--rule-light); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text);
  text-decoration: none;
}
.elu-vue { display: block; }
.elu-vue[hidden] { display: none; }
/* LA PLACE EST PRISE AVANT L'IMAGE. Le carré et son papier grisé se dessinent
   avec le reste de la carte ; la vue du ciel s'y pose en fondu quand elle
   arrive — cent kilo-octets, quelques centaines de millisecondes sur un
   téléphone. Sans cette place réservée, la carte se dépliait sous les yeux au
   moment où l'image tombait, et la section paraissait arriver en retard alors
   qu'elle était là depuis le début. */
.elu-vue img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-md); background: var(--color-neutral-200);
}
/* PAS DE FONDU. Il avait sa place ici — l'image qui se pose en douceur sur son
   papier — mais il se paie d'un risque sans commune mesure avec son charme :
   une image qui part d'une opacité nulle et attend une transition pour
   paraître ne paraît jamais là où l'horloge des animations ne tourne pas. La
   boîte réservée suffit ; l'image s'y peint quand elle arrive. */
/* LA CARTE GARDE SA TAILLE AVANT D'ÊTRE REMPLIE. La section paraît maintenant
   avant de savoir ce qu'elle dira — c'est ce qui la fait arriver avec le reste
   de la page —, et sans ces trois hauteurs elle se serait dépliée sous les yeux
   au moment où le carrefour du jour se pose. Les valeurs sont dites en « em » :
   elles suivent le corps du texte, qui change avec la largeur de l'écran. */
.elu-dit { display: block; min-width: 0; }
.elu-nom { min-height: 1.1em; }
.elu-ou { min-height: 1.5em; }
.elu-rangs { min-height: 8.5em; }
.elu-nom {
  display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(19px, 3.6vw, 25px); line-height: 1.1; letter-spacing: -0.015em;
}
.elu-ou {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 4px; font-size: 14.5px; color: var(--sourdine);
}
.elu-type {
  font-family: var(--font-body); font-weight: 700; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-2);
  border: 1.5px solid var(--color-accent-2); border-radius: 999px; padding: 2px 8px;
}
/* Les trois places. Le rang en gros et en coquelicot — c'est ce qu'on vient
   lire ; le classement ensuite ; l'étendue en petit, parce qu'un 21e sur 170
   ne vaut pas un 21e sur soixante mille et qu'il faut pouvoir en juger. */
.elu-rangs { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-4); }
.elu-rang { display: flex; align-items: baseline; gap: 10px; }
.elu-rang b {
  flex: none; font-family: var(--font-heading); font-weight: 800;
  font-size: 21px; line-height: 1; color: var(--color-accent-2);
  font-variant-numeric: tabular-nums;
}
.elu-rang b sup { font-size: .55em; vertical-align: super; }
.elu-quoi { display: block; min-width: 0; font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.elu-quoi i {
  display: block; font-style: normal; font-weight: 400;
  font-size: 12.5px; color: var(--sourdine); margin-top: 2px;
}
.elu-tous { margin-top: var(--space-5); }

/* Sous 420 pixels, la photo passe au-dessus : deux colonnes ne laissaient plus
   au nom que sept caractères par ligne. */
@media (max-width: 420px) {
  .elu-carte { grid-template-columns: minmax(0, 1fr); }
  .elu-vue img { aspect-ratio: 16 / 9; }
}
@media (hover: hover) and (pointer: fine) {
  .elu-carte:hover { background: var(--color-accent-2-200); }
}