/* Feuille de style du site. Fichier statique, sans front matter : Jekyll le
   copie tel quel dans _site/assets/css/site.css.

   Le parti pris tient en une phrase : ce corpus refuse de publier un score, et
   declare a la place une CONFIANCE pour chaque rang. Le rang n'est donc jamais
   montre seul -- l'echelle a cinq crans dans la marge de gauche est le seul
   endroit ou ce site se permet d'etre spectaculaire. Tout le reste se tait. */

/* --- Polices de repli calibrees ------------------------------------------
   Archivo et Spectral arrivent de Google Fonts en display=swap : le texte
   s'affiche d'abord dans une police locale, puis bascule. Si celle-ci est plus
   large, des lignes passent a la ligne puis reviennent, et tout le contenu se
   decale (CLS). Ces faces donnent a Arial et a Times la chasse d'Archivo et de
   Spectral. Mesure sur les fichiers Google Fonts (Arimo et Tinos, de meme
   metrique qu'Arial et Times), le 21 octobre 2026 :
     Arial  = 99,5 % de la largeur d'Archivo 500, Arial gras = 101,1 % du 700 ;
     Times  = 91,0 % de Spectral 400 ; Georgia = 99,8 %, utilisee telle quelle.
   Les hauteurs de ligne du site sont fixes (line-height chiffre) : seule la
   chasse compte, d'ou size-adjust sans ascent-override. */
@font-face {
  font-family: "Archivo repli";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Arimo"), local("Liberation Sans");
  font-weight: 400 500;
  size-adjust: 100.5%;
}
@font-face {
  font-family: "Archivo repli";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Arimo Bold"), local("Liberation Sans Bold");
  font-weight: 600 700;
  size-adjust: 98.9%;
}
@font-face {
  font-family: "Spectral repli";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"), local("Tinos"), local("Liberation Serif");
  size-adjust: 109.9%;
}

/* --- Jetons ------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Papier de carte d'etat-major : gris legerement vert, franchement froid. */
  --papier:        #e7eae3;
  --papier-creux:  #dce0d7;
  /* Encre bleu de Prusse. C'est un bleu, pas un noir teinte. */
  --encre:         #17293c;
  --encre-pale:    #4d5c61;
  --filet:         #a9b2a6;   /* filets decoratifs SEULEMENT : 1,8:1 sur --papier */
  /* Trait porteur de sens (cran vide, soulignement de lien) : 3,5:1 sur
     --papier, 3,2:1 sur --papier-creux. Le seuil WCAG d'un element graphique
     est 3:1 ; --filet ne l'atteint pas et ne doit jamais porter une donnee. */
  --trait:         #707d77;
  /* Un seul accent, un or olive de laiton. */
  --laiton:        #7d5e0c;

  /* Les polices de repli calibrees (voir @font-face en tete) passent avant les
     polices systeme : c'est ce qui empeche la page de bouger quand Archivo et
     Spectral arrivent. */
  --sans:  "Archivo", "Archivo repli", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --serif: "Spectral", Georgia, "Spectral repli", serif;

  /* Le texte occupe toute la largeur de l'enveloppe (62 rem), comme l'en-tete,
     le visuel et la matrice. Le jeton reste : c'est le seul levier si l'on veut
     un jour reserrer la ligne de lecture. */
  --mesure: none;
  --marge:  clamp(1.1rem, 4vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:        #101c26;
    --papier-creux:  #17293c;
    --encre:         #dde3d9;
    --encre-pale:    #93a29c;
    --filet:         #3a4c52;
    --trait:         #667b77;   /* 3,8:1 sur --papier, 3,3:1 sur --papier-creux */
    --laiton:        #c79b2e;
  }
}

/* --- Socle -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.7;                /* une serif sur une ligne longue demande de l'air */
  font-variant-numeric: oldstyle-nums;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--laiton); }

:focus-visible {
  outline: 2px solid var(--laiton);
  outline-offset: 3px;
}

h1, h2, h3, .rang, .nav, .porte, .cartouche dt {
  font-family: var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
}

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.018em; font-weight: 600; margin: 0; }

