/* Theme par defaut — parti « livre » (I3).
   ⚙ COPIE, PAS CONCEPTION. Tailles, marges, couleurs et conventions sont reprises
   telles quelles de exemples/harp-tdm-livre-des-joueurs/css/styles.css.
   L'original complet est garde en reference dans outil/reference/, pour y revenir.
   Ne sont copiees que les regles qui portent sur ce qu'on genere : les selecteurs
   du site sans emploi ici (#toc, .table-critiques, .column-buttons, .content-section,
   #search, .grand-titre, .container_sommaire, .middot) ne sont pas repris.

   ⚠ Les seuls blocs qui ne viennent PAS du site sont ceux que la structure a trois
   zones impose (I1) et que le site n'avait pas : .site, .panneau-gauche, .arbre,
   .panneau-droit. Leur typographie est calquee sur le #toc de l'original. Rien
   d'autre n'a ete invente. */

@font-face {
  font-family: "PT Serif";
  src: url("fontes/pt-serif-v9-latin-regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("fontes/pt-serif-v9-latin-italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("fontes/pt-serif-v9-latin-700.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("fontes/pt-serif-v9-latin-700italic.woff") format("woff");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cormorant Upright";
  src: url("fontes/CormorantUpright-Medium-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fontes/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fontes/OpenSans-Italic-webfont.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fontes/OpenSans-Semibold-webfont.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fontes/OpenSans-Bold-webfont.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --color-body-background: rgb(253, 236, 224);
  --color-aside-background: rgba(117, 48, 55, 0.7);
  --color-article-background: rgb(237, 221, 209);

  --color-h1-5: rgb(117, 48, 55);

  --color-text: rgb(50, 50, 50);
  --color-blockquote: rgb(80, 80, 80);
  --color-blockquote-borders: rgba(117, 48, 55, 0.3);

  --color-links: rgb(11, 82, 151);
  --color-links-hover: rgb(8, 65, 120);

  --color-aside-links: rgb(253, 236, 224);
  --color-aside-links-hover: rgb(255, 255, 255);

  --color-table-thead-bg: rgba(117, 48, 55, 0.1);
  --color-table-borders: rgba(117, 48, 55, 0.3);

  --color-side-note: rgb(31, 73, 125);

  /* ⚠ Seule couleur qui ne vient pas du site : il n'a pas de panneau droit. */
  --color-panneau-droit: rgba(117, 48, 55, 0.06);
  /* Le meme ton, mais opaque : rgba(117,48,55,.06) aplati sur le fond de page.
     ⛔ Ne jamais reutiliser la variable transparente pour un fond pose SUR le
     panneau — les deux couches se cumulent et dessinent un rectangle plus
     fonce. Defaut vu a l'ecran derriere le titre du sommaire, 2026-08-06. */
  --color-panneau-droit-opaque: rgb(245, 225, 214);

  --fonte-texte: "PT Serif", Georgia, "Times New Roman", serif;
  --fonte-titre: "Cormorant Upright", Verdana, Arial, Helvetica, sans-serif;
  --fonte-interface: "Open Sans", Verdana, Arial, Helvetica, sans-serif;

  --largeur-panneau: 290px;
  --largeur-texte: 680px; /* 620 de texte + 30 de marge de chaque cote */

  /* Loupe des legendes zoomables. Servie en `mask`, donc seule sa forme compte :
     la couleur du trait est sans effet, c'est `currentColor` qui peint. */
  --icone-loupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='6.9' cy='6.9' r='4.6'/%3E%3Cpath d='M10.4 10.4 14 14'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--color-body-background);
  font-family: var(--fonte-texte);
  color: var(--color-text);
  font-size: 17px;
}

/* align-items: stretch (defaut) + min-height : les trois colonnes descendent
   jusqu'en bas, quelle que soit la longueur du texte. Le contenu de chaque
   panneau reste colle en haut grace au .dedans en position sticky. */
.site {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  width: calc(var(--largeur-panneau) * 2 + var(--largeur-texte));
  margin: 0 auto;
}

/* ⚠ Le retrait du haut se porte **dans** `.dedans`, pas sur le panneau. Quand
   le panneau portait ce `padding-top` et que `.dedans` collait a `top: 0`, le
   contenu demarrait 30 px plus bas puis remontait d'autant au premier coup de
   molette : le haut de la colonne « bougeait ». Constate a l'ecran le
   2026-08-06, et present sans JavaScript — c'est du CSS, pas le suivi.

   ⛔ Ne pas corriger en poussant `top` et en rognant `max-height` : essaye le
   meme jour, la manoeuvre fait deborder un panneau qui tenait au pixel pres, et
   la barre de defilement apparait et decale toute la colonne. */
.panneau-gauche .dedans,
.panneau-droit .dedans {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
}

/* ------------------------------------------------------------------ */
/*  Barres de defilement — remplace jquery.mCustomScrollbar            */
/* ------------------------------------------------------------------ */
/* Comportement d'origine repris a l'identique : invisible au repos
   (`mCS-autoHide`, opacity 0), apparait au survol de la colonne, et reste
   un filet fin (le plugin dessinait un curseur de 4 px sur un rail de 2 px).
   Deux ecritures : la propriete standard, et les pseudo-elements WebKit pour
   les Chromium anterieurs a la version 121. Celui qui comprend la standard
   ignore l'autre — les deux donnent le meme comportement.
   ⚙ Zero JavaScript : les 2 000 lignes de jQuery du site n'ont plus d'emploi. */

.panneau-gauche .dedans,
.panneau-droit .dedans {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.25s ease;
}
.panneau-gauche:hover .dedans { scrollbar-color: rgba(253, 236, 224, 0.5) transparent; }
.panneau-droit:hover .dedans { scrollbar-color: rgba(117, 48, 55, 0.35) transparent; }

.panneau-gauche .dedans::-webkit-scrollbar,
.panneau-droit .dedans::-webkit-scrollbar { width: 8px; }
.panneau-gauche .dedans::-webkit-scrollbar-track,
.panneau-droit .dedans::-webkit-scrollbar-track { background: transparent; }
.panneau-gauche .dedans::-webkit-scrollbar-thumb,
.panneau-droit .dedans::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color 0.25s ease;
}
.panneau-gauche:hover .dedans::-webkit-scrollbar-thumb { background-color: rgba(253, 236, 224, 0.5); }
.panneau-droit:hover .dedans::-webkit-scrollbar-thumb { background-color: rgba(117, 48, 55, 0.35); }

/* ⛔ La barre du document n'est pas touchee : elle reste celle du navigateur. */

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/*  Navigation sans flash — CSS pur, aucun JavaScript                   */
/* ------------------------------------------------------------------ */
/*
 * Le navigateur conserve l'image de la page quittee jusqu'a ce que la suivante
 * soit prete, puis ne remplace que ce qu'on lui designe. Les deux panneaux et le
 * fond ne sont donc jamais repeints : seule la colonne de texte se renouvelle.
 *
 * ⚠ Ce n'est PAS ce qui causait le flash observe en local — c'etait le serveur
 * d'apercu qui renvoyait `no-store` et faisait retelecharger 133 Ko de fontes a
 * chaque page. Ceci vient en plus, pour la latence reelle d'un hebergement
 * mutualise. Sans prise en charge par le navigateur, la navigation reste normale.
 */
@view-transition { navigation: auto; }

.colonne-texte { view-transition-name: colonne-texte; }

/* Le fond et les panneaux ne bougent pas : on coupe l'animation de la racine. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

::view-transition-old(colonne-texte) { animation: fondu-sortant 90ms ease-out both; }
::view-transition-new(colonne-texte) { animation: fondu-entrant 140ms ease-in both; }

@keyframes fondu-sortant { to { opacity: 0; } }
@keyframes fondu-entrant { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(colonne-texte),
  ::view-transition-new(colonne-texte) { animation: none; }
}

/* ------------------------------------------------------------------ */
/*  Panneau gauche — se situer dans le site (I1, I2)                   */
/* ------------------------------------------------------------------ */

.panneau-gauche {
  width: var(--largeur-panneau);
  flex: 0 0 var(--largeur-panneau);
  background-color: var(--color-aside-background);
  color: var(--color-aside-links);
  font-family: var(--fonte-interface);
}
.panneau-gauche .dedans { padding: 20px 10px 0; }
.panneau-droit .dedans { padding: 20px 20px 0; }

/* Entete du panneau : une seule rangee — accueil, champ, lancement (2026-08-08).
   Le titre du site a quitte la colonne : la maison le remplace comme retour a
   l'accueil, et le nom du site reste dans le `title` du lien et l'onglet. */
.entete {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 10px 16px;
}

/* ⚙ Les deux icones sont posees en **masque**, pas en image : le SVG d'origine
   est bicolore (noir et beige), et le masque n'en garde que la forme. La teinte
   vient donc de la CSS — meme couleur que les titres du menu, et le survol
   fonctionne. Ne pas repasser en `background-image` : le noir reviendrait. */
.vers-accueil,
.lancer-recherche {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background-color: var(--color-aside-links);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  cursor: pointer;
}
.vers-accueil {
  -webkit-mask-image: url(icone-accueil.svg);
  mask-image: url(icone-accueil.svg);
}
.lancer-recherche {
  -webkit-mask-image: url(icone-recherche.svg);
  mask-image: url(icone-recherche.svg);
}
.vers-accueil:hover,
.lancer-recherche:hover { background-color: var(--color-aside-links-hover); }

.recherche {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(253, 236, 224, 0.35);
  background-color: rgba(253, 236, 224, 0.1);
  color: var(--color-aside-links);
  font-family: var(--fonte-interface);
  font-size: 12px;
}
.recherche::placeholder { color: rgba(253, 236, 224, 0.5); }

.recherche:hover {
  border-color: rgba(253, 236, 224, 0.6);
  background-color: rgba(253, 236, 224, 0.16);
}
/* Au focus, le liseré devient franc — c'est le seul reperage du curseur dans une
   colonne sans autre champ. `outline` en plus du bord : la bordure seule ne suffit
   pas en contraste force. */
.recherche:focus {
  outline: 1px solid var(--color-aside-links-hover);
  outline-offset: -2px;
  border-color: var(--color-aside-links-hover);
  background-color: rgba(253, 236, 224, 0.2);
  color: var(--color-aside-links-hover);
}

/* Arbre : cale sur la capture du site en service — pas de filet vertical,
   pas de gras sur les branches, pas de puce. Seule la page courante porte
   un bandeau clair. */
/* Indentation de l'arbre — reglable, parce que la profondeur depend du site.
   Le panneau fait 290 px : a pas constant, un huitieme niveau ne laisserait plus
   que 148 px au titre. Le pas se resserre donc a partir du quatrieme cran, la ou
   la hierarchie est deja lisible et ou c'est la place qui manque. */
.arbre {
  --arbre-gouttiere: 10px;
  --arbre-pas: 16px;
  --arbre-pas-profond: 9px;
}
.arbre, .arbre ul { list-style: none; margin: 0; padding: 0; }
.arbre ul { padding-left: var(--arbre-pas); }
.arbre ul ul ul ul { padding-left: var(--arbre-pas-profond); }
.arbre li { margin: 0; background-image: none; }
.arbre a, .arbre .sans-accueil {
  display: flex;
  align-items: flex-start;
  /* ⚠ Le padding gauche est repris par la gouttiere, au pixel : les titres
     restent exactement ou ils etaient — 20 px du bord, 36 px au second niveau. */
  padding: 4px 10px 4px 0;
  color: var(--color-aside-links);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
}
.arbre a:hover { background-color: rgba(253, 236, 224, 0.12); color: var(--color-aside-links-hover); }
.arbre .sans-accueil { opacity: 0.6; cursor: default; }
.arbre .actif > a { background-color: rgba(253, 236, 224, 0.25); color: var(--color-aside-links-hover); }

/* La gouttiere : une colonne qui ne porte qu'un symbole, ou rien. Elle vaut pour
   toutes les entrees, y compris les pages — sans quoi les titres se decaleraient
   d'une ligne a l'autre. Le chevron est dessine, pas ecrit : aucun glyphe a avoir
   dans la fonte, et il tourne de 90° au lieu de changer de caractere. */
.arbre .gouttiere { flex: 0 0 var(--arbre-gouttiere); position: relative; align-self: stretch; }
.arbre .gouttiere.replie::before,
.arbre .gouttiere.ouvert::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.65;
}
.arbre .gouttiere.replie::before { transform: rotate(-45deg); }
.arbre .gouttiere.ouvert::before { transform: rotate(45deg); }
.arbre a:hover .gouttiere::before { opacity: 1; }

