/* Le Grand Tour, appliqué aux pages rendues par pageHTML() — fiche et palmarès.
   Feuille de REMPLACEMENT, pas de surcharge : elle se substitue au bloc <style>
   en ligne quand ?gt est présent. Écrire des surcharges par-dessus une palette
   sombre aurait été une guerre de spécificité, et le rendu n'aurait rien prouvé.

   Les balises ne bougent pas d'un iota. Chaque classe du site est réexprimée
   dans l'idiome du système : filets à la place des boîtes, billets à la place
   des listes encadrées, affiche à la place des cadres d'image.
   Spécification : design/le-grand-tour.md */

:root {
  --color-bg: #f7efdd;
  --color-surface: #fdf8ec;
  --color-text: #26251f;
  --color-accent: #2b4a9e;   /* bleu de France */
  --color-accent-2: #d94f2b; /* coquelicot */
  --color-divider: color-mix(in srgb, #26251f 18%, transparent);

  --color-neutral-100: #faf5e8;
  --color-neutral-200: #efe7d3;
  --color-neutral-300: #ddd3ba;
  --color-accent-200: #d9e0f6;
  --color-accent-600: #24407f;
  /* Le 700 du système (design/le-grand-tour.md) : le bleu appuyé, celui d'un
     bouton qu'on a ouvert. Il manquait à cette feuille, et l'écrire sans le
     définir aurait rendu la règle invalide — donc le bouton transparent. */
  --color-accent-700: #1d3363;
  --color-accent-2-200: #f9dcd0;
  --color-accent-2-600: #b23e20;
  --color-accent-2-700: #8b3019;

  --font-heading: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px;

  --rule: 3px solid var(--color-text);
  --rule-light: 2.5px solid var(--color-text);
  --shadow-sm: 0 1px 3px color-mix(in srgb, #3e170c 12%, transparent);

  /* Valeur du système. Elle ne rend que 3,74:1 sur le papier, sous le seuil
     AA de 4,5 — voir la note de contraste dans design/le-grand-tour.md. */
  --sourdine: color-mix(in srgb, var(--color-text) 58%, transparent);
  /* Le système n'a pas de vert ; celui-ci est calé sur la clarté du bleu pour
     peser pareil dans la page. Il ne sert qu'à dire « c'est parti ». */
  --vert: #3c6b3f;
  --vert-pale: #e4eee0;
}

/* La gouttière de la barre de défilement est réservée en permanence. Sans ça,
   une barre qui se dessine PAR-DESSUS le contenu — celles de Windows 11, fines
   et flottantes — vient se poser sur le bord droit des tableaux, là où sont les
   valeurs alignées à droite. Réserver la place la met à côté du contenu au lieu
   de dessus, et la largeur ne saute plus quand une page devient assez longue
   pour défiler. */
html { scrollbar-gutter: stable; }

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

/* « hidden » doit gagner, toujours. La règle du navigateur — [hidden] en
   display:none — a la force d'une feuille d'agent utilisateur, c'est-à-dire
   moins que n'importe quelle règle d'auteur : une flexbox ou une grille
   déclarée ailleurs la bat sans bruit. Sur GiroGP, quatre éléments marqués
   cachés restaient donc à l'écran après l'étape rendue, dont le bouton de
   validation. On tranche ici, une fois pour toutes. */
[hidden] { display: none !important; }

body {
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Une seule dérogation au système : il pose le texte à 15 px, calibré pour des
   interfaces. La fiche est une page qu'on lit, pas qu'on parcourt. */
main { max-width: 760px; margin: 0 auto; padding: var(--space-4) 18px 72px; font-size: 16px; }
/* Un lien qui vise une ancre de la page l'amène tout en haut de la fenêtre —
   c'est-à-dire, depuis que la barre des jeux y est collée, DERRIÈRE elle. On
   lui garde sa hauteur, publiée par « portes.js ». */
:target { scroll-margin-top: calc(var(--portes-h, 0px) + 12px); }

h1, h2, h3 {
  font-family: var(--font-heading); font-weight: 800;
  line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance;
}
h1 { font-size: clamp(32px, 6vw, 46px); margin: var(--space-4) 0 var(--space-3); }
/* Le mot qui se signale dans un titre : le coquelicot du système, réservé à ce
   qui appelle. « Les Palmarès » n'en teinte que le nom — l'article reste à
   l'encre, comme le « GP » de GiroGP ou le « ronds-points » de la page carnet. */
.titre-coquelicot { color: var(--color-accent-2); }
h2 { font-size: clamp(24px, 3.6vw, 34px); margin: var(--space-8) 0 var(--space-3); }
/* Même respiration que le h2 : figé à 25 px, il le dépassait sur un écran
   étroit, où le h2 descend à 24 — mesuré sur « rond-point ou giratoire ». */
h3 { font-size: clamp(20px, 2.8vw, 25px); margin: var(--space-6) 0 var(--space-2); }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
/* LE SURVOL COLLE AU DOIGT. Sur écran tactile il se pose au toucher et ne
   part qu’au prochain appui ailleurs : la devise du premier écran restait
   bleu foncé, chevrons compris, une fois qu’on avait tapé dessus. Et cette
   règle-ci pèse 0-1-1, assez pour battre le « .bande » qui donne sa couleur
   à la phrase. Tout survol qui change un état visible va sous « hover ». */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--color-accent-600); }
}
img { display: block; max-width: 100%; }
figure { margin: 0; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: var(--space-1); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent-2) 30%, transparent); }

