/* WIKI SST — Mines · habillage type Wikipédia (Vector), thème clair et sombre */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------- thème clair (référence) ---------- */
:root {
  --bg: #f8f9fa;
  --content-bg: #ffffff;
  --border: #a2a9b1;
  --border-light: #c8ccd1;
  --border-soft: #eaecf0;
  --text: #202122;
  --text-soft: #54595d;
  --text-faint: #72777d;
  --link: #3366cc;
  --link-visited: #795cb2;
  --link-new: #dd3333;
  --accent: #b32424;
  --focus: #3366cc;
  --hover: #eaf3ff;
  --hover-bd: #a3c9f0;

  --code-bg: #f3f4f6;
  --pre-bg: #f8f9fa;
  --th-bg: #eaecf0;
  --tr-alt: #f8f9fa;
  --img-bg: #ffffff;

  --surlignage-bg: #ffe49c;
  --surlignage-fg: inherit;

  --infobox-titre-bg: #dfe6f0;
  --tag-bg: #eaecf0;
  --tag-hover-bg: #dfe6f0;
  --tag-hover-bd: #7a9cc6;

  --chapo-bg: #f7fbff;
  --chapo-bd: #a3c9f0;
  --chapo-fg: #1a4a7a;

  --info-bd: #a3c9f0; --info-bg: #eaf3fc; --info-fg: #1a4a7a;
  --tip-bd: #a7d7b4;  --tip-bg: #e8f5ec;  --tip-fg: #1c5f34;
  --warn-bd: #f0ca7a; --warn-bg: #fdf2d5; --warn-fg: #7a5a12;
  --danger-bd: #e8a3a3; --danger-bg: #fbeaea; --danger-fg: #8a1f1f;
  --quote-bd: #c9c9d4; --quote-bg: #f1f1f5; --quote-fg: #4a4a5a;
  --example-bd: #c9b3e0; --example-bg: #f3edfa; --example-fg: #5a3a80;

  --stub-bg: #f1f1f5; --stub-fg: #6a6a75; --stub-bd: #d8d8e0;
  --portal-grad: #eef1f5;
  --carte-public-grad: #fbfdff;
  --carte-public-hover: #4b77bd;
  --ombre: rgba(0,0,0,.13);
  /* Maquette du 26 sept. 2026 : surfaces, accent bleu de l'interface, teintes des pictogrammes, rayons. */
  --bg-surface: #ffffff; --bg-surface-2: #f1f4f8; --bg-surface-hover: #e7edf5; --bg-surface-creux: #f3f5f8; --bg-entete: var(--bg);
  --accent-ui: #2563eb; --accent-ui-hover: #1d4ed8; --accent-ui-text: #1d4ed8;
  --teinte-rose: #c2255c; --teinte-bleu: #1971c2; --teinte-vert: #2b8a3e; --teinte-violet: #6741d9; --teinte-ambre: #b7791f; --teinte-turquoise: #0b7285;
  --rayon: 12px; --rayon-petit: 10px; --ombre-legere: 0 1px 2px rgba(0,0,0,.06);

  --hh: 60px; /* hauteur de l'en-tête */
  font-size: 16px;
  color-scheme: light;
}

/* ---------- thème ---------- */
/* Le wiki s'affiche en sombre par défaut : il se lit sous terre, sur tablette, souvent de
   nuit — et la tablette de chantier arrive réglée en clair d'usine. Trois états, portés par
   data-theme : absent (ou « dark ») = sombre, « light » = clair, « auto » = comme l'appareil.
   Fonds, surfaces et bordures sombres : noir neutre. Le bleu-noir de la maquette du 26 septembre
   a été retiré le 28 septembre 2026 à la demande de Frank ; textes, liens et teintes restent. */
@media screen and (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #16181d;
    --content-bg: #1d2026;
    --border: #4d545e;
    --border-light: #3a404a;
    --border-soft: #2b3038;
    --text: #f2f6fa;
    --text-soft: #b6c2d1;
    --text-faint: #8fa0b3;
    --link: #7cc0ff;
    --link-visited: #c3a0f0;
    --link-new: #ff8b82;
    --accent: #ff9a9a;
    --focus: #7cc0ff;
    --hover: #253247;
    --hover-bd: #3f5f8f;

    --code-bg: #262a31;
    --pre-bg: #22262c;
    --th-bg: #2b3038;
    --tr-alt: #212429;
    /* Les captures de documents sont du texte noir sur blanc : elles gardent un fond clair. */
    --img-bg: #e8e8e8;

    --surlignage-bg: #6d5a1c;
    --surlignage-fg: #ffe9b0;

    --infobox-titre-bg: #2c3a4f;
    --tag-bg: #2b3038;
    --tag-hover-bg: #33445e;
    --tag-hover-bd: #5c7fae;

    --chapo-bg: #1b2530;
    --chapo-bd: #3f6491;
    --chapo-fg: #9ec8ff;

    --info-bd: #35597f; --info-bg: #1a2735; --info-fg: #a3caf5;
    --tip-bd: #38724a;  --tip-bg: #17281d;  --tip-fg: #94d8ab;
    --warn-bd: #7d6526; --warn-bg: #2e2711; --warn-fg: #f0cf85;
    --danger-bd: #8a3c3c; --danger-bg: #2f1a1a; --danger-fg: #ffabab;
    --quote-bd: #4e535d; --quote-bg: #24262b; --quote-fg: #c2c7cf;
    --example-bd: #64508c; --example-bg: #251f31; --example-fg: #d2b8f2;

    --stub-bg: #2a2c33; --stub-fg: #9aa1ab; --stub-bd: #40444d;
    --portal-grad: #10131a;
    --carte-public-grad: #212936;
    --carte-public-hover: #7ab0ff;
    --ombre: rgba(0,0,0,.5);
    --bg-surface: #1d2026; --bg-surface-2: #23262d; --bg-surface-hover: #2a2e36; --bg-surface-creux: #191b20; --bg-entete: #1d2026;
    --accent-ui: #2d6fc4; --accent-ui-hover: #2662b0; --accent-ui-text: #7cc0ff;
    --teinte-rose: #f9a1a5; --teinte-bleu: #7ecdff; --teinte-vert: #75fcc6; --teinte-violet: #cf9fff; --teinte-ambre: #fbb843; --teinte-turquoise: #45f1b9;
    --ombre-legere: 0 1px 2px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}

@media screen {
  /* Défaut du wiki : sombre. Le lecteur n’a rien à régler pour descendre sous terre ;
     data-theme="light" donne le thème clair, data-theme="auto" suit l’appareil.
     Hors écran (impression), aucun de ces blocs ne s’applique : la palette claire de
     :root reste seule, et une page imprimée l’est en noir sur blanc. */
  :root:not([data-theme="light"]):not([data-theme="auto"]) {
    --bg: #16181d;
    --content-bg: #1d2026;
    --border: #4d545e;
    --border-light: #3a404a;
    --border-soft: #2b3038;
    --text: #f2f6fa;
    --text-soft: #b6c2d1;
    --text-faint: #8fa0b3;
    --link: #7cc0ff;
    --link-visited: #c3a0f0;
    --link-new: #ff8b82;
    --accent: #ff9a9a;
    --focus: #7cc0ff;
    --hover: #253247;
    --hover-bd: #3f5f8f;

    --code-bg: #262a31;
    --pre-bg: #22262c;
    --th-bg: #2b3038;
    --tr-alt: #212429;
    --img-bg: #e8e8e8;

    --surlignage-bg: #6d5a1c;
    --surlignage-fg: #ffe9b0;

    --infobox-titre-bg: #2c3a4f;
    --tag-bg: #2b3038;
    --tag-hover-bg: #33445e;
    --tag-hover-bd: #5c7fae;

    --chapo-bg: #1b2530;
    --chapo-bd: #3f6491;
    --chapo-fg: #9ec8ff;

    --info-bd: #35597f; --info-bg: #1a2735; --info-fg: #a3caf5;
    --tip-bd: #38724a;  --tip-bg: #17281d;  --tip-fg: #94d8ab;
    --warn-bd: #7d6526; --warn-bg: #2e2711; --warn-fg: #f0cf85;
    --danger-bd: #8a3c3c; --danger-bg: #2f1a1a; --danger-fg: #ffabab;
    --quote-bd: #4e535d; --quote-bg: #24262b; --quote-fg: #c2c7cf;
    --example-bd: #64508c; --example-bg: #251f31; --example-fg: #d2b8f2;

    --stub-bg: #2a2c33; --stub-fg: #9aa1ab; --stub-bd: #40444d;
    --portal-grad: #10131a;
    --carte-public-grad: #212936;
    --carte-public-hover: #7ab0ff;
    --ombre: rgba(0,0,0,.5);
    --bg-surface: #1d2026; --bg-surface-2: #23262d; --bg-surface-hover: #2a2e36; --bg-surface-creux: #191b20; --bg-entete: #1d2026;
    --accent-ui: #2d6fc4; --accent-ui-hover: #2662b0; --accent-ui-text: #7cc0ff;
    --teinte-rose: #f9a1a5; --teinte-bleu: #7ecdff; --teinte-vert: #75fcc6; --teinte-violet: #cf9fff; --teinte-ambre: #fbb843; --teinte-turquoise: #45f1b9;
    --ombre-legere: 0 1px 2px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}

html { scroll-behavior: smooth; }
/* Un seul décalage, ajusté à la hauteur réelle de la barre par app.js. */
html[data-wiki-entete] { scroll-padding-top: calc(var(--hh) + .75rem); }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Lato, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--link-visited); }
a.external::after { content: '↗'; font-size: 0.75em; margin-left: 2px; vertical-align: super; }
.new { color: var(--link-new); cursor: help; border-bottom: 1px dotted var(--link-new); }
mark { background: var(--surlignage-bg); color: var(--surlignage-fg); padding: 0 2px; }
/* surlignage coloré des notes (« ~={couleur}texte=~ », 27 sept. 2026) : une teinte discrète par couleur, texte
   à sa couleur normale, lisible dans les deux thèmes ; sans couleur, le surlignage jaune ci-dessus */
