/* Feuille commune aux TROIS pages d'histoire — `/hotel/histoire`,
   `/hotel/histoire/archives`, `/hotel/histoire/1944`.

   Elle existe parce que les trois pages sont un seul document coupé en trois :
   même ouverture, même colonne de lecture, même traitement des pièces
   d'archive, même visionneuse. Trois copies auraient divergé au premier
   ajustement — c'est exactement ce qui avait produit seize `:root`.

   ⚠ Aucune variable de palette n'est déclarée ici : `palette.css` en est la
   seule source, et `tests/test_palette.py` échoue si une page en redéclare une.

   ⚠ CHARGÉE APRÈS `palette.css` et AVANT le <style> de la page : une page peut
   donc affiner, mais à spécificité égale c'est elle qui gagne. */

* { box-sizing: border-box; }
/* ── Réglages de la colonne de lecture ───────────────────────────────────
   Ce ne sont PAS des variables de charte : `palette.css` reste la source
   unique des couleurs et des fontes, et rien de ce qui est ici n'y figure.
   Ce sont les deux mesures de la colonne, nommées parce qu'elles étaient
   écrites cinq fois à l'identique — quatre dans cette feuille, une dans la
   page archives — donc promises à diverger au premier ajustement.

   ⚠ Les DEUX termes d'un `clamp` se disputent le téléphone, et changer un
   seul ne sert à rien. Mesuré à 402 px (iPhone 16 Pro, l'écran d'Andy) le
   24/08 : l'ancienne `clamp(1.3rem, 5vw, 2rem)` valait 20,8 px parce que le
   MINIMUM (1,3rem) l'emportait de justesse sur `5vw` (20,1 px). Descendre le
   seul minimum à 1rem aurait donc rendu… 20,1 px — sept dixièmes de gagnés,
   et l'impression que le réglage ne répond pas. Il fallait baisser les deux :
   `4vw` vaut 16,1 px à cette largeur, et c'est lui qui décide désormais. */
body { --gouttiere: clamp(1rem, 4vw, 2rem);
       --panneau: 44rem;             /* la colonne de lecture, largeur unique */
       --lecture: 1.125rem;          /* 18 px — le corps du RÉCIT */
       --lecture-interligne: 1.55; }
body { margin: 0; background: var(--fond); color: var(--encre);
  font-family: var(--f-corps); font-weight: 400; line-height: 1.75; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--or-fonce); outline-offset: 2px; }
.eyebrow { font-size: 0.75rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--etiquette); font-weight: 500; }

/* ── Ouverture ────────────────────────────────────────────────────────── */
/* ⚠ Le titre est POSÉ sur une vue aérienne où le château occupe le centre :
   sans hauteur minimale ni recadrage, il lui tombe dessus. `min-height` donne
   au bâti la place de se voir, `object-position` le fait descendre sous le
   texte. La barre flottante mange le haut — d'où le `padding-top` plus large
   que le bas. */
.entete { --etiquette: var(--or-pale); position: relative; text-align: center;
  min-height: min(64vh, 560px); display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(7rem, 14vw, 10rem) clamp(1.2rem, 5vw, 4rem) clamp(4rem, 9vw, 6rem);
  color: #f4f2ea; overflow: hidden; }
.entete img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%; z-index: 0; }
.entete::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(24,24,24,.30), rgba(24,24,24,.62)); }
.entete > *:not(img) { position: relative; z-index: 2; }
.entete h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 600; letter-spacing: .01em;
  margin: 0 0 .6rem; text-shadow: 0 2px 22px rgba(0,0,0,.45); text-wrap: balance; }
/* 46ch, pas 34 : à 34 la phrase de sept mots se coupait avant « guerre », et
   un sous-titre qui laisse un mot seul sur sa ligne se lit comme une coquille. */
.entete .sur { font-family: var(--f-display); font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: 400; color: #efece2; max-width: 46ch; margin: 0 auto;
  text-shadow: 0 1px 14px rgba(0,0,0,.4); text-wrap: balance; }

/* Les deux pages filles n'ont pas de photo d'ouverture : l'en-tête y est un
   simple titre sur le fond de la page. Le voile et le texte clair, qui n'ont
   de sens que sur une image, sont neutralisés — pas seulement le fond, sinon
   le titre sort blanc sur blanc. */
/* ⚠ La hauteur minimale et le recadrage n'existent que pour la PHOTO : hérités
   ici, ils ouvriraient 560 px de vide au-dessus d'un simple titre. */