/* Spectral est charge en 400 et 600 : sans cette regle, <strong> demanderait
   du 700 et le navigateur fabriquerait un faux gras. */
strong, b { font-weight: 600; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* --- Ossature ----------------------------------------------------------- */

.enveloppe {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 var(--marge);
}

.lisible { max-width: var(--mesure); }

.entete {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.5rem 0 1.1rem;
  border-bottom: 1px solid var(--filet);
}

.enseigne {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 500;
}
.nav a {
  display: inline-block;
  padding: 0.3rem 0;               /* cible tactile d'au moins 24 px */
  text-decoration: none;
  color: var(--encre-pale);
}
.nav a:hover { color: var(--encre); }
.nav a[aria-current="page"] {
  color: var(--encre);
  box-shadow: inset 0 -2px 0 var(--laiton);
}

main { padding: clamp(2.2rem, 6vw, 4rem) 0 1rem; }

.pied {
  margin-top: clamp(3rem, 8vw, 5.5rem);
  padding: 1.4rem 0 2.6rem;
  border-top: 1px solid var(--filet);
  color: var(--encre-pale);
  font-size: 0.9rem;
}
.pied p { max-width: var(--mesure); }

/* --- Titres de page ----------------------------------------------------- */

.titre-page {
  font-size: clamp(1.85rem, 1.1rem + 3.4vw, 3.1rem);
  max-width: none;
}

/* Un titre qui tient sur une ligne a toute largeur : c'est la police qui
   s'ajuste, pas le texte. --titre-em est la longueur du titre en em, calculee a
   la construction par _includes/titre-page.html. Un titre court garde la taille
   de la regle precedente ; un titre long la reduit juste assez pour tenir. Sans
   les unites cq*, la regle precedente s'applique et le titre peut passer a la
   ligne. */
main > .enveloppe { container-type: inline-size; }
.titre-ligne {
  white-space: nowrap;
  font-size: min(clamp(1.85rem, 1.1rem + 3.4vw, 3.1rem), 100cqi / var(--titre-em));
}

.chapeau {
  margin-top: 1.1rem;
  max-width: var(--mesure);
  font-size: 1.06em;
  color: var(--encre-pale);
}

/* --- Le pivot du site : les deux definitions en regard ------------------ */

.pivot {
  display: grid;
  gap: clamp(1.6rem, 5vw, 3.2rem);
  margin: clamp(2rem, 6vw, 3.4rem) 0;
}
.pivot-filet { display: none; }

@media (min-width: 46rem) {
  .pivot { grid-template-columns: 1fr 1px 1fr; align-items: start; }
  .pivot-filet {
    display: block;
    align-self: stretch;
    background: var(--filet);
  }
}

.definition h2 {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.15rem);
  margin-bottom: 0.55rem;
}
.definition p { font-size: 1.02em; }
.definition .conduit {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--laiton);
  padding-bottom: 1px;
}
.definition .conduit:hover { box-shadow: inset 0 -3px 0 var(--laiton); }

/* --- L'echelle de confiance --------------------------------------------- */

.cran {
  display: flex;
  flex-direction: column-reverse;   /* se remplit par le bas, comme une jauge */
  align-items: stretch;
  justify-content: space-between;
  height: 19px;                     /* cinq crans sur un pas fixe */
  width: 20px;
  margin-top: 0.55rem;
}
/* Le cran vide doit se voir : c'est lui qui dit « sur cinq ». Il etait en
   --filet a 55 % d'opacite, soit 1,4:1 -- on lisait deux crans, pas deux sur
   cinq. Plein et vide se distinguent aussi par la forme, pas par la seule
   couleur : 3 px contre 1 px. */
.cran i {
  display: block;
  height: 1px;
  background: var(--trait);
}
.cran i.plein { height: 3px; background: var(--laiton); }

/* --- Le registre -------------------------------------------------------- */

.registre { margin: 2.6rem 0 0; }

.entree {
  display: grid;
  grid-template-columns: 20px 2.4rem 1fr;
  gap: 0 clamp(0.7rem, 2vw, 1.2rem);
  padding: 1.05rem 0;
  border-top: 1px solid var(--papier-creux);
}
.entree:first-child { border-top: 1px solid var(--filet); }

