/* Bandeau urgence permanent — replié à une ligne à partir du 2e écran de la session
   (charte §10) ; voir js/components/emergency-bar.js pour la logique déplié/replié.
   Sticky UNIQUEMENT à l'état replié (charte v12 §7) : déplié (1er écran de session), il
   doit défiler normalement avec la page — avant ce correctif il restait collé en haut
   même déplié (4 lignes) car le sticky était posé sur le wrapper commun avec le header. */
.emergency-bar {
  background: var(--couleur-urgence);
  color: var(--couleur-urgence-texte);
  position: static;
}
.emergency-bar[data-etat="replie"] {
  position: sticky;
  /* Se cale juste sous le header, lui-même sticky (voir .site-header, layout.css) — hauteur
     mesurée en JS (emergency-bar.js) car variable (sous-titre visible ou non, nav repliée). */
  top: var(--header-height, 64px);
  z-index: 49;
}
.emergency-bar-inner {
  max-width: var(--largeur-contenu-max);
  margin: 0 auto;
  padding: var(--space-xs) var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  align-items: center;
  font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum, plus var(--font-size-small) */
}
.emergency-bar strong { font-weight: 700; }
/* Icône SVG trait fin (charte v14) — remplace l'emoji natif 🚨 dans emergency-bar.js. */
.emergency-icone {
  display: inline-flex;
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 0.3em;
}
.emergency-icone svg { display: block; width: 100%; height: 100%; }
.emergency-bar a {
  text-decoration: underline;
  white-space: nowrap;
  min-height: var(--tap-target);
  padding: 0 0.4rem;
  margin: 0 -0.4rem;
  display: inline-flex;
  align-items: center;
}
/* Chevron replier/déplier du bandeau urgence en état déplié */
.emergency-bar[data-etat="deplie"] .emergency-bar-toggle {
  color: var(--couleur-urgence-texte);
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  font-size: 1rem;
}
/* État replié : une seule ligne, pleine largeur, toujours accessible en un tap */
.emergency-bar-toggle-collapsed {
  width: 100%;
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-md);
  max-width: var(--largeur-contenu-max);
  margin: 0 auto;
  color: var(--couleur-urgence-texte);
  font-weight: 600;
  font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum */
}
.emergency-bar-details {
  width: 100%;
  color: var(--color-urgence-text);
}
.emergency-bar-details summary {
  cursor: pointer;
  padding: var(--space-xs) 0;
}
.emergency-bar-details[open] summary { font-weight: 600; }
.emergency-bar-details p { padding: var(--space-xs) 0 var(--space-sm); }
.emergency-bar-subtitle {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum */
  letter-spacing: 0.02em;
  padding-top: var(--space-sm) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: var(--space-xs);
}
.emergency-bar-subtitle:first-of-type { border-top: none; margin-top: 0; }

/* "Accès direct aux rubriques" — menu déroulant du bandeau sticky.
   Contenu peuplé en JS depuis screen.choix de l'écran "acces-direct" (voir
   js/components/quick-access-menu.js) — ne pas dupliquer la liste ici. */
.quick-access {
  position: relative;
}
.quick-access-trigger {
  font: inherit;
  font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum */
  color: var(--color-text);
  padding: var(--space-xs);
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.quick-access-trigger:hover, .quick-access-trigger:focus-visible {
  text-decoration: underline;
}
.quick-access-trigger::after {
  content: "▾";
  font-size: 0.75em;
}
.quick-access-trigger[aria-expanded="true"]::after { content: "▴"; }

.quick-access-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  min-width: 16rem;
  max-width: min(22rem, calc(100vw - var(--space-md) * 2));
  margin-top: var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
/* Un style auteur sur `display` prime toujours sur la règle UA [hidden]{display:none},
   même à spécificité égale — sans cette règle, le menu resterait visible à l'écran
   une fois "fermé" (l'attribut hidden serait correct en JS mais sans effet visuel). */
.quick-access-menu[hidden] {
  display: none;
}
.quick-access-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  min-height: var(--tap-target);
  justify-content: center;
  color: var(--color-text);
}
.quick-access-item:hover, .quick-access-item:focus-visible {
  background: var(--color-bg);
  outline: none;
}
.quick-access-item-label { font-weight: 600; }
.quick-access-item-sub {
  font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum */
  color: var(--color-text-muted);
}