.entete-plat { --etiquette: var(--olive); color: var(--encre);
  min-height: 0; padding: clamp(6rem, 12vw, 8rem) clamp(1.2rem, 5vw, 4rem) 0;
  border-bottom: 0; }
.entete-plat::after { content: none; }
.entete-plat h1 { text-shadow: none; font-size: clamp(2rem, 5vw, 3.2rem);
  margin-top: .6rem; max-width: 24ch; }
.entete-plat .sur { color: var(--sourdine); text-shadow: none; }

/* Le chapeau : la thèse de la page. */
.chapeau { max-width: var(--panneau); margin: 0 auto;
  padding: clamp(3.2rem, 7vw, 5rem) var(--gouttiere); text-align: center; }
.chapeau p { font-family: var(--f-display); font-size: clamp(1.15rem, 2.3vw, 1.45rem);
  font-weight: 400; line-height: 1.6; color: var(--encre); }
.chapeau p + p { margin-top: 1.1rem; }
.chapeau .filet { width: 56px; height: 2px; background: var(--or); margin: 2rem auto 0; }

/* ── Colonne de lecture ───────────────────────────────────────────────── */
.chap { max-width: var(--panneau); margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 4rem) var(--gouttiere); }
/* Le numéro romain n'est pas un ornement : les chapitres sont une SUITE
   chronologique, et le lecteur qui revient doit pouvoir s'y repérer. */
.chap-num { display: block; font-family: var(--f-display); font-size: .82rem;
  letter-spacing: .3em; color: var(--or-fonce); font-weight: 600; margin-bottom: .5rem; }
.chap h2 { font-size: clamp(1.55rem, 3.4vw, 2.15rem); font-weight: 600; margin-bottom: 1.4rem; }
/* ⚠ `--lecture` et NON `--corps` : `--corps` (1,05rem) est la mesure de
   l'INTERFACE, partagée par tout le site — la changer pour confortabiliser un
   récit emporterait les neuf écrans de console avec lui. Le récit se lit d'une
   traite, l'interface se balaye : ce sont deux besoins, donc deux réglages.
   ⚠ `--corps` valait 16,8 px et `.doc p` de la page archives ne posait AUCUNE
   taille — il retombait donc sur les 16 px du navigateur. Les trois pages se
   présentent comme un seul document coupé en trois et leur corps différait de
   huit dixièmes de pixel ; `--lecture` les remet d'accord (constaté 24/08). */
.chap p, .doc p { font-size: var(--lecture); line-height: var(--lecture-interligne);
  font-family: var(--f-lecture); }   /* la fonte du récit a son jeton dans
                                        palette.css — vaut la pile système
                                        depuis le rejet du serif système
                                        (25/08) ; une étape à venir en
                                        choisira une vraie. Ne rien changer ICI. */
.chap p { margin-bottom: 1.15rem; }
.chap p:last-child { margin-bottom: 0; }
.chap strong { font-weight: 600; }
.chap em { font-style: italic; }
.bascule { font-weight: 600; }

/* Un millésime cité seul : c'est une PIÈCE, pas une emphase de style. */
.millesime { display: block; font-family: var(--f-display);
  font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 600; letter-spacing: .12em;
  text-align: center; color: var(--encre); margin: 1.8rem 0; padding: 1.4rem 0;
  border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }

/* ── Pièces et photographies ──────────────────────────────────────────── */
.cl { margin: 2rem 0; }
.cl a, .cl > img { display: block; }
.cl img { width: 100%; border-radius: 3px; }
.cl .cadre { position: relative; display: block; border-radius: 3px; overflow: hidden;
  box-shadow: 0 16px 34px -22px rgba(26,26,26,.5); }
.cl .cadre::after { content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(197,163,92,.5); border-radius: 2px; }
.cl figcaption { font-size: .84rem; color: var(--sourdine); font-style: italic;
  margin-top: .7rem; text-align: center; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem, 2.4vw, 1.6rem); }
.duo figcaption { text-align: left; }

/* La loupe annonce que la pièce s'agrandit. Les affiches et les plans sont
   ILLISIBLES à la taille de la page — sans ce signe, personne n'essaie. */
.cl .loupe { position: absolute; right: .55rem; bottom: .55rem; z-index: 4;
  background: rgba(26,26,26,.72); color: #fff; border-radius: 999px;
  font-size: .72rem; padding: .22rem .6rem; letter-spacing: .05em; }