mark.surligne { color: inherit; padding: 0 3px; border-radius: 3px; }
mark.surligne-red, mark.surligne-pink { background: color-mix(in srgb, var(--teinte-rose) 26%, transparent); }
mark.surligne-orange, mark.surligne-yellow { background: color-mix(in srgb, var(--teinte-ambre) 28%, transparent); }
mark.surligne-green { background: color-mix(in srgb, var(--teinte-vert) 24%, transparent); }
mark.surligne-cyan, mark.surligne-blue { background: color-mix(in srgb, var(--teinte-bleu) 24%, transparent); }
mark.surligne-purple { background: color-mix(in srgb, var(--teinte-violet) 26%, transparent); }
mark.surligne mark.surligne { padding: 0 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- entête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-entete);
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 16px;
}
.burger { display: none; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--rayon-petit); font-size: 18px; padding: 2px 9px; cursor: pointer; color: var(--text); }
.brand { display: flex; align-items: center; gap: 9px; color: var(--text) !important; }
.brand:hover { text-decoration: none; }
.brand-icon { font-size: 27px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: inherit; font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.brand-sst { color: var(--accent-ui-text); }
.brand-text small { color: var(--text-soft); font-size: 11.5px; }
.searchbox { position: relative; flex: 1; max-width: 540px; margin-left: auto; }
.searchbox input, .portal-search input {
  width: 100%; padding: 9px 12px 9px 36px; min-height: 42px;
  border: 1px solid var(--border-light); border-radius: var(--rayon);
  font-size: 15px; color: var(--text);
  background: var(--bg-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23888f97'%3E%3Cpath d='M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z'/%3E%3C/svg%3E") no-repeat 10px center / 15px;
}
.searchbox input:focus, .portal-search input:focus { outline: 2px solid var(--focus); outline-offset: -1px; }

/* bouton de thème */
.btn-theme {
  flex-shrink: 0; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--rayon-petit);
  font-size: 17px; cursor: pointer; color: var(--text); line-height: 1;
}
.btn-theme:hover { background: var(--hover); border-color: var(--hover-bd); }
#btnFav.actif { color: #f5a623; border-color: #f5a623; }

.suggest {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: var(--content-bg); border: 1px solid var(--border);
  border-radius: 3px; box-shadow: 0 4px 14px var(--ombre);
  max-height: 420px; overflow-y: auto; z-index: 60; text-align: left;
}
.suggest a { display: flex; flex-direction: column; padding: 7px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text) !important; }
.suggest a:last-child { border-bottom: 0; }
.suggest a:hover, .suggest a.sel { background: var(--hover); text-decoration: none; }
.suggest .s-title { font-weight: 600; font-size: 14px; }
.suggest .s-title b { color: var(--accent); }
.suggest .s-meta { font-size: 12px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest .s-path { color: var(--text-faint); }
.suggest .s-all { text-align: center; color: var(--link) !important; font-size: 13.5px; }
.suggest .s-msg { padding: 10px 12px; font-size: 13.5px; color: var(--text-soft); display: flex; align-items: center; gap: 8px; }
.s-loading { width: 13px; height: 13px; border: 2px solid var(--border-light); border-top-color: var(--link); border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .s-loading { animation-duration: 2.5s; } html { scroll-behavior: auto; } }

/* pastilles d'état */
.badge { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 9px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.badge-stub { background: var(--stub-bg); color: var(--stub-fg); border: 1px solid var(--stub-bd); }
.badge-abroge { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-bd); }

/* ---------- disposition ---------- */
.layout { display: flex; max-width: 1440px; margin: 0 auto; align-items: flex-start; }
.sidebar {
  width: 232px; flex-shrink: 0;
  padding: 18px 8px 40px 16px;
  font-size: 13.5px;
  position: sticky; top: var(--hh);
  max-height: calc(100vh - var(--hh)); overflow-y: auto;
}
.nav-group { margin-bottom: 18px; }
.nav-title { font-size: 12px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border-light); padding-bottom: 3px; margin-bottom: 5px; }
.sidebar ul { list-style: none; }
.sidebar li { padding: 2px 0; }
.sidebar li.active > a { font-weight: 700; color: var(--text); }
.content {
  flex: 1; min-width: 0;
  background: var(--content-bg);
  border: 1px solid var(--border-soft); border-top: 0;
  padding: 22px 34px 44px;
}

/* ---------- article ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 14px; color: var(--text-soft); margin-bottom: 14px; }
/* maison (pictogramme MDI, même extrait que les schémas), « › », puis les maillons séparés par « / » ;
   le dernier, la page courante, en couleur d'accent (maquette du 26 sept. 2026) */
.breadcrumbs::before { content: ''; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'><path%20d='M12%205.69L17%2010.19V18H15V12H9V18H7V10.19L12%205.69M12%203L2%2012H5V20H11V14H13V20H19V12H22'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'><path%20d='M12%205.69L17%2010.19V18H15V12H9V18H7V10.19L12%205.69M12%203L2%2012H5V20H11V14H13V20H19V12H22'/></svg>") center / contain no-repeat; }
.breadcrumbs > a:first-of-type::before { content: '›'; margin-right: 6px; color: var(--text-faint); }
.breadcrumbs .crumb-sep { font-size: 0; }
.breadcrumbs .crumb-sep::before { content: '/'; font-size: 14px; color: var(--text-faint); }
.breadcrumbs > a { color: var(--text-soft); }
.breadcrumbs > a:last-of-type { color: var(--accent-ui-text); font-weight: 600; }
.crumb-sep { color: var(--text-faint); margin: 0 2px; }
.page-title {
  font-family: 'Linux Libertine', Georgia, 'Times New Roman', serif;
  font-size: 30px; font-weight: 400; line-height: 1.25;
  border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 4px;
}
.page-sub { font-size: 13px; color: var(--text-soft); margin-bottom: 18px; }
.article-titre { display: grid; gap: .5rem; margin-bottom: 1rem; min-width: 0; }
.article-titre .page-title, .article-titre .page-sub, .article-titre .lecture-outils { margin: 0; }
/* Un titre fait d'un mot plus long que l'écran (« INSTITUTIONNELLES/COMPLÉMENTAIRES ») élargissait la grille
   de l'en-tête, et toute la page défilait de côté au téléphone : il passe à la ligne. */
.article-titre .page-title { overflow-wrap: anywhere; }
.page-body { font-size: calc(15px * var(--echelle, 1)); max-width: 100%; }
/* Un mot plus long que la colonne (adresse, flèche d'un schéma en caractères) passe à la ligne au lieu de faire
   défiler toute la page de côté ; les autres mots ne sont jamais coupés (break-word, et non anywhere). */
.page-body p, .page-body li, .page-body dd, .page-body blockquote, .chapo p, .chapo li { overflow-wrap: break-word; }
/* Appels bibliographiques : discrets dans la phrase, sans modifier la bibliographie. */
.page-body a[href^="#ref-"] {
  font-size: max(.75rem, .72em);
  line-height: 0;
  vertical-align: super;
  font-weight: 600;
  padding-block: .2em;
  padding-inline: .12em;
  white-space: nowrap;
}
.page-body :is(h2, h3, h4):target,
.page-body li:has(> span[id^="ref-"]:target) {
  background: var(--tag-bg);
  outline: 2px solid var(--border);
  outline-offset: 3px;
  border-radius: 2px;
}
.page-body h1, .page-body h2, .page-body h3, .page-body h4 {
  font-family: 'Linux Libertine', Georgia, 'Times New Roman', serif;
  font-weight: 400; margin: 26px 0 10px; line-height: 1.3;
}
.page-body h1 { font-size: 26px; border-bottom: 1px solid var(--border); padding-bottom: 3px; }
.page-body h2 { font-size: 23px; border-bottom: 1px solid var(--border); padding-bottom: 3px; }
.page-body h3 { font-size: calc(19px * var(--echelle, 1)); font-weight: 600; font-family: inherit; }
.page-body h4 { font-size: calc(16px * var(--echelle, 1)); font-weight: 700; font-family: inherit; }
.page-body p { margin: 9px 0; }
.page-body ul, .page-body ol { margin: 9px 0 9px 26px; }
.page-body li { margin: 3px 0; }
/* Bibliographie : une liste continue, sans ligne vide artificielle. */
.page-body ol.references-liste { margin: .5rem 0 .75rem; padding-inline-start: 1.65rem; line-height: 1.3; overflow-wrap: anywhere; }
.page-body .references-liste > li { margin: .25rem 0; padding-inline-start: .125rem; }
.page-body .references-liste > li > p { margin: 0; }
/* Source d'une note d'analyse citée (DOI, sinon adresse) : posée par le générateur à côté de la
   citation, dans les listes et les tableaux, pour que la source soit à un clic de la page. */
.page-body a.ref-source { display: inline-block; font-size: .78em; font-weight: 600; padding: 1px 7px; margin-left: 5px; border: 1px solid var(--border-light); border-radius: 999px; text-decoration: none; vertical-align: middle; line-height: 1.5; }
.page-body a.ref-source:hover { background: var(--hover); border-color: var(--hover-bd); text-decoration: none; }
.page-body hr { border: 0; border-top: 1px solid var(--border-light); margin: 18px 0; }
.page-body blockquote { border-left: 4px solid var(--border-light); padding: 4px 16px; color: var(--text-soft); margin: 10px 0; }
.page-body code { background: var(--code-bg); border: 1px solid var(--border-soft); border-radius: 2px; padding: 1px 4px; font-size: 13px; }
.page-body pre { background: var(--pre-bg); border: 1px solid var(--border-soft); padding: 12px; overflow-x: auto; margin: 10px 0; }
.page-body pre code { border: 0; background: none; }
.page-body table { border-collapse: collapse; margin: 12px 0; font-size: calc(14px * var(--echelle, 1)); display: block; overflow-x: auto; max-width: 100%; }
.page-body table th, .page-body table td { border: 1px solid var(--border-light); padding: 5px 10px; text-align: left; }
.page-body table th { background: var(--th-bg); }
.page-body table tr:nth-child(even) td { background: var(--tr-alt); }
/* Comparaison cadenassage : texte visible, colonnes souples, sans image requise. */
.page-body table.table-energies { display: table; width: 100%; table-layout: fixed; font-size: calc(1rem * var(--echelle, 1)); }
.page-body .table-energies th, .page-body .table-energies td { padding: .5rem .625rem; vertical-align: top; overflow-wrap: anywhere; hyphens: auto; }
.page-body .table-energies thead th:first-child { width: 38%; }
.page-body .table-energies tbody th { background: transparent; font-weight: 600; }
.page-img { display: block; text-align: center; margin: 14px 0; }
/* !important : neutralise le max-width en pixels hérité de l'alias Obsidian (|650), qui débordait sur mobile */
.page-img img { max-width: 100% !important; height: auto; border: 1px solid var(--border-light); background: var(--img-bg); padding: 4px; }
/* Taille standard des images du texte : une planche ou une capture ne doit jamais occuper tout
   l'écran et couper la lecture. Hauteur plafonnée, proportions gardées ; le détail s'ouvre en
   grand dans la visionneuse (app.js). width:auto neutralise aussi une largeur écrite dans la note. */
.page-img img { width: auto; max-height: min(24rem, 60vh); object-fit: contain; }
.page-img a { display: inline-block; max-width: 100%; cursor: zoom-in; }
.img-zoom { display: block; font-size: 12px; color: var(--text-soft); margin-top: 2px; }

/* Texte officiel d'un article de loi, extrait de la couche texte du PDF (tools/textes-loi) et posé
   avant la capture : il se copie, se lit au lecteur d'écran et sur téléphone, et se cherche. */
.texte-loi { margin: 10px 0 18px; padding: 2px 0 2px 16px; border-left: 3px solid var(--border); }
.texte-loi p { margin: 0 0 10px; }
.texte-loi p.alinea { margin-left: 18px; }
.texte-loi p:last-child { margin-bottom: 0; }
.texte-loi-source { font-size: 12px; color: var(--text-soft); }
.missing-file { color: var(--link-new); font-style: italic; font-size: 13px; }

/* ---------- sommaire ---------- */
.toc {
  display: inline-block; background: var(--bg);
  border: 1px solid var(--border-light); padding: 10px 18px;
  font-size: 13.5px; margin: 4px 0 16px;
}
.toc-title { text-align: center; font-weight: 700; margin-bottom: 5px; }
.toc-compte { font-weight: 400; font-size: 12px; color: var(--text-soft); }
.toc-toggle { background: none; border: 0; color: var(--link); font-size: 11.5px; cursor: pointer; font-weight: 400; font-family: inherit; }
.toc ul { list-style: none; }
.toc li.toc-l2 { margin: 2px 0; }
.toc li.toc-l3 { margin-left: 20px; font-size: 13px; }
.toc.collapsed ul { display: none; }
/* garde-fou : une page a 55 entrées de sommaire — au-delà, on borne et on fait défiler à l'intérieur */
.toc > ul { max-height: 60vh; overflow-y: auto; }

/* ---------- infobox ---------- */
.infobox {
  float: right; clear: right;
  width: 300px; max-width: 45%;
  margin: 0 0 14px 20px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  font-size: 12.8px; line-height: 1.45;
}
.infobox-title { background: var(--infobox-titre-bg); text-align: center; font-weight: 700; font-size: 13.5px; padding: 6px 8px; }
.infobox table { width: 100%; border-collapse: collapse; }
.infobox th { text-align: left; vertical-align: top; padding: 4px 8px; width: 40%; color: var(--text); font-weight: 600; border-top: 1px solid var(--border-soft); }
.infobox td { padding: 4px 8px; border-top: 1px solid var(--border-soft); word-break: break-word; }
.infobox-tags { padding: 7px 8px; border-top: 1px solid var(--border-soft); display: flex; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-block; background: var(--tag-bg); border: 1px solid var(--border-light); border-radius: 10px; padding: 1px 8px; font-size: 11px; color: var(--text-soft); }
a.tag-lien { color: var(--link) !important; text-decoration: none; }
a.tag-lien:hover { background: var(--tag-hover-bg); border-color: var(--tag-hover-bd); text-decoration: none; }
.cat-compte { color: var(--text-soft); font-size: 11.5px; }

/* résumé introductif, façon Wikipédia */
.chapo {
  border-left: 4px solid var(--chapo-bd); background: var(--chapo-bg);
  padding: 12px 18px; margin: 0 0 16px; font-size: 15.5px; line-height: 1.6;
  display: flow-root; /* sinon la boîte court sous l'infobox flottante */
}
.chapo-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--chapo-fg); font-weight: 700; margin-bottom: 5px;
}
.chapo > p:first-of-type { margin-top: 0; }
.chapo > p:last-child { margin-bottom: 0; }
.chapo ul, .chapo ol { margin: 8px 0 4px 22px; }