/* ------------------------------------------------------------------ */
/*  Colonne centrale — lire                                            */
/* ------------------------------------------------------------------ */

/* ⚠ Les 800 px du bas viennent du site en service (`article`, styles.css l. 45)
   et ne sont pas une marge d'agrement — ils font deux choses :

   1. **Ancres constantes.** Sans cette reserve, le navigateur n'a plus de course
      pour les derniers titres : cliquer une entree de fin dans le sommaire les
      laisse au milieu ou en bas de l'ecran. Avec elle, le titre vient toujours
      se poser en haut de la zone affichee, ou qu'il soit dans la page.
   2. **Pas de saut lateral.** Meme les pages courtes depassent alors la hauteur
      de l'ecran et gardent leur barre de defilement. Sans cela, passer d'une
      page longue a une page courte fait disparaitre la barre et decale toute
      la mise en page de sa largeur.

   ⛔ Ne pas « optimiser » cette valeur : elle avait ete ramenee a 120 px, ce qui
   a coute les deux comportements. Retablie le 2026-08-06. */
.colonne-texte {
  width: var(--largeur-texte);
  flex: 0 0 var(--largeur-texte);
  background-color: var(--color-article-background);
  padding: 0 30px 800px;
  min-height: 100vh;
}

article { text-align: justify; }