/* Sépare "Effacer mes traces" du menu "Accès direct aux rubriques" qui le précède
   (charte v18, 2026-07-23) — voir index.html pour le constat de discoverability.
   Toujours visible, y compris <900px : c'est justement là que la place manque le
   plus et que le contrôle a le plus besoin de rester repérable comme indépendant. */
.nav-separateur {
  width: 1px;
  height: 20px;
  background: rgba(241, 240, 235, 0.35); /* --couleur-brume à faible opacité, sur fond nuit */
  flex-shrink: 0;
}

/* Bouton "Effacer mes traces" — icône seule sous 900px, icône + libellé au-delà
   (charte §10 ; élargi charte v18, 2026-07-23), voir js/components/clear-trace.js */
.clear-trace-btn {
  color: var(--couleur-nuit);
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border-radius: var(--radius);
}
.clear-trace-label {
  display: none;
  white-space: nowrap;
}
.clear-trace-btn:hover, .clear-trace-btn:focus-visible {
  color: var(--couleur-nuit-hover);
  background: var(--couleur-bordure);
}

/* "J'ai besoin d'aide pour moi" — transversal, Entrée 3 uniquement */
.help-for-me-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.help-for-me-inner, .help-for-me-bar {
  /* Hors périmètre de la correction d'alignement v10 §7 : .help-for-me-bar est ici
     l'unique élément (pas de wrapper interne séparé dans le DOM réel, voir
     help-for-me.js) — centrage indépendant conservé tel quel, pas un cas de décalage
     avec le header puisque ce composant n'est pas de toute façon aligné dessus (il
     flotte sous le header, pas dans son gutter). */
  max-width: var(--largeur-contenu-max);
  margin: 0 auto;
}
.help-for-me-link {
  display: block;
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  min-height: var(--tap-target);
  font-weight: 600;
  color: var(--color-primary-dark);
}
.help-for-me-link:hover, .help-for-me-link:focus-visible {
  text-decoration: underline;
}

/* Hero d'accueil (charte §3/§6) : titre + sous-titre + motif "le sentier" — usage
   rare et volontaire, réservé à l'ouverture de l'accueil. */
.hero { display: flex; flex-direction: column; gap: var(--space-sm); }
.hero-titre {
  font-size: var(--font-size-h1);
  font-weight: 600;
  color: var(--couleur-encre);
}
.hero-soustitre {
  font-size: var(--font-size-h3);
  color: var(--couleur-texte-secondaire);
  font-family: var(--font-corps);
}
.hero-motif { margin-top: var(--space-xs); }
.hero-sentier { display: block; width: 100%; max-width: 18rem; height: auto; }
@media (min-width: 768px) {
  .hero-titre { font-size: 2.25rem; }
}

/* Écran générique.
   Espacement entre blocs distincts (titre / corps / encadré / bulle / choix / renvois)
   vs entre paragraphes d'un même bloc — charte §7. */
.screen { display: flex; flex-direction: column; gap: var(--espace-section); }
.screen-back {
  align-self: flex-start;
  font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum */
  color: var(--couleur-nuit);
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) 0;
}
.screen-back:hover, .screen-back:focus-visible { text-decoration: underline; }

/* Regroupe "← Retour" et le repère de module (charte v16, 2026-07-21) — voir render.js
   renderScreen/renderRepereModule. Gap resserré : ce sont deux aides de navigation de même
   nature en haut d'écran, pas deux blocs de contenu distincts (qui, eux, méritent le grand
   --espace-section entre enfants de .screen). */