/* — fil d'ariane : la voix capitales espacées, sous un filet épais — */
.crumb {
  display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding-bottom: var(--space-3); border-bottom: var(--rule); margin-bottom: var(--space-2);
}
.crumb .maillon { white-space: nowrap; }
.crumb .maillon[hidden] { display: none; }
/* La barre oblique appartient au maillon qui suit : un échelon replié emporte
   la sienne, et il n'en reste jamais deux à la file. Elle reste à l'encre
   pleine : les liens sont bleus, et c'est elle qui les sépare — une séparation
   plus pâle que ce qu'elle sépare se lit mal. */
.crumb .maillon + .maillon::before {
  content: "/"; margin: 0 0.7em 0 0.55em; color: var(--color-text); letter-spacing: 0;
}
.crumb .ellipse { letter-spacing: 0; opacity: .55; }
/* Chaque échelon est un lien, et se donne la couleur des liens : le fil n'est
   pas un titre, c'est un chemin qu'on peut remonter. */
.crumb a { color: var(--color-accent); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .crumb a:hover { color: var(--color-accent-2); }
}

/* La flèche du premier échelon, celle du retour. Sans l'espacement des
   capitales, qui l'éloignerait du mot qu'elle accompagne. */
.crumb .fleche { letter-spacing: 0; margin-right: .2em; }
/* Le dernier maillon est celui d'où l'on vient : s'il ne tient toujours pas
   une fois le milieu replié, il se coupe plutôt que de pousser les autres. */
.crumb .maillon:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* — l'affiche : le cadre d'encre épais autour de toute image — */
/* LA BOÎTE EST LE BLOC, PAS LA FIGURE. Le cadre à trois filets était sur
   l'image ; le sélecteur, qui flottait dessus, s'en accommodait. Posé au-dessus
   d'elle, il se serait retrouvé sur le papier, devant une boîte à laquelle il
   n'appartient pas. On monte donc le cadre d'un cran, et les figures qu'il
   contient rendent le leur. */
.visuel-fiche {
  position: relative; margin: var(--space-6) 0;
  border: 3px solid var(--color-text); border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-neutral-200);
}
.visuel-fiche .photo-fig { border: none; border-radius: 0; }
.photo-fig {
  margin: 0; border: 3px solid var(--color-text); border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-neutral-200);
}
.photo-fig img { width: 100%; display: block; }
/* Le crédit se signe en petit : c'est une mention, pas une légende. */
.photo-fig figcaption {
  padding: 5px var(--space-3); font-size: 11.5px; color: var(--sourdine);
  border-top: 1px solid var(--color-divider); background: var(--color-surface); text-align: right;
}
.photo-fig figcaption a { color: var(--color-accent); }


/* — l'œuvre sans portrait : un encart de papier bordé de filets, pas une boîte — */
.sans-oeuvre {
  padding: var(--space-8) var(--space-6); text-align: center; font-style: italic;
  color: var(--sourdine); background: var(--color-surface); line-height: 1.6;
}
/* Soixante-deux pixels de retrait en tête laissaient passer le sélecteur, qui
   flottait alors sur l'image ; il est maintenant au-dessus, dans le flux, et
   ce vide n'attend plus personne. */
.visuel-fiche .sans-oeuvre { padding-top: var(--space-8); }

/* — le formulaire d'envoi, à la place de la photo — */
.photo-box { background: var(--color-surface); padding: var(--space-6); }
.photo-box[hidden] { display: none; }
.photo-box form { display: flex; flex-direction: column; gap: var(--space-3); }
.photo-box input[type=text], .photo-box input:not([type]) {
  width: 100%; min-height: 42px; padding: var(--space-2) 14px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent-2); background: #fff;
  border: var(--rule-light); border-radius: var(--radius-md);
}
.photo-box input::placeholder { color: var(--sourdine); opacity: 1; }
/* DEUX GESTES, DEUX LIVRÉES. Choisir l'image se fait en papier — la livrée
   de « Partager », en haut de la même fiche : on ouvre quelque chose, on ne
   s'engage à rien. L'envoi, lui, est coquelicot : c'est là qu'on donne. Le
   bleu plein tenait les deux premiers, et un aplat de cette taille annonçait
   un geste plus grave que « ouvrir un sélecteur de fichiers ».
   Les deux boutons de prise tiennent sur UNE ligne, y compris sur le plus
   étroit des téléphones : à 148 pixels de largeur minimale ils passaient à la
   ligne dès qu'ils étaient deux, et « prendre la photo » n'apparaît justement
   que là où l'écran est le plus étroit. On les laisse se partager la place. */
/* Les deux boutons de prise vivent dans « prise-photo.css », partagé par
   Adopte, la fiche et la page « photographier ». Ils y étaient en trois
   copies : bleu plein ici, papier et encre ailleurs, trois tailles de texte.
   Le bleu était le plus faux — dans le système il désigne ce qui appartient
   au visiteur, et ces deux-là n'appellent rien, ils ouvrent un sélecteur. */
.photo-box input[type=file].fichier-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; border: none;
  opacity: 0; pointer-events: none;
}
#pf-apercu {
  display: flex; gap: var(--space-3); align-items: center; background: #fff;
  border: var(--rule-light); border-radius: var(--radius-md); padding: var(--space-2);
}
#pf-apercu[hidden] { display: none; }
#pf-apercu img { width: 78px; height: 58px; object-fit: cover; border-radius: var(--radius-sm); }
#pf-apercu span { font-size: 13px; color: var(--sourdine); word-break: break-all; }
.photo-box .lic { font-size: 13px; color: var(--sourdine); line-height: 1.5; margin: 0; }
.photo-box .mini { font-size: 13px; color: var(--sourdine); margin: 0; }
/* Le geste qui engage prend toute la largeur du formulaire — c'est-à-dire
   toute celle de la boîte, moins son retrait. Il n'y a rien à mettre à côté. */
