/* Le mur des noms. Une seule feuille, une seule famille : EB Garamond, auto-hébergée, avec ses vraies petites capitales.
   Le travail typographique se fait sur l'espace : interlettrage, interligne, écarts de taille, marges. */
/* Fichiers fabriqués depuis les sources de la police (pyftsubset, latin + latin étendu, toutes fonctions OpenType conservées) :
   les woff2 de l'API Google perdent smcp et c2sc, donc les petites capitales. */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/EBGaramond-roman.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("fonts/EBGaramond-italic.woff2") format("woff2"); }


:root {
  --pierre: #1b1917;               /* pierre sombre, presque noire, chaude : les portraits en noir et blanc ressortent */
  --encre: #e6dfd0;                /* la seule encre : ivoire */
  --encre-lien: #f6f1e6;           /* les liens : la même encre, un peu plus dense (plus claire sur fond sombre) */
  --accent: #b8934f;               /* le seul accent : le doré, éclairci juste ce qu'il faut pour rester lisible sur le sombre */
  --filet: rgba(230, 223, 208, 0.28);  /* l'encre, atténuée, pour les traits */
  --texture: url("textures/pierre.jpg");   /* photo de pierre désaturée et adoucie (l'originale CC0 est pierre-origine-cc0.jpg) ; en valeur très basse sur le sombre */
  --texture-opacite: 0.12;         /* la texture est neutre : c'est --pierre qui donne la teinte */
  --mesure: 38rem;
  --marge-gauche: 22px;
  --marge-droite: 40px;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html {
  background: var(--pierre);
  color: var(--encre);
  font-family: "EB Garamond", Garamond, "Times New Roman", Times, serif;
  font-size: 106.25%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-kerning: normal;
}
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--texture) center top / 800px auto repeat;
  opacity: var(--texture-opacite);
  pointer-events: none;
}
[hidden] { display: none !important; }
a { color: var(--encre-lien); text-decoration: none; }
main a:hover, main a:focus-visible, .pied a:hover, .pied a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--filet); }
.entete a:hover { color: var(--accent); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
img { max-width: 100%; height: auto; display: block; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Petites capitales : celles de la police, par ses fonctions OpenType.
   smcp transforme les bas de casse ; c2sc les capitales déjà saisies (les noms de famille du fichier sont en capitales). */
.entete, .famille, .theatre h2, .fiche .grade, .page h1, .page h2, .theatre-periode { font-feature-settings: "smcp", "c2sc"; font-variant-caps: all-small-caps; }
.famille { letter-spacing: 0.08em; }

/* Une seule colonne, calée à gauche, marges inégales */
.entete, main, .pied { width: 100%; max-width: calc(var(--mesure) + var(--marge-gauche) + var(--marge-droite)); margin: 0; padding-left: var(--marge-gauche); padding-right: var(--marge-droite); }

/* En-tête */
.entete { padding-top: 22px; font-size: 1.05rem; letter-spacing: 0.12em; }
.entete nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }  /* passe à la ligne sur les très petits écrans */
.entete a[aria-current="page"] { color: var(--accent); }
/* Fil d'Ariane (fiche) : sous la navigation, à gauche ; bas de casse et petit corps pour ne pas passer pour un second menu */
.entete .ariane { margin-top: 14px; font-size: 0.78rem; letter-spacing: 0; font-feature-settings: normal; font-variant-caps: normal; opacity: 0.62; }
.entete .ariane ol { list-style: none; margin: 0; padding: 0; }
.entete .ariane li { display: inline; }
.entete .ariane li + li::before { content: "›"; padding: 0 0.5em; }

main { flex: 1 0 auto; }

/* Le mur */
/* « Ce jour-là » : un paragraphe, pas un encadré ; caché quand personne ne correspond (aucun espace réservé) */
.ce-jour { padding: 44px 0 0; }
.ce-jour .date { margin: 0; font-size: 0.8rem; letter-spacing: 0.18em; font-feature-settings: "smcp", "c2sc"; font-variant-caps: all-small-caps; opacity: 0.72; }
.ce-jour p { margin: 10px 0 0; font-size: 0.92rem; line-height: 1.5; max-width: 28em; }
.ce-jour p.noms { font-size: 0.85rem; opacity: 0.8; }
.ce-jour a { text-decoration: none; }
.ce-jour p.vers-theatre { margin: 6px 0 0 1.5em; font-size: 0.82rem; opacity: 0.8; }
/* Le mur : la page commence dans le contenu. Colonne étroite calée sur la marge gauche du mur, rien de centré. */
.intro { padding: 56px 0 0; max-width: 34em; }
.recherche-bloc { max-width: 28em; }
.compte { margin: 0; font-weight: 400; font-size: 2.1rem; line-height: 1.1; letter-spacing: -0.015em; }   /* premier élément de la page, à la place d'un titre */
.recherche-bloc { padding-top: 32px; }
.recherche { margin: 0; }
.recherche input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--filet);
  padding: 8px 0; font: inherit; font-style: italic; font-size: 1rem; color: inherit;
  -webkit-appearance: none; appearance: none;
}
.recherche input::placeholder { color: var(--encre); opacity: 0.62; }
.recherche input:focus { outline: none; border-color: var(--accent); }
.recherche-vide { margin: 16px 0 0; font-style: italic; opacity: 0.62; }