.nav-haut-ecran { display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
.repere-module {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--couleur-sauge);
  font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum (était 13px) */
  font-weight: 600;
  background: transparent;
  text-decoration: none;
  min-height: var(--tap-target);
  padding: var(--space-xs) 0;
}
.repere-module:hover, .repere-module:focus-visible { text-decoration: underline; }
.repere-module-icone { flex: 0 0 auto; width: 14px; height: 14px; }
.repere-module-icone svg { display: block; width: 100%; height: 100%; }

.screen-title { font-size: var(--font-size-h2); font-weight: 600; }
.screen-corps p { margin-bottom: var(--espace-paragraphe); }
.screen-corps p:last-child { margin-bottom: 0; }
/* Vraie liste à puces (corps: [{ liste: [...] }], voir render.js renderCorps) — jusqu'ici
   toute énumération du contenu n'était qu'un paragraphe préfixé d'un texte (ex. "✔ ..."),
   jamais un <ul><li> réel. list-style ré-activé ici : reset.css le retire globalement. */
.screen-liste {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: var(--espace-paragraphe);
}
.screen-liste:last-child { margin-bottom: 0; }
.screen-liste li { margin-bottom: 0.4rem; }
.screen-liste li:last-child { margin-bottom: 0; }
.screen-liste li::marker { color: var(--couleur-sauge); }
/* Liste numérotée (charte v16, 2026-07-21) — séquence d'actions où l'ordre compte, voir
   render.js renderCorps {listeNumerotee}. Double classe pour battre .screen-liste { list-style:
   disc } à spécificité égale, sans dépendre de l'ordre des règles dans la feuille. */
.screen-liste.screen-liste-numerotee { list-style: decimal; }

/* Sous-titre de liste (charte v17, 2026-07-22) — un paragraphe qui se termine par ":" et
   introduit directement une liste juste après (voir render.js analyserSoustitreListe,
   partagé par renderCorps et renderEncadres). Sélecteur renforcé (.screen-corps p.xxx)
   pour battre .screen-corps p { margin-bottom: ... } de façon fiable, sans dépendre de
   l'ordre des règles dans la feuille. */
.screen-corps p.corps-soustitre-liste, .encadre p.corps-soustitre-liste {
  font-weight: 700;
  color: var(--couleur-nuit);
  margin-top: var(--space-md); /* ~20px — détache du bloc précédent */
  margin-bottom: 0.25rem;
}
/* Titre de sous-rubrique (2026-08-22, écran "Pour aller plus loin") : palier au-dessus de
   .corps-soustitre-liste — regroupe plusieurs blocs (ex. "Témoignages" regroupe une seule
   liste, "Comprendre et s'accompagner" en regroupe trois). Typo-titre (Zilla Slab) et
   marge haute large pour se détacher nettement du bloc précédent, contrairement au
   sous-titre qui reste en typo-corps et se resserre avec ce qu'il introduit. */
.screen-corps p.corps-titre-section {
  font-family: var(--font-titre);
  font-size: var(--font-size-h3);
  font-weight: 600;
  color: var(--couleur-nuit);
  margin-top: var(--espace-section);
  margin-bottom: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--couleur-bordure);
}
.screen-corps p.corps-soustitre-liste-source, .encadre p.corps-soustitre-liste-source {
  font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum (était 12px) */
  color: var(--couleur-texte-secondaire);
  margin-top: 0;
  margin-bottom: 0.25rem;
}

/* Puces de liste ✔/❌ — remplace les emojis natifs (rendu inconsistant selon appareils,
   jure avec les traits fins/palette maîtrisée du site) par une puce de couleur pure.
   Détection du préfixe "✔ "/"❌ " et retrait : render.js, appendTexteAvecPuce() — même
   mécanisme pour un <li> réel ({liste:[...]}) et un <p> paragraphe-liste (forme la plus
   répandue dans le contenu existant), donc pas besoin de retoucher le contenu. */
.item-puce {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
}
/* Seul enfant flex avec .puce (voir render.js, appendTexteAvecPuce) — tout le texte
   (gras, liens, segments inline) reste un flux normal à l'intérieur, pas des items
   flex indépendants qui s'enroulent chacun dans leur propre colonne étroite. */