.photo-box button[type=submit] {
  align-self: stretch; cursor: pointer; font-family: var(--font-body);
  font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--color-accent-2);
  border: 2.5px solid var(--color-accent-2); border-radius: 999px; padding: 12px 22px;
}
@media (hover: hover) and (pointer: fine) {
  .photo-box button[type=submit]:hover { background: var(--color-accent-2-600); border-color: var(--color-accent-2-600); }
}

.photo-box button:disabled { opacity: 0.45; cursor: wait; }

/* — le tableau de données : filet épais sous l'en-tête, filets fins entre les
     rangées. Plus de cadre : la donnée se lit, elle ne se range pas en boîte. — */
.stats { margin: var(--space-6) 0; border-top: var(--rule); }
.stats table { border-collapse: collapse; width: 100%; }
.stats td { padding: 11px var(--space-2); border-bottom: 1px solid var(--color-divider); font-size: 15px; }
.stats td:first-child {
  color: var(--sourdine); width: 52%; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.stats td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }


/* — le sur-titre coquelicot, au-dessus du grand titre — */
.kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent-2); margin: 0 0 var(--space-2);
}
.chapeau { font-size: 17px; color: var(--sourdine); max-width: 56ch; margin-bottom: var(--space-8); }

/* — les palmarès, groupés par ce qu'ils mesurent — */
/* L'étiquette de groupe : la voix capitales espacées, en bleu, qui informe
   sans crier. Elle sépare, le filet du premier billet enchaîne. */
.palm-groupe {
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent);
  margin: var(--space-8) 0 var(--space-3);
}
/* Les rangées reprennent .billet du système au chiffre près. Je les avais
   approximées — 16 px de rembourrage au lieu de 12, et un alignement sur la
   ligne de base — ce qui posait le texte bas dans sa boîte et déséquilibrait
   les filets au-dessus et en dessous. Centrer verticalement remet la
   démarcation d'aplomb. */
.palmares-list {
  display: flex; flex-direction: column; margin: 0 0 var(--space-8);
  border-top: var(--rule); border-bottom: var(--rule);
}
.palm {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) 2px; border-top: 1px solid var(--color-divider);
  color: inherit; text-decoration: none;
}
.palm:first-child { border-top: none; }
@media (hover: hover) and (pointer: fine) {
  .palm:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
}

.palm:active { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.palm .titre {
  flex: 1; font-family: var(--font-heading); font-weight: 800; font-size: 19px;
  letter-spacing: -0.01em; color: var(--color-text);
}
.palm .critere { font-size: 13px; color: var(--sourdine); text-align: right; }
.palm .fleche {
  flex: none; font-family: var(--font-heading); font-weight: 800; font-size: 19px;
  color: var(--color-accent); transition: transform 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .palm:hover .fleche { transform: translateX(3px); }
}

@media (max-width: 560px) {
  .palm {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 2px var(--space-3);
  }
  .palm .titre { grid-column: 1; grid-row: 1; }
  .palm .critere { grid-column: 1; grid-row: 2; text-align: left; }
  .palm .fleche { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  /* En colonne, les thèmes s'enchaînent sans rien d'autre pour les séparer
     que ce blanc : il vaut la peine d'être un peu plus large qu'ailleurs. */
  .palm-groupe { margin-top: calc(var(--space-8) + var(--space-3)); }
}

/* — le classement : un tableau à colonnes. Le rang, le nom, la commune et la
     mesure se lisent en travers ; comparer deux valeurs ne demande plus d'aller
     les chercher au milieu d'une phrase. Filet épais sous l'en-tête, filets
     fins entre les rangées, chiffres tabulaires pour que les unités s'alignent. — */
.rank-boite { margin: var(--space-6) 0; overflow-x: auto; }
table.rank { width: 100%; border-collapse: collapse; font-size: 15px; }
table.rank th {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-text);
  text-align: left; padding: 0 var(--space-3) var(--space-2) 0; border-bottom: var(--rule);
  white-space: nowrap;
}
table.rank td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider); vertical-align: baseline;
}
table.rank tr:last-child td { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  table.rank tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
}

/* Carte ouverte, la rangée devient une commande : elle allume son carrefour au
   survol et l'amène au centre au clic. Le lien du nom garde le sien — c'est
   toujours lui qui mène à la fiche. */
body.carte-ouverte table.rank tbody tr[data-lat] { cursor: pointer; }
body.carte-ouverte table.rank tbody tr[data-lat] a { cursor: pointer; }
/* Un classement de territoires : la ligne cliquée dessine le sien sur la
   carte, et le reste marqué — sans quoi on ne sait plus ce qu'on regarde. */