/* ---------- callouts ---------- */
.callout { border: 1px solid; border-left-width: 5px; margin: 13px 0; background: var(--content-bg); font-size: 14.5px; }
.callout-title { font-weight: 700; padding: 7px 13px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.callout-icon { font-size: 15px; }
.callout-body { padding: 2px 13px 8px; }
.callout-body > p:first-child { margin-top: 4px; }
.callout-abstract { border-color: var(--info-bd); } .callout-abstract .callout-title { background: var(--info-bg); color: var(--info-fg); }
.callout-info     { border-color: var(--info-bd); } .callout-info .callout-title     { background: var(--info-bg); color: var(--info-fg); }
.callout-tip      { border-color: var(--tip-bd); }  .callout-tip .callout-title      { background: var(--tip-bg); color: var(--tip-fg); }
.callout-warning  { border-color: var(--warn-bd); } .callout-warning .callout-title  { background: var(--warn-bg); color: var(--warn-fg); }
.callout-danger   { border-color: var(--danger-bd); } .callout-danger .callout-title { background: var(--danger-bg); color: var(--danger-fg); }
.callout-quote    { border-color: var(--quote-bd); } .callout-quote .callout-title   { background: var(--quote-bg); color: var(--quote-fg); }
.callout-example  { border-color: var(--example-bd); } .callout-example .callout-title { background: var(--example-bg); color: var(--example-fg); }

/* ---------- backlinks + meta ---------- */
.backlinks { margin: 26px 0 0; font-size: 13.5px; background: var(--bg); border: 1px solid var(--border-soft); padding: 8px 14px; }
.backlinks summary { cursor: pointer; font-weight: 600; color: var(--text-soft); }
.backlinks ul { margin: 8px 0 4px 22px; columns: 2; }
.bl-wiki { color: var(--text-soft); }
.page-meta { margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--text-soft); }

/* ---------- catégories ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 12px 0 20px; }
.cat-card { display: flex; align-items: center; gap: 11px; border: 1px solid var(--border-light); background: var(--bg); padding: 11px 14px; border-radius: 3px; color: var(--text) !important; }
.cat-card:hover { background: var(--hover); text-decoration: none; border-color: var(--hover-bd); }
.cat-card .cat-icon { font-size: 22px; }
.cat-card span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.cat-card small { color: var(--text-soft); font-size: 12px; }
.cat-pages { columns: 2; column-gap: 40px; margin: 10px 0 10px 24px; font-size: 14.5px; }
.cat-structure { columns: 1; font-weight: 600; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 3px; padding: 10px 10px 10px 34px; }
.letters-nav { font-size: 14px; margin: 6px 0 14px; line-height: 2; }
.saut-nav { font-size: 13.5px; margin: 8px 0 14px; line-height: 2.1; color: var(--text-soft); }
.retour-haut { font-size: 12px; font-weight: 400; font-family: -apple-system, 'Segoe UI', sans-serif; margin-left: 8px; }
.encart-nav { background: var(--info-bg); border: 1px solid var(--info-bd); border-radius: 3px; padding: 10px 14px; margin: 12px 0 16px; font-size: 14.5px; }
.lien-mort { color: var(--text-soft); text-decoration: line-through; cursor: not-allowed; }
/* article de loi remplacé ou abrogé : mention informative, volontairement sans page */
.abroge-inline { color: var(--text-soft); cursor: help; }
.abroge-inline small { color: var(--text-faint); font-style: italic; }

/* aperçu des liens au survol */
.apercu-lien {
  position: fixed; z-index: 200; display: none;
  width: 380px; max-width: calc(100vw - 24px);
  background: var(--content-bg); border: 1px solid var(--border-light); border-radius: 10px;
  box-shadow: 0 8px 28px var(--ombre); padding: 13px 16px;
  font-size: 13.5px; line-height: 1.5; pointer-events: none;
}
.apercu-lien .ap-titre { font-weight: 700; font-size: 14.5px; margin-bottom: 2px; }
.apercu-lien .ap-meta { color: var(--text-soft); font-size: 12px; margin-bottom: 6px; }
.apercu-lien .ap-texte { color: var(--text); }

