/* ===========================================================================
   Plan R — feuille de style
   Aucune dépendance, aucun appel distant. Un seul fichier, lisible.
   Ordre : polices, jetons, base, mise en page, composants, impression.
   =========================================================================== */

/* --- 1. Polices auto-hébergées -------------------------------------------
   Jamais Google Fonts : l'appel distant transmettrait l'adresse IP du
   visiteur à un tiers, ce que la politique de confidentialité exclut. */

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4Variable-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* --- 2. Jetons ------------------------------------------------------------ */

:root {
  --encre:        #12161c;
  --encre-douce:  #4a5563;
  --papier:       #fbfaf8;
  --papier-creux: #f1efe9;
  --filet:        #ddd8ce;

  /* Accent structurel : liens, boutons, état courant. */
  --structurel:     #27425f;   /* 9,91 sur papier — AAA */
  --structurel-vif: #20354d;   /* survol : on s'assombrit vers le contraste */

  /* Accent de signal : numéros d'épisode, survol de lien, filets. */
  --signal:         #a8542a;   /* 5,08 — AA */
  --signal-vif:     #a05427;   /* corrigé : #c1662f ne valait que 3,51 */

  /* Métadonnées : dates, durées de lecture, compteurs. */
  --etiquette:      #5f6773;   /* 5,48 — AA */

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --colonne: 68ch;
  --large:   min(72rem, 100% - 3rem);
  --rythme:  1.65;
  --rayon:   3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --encre:        #e8e6e1;
    --encre-douce:  #a3abb5;
    --papier:       #12161c;
    --papier-creux: #1b212a;
    --filet:        #2c3542;

    --structurel:     #9dbcdd;   /* 9,22 sur papier — AAA */
    --structurel-vif: #b8cee6;   /* survol : on éclaircit */

    --signal:         #e0904f;   /* 7,15 — AA */
    --signal-vif:     #eda765;   /* 8,91 — AAA */

    --etiquette:      #848d99;   /* corrigé : #5f6773 ne valait que 2,83 ici */
  }
}

/* --- 3. Base -------------------------------------------------------------- */

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: var(--rythme);
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 2.2em 0 0.6em;
}
h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.5rem); margin-top: 0; color: var(--structurel); }
h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); color: var(--structurel); }
h3 { font-size: 1.15rem; color: var(--encre); }
h4 { font-size: 1rem; color: var(--encre-douce); }

/* Le texte courant : jamais un mot seul sur la dernière ligne. */
p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

:focus-visible {
  outline: 2px solid var(--signal-vif);
  outline-offset: 3px;
  border-radius: var(--rayon);
}

img { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: 2.5em 0;
}

code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--papier-creux);
  padding: 0.1em 0.35em;
  border-radius: var(--rayon);
  word-break: break-word;
}
pre {
  font-family: var(--mono);
  font-size: 0.85rem;
  background: var(--papier-creux);
  padding: 1rem;
  border-radius: var(--rayon);
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: none; padding: 0; }

/* Le lien d'évitement : invisible tant qu'il n'a pas le focus clavier. */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--structurel);
  color: var(--papier);
  padding: 0.7em 1.2em;
  z-index: 100;
  font-family: var(--sans);
}
.evitement:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* --- 4. Ossature ---------------------------------------------------------- */

.entete {
  border-bottom: 1px solid var(--filet);
  background: var(--papier);
}
.entete-barre {
  width: var(--large);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 1.1rem 0;
}
.marque { text-decoration: none; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.marque-nom {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--structurel);
}
.marque-baseline {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--encre-douce);
  letter-spacing: 0.01em;
}
.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
  font-family: var(--sans);
  font-size: 0.92rem;
}
.navigation a { color: var(--encre-douce); text-decoration: none; }
.navigation a:hover { color: var(--signal); text-decoration: underline; }
.navigation a[aria-current="true"] { color: var(--encre); font-weight: 600; }
.lien-recherche::before { content: "⌕ "; }

main { width: var(--large); margin-inline: auto; padding: 2.75rem 0 4rem; }