body.carte-ouverte table.rank tbody tr[data-cle] { cursor: pointer; }
table.rank tbody tr.montre { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
table.rank tbody tr.montre td { font-weight: 700; }

table.rank .rang, table.rank th.rang {
  width: 3.5em; padding-right: var(--space-4); font-variant-numeric: tabular-nums;
  color: var(--sourdine);
}
/* le premier porte la couleur : c'est le seul rang qui se retient */
table.rank tr[data-rang="1"] .rang { color: var(--color-accent-2); font-weight: 700; }
table.rank tr[data-rang="1"] .val { font-weight: 700; }
table.rank .nom a { color: var(--color-text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  table.rank .nom a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
}

table.rank .ou { color: var(--sourdine); }
table.rank .ou small { font-size: inherit; }
/* Le territoire qui contient la ligne mène à sa page — une région sur le
   classement des départements, un département sur celui des communes. Il garde
   la couleur sourde de sa colonne : c'est un renseignement, pas un appel ; on
   le souligne au survol, quand la main est déjà dessus. */
table.rank .ou a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  table.rank .ou a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
}

table.rank .val {
  text-align: right; padding-right: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.rank th.val { text-align: right; padding-right: 0; }

/* Le trou du classement, en trois lignes : on descend depuis le vingtième,
   ou on remonte depuis la lanterne rouge, et le compte tient le milieu.
   Ses filets sont plus fins que celui de l'en-tête : ce dernier ouvre le
   tableau, celui-ci ne fait qu'y marquer une coupure. */
table.rank .saut td, table.rank .rien td {
  text-align: center; padding: var(--space-4) var(--space-3);
  border-top: var(--rule-light); border-bottom: var(--rule-light);
}
@media (hover: hover) and (pointer: fine) {
  table.rank .saut:hover, table.rank .rien:hover { background: none; }
}

/* « rien » et « saut » se ressemblent mais ne se confondent pas : le script
   retire le bandeau du trou quand il n'y a plus rien à charger, et emportait
   le message d'un classement vide avec lui. */
table.rank .rien td { color: var(--sourdine); font-style: italic; }
.saut-compte {
  display: block; margin: var(--space-2) 0; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sourdine);
}
/* Les deux façons de combler le trou. Sans soulignement, et avec la flèche
   des liens de sortie de l'accueil (« lien-sortie.css ») : c'est le même geste
   — on quitte ce qu'on lit pour aller voir plus loin —, et elle dit le sens
   mieux qu'un trait sous les mots. Celle du haut pointe vers la suite, celle
   du bas remonte, et elles se placent du côté où l'on va. */
.saut-lien {
  display: block; width: 100%; background: none; border: none; padding: var(--space-1) 0;
  cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent);
  text-decoration: none;
}
.saut-lien[data-sens="suite"]::after { content: " →"; }
.saut-lien[data-sens="avant"]::before { content: "← "; }
@media (hover: hover) and (pointer: fine) {
  .saut-lien:hover { color: var(--color-accent-600); }
}
.saut-lien[hidden] { display: none; }

@media (max-width: 560px) {
  table.rank { font-size: 14px; }
  table.rank .ou { display: none; }   /* la commune cède la place à la mesure */
  table.rank th:nth-child(3) { display: none; }
}

/* — appels à l'action : coquelicot plein pour le principal, contour d'encre
     pour le reste. Jamais les deux accents dans le même petit composant. — */
.cta {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--color-accent-2); color: #fff;
  border: 2.5px solid var(--color-accent-2); border-radius: 999px;
  padding: 11px 22px; margin: var(--space-4) 0;
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: var(--color-accent-2-600); border-color: var(--color-accent-2-600); color: #fff; }
}


/* — la ligne d'un carrefour sans adoptant, juste sous son portrait —
   Le geste vivait après le tableau des mesures, à deux écrans de la photo : on
   tombait amoureux en haut et on cherchait où le dire en bas. Il remonte, sur
   une seule ligne, et se fait petit : c'est une invitation, pas une sommation.
   Le texte prend la place, le bouton garde la sienne au bout. */
.orphelin {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
  margin: var(--space-4) 0 0; font-size: 15px; color: var(--sourdine);
}
.cta-petit {
  flex: 0 0 auto; margin: 0;
  font-size: 12px; padding: 8px 16px; border-width: 2px;
}
/* Sur un téléphone, la phrase entière et le bouton ne tiennent pas sur une
   ligne : l'invitation passait sur deux et se donnait des airs de sommation.
   On garde ce qu'elle a d'essentiel — il est orphelin — et le geste juste
   après. La suite reste sur les écrans qui ont la place de la lire. */
@media (max-width: 560px) {
  .orphelin-suite { display: none; }
}

/* Le nom du carrefour et le geste qui l'emporte : partager se prend en haut,
   à hauteur du titre, et non au pied d'une page qu'il faut dérouler jusqu'en
   bas. Le bouton s'aligne sur la PREMIÈRE ligne du nom, qui en fait souvent
   deux. */
.titre-fiche {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-3);
}
.titre-fiche h1 { margin: 0; flex: 1 1 auto; }
/* Le bouton de carte se range dans la même rangée que le titre, à la même
   hauteur que « Partager » : il regarde la page, pas l'écran, et sa place est
   auprès de ce qu'il montre. Sur un classement il y est seul, sur une fiche il
   suit le bouton de partage. Le calage sur la première ligne du titre est le
   même que pour lui — voir plus bas. */
.titre-fiche .carte-appel {
  margin-top: calc((clamp(32px, 6vw, 46px) * 1.05 - 42px) / 2);
  width: 42px; height: 42px;
}
.titre-fiche .carte-appel svg { width: 21px; height: 21px; }

.partage-haut {
  flex: 0 0 auto;
  /* Centré sur la PREMIÈRE LIGNE du titre, et non posé à sept pixels du haut :
     le titre va de 32 à 46 pixels selon la largeur de l'écran, et une marge
     fixe le laissait onze pixels trop bas sur un téléphone. La moitié de
     l'écart entre la hauteur de ligne (1,05 em) et le bouton (42 px) — négative
     quand le bouton est plus haut que la ligne, ce qui est le cas en petit. */
  margin-top: calc((clamp(32px, 6vw, 46px) * 1.05 - 42px) / 2);
  /* UN ROND, PARTOUT. La légende « Partager » doublait un dessin que tout le
     monde connaît, et prenait dans la rangée du titre une place qui revient au
     nom du carrefour. Le téléphone avait déjà ce traitement ; il devient la
     règle. */
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; line-height: 1;
  color: var(--color-text); background: var(--color-surface);
  border: var(--rule-light); border-radius: 999px;
  width: 42px; height: 42px; padding: 0;
}
.partage-haut svg { width: 17px; height: 17px; display: block; }
@media (hover: hover) and (pointer: fine) {
  .partage-haut:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
}

