/* L'AIDE CONTEXTUELLE — feuille du partiel `shared/_aide_page`, qu'il charge
   lui-même (patron de `threads/_composer` et de `/pz/composer.css`).

   ⚠️ PORTAGE STRICT de la maquette de Codex, `zegame-prototypes` commit
   `3416d53` (`m0-shell.css`, section « Navigation mobile / aide au niveau des
   titres »). Les noms de classes et les valeurs sont les siens, propriété par
   propriété. La version précédente de cette feuille était de mon cru : elle
   posait une PASTILLE FLOTTANTE en bas à gauche, faute de contrat visuel. Le
   contrat existe depuis le 29 août — Codex : « retirer le bouton d'aide du menu
   principal ; placer un `?` violet immédiatement après le surtitre de chaque
   page, libellé "Comprendre cette page" ». La pastille disparaît donc, et avec
   elle tout le calcul de coin libre qu'elle imposait.

   ⚠️ ET CE DÉPLACEMENT RÉPARE UN DÉFAUT QUE LE PORTABLE AVAIT MESURÉ. Mon
   contrôle n'existait que lorsque l'aide était FERMÉE : dès qu'une page
   recevait son marqueur, l'aide s'ouvrait à la première visite et le contrôle
   n'était pas rendu — mon assertion « le contrôle est servi » a rougi à
   l'instant où on lui donnait ce qu'elle attendait. Chez Codex le `?` vit dans
   le titre de la page : il est là TOUJOURS, ouverte ou fermée. La forme règle
   ce que l'assertion ne pouvait que constater.

   ⚠️ ÉCART ASSUMÉ, LE MÊME QUE D'HABITUDE : la maquette est un SPA et monte
   tout en JavaScript (`mountContextHelp`, `openContextHelp`). Ce gabarit ne
   charge aucun script pour ce genre de geste — le `?` est un LIEN vers
   `?aide=1`, la fermeture un lien vers `?aide_vue=1`. Le DOM rendu est celui de
   la maquette ; seuls les `<button>` deviennent des `<a>`.

   ⚠️ LES COULEURS SONT ÉCRITES EN LITTÉRAL et non en `var()` : ces règles
   vivent hors de toute racine scopée (le partiel sert douze pages qui n'ont pas
   la même), donc les palettes déclarées SUR ces racines ne descendent pas
   jusqu'ici. Même leçon que le `body:has()` de la messagerie — une custom
   property descend, elle ne remonte pas. */

/* ---- Le `?` dans la ligne du surtitre ---- */

.pz-context-help-row {
  display: flex; align-items: center; gap: 6px; width: max-content; max-width: 100%;
}
.pz-context-help-row > .eyebrow,
.pz-context-help-row > [class*="eyebrow"] { margin: 0 !important; }

.pz-context-help {
  width: 21px; height: 21px; min-width: 21px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: #b52a91; color: #fff; font: 700 12px/1 Poppins, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 0 0 4px transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pz-context-help:hover,
.pz-context-help:focus-visible {
  transform: scale(1.08); box-shadow: 0 0 0 4px #b52a9124; outline: none; color: #fff;
}

/* ---- L'aide elle-même ---- */

/* La maquette bascule `.is-open` en JavaScript ; ici le serveur ne rend le
   voile QUE lorsqu'il doit s'ouvrir. La classe est posée d'emblée pour que le
   sélecteur de la maquette reste vrai à la lettre. */
.pz-context-help-overlay {
  display: none; position: fixed; z-index: 96; inset: 0; padding: 20px;
  background: #160d15d9; place-items: center;
}
.pz-context-help-overlay.is-open { display: grid; }

.pz-context-help-overlay > section {
  width: min(470px, 100%); position: relative;
  border: 1px solid #ddd2c9; border-radius: 22px;
  background: #fffdfa; color: #211820; padding: 32px;
  box-shadow: 0 24px 70px #120a123d;
  max-height: 90vh; overflow: auto;
}
.pz-context-help-overlay h2 {
  margin: 7px 34px 10px 0; font: 700 29px/1.12 "Roboto Slab", Georgia, serif;
}
.pz-context-help-overlay p { margin: 0; color: #62585f; line-height: 1.55; }
.pz-context-help-overlay p + p { margin-top: 10px; }

/* Le sur-titre du dialogue : la maquette écrit « COMPRENDRE CETTE PAGE » en
   toutes lettres, et c'est ce qui nomme l'objet — jamais « PREMIÈRE VISITE »,
   qui mentirait dès la deuxième ouverture. */
.pz-context-help-overlay .pz-shell-eyebrow {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #a32678;
}

.pz-shell-close {
  position: absolute; top: 18px; right: 18px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: #62585f; font-size: 20px; line-height: 1; text-decoration: none; cursor: pointer;
}
.pz-shell-close:hover { background: #f1e9ef; color: #211820; }

.pz-context-help-continue {
  display: block; margin: 22px 0 0 auto; width: max-content;
  border: 0; border-radius: 24px; padding: 11px 18px;
  background: #211820; color: #fff; font-weight: 700; text-decoration: none; cursor: pointer;
}
.pz-context-help-continue:hover { background: #b52a91; color: #fff; }

/* Les valeurs mobiles de la maquette, reprises telles quelles. */
@media (max-width: 760px) {
  .pz-context-help-row { gap: 5px; }
  .pz-context-help { width: 20px; height: 20px; min-width: 20px; font-size: 11px; }
  .pz-context-help-overlay > section { padding: 28px 22px; }
  .pz-context-help-overlay h2 { font-size: 25px; }
}

/* ── Le `?` dans une ligne de TITRE ────────────────────────────────────────
   Toutes les pages n'ont pas de surtitre. Sur celles-là le canon autorise le
   `?` « près de l'accroche ou du titre » — mais un titre porte une marge
   basse, et `align-items: center` centre sur la boîte MARGE COMPRISE : le `?`
   remonte de la moitié de cette marge (4 px sur un titre Bootstrap, 9 px sur
   `.res-monde-titre`, où c'est visible). La marge passe donc du titre à la
   ligne : le rythme de la page ne bouge pas, le `?` se centre sur le texte.
   Le titre perd donc sa marge basse ici ; qui la reprend est dit plus bas. */

.pz-context-help-row > h1,
.pz-context-help-row > h2,
.pz-context-help-row > h3 { margin-bottom: 0; }

/* ⚠️ ET LA MARGE REVIENT À LA VUE, PAS À CETTE FEUILLE. Une règle générique
   ici devrait deviner combien valait la marge du titre : `.5rem` sur un titre
   Bootstrap, 18 px sur `.res-monde-titre`, ZÉRO sur `.chapitre-titre` (dont le
   sous-titre se colle exprès). Chaque ligne porte donc l'utilitaire du titre
   qu'elle enveloppe (`.mb-2`, `.mb-1`, ou rien) : c'est lisible là où ça se
   décide, et ça ne suppose rien. */