/* graphe des liens */
.graphe-titre { font-size: 18px; color: var(--text-soft); margin-left: 12px; font-family: inherit; }
.graphe-barre { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 8px 0 10px; }
.graphe-barre input {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; width: 280px; max-width: 100%; background: var(--content-bg); color: var(--text);
}
.graphe-bascule {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--link) !important;
  background: var(--content-bg); cursor: pointer; font-family: inherit;
}
.graphe-bascule:hover { background: var(--hover); border-color: var(--hover-bd); text-decoration: none; }
.graphe-filtres { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.gf { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 0; }
.gf-point { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.graphe-cadre { position: relative; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; background: var(--bg); }
.graphe-cadre canvas { display: block; width: 100%; touch-action: none; cursor: grab; }
.graphe-plein {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 44px; height: 44px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--content-bg); color: var(--text);
  font-size: 19px; cursor: pointer; opacity: .85;
}
.graphe-plein:hover { opacity: 1; background: var(--hover); }
/* panneau hors-ligne */
.hl-barre { height: 10px; border-radius: 5px; background: var(--border-soft); overflow: hidden; margin: 10px 0 6px; }
.hl-barre-plein { height: 100%; width: 0; background: #2563eb; transition: width .3s ease; }
.hl-note { font-size: 12.5px; color: var(--text-soft); min-height: 18px; }
.hl-boutons { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }
/* Trois boutons dans le panneau : seul « Télécharger » est plein. La règle générale du dialogue
   (.pwa-aide-boite .tour-btn, plus bas) peint tout en bleu ; celle-ci doit la battre. */
.pwa-aide-boite .hl-boutons .tour-btn { border: 1px solid var(--border-light); background: none; color: var(--text); border-radius: 8px; padding: 9px 15px; font-size: 13.5px; font-weight: 500; cursor: pointer; font-family: inherit; }
.pwa-aide-boite .hl-boutons .tour-btn.principal { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; }
.pwa-aide-boite .hl-boutons .tour-btn[disabled] { opacity: .7; cursor: default; }

/* visionneuse d'image : l'agrandissement se fait sur place, pas dans un autre onglet */
.visionneuse {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(8, 10, 14, .88);
  display: flex; align-items: center; justify-content: center;
  padding: 18px; cursor: zoom-out;
}
.visionneuse img {
  max-width: 96vw; max-height: calc(100vh - 7rem);
  background: #fff; padding: 6px; border-radius: 6px;
  box-shadow: 0 12px 44px rgba(0,0,0,.6);
  cursor: zoom-in;
}
/* taille réelle : l'image dépasse l'écran, on la fait défiler depuis son coin */
.visionneuse.vis-reelle { align-items: flex-start; justify-content: flex-start; overflow: auto; padding: 64px 18px 48px; }
.visionneuse.vis-reelle img { max-width: none; max-height: none; height: auto; flex: none; cursor: zoom-out; }
.visionneuse .vis-aide { position: fixed; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; color: #e4e6e8; font-size: .875rem; pointer-events: none; }
html.visionneuse-ouverte, html.visionneuse-ouverte body { overflow: hidden; }
.visionneuse .vis-fermer {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.14); color: #fff;
  font-size: 20px; cursor: pointer;
}
.visionneuse .vis-fermer:hover { background: rgba(255,255,255,.28); }

/* aide à l'installation de l'application */
.pwa-aide {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(10, 14, 20, .72);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.pwa-aide-boite {
  max-width: 400px; background: var(--content-bg); color: var(--text);
  border: 1px solid var(--border-light); border-radius: 12px;
  padding: 20px 22px; box-shadow: 0 10px 34px rgba(0,0,0,.35);
  font-size: 14.5px; line-height: 1.6;
}
.pwa-aide-boite h3 { font-size: 17px; margin-bottom: 9px; }
.pwa-aide-boite p { margin-bottom: 12px; }
.pwa-aide-boite .tour-btn {
  border: 1px solid var(--border-light); background: #2563eb; border-color: #2563eb; color: #fff;
  border-radius: 8px; padding: 9px 16px; font-size: 13.5px; cursor: pointer; font-family: inherit; font-weight: 600;
}

/* légende posée sur le graphe : visible aussi en plein écran, cliquable pour filtrer */
.graphe-legende {
  position: absolute; left: 10px; bottom: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--content-bg); opacity: .93;
  border: 1px solid var(--border-light); border-radius: 8px;
  padding: 7px 10px; max-height: 46%; overflow-y: auto; max-width: 62%;
}
.gl-item {
  display: flex; align-items: center; gap: 7px; text-align: left;
  background: none; border: 0; color: var(--text);
  font-size: 12.5px; cursor: pointer; font-family: inherit; padding: 3px 2px;
  white-space: nowrap;
}
.gl-item:hover { color: var(--link); }
.gl-item.gl-off { opacity: .35; text-decoration: line-through; }

/* plein écran « maison » : fonctionne aussi sur iPhone, où l'API Fullscreen n'existe pas */
.graphe-cadre.gc-plein { position: fixed; inset: 0; z-index: 300; border: 0; border-radius: 0; }
body.graphe-fige { overflow: hidden; }

@media (max-width: 900px) {
  /* les 7 filtres empilés mangeaient l'écran : une seule ligne qui défile */
  .graphe-filtres { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .gf { white-space: nowrap; flex-shrink: 0; }
  .graphe-barre input { width: 100%; }
  .graphe-titre { display: block; margin-left: 0; font-size: 15px; }
}
.q-table, .q-resume { border-collapse: collapse; width: 100%; font-size: 14px; margin: 12px 0 24px; }
.q-table th, .q-table td, .q-resume th, .q-resume td { border: 1px solid var(--border-light); padding: 7px 10px; text-align: left; vertical-align: top; }
.q-table th, .q-resume th { background: var(--th-bg); }
.q-table tr:nth-child(even) td, .q-resume tr:nth-child(even) td { background: var(--tr-alt); }
.q-mots { text-align: right; white-space: nowrap; color: var(--text-soft); }
.q-chemin { color: var(--text-soft); font-size: 11.5px; }
.q-etiq { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 9px; margin: 1px 2px 1px 0; white-space: nowrap; border: 1px solid; }
.q-g3 { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-bd); }
.q-g2 { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); }
.q-g1 { background: var(--stub-bg); color: var(--stub-fg); border-color: var(--stub-bd); }

/* ---------- recherche (page) ---------- */
.search-results { max-width: 780px; }
.sr-item { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.sr-item a.sr-title { font-size: 16.5px; font-weight: 600; }
.sr-item a.sr-title b { background: var(--surlignage-bg); color: var(--surlignage-fg); }
.sr-meta { font-size: 12.5px; color: var(--text-soft); }
.sr-meta .s-path { color: var(--text-faint); }
.sr-x { font-size: 13.5px; color: var(--text); margin-top: 2px; }
.sr-x b { background: var(--surlignage-bg); color: var(--surlignage-fg); font-weight: 600; }
.search-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.search-filters .filtre {
  background: var(--bg); border: 1px solid var(--border-light); border-radius: 14px;
  padding: 5px 13px; font-size: 13px; cursor: pointer; color: var(--text-soft); font-family: inherit;
}
.search-filters .filtre:hover { background: var(--hover); border-color: var(--hover-bd); }
.search-filters .filtre.actif { background: var(--infobox-titre-bg); border-color: var(--tag-hover-bd); color: var(--text); font-weight: 600; }
.btn-plus {
  display: block; width: 100%; margin: 16px 0; padding: 11px;
  background: var(--bg); border: 1px solid var(--border-light); border-radius: 3px;
  font-size: 14.5px; color: var(--link); cursor: pointer; font-family: inherit;
}
.btn-plus:hover { background: var(--hover); border-color: var(--hover-bd); }

/* bouton haut de page */
.btn-haut {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--content-bg); border: 1px solid var(--border); color: var(--text);
  font-size: 19px; cursor: pointer; box-shadow: 0 2px 10px var(--ombre);
  opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s;
}
.btn-haut.visible { opacity: .93; visibility: visible; }
.btn-haut:hover { background: var(--hover); opacity: 1; }

/* ---------- confort de lecture ---------- */
/* --echelle est posée sur <html> depuis localStorage, dans le <head>, avant le premier rendu. */
.lecture-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; }
.lecture-outils button {
  min-width: 44px; min-height: 44px; padding: 6px 10px;
  background: var(--content-bg); border: 1px solid var(--border-light); border-radius: 3px;
  font: inherit; font-size: .875rem; color: var(--text); cursor: pointer;
}
.lecture-outils button:hover:not(:disabled) { background: var(--hover); border-color: var(--hover-bd); }
.lecture-outils button:disabled { opacity: .45; cursor: default; }
.lecture-outils button.actif { background: var(--tag-bg); border-color: var(--border); font-weight: 600; }
.lecture-outils button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media print { .lecture-outils { display: none; } }
/* mode lecture : rien que l'article, colonne étroite, interligne aéré */
html[data-lecture] .sidebar, html[data-lecture] .breadcrumbs, html[data-lecture] .backlinks,
html[data-lecture] .site-footer, html[data-lecture] .page-sub, html[data-lecture] .page-meta { display: none !important; }
html[data-lecture] .content { max-width: 780px; margin: 0 auto; }
html[data-lecture] .page-body { line-height: 1.75; }

/* pages voisines : précédente / suivante dans le même dossier */
.voisins { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.voisin { display: flex; flex-direction: column; max-width: 48%; min-width: 0; text-decoration: none; padding: 8px 10px; border: 1px solid var(--border-light); border-radius: 3px; }
.voisin:hover { background: var(--hover); border-color: var(--hover-bd); }
.voisin small { color: var(--text-soft); font-size: 11.5px; }
.voisin span { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voisin-suiv { text-align: right; align-items: flex-end; margin-left: auto; }

/* Six wikis (12 septembre 2026) : jumelle publiée puis notions du même thème, à la place des
   voisins par dossier (réservés au Recueil, où l'ordre des articles a un sens). */
.voir-aussi { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.voir-aussi h2 { font-size: 17px; margin: 0 0 6px; }
.voir-aussi ul { columns: 14em 3; column-gap: 22px; margin: 0; padding-left: 20px; }
.voir-aussi li { break-inside: avoid; margin: 2px 0; }

.badge-corps { background: var(--tag-bg); color: var(--text-soft); border: 1px solid var(--border-light); }

@media (max-width: 900px) {
  .btn-haut { width: 52px; height: 52px; font-size: 22px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .voisin span { white-space: normal; }
}

/* ---------- portail ---------- */
/* couleur de repli explicite : un dégradé seul laisserait un fond transparent si l'image de fond ne s'applique pas */
body.portal { background-color: var(--bg); background-image: linear-gradient(180deg, var(--portal-grad) 0%, var(--bg) 340px); }
.portal-main { max-width: 1060px; margin: 0 auto; padding: 46px 22px 40px; }
.portal-hero { text-align: center; margin-bottom: 34px; }
.portal-globe { font-size: 64px; margin-bottom: 4px; filter: grayscale(15%); }
.portal-hero h1 { font-family: inherit; font-size: 38px; font-weight: 800; letter-spacing: .01em; line-height: 1.15; }
.portal-hero h1 .brand-sst { color: var(--accent-ui-text); }
.portal-tagline { color: var(--text-soft); font-size: 15.5px; margin: 8px 0 22px; line-height: 1.55; }
.portal-search { position: relative; max-width: 560px; margin: 0 auto; }
.portal-search input { padding: 12px 16px 12px 40px; font-size: 16px; border-radius: var(--rayon); box-shadow: var(--ombre-legere); background-color: var(--bg-surface-2); background-position: 14px center; }
/* cartes du portail dans l'habillage des accueils (27 sept. 2026) : tuile d'illustration ou de pictogramme,
   titre, description, compte en accent, chevron */
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.portal-card {
  position: relative; display: flex; gap: 14px; align-items: center;
  background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--rayon);
  padding: 14px 34px 14px 14px; color: var(--text) !important; box-shadow: var(--ombre-legere);
  transition: background-color .12s, border-color .12s;
}
.portal-card::after { content: ''; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid var(--text-soft); border-bottom: 2px solid var(--text-soft); transform: rotate(-45deg); }
.portal-card:hover { text-decoration: none; background: var(--bg-surface-hover); border-color: var(--hover-bd); }
.portal-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.portal-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: var(--bg-surface-2); border: 1px solid var(--border-soft); font-size: 30px; line-height: 1; }
.portal-illu .illustration { width: 46px; height: 46px; display: block; }
.portal-picto { color: var(--accent-ui-text); }
.portal-picto .ic { width: 28px; height: 28px; }
.portal-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.portal-info strong { font-family: inherit; font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.portal-desc { font-size: 13.5px; color: var(--text-soft); line-height: 1.4; }
.portal-count { font-size: 13px; font-weight: 600; color: var(--accent-ui-text); margin-top: 2px; }
.portal-foot { text-align: center; margin-top: 26px; font-size: 14.5px; }
.portal-section { font-family: inherit; font-size: 20px; font-weight: 700; margin: 30px 0 4px; padding-bottom: 0; border-bottom: 0; }
.portal-note { font-size: 13.5px; color: var(--text-soft); margin-bottom: 12px; }
.portal-intro { font-size: 15.5px; line-height: 1.6; margin: 6px 0 22px; color: var(--text); }
.portal-publics { margin-bottom: 6px; }
.carte-public { border-color: var(--hover-bd); }
.carte-public:hover { border-color: var(--carte-public-hover); }

/* page Thèmes : un bloc par wiki (illustration, nom, nombre de thèmes), une ligne par thème à pictogramme
   teinté, comme sur l'accueil du wiki ; pages de thème : listes générées en lignes */
.themes-wiki { margin: 18px 0 0; padding: 12px 14px 14px; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--rayon); box-shadow: var(--ombre-legere); }
.content h2.themes-wiki-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0; border: 0; font-family: inherit; font-size: 19px; font-weight: 700; }
.themes-wiki-titre small { font-size: 14px; font-weight: 500; color: var(--text-soft); }
.themes-wiki-illu { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-surface-2); border: 1px solid var(--border-soft); }
.themes-wiki-illu .illustration { width: 36px; height: 36px; }
.content ul.themes-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 6px 12px; }
.themes-liste li { margin: 0; }
.themes-liste a, .cat-pages.theme-voisins li a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 10px 5px 7px; border: 1px solid var(--border-soft); border-radius: var(--rayon-petit); background: var(--bg-surface-creux); color: var(--text); font-weight: 600; text-decoration: none; }
.themes-liste a:hover, .cat-pages.theme-voisins li a:hover { background: var(--bg-surface-hover); border-color: var(--hover-bd); text-decoration: none; }
.themes-nom { flex: 1; min-width: 0; }
.themes-liste .cat-compte { flex: none; font-size: 13px; font-weight: 400; color: var(--text-soft); }
.themes-liste .accueil-theme-icone, .theme-voisins .accueil-theme-icone { width: 32px; height: 32px; }
.content ul.theme-voisins { list-style: none; columns: auto; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 6px 10px; }
.theme-voisins li { margin: 0; padding: 0; }
.content ul.theme-notions { list-style: none; margin: 8px 0 12px; padding: 0; columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 6px 10px; }
.theme-notions li { margin: 0; padding: 0; }
.cat-pages.theme-notions li a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 6px 30px 6px 12px; border: 1px solid var(--border-soft); border-radius: var(--rayon-petit); background: var(--bg-surface); color: var(--text); text-decoration: none; }
.cat-pages.theme-notions li a::after { content: ''; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--text-soft); border-bottom: 2px solid var(--text-soft); transform: rotate(-45deg); }
.cat-pages.theme-notions li a:hover { background: var(--bg-surface-hover); border-color: var(--hover-bd); text-decoration: none; }