.partage-haut:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Le bouton qui vient de copier le dit lui-même : le rond du titre prend une
   coche, et les deux passent au coquelicot le temps qu'on le voie. */
.partage-haut.fait { color: var(--color-accent-2); border-color: var(--color-accent-2); }


/* — étiquettes — */
.badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
  border: 2px solid var(--color-text); color: var(--color-text); margin: 3px 5px 3px 0;
}

/* — encart d'information : un filet bleu en marge, pas un fond teinté — */
.communautaire {
  border-left: var(--rule); border-left-color: var(--color-accent);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  margin: var(--space-6) 0; font-size: 15px;
}

/* — la carte, devenue une vue parmi les autres : elle occupe la place d'une
     photo dans l'affiche, donc elle en prend les dimensions et laisse le cadre
     à la figure qui l'entoure — */
#carte-fiche {
  height: clamp(260px, 46vw, 420px); background: var(--color-neutral-200);
  position: relative;
  /* Sans cette isolation, les panneaux de Leaflet (tuiles, marqueurs,
     contrôles : 200 à 800) se compareraient au sélecteur de vue et
     passeraient devant lui. */
  isolation: isolate;
}


/* Le sélecteur de vues se repère sur l'affiche entière ; le bouton, lui, vit
   dans la carte, à l'intérieur du cadre d'encre de trois pixels. Sans ce
   rattrapage il tomberait trois pixels plus bas et plus à droite que son
   vis-à-vis : à l'écran, deux boutons d'une même boîte qui ne s'alignent pas. */
#carte-fiche .boite-plein { top: 9px; right: 9px; }

/* — les palmarès où figure ce carrefour : des gélules bleues à contour fin,
     chacune menant à son classement — */
.palmes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; }
/* Deux choses qui n'ont rien à voir se touchaient : « il est orphelin » parle
   de ce qu'on peut FAIRE, les gélules disent ce qu'il EST. Un filet quand les
   deux sont là — le sélecteur d'adjacence s'en charge, il n'y a rien à
   décider côté serveur. */
.orphelin + .palmes {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4); margin-top: var(--space-4);
}
.palme {
  display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent); border: 1.5px solid var(--color-accent);
  border-radius: 999px; padding: 5px 13px;
}
.palme b { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .palme:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); color: var(--color-accent); }
}


/* — LA MARQUE DU CONQUÉRANT : ce carrefour est passé dans votre carnet
     GiroQuest. C'était une gélule « Conquis » rangée avec les palmarès, où elle
     n'était pas à sa place : les palmarès classent un carrefour devant les
     autres, celle-ci ne parle que de vous. C'est désormais l'étoile de
     GiroQuest elle-même, posée après le nom comme une astérisque — le dessin
     du jeu dit d'où vient la marque mieux qu'un mot ne le ferait, et il ne
     prend plus une ligne à lui.

     Le dessin vient du sprite de l'en-tête : un seul exemplaire pour le site.
     La date de la prise se lit au survol. Vingt-deux pixels : la moitié des
     quarante-quatre de la barre du haut, comme demandé. — */
.marque-quete {
  width: 22px; height: 22px; vertical-align: baseline;
  margin-left: .28em; cursor: help;
}

/* — le pavé d'adoption, SOUS LA PHOTO, à la place qu'occupait la ligne de
     l'orphelin : c'est le même renseignement dans les deux cas — qui tient à ce
     carrefour, et ce qu'on peut y faire.

     SANS SES DEUX FILETS. Ils l'encadraient quand il fermait la page, deux
     écrans plus bas, seul au milieu du blanc : il fallait alors dire où il
     commençait. Collé sous la photo et suivi du tableau des mesures, il est
     déjà tenu de part et d'autre — et trois traits épais en quatre-vingts
     pixels font une grille, pas une fiche. — */
.bloc-adoption { padding: 0; margin: var(--space-4) 0 var(--space-6); }

/* — LA CASE DE L'ADOPTANT : ce qui se lit à gauche, ce qui se fait à droite.
     Les deux boutons se rangent l'un sur l'autre, calés à droite et alignés
     sur « Vous l'avez adopté ». Ils prennent la largeur du plus large des
     deux, pour qu'ils fassent une pile et non un escalier. La colonne de
     gauche a « min-width: 0 » : sans ça, un mot d'amour d'un seul tenant —
     une adresse, un mot-dièse — refuserait de se couper et pousserait les
     boutons hors de la page. — */
/* LE BOUTON SE CALE EN BAS, sur la dernière ligne du mot d’amour — ou sur
   « Vous l’avez adopté » quand il n’y a pas de mot. Aligné en haut, il
   flottait au-dessus d’un vide dès que le mot faisait trois lignes. */
.bloc-mien { display: flex; align-items: flex-end; gap: var(--space-4); }
.bloc-mien .bloc-dit { flex: 1 1 auto; min-width: 0; }
/* Sans mot d’amour, il ne reste qu’une ligne face au bouton : on les centre
   l’une sur l’autre plutôt que de caler douze pixels de texte sur le bas d’un
   bouton qui en fait trente-quatre. */
.bloc-mien.sans-mot { align-items: center; }
/* Le dernier paragraphe rend sa marge du bas : c’est sur SA dernière ligne
   que le bouton se cale, pas huit pixels dessous. Sans mot d’amour, c’est
   « Vous l’avez adopté » qui la porte. */