/* --- Titres --- */

article h1, article h2, article h3, article h4, article h5 {
  font-family: var(--fonte-titre);
  font-weight: normal;
  font-style: normal;
  color: var(--color-h1-5);
  line-height: 1;
  text-align: left;
  hyphens: none;
}
article h1 {
  font-size: 75px;
  padding-top: 30px;
  padding-bottom: 20px;
  margin-top: 20px;
  margin-bottom: 30px;
}
article h2 { font-size: 55px; line-height: 1.1; margin-top: 25px; margin-bottom: 15px; }
article h3 { font-size: 40px; margin-top: 20px; margin-bottom: 5px; }
article h4 { font-size: 30px; margin-top: 15px; margin-bottom: 5px; }

/* h5 = legende de tableau (I8). Rendu tel quel, ni ancre ni sommaire. */
article h5 { font-size: 25px; margin-top: 10px; margin-bottom: 3px; }

/* h6 = side note (I8). Convention editoriale deliberee, pas un titre. */
article h6 {
  float: right;
  width: 300px;
  height: auto;
  margin: 3px 0 10px 20px;
  padding: 10px;
  background-color: rgba(31, 73, 125, 0.05);
  text-align: left;
  font-family: var(--fonte-interface);
  font-size: 13px;
  font-weight: normal;
  text-indent: 0;
  line-height: 1.5;
  color: var(--color-text);
}
article h6 strong {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: var(--color-side-note);
}