/* ⚠ Les clichés d'époque n'ont pas deux fois le même format : posés tels
   quels dans une grille, ils font des rangées en dents de scie et la galerie
   cesse de se lire comme un ensemble. La VIGNETTE est donc normalisée en 4/3 ;
   l'original, lui, s'ouvre entier dans la visionneuse — c'est là qu'on regarde
   vraiment une archive, et rien n'y est rogné.
   ⚠ `align-content:start` : sans lui, les légendes de longueur inégale
   étirent les rangées et décollent les images les unes des autres. */
.grille { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 2vw, 1.4rem) clamp(.8rem, 2vw, 1.4rem);
  max-width: 56rem; margin: 2rem auto 0; align-content: start; }
.grille figure { margin: 0; display: flex; flex-direction: column; }
.grille .cadre { display: block; position: relative; border-radius: 3px; overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: 0 16px 34px -22px rgba(26,26,26,.5); }
.grille .cadre img { width: 100%; height: 100%; object-fit: cover; }
.grille figcaption { font-size: .8rem; color: var(--sourdine); font-style: italic;
  margin-top: .55rem; text-align: center; }
.note-galerie { text-align: center; font-size: .83rem; color: var(--sourdine); margin-top: 1.2rem; }
/* La même note posée AVANT une galerie (Andy 25/08) : l'espace change de côté. */
/* Le texte qui REPREND après une galerie : sans respiration, il se lit comme
   une légende de la dernière image. */
.chap .apres-galerie { margin-top: 2rem; }
.creux .intro-creux { margin-bottom: 2rem; }

/* Un renvoi vers une source EXTÉRIEURE — ici les Archives départementales.
   Il ne se confond pas avec le corps du texte : c'est une pièce qu'on n'a pas
   le droit de reproduire, et le lecteur doit voir qu'il sort du site. */
.source-externe { font-size: .88rem; color: var(--sourdine); font-style: italic;
  padding-left: 1rem; border-left: 2px solid var(--bord); margin: 1.6rem 0; }
.source-externe a { color: var(--or-fonce); text-decoration: none;
  border-bottom: 1px solid rgba(197,163,92,.7); }
.source-externe a:hover { color: var(--encre); border-color: var(--encre); }

/* ── Renvois entre les trois pages ────────────────────────────────────── */
.renvoi { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.6rem;
  font-size: .92rem; color: var(--or-fonce); text-decoration: none;
  border-bottom: 1px solid rgba(197,163,92,.7); padding-bottom: .15rem; }
.renvoi:hover { color: var(--encre); border-color: var(--encre); }

.pied-nav { max-width: var(--panneau); margin: 0 auto;
  padding: 0 var(--gouttiere) clamp(3.5rem, 7vw, 5rem);
  display: flex; flex-wrap: wrap; gap: 1.6rem; }
.pied-nav a { font-size: .9rem; color: var(--sourdine); text-decoration: none; }
.pied-nav a:hover { color: var(--or-fonce); }

/* ── Ce qu'on ne sait pas ─────────────────────────────────────────────── */
.creux { background: var(--fond-tiede); border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord); --etiquette: var(--olive); }
.creux .chap { padding-top: clamp(3.4rem, 7vw, 5rem); padding-bottom: clamp(3.4rem, 7vw, 5rem); }
.question { margin-bottom: 1.6rem; }
.question h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .35rem; }
.question p { margin: 0; color: var(--sourdine); }

.appel { max-width: 44rem; margin: 0 auto clamp(3.5rem, 7vw, 5rem);
  padding: clamp(1.8rem, 4vw, 2.4rem) clamp(1.4rem, 4vw, 2.2rem);
  background: var(--surface); border: 1px solid var(--bord); border-radius: 4px;
  text-align: center; }
.appel h3 { font-size: 1.2rem; margin-bottom: .8rem; }
.appel p { color: var(--sourdine); margin-bottom: 1.2rem; }
.appel a { color: var(--or-fonce); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(197,163,92,.7); padding-bottom: .1rem; }
.appel a:hover { color: var(--encre); border-color: var(--encre); }

/* ── Chronologie ──────────────────────────────────────────────────────── */
/* ⚠ Chaque entrée porte son DEGRÉ DE SOURCE. C'est le cœur de la page : une
   frise qui aligne le documenté et l'oral sans les distinguer ment par
   omission. Le degré est un CARACTÈRE (◆ / ○) doublé d'un mot dans la légende
   — jamais la couleur seule, qui ne dit rien à qui ne la voit pas. */