.rang {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  padding-top: 0.1rem;
  letter-spacing: -0.03em;
}
.hors .rang { color: var(--encre-pale); font-weight: 500; }

.corps-entree { min-width: 0; }

.nom {
  font-family: var(--sans);
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
.motif { margin: 0.28rem 0 0; max-width: var(--mesure); }
.mention {
  margin: 0.4rem 0 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--encre-pale);
}

/* La porte d'admissibilite : ce filet est une information, pas un ornement. */
.porte {
  display: grid;
  grid-template-columns: 20px 2.4rem 1fr;
  gap: 0 clamp(0.7rem, 2vw, 1.2rem);
  align-items: center;
  margin: 0.4rem 0 0;
  padding: 0.75rem 0 0.15rem;
  border-top: 3px solid var(--laiton);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--encre-pale);
}
.porte span { grid-column: 3; }

/* --- Le dossier deplie -------------------------------------------------- */

.dossier { margin-top: 0.55rem; }

.dossier > summary {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--encre-pale);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0;               /* cible tactile d'au moins 24 px */
}
.dossier > summary::-webkit-details-marker { display: none; }
.dossier > summary::before {
  content: "+";
  font-weight: 700;
  color: var(--laiton);
}
.dossier[open] > summary::before { content: "\2212"; }
.dossier > summary:hover { color: var(--encre); }

.cartouche {
  margin: 0.85rem 0 0.3rem;
  padding: 0 0 0 1rem;
  border-left: 1px solid var(--filet);
  max-width: var(--mesure);
}
.cartouche dt {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--encre-pale);
  margin-top: 0.85rem;
}
.cartouche dt:first-child { margin-top: 0; }
.cartouche dd { margin: 0.1rem 0 0; }

.verdict {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--laiton);
  font-style: italic;
  max-width: var(--mesure);
}

/* --- Prose (methodologie, arbitrages, sources) -------------------------- */

.prose { max-width: var(--mesure); }
.prose h2 {
  font-size: 1.35rem;
  margin: 2.6rem 0 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--filet);
}
.prose h3 { font-size: 1.02rem; margin: 1.7rem 0 0.4rem; }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1em; }
.prose li { margin-bottom: 0.35em; }
.prose blockquote {
  margin: 1.4rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--laiton);
  font-style: italic;
}
.prose code { font-size: 0.9em; }

/* Tableaux : ils portent des poids et des correspondances, pas du decor. */
.prose table, .tableau {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0 1.6rem;
  font-size: 0.95rem;
}
.prose caption, .tableau caption {
  text-align: left;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--encre-pale);
  padding-bottom: 0.5rem;
}
.prose th, .tableau th {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  color: var(--encre-pale);
  padding: 0 0.7rem 0.45rem 0;
  border-bottom: 1px solid var(--filet);
}
.prose td, .tableau td {
  padding: 0.5rem 0.7rem 0.5rem 0;
  border-bottom: 1px solid var(--papier-creux);
  vertical-align: top;
}
.prose th:last-child, .prose td:last-child,
.tableau th:last-child, .tableau td:last-child { padding-right: 0; }
.prose td:nth-child(2), .prose th:nth-child(2) { white-space: nowrap; }

.debord { overflow-x: auto; }

/* --- Divers ------------------------------------------------------------- */

/* Masque a l'oeil, lu par les lecteurs d'ecran. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.evitement {
  position: absolute;
  left: -9999px;
}
.evitement:focus {
  position: static;
  display: inline-block;
  padding: 0.5rem 0;
}

/* Bandeau ligne de crete : le kit arrive apres le premier affichage. Sa
   hauteur (33 px) est reservee tant que l'element n'est pas defini, sinon
   tout le contenu descendrait d'autant (CLS). */
ldc-bandeau:not(:defined) { display: block; height: 33px; }

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

/* --- Legende de l'echelle (accueil) ------------------------------------- */