.item-puce-texte {
  flex: 1 1 auto;
  min-width: 0;
}
/* Le marqueur natif du <ul> (list-style: disc) doit s'effacer sur les items qui portent
   leur propre puce colorée — sinon double marqueur. */
.screen-liste li.item-puce { list-style: none; }
.puce {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 7px; /* alignement optique avec la 1ère ligne de texte, pas la baseline */
  border-radius: 50%;
}
.puce-sauge { background: var(--couleur-sauge); }
.puce-urgence { background: var(--couleur-urgence); }
/* Marqueur de gravité inline (pas un item de liste au sens strict) — même principe,
   légèrement plus grand. */
.puce-grande { width: 9px; height: 9px; margin-top: 6px; }
/* Rampe à 3 tons réservée à Module B, écran "Trois situations, trois réponses"
   (validée 2026-07-20) — gradation de gravité 🔴🟠🟡, volontairement dans la seule
   famille du rouge --couleur-urgence (pas --couleur-ambre/--couleur-sauge, réservées à
   d'autres usages ailleurs sur le site). Couleurs littérales, PAS des tokens globaux :
   ne pas généraliser ces 2 teintes à d'autres écrans sans validation séparée. */
.puce-urgence-moyenne { background: #C87A70; }
.puce-urgence-claire { background: #DEB9B2; }

/* Note de fin de liste ("* signal clinique...", voir entree1.js/entree2.js) — atténuée
   pour ne pas se lire comme une phrase de plus dans le flux du corps. Même famille visuelle
   que .bulle-source (taille réduite, couleur secondaire). */
.note-secondaire {
  font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum */
  color: var(--couleur-texte-secondaire);
}
/* Vraie citation (corps: [{ citation: ... }], voir render.js renderCorps) — jusqu'ici les
   passages cités du contenu source (lignes ">" Markdown) devenaient des <p> identiques au
   reste du corps, sans distinction visuelle. Pas d'italique (garde la cohérence avec le
   ton sobre du reste du texte) : le repère est le trait sauge + le texte légèrement
   atténué, même famille que .choix-group-title/.footer-note pour les niveaux de lecture secondaires. */
.screen-citation {
  border-left: 3px solid var(--couleur-sauge);
  padding-left: var(--space-md);
  color: var(--couleur-texte-secondaire);
  margin-bottom: var(--espace-paragraphe);
}
.screen-citation:last-child { margin-bottom: 0; }
.screen-citation p { margin-bottom: 0.4rem; }
.screen-citation p:last-child { margin-bottom: 0; }
/* Phrase de transition juste avant les choix (ex. accueil : "Choisissez ci-dessous...") —
   doit se lire comme un pont vers l'action, pas comme une ligne de texte de plus : espace
   au-dessus volontairement plus marqué que le --espace-section standard entre blocs (le
   gap flex de .screen fournit déjà --espace-section, ce margin-top s'y ajoute). */
.screen-transition {
  margin-top: 1rem;
  font-weight: 500;
}

/* Encadrés signal fort ⚠️ */
/* Couleur de texte explicite (charte-encre) : sans elle, un encadré placé dans un
   conteneur à fond sombre (ex. footer) hériterait de la couleur claire de cet ancêtre
   et deviendrait illisible sur son propre fond clair — même famille de bug que le menu
   déroulant (spécificité/héritage d'une couleur pensée pour un autre fond). */
.encadre {
  background: var(--color-warning-bg);
  color: var(--couleur-encre);
  border-left: 4px solid var(--color-warning-border);
  border-radius: 0.25rem;
  padding: var(--space-sm) var(--space-md);
}
.encadre-titre { font-weight: 700; margin-bottom: var(--space-xs); display: flex; align-items: flex-start; gap: 0.5em; }
/* Encadré sans titre propre (ex. Module F0, note "mise à jour régulièrement") — l'icône
   se pose alors sur la 1ère ligne de texte, même traitement flex que .encadre-titre. */
.encadre-intro { display: flex; align-items: flex-start; gap: 0.5em; }
.encadre-icone {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--couleur-ambre);
  margin-top: 0.05em; /* alignement optique avec la 1ère ligne */
}
.encadre-icone svg { display: block; width: 100%; height: 100%; }

/* Bulles / tooltips (détails accessibles) — charte v16 (2026-07-20) : le déclencheur
   (summary) reprend le style "bouton secondaire" (contour sauge, fond transparent, texte
   sauge, hover fond sauge/texte brume — même famille que .choix-btn) plutôt qu'une carte
   blanche pleine sans contour, qui ne signalait aucune affordance de clic. Le contenu
   déplié (.bulle-contenu) reste dans un cadre sauge assorti, attaché sous le déclencheur. */
.bulle { border-radius: var(--radius); }
.bulle summary {
  list-style: none; /* triangle natif retiré — chevron maison ci-dessous, aligné à droite */
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  color: var(--couleur-sauge);
  background: transparent;
  border: 1px solid var(--couleur-sauge);
  border-radius: var(--radius);
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.bulle summary::-webkit-details-marker { display: none; } /* Safari */
.bulle summary::marker { content: ""; } /* Firefox */
.bulle summary:hover, .bulle summary:focus-visible {
  background: var(--couleur-sauge);
  color: var(--couleur-brume);
  outline: 2px solid var(--couleur-sauge);
  outline-offset: 2px;
}
.bulle[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.bulle-icone {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: currentColor; /* suit sauge au repos, brume au survol/focus/ouvert */
}
.bulle-icone svg { display: block; width: 100%; height: 100%; }
/* Chevron d'affordance "cliquer pour développer" — aligné à droite (margin-left: auto
   dans le flex du summary), pivote à l'ouverture plutôt que deux glyphes différents. */
.bulle-chevron {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 14px;
  line-height: 1;
  color: currentColor;
  transition: transform 0.15s ease;
}
.bulle[open] .bulle-chevron { transform: rotate(90deg); }
.bulle-contenu {
  padding: var(--space-md);
  border: 1px solid var(--couleur-sauge);
  border-top: none;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  background: var(--couleur-surface);
}
.bulle-source { font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum */ color: var(--color-text-muted); margin-top: var(--space-xs); }

/* Choix (boutons de branchement) */
.choix-liste { display: flex; flex-direction: column; gap: var(--space-sm); }
/* Largeur du bouton primaire (charte v8 §4) : la cause du problème est le stretch par
   défaut du flex (align-items:stretch hérité), pas une propriété manquante sur
   .btn-primaire lui-même — donc on corrige ici, sur le conteneur. :has() scope le fix
   au SEUL .choix-liste qui enveloppe le bouton "Continuer" (renderSuivant génère son
   propre <div class="choix-liste"> distinct des choix multiples) : les cartes de choix
   normales (.choix-btn, .entree-btn) gardent leur pleine largeur voulue. */
.choix-liste:has(.btn-primaire) { align-items: flex-start; }
/* Sépare visuellement un encadré qui suit un groupe de boutons, pour qu'il ne semble pas
   rattaché au dernier bouton du groupe (ex. accueil : le bloc "Pourquoi ce site existe"
   ne doit pas paraître spécifique au dernier bouton d'entrée du groupe). */
.choix-liste + .encadre {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
/* Repère de lecture avant un groupe de boutons d'entrée (ex. "Vous êtes le parent :") —
   couleur secondaire + majuscules pour la hiérarchie, jamais traité comme un titre de
   section (pas de h2). Taille remontée à 16px (charte v19, 2026-07-23, politique 16px
   minimum — était 12px, sous le seuil d'accessibilité déjà acté dans le plan de dev). */
.choix-group-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--couleur-texte-secondaire);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* charte v8 §7 : 2rem entre la fin d'un groupe et le label suivant. Le gap flex du
     conteneur (.choix-liste, --space-sm = 0.75rem) fournit déjà l'espace label → 1er
     élément du groupe (--espace-label-groupe, même valeur) ; ce margin-top complète
     jusqu'à --espace-entre-groupes pour l'écart AVANT un label (sauf le tout premier). */
  margin-top: calc(var(--espace-entre-groupes) - var(--space-sm));
}
.choix-group-title:first-child { margin-top: 0; }
/* Bouton secondaire (charte §4) : options de branchement du parcours (choix multiples,
   contenu optionnel/complémentaire) — jamais la seule action mise en avant sur l'écran,
   contour sauge plutôt que fond plein pour ne pas rivaliser avec le primaire (ambre). */
.choix-btn {
  text-align: left;
  background: transparent;
  color: var(--couleur-encre);
  border: 1px solid var(--couleur-sauge);
  border-radius: var(--radius);
  padding: var(--space-md);
  min-height: var(--tap-target);
}
.choix-btn:hover, .choix-btn:focus-visible {
  background: var(--couleur-sauge);
  color: var(--couleur-brume);
  outline: 2px solid var(--couleur-sauge);
  outline-offset: 2px;
}

/* Bouton primaire (charte §4) : l'action unique qui fait avancer le parcours
   ("Continuer", "Commencer"). --couleur-ambre est réservée à cet usage — ne jamais
   la réutiliser en décoration ailleurs sur le site. */
.btn-primaire {
  text-align: left;
  background: var(--couleur-ambre);
  color: var(--couleur-brume);
  border: none;
  border-radius: var(--radius);
  padding: 14px 32px; /* charte v8 §4 : padding généreux, largeur ajustée au texte */
  min-height: var(--tap-target);
  font-weight: 600;
}
.btn-primaire:hover, .btn-primaire:focus-visible {
  background: var(--couleur-ambre-hover);
  outline: 2px solid var(--couleur-ambre-hover);
  outline-offset: 2px;
}

/* Boutons d'entrée (accueil) — charte §4, exception "portes d'entrée parallèles" :
   PAS de hiérarchie primaire/secondaire, PAS de couleur individuelle par bouton
   (l'ancien code couleur 🔵🟠🔴🟣 impliquait un dégradé de gravité entre les situations,
   contraire à la règle éditoriale : aucune situation n'est moins légitime qu'une autre).
   Les 4 boutons (entree1-4, class conservées pour compat mais visuellement identiques)
   partagent exactement le même style neutre. */
.entree-liste { display: flex; flex-direction: column; gap: var(--space-md); }
.entree-btn {
  display: block;
  border-radius: var(--radius);
  padding: var(--space-md);
  background: var(--couleur-surface);
  color: var(--couleur-nuit);
  border: 1px solid var(--couleur-nuit);
  box-shadow: none;
}
.entree-btn h2 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.entree-btn p { font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum */ color: var(--couleur-texte-secondaire); }
/* Bug corrigé : renderChoix() (render.js) pose à la fois .choix-btn ET .entree-btn sur ces
   boutons. .choix-btn:hover déclare `background: var(--couleur-sauge)` et
   `color: var(--couleur-brume)` ; à spécificité égale, .entree-btn:hover doit redéclarer
   CES DEUX propriétés explicitement (ne pas se contenter d'omettre `background` en pensant
   que "pas de règle" = "pas de changement" : ça laisse justement passer celle de
   .choix-btn, une carte verte inattendue au premier essai de ce correctif). Le titre
   (.entree-btn h2, sans couleur propre, contrairement à .entree-btn p) héritait du brume
   "fuité" et devenait invisible sur son propre fond. Seule la bordure doit changer au
   survol — fond et couleur de texte figés à leurs valeurs normales ci-dessous. */
.entree-btn:hover, .entree-btn:focus-visible {
  background: var(--couleur-surface);
  color: var(--couleur-nuit);
  outline: 2px solid var(--couleur-nuit);
  outline-offset: 2px;
}

/* Variante sobre : liste de modules en accès direct — ton neutre, distinct des boutons
   colorés du parcours guidé (Entrée 1-4). */
.entree-btn.module {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: none;
}
.entree-btn.module h2 { font-size: 1rem; }
.entree-btn.module p { color: var(--color-text-muted); }
/* Même bug que .entree-btn:hover ci-dessus (même fuite de .choix-btn:hover) — `background`
   et `color` explicites ici aussi, pas seulement `color`. */
.entree-btn.module:hover, .entree-btn.module:focus-visible {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-primary);
}

/* "Revoir les autres options de ce menu" (charte v16, 2026-07-21) — voir render.js
   renderRevoirOptions/state.js. Ligne fine au-dessus, style discret cohérent avec la
   famille (b) du bloc renvois ci-dessous (--couleur-texte-secondaire) : ce n'est pas du
   contenu à consulter, juste une aide de navigation. Taille remontée à 16px (charte v19,
   2026-07-23, politique 16px minimum — était 13px). */
.revoir-options {
  border-top: 1px solid var(--couleur-bordure);
  padding-top: var(--space-sm);
}
.revoir-options-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--couleur-texte-secondaire);
  font-size: 16px;
  background: transparent;
  text-decoration: none;
  min-height: var(--tap-target);
}
.revoir-options-link:hover, .revoir-options-link:focus-visible { text-decoration: underline; }
.revoir-options-icone { flex: 0 0 auto; width: 13px; height: 13px; }
.revoir-options-icone svg { display: block; width: 100%; height: 100%; }

