/* ═══════════════════════════════════════════════════════════════════════
   ARIBOX — la charte.

   Reprise telle quelle du jeu : les jetons de couleur, les trois familles de
   caractères et le principe restent identiques. Ce qui change, c'est ce
   qu'ils habillent.

   Le mode sombre est le mode principal : la matière est l'archive, la salle
   sans fenêtre, la photographie argentique. Le mode clair existe pour ceux
   qui lisent au soleil et pour l'impression, et il est traité comme du
   papier, pas comme un thème « light » de tableau de bord.

   Une règle tient toute la mise en page : **l'histoire domine, les chiffres
   accompagnent**. Les statistiques sont présentes, denses, tabulaires — et
   jamais au centre. Ce qui est au centre, c'est le nom, le visage, la suite
   des combats, et ce que le combattant a vécu entre deux.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── les polices, servies par nous ───────────────────────────────────────
   Pas un octet vers fonts.gstatic.com : un appel à un tiers américain
   transmettrait l'adresse IP de chaque visiteur avant tout consentement, ce
   que plusieurs décisions européennes ont jugé contraire au RGPD. Les
   fichiers viennent de Google Fonts sous licence SIL OFL, sous-ensembles
   latin et latin-ext seulement. Les plages Unicode sont conservées : le
   navigateur ne télécharge que ce que la page emploie. */

@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(polices/archivo-narrow-400-normal-latin.woff2) format('woff2');
  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: 'Archivo Narrow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(polices/archivo-narrow-400-normal-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(polices/archivo-narrow-500-normal-latin.woff2) format('woff2');
  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: 'Archivo Narrow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(polices/archivo-narrow-500-normal-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(polices/archivo-narrow-600-normal-latin.woff2) format('woff2');
  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: 'Archivo Narrow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(polices/archivo-narrow-600-normal-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(polices/archivo-narrow-700-normal-latin.woff2) format('woff2');
  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: 'Archivo Narrow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(polices/archivo-narrow-700-normal-latin-ext.woff2) format('woff2');
  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; }

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(polices/ibm-plex-sans-400-normal-latin.woff2) format('woff2');
  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: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(polices/ibm-plex-sans-400-normal-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family: 'IBM Plex Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(polices/ibm-plex-sans-400-italique-latin.woff2) format('woff2');
  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: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(polices/ibm-plex-sans-500-normal-latin.woff2) format('woff2');
  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: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(polices/ibm-plex-sans-600-normal-latin.woff2) format('woff2');
  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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(polices/ibm-plex-mono-400-normal-latin.woff2) format('woff2');
  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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(polices/ibm-plex-mono-400-normal-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(polices/ibm-plex-mono-500-normal-latin.woff2) format('woff2');
  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: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(polices/ibm-plex-mono-600-normal-latin.woff2) format('woff2');
  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; }

/* ── les jetons ───────────────────────────────────────────────────────── */
:root {
  --fond: #161918;
  --fond-profond: #101312;
  --surface: #1C201E;
  --surface-haute: #242826;
  --bordure: #333734;
  --bordure-forte: #4A4F4B;
  --texte: #E7E2D7;
  --texte-faible: #9AA09A;
  --texte-tres-faible: #8E928D;
  --accent: #B58A46;          /* laiton */
  --accent-vif: #C89D57;
  --accent-fond: #2A2318;
  --negatif: #CD7065;
  --negatif-fond: #2C1C19;
  --positif: #7FA187;
  --positif-fond: #1A211C;
  --coin: #5F92AF;
  --coin-clair: #78A8C2;
  --coin-fond: #172329;
  --voile: rgba(10,12,11,.72);

  --display: "Archivo Narrow", "Arial Narrow", sans-serif;
  --corps: "IBM Plex Sans", system-ui, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --large: 1180px;
  --texte-large: 68ch;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fond: #F2EFE7; --fond-profond: #E8E4DA;
    --surface: #EDE9DF; --surface-haute: #F8F6F0;
    --bordure: #D3D0C7; --bordure-forte: #B9B5A9;
    --texte: #171918; --texte-faible: #5C605D; --texte-tres-faible: #60635E;
    --accent: #7E5E27; --accent-vif: #6B4F20; --accent-fond: #EFE6D4;
    --negatif: #A63D32; --negatif-fond: #F3E2DE;
    --positif: #3F5645; --positif-fond: #E2E9E3;
    --coin: #31566E; --coin-clair: #31566E; --coin-fond: #E2E8ED;
    --voile: rgba(23,25,24,.35);
  }
}
:root[data-theme="light"] {
  --fond: #F2EFE7; --fond-profond: #E8E4DA;
  --surface: #EDE9DF; --surface-haute: #F8F6F0;
  --bordure: #D3D0C7; --bordure-forte: #B9B5A9;
  --texte: #171918; --texte-faible: #5C605D; --texte-tres-faible: #60635E;
  --accent: #7E5E27; --accent-vif: #6B4F20; --accent-fond: #EFE6D4;
  --negatif: #A63D32; --negatif-fond: #F3E2DE;
  --positif: #3F5645; --positif-fond: #E2E9E3;
  --coin: #31566E; --coin-clair: #31566E; --coin-fond: #E2E8ED;
  --voile: rgba(23,25,24,.35);
}

/* ── socle ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100%;
  background: var(--fond); color: var(--texte);
  font: 400 16px/1.6 var(--corps);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0;
  line-height: 1.1; letter-spacing: .01em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--accent-vif); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* `clip-path` plutôt qu'un déport à moins dix mille pixels : le déport
   fonctionne, mais il laisse un élément hors cadre que les outils de mesure
   comptent comme un débordement, et il gêne certains lecteurs d'écran qui
   suivent la position dans la page. Ici l'élément reste où il est et
   n'occupe rien. */