/* --- Texte courant --- */

/*
 * Cesures francaises. `hyphens: auto` seul coupait a deux lettres ; les limites
 * ci-dessous ramenent 133 coupures a 93 sur une page mesuree le 2026-08-06 :
 * jamais de coupure sous 6 lettres, jamais moins de 3 lettres d'un cote.
 * ⚠ Le dictionnaire est celui du navigateur, et il ne connait aucun nom invente :
 * ceux-la se protegent un par un, par `motsInsecables` dans `projet.json`.
 */
article p, article li, article td, article dd, article blockquote {
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
article .insecable { hyphens: manual; }

p {
  font-weight: normal;
  line-height: 1.5;
  text-indent: 0;
  margin: 0;
  padding-bottom: 5px;
  hyphens: auto;
}

a { text-decoration: none; color: var(--color-links); }
a:hover { color: var(--color-links-hover); }

strong { font-weight: 700; }
em { font-style: italic; }

/* --- Listes --- */

ul { margin-top: 5px; margin-bottom: 0; padding-left: 0; }
ul ul { margin-top: 5px; margin-left: 20px; margin-right: 0; }
article ul li {
  margin: 0 0 5px;
  font-family: var(--fonte-texte);
  font-weight: normal;
  text-align: left;
  line-height: 1.5;
  list-style-type: none;
  background-image: url("puce.png");
  background-repeat: no-repeat;
  background-position: 0 10px;
  padding-left: 12px;
}

ol { counter-reset: li; margin-left: 0; padding-left: 0; font-size: 17px; }
ol > li {
  font-family: var(--fonte-texte);
  font-size: 16px;
  font-weight: normal;
  text-align: left;
  line-height: 1.5;
  position: relative;
  margin: 0 0 0 20px;
  padding: 4px 8px;
  list-style: none;
  background-image: none;
}
ol > li::before {
  content: counter(li) ".";
  counter-increment: li;
  text-align: left;
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  margin-right: 8px;
  padding-top: 4px;
  font-family: var(--fonte-texte);
  font-weight: 700;
  color: var(--color-h1-5);
}
li ol { margin-top: 6px; }
ol ol li:last-child { margin-bottom: 0; }
ol.upper-alpha > li::before { content: counter(li, upper-alpha); text-align: center; }
ol.upper-roman > li::before { content: counter(li, upper-roman); text-align: center; }

/* --- Listes de definition --- */

dl { margin-bottom: 5px; }
dt { float: left; clear: left; line-height: 1.5; padding-right: 5px; color: var(--color-h1-5); font-weight: 700; }
dt::after { content: " ‣"; font-family: var(--fonte-texte); color: #706e6e; font-size: 16px; font-weight: normal; }
dd { line-height: 1.5; padding-left: 35px; padding-bottom: 5px; margin-left: 0; }
dd p { padding-left: 0; margin-left: 0; margin-bottom: 10px; }

/* --- Citations --- */

blockquote {
  margin: 20px 0;
  padding: 15px 20px 10px;
  border-left: 3px solid var(--color-blockquote-borders);
  border-right: 3px solid var(--color-blockquote-borders);
}
blockquote p { font-style: italic; margin-bottom: 0; color: var(--color-blockquote); }

/* --- Notes de bas de page --- */

/* Masquage accessible : le contenu reste lu par un lecteur d'ecran, il ne
   s'affiche pas. Sans cette regle, remark-gfm ecrit `class="sr-only"` sur le
   titre de la section des notes et le titre s'affiche en clair. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* L'appel dans le texte : un exposant qui se voit sans peser sur la ligne. */
sup a[data-footnote-ref] {
  padding: 0 1px;
  text-decoration: none;
  font-family: var(--fonte-interface);
  font-size: 11px;
  font-weight: 600;
}

.footnotes {
  margin-top: 40px;
  padding-top: 12px;
  border-top: 1px solid var(--color-table-borders);
  font-size: 14px;
  color: var(--color-blockquote);
}
.footnotes ol { font-size: 14px; }
.footnotes ol > li { font-size: 14px; line-height: 1.45; }
.footnotes p { font-size: 14px; line-height: 1.45; margin-bottom: 6px; }

/* Le retour a l'appel. Une note citee vingt fois en aligne autant : discrets,
   ils restent cliquables sans manger la note. */
.footnotes .data-footnote-backref {
  text-decoration: none;
  font-size: 13px;
  opacity: 0.65;
}
.footnotes .data-footnote-backref:hover { opacity: 1; }

/* La note visee par un renvoi se signale — sinon on atterrit dans une liste
   sans savoir laquelle on cherchait. */
.footnotes li:target { background-color: var(--color-table-thead-bg); }

/* --- Tableaux --- */

table {
  margin: 15px 0;
  border-width: 0;
  border-spacing: 0;
  border-collapse: collapse;
  font-family: var(--fonte-interface);
  border-top: 1px solid var(--color-table-borders);
  border-bottom: 1px solid var(--color-table-borders);
  background-color: var(--color-article-background);
  hyphens: none;
}
thead {
  color: var(--color-text);
  font-weight: 600;
  font-size: 12px;
  background-color: var(--color-table-thead-bg);
}
td, th { line-height: 1.4; padding: 3px 10px; font-size: 12px; }
table tr th { font-weight: 700; text-align: left; margin: 0; padding: 6px 13px; }
table tr td { text-align: left; }
table > tbody > tr > td:first-child { font-weight: 700; white-space: nowrap; }

.simple table { margin-top: 15px; font-size: 12px; line-height: 1.3; }
.simple th { background-color: var(--color-table-thead-bg); padding: 5px 10px 2px; color: var(--color-side-note); }
.simple thead { color: var(--color-side-note); }
.simple td, .simple th {
  padding: 3px 10px;
  border-width: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.simple tbody > tr > td:first-child { font-weight: normal; vertical-align: text-bottom; }

/* --- Images et figures — convention majeure du corpus (203 occurrences) --- */

img { max-width: 100%; height: auto; margin: 0; }
figure { display: block; margin: 15px 0; text-align: center; }

/*
 * Image d'intro — la premiere chose d'une page, seule dans son paragraphe.
 * `.colonne-texte` ne porte de padding que sur ses cotes (`0 30px 800px`) : sans
 * cette regle l'image touche le haut de la fenetre. On lui donne les memes 30 px,
 * pour qu'elle s'aligne sur la gouttiere qui la separe de la colonne de gauche.
 *
 * ⚙ Le concept d'origine — une intro couvrant toute la largeur moins le menu — est
 * caduc depuis l'arrivee de la colonne de droite : l'image tient dans la colonne de
 * texte comme les autres, et c'est le blanc au-dessus qui la detache.
 */
article > p:first-child:has(> img:only-child) { margin: 30px 0 0; }
figcaption {
  font-family: var(--fonte-interface);
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  color: var(--color-h1-5);
  margin-top: 10px;
  text-align: center;
}
/*
 * Classes de figure des KirbyTags (D9). Reprises de la feuille du site en service
 * — largeurs et flottements a l'identique ; seul le fond bleu d'origine devient la
 * teinte du theme. La colonne de texte fait 620 px : `figure-centre-big` la remplit.
 */
.illus { width: 100%; margin: 20px 0; }
.figure-centre-big { width: 100%; margin: 20px 0; padding: 10px; background-color: var(--color-table-thead-bg); }
.figure-droite-big,
.figure-droite,
.figure-droite-small {
  float: right;
  height: auto;
  margin: 3px 0 10px 15px;
  padding: 10px;
  background-color: var(--color-table-thead-bg);
  text-align: center;
}
.figure-droite-big { width: 300px; }
.figure-droite { width: 240px; }
.figure-droite-small { width: 170px; padding: 5px; }

/*
 * Plein ecran d'une figure `lightbox`, sans une ligne de JavaScript : le calque est
 * masque tant que son id n'est pas la cible de l'URL. Cliquer la vignette l'ouvre,
 * cliquer le calque renvoie a l'ancre de la figure — donc a l'endroit exact du texte.
 */
/*
 * ⛔ Le `z-index: 100` ci-dessous ne suffit PAS a lui seul, et c'est contre-intuitif :
 * `.colonne-texte` porte `view-transition-name`, ce qui en fait un CONTEXTE
 * D'EMPILEMENT. Le calque y est enferme — son 100 ne vaut qu'a l'interieur de la
 * colonne. Le panneau droit etant `position: sticky`, donc positionne, il se peint
 * apres tout le contenu non positionne de la colonne : le sommaire passait devant
 * la carte agrandie. Constate a l'ecran le 2026-08-08 sur `le-cardolan`.
 *
 * On hausse donc la COLONNE tant qu'un calque est ouvert. ⚙ Preferer ceci a
 * `view-transition-name: none` : on ajoute une regle d'empilement au lieu de
 * desactiver la navigation sans flash.
 */
.colonne-texte:has(.plein-ecran:target) { position: relative; z-index: 200; }

.plein-ecran { display: none; }
.plein-ecran:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 2vh 2vw;
  background: rgba(20, 8, 10, 0.92);
  cursor: zoom-out;
}
.plein-ecran:target img { max-width: 96vw; max-height: 96vh; width: auto; height: auto; }
figure a { cursor: zoom-in; border: 0; }
/* Image zoomable hors figure — convention `-zoom` sur le nom du fichier. */
span.zoomable { display: inline-block; }
a.zoom { cursor: zoom-in; border: 0; }

/*
 * Loupe en tete de legende, sur les seules figures qui s'ouvrent : elle annonce
 * l'affordance, que rien d'autre ne signale a l'arret. Dessinee en `mask` plutot
 * qu'en `background` pour suivre `currentColor` — la legende change de teinte, la
 * loupe suit. Dimensionnee en `em` : c'est la taille du texte, pas une constante.
 * ⚙ Data-URI, donc aucune requete externe (cahier des charges 3.2).
 */
figure.zoomable > figcaption::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.14em;
  background: currentColor;
  -webkit-mask: var(--icone-loupe) no-repeat center / contain;
  mask: var(--icone-loupe) no-repeat center / contain;
}
@media print { figure.zoomable > figcaption::before { display: none; } }
@media print { .plein-ecran { display: none !important; } }

.bandeau, .pleine-largeur { margin: 15px 0; }
.droite { float: right; margin-left: 15px; margin-top: 5px; border-radius: 8px; border: 1px solid var(--color-h1-5); }

/* ------------------------------------------------------------------ */
/*  Panneau droit — se situer dans la page (I1, I9)                    */
/* ------------------------------------------------------------------ */

.panneau-droit {
  width: var(--largeur-panneau);
  flex: 0 0 var(--largeur-panneau);
  /* Le retrait du haut vit dans `.dedans` — voir la note sur le sticky. */
  font-family: var(--fonte-interface);
  /* ⚠ Teinte a valider : le site n'a pas de panneau droit, il n'y a rien a copier.
     Lavis de bordeaux tres clair, cale sur --color-table-thead-bg, pour que la
     colonne se lise comme une colonne sans concurrencer le texte. */
  background-color: var(--color-panneau-droit);
}
/* Le titre reste en tete pendant que la liste defile sous lui. Sans cela il
   part vers le haut des que le sommaire suit la lecture — le haut de la colonne
   « bouge », defaut vu a l'ecran le 2026-08-06 sur `10 · Themes architecturaux`.
   Le fond opaque est indispensable : les entrees passent dessous. */
.titre-panneau {
  font-family: var(--fonte-titre);
  font-weight: normal;
  font-size: 25px;
  color: var(--color-h1-5);
  margin: 0;
  padding: 0 0 10px;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--color-panneau-droit-opaque);
}
.sommaire { list-style: none; margin: 0; padding: 0; }
.sommaire li {
  font-size: 12px;
  line-height: 1.5;
  background-image: none;
  list-style: none;
  padding: 2px 0 2px 5px;
  margin: 0 15px 0 0;
  text-indent: 0;
}
/* Titre actif suivi au defilement. Le fond est celui du `.toc-active` du site
   en service, repris tel quel — rien d'invente. */