/* boutons flottants du portail, qui n'a pas d'en-tête */
.theme-portail { position: absolute; top: 14px; right: 16px; background: var(--content-bg); }
/* les boutons injectés héritent de la même position absolue : chacun son décalage,
   sinon ils s'empilent tous au même endroit et seul le dernier se voit */
#btnAide.theme-portail { right: 62px; }
#btnHorsLigne.theme-portail { right: 108px; }
#btnInstall.theme-portail { right: 154px; }

.site-footer { text-align: center; font-size: 12px; color: var(--text-soft); padding: 22px 10px 30px; }

/* ---------- responsive ---------- */
/* ---------- pages d'accueil des wikis (maquette de Frank, 26 sept. 2026) ----------
   Une application sobre, lue au téléphone : carte d'entrée (pictogramme, titre, chapeau, nombre
   d'articles, Lecture et PDF), tuiles par rôle en 2 × 2, lignes de thèmes à pictogramme teinté,
   cartes secondaires repliées sur une ligne. Surfaces et bordures viennent des jetons --bg-surface*,
   --border-soft. Le bloc 900 px resserre tout pour le téléphone ; rien n'y borne la largeur : la
   page occupe l'écran moins les 16 px de marge de .content. */
/* pictogrammes MDI en ligne (accueils, boutons Lecture et PDF) : ils prennent la couleur du texte ; sans
   cette règle, un <path> se remplit en noir */
.ic { fill: currentColor; display: inline-block; vertical-align: middle; flex: none; }
.accueil-banniere {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icone titre titre" "icone chapeau chapeau" ". compte compte";
  gap: 8px 16px; align-items: center; padding: 18px 20px; margin-bottom: 14px;
  border: 1px solid var(--border-soft); background: var(--bg-surface); border-radius: var(--rayon); box-shadow: var(--ombre-legere);
}
.accueil-banniere .article-titre { display: contents; }
.accueil-icone { grid-area: icone; align-self: start; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 16px; background: var(--bg-surface-2); border: 1px solid var(--border-soft); font-size: 42px; line-height: 1; }
.accueil-illustration .illustration { width: 84%; height: 84%; display: block; }
.accueil-banniere .page-title { grid-area: titre; font-family: inherit; font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; border-bottom: 0; padding: 0; margin: 0; }
.accueil-banniere .accueil-chapeau { grid-area: chapeau; margin: 0; }
.accueil-chapeau p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; color: var(--text-soft); }
.accueil-chapeau p:last-child { margin-bottom: 0; }
.accueil-chapeau .accueil-sous-titre { font-size: 16.5px; line-height: 1.4; color: var(--text); font-weight: 500; }
.accueil-chapeau .accueil-sous-titre strong { font-weight: inherit; }
.accueil-banniere .page-sub { grid-area: compte; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; color: var(--text-soft); }
.accueil-domaine { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* lu, pas vu */
.accueil-compte-pages { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; white-space: nowrap; color: var(--accent-ui-text); }
.accueil-nombre { color: var(--text); font-weight: 600; }
.accueil-compte-pages .ic { width: 22px; height: 22px; color: var(--accent-ui-text); }
/* Ni Lecture ni PDF sur un accueil : app.js retire la barre de lecture (PDF reste sur les articles) et
   déplace A− et A+ dans le menu latéral, sous « Taille du texte ». */
.lecture-taille-boutons { display: flex; gap: 8px; padding: 2px 0 4px; }
.lecture-taille-boutons button { min-width: 48px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--border-light); border-radius: var(--rayon-petit); background: var(--bg-surface-2); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lecture-taille-boutons button:hover:not(:disabled) { background: var(--bg-surface-hover); border-color: var(--hover-bd); }
.lecture-taille-boutons button:disabled { opacity: .45; cursor: default; }
.lecture-taille-boutons button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* index du wiki (alphabétique, catégories…) : ligne discrète sous les boîtes ; les mêmes liens sont au menu */
.accueil-index { margin: 16px 2px 0; font-size: 13px; color: var(--text-faint); }
.accueil-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; grid-auto-flow: dense; }
.accueil-boite { border: 1px solid var(--border-soft); background: var(--bg-surface); border-radius: var(--rayon); box-shadow: var(--ombre-legere); min-width: 0; }
.accueil-large { grid-column: 1 / -1; }
/* en-tête d'une boîte : pictogramme, titre et sous-titre (colonne souple), puis le lien « Explorer tous
   les thèmes » ou, sur une carte repliée, le nombre de pages et le chevron — jamais l'un sur l'autre */
.accueil-entete { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
/* pictogramme d'en-tête de section : nu, en accent (maquette) ; sur une carte repliée, dans une tuile */
.accueil-boite-icone { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--accent-ui-text); }
.accueil-boite-icone .ic { width: 28px; height: 28px; }
.accueil-entete-texte { flex: 1 1 auto; min-width: 0; }
.page-body .accueil-titre { font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; padding: 0; background: none; border: 0; overflow-wrap: break-word; }
/* un en-tête de boîte qui est un lien garde la couleur de titre : en bleu de lien, 4,27:1 sur le
   fond pastel en thème clair, sous le seuil WCAG AA de 4,5:1 */