.theatre { padding-top: 48px; scroll-margin-top: 24px; }
.theatre h2 { margin: 0; font-weight: 400; font-size: 1.1rem; line-height: 1.2; letter-spacing: 0.18em; }
.theatre h2 small { display: block; margin-top: 8px; font-size: 0.72rem; letter-spacing: 0.1em; opacity: 0.62; }
/* Le mur : une case par soldat, portrait validé ou plaque gravée, au même ton. */
.grille { --gap: 8px; --fs-prenom: 0.98rem; --fs-nom: 0.86rem; --fs-date: 0.6rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); list-style: none; margin: 26px 0 0; padding: 0; }
.case { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
/* Plaque : un léger creux taillé dans la pierre (ombre interne en haut, lumière en bas), presque la même teinte que le fond, aucun bord net */
.case.plaque { background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.55), inset 0 -1px 1px rgba(255, 255, 255, 0.07), inset 1px 0 1px rgba(0, 0, 0, 0.25), inset -1px 0 1px rgba(255, 255, 255, 0.04); }
.case > a.fiche { position: absolute; inset: 0; z-index: 1; }
/* Portrait : noir et blanc fondu dans la pierre (fusion en luminosité, contraste réduit), calé sur le ton des plaques */
.case.portrait { background: transparent; }
.case.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; filter: grayscale(1) contrast(1.02); opacity: 0.94; }
/* Plaque : le nom gravé */
.case.plaque .nom { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 5%; color: rgba(230, 223, 208, 0.8); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.06); text-wrap: balance; }   /* gravé dans la pierre sombre : ombre dessus, fine lumière dessous */
.case.plaque .prenom { display: block; font-size: var(--fs-prenom); line-height: 1.1; letter-spacing: 0.01em; }
.case.plaque .famille { display: block; margin-top: 0.15em; font-size: var(--fs-nom); line-height: 1.12; letter-spacing: 0.07em; max-width: 100%; overflow-wrap: anywhere; }   /* même corps sur toutes les plaques : un nom long passe sur deux lignes */
.case.plaque .date { display: block; margin-top: 0.6em; font-size: var(--fs-date); line-height: 1.1; letter-spacing: 0.06em; opacity: 0.72; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .case.plaque:hover { background: rgba(255, 255, 255, 0.06); } .case.portrait:hover img { opacity: 1; } }
.case.plaque:hover .nom { color: var(--encre); }
.case > a.fiche:focus-visible { outline: 1px solid var(--accent); outline-offset: -3px; }
.theatres .theatre-nom { transform-origin: left center; transition: transform 150ms ease, color 150ms ease; }
.theatres a:hover .theatre-nom, .theatres a:focus-visible .theatre-nom { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .theatres .theatre-nom { transition: none; } }

/* La fiche : le bloc est centré dans la hauteur laissée entre la navigation et le pied de page, même respiration au-dessus (padding) et en dessous (padding du pied).
   Marges automatiques et non justify-content : si le contenu dépasse l'écran (téléphone), elles tombent à zéro et la fiche s'aligne en haut, rien n'est coupé. */