.sommaire li.toc-active {
  background-color: rgba(188, 176, 160, 0.2);
}
.sommaire .n2 { padding-left: 15px; }
.sommaire .n3 { padding-left: 27px; }
.sommaire .n4 { padding-left: 39px; }
.panneau-droit .vide { font-size: 12px; opacity: 0.5; font-style: italic; }
.sommaire-genere { font-size: 19px; line-height: 1.8; }

/* ------------------------------------------------------------------ */
/*  Recherche plein texte — `recherche-plein-texte.md`                 */
/* ------------------------------------------------------------------ */

/* Les resultats prennent la place du contenu dans la colonne centrale (decision du
   9 aout 2026 : c'est la qu'il y a de la place). Le sommaire de droite n'a plus d'objet
   pendant ce temps — il decrit une page qui n'est plus affichee. Son titre passe a
   « Resultats » par le script, sa liste s'efface ici et cede la place a la liste des
   pages trouvees. */
body.en-recherche .sommaire,
body.en-recherche .panneau-droit .vide { display: none; }

/* Cale sur `.sommaire`, dont c'est le meme office : se situer dans ce qui est affiche.
   Un titre de page tient rarement sur une ligne — d'ou le retrait de continuation. */
.resultats-liens { list-style: none; margin: 0; padding: 0; }
.resultats-liens li {
  font-size: 12px;
  line-height: 1.5;
  background-image: none;
  list-style: none;
  padding: 3px 0 3px 5px;
  margin: 0 15px 0 0;
  text-indent: -8px;
  padding-left: 13px;
}
.resultats-liens li.toc-active { background-color: rgba(188, 176, 160, 0.2); }