.pied {
  border-top: 1px solid var(--filet);
  background: var(--papier-creux);
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--encre-douce);
}
.pied-corps { width: var(--large); margin-inline: auto; padding: 2rem 0 2.5rem; }
.pied-signature { color: var(--encre); }
.pied-liens ul {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
}
.pied-liens a { color: var(--encre-douce); }
.pied-licence { font-size: 0.84rem; margin: 0; }

/* --- 5. Colonne de lecture ------------------------------------------------ */

.chronique, .page-simple { max-width: var(--colonne); margin-inline: auto; }

/* Conteneurs de mise en page. Les listes occupent toute la largeur utile —
   une grille de 82 entrées dans une colonne de 68 caractères serait
   interminable — mais leur en-tête reste dans la colonne de lecture. */
.page-liste { max-width: none; }
.accueil > section { margin-bottom: 3.5rem; }
.accueil > section:last-child { margin-bottom: 0; }
.chronique-tete { margin-bottom: 2.5rem; }

.fil {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--signal);
  margin-bottom: 0.5rem;
}
.chapo {
  font-size: 1.14rem;
  color: var(--encre-douce);
  line-height: 1.55;
}
.meta {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--encre-douce);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.couverture {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--rayon);
  margin-bottom: 2rem;
  background: var(--papier-creux);
}

.sommaire {
  background: var(--papier-creux);
  border-left: 3px solid var(--signal);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 1rem 1.35rem;
  margin: 0 0 2.25rem;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.sommaire h2 { margin: 0 0 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--encre-douce); }
.sommaire ul { margin: 0; padding-left: 1.1rem; }
.sommaire li { margin: 0.2rem 0; }
.sommaire a { color: var(--encre-douce); text-decoration: none; }
.sommaire a:hover { color: var(--signal); text-decoration: underline; }

/* --- 6. Corps de chronique ------------------------------------------------
   Ce bloc traite du contenu converti depuis Word : tableaux HTML en ligne,
   citations, listes imbriquées, figures. C'est là que se joue le rendu. */

.corps > h2 {
  padding-top: 0.6em;
  border-top: 1px solid var(--filet);
}
.corps > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.corps ul, .corps ol { padding-left: 1.4rem; margin: 0 0 1.15em; }
.corps li { margin: 0.35em 0; }
.corps li > p { margin-bottom: 0.5em; }

.corps blockquote {
  margin: 1.6em 0;
  padding: 0.15em 0 0.15em 1.25rem;
  border-left: 3px solid var(--signal);
  color: var(--encre-douce);
  font-style: italic;
}
.corps blockquote p:last-child { margin-bottom: 0; }

/* Les figures du corps portent leur texte alternatif rédigé : elles sont
   informatives, contrairement au visuel de couverture. */
.corps img {
  border-radius: var(--rayon);
  margin: 1.8em auto;
  background: var(--papier-creux);
}
.corps figure { margin: 1.8em 0; }
.corps figcaption {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--encre-douce);
  text-align: center;
  margin-top: 0.5em;
}

/* Les tableaux hérités de Word peuvent être larges : on autorise le
   défilement horizontal plutôt que de laisser déborder la page. */
.corps table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.9rem;
  margin: 1.8em 0;
  display: block;
  overflow-x: auto;
  white-space: normal;
}
.corps th, .corps td {
  border-bottom: 1px solid var(--filet);
  padding: 0.55em 0.75em;
  text-align: left;
  vertical-align: top;
}
.corps th {
  background: var(--papier-creux);
  font-weight: 600;
  color: var(--structurel);
}
.corps tbody tr:last-child td { border-bottom: 0; }

.corps a { overflow-wrap: break-word; }

/* La bibliographie de fin : dernière liste de la chronique, souvent longue. */
.corps h2 + ul a { overflow-wrap: anywhere; }

.themes { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--filet); }
.themes h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--encre-douce); margin: 0 0 0.75rem; }