.legende {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.55rem clamp(0.7rem, 2vw, 1.1rem);
  align-items: start;
  margin: 1.5rem 0 1.8rem;
  padding-left: 0.1rem;
}
.legende .cran { margin-top: 0.35rem; }
.legende p { margin: 0; font-size: 0.98rem; }

/* --- Navigation en deux groupes ----------------------------------------- */

.nav-groupe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;   /* etait 1.15rem : 6 ecarts, 24 px rendus a l'en-tete pour qu'il tienne sur une rangee */
}
.nav { gap: 0.35rem 2.4rem; }   /* l'ecart entre groupes, plus large */

/* --- Le nom conduit au dossier ------------------------------------------ */

.nom a {
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--trait);   /* le seul signe du lien : il doit se voir */
}
.nom a:hover { box-shadow: inset 0 -2px 0 var(--laiton); }

/* La ligne visee par une ancre se signale sans clignoter. */
.entree:target, .fiche:target {
  background: var(--papier-creux);
  box-shadow: -0.8rem 0 0 var(--papier-creux), 0.8rem 0 0 var(--papier-creux);
}

/* --- Sommaire des vingt dossiers ---------------------------------------- */

.sommaire {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.1rem 1.6rem;
  margin: 2.4rem 0 0;
  padding: 1.1rem 0;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  font-family: var(--sans);
  font-size: 0.92rem;
}
.sommaire a {
  display: flex;
  gap: 0.55rem;
  padding: 0.22rem 0;
  text-decoration: none;
}
.sommaire a:hover { color: var(--laiton); }
.sommaire a.hors { color: var(--encre-pale); }
.sommaire-rang {
  flex: none;
  width: 1.4rem;
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--encre-pale);
}

/* --- Les fiches --------------------------------------------------------- */

.fiches { margin-top: 1rem; }

.fiche {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 0 clamp(0.9rem, 3vw, 1.8rem);
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--papier-creux);
}

.fiche-marge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.fiche-marge .cran { margin-top: 0.4rem; }
.fiche-marge .rang { font-size: 1.85rem; }

.fiche-corps { min-width: 0; }

.fiche-nom {
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.75rem);
  margin: 0;
}
.fiche-position {
  margin: 0.35rem 0 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--encre-pale);
}
.fiche .motif {
  margin-top: 0.7rem;
  font-size: 1.05em;
}
.fiche .cartouche { margin-top: 1.2rem; }

.fiche-retour {
  margin: 1.1rem 0 0;
  font-family: var(--sans);
  font-size: 0.875rem;
}
.fiche-retour a { color: var(--encre-pale); }
.fiche-retour a:hover { color: var(--encre); }

.porte-fiches { margin-top: 1.4rem; }

@media (max-width: 30rem) {
  .fiche { grid-template-columns: 2.6rem 1fr; }
  .fiche-marge .rang { font-size: 1.5rem; }
}

/* --- Le tableau croise -------------------------------------------------- */

/* Aucun nom ne se coupe. La colonne prend la largeur du plus long
   -- « Arthur Wellesley, duc de Wellington » -- et la table impose un minimum
   en dessous duquel elle defile plutot que d'ecraser la derniere colonne. */
.matrice { min-width: 48rem; }
.matrice th[scope="row"] {
  font-family: var(--serif);
  font-weight: 400;
  white-space: nowrap;
  padding-right: 1.4rem;
}

/* Tout s'aligne sur la premiere ligne : un nom tient sur une ligne, la lecture
   croisee peut en prendre trois. */
.matrice tbody th,
.matrice tbody td { vertical-align: top; }