/* La fiche est aussi centrée dans la largeur de la page, texte centré (demande d'Ewan du 22 sept.) : c'est l'exception à « rien n'est centré ». La navigation et le pied de page restent à gauche. */
body.p-fiche main { display: flex; flex-direction: column; max-width: none; padding-left: 22px; padding-right: 22px; }
.fiche { max-width: var(--mesure); margin: auto; padding: 56px 0 0; text-align: center; }
body.p-fiche .pied { padding-top: 56px; }
.fiche .photo { width: 184px; margin: 32px auto 0; }   /* sous le nom, avant le filet */
.fiche .photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1); border: 1px solid var(--filet); padding: 6px; }  /* portraits déjà carrés, noir et blanc, 600 px (valider.js) ; grayscale par sécurité */
.fiche .photo figcaption { margin-top: 8px; font-size: 0.78rem; font-style: italic; opacity: 0.62; }
.fiche .grade { margin: 0; font-size: 0.78rem; letter-spacing: 0.16em; text-indent: 0.16em; opacity: 0.62; }   /* l'indentation compense l'interlettrage qui suit la dernière lettre, sinon le mot paraît décalé à gauche */
.fiche h1 { margin: 18px 0 0; font-weight: 400; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6), 0 1px 1px rgba(255, 255, 255, 0.06); }
.fiche h1 .prenom { display: block; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.01em; }
.fiche h1 .famille { display: block; margin-top: 2px; font-size: 2.7rem; line-height: 1.02; letter-spacing: 0; text-wrap: balance; }
.fiche .sep { width: 28px; height: 1px; margin: 32px auto; background: var(--filet); }
.fiche .details { margin: 0; font-size: 0.88rem; line-height: 1.9; }
.fiche .unite { margin: 0.9em 0 0; font-size: 0.88rem; line-height: 1.9; }   /* unité et armée : même corps que les données, séparées d'elles par un demi-interligne */
.fiche .photo-q { margin: 40px 0 0; font-size: 0.88rem; }   /* un lien comme les autres (encre dense, filet au survol) : ni italique ni atténué, sinon il ne se lit pas comme un lien ; jamais en couleur d'alerte, jamais en bouton */
.fiche .autorisation { margin: 40px 0 0; font-size: 0.72rem; line-height: 1.6; opacity: 0.62; }
.page a, .pied a { text-decoration: none; }   /* rien de plus précis sur les liens de la fiche : une règle « .fiche … a » l'emporterait sur le filet de survol (main a:hover) */

/* Pages de texte : carte, familles, transmettre, source */
.page { padding: 64px 0 40px; }
.page h1 { margin: 0 0 32px; font-weight: 400; font-size: 1.3rem; line-height: 1.2; letter-spacing: 0.16em; }
.page h2 { margin: 40px 0 10px; font-weight: 400; font-size: 0.78rem; letter-spacing: 0.16em; opacity: 0.62; }
.page p { margin: 0 0 1em; font-size: 1rem; line-height: 1.6; max-width: 28em; }   /* 60 à 65 caractères, marge droite libre */
.theatres { list-style: none; margin: 8px 0 0; padding: 0; }
.theatres a { text-decoration: none; }
/* La liste des théâtres se lit comme un index : une ligne par théâtre */
.theatres a { display: grid; grid-template-columns: 48px 1fr; align-items: baseline; padding: 0.18em 0; }
.theatres .theatre-annee { font-size: 0.72rem; letter-spacing: 0.08em; opacity: 0.62; font-variant-numeric: tabular-nums; }
.theatres .theatre-ligne { line-height: 1.35; }
.theatres .theatre-nom { font-size: 1rem; }
.theatres .theatre-periode { margin-left: 0.6em; font-size: 0.72rem; letter-spacing: 0.08em; opacity: 0.62; white-space: nowrap; }