.etiquettes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.etiquettes a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--encre-douce);
  background: var(--papier-creux);
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: 0.25em 0.85em;
}
.etiquettes a:hover { border-color: var(--signal); color: var(--signal); }
.compte { opacity: 0.65; font-size: 0.85em; }

.billets-lies { margin-top: 2.5rem; padding: 1.1rem 1.35rem; background: var(--papier-creux); border-radius: var(--rayon); }
.billets-lies h2 { margin: 0 0 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--encre-douce); }
.billets-lies ul { margin: 0; padding-left: 1.1rem; font-family: var(--sans); font-size: 0.92rem; }

.voisines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
}
.voisine {
  display: block;
  text-decoration: none;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  font-family: var(--sans);
}
.voisine:hover { border-color: var(--signal); }
.voisine-suiv { text-align: right; }
.voisine-prec:only-child { grid-column: 1; }
.voisine-sens { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--encre-douce); margin-bottom: 0.25rem; }
.voisine-titre { display: block; font-size: 0.95rem; color: var(--encre); font-weight: 600; line-height: 1.35; }

.retour { margin-top: 2rem; font-family: var(--sans); font-size: 0.9rem; }

/* --- 7. Listes et accueil ------------------------------------------------- */

.liste-tete { max-width: var(--colonne); margin: 0 auto 2.5rem; }

.registre { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.entree { margin: 0; }
.entree-lien {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  text-decoration: none;
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.entree-lien:hover { background: var(--papier-creux); border-color: var(--filet); }
.entree-numero {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--signal);
  min-width: 2.5rem;
  font-variant-numeric: tabular-nums;
}
.entree-corps { display: block; }
.entree-titre { display: block; font-family: var(--sans); font-weight: 600; color: var(--encre); line-height: 1.35; }
.entree-resume { display: block; font-size: 0.95rem; color: var(--encre-douce); margin-top: 0.2rem; }
.entree-meta {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  font-family: var(--sans); font-size: 0.8rem; color: var(--encre-douce);
  margin-top: 0.3rem;
}

.annee { margin-bottom: 3rem; }
.annee h2 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--filet);
}
.annee-compte { font-size: 0.8rem; font-weight: 400; color: var(--encre-douce); }

.recherche-raccourci {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin-top: 1.5rem; font-family: var(--sans); font-size: 0.9rem;
}
.recherche-raccourci label { color: var(--encre-douce); }
.recherche-raccourci input {
  flex: 1 1 14rem;
  font: inherit;
  padding: 0.5em 0.75em;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--papier);
  color: var(--encre);
}
.recherche-raccourci button, .bouton {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.55em 1.1em;
  border: 1px solid var(--structurel);
  border-radius: var(--rayon);
  background: var(--structurel);
  color: var(--papier);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.recherche-raccourci button:hover, .bouton:hover { background: var(--structurel-vif); border-color: var(--structurel-vif); color: var(--papier); }

.manchette { max-width: var(--colonne); margin: 0 auto 3.5rem; }
.manchette h1 { font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.15rem); }
.manchette-texte { font-size: 1.08rem; color: var(--encre-douce); }

.titre-rubrique {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--encre-douce); border-bottom: 1px solid var(--filet);
  padding-bottom: 0.4rem; margin-bottom: 1.25rem;
}
.une { margin-bottom: 3.5rem; }
.une-article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.75rem; align-items: start; }
.une-visuel img { border-radius: var(--rayon); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.une-texte h3 { margin-top: 0.2rem; font-size: 1.4rem; }
.une-texte h3 a { color: var(--encre); text-decoration: none; }
.une-texte h3 a:hover { color: var(--signal); }
.une-texte p { color: var(--encre-douce); }

.recentes, .fils, .publications { margin-bottom: 3.5rem; }
.voir-tout { margin-top: 1.25rem; font-family: var(--sans); font-size: 0.9rem; }

/* --- Publications : cadres de référence, livres blancs, études ------------
   Présentation en cartes plutôt qu'en liste : ces documents sont l'entrée
   principale pour un visiteur qui ne connaît pas encore les chroniques. */

.grille-publications {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}
.publication { margin: 0; }
.publication-lien {
  display: flex; flex-direction: column; gap: 0.35rem; height: 100%;
  text-decoration: none;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--papier);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.publication-lien:hover { border-color: var(--signal); background: var(--papier-creux); }
.publication-genre {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--signal);
}
.publication-titre {
  font-family: var(--sans); font-weight: 600; font-size: 1.02rem;
  color: var(--encre); line-height: 1.3;
}
.publication-resume { font-size: 0.92rem; color: var(--encre-douce); line-height: 1.45; }
.publication-meta {
  margin-top: auto; padding-top: 0.5rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  font-family: var(--sans); font-size: 0.78rem; color: var(--encre-douce);
}
.genre { margin-bottom: 2.75rem; }
.genre h2 { padding-bottom: 0.4rem; border-bottom: 1px solid var(--filet); }