.page-body .accueil-titre a { color: inherit; }
.page-body .accueil-sous-texte { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--text-soft); }
/* boîte ouverte avec sous-titre : le pictogramme se centre sur la ligne du titre, pas sur le bloc */
section.accueil-boite > .accueil-entete:has(.accueil-sous-texte) { align-items: flex-start; }
section.accueil-boite > .accueil-entete:has(.accueil-sous-texte) > .accueil-boite-icone { margin-top: -3px; }
.accueil-entete-lien { flex: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--accent-ui-text); text-decoration: none; padding: 6px 0; }
.accueil-entete-lien:hover { text-decoration: underline; }
.accueil-corps { padding: 0 16px 14px; }
.accueil-corps > p:first-child { margin-top: 2px; }
.accueil-corps ul { margin: 4px 0 4px 20px; }
.accueil-corps li { margin: 3px 0; break-inside: avoid; }
.accueil-corps table { display: block; overflow-x: auto; max-width: 100%; }
/* listes longues en colonnes (l'accueil du Recueil, les accueils de l'encadrement) */
.accueil-colonnes { columns: 12em 3; column-gap: 28px; }
.accueil-large .accueil-colonnes { columns: 13em 3; }
.accueil-colonnes-courtes, .accueil-large .accueil-colonnes-courtes { columns: 9em 3; column-gap: 18px; }
/* chevron : un angle tourné, qui pivote à l'ouverture d'un volet */
.accueil-chevron { flex: none; display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 2px; border-right: 2px solid var(--text-soft); border-bottom: 2px solid var(--text-soft); transform: rotate(-45deg); transition: transform .15s; }
details[open] > summary .accueil-chevron { transform: rotate(45deg); }
/* tuiles par rôle : deux colonnes de même hauteur, emoji, libellé, chevron ; quatre par rangée sur ordinateur */
.page-body .accueil-tuiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; margin: 2px 0 0; }
.page-body .accueil-tuiles li { position: relative; margin: 0; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px 6px 10px; border: 1px solid var(--border-light); border-radius: var(--rayon-petit); background: var(--bg-surface-2); font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.page-body .accueil-tuiles li::after { content: ''; flex: none; width: 8px; height: 8px; margin: 0 2px 0 1px; border-right: 2px solid var(--text-soft); border-bottom: 2px solid var(--text-soft); transform: rotate(-45deg); }
.page-body .accueil-tuiles li:hover { background: var(--bg-surface-hover); border-color: var(--hover-bd); }
.page-body .accueil-tuiles a { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0; text-decoration: none; color: var(--text); }
.page-body .accueil-tuiles a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } /* toute la tuile ouvre le lien */
.page-body .accueil-tuiles a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.accueil-tuile-emoji { flex: none; width: 22px; text-align: center; font-size: 20px; line-height: 1; }
.accueil-tuile-icone { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.accueil-tuile-icone .ic { width: 24px; height: 24px; }
.teinte-rose { color: var(--teinte-rose); } .teinte-bleu { color: var(--teinte-bleu); } .teinte-vert { color: var(--teinte-vert); }
.teinte-violet { color: var(--teinte-violet); } .teinte-ambre { color: var(--teinte-ambre); } .teinte-turquoise { color: var(--teinte-turquoise); }
.page-body .accueil-tuile-desc { font-weight: 400; font-size: 13px; line-height: 1.35; color: var(--text-soft); }
@media (min-width: 901px) { .accueil-large .accueil-tuiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
/* groupes de liens (sous-titres de la note) */
.accueil-groupes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 22px; }
.accueil-groupe { min-width: 0; }
.page-body .accueil-groupe h3 { font-size: 15.5px; margin: 8px 0 2px; padding: 0 0 2px; border-bottom: 1px solid var(--border-soft); }
/* thèmes : barre de raccourcis (ordinateur), puis une ligne par thème — pictogramme teinté, titre qui
   mène à la page du thème, compte aligné à droite, chevron. La ligne est un volet : ouvert, il montre
   la description et les notions. Les volets coulent en colonnes sur ordinateur (pas de vide sous un
   volet court). */
.accueil-themes-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.accueil-themes-nav a { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 11px; border: 1px solid var(--border-light); border-radius: 999px; background: var(--bg-surface-2); font-size: 13.5px; text-decoration: none; }
.accueil-themes-nav a:hover { background: var(--bg-surface-hover); border-color: var(--hover-bd); }
.accueil-groupes.accueil-themes { display: block; columns: 230px 3; column-gap: 16px; }
.accueil-theme { min-width: 0; margin: 0 0 6px; break-inside: avoid; border: 1px solid var(--border-soft); border-radius: var(--rayon-petit); background: var(--bg-surface-creux); }
.accueil-themes > .accueil-theme:last-child { margin-bottom: 0; }
.accueil-theme > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px 6px 8px; cursor: pointer; list-style: none; border-radius: var(--rayon-petit); }
.accueil-theme > summary::-webkit-details-marker { display: none; }
.accueil-theme > summary:hover { background: var(--bg-surface-hover); }
.accueil-theme > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.accueil-theme-icone { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; }
.accueil-theme-icone .ic { width: 26px; height: 26px; }
.teinte-1 { color: var(--teinte-rose); } .teinte-2 { color: var(--teinte-bleu); } .teinte-3 { color: var(--teinte-vert); }
.teinte-4 { color: var(--teinte-violet); } .teinte-5 { color: var(--teinte-ambre); } .teinte-6 { color: var(--teinte-turquoise); }
.accueil-theme-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.accueil-theme-titre { font-family: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.accueil-theme-titre a { color: inherit; text-decoration: none; }
.accueil-theme-titre a:hover { text-decoration: underline; text-underline-offset: 2px; }
.accueil-theme > summary small { flex: none; font-size: 13.5px; color: var(--text-soft); white-space: nowrap; }
.accueil-theme-desc { font-size: 13.5px; line-height: 1.4; color: var(--text-soft); font-weight: 400; }
.accueil-theme:not([open]) > summary .accueil-theme-desc { display: none; }
.page-body .accueil-theme ul { margin: 2px 12px 8px 26px; }
.accueil-theme-page { display: inline-block; margin: 0 12px 10px 14px; font-size: 13.5px; }
/* cartes repliées (« Articles internes », « Articles travailleurs »…) : une ligne — petit pictogramme,
   titre et sous-titre, nombre de pages, chevron ; tout le bandeau ouvre */
details.accueil-boite > summary { list-style: none; cursor: pointer; border-radius: var(--rayon); }
details.accueil-boite > summary::-webkit-details-marker { display: none; }
details.accueil-boite > summary .accueil-entete { padding: 12px 16px; min-height: 64px; gap: 12px; }
details.accueil-boite > summary:hover { background: var(--bg-surface-hover); }
details.accueil-boite > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
details.accueil-boite[open] > summary { border-radius: var(--rayon) var(--rayon) 0 0; border-bottom: 1px solid var(--border-soft); }
details.accueil-boite[open] > .accueil-corps { padding-top: 10px; }
details.accueil-boite .accueil-boite-icone { width: 38px; height: 38px; border-radius: var(--rayon-petit); background: var(--bg-surface-2); border: 1px solid var(--border-soft); }
details.accueil-boite .accueil-boite-icone .ic { width: 22px; height: 22px; }
.page-body details.accueil-boite .accueil-titre { font-size: 15.5px; font-weight: 600; line-height: 1.28; }
.page-body details.accueil-boite .accueil-sous-texte { font-size: 13px; line-height: 1.35; }
.page-body .accueil-compte { flex: none; font-size: 13.5px; color: var(--text-soft); white-space: nowrap; }
/* pied : la date à gauche, la marque à droite ; le pied commun du site ne se répète pas sous un accueil */
body:has(.accueil-banniere) .page-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; font-size: 13px; border-top: 0; padding-top: 4px; color: var(--text-soft); }
.accueil-marque { color: var(--text-soft); font-weight: 500; letter-spacing: .02em; }
body:has(.accueil-banniere) .site-footer { display: none; }
@media print { details.accueil-boite::details-content, .accueil-theme::details-content { content-visibility: visible; } details.accueil-boite > :not(summary), .accueil-theme > :not(summary) { display: block !important; } }
@media (max-width: 480px) {
  .accueil-groupes { grid-template-columns: 1fr; }
  .accueil-groupes.accueil-themes { columns: 1; }
  .accueil-corps li { padding: 3px 0; }
}

/* ---------- avis sur la page : pouce et commentaire (15 septembre 2026) ---------- */
/* Le générateur rend le bloc masqué ; app.js ne l'affiche que si un relais est configuré dans
   assets/avis.json. Le bouton d'envoi reprend le bleu des boutons du site (#2563eb, 5,2:1 sur
   blanc), fixe dans les deux thèmes. */
.avis { margin: 26px 0 0; padding: 14px 16px; border: 1px solid var(--border-light); border-radius: 3px; background: var(--bg); }
.page-body .avis, .avis { min-width: 0; }
.avis-titre { font-family: 'Linux Libertine', Georgia, 'Times New Roman', serif; font-size: 16.5px; font-weight: 600; margin: 0 0 10px; padding: 0; border: 0; }
.avis-pouces { display: flex; flex-wrap: wrap; gap: 8px; }
.avis-pouce {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--border); border-radius: 3px; background: var(--content-bg);
  color: var(--text); font-family: inherit; font-size: 14.5px; cursor: pointer;
}
.avis-pouce:hover { background: var(--hover); border-color: var(--hover-bd); }
.avis-pouce[aria-pressed="true"] { background: var(--hover); border-color: var(--focus); font-weight: 600; }
.avis-emoji { font-size: 18px; line-height: 1; }
.avis-mot { display: grid; gap: 4px; margin-top: 13px; max-width: 46em; }
/* « display: grid » l'emporterait sur le display:none que le navigateur donne à [hidden] :
   le formulaire resterait visible avant qu'un pouce soit donné. */