.saut { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.saut:focus { width: auto; height: auto; overflow: visible; clip-path: none;
  left: .6rem; top: .6rem; z-index: 50; background: var(--accent);
  color: #17140E; padding: .5rem .9rem; font-family: var(--display); }

/* ── mot-symbole : le O est un ring vu de dessus ──────────────────────── */
.mot-symbole {
  display: inline-flex; align-items: center; gap: .04em;
  font-family: var(--display); font-weight: 700; letter-spacing: .05em;
  line-height: 1; color: var(--texte); text-transform: uppercase;
}
.mot-symbole svg { width: .78em; height: .78em; display: block; }
.mot-symbole svg [data-corde] { stroke: currentColor; }
.mot-symbole svg [data-coin] { fill: var(--accent); }

/* ── en-tête ──────────────────────────────────────────────────────────── */
.entete { position: sticky; top: 0; z-index: 20;
  background: var(--fond-profond); border-bottom: 1px solid var(--bordure); }
.entete-int { max-width: var(--large); margin: 0 auto; padding: .6rem 1.15rem;
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.marque { display: flex; flex-direction: column; gap: .12rem;
  text-decoration: none; font-size: 1.22rem; flex: none; }
.marque-baseline { font-family: var(--data); font-size: .56rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--texte-tres-faible); }
/* `flex-wrap` parce qu'à trois cent vingt pixels — un iPhone SE, un
   Galaxy A pliés, tout ce qui traîne encore — les quatre sections tenaient
   sur trois cent quarante-neuf. Le conteneur, lui, savait passer à la ligne ;
   la barre de navigation, non, et la page entière défilait de côté. */
.entete-nav { display: flex; flex-wrap: wrap; column-gap: 1.1rem; row-gap: .1rem;
  margin-left: auto; }
.entete-nav a { font-family: var(--display); font-weight: 500; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--texte-faible);
  text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; }
.entete-nav a:hover { color: var(--texte); border-bottom-color: var(--accent); }

/* ── la barre de recherche ───────────────────────────────────────────── */
.rech-barre { position: relative; flex: 1 1 18rem; min-width: 0; display: flex; }
.rech-barre input {
  flex: 1; min-width: 0; padding: .52rem .8rem; font: inherit; font-size: .95rem;
  color: var(--texte); background: var(--fond); border: 1px solid var(--bordure);
  border-right: 0; border-radius: 0;
}
.rech-barre input::placeholder { color: var(--texte-tres-faible); }
.rech-barre input:focus { outline: none; border-color: var(--accent); }
.rech-barre button { padding: 0 .8rem; border: 1px solid var(--bordure);
  border-left: 0; color: var(--texte-faible); background: var(--surface); }
.rech-barre input:focus + button { border-color: var(--accent); }
.rech-barre button:hover { color: var(--texte); }
.rech-barre svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6;
  fill: none; display: block; }
.rech-apercu {
  position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 30;
  background: var(--fond-profond); border: 1px solid var(--bordure-forte);
  max-height: 70vh; overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.rech-apercu a { display: flex; gap: .7rem; align-items: center;
  padding: .5rem .7rem; text-decoration: none; border-bottom: 1px solid var(--bordure); }
.rech-apercu a:last-child { border-bottom: 0; }
.rech-apercu a:hover, .rech-apercu a[aria-selected="true"] { background: var(--surface-haute); }
.rech-apercu .ap-nom { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.rech-apercu .ap-sous { font-family: var(--data); font-size: .7rem; color: var(--texte-faible); }
.rech-apercu .ap-record { margin-left: auto; font-family: var(--data); font-size: .8rem;
  font-variant-numeric: tabular-nums; color: var(--texte-faible); }
.rech-apercu .ap-vide { padding: .7rem; font-size: .85rem; color: var(--texte-faible); }

/* ── fil d'ariane ─────────────────────────────────────────────────────── */
.fil { max-width: var(--large); margin: 0 auto; padding: .7rem 1.15rem 0; }
.fil ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0;
  font-family: var(--data); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--texte-tres-faible); }
.fil li + li::before { content: "/"; margin-right: .4rem; color: var(--bordure-forte); }
.fil a { color: var(--texte-faible); text-decoration: none; }
.fil a:hover { color: var(--accent); }

/* ── ossature des pages ───────────────────────────────────────────────── */
main { max-width: var(--large); margin: 0 auto; padding: 1.6rem 1.15rem 4rem; display: block; }
.bloc { margin-top: 2.6rem; }
.bloc-titre, .sources h2, .profil-colonne h2 {
  font-family: var(--data); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--texte-faible);
  padding-bottom: .5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--bordure);
}
.aide { color: var(--texte-faible); font-size: .85rem; line-height: 1.5; }
.vide { color: var(--texte-faible); font-style: italic; padding: 1rem 0; }
.texte-long { max-width: var(--texte-large); font-size: 1.02rem; line-height: 1.72; }
.texte-long p + p { margin-top: .9rem; }