.publication-fiche { max-width: var(--colonne); margin-inline: auto; }
.telechargements {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 1.75rem 0 2.25rem;
  padding: 1.1rem 1.25rem;
  background: var(--papier-creux);
  border-left: 3px solid var(--signal);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.chroniques-liees { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--filet); }
.chroniques-liees h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--encre-douce); margin: 0 0 0.75rem; }

/* Citer et réutiliser (partiel reutilisation.html). Même retrait que les
   chroniques liées. La formule se sélectionne d'un seul clic pour être copiée :
   --encre sur --papier-creux vaut 15,78:1 en clair et 12,98:1 en sombre. */
.reutilisation { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--filet); }
.reutilisation h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--encre-douce); margin: 0 0 0.75rem; }
.reutilisation .citation {
  padding: 0.6rem 0.9rem;
  background: var(--papier-creux);
  color: var(--encre);
  border-left: 3px solid var(--filet);
  user-select: all;
}

.competences {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.competence { display: flex; flex-direction: column; gap: 0.15rem; }
.competence-titre { font-family: var(--sans); font-weight: 600; }
.competence-annees {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--etiquette);
}
.competence-resume {
  font-size: 0.92rem;
  color: var(--encre-douce);
  line-height: 1.45;
  text-wrap: pretty;
}

/* --- Qui écrit : l'accès au profil, en fin d'accueil --------------------- */

.qui-ecrit { max-width: var(--colonne); }
.qui-ecrit-corps { color: var(--encre-douce); }
.qui-ecrit-liens {
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center;
  font-family: var(--sans); font-size: 0.9rem; margin-top: 1.1rem;
}

.nuage { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.nuage li {
  display: flex; align-items: baseline; gap: 0.4rem;
  border: 1px solid var(--filet); border-radius: 999px; padding: 0.3em 0.9em;
  font-family: var(--sans); font-size: 0.92rem;
}
.nuage a { text-decoration: none; color: var(--encre); }
.nuage li:hover { border-color: var(--signal); }

.page-recherche { max-width: var(--colonne); margin-inline: auto; }
.avertissement {
  background: var(--papier-creux); border-left: 3px solid var(--signal);
  padding: 0.9rem 1.2rem; font-family: var(--sans); font-size: 0.92rem;
}

/* Pagefind : on aligne son interface sur les jetons du site plutôt que
   d'importer son thème par défaut. */
#recherche {
  --pagefind-ui-primary: var(--structurel);
  --pagefind-ui-text: var(--encre);
  --pagefind-ui-background: var(--papier);
  --pagefind-ui-border: var(--filet);
  --pagefind-ui-tag: var(--papier-creux);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: var(--rayon);
  --pagefind-ui-font: var(--sans);
  margin-top: 1.5rem;
}

/* Registre des métadonnées : chasse fixe système, zéro requête. */
.entree-meta, .annee-compte, .corps time {
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--etiquette);
}