.frise { max-width: 46rem; margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--gouttiere); }
.frise h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); text-align: center; margin-bottom: .7rem; }
.frise .legende { text-align: center; font-size: .8rem; color: var(--sourdine); margin-bottom: 2.2rem; }
.frise ol { list-style: none; margin: 0; padding: 0; }
.frise li { display: grid; grid-template-columns: 1.6rem 5.5rem 1fr; gap: .9rem;
  align-items: baseline; padding: .85rem 0; border-top: 1px solid var(--bord); }
.frise li:last-child { border-bottom: 1px solid var(--bord); }
.frise .deg { font-size: .7rem; line-height: 1.9; }
.frise .deg.doc { color: var(--or-fonce); }
.frise .deg.oral { color: var(--sourdine); }
.frise .an { font-family: var(--f-display); font-weight: 600; font-size: 1rem;
  font-variant-numeric: tabular-nums; }
.frise .fait { font-size: .94rem; }
.frise .fait i { font-style: italic; color: var(--sourdine); }

/* ── Visionneuse ──────────────────────────────────────────────────────── */
.visio { position: fixed; inset: 0; z-index: 200; background: rgba(20,20,20,.94);
  display: none; align-items: center; justify-content: center; padding: 2.5rem 1.2rem 4rem; }
.visio[open] { display: flex; flex-direction: column; }
.visio img { max-width: min(100%, 1400px); max-height: 82vh; object-fit: contain; border-radius: 2px; }
.visio figcaption { color: #e6e4da; font-size: .88rem; font-style: italic;
  margin-top: 1rem; text-align: center; max-width: 60ch; }
/* Le ✕ est celui du public (`modale-form.css`, `.mf-fermer`) : un seul dessin
   pour toutes les fenêtres du site. Rien à repositionner — il se met déjà au
   coin, et la visionneuse est en `position:fixed`. */

/* ⚠ `palette.css` porte le filet d'impression et de mouvement réduit : une
   section jamais entrée dans la fenêtre sortirait BLANCHE au papier. */