.avis-mot[hidden] { display: none; }
.avis-mot label { font-size: 13.5px; color: var(--text-soft); margin-top: 6px; }
.avis-facultatif { font-size: 12px; color: var(--text-faint); }
.avis-mot textarea, .avis-mot input {
  font-family: inherit; font-size: 15px; padding: 8px 10px; width: 100%;
  border: 1px solid var(--border-light); border-radius: 3px; background: var(--content-bg); color: var(--text);
}
.avis-mot textarea { resize: vertical; }
.avis-mot textarea:focus, .avis-mot input:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
.avis-envoyer {
  justify-self: start; min-height: 44px; margin-top: 10px; padding: 9px 18px;
  border: 1px solid #2563eb; border-radius: 3px; background: #2563eb; color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.avis-envoyer:hover { filter: brightness(1.08); }
.avis-envoyer[disabled] { opacity: .6; cursor: default; filter: none; }
.avis-etat { margin: 10px 0 0; font-size: 13.5px; color: var(--text-soft); }
.avis-etat:empty { margin: 0; }
.avis-merci { color: var(--text); font-weight: 600; }
@media print { .avis { display: none; } }

@media (max-width: 900px) {
  :root { --hh: 106px; } /* l'en-tête passe sur deux lignes */
  .burger { display: block; min-width: 44px; min-height: 44px; font-size: 22px; }
  /* la recherche prend toute la largeur sur sa propre ligne */
  .site-header { flex-wrap: wrap; }
  .searchbox { flex: 1 0 100%; max-width: none; margin-left: 0; order: 3; }
  .btn-theme { width: 44px; height: 44px; }
  .sidebar {
    position: fixed; left: 0; top: var(--hh); bottom: 0;
    background: var(--content-bg); border-right: 1px solid var(--border-light);
    transform: translateX(-105%); transition: transform .18s ease; z-index: 45;
    max-height: none; box-shadow: 4px 0 18px var(--ombre);
    visibility: hidden;
  }
  .sidebar.open { transform: translateX(0); visibility: visible; }
  .content { padding: 16px 16px 36px; border: 0; }
  /* L'infobox liste des métadonnées techniques : sur téléphone elle atteignait 511 px et
     repoussait le résumé introductif hors de l'écran. On la borne, elle défile à l'intérieur. */
  .infobox { float: none; width: 100%; max-width: 100%; margin: 0 0 16px; }
  .infobox table { display: block; max-height: 40vh; overflow-y: auto; }
  .cat-pages, .backlinks ul { columns: 1; }
  .brand-text small { display: none; }
  .page-title { font-size: 24px; }
  /* cibles tactiles : 44 px minimum */
  .letters-nav a { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; text-align: center; margin: 2px; }
  .cat-pages li a, .sidebar a { display: block; padding: 11px 4px; }
  /* Sommaire : 6px de marge (cible de 34px, au-dessus du minimum WCAG 2.5.8 AA de 24px).
     À 11px comme les autres listes, un sommaire de 11 entrées poussait tout le contenu
     hors de l'écran ; le repli automatique fait le reste du travail. */
  .toc a { display: block; padding: 6px 4px; }
  .toc { display: block; width: 100%; }
  .toc-title { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
  .toc-toggle { min-height: 44px; padding: 0 12px; font-size: 14px; }
  .search-filters .filtre { min-height: 40px; }
  /* Le domaine affiché à côté de chaque fiche descendait à 11,5 px : trop petit sous terre. */
  .cat-pages .cat-compte { font-size: 13px; }
  /* Une carte de 300 px ne tient pas dans les 276 px utiles d'un écran de 320 px : la grille
     débordait de 2 px et faisait apparaître une barre horizontale. */
  .portal-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
  .portal-main { padding: 32px 14px 36px; }
  /* « ↑ haut » mesurait 33 x 14 px, sous le minimum WCAG 2.5.8 AA de 24 px. Le padding
     l'amène au-dessus sans faire grossir la ligne du titre qui le porte. */
  .retour-haut { display: inline-block; padding: 6px 8px; }
  /* Fil d'Ariane : 35 x 14 px, seul élément resté sous le minimum WCAG 2.5.8 AA.
     Le padding vertical tient dans l'interligne, la ligne ne se déplace pas. */
  .breadcrumbs a { display: inline-block; padding: 6px 3px; }
  /* avis : les deux pouces occupent la largeur, plus faciles au pouce */
  .avis { padding: 12px; }
  .avis-pouce { flex: 1 1 auto; justify-content: center; }
  .avis-envoyer { justify-self: stretch; }
  /* pages d'accueil (maquette) : une colonne, 16 px de marge et rien d'autre. La carte d'entrée met le
     pictogramme et le titre côte à côte, puis le chapeau sur toute la largeur (ligne plus longue, moins
     de retours), puis « N articles » et les boutons sur une ligne ; tuiles en 2 × 2, cartes plus denses */
  body:has(.accueil-banniere) .content { padding: 14px 14px 32px; }
  .accueil-grille { grid-template-columns: 1fr; gap: 10px; }
  .accueil-banniere { padding: 14px; gap: 8px 12px; margin-bottom: 10px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icone titre titre" "chapeau chapeau chapeau" "compte compte compte"; }
  .accueil-icone { width: 64px; height: 64px; font-size: 36px; border-radius: 14px; align-self: center; }
  .accueil-banniere .page-title { font-size: clamp(21px, 5.6vw, 24px); }
  .accueil-banniere .accueil-chapeau { margin-top: 2px; }
  .accueil-chapeau p { font-size: 13.5px; }
  .accueil-chapeau .accueil-sous-titre { font-size: 15.5px; }
  .accueil-banniere .page-sub { margin-top: 2px; font-size: 14px; }
  .accueil-entete { gap: 10px; padding: 12px 14px 8px; }
  .accueil-entete-lien { font-size: 13.5px; }
  .accueil-corps { padding: 0 14px 12px; font-size: 15px; }
  details.accueil-boite > summary .accueil-entete { padding: 10px 14px; min-height: 60px; gap: 10px; }
  details.accueil-boite .accueil-boite-icone { width: 36px; height: 36px; }
  details.accueil-boite .accueil-boite-icone .ic { width: 21px; height: 21px; }
  .accueil-groupes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  /* les volets sont refermés par app.js et tiennent sur une ligne : la barre de raccourcis les doublerait */
  .accueil-themes-nav { display: none; }
  .accueil-theme > summary { gap: 8px; min-height: 50px; padding: 5px 8px 5px 7px; }
  .accueil-theme-icone { width: 30px; height: 30px; }
  .accueil-theme-icone .ic { width: 25px; height: 25px; }
  .accueil-theme-titre { font-size: 14.5px; letter-spacing: -.005em; }
  .accueil-theme > summary small { font-size: 13px; }
  .accueil-theme > summary .accueil-chevron { margin: 0 2px 0 0; }
  /* tuiles 2 × 2 : le libellé se resserre un peu (12,5 à 14,5 px) et passe sur deux lignes au besoin */
  .page-body .accueil-tuiles { gap: 8px; }
  .page-body .accueil-tuiles li { font-size: clamp(12.5px, 3.3vw, 14px); gap: 6px; padding: 6px 6px 6px 8px; }
  /* tuiles à description (accueil du Recueil) : une par rangée sous 600 px, sinon la description s'étire en hauteur */
  .page-body .accueil-tuiles:has(.accueil-tuile-desc) { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
  .accueil-tuile-emoji { width: 20px; font-size: 18px; }
  .accueil-tuile-icone, .accueil-tuile-icone .ic { width: 22px; height: 22px; }
  /* cibles tactiles : la zone d'un lien de liste atteint 24 px de haut (WCAG 2.5.8) sans changer la ligne */
  .accueil-corps a, .accueil-chapeau a, .accueil-titre a { padding: 4px 0; }
  .accueil-index a { display: inline-block; padding: 6px 0; }
  /* Même plancher que les autres textes secondaires du site sur petit écran (13 px). */
  .page-body .accueil-tuile-desc { font-size: 13px; }
  /* L'arbre de la hiérarchie normative défile dans son cadre plutôt que de passer à la ligne, qui
     casserait son alignement ; encore faut-il voir que c'est un cadre : bordure franche. */
  .accueil-corps pre { border-color: var(--border); }
}
@media (max-width: 374px) {
  /* « Thèmes » et « Explorer tous les thèmes » ne tiennent plus côte à côte : le lien passe dessous */
  .accueil-entete:has(> .accueil-entete-lien) { flex-wrap: wrap; }
  .accueil-entete > .accueil-entete-lien { flex: 1 0 100%; padding-top: 0; margin-top: -4px; }
  /* tuiles toujours en 2 × 2 : la boîte rogne ses marges pour que « Conseiller SST, ergonome » tienne sur deux lignes */
  .accueil-corps:has(> .accueil-tuiles) { padding-left: 10px; padding-right: 10px; }
  .page-body .accueil-tuiles { gap: 6px; }
  .page-body .accueil-tuiles li { font-size: 12px; padding: 6px 5px 6px 7px; gap: 5px; }
  .accueil-tuile-emoji { width: 18px; font-size: 17px; }
  .accueil-tuile-icone, .accueil-tuile-icone .ic { width: 20px; height: 20px; }
}
@media (max-width: 340px) {
  /* écrans vraiment étroits : une tuile par rangée */
  .page-body .accueil-tuiles { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* Une rangée d'actions, une rangée de recherche, même après ajout de l'aide/PWA. */
  .site-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) repeat(4, 44px);
    gap: 8px 4px;
    padding: 8px;
  }
  .site-header > .burger { grid-area: 1 / 1; padding-inline: 0; }
  .site-header > .brand { grid-area: 1 / 2; min-width: 0; }
  .site-header .brand-icon { display: none; }
  .site-header .brand-text strong { font-size: clamp(1.125rem, 5.6vw, 1.375rem); letter-spacing: 0; } /* « WIKI SST » de la taille de la maquette */
  .site-header > .burger { background: none; border-color: transparent; font-size: 22px; } /* icône nue, comme la maquette */
  .site-header > #btnFav { grid-area: 1 / 3; }
  .site-header > #btnAide { grid-area: 1 / 4; }
  .site-header > #btnHorsLigne { grid-area: 1 / 5; }
  .site-header > #btnTheme { grid-area: 1 / 6; }
  .site-header > .searchbox { grid-area: 2 / 1 / auto / -1; width: 100%; min-width: 0; margin: 0; }
  .site-header:has(> #btnInstall) > .searchbox { grid-column-end: -2; }
  .site-header > #btnInstall { grid-area: 2 / 6; }
  .site-header .searchbox input { min-height: 44px; font-size: 1rem; }
  .page-body { font-size: calc(1rem * var(--echelle, 1)); }
}
@media print {
  .site-header, .sidebar, .site-footer, .backlinks, .toc-toggle, .btn-haut, .btn-theme { display: none !important; }
  .content { border: 0; padding: 0; }
  /* toujours imprimer en clair, quel que soit le thème affiché */
  :root { --bg: #fff; --content-bg: #fff; --text: #000; }
}

/* Renvoi vers une note que le vault marque « interne » ou « ne pas publier ».
   Ni un lien (elle n'est pas en ligne), ni un manque (elle existe) : le nom reste
   lisible pour tracer la source, sans promettre une page derrière. */
.interne-inline {
  color: var(--text-soft);
  border-bottom: 1px dotted var(--border);
  cursor: help;
}
.interne-inline small { font-size: .85em; opacity: .8; }

/* Pièce jointe absente du vault (PDF d'un jugement, document de référence).
   Distinguée d'un lien de wiki cassé : le wiki n'a rien perdu, le fichier
   n'a simplement pas été versé. */
.doc-absent { color: var(--text-soft); cursor: help; }
.doc-absent small { font-size: .85em; opacity: .75; }

/* Infographies éditoriales : image agrandissable, équivalent textuel natif. */
.infographie { margin: 1.25rem 0 1.75rem; padding: 1rem; border: 1px solid var(--border-light); border-inline-start: 4px solid var(--accent); border-radius: .75rem; background: var(--content-bg); }
.infographie .page-img { margin: 0 auto 1rem; max-width: 30rem; }
.infographie .page-img a { display: block; }
/* infographies et schémas : lus sur place, donc un plafond plus haut que les captures. Largeur
   définie (et non auto) : avec les dimensions posées sur l'<img>, la place est réservée avant le
   chargement différé ; object-fit garde les proportions quand la hauteur est plafonnée. */
.infographie .page-img img { display: block; width: 100%; height: auto; max-height: min(34rem, 75vh); object-fit: contain; background: none; border: 0; margin: 0 auto; padding: 0; border-radius: .5rem; filter: none !important; }
.infographie .img-zoom { display: block; padding: .5rem; font-size: .875rem; }
.infographie-legende { font-size: 1rem; line-height: 1.6; }
/* pas de version texte dépliable sous les infographies (retirée le 26 septembre 2026, tools/versions_texte.mjs) */
.infographie a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.infographie-sources { color: var(--text-soft); font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
.infographie.infographie-compacte { padding: .65rem .8rem; margin-block: .85rem 1.15rem; }
.infographie-compacte .page-img { margin-bottom: .35rem; }
.infographie-compacte .img-zoom { padding: .25rem; }
.infographie-compacte .infographie-legende { margin: .35rem 0 .5rem; font-size: .9375rem; line-height: 1.45; }
.infographie-compacte .infographie-sources { margin: .35rem 0 0; }
@media (max-width: 480px) { .infographie { padding: .65rem; } }
@media print { .infographie { break-inside: auto; } .infographie .page-img { max-width: 100mm; } }
/* Schémas vectoriels (classe « infographie-schema » posée dans la note) : dessinés sur fond clair,
   inversés en thème sombre pour ne pas laisser un rectangle éblouissant sous terre. Leur palette
   (encre, gris, rouge danger, bleu air) est choisie pour survivre à l'inversion ; l'impression
   et le thème clair gardent le dessin d'origine. */
@media screen {
  :root:not([data-theme="light"]):not([data-theme="auto"]) .infographie-schema .page-img img { filter: invert(.9) hue-rotate(180deg) !important; }
}
@media screen and (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .infographie-schema .page-img img { filter: invert(.9) hue-rotate(180deg) !important; }
}
/* Schémas dessinés sur fond sombre (style retenu par Frank le 26 septembre 2026) : déjà faits pour la
   lecture sous terre, ils ne sont jamais inversés, en clair comme en sombre. */
.infographie-schema.infographie-sombre .page-img img,
:root:not([data-theme="light"]):not([data-theme="auto"]) .infographie-schema.infographie-sombre .page-img img,
:root[data-theme="auto"] .infographie-schema.infographie-sombre .page-img img { filter: none !important; }
/* Affiches denses, en hauteur : plus larges sur tablette, et moins plafonnées en hauteur que les autres
   schémas, pour que leur texte reste lisible (au téléphone, la largeur de l'écran reste la limite). */
.infographie-sombre .page-img { max-width: 40rem; }
.infographie-sombre .page-img img { max-height: min(56rem, 92vh); }

/* En-tête pilote de Cadenassage : aucun autre article n'emploie cette classe. */
.article-entete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.article-entete .page-title { grid-column: 1 / -1; font-family: inherit; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 650; line-height: 1.2; border: 0; padding: 0; margin: 0; overflow-wrap: anywhere; }
.article-entete .page-sub { grid-column: 1; align-self: center; font-size: .875rem; margin: 0; }
.article-entete .lecture-outils { grid-column: 2; grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; margin: 0; }
.article-entete .lecture-outils button { min-width: 44px; min-height: 44px; height: auto; font-size: .875rem; border-radius: .375rem; }
.article-entete .toc { grid-column: 1 / -1; display: block; min-width: 0; width: 100%; margin: 0; padding: .5rem .75rem; border-radius: .5rem; }
.article-entete .toc-title { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; text-align: left; margin: 0; font-size: 1rem; }
.article-entete .toc-compte { display: inline-block; font-size: .875rem; margin-inline-start: .375rem; }
.article-entete .toc-toggle { min-height: 44px; padding: .5rem .625rem; font-size: .875rem; border-radius: .375rem; }
.article-entete .toc > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .125rem .75rem; max-height: none; overflow: visible; margin-top: .25rem; }
.article-entete .toc li { min-width: 0; margin: 0; font-size: .9375rem; }
.article-entete .toc a { display: flex; align-items: center; min-height: 44px; padding: .375rem .25rem; line-height: 1.35; overflow-wrap: anywhere; }
.article-entete .toc.collapsed > ul { display: none; }
.article-entete button:hover:not(:disabled), .article-entete .toc a:hover { background: var(--hover); }
.article-entete button:focus-visible, .article-entete a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
html[data-lecture] .article-entete .lecture-outils { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .article-entete { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .article-entete .lecture-outils { grid-column: 1; grid-row: auto; }
  .article-entete .toc > ul { grid-template-columns: minmax(0, 1fr); }
}
@media print { .article-entete .lecture-outils { display: none; } .article-entete .toc.collapsed > ul { display: grid; } }

/* Le tableau de bord « qualité » est large par nature (une colonne par contrôle) : sur
   téléphone il poussait la page à 557 px pour 390 px d'écran. Il défile dans son cadre, comme
   les tableaux des articles. */
.q-table { display: block; overflow-x: auto; max-width: 100%; }

/* ---------- tablette de chantier (21 septembre 2026) ---------- */
/* Galaxy Tab Active4 Pro : 1 920 × 1 200 à densité 1,5, soit 1 280 × 800 px CSS en paysage et
   800 × 1 280 en portrait — l'appareil qui descend sous terre, tenu avec des gants. Deux manques
   mesurés : en paysage la page dépasse 900 px, donc aucune règle « téléphone » ne s'appliquait
   (boutons d'entête à 38 px, liens de barre latérale à 33 px, champ de recherche à 32 px) et la
   ligne de texte atteignait 130 caractères. On borne la colonne de lecture sur les grands écrans,
   et on agrandit les cibles dès que le pointeur est grossier, quelle que soit la largeur. */

/* 1. Longueur de ligne. Au-delà du téléphone (dès 700 px : le portrait de la tablette est la
   plage où la colonne est la plus large), le texte courant se borne à ~80 caractères ; tableaux,
   images, blocs de code, infobox, grilles et index en colonnes gardent toute la largeur. Le texte
   officiel des articles de loi (.texte-loi) et les pages sans .page-body (recherche, thèmes,
   catégories, contrôles) sont de la prose comme les autres. */
@media screen and (min-width: 701px) {
  .page-body > p, .page-body > ul:not(.cat-pages):not(.accueil-tuiles), .page-body > ol, .page-body > dl,
  .page-body > blockquote, .page-body > .callout, .page-body > .texte-loi, .chapo, .accueil-chapeau,
  .content > p, .content > ul:not(.cat-pages), .content > ol, .content > blockquote, .content > .callout { max-width: 80ch; }
}

/* 2. Cibles tactiles, à toute largeur : c'est le pointeur qui décide, pas la taille de l'écran.
   Écrit après le bloc téléphone : là où les deux s'appliquent (téléphone), les valeurs sont
   les mêmes, pour ne pas défaire un réglage choisi plus haut. */
@media screen and (pointer: coarse) {
  .btn-theme { width: 44px; height: 44px; }
  .searchbox input, .portal-search input { min-height: 44px; font-size: 16px; }
  /* 15 px de haut à l'origine sur tablette (aucune règle ne s'y appliquait) ; 44 px comme sur
     téléphone : la barre de 33 entrées défile dans son cadre, elle ne tenait déjà pas à l'écran */
  .sidebar a, .cat-pages li a { display: block; padding: 11px 4px; }
  .toc a { display: block; padding: 6px 4px; }
  .breadcrumbs a, .retour-haut, .portal-foot a, .accueil-index a { display: inline-block; padding: 8px 4px; }
  .letters-nav a { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; text-align: center; margin: 2px; }
  .accueil-themes-nav a { min-height: 44px; padding: 6px 14px; }
  .accueil-theme > summary { min-height: 44px; }
  .accueil-corps li > a, .voir-aussi li a, .backlinks li a, .liste-pages li a { display: block; padding: 8px 2px; }
  /* 15 px sous une lampe frontale, à bout de bras, avec la visière : un point de plus */
  .page-body, .accueil-corps { font-size: calc(16px * var(--echelle, 1)); }
  .page-body .accueil-tuile-desc, .accueil-corps .accueil-tuile-desc { font-size: 13.5px; }
  /* Commandes isolées : 44 px pleins. */
  .toc-toggle { min-height: 44px; padding: 0 12px; }
  .backlinks > summary, .search-filters .filtre { min-height: 44px; }
  .accueil-theme-page { display: inline-block; padding: 9px 2px; }
  .avis-mot input, .avis-mot textarea { min-height: 44px; font-size: 16px; }
  .pwa-aide-boite .tour-btn, .hl-boutons .tour-btn { min-height: 44px; }
  /* Liens dans le texte, les listes, les tableaux et les titres : la ligne ne bouge pas, la zone
     touchable passe au-dessus des 24 px exigés (WCAG 2.5.8 AA). Un lien de phrase ne peut pas
     faire 44 px sans disloquer le paragraphe : c'est l'exception « lien en ligne » de la norme. */
  .page-body p a, .page-body li a, .page-body td a, .page-body th a,
  .page-body h2 a, .page-body h3 a, .page-body h4 a, .page-body h5 a,
  .accueil-chapeau a, .page-sub a, .page-meta a, .infobox a { padding-top: 5px; padding-bottom: 5px; }
  .accueil-theme-titre a { display: inline-block; padding: 6px 0; }
  .page-body a.ref-source { padding-top: 5px; padding-bottom: 5px; }
  /* appels bibliographiques « 1 », « 2 » : en exposant, sans interligne, ils restaient sous 16 px de haut ;
     la zone touchable grandit sans bouger la ligne (le rembourrage d'un élément en ligne ne l'écarte pas) */
  .page-body a[href^="#ref-"] { padding-block: 7px; padding-inline: .45em; }
  /* titres de boîte et de groupe cliquables sur les accueils */
  .accueil-titre a, .accueil-groupe > h3 > a { display: inline-block; padding: 5px 0; }
  .infobox-tags a.tag { padding-top: 6px; padding-bottom: 6px; }
}

/* 3. Portrait (800 px) : trop large pour la colonne unique du téléphone, trop étroit pour les
   trois colonnes du bureau — les volets de thèmes y tenaient sur 240 px. */
@media screen and (min-width: 700px) and (max-width: 900px) {
  .content { padding: 20px 26px 40px; }
  .accueil-groupes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accueil-groupes.accueil-themes { columns: 2; }
  .accueil-colonnes, .accueil-large .accueil-colonnes { columns: 2; }
  .accueil-colonnes-courtes, .accueil-large .accueil-colonnes-courtes { columns: 3; }
}

/* ---------- l'article en PDF (bouton « PDF » de la barre de lecture, ou impression du navigateur) ----------
   Un document autonome : la source et la date en tête (posées par app.js), le texte à sa taille
   normale (sans le réglage A+), sans les aides d'écran ; les titres restent avec leur texte, les
   lignes de tableau et les images ne se coupent pas, l'en-tête d'un long tableau se répète. */
.impression-source { display: none; }
@media print {
  @page { margin: 14mm 12mm; }
  :root { --echelle: 1 !important; }
  .impression-source { display: block; margin: 0 0 .75rem; padding-bottom: .35rem; border-bottom: 1px solid #999; color: #333; font-size: 9pt; line-height: 1.4; overflow-wrap: anywhere; }
  .img-zoom, .infographie .img-zoom { display: none !important; }
  .toc > ul { max-height: none; overflow: visible; columns: 2; column-gap: 1.5rem; }
  .toc li { break-inside: avoid; }
  .toc a { display: inline; padding: 0; min-height: 0; }
  .page-body h2, .page-body h3, .page-body h4 { break-after: avoid; }
  .page-body tr, .page-body img, .page-body pre, .page-body blockquote { break-inside: avoid; }
  .page-body thead { display: table-header-group; }
}