.recherche-compte {
  font-family: var(--fonte-interface);
  font-size: 13px;
  color: var(--color-h1-5);
  text-align: left;
  padding-top: 30px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--color-table-borders);
  padding-bottom: 12px;
}
.recherche-message {
  font-family: var(--fonte-interface);
  font-size: 13px;
  text-align: left;
  padding-top: 30px;
  font-style: italic;
  opacity: 0.7;
}

/* ⚠ C'est un `ol` — l'ordre des resultats est l'information principale. Mais le rang
   ne s'ecrit pas : le compteur du thème, cale sur les listes du corps, poserait un
   « 1. » en exposant a gauche de chaque titre. */
.resultats { list-style: none; margin: 0; padding: 0; }
.resultats > li {
  list-style: none;
  background-image: none;
  text-indent: 0;
  position: static;
  padding: 0;
  margin: 0 0 26px;
}
.resultats > li::before { content: none; }

.resultat-titre {
  display: block;
  font-family: var(--fonte-titre);
  font-size: 30px;
  line-height: 1.2;
  color: var(--color-h1-5);
  margin-bottom: 4px;
}
.resultat-titre:hover { color: var(--color-links); }

/* Le compte d'occurrences, qui explicite le tri. En fonte d'interface et en petit :
   c'est une indication de service, pas un morceau du titre. */