/* Bloc de sortie d'écran (charte v15, 2026-07-20) : ressources/sources documentaires (a)
   puis, séparées par une ligne fine, les sorties de navigation (b) — jamais l'inverse
   (voir render.js renderScreen). Un seul conteneur flex pour les deux familles : espace
   régulier et contrôlé entre elles, plutôt que le grand --espace-section entre blocs
   indépendants qui les faisait paraître sans rapport entre elles. */
.renvois-bloc { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Famille (a) — ressources/sources citées : même traitement que .lien-tertiaire inline
   (charte §4-5), suffixe ↗ discret réservé aux liens réellement externes, jamais de
   préfixe flèche en texte brut. C'est du contenu à consulter — pas une sortie d'écran,
   donc le traitement le plus affirmé des deux familles (couleur encre, poids plein). */
.liens-ressources { display: flex; flex-direction: column; gap: var(--space-xs); }
.lien-ressource {
  color: var(--couleur-nuit);
  font-weight: 600;
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.lien-ressource:hover, .lien-ressource:focus-visible { text-decoration: underline; }

/* Lien tertiaire inline (charte §4-5) : ressource citée directement dans le corps du
   texte, via [libellé](url) dans le contenu — remplace la liste de liens dupliquée en
   fin d'écran (voir js/render.js renderInline). Même règle ↗ que .lien-ressource
   ci-dessus (partagent .lien-externe). */
/* Soulignement par défaut, pas seulement au survol (charte v19, 2026-07-26) : un lien
   inline dans le corps de texte n'était distinguable du texte courant qu'au survol —
   couleur nuit quasi identique à --couleur-encre (texte courant). Couleur nuit conservée
   telle quelle (pas de sauge) : contraste WCAG insuffisant sur fond clair (~2,75:1 sur
   --couleur-brume, ~3,14:1 sur blanc — sous le seuil 4,5:1 texte normal). */
/* Renfort graisse + épaisseur du soulignement (2026-08-18) : le soulignement permanent
   seul restait insuffisant — signalé en usage réel sur un lien niché dans une italique
   entre parenthèses, confondu avec du texte non cliquable. Contraste couleur nuit vs
   encre mesuré à 1,22:1 (quasi identique) : la distinction ne peut pas passer par la
   couleur sans casser soit le contraste sur fond clair (nuit, ~10:1, à préserver), soit
   la réservation de --couleur-ambre aux CTA. Levier retenu : poids de police + épaisseur
   du trait, qui ne dépendent pas de la couleur. */
.lien-tertiaire {
  color: var(--couleur-nuit);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.15em;
  font-weight: 600;
}
.lien-tertiaire:hover, .lien-tertiaire:focus-visible { text-decoration: underline; }
.lien-externe::after { content: " ↗"; font-size: 0.8em; opacity: 0.6; }

/* Bloc mis en avant (2026-08-22) : carte "à la une" pour un contenu daté/événementiel
   (ex. écran "Pour aller plus loin", encart "En ce moment à regarder") — fond
   --couleur-poussiere, réservée par la charte au highlight rare hors alerte (jamais pour
   décorer, jamais pour signaler un problème). Distincte des .encadre (alerte ⚠️) et des
   .bulle (repli 💬) : ni avertissement, ni complément optionnel — une mise en avant. */
.bloc-mis-en-avant-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--espace-section);
}
.bloc-mis-en-avant {
  background: var(--couleur-poussiere);
  border-radius: var(--radius);
  padding: var(--space-lg);
}
.bloc-mis-en-avant-eyebrow {
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--couleur-nuit);
  margin-bottom: var(--space-xs);
}
.bloc-mis-en-avant-titre {
  font-family: var(--font-titre);
  font-size: var(--font-size-h3);
  font-weight: 600;
  color: var(--couleur-nuit);
  margin-bottom: var(--space-xs);
}
.bloc-mis-en-avant-texte {
  color: var(--couleur-encre);
}
.bloc-mis-en-avant-texte + .bloc-mis-en-avant-texte { margin-top: var(--space-xs); }
.bloc-mis-en-avant-source {
  font-size: var(--font-size-small);
  color: var(--couleur-texte-secondaire);
  font-style: italic;
  margin-top: var(--space-xs);
}