.matrice .col-rang {
  width: 6.6rem;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
/* Le rang et sa confiance vont ensemble : l'un ne se lit pas sans l'autre. */
.rang-cran {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.7;    /* la meme que le corps : le cran se centre sur la ligne */
}
.rang-cran .cran { margin-top: 0; }
.matrice .col-rang a { text-decoration: none; box-shadow: inset 0 -1px 0 var(--trait); }
.matrice .col-rang a:hover { box-shadow: inset 0 -2px 0 var(--laiton); }
.matrice .col-rang a.hors { color: var(--encre-pale); }
.matrice .vide { color: var(--encre-pale); }   /* du texte : --filet donnait 1,8:1 */

.matrice .rubrique th {
  padding-top: 1.6rem;
  border-bottom: 2px solid var(--laiton);
  color: var(--encre);
  font-size: 0.9rem;
}
.matrice tbody:first-of-type .rubrique th { padding-top: 0; }

/* --- La passerelle entre un classement et ses dossiers ------------------ */

.passerelle {
  margin: 1.4rem 0 0;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 500;
}
.passerelle a {
  text-decoration: none;
  padding-bottom: 2px;
  box-shadow: inset 0 -2px 0 var(--laiton);
}
.passerelle a:hover { box-shadow: inset 0 -3px 0 var(--laiton); }

/* --- Le croisement des deux classements (accueil) ----------------------- */

.figure {
  margin: clamp(2.4rem, 7vw, 3.6rem) 0 0;
  padding-top: clamp(1.6rem, 5vw, 2.4rem);
  border-top: 1px solid var(--filet);
}

.croisement {
  display: block;
  width: 100%;
  /* = la largeur du viewBox de croisement.html. En dessous, le visuel defile
     dans .debord plutot que de reduire son texte : les etiquettes d'un SVG ne
     se remettent pas a l'echelle du lecteur. Au-dessus, il s'agrandit -- un
     viewBox etroit donne donc un texte plus grand sur ecran large ET moins de
     defilement sur telephone. Meme parti pris que .matrice. */
  min-width: 46rem;
  height: auto;
}

.croisement .c-place { stroke: var(--encre);      stroke-width: 2; }
/* Les huit pretendants. --filet ne convient pas ici : 1,85:1 sur --papier, les
   traits disparaissaient et la colonne semblait s'arreter a la douzieme. */
.croisement .c-hors  { stroke: var(--encre-pale); stroke-width: 1.5; }
/* Filet decoratif sous les titres : c'est le bon emploi de --filet. */
.croisement .c-filet { stroke: var(--filet);      stroke-width: 1; }
.croisement .c-porte { stroke: var(--laiton);     stroke-width: 2.5; }
.croisement .c-lien  { stroke: var(--laiton);     stroke-width: 1.5; }
.croisement .c-noeud { fill: var(--laiton); }

.croisement text { font-family: var(--sans); fill: var(--encre); }
.croisement .c-titre { font-size: 16px; font-weight: 600; }

/* Les quarante noms. Archivo 500 et 700 sont charges par default.html. */
.croisement .c-liste { font-size: 14px; font-weight: 500; }
.croisement .c-liste.hors   { fill: var(--encre-pale); }  /* comme .matrice ... a.hors */

/* Les quatre classes des deux cotes, aux deux bouts des quatre traits. Le nom
   prend l'accent, et le noeud laiton du trait -- pose sur ces rangees et sur
   elles seules -- le prolonge : l'oeil trouve les deux bouts d'une liaison sans
   qu'on ait a repeter le nom au centre.

   Declare APRES .hors a dessein : a specificite egale c'est l'ordre qui
   tranche, et le laiton doit gagner sur le gris des pretendants. Sinon
   Alexandre le Grand (17e stratege) et Frederic II (14e) resteraient en
   --encre-pale -- or c'est tout l'interet de leur trait.

   Le tiret de rail garde sa couleur : c'est lui qui dit admis ou pretendant,
   et cette distinction compte justement pour ces quatre-la. */
.croisement .c-liste.croise { fill: var(--laiton); font-weight: 700; }

/* Les noms sont des liens vers les fiches. Le soulignement en box-shadow du
   site ne s'applique pas dans un SVG : le survol souligne et colore -- sur les
   huit noms deja en laiton, la couleur seule ne signalerait rien. */
.croisement a { text-decoration: none; cursor: pointer; }
.croisement a:hover .c-liste,
.croisement a:focus-visible .c-liste { fill: var(--laiton); text-decoration: underline; }
.croisement a:focus-visible { outline: 2px solid var(--laiton); outline-offset: 2px; }

.croisement .c-repere {
  font-size: 11px;
  font-weight: 500;
  fill: var(--encre-pale);
  /* Un halo de la couleur du papier, au cas ou le mot croise un trait. Il suit
     le mode sombre tout seul. Moins fragile qu'un rectangle a la main. */
  stroke: var(--papier);
  stroke-width: 2.5;
  paint-order: stroke;
}

.figure figcaption {
  max-width: var(--mesure);
  margin-top: 1.4rem;
  font-size: 0.95rem;
  color: var(--encre-pale);
}
.figure figcaption strong { color: var(--encre); font-weight: 600; }

/* --- La fiche d'un personnage ------------------------------------------- */

.personnage-dates {
  margin: 0.6rem 0 0;
  font-family: var(--sans);
  font-weight: 600;
  font-variant-numeric: lining-nums;
  color: var(--encre-pale);
}

/* Le portrait vient apres le titre dans le document -- c'est l'ordre de
   lecture sur telephone. Sur grand ecran il passe dans une colonne etroite a
   droite, le texte gardant toute la largeur restante. */
.personnage-grille {
  display: grid;
  gap: clamp(1.6rem, 5vw, 3rem);
  margin-top: clamp(1.8rem, 5vw, 2.6rem);
}
@media (min-width: 46rem) {
  .personnage-grille { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }
  .portrait { grid-column: 2; grid-row: 1; }
  .personnage-texte { grid-column: 1; grid-row: 1; }
}

.portrait { margin: 0; max-width: 15rem; }
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--papier-creux);   /* tient la place pendant le chargement */
}
.portrait figcaption {
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--encre-pale);
}
.portrait figcaption p { margin: 0 0 0.45rem; }
/* L'avertissement est une information sur la source, comme une confiance :
   il se lit, il ne crie pas. */