/* Les titres cherchent des lignes de longueur égale — c'est `balance`, réglé
   au §3 avec le reste de leur typographie. Le titre d'une entrée de registre
   est un titre : même traitement. `pretty` appartient au texte courant, où il
   empêche seulement qu'un mot reste seul sur la dernière ligne.
   Les deux propriétés se contredisaient ici jusqu'au 19/09/2026 : cette règle
   écrasait le `balance` des h1-h3, et oubliait h4 au passage. */
.entree-titre { text-wrap: balance; }

/* --- 7 bis. Colonne latérale de l'article --------------------------------- */

/* Le sommaire quitte le fil du texte pour un flanc qui suit le défilement.

   MÉCANIQUE : `position: sticky` ne colle que dans les limites de son
   conteneur. Un sommaire seul dans sa rangée de grille ne collerait à rien —
   sa rangée fait sa hauteur. Il partage donc la RANGÉE du texte : la hauteur
   du texte devient sa course.

   `screen and` est délibéré : sans lui, une impression sur papier large
   déclencherait la grille et le flanc sortirait de la page.

   En dessous de 64rem, aucune de ces règles ne s'applique : la page reprend
   exactement la disposition d'avant, sommaire au-dessus du texte, rien de
   collant. Un flanc collant sur un écran de 375 px mange le tiers de la
   hauteur utile. */