.resultat-compte {
  font-family: var(--fonte-interface);
  font-size: 12px;
  color: var(--color-text);
  opacity: 0.55;
  /* `white-space: nowrap` : « (12 occurrences) » ne se coupe pas en fin de ligne. */
  white-space: nowrap;
}

/* ⚙ `text-align: left`, contre le `justify` de l'article : un extrait est un fragment,
   il commence et finit sur des mots coupes. Justifie, il ecarte les mots pour remplir
   une ligne que le texte d'origine ne remplissait pas. */
.resultat-extrait {
  display: block;
  font-family: var(--fonte-texte);
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
  color: var(--color-text);
  border-left: 2px solid var(--color-blockquote-borders);
  padding: 2px 0 2px 12px;
  margin: 5px 0 0;
}
.resultat-extrait:hover {
  color: var(--color-text);
  border-left-color: var(--color-h1-5);
  background-color: rgba(117, 48, 55, 0.05);
}
.resultat-extrait mark {
  background-color: rgba(117, 48, 55, 0.16);
  color: inherit;
  font-weight: 700;
  padding: 0 1px;
}

.recherche-suite {
  font-family: var(--fonte-interface);
  font-size: 13px;
  color: var(--color-links);
  background: none;
  border: 1px solid var(--color-table-borders);
  padding: 8px 16px;
  cursor: pointer;
}
.recherche-suite:hover {
  color: var(--color-links-hover);
  border-color: var(--color-h1-5);
}