.reveal { opacity: 0; transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease; }
.reveal.vu { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ── Grand écran : le panneau ne bouge pas, la marge grandit ────────────
   ⚠ La colonne de lecture reste à `--panneau` quelle que soit la largeur —
   au-delà, la ligne passe 75 signes et le récit cesse d'être lisible. Ce
   qui grandit, c'est la marge, et les documents y débordent, centrés.
   ⛔ Jamais plus de 1280 px : c'est la définition des originaux, au-delà
   on agrandirait des pixels. */
@media (min-width: 1180px) {
  body {
    --interieur: calc(var(--panneau) - 4rem);   /* dedans la gouttière */
    --marge-max: 22rem;                         /* bloc = deux fois le panneau */
    --debord: min(var(--marge-max),
                  max(0px, calc((100vw - var(--panneau)) / 2 - 1.5rem)));
  }
  .chap > .cl, .chap > .duo {
    --w: min(1280px, calc(var(--interieur) + var(--debord) * 2));
    width: var(--w);
    margin-inline: calc((var(--w) - var(--interieur)) / -2);
    margin-top: 2.6rem; margin-bottom: 2.2rem;
  }
  .chap > .cl figcaption { max-width: var(--panneau); margin-inline: auto; }

  /* Un document HAUT : la hauteur commande, la largeur suit — sinon le cadre
     blanc dépasse l'image de plusieurs centimètres. */
  .chap > .cl.port {
    width: fit-content; margin-inline: 0;
    max-width: min(886px, calc(var(--interieur) + var(--debord) * .9));
    position: relative; left: 50%; transform: translateX(-50%);
  }
  .chap > .cl.port img { max-height: 78vh; max-width: none;
                         width: auto; height: auto; }

  .chap .grille { max-width: calc(var(--interieur) + var(--debord) * 2);
                  margin-inline: calc(-1 * var(--debord));
                  grid-template-columns: repeat(4, 1fr); }
}

/* ── Rail des chapitres — n'existe que si la marge peut le loger ────────
   ⚠ Posé sur la marge, jamais sur le panneau : `.chap` est un `.reveal` et
   son `transform` est déjà pris. */
@media (min-width: 1860px) {
  #rail {
    position: fixed; top: 24vh; width: 11rem; z-index: 5;
    right: calc(50% + min(640px, calc(var(--interieur) / 2 + var(--debord))) + 3rem);
    font-family: var(--f-display); font-size: .86rem; line-height: 1.4;
    color: var(--sourdine);
  }
  #rail a { display: block; text-decoration: none; color: inherit;
            text-wrap: balance; padding: .26rem 0 .26rem .9rem;
            border-left: 2px solid rgba(197,163,92,.3); }
  #rail a:hover { color: var(--encre); }
  #rail a.on { color: var(--encre); border-left-color: var(--or); font-weight: 600; }
}
@media (max-width: 1859px) { #rail { display: none; } }

@media (max-width: 820px) { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .duo { grid-template-columns: 1fr; }
  .grille { grid-template-columns: 1fr; max-width: 22rem; }
  .frise li { grid-template-columns: 1.4rem 1fr; row-gap: .2rem; }
  .frise .fait { grid-column: 2; }
}

/* Sans ceci le navigateur coupe le coréen au milieu des mots — invisible en
   relecture française. */
:lang(ko) { word-break: keep-all; }

/* ── Citations d'archives ────────────────────────────────────────────────
   Le chapitre IV tient debout sur ses citations : c'est le texte de 1926,
   de 1931, de 1937 qui parle, pas nous. Il faut que l'œil sache d'un coup
   quand il lit un original et quand il lit notre commentaire — sans quoi
   les deux voix se confondent et la citation perd sa valeur de preuve.
   ⛔ Aucune couleur nouvelle : les jetons de `palette.css` font foi. */
.chap .cit { margin: 1.6rem 0; padding: .15rem 0 .15rem 1.25rem;
             border-left: 2px solid var(--or); font-family: var(--f-display);
             font-size: 1.06em; font-style: italic; color: var(--encre); }
.chap .cit p { margin-bottom: .6rem; }
.chap .cit p:last-child { margin-bottom: 0; }

/* Le degré de source, quand il porte sur UN paragraphe et non sur la page.
   La page annonce trois degrés ; là où le degré n'est pas « document », il
   doit se lire à côté de la phrase, pas seulement dans la légende de la
   chronologie. */
.chap .grade { display: block; font-size: .86rem; color: var(--sourdine);
               border-left: 2px solid var(--bord); padding-left: .9rem;
               margin: -.35rem 0 1.15rem; }

/* L'encadré de fin de chapitre : ce que ce chapitre-là laisse ouvert.
   Même rôle que le chapitre « Ce que nous cherchons encore », à l'échelle
   d'un chapitre. Depuis le 25/08 (Andy) il habille aussi NOTRE voix quand
   elle coupe le récit des documents (du Bel, 1944) : fond, italique — le
   lecteur voit que ce n'est plus le document qui parle. */
.chap .encadre { margin: 2rem 0 0; padding: 1.1rem 1.25rem;
                 background: var(--fond-tiede); border: 1px solid var(--bord);
                 border-radius: 2px; }
.chap .encadre p { margin: 0; font-style: italic; color: var(--sourdine); }
.chap .encadre p + p { margin-top: .5rem; }
/* Un encadré qui n'est PAS le dernier du chapitre — du Bel, 1944 — a du texte
   après lui : sans marge basse, le paragraphe suivant collait au cadre (Andy,
   capture 25/08). 2rem en bas comme en haut ; l'encadré de fin de chapitre
   garde 0, la section ferme derrière lui. */
.chap .encadre:not(:last-child) { margin-bottom: 2rem; }

/* La période couverte par un chapitre, sous son titre. Le chapitre IV couvre
   vingt-deux ans : sans cette ligne, le lecteur croit lire une date. */
.chap .periode { display: block; font-family: var(--f-display); font-size: .9rem;
                 letter-spacing: .08em; color: var(--sourdine);
                 margin: -1rem 0 1.6rem; }

/* ── Les SEUILS n'existent plus (25/08) ─────────────────────────────────
   Du 22 au 25/08 la page avait deux sections `.seuil` — un quart d'écran de
   blanc, un filet, une date seule sur sa ligne — pour marquer les deux
   bascules de voix (NOUS → les DOCUMENTS → NOUS). Andy a changé la règle le
   25/08 : le registre coréen suit ce qui est DIT (fait = 「~다」, notre voix =
   poli), et notre voix se voit par l'ENCADRÉ, pas par le blanc. Le seuil ①
   est replié dans le chapitre II en paragraphes ordinaires ; le seuil ② est
   l'encadré de fin du chapitre VII. `.seuil`, `.seuil-date`, `.filet-seuil`
   sont retirés avec eux — une règle sans usage est un piège pour qui la
   relit comme un dispositif vivant. */