@media screen and (min-width: 64rem) {
  .chronique { max-width: none; }
  .chronique-grille {
    display: grid;
    grid-template-columns: minmax(0, var(--colonne)) minmax(12rem, 16rem);
    column-gap: 3rem;
    justify-content: center;
    align-items: start;
  }
  .chronique-tete  { grid-column: 1; grid-row: 1; }
  .chronique-texte { grid-column: 1; grid-row: 2; min-width: 0; }
  .chronique .sommaire {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 1.5rem;
    margin: 0;
    /* Un sommaire de trente entrées ne doit pas dépasser l'écran :
       il défile dans son propre cadre plutôt que de déborder. */
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
}

/* --- 8. Écrans étroits ---------------------------------------------------- */

@media (max-width: 46rem) {
  body { font-size: 1rem; }
  main { padding-top: 2rem; }
  .entete-barre { padding: 0.9rem 0; }
  .marque-baseline { display: none; }
  .une-article { grid-template-columns: 1fr; gap: 1.1rem; }
  .voisines { grid-template-columns: 1fr; }
  .voisine-suiv { text-align: left; }
  .entree-lien { padding: 0.7rem 0.5rem; gap: 0.75rem; }
  .corps table { font-size: 0.85rem; }
}

/* --- 9. Impression --------------------------------------------------------
   Une chronique s'imprime ou se convertit en PDF : on retire la navigation
   et on rend les URL visibles, puisqu'un lien ne se clique pas sur papier. */

@media print {
  :root { --papier: #fff; --papier-creux: #f4f4f4; --encre: #000; --encre-douce: #333; --filet: #ccc; }
  .entete, .pied, .voisines, .sommaire, .retour, .evitement, .recherche-raccourci, .billets-lies, .bandeau-recette { display: none !important; }
  body { font-size: 11pt; line-height: 1.45; }
  main { width: auto; padding: 0; }
  .chronique, .page-simple { max-width: none; }
  a { color: #000; text-decoration: underline; }
  .corps a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; word-break: break-all; }
  .couverture { max-height: 8cm; object-fit: contain; }
  h2, h3 { break-after: avoid; }
  .corps table, .corps img, .corps blockquote { break-inside: avoid; }
  p { orphans: 3; widows: 3; }
}

/* --- 10. Bandeau de recette -----------------------------------------------
   Absent du site en ligne : params.bandeauRecette vaut false en production.
   Volontairement laid et volontairement en haut — il doit être impossible de
   confondre le miroir local avec le site public, y compris d'un coup d'œil
   sur un onglet à moitié visible. Ne pas l'adoucir. */

.bandeau-recette {
  background: #7a2e12;
  color: #fff;
  font-family: var(--police-titre, system-ui, sans-serif);
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: center;
  padding: 0.5rem 1rem;
  letter-spacing: 0.01em;
}
.bandeau-recette strong {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.bandeau-recette code {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  padding: 0.05em 0.35em;
  border-radius: 2px;
  font-size: 0.95em;
}


/* --- 11. Réalisations -----------------------------------------------------
   Ces classes étaient appelées par carte-realisation.html et realisations/
   page.html depuis J2 sans exister ici : le défaut ne se voyait pas, faute
   de fiche à afficher. Elles décalquent la carte des publications, parce que
   c'est le même objet éditorial — un document qu'on ouvre. Seule l'étiquette
   de tête change de couleur, pour que l'œil distingue une réalisation d'une
   publication sans avoir à lire.
   Aucun jeton nouveau : --etiquette et --signal sont déjà certifiés. */

.grille-realisations {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}
.realisation { margin: 0; }
.realisation-lien {
  display: flex; flex-direction: column; gap: 0.35rem; height: 100%;
  text-decoration: none;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--papier);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.realisation-lien:hover { border-color: var(--signal); background: var(--papier-creux); }
.realisation-secteur {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--etiquette);
}
.realisation-titre {
  font-family: var(--sans); font-weight: 600; font-size: 1.02rem;
  color: var(--encre); line-height: 1.3;
}
.realisation-resume { font-size: 0.92rem; color: var(--encre-douce); line-height: 1.45; }

.realisation-fiche { max-width: var(--colonne); margin-inline: auto; }

/* Le bloc « ce qui est réutilisable » : même forme que le sommaire d'une
   chronique, parce qu'il joue le même rôle — un encart qu'on lit à part du
   fil principal. C'est le bloc pour lequel on ouvre la fiche. */
.reutilisable {
  margin: 2.25rem 0;
  padding: 1.2rem 1.4rem;
  background: var(--papier-creux);
  border-left: 3px solid var(--signal);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.reutilisable h2 {
  margin: 0 0 0.75rem;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--encre-douce);
}
.reutilisable > :last-child { margin-bottom: 0; }

/* --- 12. Page de profil ---------------------------------------------------
   Trois motifs seulement, et aucun n'invente de couleur : l'encadré des
   repères reprend la géométrie du sommaire, la liste des postes celle du
   registre, et les compétences réutilisent la grille déjà écrite pour la
   façade de l'accueil. */

.profil { max-width: var(--colonne); margin-inline: auto; }
.profil > section { margin-bottom: 3.25rem; }
.profil > section:last-child { margin-bottom: 0; }
.profil .competences { margin-top: 1.25rem; }

.profil-brief {
  background: var(--papier-creux);
  border-left: 3px solid var(--signal);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 1.1rem 1.35rem;
  font-family: var(--sans);
  font-size: 0.92rem;
}
.profil-brief dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.4rem 1.25rem;
}
.profil-brief dt { color: var(--encre-douce); }
.profil-brief dd { margin: 0; color: var(--encre); }
/* Le chiffre se lit comme une quantité, pas comme un mot : chasse fixe et
   chiffres de même largeur, pour que l'œil le saisisse sans le lire. */
.profil-brief .chiffre { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.poste {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.2rem 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.poste:hover { background: var(--papier-creux); border-color: var(--filet); }
.poste-annees {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700;
  color: var(--signal); font-variant-numeric: tabular-nums;
}
.poste-titre { font-family: var(--sans); font-weight: 600; color: var(--encre); line-height: 1.35; }
.poste-cadre { display: block; font-family: var(--sans); font-size: 0.82rem; color: var(--etiquette); margin-top: 0.1rem; }
.poste-texte { font-size: 0.95rem; color: var(--encre-douce); margin: 0.4rem 0 0; }

.profil-note { font-family: var(--sans); font-size: 0.85rem; color: var(--etiquette); }

/* Sous 34rem la colonne d'années passerait à deux lignes : on l'empile. */
@media (max-width: 34rem) {
  .poste { grid-template-columns: minmax(0, 1fr); }
  .profil-brief dl { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .profil-brief dd { margin-bottom: 0.55rem; }
}