/* ⚙ Une cible d'ancre ne se colle pas au bord haut de la fenetre. Sans cette marge, le
   passage atteint depuis un resultat arrive rasant, sans rien de ce qui le precede —
   et son surlignage se fait couper par le bord. Vaut pour les titres autant que pour
   les paragraphes : on arrive au meme endroit par le sommaire et par la recherche, ca
   doit se presenter pareil. */
article [id] { scroll-margin-top: 24px; }

/* Le passage vise par un resultat — il s'eteint tout seul, le script retire la classe.
   ⛔ Ni marge ni bordure : le fond seul, pour que rien ne bouge a l'arrivee. Un bloc
   qui s'elargit d'un pixel decale tout ce qui suit, juste sous les yeux du lecteur. */
.passage-vise {
  background-color: rgba(117, 48, 55, 0.14);
  box-shadow: 0 0 0 6px rgba(117, 48, 55, 0.14);
  border-radius: 2px;
  animation: passage-vise 2.6s ease-out both;
}
@keyframes passage-vise {
  0%, 55% { background-color: rgba(117, 48, 55, 0.14); box-shadow: 0 0 0 6px rgba(117, 48, 55, 0.14); }
  100% { background-color: transparent; box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .passage-vise { animation: none; }
}

/* ------------------------------------------------------------------ */
/*  Impression — feuille simple a l'echelle de la page (I11)           */
/* ------------------------------------------------------------------ */

@media print {
  .panneau-gauche, .panneau-droit, .pagination { display: none; }
  .site { display: block; width: auto; }
  .colonne-texte { width: auto; padding: 0; background: none; min-height: 0; }
  body { background: none; font-size: 11pt; }
  article h1 { font-size: 32pt; padding-top: 0; margin-top: 0; }
  article h2 { font-size: 22pt; }
  article h3 { font-size: 17pt; }
  article h4 { font-size: 14pt; }
  table, figure, blockquote, h6 { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}