.bloc-mien .bloc-dit > :last-child { margin-bottom: 0; }
.bloc-mien .actions-fiche {
  flex: 0 0 auto; margin: 0;
  flex-direction: column; align-items: stretch; gap: 8px;
}
/* DEUX COLONNES SUR TÉLÉPHONE AUSSI. La case y redevenait une pile — le mot
   d'abord, le bouton dessous — pour rendre au mot d'amour la largeur entière.
   Mais un bouton seul posé sous une ligne de texte prend une hauteur pleine
   pour un geste rare, et la case cessait de se lire d'un coup d'œil. À 375
   pixels, il reste au mot cent soixante-dix-neuf pixels : quatre ou cinq mots
   par ligne, ce qu'accepte une citation de deux lignes. */
.bloc-adoption .qui { font-family: var(--font-heading); font-weight: 800; font-size: 25px; margin: 0; }
.bloc-adoption .mot { font-style: italic; color: var(--sourdine); margin: var(--space-2) 0 0; }
.actions-fiche { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.actions-fiche .cta { margin: 0; }
/* le second appel se creuse : deux aplats coquelicot côte à côte se
   disputeraient l'attention */
.cta-creux {
  background: transparent; color: var(--color-text); border-color: var(--color-text);
}
@media (hover: hover) and (pointer: fine) {
  .cta-creux:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text); border-color: var(--color-text); }
}


/* — voisinage et commune : des gélules d'encre, comme les billets mais en
     ligne — */
.voisinage { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
.voisin {
  display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none;
  color: var(--color-text); font-size: 14px;
  border: 1.5px solid var(--color-divider); border-radius: 999px; padding: 6px 14px;
}
.voisin b { color: var(--sourdine); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 400; }
@media (hover: hover) and (pointer: fine) {
  .voisin:hover { border-color: var(--color-text); color: var(--color-text); }
}


/* — outils de palmarès — */
/* Le champ du panneau est décrit dans la feuille des filtres, avec le panneau
   lui-même : Adopte porte le même. Cette règle-ci ne posait que sa hauteur et
   son papier, à l'identifiant, et l'emportait donc sur la règle partagée — le
   champ des palmarès restait sur fond crème quand celui d'Adopte passait au
   blanc. Ne reste que ce qui n'est pas dans la règle commune.
   (Le champ posé dans l'en-tête d'une colonne, lui, a ses propres règles plus
   bas : c'est un autre contexte, il ne passe pas par le panneau.) */
#palm-filtre { caret-color: var(--color-accent-2); }
#palm-filtre::placeholder { color: var(--sourdine); opacity: 1; }
#palm-filtre:focus-visible { border-color: var(--color-accent); }
/* Une seule ligne, quelle que soit la largeur : le bouton garde sa taille, la
   liste prend ce qui reste. Sur un téléphone de 375 pixels, les deux en
   faisaient 373 à eux seuls et passaient à la ligne. */
/* La rangée elle-même est décrite par « .fac-commandes », dans la feuille des
   filtres : Adopte porte la même. Ne reste ici que ce qui lui est propre — le
   sélecteur de classement, que la page des palmarès est seule à porter. */

/* Le sélecteur de classement, à côté du bouton de filtres : même hauteur, même
   gélule, même voix en capitales espacées. Le libellé n'est là que pour les
   lecteurs d'écran — à l'œil, la liste dit ce qu'elle fait. */
/* Le champ de recherche qui tient lieu de nom de colonne : il en garde la
   place et la discrétion — un filet fin, pas une gélule qui crierait plus fort
   que les en-têtes voisins. */
/* Le champ de recherche qui tient lieu de nom de colonne. Il faut viser
   « #palm-filtre » et non la seule classe : la règle générale des outils de
   palmarès passe par l'identifiant, et l'emporterait sinon — quinze pixels de
   texte et deux de bordure là où il en faut moins.

   En casse normale, contrairement aux en-têtes voisins : un champ de saisie n'a
   pas à crier, et « CHERCHER UNE COMMUNE » en capitales espacées demandait 258
   pixels pour une colonne qui en fait 112 sur un téléphone. */
.rank th .palm-cherche { display: block; }
.rank th #palm-filtre {
  width: 100%; min-width: 13.5em; max-width: 20em;
  min-height: 0; font: inherit;
  font-family: var(--font-body); font-weight: 500; font-size: 12.5px;
  letter-spacing: 0; text-transform: none;
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-text); border-radius: 999px;
  padding: 6px 11px; line-height: 1.2;
  /* Ramené sur le bord de la colonne : sans ce décalage, l'invite commence à
     douze pixels du bord alors que les noms en dessous commencent au bord, et
     le champ paraît glisser vers la droite — trop loin du « # », trop près de
     l'en-tête suivant. */
  margin: 0 0 0 -12px;
}
.rank th #palm-filtre::placeholder { color: var(--sourdine); opacity: 1; }
/* Le champ dit qu'il a la main par son propre trait, qui s'épaissit vers
   l'intérieur : un anneau bleu posé à deux pixels autour d'une gélule logée
   dans un en-tête de tableau faisait une seconde bordure, plus voyante que la
   première. « inset » garde la géométrie de la colonne intacte. */
.rank th #palm-filtre:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-text);
}

.palm-tri { flex: 1 1 auto; min-width: 0; }
.palm-tri select {
  width: 100%;
  font-family: var(--font-body); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
  color: var(--color-text); background: var(--color-surface);
  border: var(--rule-light); border-radius: 999px;
  padding: 9px 12px; line-height: 1.2;
  text-overflow: ellipsis;
}
@media (hover: hover) and (pointer: fine) {
  .palm-tri select:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
}

.palm-tri select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* Chacun garde sa taille, sauf « Filtrer » qui prend ce qui reste — sa règle
   à lui vit dans la feuille des filtres, et celle-ci l'emporterait. */