/* Icône info inline (marqueur "(ℹ️ ...)" en aparté dans une phrase, voir render.js
   renderInline) — trait fin, hérite la couleur du texte porteur. */
.icone-info-inline {
  display: inline-flex;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  color: currentColor;
}
.icone-info-inline svg { display: block; width: 100%; height: 100%; }

/* Famille (b) — sorties de navigation : Retour à l'accueil, Suivant, renvois croisés vers
   un autre écran/module. Volontairement plus discrète que (a) : ce n'est pas du contenu
   à consulter, juste une sortie d'écran. Le préfixe "→ " en texte brut est retiré au
   profit d'un simple retrait (padding-left). */
.renvois { display: flex; flex-direction: column; gap: var(--space-xs); }
/* Lien d'action par défaut — pointe vers du contenu pertinent (autre écran/module),
   pas une simple sortie : traitement affirmé, proche du poids d'un vrai lien (charte
   v18, 2026-07-23 — corrige une confusion avec .renvoi-link-neutre ci-dessous, qui
   avait jusqu'ici exactement le même style que tous les autres renvois). */
.renvoi-link {
  color: var(--couleur-nuit);
  font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum (était 15px) */
  font-weight: 600;
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  background: transparent;
  text-decoration: none;
  padding-left: var(--space-sm);
}
.renvoi-link:hover, .renvoi-link:focus-visible { text-decoration: underline; }
/* "Retour à l'accueil" — sortie neutre, jamais du contenu pertinent (voir render.js
   renderRenvois : target === "accueil"). Volontairement plus discret que le reste
   des renvois ci-dessus. */
.renvoi-link-neutre {
  color: var(--couleur-texte-secondaire);
  font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum */
  font-weight: 400;
}
/* Ligne de démarcation avec la famille (a) au-dessus — posée en JS uniquement quand les
   deux familles coexistent sur l'écran (voir render.js renderScreen). */
.renvois.renvois-avec-separateur {
  margin-top: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--couleur-bordure);
}
/* Sous-titre d'un groupe de renvois secondaires (ex. "Pour aller plus loin"), pour le
   distinguer visuellement des renvois de sortie principaux d'un écran — même famille (b),
   simple sous-groupe. */
.renvois-secondaires-titre {
  font-weight: 700;
  font-size: 16px; /* charte v19, 2026-07-23 : politique 16px minimum */
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* En construction */
.en-construction {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  color: var(--color-text-muted);
}