.portrait-reserve { color: var(--encre); font-weight: 600; }
.portrait-credit a { color: inherit; }

/* Le rang et sa confiance, en tete du texte : le site ne montre jamais l'un
   sans l'autre. */
.positions {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  font-family: var(--sans);
}
.positions li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--papier-creux);
}
.positions li:first-child { border-top: 1px solid var(--filet); }
.positions li:last-child  { border-bottom: 1px solid var(--papier-creux); }
.positions .cran { margin-top: 0; flex: none; }
.positions a { font-weight: 600; }

.personnage-texte h2 {
  font-size: 1.35rem;
  margin: 2.2rem 0 0.7rem;
}

.lectures { margin: 0; padding-left: 1.15rem; }
.lectures li { margin-bottom: 0.45em; }

/* Le nom de chaque ligne de la matrice conduit a la fiche du personnage. */
.matrice .vers-fiche { text-decoration: none; box-shadow: inset 0 -1px 0 var(--trait); }
.matrice .vers-fiche:hover { box-shadow: inset 0 -2px 0 var(--laiton); }

.fiche-retour + .fiche-retour { margin-top: 0.35rem; }

/* --- L'index des personnages -------------------------------------------- */

/* La vignette a un alt vide : le nom, juste a cote et dans le meme lien,
   nomme deja la carte. Un alt descriptif ferait lire chaque lien deux fois. */
.index-personnages {
  list-style: none;
  margin: clamp(1.8rem, 5vw, 2.6rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0 1.6rem;
  border-top: 1px solid var(--filet);
}
.index-personnages li { border-bottom: 1px solid var(--papier-creux); }

.index-carte {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 0.9rem;
  align-items: start;
  padding: 0.8rem 0;
  text-decoration: none;
  font-family: var(--sans);
}
.index-carte img {
  grid-row: 1 / span 3;
  width: 3.4rem;
  height: 4.4rem;
  object-fit: cover;
  object-position: center top;   /* le visage est en haut du portrait */
  background: var(--papier-creux);
}
.index-nom { font-weight: 600; line-height: 1.3; }
.index-dates, .index-rangs {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--encre-pale);
  font-variant-numeric: lining-nums;
}
.index-carte:hover .index-nom { box-shadow: inset 0 -2px 0 var(--laiton); }
.mention + .mention { margin-top: 0.15rem; }
.mention a { color: var(--encre); }