/* ── boutons ──────────────────────────────────────────────────────────── */
.laiton, .secondaire {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.3rem; border: 1px solid var(--bordure-forte);
  font-family: var(--display); font-weight: 600; font-size: .88rem;
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
  transition: background .14s, border-color .14s, color .14s;
}
.laiton { background: var(--accent); border-color: var(--accent); color: #17140E; }
.laiton:hover { background: var(--accent-vif); border-color: var(--accent-vif); }
.secondaire { background: transparent; color: var(--texte-faible); }
.secondaire:hover { border-color: var(--texte-faible); color: var(--texte); }

/* ═══ ACCUEIL ══════════════════════════════════════════════════════════ */
.une {
  --une-haut: clamp(2rem, 6vw, 4.4rem);
  --une-cote: clamp(1.2rem, 5vw, 3.6rem);
  border: 1px solid var(--bordure); background: var(--fond-profond);
  padding: var(--une-haut) var(--une-cote);
  position: relative; overflow: hidden;
}
/* Le fond, quand il n'y a pas de photographie : quatre cordes de ring,
   tracées, adossées au bord droit.

   Elles étaient d'abord posées sur toute la largeur, et traversaient le
   titre et le champ de recherche : à faible contraste, une ligne qui coupe
   un mot ne se lit pas comme une texture mais comme un filet égaré. Elles
   sont désormais tenues à droite, où il n'y a pas de texte, et s'effacent
   avant d'atteindre la colonne de lecture.

   Elles restent le visage par défaut de l'accueil. Une photographie ne
   s'affiche ici que déclarée, créditée et sous licence vérifiée — à défaut,
   ces cordes, qui n'appartiennent à personne. */
.une::before {
  content: ""; position: absolute; inset: 0; left: 55%; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 62px,
      var(--bordure-forte) 62px 64px);
  opacity: .28;
  mask-image: linear-gradient(to right, transparent, #000 45%);
}
@media (max-width: 46rem) { .une::before { display: none; } }
.une-illustree::before { display: none; }
.une > * { position: relative; }

/* ── l'accueil illustré ──────────────────────────────────────────────── */
/* Deux colonnes : le texte à gauche, la photographie qui déborde à droite
   jusqu'aux trois bords du bloc et s'efface vers la colonne de lecture.

   Le texte ne passe jamais sur l'image. C'est une décision de lisibilité
   avant d'être un parti pris : le contraste d'un titre posé sur une
   photographie dépend de la photographie, donc il ne se garantit pas. Ici
   chaque mot reste sur `--fond-profond`, dont les rapports sont mesurés par
   tests/charte.test.mjs, quelle que soit l'image du jour. */
/* La figure porte la taille, l'image la remplit — et jamais l'inverse.
   Une image en position normale impose sa proportion au bloc ; quand elle ne
   se charge pas (Commons injoignable, réseau d'entreprise qui filtre), elle
   impose celle de ses attributs `width`/`height`, l'accueil enfle de six
   cents pixels et le texte alternatif déborde en travers du titre. Posée en
   absolu dans un cadre qui a sa propre hauteur, elle ne peut plus rien
   déformer : si elle manque, il reste un panneau sombre, et c'est tout. */
.une-image { position: relative; line-height: 0; overflow: hidden;
  background: var(--fond-profond); }
.une-image img { position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 22%; filter: grayscale(.22) contrast(1.04);
  /* Le texte alternatif n'est pas affiché quand l'image manque : à cette
     taille, il s'étale en travers du bloc et ressemble à un débris. Il reste
     dans le document, donc lu par les lecteurs d'écran, et la légende
     au-dessous nomme de toute façon ce qu'on aurait dû voir. */
  font-size: 0; }
/* La légende : une étiquette de musée, opaque, et non un texte posé sur
   l'image — sur un fond qu'on ne connaît pas, un crédit à onze pixels
   disparaît, et un crédit qui disparaît ne remplit plus la licence. */
.une-image figcaption { position: absolute; right: 0; bottom: 0; max-width: 100%;
  padding: .4rem .7rem; background: var(--fond-profond);
  border-top: 1px solid var(--bordure); border-left: 1px solid var(--bordure);
  font-family: var(--data); font-size: .66rem; line-height: 1.45;
  letter-spacing: .04em; color: var(--texte-tres-faible); }
.une-image figcaption b { color: var(--texte-faible); font-weight: 500; }
.une-image figcaption a { color: var(--texte-tres-faible); }
/* Le portrait d'une fiche est cliquable : la une mène à la carrière qu'elle
   montre. Le lien occupe tout le cadre — l'image est la cible, pas un mot
   perdu dessous. */
.une-image-fiche > a { display: block; position: absolute; inset: 0; line-height: 0; }
.une-image-fiche > a:focus-visible { outline: 3px solid var(--accent-vif); outline-offset: -3px; }

@media (min-width: 52rem) {
  .une-illustree { display: grid; align-items: stretch;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    column-gap: clamp(1.4rem, 3vw, 2.6rem); }
  .une-illustree .une-texte { align-self: center; }
  /* Le débord : l'image mange la marge du bloc en haut, à droite et en bas,
     et seulement là. À gauche, elle s'arrête au masque. */
  .une-illustree .une-image {
    margin: calc(-1 * var(--une-haut)) calc(-1 * var(--une-cote))
            calc(-1 * var(--une-haut)) 0;
    mask-image: linear-gradient(to right, transparent, #000 26%);
    min-height: 25rem;
  }
}

/* En deçà, la photographie passe en bandeau plein cadre, au-dessus du titre.
   C'est le seul endroit du site où l'ordre d'affichage diffère de l'ordre du
   document : le titre reste la première chose que le document dit, et la
   photographie la première chose que l'écran montre. Sur un téléphone, une
   image reléguée sous les chiffres n'est pas vue du tout.

   Ce que ça coûte se mesure : le seul élément atteignable au clavier dans la
   figure est le lien de licence de la légende, qui vient donc après les
   boutons de l'accueil dans l'ordre de tabulation. Pour un crédit, c'est la
   bonne place. Rien d'autre ici ne porte de sens séquentiel. */
@media (max-width: 51.99rem) {
  .une-illustree { display: flex; flex-direction: column; }
  /* Ici la légende est dans le flux, sous l'image : le cadre ne peut donc
     pas être celui qui rogne, et c'est l'image qui reprend sa hauteur. Elle
     la porte en dur — une hauteur explicite tient même quand l'image ne se
     charge pas, là où une proportion la ferait enfler. */
  .une-illustree .une-image {
    order: -1; overflow: visible; background: none;
    margin: calc(-1 * var(--une-haut)) calc(-1 * var(--une-cote)) 1.9rem;
  }
  .une-illustree .une-image img { position: static;
    height: clamp(13rem, 44vw, 20rem); background: var(--fond-profond); }
  .une-image-fiche > a { position: static; }
  /* La légende quitte l'image et passe dessous, dans le flux : sur 390 px de
     large, une étiquette posée sur la photographie en mange le tiers — et
     posée en dehors du flux, elle recouvrait le titre. */
  .une-illustree .une-image figcaption { position: static;
    padding: .5rem var(--une-cote) 0; border: 0; background: none;
    line-height: 1.5; }
}
.une h1 { font-size: clamp(2.6rem, 8vw, 5.2rem); font-weight: 700;
  text-transform: uppercase; line-height: .9; letter-spacing: .005em; }
.une-phrase { margin-top: .9rem; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem); color: var(--accent); letter-spacing: .01em; }
.une-sous { margin-top: 1rem; max-width: 46ch; color: var(--texte-faible); font-size: 1.05rem; }
.une-rech { margin-top: 2rem; display: flex; max-width: 34rem; }
.une-rech input { flex: 1; min-width: 0; padding: .95rem 1rem; font: inherit; font-size: 1.05rem;
  color: var(--texte); background: var(--fond); border: 1px solid var(--bordure-forte); border-right: 0; }
.une-rech input:focus { outline: none; border-color: var(--accent); }
.une-rech button { padding: 0 1.3rem; background: var(--accent); color: #17140E;
  border: 1px solid var(--accent); font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.une-rech button:hover { background: var(--accent-vif); }
.une-liens { margin-top: 1.2rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.une-chiffres { margin-top: 2.2rem; display: flex; gap: 2rem; flex-wrap: wrap;
  font-family: var(--data); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--texte-tres-faible); }
.une-chiffres b { display: block; font-size: 1.5rem; letter-spacing: 0;
  color: var(--texte); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── grille de combattants ───────────────────────────────────────────── */
/* Les filets sont portés par les cartes, pas par la grille.
   La grille les posait sur un fond de la couleur des bordures, avec un
   écart d'un pixel — même rendu, à un détail près : quand la dernière
   rangée est incomplète, les cases vides laissent une plaque grise large
   comme deux cartes. Avec neuf combattants et cinq colonnes, c'est le cas
   sur la page d'accueil. Ici chaque carte trace son filet de droite et du
   bas, la grille ceux du haut et de la gauche, et une case qui n'existe pas
   ne dessine rien. */
/* Chaque carte porte son cadre entier, et mord d'un pixel sur sa voisine :
   les filets se superposent au lieu de doubler, et une rangée incomplète ne
   laisse rien pendre.
   La grille traçait auparavant ses propres filets du haut et de la gauche.
   Avec quatre résultats de recherche pour six colonnes, le filet du haut
   traversait deux cases vides et s'arrêtait dans le noir — une ligne qui
   promet une suite qui n'existe pas. */
.grille-fighters { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); }
.vignette { display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--bordure); margin: 0 -1px -1px 0;
  background: var(--surface); transition: background .14s; }
/* Au survol, la carte passe devant pour que son cadre soit entier. */
.vignette:hover { position: relative; z-index: 1; }
.vignette:hover { background: var(--surface-haute); }
/* Le carré, et non le portrait en 4/5.
   Un annuaire de dix-neuf mille profils dont la plupart n'ont pas encore de
   photographie alignait des cadres de trois cent soixante-dix pixels de haut
   et presque vides : cinq profils par écran, dont quatre cadres gris. Au
   carré et un peu plus serrée, la grille en montre douze, et c'est le nom
   qu'on vient lire. */
.vignette-photo { aspect-ratio: 1 / 1; background: var(--fond-profond);
  overflow: hidden; line-height: 0; position: relative; }
.vignette-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  filter: grayscale(1) contrast(1.06) brightness(.94); transition: filter .2s; }
/* Une photographie qui ne charge pas ne doit pas écrire son nom en travers
   de la grille. Les portraits sont servis par Wikimedia Commons : un réseau
   d'entreprise qui le filtre, un fichier retiré là-bas, et chaque case
   affichait une icône brisée suivie du nom du combattant, débordant sur la
   rangée du dessus. Le texte reste dans le document, donc lu par les
   lecteurs d'écran ; il ne s'affiche plus. La case redevient un cadre
   sombre, ce qu'elle est. */