/* La carte : un planisphère au filet, décor et non atlas ; disques ivoire à surface proportionnelle */
.page-carte { max-width: none; }
.page-carte p { max-width: 28em; }
/* La carte : la largeur pilote, la hauteur suit. Conteneur centré dans la page, plafonné à 1600 px ; le cadrage large et bas du planisphère la fait tenir dans un écran. */
.carte-bloc { max-width: 1600px; margin: 0 auto; padding: 0 22px; }
.page-carte { padding-top: 24px; padding-bottom: 4px; }
body.p-carte main { flex: 0 0 auto; max-width: none; padding-left: 0; padding-right: 0; }   /* le pied de page suit immédiatement le curseur ; la carte se centre dans toute la page */
.page-carte > h1, .page-carte > p { margin-left: var(--marge-gauche); margin-right: var(--marge-droite); }
body.p-carte .pied { padding-top: 24px; }
.page-carte h1 { margin-bottom: 12px; }
.page-carte > p { margin-bottom: 0; }
.planisphere { position: relative; margin: 8px 0 0; }
.planisphere svg { display: block; width: 100%; height: auto; aspect-ratio: 968 / 350; overflow: hidden; }   /* ratio du cadrage (outils/planisphere.js) : la carte occupe toute la largeur, la hauteur suit, aucune hauteur fixe */
.planisphere .terres { fill: none; stroke: rgba(230, 223, 208, 0.16); stroke-width: 0.7; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.planisphere .disque { fill: rgba(230, 223, 208, 0.74); stroke: var(--pierre); stroke-width: 1.5; }   /* liseré couleur pierre : deux disques voisins restent distincts */
.planisphere .zone { fill: transparent; pointer-events: all; }
.planisphere a.theatre-point { pointer-events: all; }
.planisphere a.theatre-point { cursor: pointer; outline: none; }
.planisphere a.theatre-point:hover .disque, .planisphere a.theatre-point:focus .disque { fill: var(--accent); }
.planisphere a.theatre-point:focus-visible .disque { stroke: var(--encre); stroke-width: 1; vector-effect: non-scaling-stroke; }
.planisphere .rappel { stroke: rgba(230, 223, 208, 0.45); stroke-width: 0.8; vector-effect: non-scaling-stroke; }   /* trait fin vers la position réelle d'un disque décalé */
.planisphere .origine { fill: rgba(230, 223, 208, 0.7); }
.planisphere text.etiquette { font-family: inherit; font-size: 12px; letter-spacing: 0.02em; fill: var(--encre); dominant-baseline: auto; pointer-events: none; opacity: 0; paint-order: stroke; stroke: var(--pierre); stroke-width: 4px; stroke-linejoin: round; }   /* halo couleur pierre : lisible même sur un disque voisin */
.planisphere a.theatre-point:hover text.etiquette, .planisphere a.theatre-point:focus text.etiquette { opacity: 1; }
/* Le curseur d'années, sous la carte, dans la colonne de texte : l'année en grand et l'effectif cumulé juste au-dessus de la barre,
   une ligne (ivoire plein à gauche, filet atténué à droite) et un disque ivoire pour poignée, les bornes dessous, une aide en petit */
/* Le bloc est centré sous la carte, sur l'axe du planisphère (exception voulue par Ewan le 17 sept.) */
.curseur { max-width: 28em; margin: 4px auto 12px; text-align: center; }
.page p.annee-titre { margin: 0 auto; font-size: 2rem; line-height: 1.05; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.curseur input[type="range"] { --pos: 100%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 20px; margin: 0; padding: 0; background: transparent; outline: none; cursor: pointer; }
.curseur input[type="range"]::-webkit-slider-runnable-track { height: 1px; border: 0; background: linear-gradient(to right, rgba(230, 223, 208, 0.9) var(--pos), var(--filet) var(--pos)); }
.curseur input[type="range"]::-moz-range-track { height: 1px; border: 0; background: var(--filet); }
.curseur input[type="range"]::-moz-range-progress { height: 1px; background: rgba(230, 223, 208, 0.9); }
.curseur input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -7.5px; background: rgba(230, 223, 208, 0.95); border: 0; border-radius: 50%; }   /* un disque plein, comme les points de la carte */
.curseur input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: rgba(230, 223, 208, 0.95); border: 0; border-radius: 50%; }
.curseur input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--accent); }
.curseur input[type="range"]:focus-visible::-moz-range-thumb { background: var(--accent); }
.curseur .bornes { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.72rem; letter-spacing: 0.1em; opacity: 0.62; font-variant-numeric: tabular-nums; font-feature-settings: "smcp", "c2sc"; font-variant-caps: all-small-caps; }
.page p.curseur-aide { margin: 6px auto 0; font-size: 0.8rem; font-style: italic; opacity: 0.72; }
@media (min-width: 700px) { .page p.annee-titre { font-size: 2.2rem; } }
@media (max-width: 699px) { .planisphere .zone { r: 44; } }   /* carte réduite au tiers : zone tactile portée à 35 px environ, le disque visible ne change pas */