.palm-controles button:not(.fac-ouvrir) { flex: 0 0 auto; }
/* Deux boutons échappent à cette règle générale, et pour la même raison : ils
   ont déjà leur livrée, écrite ailleurs, et cette règle-ci — plus spécifique
   que la leur depuis qu'elle passe par une classe et non par un identifiant —
   la leur retirait sans rien dire.
   Le bouton de carte descend de la rangée du titre avec son disque coquelicot
   (carte.css) ; « Filtrer » vient de la feuille des filtres, qu'Adopte partage.
   Ne reste sous cette règle que le sélecteur de classement. Mieux vaut les
   exclure que les repeindre : une seule feuille décide de leur allure. */
.palm-controles button:not(.carte-appel):not(.fac-ouvrir) {
  cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text);
  background: transparent; border: var(--rule-light); border-radius: 999px; padding: 9px 18px;
}
@media (hover: hover) and (pointer: fine) {
  .palm-controles button:not(.carte-appel):not(.fac-ouvrir):hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
}


#palm-facettes[hidden] { display: none; }
/* Le panneau est décrit dans la feuille des filtres, sous « .fac-panneau » —
   Adopte porte le même. Ne reste ici que sa place dans la page. */
#palm-facettes { margin: var(--space-2) 0 var(--space-6); }

p.mini { font-size: 14px; color: var(--sourdine); }

footer {
  font-size: 12px; color: var(--sourdine); margin-top: var(--space-8);
  border-top: 1px solid var(--color-divider); padding-top: var(--space-3);
}

/* ---------- la page d'histoire ---------- */
/* Des vignettes que le texte enrobe, comme dans un livre. Elles passent
   pleine largeur sur un écran étroit : une image de 200 px flanquée de trois
   mots par ligne ne rend service à personne. */
.illu {
  margin: 0 0 var(--space-4); padding: 0;
  border: var(--rule-light); background: var(--color-surface);
}
.illu img { display: block; width: 100%; height: auto; }
.illu figcaption {
  padding: var(--space-2) var(--space-3);
  border-top: var(--rule-light);
  font-size: 13px; line-height: 1.4; color: var(--sourdine);
}
.illu figcaption small { font-size: 11.5px; }
.illu figcaption a { color: var(--color-accent); }
.illu-large { width: 100%; margin: var(--space-6) 0; }
@media (min-width: 700px) {
  .illu-droite { float: right; width: 220px; margin: 0 0 var(--space-4) var(--space-6); }
  /* un titre ne se glisse pas à côté d'une vignette : il ouvre une section */
  h2 { clear: both; }
}

/* L'écart entre la France et le reste du monde se voit mieux qu'il ne se lit.
   Barres proportionnelles, sans échelle tronquée : c'est la démesure qui est
   le sujet. */
.histo { margin: var(--space-6) 0; padding: 0; }
.histo-barres { display: flex; flex-direction: column; gap: var(--space-3); }
.histo-ligne { display: grid; grid-template-columns: 8.5em 1fr auto; gap: var(--space-3); align-items: center; }
.histo-nom {
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
}
.histo-piste { display: block; background: var(--color-neutral-200); height: 26px; }
.histo-barre { display: block; height: 100%; background: var(--color-accent); min-width: 3px; }
.histo-ligne.nous .histo-barre { background: var(--color-accent-2); }
.histo-val { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.histo-ligne.nous .histo-val { color: var(--color-accent-2); }
.histo-val small { font-weight: 400; color: var(--sourdine); }
.histo figcaption {
  margin-top: var(--space-3); font-size: 13px; line-height: 1.5; color: var(--sourdine);
}
@media (max-width: 560px) {
  .histo-ligne { grid-template-columns: 1fr auto; }
  .histo-nom { grid-column: 1 / -1; margin-bottom: -6px; }
}

@media (max-width: 560px) {
  /* le rang n'a jamais quatre chiffres en tête de classement */
  table.rank .rang, table.rank th.rang { width: 2.2em; padding-right: var(--space-2); }
  table.rank td, table.rank th { padding-right: var(--space-2); }
}

/* Le bouton-gélule qui emmène ailleurs : « Adopter le mien » sous les
   dernières adoptions, « Voir toutes les photos », « Suivantes » sur la page
   des clichés. Il a vécu dans la feuille de l'accueil tant qu'il n'y servait
   qu'à elle ; l'accueil garde ses variantes (la flèche des cartes, le bleu
   des fils), la forme est ici. */
a.entrer {
  display: inline-block; text-decoration: none; font-family: var(--font-body);
  font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text); border: var(--rule-light); border-radius: 999px;
  padding: 11px 22px; margin-top: var(--space-4);
}
a.entrer::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  a.entrer:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
}


/* Le geste d'une page qui donne envie de le faire : ajouter une photo depuis
   la page des photos. Il se pose sous le chapeau, avant la grille — assez haut
   pour être vu sans descendre, assez bas pour ne pas passer devant le titre. */
.ajouter-photo { margin: var(--space-5) 0 var(--space-6); }
.ajouter-photo a.entrer { margin-top: 0; }

/* ---------- Les photos récentes ----------
   Une grille de clichés, chacun menant à sa fiche. La photo tient le premier
   rôle : le texte se range dessous, en petit, et ne lui dispute rien. */
.flashes {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: var(--space-5) 0;
}
.flash {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: var(--color-text);
}
.flash img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border: var(--rule-light); border-radius: 14px;
  background: var(--color-neutral-200); margin-bottom: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .flash:hover img { border-color: var(--color-accent-2); }
}

.flash-nom {
  font-family: var(--font-heading); font-weight: 700; font-size: 17px; line-height: 1.2;
}
.flash-ou { font-size: 14px; color: var(--sourdine); }
.flash-qui { font-size: 13px; color: var(--sourdine); font-style: italic; }

/* Précédentes, où l'on en est, suivantes. Les extrémités gardent leur place
   même absentes, sans quoi le compteur sauterait d'un bord à l'autre. */