.vignette-photo img, .profil-photo img, .coin-photo img { font-size: 0; color: transparent; }
.vignette:hover .vignette-photo img { filter: grayscale(.55) contrast(1.08) brightness(1); }
/* Sans photographie : les initiales dans le gris de l'archive. Jamais une
   silhouette générique achetée, jamais le visage de quelqu'un d'autre. */
.vignette-vide { width: 100%; height: 100%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 2.2rem;
  color: var(--bordure-forte); letter-spacing: .05em; }
.vignette-corps { padding: .75rem .85rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.vignette-nom { font-family: var(--display); font-weight: 700; font-size: 1.12rem;
  text-transform: uppercase; line-height: 1.05; }
.vignette-surnom { font-family: var(--corps); font-style: italic; font-size: .8rem;
  color: var(--accent); }
.vignette-sous { font-family: var(--data); font-size: .7rem; color: var(--texte-tres-faible);
  text-transform: uppercase; letter-spacing: .08em; }
/* Le record est poussé en bas de la carte plutôt que collé au texte : sur
   une rangée où un seul combattant porte un surnom, les records se
   décalaient d'une ligne et la grille perdait son aplomb. */
.vignette-record { font-family: var(--data); font-weight: 600; font-size: .92rem;
  font-variant-numeric: tabular-nums; color: var(--texte-faible);
  margin-top: auto; padding-top: .35rem; }
/* L'état du dossier, quand le palmarès manque : c'est une phrase, pas un
   score. Elle perd la graisse et la chasse fixe des chiffres du record, et
   passe d'un ton — sans quoi « 69 combats documentés » se lirait, du coin
   de l'œil, comme un palmarès de la même autorité. */
.vignette-inventaire { font-weight: 400; font-size: .76rem;
  letter-spacing: .015em; color: var(--texte-tres-faible); }
.vignette-corps { flex: 1; }

/* ═══ PROFIL ══════════════════════════════════════════════════════════ */
.profil-tete { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  align-items: start; }
/* Sur téléphone, la colonne du portrait prend toute la largeur, et un
   portrait en 4/5 y occupe presque cinq cents pixels de haut — soit un écran
   entier avant d'atteindre le nom. On le plafonne : c'est une illustration,
   pas l'objet de la page. */
@media (max-width: 40rem) {
  .profil-tete { grid-template-columns: 1fr; }
  .profil-photo { max-width: 190px; }
}
.profil-photo { background: var(--fond-profond); border: 1px solid var(--bordure);
  aspect-ratio: 4 / 5; overflow: hidden; line-height: 0; }
/* Sans photographie, le cadre ne réserve pas quatre cents pixels de vide.
   Douze mille des dix-neuf mille fiches sont des esquisses — des adversaires
   cités, sans portrait : sur chacune, un rectangle gris poussait le nom, le
   palmarès et la mention éditoriale vers le bas de l'écran. Les initiales
   restent, en carré, comme une marque d'archive ; ce qui compte remonte. */
.profil-photo:has(.vignette-vide) { aspect-ratio: 1 / 1; max-width: 132px; }
.profil-photo:has(.vignette-vide) .vignette-vide { font-size: 1.8rem; }
.profil-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  filter: grayscale(1) contrast(1.05); }
.profil-credit { font-family: var(--data); font-size: .62rem; color: var(--texte-tres-faible);
  margin-top: .35rem; line-height: 1.35; }
.profil-eyebrow { font-family: var(--data); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--texte-faible); display: flex; gap: .55rem;
  flex-wrap: wrap; align-items: center; }
/* Sans séparateur, la ligne « boxe anglaise the rumble in the jungle 30
   octobre 1974 » se lit comme une seule phrase absurde. Le point médian
   est posé par le CSS et non par le HTML : il est décoratif, et il ne doit
   pas être lu à voix haute par un lecteur d'écran. */
.profil-eyebrow > * + *::before { content: "·"; margin-right: .55rem;
  color: var(--bordure-forte); }
.profil-eyebrow a { color: var(--accent); text-decoration: none; }
.profil-eyebrow a:hover { text-decoration: underline; }
h1.profil-nom { font-size: clamp(2.1rem, 6vw, 3.6rem); font-weight: 700;
  text-transform: uppercase; line-height: .94; margin-top: .4rem; }
.profil-surnom { font-family: var(--corps); font-style: italic; font-size: 1.25rem;
  color: var(--accent); margin-top: .35rem; }
.profil-resume { margin-top: .9rem; max-width: 54ch; color: var(--texte-faible);
  font-size: 1.02rem; line-height: 1.6; }

/* Le record : présent, dense, et jamais au centre. Il se lit d'un coup
   d'œil puis laisse la place à la carrière. */
.record { display: flex; gap: 0; margin-top: 1.3rem; border: 1px solid var(--bordure-forte);
  width: fit-content; max-width: 100%; flex-wrap: wrap; }
.record > div { padding: .55rem 1.1rem; border-right: 1px solid var(--bordure);
  display: flex; flex-direction: column; min-width: 4.5rem; }
.record > div:last-child { border-right: 0; }
.record dt, .record .r-label { font-family: var(--data); font-size: .6rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--texte-tres-faible); }
.record .r-val { font-family: var(--data); font-weight: 600; font-size: 1.55rem;
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.record .v .r-val { color: var(--positif); }
.record .d .r-val { color: var(--negatif); }
.record .avant .r-val { color: var(--accent); }
.record-note { font-family: var(--data); font-size: .68rem; color: var(--texte-tres-faible);
  margin-top: .5rem; }

/* La fiche signalétique : le tableau des faits. Monospace, aligné, terne —
   il doit être consultable et non séduisant. */
.fiche { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: .1rem 1.2rem; font-family: var(--data); font-size: .85rem; }
.fiche dt { color: var(--texte-tres-faible); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; padding-top: .35rem; }
.fiche dd { margin: 0; padding-top: .28rem; }
.fiche a { color: var(--accent); text-decoration: none; }
.fiche a:hover { text-decoration: underline; }

.profil-corps { display: grid; gap: 2.4rem; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  margin-top: 2.6rem; align-items: start; }
@media (max-width: 62rem) { .profil-corps { grid-template-columns: 1fr; } }
.profil-colonne { position: sticky; top: 4.6rem; display: flex; flex-direction: column; gap: 2rem; }
@media (max-width: 62rem) { .profil-colonne { position: static; } }

/* ── bandeau éditorial / officiel ─────────────────────────────────────── */
.origine { margin-top: 1.8rem; padding: .85rem 1rem;
  border-left: 3px solid var(--texte-tres-faible); background: var(--surface);
  font-size: .88rem; color: var(--texte-faible); display: flex;
  flex-direction: column; gap: .35rem; }
.origine-etat { font-family: var(--data); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--texte);
  display: flex; align-items: center; gap: .45rem; }
.origine.editoriale { border-left-color: var(--accent); background: var(--accent-fond); }
.origine.revendiquee { border-left-color: var(--coin); background: var(--coin-fond); }
.origine.officielle { border-left-color: var(--positif); background: var(--positif-fond); }
.origine .sceau { width: 15px; height: 15px; fill: var(--positif); }
.origine-actions { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .25rem; }
.origine-actions a { font-family: var(--data); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--texte-faible); text-decoration: none;
  border-bottom: 1px solid var(--bordure-forte); padding-bottom: 1px; }
.origine-actions a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.origine-actions .revendiquer { color: var(--texte); }

/* ── partage ──────────────────────────────────────────────────────────── */
.partage { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: 1.4rem; }
.partage-mot { font-family: var(--data); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--texte-tres-faible); margin-right: .2rem; }
.partage a, .partage button { display: inline-flex; align-items: center; gap: .45rem;
  padding: .48rem .9rem; border: 1px solid var(--bordure-forte);
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .09em; text-decoration: none;
  color: var(--texte-faible); }
.partage a:hover, .partage button:hover { color: var(--texte); border-color: var(--texte-faible); }
/* WhatsApp est le premier bouton, et il est le seul coloré : c'est par là
   que circule un lien de sport de combat. */
.partage .partage-wa { background: var(--accent); border-color: var(--accent);
  color: #17140E; }
.partage .partage-wa:hover { background: var(--accent-vif); border-color: var(--accent-vif);
  color: #17140E; }
.partage svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linejoin: round; }

/* ═══ LE PALMARÈS ═════════════════════════════════════════════════════ */
/* Une ligne par combat, lisible comme un registre : l'issue en marge, la
   date, l'adversaire en grand — parce que c'est lui qu'on va vouloir
   cliquer —, puis la méthode et le lieu. */
.palmares { border: 1px solid var(--bordure); }
/* Le repère d'année, collé en haut pendant qu'on descend.
   Harry Greb a 299 combats : sa page fait vingt-trois mille pixels, et une
   liste plate n'y accroche rien. Savoir dans quelle année de sa vie on se
   trouve vaut mieux que savoir à quelle ligne on en est. Le décalage de
   4,6 rem est celui de l'en-tête, le même que `.profil-colonne`. */
.pal-annee { position: sticky; top: 4.6rem; z-index: 5;
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  margin: 2.2rem 0 0; padding: .5rem .8rem;
  background: var(--fond-profond); border: 1px solid var(--bordure);
  border-bottom-width: 0; }
.pal-annee + .palmares { border-top: 0; }
.pal-annee-n { font-family: var(--display); font-weight: 700; font-size: 1.32rem;
  letter-spacing: .02em; color: var(--texte); font-variant-numeric: tabular-nums; }
.pal-annee-compte, .pal-annee-bilan { font-family: var(--data); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texte-tres-faible); }
.pal-annee-bilan { margin-left: auto; }
/* Une ligne, un combat, une seule rangée.
   La ville occupait un deuxième étage sous le nom : chaque combat prenait
   cent six pixels, et les deux cent quatre-vingt-dix-neuf de Harry Greb
   faisaient une page de vingt-trois mille. En colonne, la ville tient à
   côté, la ligne descend à soixante pixels, et l'œil suit quatre repères
   alignés d'un bout à l'autre — issue, mois, nom, méthode — au lieu de
   zigzaguer. En deçà de 62 rem, la ville repasse en dessous : à cette
   largeur, cinq colonnes ne tiennent plus sans écraser le nom. */
.palmares-ligne {
  display: grid; align-items: baseline; gap: .15rem 1rem;
  grid-template-columns: 2.1rem 5.2rem minmax(0, 1fr) minmax(0, 8.5rem) minmax(0, 9rem);
  padding: .55rem .8rem; border-bottom: 1px solid var(--bordure);
  text-decoration: none; background: var(--surface); transition: background .12s;
}
@media (max-width: 62rem) {
  .palmares-ligne { grid-template-columns: 2.1rem 5.2rem minmax(0, 1fr) minmax(0, 8.5rem); }
  .pal-contexte { grid-column: 3 / -1; }
}
.palmares-ligne:last-child { border-bottom: 0; }
.palmares-ligne:hover { background: var(--surface-haute); }
.issue { display: grid; place-items: center; width: 1.85rem; height: 1.85rem;
  align-self: center;
  font-family: var(--data); font-weight: 600; font-size: .82rem;
  border: 1px solid currentColor; }
.issue.v { color: var(--positif); }
.issue.d { color: var(--negatif); }
.issue.n { color: var(--texte-faible); }
.issue.nc, .issue\.\? { color: var(--texte-tres-faible); }
.pal-date { font-family: var(--data); font-size: .76rem; color: var(--texte-tres-faible);
  font-variant-numeric: tabular-nums; }
.pal-adv { font-family: var(--display); font-weight: 600; font-size: 1.08rem;
  min-width: 0; overflow-wrap: break-word; }
.pal-adv .pal-pays { color: var(--texte-tres-faible); font-weight: 400; font-size: .85em; }
.pal-contexte { font-family: var(--data); font-size: .7rem; color: var(--texte-tres-faible);
  grid-column: 5; text-align: right; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pal-methode { font-family: var(--data); font-size: .78rem; color: var(--texte-faible);
  text-align: right; }
.pal-methode b { font-weight: 600; color: var(--texte); }
.pal-titre-ligne { grid-column: 1 / -1; font-family: var(--data); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
/* Sur un téléphone, chaque combat prenait quatre étages : le mois seul sur
   une ligne, le nom sur une autre, la ville sur une troisième, la méthode
   sur une quatrième. Vingt-cinq combats de 1920 tenaient sur deux écrans et
   demi, et on ne voyait plus la forme d'une année.
   Deux lignes suffisent : le nom et le résultat en haut, parce que c'est ce
   qu'on cherche ; le quand et le où en dessous, en petit, parce que c'est ce
   qu'on lit ensuite. L'issue tient la marge sur les deux. */
@media (max-width: 46rem) {
  .palmares-ligne {
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
    gap: .1rem .7rem; padding: .6rem .8rem;
  }
  .issue { grid-row: 1 / 3; align-self: center; }
  .pal-adv { grid-column: 2; grid-row: 1; font-size: 1.02rem; }
  .pal-methode { grid-column: 3; grid-row: 1; text-align: right; }
  .pal-date { grid-column: 2; grid-row: 2; font-size: .7rem; }
  .pal-contexte { grid-column: 3; grid-row: 2; text-align: right; }
  .pal-titre-ligne { grid-column: 2 / -1; }
}

/* ═══ LA TIMELINE ═════════════════════════════════════════════════════ */
/* Le cœur du profil. Un trait vertical, des jalons, et du texte qui
   raconte. La densité est volontairement plus basse que celle du palmarès :
   c'est la partie qui se lit, pas celle qui se consulte. */
.timeline { position: relative; padding-left: 1.9rem; list-style: none; margin: 0; }
.timeline::before { content: ""; position: absolute; left: .42rem; top: .4rem; bottom: .4rem;
  width: 1px; background: var(--bordure); }
.tl-entree { position: relative; padding: 0 0 1.9rem; }
.tl-entree:last-child { padding-bottom: 0; }
.tl-entree::before { content: ""; position: absolute; left: -1.62rem; top: .42rem;
  width: 9px; height: 9px; background: var(--fond); border: 1px solid var(--bordure-forte); }
.tl-entree[data-poids="3"]::before { background: var(--accent); border-color: var(--accent);
  width: 11px; height: 11px; left: -1.68rem; }
.tl-entree[data-genre="defaite"]::before { border-color: var(--negatif); }
.tl-entree[data-genre="retraite"]::before, .tl-entree[data-genre="deces"]::before {
  background: var(--texte-tres-faible); border-color: var(--texte-tres-faible); }
.tl-date { font-family: var(--data); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--texte-tres-faible); }
.tl-titre { font-family: var(--display); font-weight: 600; font-size: 1.22rem;
  margin-top: .15rem; line-height: 1.2; }
.tl-entree[data-poids="3"] .tl-titre { font-size: 1.42rem; }
.tl-recit { margin-top: .4rem; max-width: 60ch; color: var(--texte-faible); line-height: 1.65; }
.tl-liens { margin-top: .5rem; display: flex; gap: .9rem; flex-wrap: wrap;
  font-family: var(--data); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.tl-liens a { color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent; }
.tl-liens a:hover { border-bottom-color: var(--accent); }

/* ═══ COMBAT ══════════════════════════════════════════════════════════ */
/* Le face-à-face. Deux coins, deux couleurs, et le verdict entre les deux. */
.affiche { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: start;
  border: 1px solid var(--bordure-forte); background: var(--fond-profond); padding: 1.6rem 1.2rem; }
@media (max-width: 40rem) { .affiche { grid-template-columns: 1fr; text-align: left; } }
.coin { display: flex; flex-direction: column; gap: .4rem; min-width: 0; text-decoration: none; }
.coin.b { align-items: flex-end; text-align: right; }
@media (max-width: 40rem) { .coin.b { align-items: flex-start; text-align: left; } }
.coin-marque { font-family: var(--data); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .16em; }
.coin.a .coin-marque { color: var(--negatif); }
.coin.b .coin-marque { color: var(--coin-clair); }
.coin-photo { width: 92px; aspect-ratio: 4/5; overflow: hidden; background: var(--surface);
  border: 1px solid var(--bordure); line-height: 0; }
.coin-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  filter: grayscale(1) contrast(1.06); }
.coin-nom { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 3.4vw, 2rem);
  text-transform: uppercase; line-height: 1; }
.coin:hover .coin-nom { color: var(--accent); }
.coin-sous { font-family: var(--data); font-size: .74rem; color: var(--texte-faible); }
.coin-gagnant { font-family: var(--data); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--positif); }
.verdict { text-align: center; display: flex; flex-direction: column; gap: .3rem;
  padding: 2.4rem .6rem 0; max-width: 20rem; }
@media (max-width: 40rem) { .verdict { padding-top: 0; max-width: none; text-align: left; } }
.verdict-vs { font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--texte-tres-faible); letter-spacing: .18em; }
.verdict-methode { font-family: var(--data); font-weight: 600; font-size: 1.05rem;
  color: var(--accent); }
.verdict-detail { font-family: var(--data); font-size: .72rem; color: var(--texte-faible); }

.cartes-juges { border: 1px solid var(--bordure); font-family: var(--data); font-size: .85rem; }
.cartes-juges div { display: grid; grid-template-columns: minmax(0,1fr) 4rem 4rem;
  gap: .8rem; padding: .45rem .8rem; border-bottom: 1px solid var(--bordure); }
.cartes-juges div:last-child { border-bottom: 0; }
.cartes-juges .entete-juges { color: var(--texte-tres-faible); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .12em; background: var(--surface-haute); }
.cartes-juges b { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ═══ LISTES ══════════════════════════════════════════════════════════ */
.liste-cartes { border: 1px solid var(--bordure); }
/* Quatre colonnes, dans le même ordre que le palmarès d'un combattant :
   quand, qui, comment, où. Deux listes qui montrent la même chose ne
   devraient pas se lire de deux façons différentes.
   La ville passait sous les noms, ce qui doublait chaque ligne ; et la
   méthode, poussée au bord droit par une colonne élastique, se retrouvait à
   mille pixels des noms qu'elle qualifiait. */
.carte-combat { display: grid; gap: .15rem .9rem; align-items: baseline;
  grid-template-columns: 6.8rem minmax(0, 1fr) minmax(0, 11rem) minmax(0, 7rem);
  padding: .6rem .85rem; border-bottom: 1px solid var(--bordure);
  text-decoration: none; background: var(--surface); }
.carte-combat:last-child { border-bottom: 0; }
.carte-combat:hover { background: var(--surface-haute); }
.carte-combat .cc-date { font-family: var(--data); font-size: .74rem;
  color: var(--texte-tres-faible); font-variant-numeric: tabular-nums; }
.carte-combat .cc-noms { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.carte-combat .cc-noms .vs { color: var(--texte-tres-faible); font-weight: 400;
  padding: 0 .3rem; }
.carte-combat .cc-gagne { color: var(--texte); }
.carte-combat .cc-perd { color: var(--texte-faible); }
.carte-combat .cc-sous { font-family: var(--data); font-size: .7rem; color: var(--texte-tres-faible);
  grid-column: 3; grid-row: 1; text-align: right; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-combat .cc-methode { font-family: var(--data); font-size: .76rem;
  color: var(--texte-faible); text-align: right; grid-column: 4; grid-row: 1; }
/* Sur téléphone, deux lignes : qui et comment en haut, quand et où dessous —
   la même forme que les lignes de palmarès, pour la même raison. */
@media (max-width: 46rem) {
  .carte-combat { grid-template-columns: minmax(0, 1fr) auto; }
  .carte-combat .cc-noms { grid-column: 1; grid-row: 1; }
  .carte-combat .cc-methode { grid-column: 2; grid-row: 1; }
  .carte-combat .cc-date { grid-column: 1; grid-row: 2; }
  .carte-combat .cc-sous { grid-column: 2; grid-row: 2; }
}

.filtres { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.filtres a { font-family: var(--data); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; padding: .32rem .7rem; border: 1px solid var(--bordure);
  color: var(--texte-faible); text-decoration: none; }
.filtres a:hover { border-color: var(--texte-faible); color: var(--texte); }
.filtres a[aria-current] { background: var(--accent); border-color: var(--accent); color: #17140E; }

.pagination { display: flex; gap: .8rem; align-items: center; justify-content: center;
  margin-top: 2rem; font-family: var(--data); font-size: .78rem; color: var(--texte-faible); }
.pagination a { padding: .45rem 1rem; border: 1px solid var(--bordure);
  text-decoration: none; color: var(--texte-faible); }
.pagination a:hover { border-color: var(--accent); color: var(--accent); }

.liste-simple { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bordure); }
.liste-simple li { border-bottom: 1px solid var(--bordure); background: var(--surface); }
.liste-simple li:last-child { border-bottom: 0; }
.liste-simple a { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap;
  padding: .62rem .85rem; text-decoration: none; }
.liste-simple a:hover { background: var(--surface-haute); }
.liste-simple .ls-nom { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.liste-simple .ls-sous { font-family: var(--data); font-size: .72rem; color: var(--texte-tres-faible); }
.liste-simple .ls-compte { margin-left: auto; font-family: var(--data); font-size: .75rem;
  color: var(--texte-faible); font-variant-numeric: tabular-nums; }

/* ── l'encadrement : le coin ─────────────────────────────────────────── */
.coin-liste { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: .55rem; }
.coin-liste li { display: flex; flex-direction: column; gap: .1rem;
  padding-bottom: .55rem; border-bottom: 1px solid var(--bordure); }
.coin-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.coin-role { font-family: var(--data); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--texte-tres-faible); }
.coin-liste a { font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  text-decoration: none; }
.coin-liste a:hover { color: var(--accent); }
.coin-dates { font-family: var(--data); font-size: .72rem; color: var(--texte-faible); }

/* ── sources ──────────────────────────────────────────────────────────── */
.sources { margin-top: 2.6rem; }
.liste-sources { list-style: none; margin: 0; padding: 0; counter-reset: src;
  display: flex; flex-direction: column; gap: .7rem; }
.liste-sources li { counter-increment: src; position: relative; padding-left: 2rem;
  font-size: .88rem; line-height: 1.5; }
.liste-sources li::before { content: counter(src); position: absolute; left: 0; top: .1rem;
  font-family: var(--data); font-size: .7rem; color: var(--texte-tres-faible);
  border: 1px solid var(--bordure); width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center; }
.src-champ { display: inline-block; font-family: var(--data); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--accent);
  border: 1px solid var(--accent); padding: 0 .3rem; margin-right: .4rem; }
.src-titre a { color: var(--texte); text-decoration: none; border-bottom: 1px solid var(--bordure-forte); }
.src-titre a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.src-detail { display: block; font-family: var(--data); font-size: .72rem;
  color: var(--texte-tres-faible); margin-top: .12rem; }
.src-editeur { color: var(--texte-faible); }

/* ── formulaires ──────────────────────────────────────────────────────── */
.formulaire { max-width: 40rem; display: flex; flex-direction: column; gap: 1.1rem;
  margin-top: 1.6rem; }
.champ { display: flex; flex-direction: column; gap: .3rem; }
.champ label { font-family: var(--data); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--texte-faible); }
.champ input, .champ select, .champ textarea {
  padding: .6rem .75rem; font: inherit; font-size: .96rem; color: var(--texte);
  background: var(--fond-profond); border: 1px solid var(--bordure); border-radius: 0; }
.champ textarea { min-height: 7rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--accent); }
.champ .aide { font-size: .78rem; }
.champ.requis label::after { content: " *"; color: var(--accent); }
.message { padding: .8rem 1rem; border-left: 3px solid var(--accent);
  background: var(--accent-fond); font-size: .92rem; }
.message.ok { border-left-color: var(--positif); background: var(--positif-fond); }
.message.erreur { border-left-color: var(--negatif); background: var(--negatif-fond); }

/* L'en-tête des écrans internes : un liseré de laiton pour qu'on sache
   d'un coup d'œil qu'on n'est plus sur le site public. */
.entete.depouillee { border-bottom: 2px solid var(--accent); }
.entete.depouillee .marque { cursor: default; }
.entete-retour { margin-left: auto; font-family: var(--data); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--texte-faible);
  text-decoration: none; }
.entete-retour:hover { color: var(--accent); }

/* ── modération ───────────────────────────────────────────────────────
   L'espace interne emprunte la charte du site plutôt que d'inventer un
   thème d'administration : ce qu'on y regarde, ce sont les mêmes fiches, et
   passer d'un dossier à la page publique ne doit pas être un dépaysement.
   Ce qui le distingue est un liseré, et le fait que les dossiers à traiter
   soient les seuls à le porter en laiton. */
.dossier-mod {
  border: 1px solid var(--bordure); border-left: 3px solid var(--bordure-forte);
  background: var(--surface); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem;
}
.dossier-mod.a-traiter { border-left-color: var(--accent); background: var(--surface-haute); }
.dossier-mod header { margin-bottom: .9rem; }
.dossier-mod h3 { font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  text-transform: uppercase; line-height: 1.1; }
.dossier-mod h3 a { text-decoration: none; }
.dossier-mod h3 a:hover { color: var(--accent); }
.mod-etat { font-family: var(--data); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--texte-tres-faible); margin-bottom: .25rem; }
.dossier-mod.a-traiter .mod-etat { color: var(--accent); }
.mod-sous { font-family: var(--data); font-size: .74rem; color: var(--texte-faible);
  text-transform: none; letter-spacing: 0; font-weight: 400; }
.dossier-mod .fiche { margin-bottom: 1rem; }
.dossier-mod .fiche dd { overflow-wrap: anywhere; }
.mod-actions { display: flex; flex-direction: column; gap: .7rem;
  border-top: 1px solid var(--bordure); padding-top: .9rem; }
.mod-actions .champ { max-width: 42rem; }
.mod-actions .message { font-size: .86rem; }
.rang-boutons { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin: 0; }
.rang-boutons button { align-self: flex-start; }
/* Le bouton qui retire un statut officiel ne doit pas ressembler aux autres. */
.danger {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.3rem; border: 1px solid var(--negatif);
  background: var(--negatif-fond); color: var(--negatif);
  font-family: var(--display); font-weight: 600; font-size: .88rem;
  text-transform: uppercase; letter-spacing: .1em;
}
.danger:hover { background: var(--negatif); color: var(--fond-profond); }

/* ── résultats de recherche ──────────────────────────────────────────── */
.rech-titre { font-family: var(--display); font-weight: 700; font-size: 2rem;
  text-transform: uppercase; }
.rech-compte { font-family: var(--data); font-size: .76rem; color: var(--texte-faible);
  margin-top: .3rem; }
.rech-suggestion { margin-top: .6rem; font-size: .95rem; color: var(--texte-faible); }
.rech-suggestion a { color: var(--accent); }

/* ── pied ─────────────────────────────────────────────────────────────── */
.pied { border-top: 1px solid var(--bordure); background: var(--fond-profond);
  margin-top: 4rem; }
.pied-int { max-width: var(--large); margin: 0 auto; padding: 2.6rem 1.15rem 1.6rem;
  display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 52rem) { .pied-int { grid-template-columns: 1fr 1fr; } }
.pied-marque { font-size: 1.15rem; }
.pied-phrase { font-family: var(--display); font-weight: 500; color: var(--accent);
  margin-top: .3rem; }
.pied-note { margin-top: .7rem; font-size: .82rem; color: var(--texte-tres-faible);
  max-width: 40ch; line-height: 1.55; }
.pied nav { display: flex; flex-direction: column; gap: .35rem; }
.pied nav h2 { font-family: var(--data); font-size: .66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--texte-tres-faible);
  margin-bottom: .3rem; }
/* Vingt-quatre pixels de haut : ce sont des liens en liste, pas des liens
   dans une phrase, et l'exception d'usage ne les couvre pas. Ils en faisaient
   vingt-trois — assez pour rater la cible une fois sur cinq, au pouce. */
.pied nav a { font-size: .88rem; color: var(--texte-faible); text-decoration: none;
  min-height: 24px; display: flex; align-items: center; }
.pied nav a:hover { color: var(--accent); }
.pied-bas { max-width: var(--large); margin: 0 auto; padding: 0 1.15rem 2.2rem;
  font-family: var(--data); font-size: .68rem; color: var(--texte-tres-faible);
  border-top: 1px solid var(--bordure); padding-top: 1rem; }
.pied-bas a { color: var(--texte-tres-faible); }

/* ── impression : le dossier qu'on emporte ───────────────────────────── */
@media print {
  .entete, .pied, .partage, .origine-actions, .fil, .rech-barre { display: none; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
  a { text-decoration: none; color: #000; }
  .palmares-ligne, .carte-combat { break-inside: avoid; }
  /* L'image d'accueil ne s'imprime pas : elle ne porte aucun fait, et une
     photographie pleine page coûte une cartouche. */
  .une-image { display: none; }
}