/* Pied de page, sur toutes les pages */
.pied { padding-top: 72px; padding-bottom: 28px; font-size: 0.72rem; line-height: 1.7; opacity: 0.62; }
.pied p { margin: 0; }
.pied .pied-signature { margin-top: 10px; }

/* Transmettre : le carnet Transmis, seule page du site qui en parle. Image au-dessus du texte sur téléphone, à côté sur ordinateur. */
body.p-transmettre main { max-width: calc(66rem + var(--marge-gauche) + var(--marge-droite)); }
.transmettre { display: grid; gap: 36px; }
.transmettre .visuel { margin: 0; max-width: 28em; }
.transmettre .visuel img { width: 100%; height: auto; }
.transmettre .accroche { margin: 0 0 24px; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; max-width: 20em; }
.transmettre .texte { display: flex; flex-direction: column; }   /* colonne en flex : le bouton descend au bas de la rangée, aligné sur le bas de la couverture (demande d'Ewan du 17 oct.) ; les marges ne fusionnent plus, d'où le réglage du h2 */
.transmettre .texte h2 { margin-top: 22px; }
.transmettre .tirage { margin-top: 1.2em; font-size: 0.88rem; opacity: 0.72; }   /* un blanc avant « Premier tirage » */
.transmettre .action { margin: auto 0 0; padding-top: 28px; }   /* marge haute automatique : bas du bouton sur le bas de la couverture quand elle est plus haute que le texte ; 28 px d'écart au minimum */
/* Le seul bouton du site : un filet autour d'un lien en petites capitales, aucun fond, aucun coin arrondi ; au survol seule la couleur change */
.bouton { display: inline-block; padding: 12px 22px; border: 1px solid var(--encre); color: var(--encre-lien); font-size: 0.78rem; letter-spacing: 0.16em; font-feature-settings: "smcp", "c2sc"; font-variant-caps: all-small-caps; }
.bouton:hover, .bouton:focus-visible { color: var(--accent); border-color: var(--accent); text-decoration: none; }

@media (min-width: 700px) {
  :root { --marge-gauche: clamp(40px, 9vw, 160px); --marge-droite: 48px; }
  html { font-size: 112.5%; }
  .entete { padding-top: 30px; font-size: 1.15rem; }
  .ce-jour { padding-top: 56px; }
  .intro { padding: 80px 0 0; }
  .recherche-bloc { padding-top: 44px; }
  .compte { font-size: 1.9rem; }
  .theatre { padding-top: 64px; }
  /* Le mur s'élargit (9 colonnes) ; les autres pages gardent leur colonne étroite */
  body.p-mur .entete, body.p-mur main, body.p-mur .pied { max-width: calc(66rem + var(--marge-gauche) + var(--marge-droite)); }
  .carte-bloc { padding: 0 48px; }
  .grille { grid-template-columns: repeat(7, 1fr); --gap: 8px; --fs-prenom: 1rem; --fs-nom: 0.88rem; --fs-date: 0.64rem; }
  body.p-fiche main { padding-left: 48px; padding-right: 48px; }
  .fiche { padding-top: 72px; }
  body.p-fiche .pied { padding-top: 72px; }
  .fiche h1 .prenom { font-size: 1.8rem; }
  .fiche h1 .famille { font-size: 3.6rem; }
  .fiche .photo { width: 216px; }
}

@media (min-width: 900px) {
  .transmettre { grid-template-columns: minmax(0, 30em) minmax(16em, 24em); column-gap: 64px; align-items: stretch; }   /* stretch : la colonne de texte prend la hauteur de la couverture ; 24 em de couverture pour que le bouton tombe juste sous le texte, sans grand vide (17 oct.) */
  .transmettre .visuel { grid-column: 2; grid-row: 1; max-width: none; }
  .transmettre .texte { grid-column: 1; grid-row: 1; }
  .transmettre .accroche { font-size: 1.8rem; }
}

@media print {
  html { background: #fff; color: #111; --encre: #111; --encre-lien: #000; --filet: rgba(0, 0, 0, 0.3); }
  body::before, .entete nav, .recherche { display: none; }   /* les deux nav de l'en-tête, fil d'Ariane compris */
  body.p-fiche main { display: block; }
}