.flash-pages {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--space-3); margin-top: var(--space-5);
}
.flash-pages a { margin-top: 0; }
.flash-pages a[rel="next"] { justify-self: end; }
.flash-compte { font-size: 14px; color: var(--sourdine); font-variant-numeric: tabular-nums; }

/* ---------- Proposer un nom ----------
   Sous le titre d'un carrefour anonyme, et seulement là : un bouton, rien de
   plus. Coquelicot, comme tout ce qui appelle à faire quelque chose sur ce
   site. Le champ, lui, vit dans une boîte de dialogue. */
.nom-propose { margin: calc(var(--space-2) * -1) 0 var(--space-4); }
.btn-nom {
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  letter-spacing: .07em; text-transform: uppercase; cursor: pointer;
  color: #fff; background: var(--color-accent-2);
  border: 2.5px solid var(--color-accent-2); border-radius: 999px; padding: 10px 20px;
}
@media (hover: hover) and (pointer: fine) {
  .btn-nom:hover { background: var(--color-accent-2-600); border-color: var(--color-accent-2-600); }
}

.btn-nom[disabled] { opacity: .55; cursor: wait; }
.btn-plat {
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  letter-spacing: .07em; text-transform: uppercase; cursor: pointer;
  color: var(--color-text); background: none;
  border: var(--rule-light); border-radius: 999px; padding: 10px 20px;
}
@media (hover: hover) and (pointer: fine) {
  .btn-plat:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
}

.nom-mot { font-size: 14.5px; color: var(--sourdine); }
.nom-mot .signe-cocarde { height: 1em; width: 1em; vertical-align: -.13em; display: inline-block; }

/* La boîte : du papier posé au milieu, un cadre d'encre, et le reste du monde
   assombri derrière. Le navigateur se charge du reste — la mise au point du
   clavier, la touche d'échappement, l'inertie de la page dessous. */
.boite-nom {
  /* « * { margin: 0 } » en tête de cette feuille écrase le « margin: auto »
     que le navigateur donne à <dialog> pour le centrer : la boîte se collait
     en haut à gauche. On le lui rend. */
  margin: auto;
  border: var(--rule); border-radius: var(--radius-lg); padding: 0;
  background: var(--color-surface); color: var(--color-text);
  width: min(30rem, calc(100vw - 32px)); box-shadow: 0 18px 50px rgba(38, 37, 31, .28);
}
.boite-nom::backdrop { background: color-mix(in srgb, #26251f 55%, transparent); }
.boite-nom form { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.boite-nom h2 { font-size: 25px; margin: 0; }
.boite-nom .mini { font-size: 14px; color: var(--sourdine); margin: 0; line-height: 1.45; }
.boite-nom input {
  font: inherit; font-size: 16px; width: 100%;
  padding: 11px 15px; border: var(--rule-light); border-radius: var(--radius-md);
  background: #fff; color: var(--color-text); caret-color: var(--color-accent-2);
}
.boite-nom input::placeholder { color: var(--sourdine); opacity: 1; }
.nom-erreur { font-size: 14px; color: var(--color-accent-2-600); margin: 0; }
.boite-pied { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-1); }

/* ---------- le fil des adoptions ----------
   Une rangée par adoption : qui, quoi, où, et le mot laissé. L'accueil en
   montre trois, la page de tous les adoptés les montre tous — le même dessin
   aux deux endroits. */
.fil { display: flex; flex-direction: column; list-style: none; padding: 0; }
.fil > * {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px;
  padding: var(--space-3) 2px; border-top: 1px solid var(--color-divider); font-size: 15px;
}
.fil > *:first-child { border-top: var(--rule); }
.fil > *:last-child { border-bottom: var(--rule); }
.fil .qui { font-weight: 700; color: var(--color-accent-2); }
.fil .quoi { font-weight: 700; }
.fil .ou { color: var(--sourdine); }
/* le nom du carrefour reste à l'encre : la ligne entière est déjà cliquable
   par son lien, un bleu de plus la hacherait */
.fil a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .fil a:hover .quoi { text-decoration: underline; text-underline-offset: 3px; }
}

.fil .mot {
  flex-basis: 100%; font-style: italic; color: var(--sourdine); font-size: 14px; margin-top: 2px;
}

/* ---------- 404 : sortie de route ----------
   Une affiche centrée : le dessin, le titre en gros, une phrase, un bouton.
   Le dessin est la cocarde de l'accueil, ses couleurs dans le SVG, rien
   d'autre : une page d'erreur qui en fait trop est une page d'erreur qu'on
   lit deux fois. */
.sortie-de-route { text-align: center; padding: clamp(24px, 6vw, 56px) 0 40px; }
.sortie-de-route .dessin { width: min(180px, 46vw); height: auto; display: block; margin: 0 auto 22px; }
.sortie-de-route h1 {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -.02em; line-height: .98;
  font-size: clamp(34px, 7vw, 60px); margin: 10px 0 14px;
}
.sortie-de-route .mot { font-size: 18px; line-height: 1.45; margin: 0 auto; }
/* Sur une ligne, ou coupée après la virgule : chaque moitié est insécable. */
.sortie-de-route .mot .tenue { white-space: nowrap; }
.sortie-de-route .retour { margin: 28px 0 0; }
.sortie-de-route .retour .btn-nom { display: inline-block; text-decoration: none; padding: 13px 24px; }

/* ---------- le nom d'un joueur mène à sa page ----------
   Dans le fil, le nom garde son coquelicot (« .fil a » le remettait à l'encre) ;
   sous le titre d'une fiche, il reste dans la couleur de l'étiquette. */
.fil a.qui { color: var(--color-accent-2); }
.kicker a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }