/* ihaveaproject — charte §4.13 (référence forward-ai.fr, 3 couleurs pas plus)
 * Fond #ffffff — Encre #1a1a1a (hiérarchie par OPACITÉ) — Accent #e8602a.
 * Serif élégante en titre (fichiers self-host à vendre avec IHP-8 — en
 * attendant, repli système de la même famille), sans-serif système en corps.
 * Radius 3-8px, bordures fines à faible opacité, blancs généreux, zéro CDN. */

:root {
  --fond: #ffffff;
  --encre: #1a1a1a;
  --encre-73: rgba(26, 26, 26, 0.73);
  --encre-47: rgba(26, 26, 26, 0.47);
  --encre-26: rgba(26, 26, 26, 0.26);
  --accent: #e8602a;
  --accent-hover: #c94420;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: "Geist Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.bandeau {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--encre-26);
}

.marque {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  color: var(--encre);
  text-decoration: none;
}

.langues a {
  color: var(--encre-73);
  text-decoration: none;
  margin-left: 1rem;
  font-size: 0.9rem;
}

.langues a:hover { color: var(--encre); }

main { max-width: 44rem; margin: 0 auto; padding: 4rem 1.5rem; }

h1 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 2.6rem;
  margin: 0 0 0.5rem;
}

.accroche {
  font-size: 1.35rem;
  color: var(--encre-73);
  margin: 0 0 2rem;
}

.explication { color: var(--encre-73); max-width: 34rem; }

.statut { color: var(--encre-47); font-size: 0.95rem; }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 22rem; }

label { color: var(--encre-73); font-size: 0.95rem; }

input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--encre-26);
  border-radius: 4px;
  font: inherit;
  color: var(--encre);
  background: var(--fond);
}

button {
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: 4px;
  background: var(--accent);
  color: var(--fond);
  font: inherit;
  cursor: pointer;
  align-self: flex-start;
}

button:hover { background: var(--accent-hover); }

.erreur { color: var(--encre); }

/* --- IHP-3 : conversation guidée (§4.9, §4.13) --------------------------- */

.zone-messages { margin-bottom: 1.5rem; }

.alerte {
  padding: 0.75rem 1rem;
  border: 1px solid var(--encre-26);
  border-left: 3px solid var(--encre-73);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  background: var(--fond);
}

.alerte.success { border-left-color: var(--accent); }
.alerte.error { border-left-color: var(--accent-hover); }

.progression-texte {
  font-size: 0.9rem;
  color: var(--encre-47);
  margin: 0 0 0.4rem;
}

.barre-progression {
  height: 4px;
  background: var(--encre-26);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.barre-progression span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.4s ease;
}

.rassurement { color: var(--encre-47); font-size: 0.9rem; }

.carte-reprise {
  border: 1px solid var(--encre-26);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  background: var(--fond);
}

.carte-reprise p { margin: 0 0 0.75rem; }

.bouton-lien {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border-radius: 4px;
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
}

.bouton-lien:hover { background: var(--accent-hover); color: #ffffff; }

.formulaire-idee { max-width: 34rem; }
.formulaire-idee textarea,
.formulaire-reponse textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--encre-26);
  border-radius: 4px;
  font: inherit;
  color: var(--encre);
  background: var(--fond);
  resize: vertical;
}

.zone-question h2 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0 0 1rem;
}

.formulaire-options { display: flex; flex-direction: column; gap: 0.6rem; max-width: 34rem; }

.choix {
  align-self: stretch;
  text-align: left;
  background: var(--fond);
  color: var(--encre);
  border: 1px solid var(--encre-26);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  transition: border-color 0.15s ease;
}

.choix:hover { background: var(--fond); border-color: var(--accent); color: var(--encre); }

.formulaire-aide { margin-top: 0.6rem; }

.choix-aide {
  background: none;
  border: none;
  color: var(--encre-47);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  padding: 0.25rem 0;
  cursor: pointer;
}

.choix-aide:hover { background: none; color: var(--encre); }

.carte-aide {
  border: 1px solid var(--encre-26);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  color: var(--encre-73);
}

.carte-aide p { margin: 0.25rem 0; }

.fil-conversation { margin: 2rem 0; }

.echange { margin-bottom: 1.5rem; }

.echange-question {
  color: var(--encre-47);
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

.echange-reponse {
  margin: 0;
  font-size: 1.1rem;
}

.lien-modifier {
  font-size: 0.85rem;
  margin-left: 0.75rem;
}

.etiquette-chemin {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--encre-73);
  border: 1px solid var(--encre-26);
  border-radius: 999px;
  padding: 0.15rem 0.75rem;
  margin: 0 0 1rem;
}

.volet-aide, .volet-glossaire {
  border: 1px solid var(--encre-26);
  border-radius: 6px;
  padding: 0.6rem 1rem;
  margin: 1rem 0;
  max-width: 34rem;
  color: var(--encre-73);
}

.volet-aide summary, .volet-glossaire summary {
  cursor: pointer;
  color: var(--encre);
  font-size: 0.95rem;
}

.volet-glossaire { margin-top: 2.5rem; }

.volet-glossaire dt {
  font-weight: 600;
  margin-top: 0.75rem;
  color: var(--encre);
}

.volet-glossaire dd { margin: 0.15rem 0 0; }

.zone-revoir {
  border: 1px dashed var(--encre-26);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

.mention-revoir { color: var(--encre-47); font-size: 0.9rem; margin-top: 0; }

.lien-compte { margin-top: 2rem; font-size: 0.9rem; }

/* --- IHP-3 : pont vers la Fiche Projet + inscription ---------------------- */

.carte-pont, .carte-inscription {
  border: 1px solid var(--encre-26);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0;
  max-width: 34rem;
}

.carte-pont h2, .carte-inscription h2 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.3rem;
  margin: 0 0 0.75rem;
}

.formulaire-inscription { max-width: 24rem; }

/* --- IHP-4 : attente parlée + Fiche Projet (§3 étape 4, §4.9 règle 2) ----- */

.formulaire-generer { max-width: 24rem; }

.carte-attente, .carte-echec {
  border: 1px solid var(--encre-26);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0;
  max-width: 34rem;
}

.carte-attente { border-left: 3px solid var(--accent); }

.carte-echec { border-left: 3px solid var(--accent-hover); }

.message-attente {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.attente .rassurement { display: block; margin-top: 1.5rem; }

.zone-fiche { margin: 2rem 0; }

.section-fiche {
  border-top: 1px solid var(--encre-26);
  padding: 1.25rem 0 0.5rem;
}

.section-fiche h2 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.45rem;
  margin: 0 0 0.75rem;
}

.section-fiche h3 {
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--encre-47);
  margin: 1rem 0 0.35rem;
}

.section-fiche ul { margin: 0.25rem 0 0.75rem; padding-left: 1.25rem; }

.section-fiche li { margin-bottom: 0.35rem; }

/* IHP-21 : section « réponses » — ce que l'utilisateur a dit. Libellé
   sobre en retrait (opacité, jamais une couleur de plus — charte §4.13),
   valeur en pleine encre ; « à préciser » en italique discret. */
.reponses-fiche { margin: 0.25rem 0 0.75rem; }

.ligne-reponse {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 2fr;
  gap: 0.25rem 1.25rem;
  padding: 0.45rem 0;
  border-top: 1px dotted var(--encre-26);
}

.ligne-reponse:first-child { border-top: none; }

.ligne-reponse dt {
  font-size: 0.9rem;
  color: var(--encre-47);
  margin: 0;
}

.ligne-reponse dd { margin: 0; }

.ligne-a-preciser dd { color: var(--encre-47); font-style: italic; }

/* Le prochain pas : LE point focal de la fiche — l'accent, avec parcimonie. */
.section-prochain-pas {
  border: 1px solid var(--encre-26);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}

.section-prochain-pas h2 { color: var(--encre); }

.section-prochain-pas p { font-size: 1.1rem; }

.fiche-demo {
  border: 1px dashed var(--encre-26);
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  display: inline-block;
}

.actions-fiche {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0 0.5rem;
}

.bouton-secondaire {
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--encre-26);
  border-radius: 4px;
  background: var(--fond);
  color: var(--encre);
  font: inherit;
  cursor: pointer;
}

.bouton-secondaire:hover { border-color: var(--accent); background: var(--fond); }

.conseil-pdf { margin-top: 0.25rem; }

/* Feuille de route composée (IHP-6, §4.5) — sobre, la même charte : chaque
 * jalon porte sa justification (POURQUOI), la gate garde la porte. */
.lien-vers-roadmap { margin-top: 1.25rem; }

.strategies-composees { margin: 2rem 0; }

.strategies-composees h2 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.45rem;
  margin: 0 0 0.75rem;
}

.strategies-composees ul { margin: 0.25rem 0 0.75rem; padding-left: 1.25rem; }

.strategies-composees li { margin-bottom: 0.35rem; }

.zone-roadmap {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.jalon {
  border: 1px solid var(--encre-26);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 1.1rem 1.35rem;
}

.entete-jalon {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.entete-jalon h3 {
  font-size: 1.1rem;
  margin: 0;
}

.etiquette-etat {
  color: var(--encre-47);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.etiquette-jalon {
  display: block;
  color: var(--encre-47);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.15rem;
}

.pourquoi-jalon { color: var(--encre-73); }

.gate-jalon { color: var(--encre-73); }

.duree-jalon { color: var(--encre-47); font-size: 0.9rem; margin-bottom: 0; }

.techniques-jalon { color: var(--encre-47); font-size: 0.9rem; margin-bottom: 0; }

.pied-fiche {
  margin-top: 3rem;
  border-top: 1px solid var(--encre-26);
  padding-top: 1rem;
}

.pied-fiche p { color: var(--encre-47); font-size: 0.9rem; margin: 0; }

/* PDF (IHP-4) : le moyen le PLUS SIMPLE — l'impression du navigateur.
 * Feuille @media print : en-tête, actions et blocs de compte masqués,
 * fiche seule, encre sur blanc. Aucune dépendance, aucun service tiers. */
@media print {
  .bandeau, .zone-messages, .actions-fiche, .conseil-pdf,
  .carte-inscription, .lien-compte, .fiche-demo { display: none; }

  main { max-width: none; padding: 0; }

  body { font-size: 11pt; line-height: 1.45; }

  .section-fiche { break-inside: avoid; }

  .section-prochain-pas { border-left-color: var(--encre); }
}


/* --- IHP-7 : le Challenger (§4.7, §4.13) --------------------------------- */
/* Encart DISTINCT dans le flux : accent orange DISCRET (filet à gauche),
 * fond blanc, hiérarchie par opacité — sobre, jamais d'alarme. */

.encart-challenge {
  border: 1px solid var(--encre-26);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.etiquette-challenge {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

.message-challenge { margin: 0 0 0.5rem; }

.fait-challenge {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--encre-73);
}

.techniques-challenge {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--encre-47);
}

.formulaire-challenge { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.choix-challenge {
  background: var(--fond);
  color: var(--encre);
  border: 1px solid var(--encre-26);
  border-radius: 6px;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
  transition: border-color 0.15s ease;
}

.choix-challenge:hover {
  background: var(--fond);
  border-color: var(--accent);
  color: var(--encre);
}

/* Un défi ne s'imprime pas : il vit dans la conversation. */
@media print { .encart-challenge { display: none; } }

/* ===================================================================
 * IHP-9 — Récompenses v1 (§4.10) : micro-aperçu, célébration sobre,
 * récompense de retour. Palette §4.13 stricte (encre/accent/opacité),
 * animations CSS UNIQUESMENT (transform/opacity), sobres — pas de
 * confettis : une transition élégante félicitant un accomplissement réel.
 * =================================================================== */

/* Micro-aperçu pendant la conversation : « votre projet prend forme ». */
.apercu-progression {
  border-left: 3px solid var(--accent);
  padding: 0.6rem 0.9rem;
  margin: 0 0 1.5rem;
  animation: apparition-apercu 0.5s ease both;
}

.apercu-titre {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.apercu-corps { margin: 0; color: var(--encre-73); }

@keyframes apparition-apercu {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Récompense de retour : « heureux de vous revoir — voici où on en était ». */
.retour-salut { font-weight: 600; color: var(--encre); }

.carte-retour { animation: apparition-apercu 0.5s ease both; }

/* Célébration d'une gate passée : SOBRE — un cadre accent doux, une
   transition d'entrée, le récap de l'accomplissement RÉEL puis le
   conseil débloqué (la munition pour l'étape suivante). */
.celebration-gate {
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.75rem;
  animation: celebration-sobre 0.6s ease both;
}

.celebration-recap { margin: 0 0 0.75rem; font-weight: 600; }

.conseil-debloque { border-top: 1px solid var(--encre-26); padding-top: 0.75rem; }

.conseil-etiquette {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.conseil-debloque h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }

.conseil-quand, .conseil-contexte { margin: 0 0 0.4rem; color: var(--encre-73); }

.conseil-source { margin: 0; font-size: 0.85rem; color: var(--encre-47); }

.conseil-derniere, .conseil-suite { margin: 0; color: var(--encre-73); }

@keyframes celebration-sobre {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Preuve enregistrée + volet « cette étape est faite » (§4.5). */
.preuve-jalon { color: var(--encre-73); }

.volet-gate { margin: 0.5rem 0 0; }

.volet-gate summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 500;
}

.formulaire-gate { display: grid; gap: 0.5rem; margin: 0.6rem 0 0; }

.formulaire-gate textarea {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--encre-26);
  border-radius: 6px;
}

/* Sobre avec le système : les animations de récompense se retirent si
   l'utilisateur préfère réduire le mouvement (même règle que la carte). */
@media (prefers-reduced-motion: reduce) {
  .apercu-progression,
  .carte-retour,
  .celebration-gate { animation: none; }
}

/* Une célébration ne s'imprime pas : le livrable reste sobre sur papier. */
@media print {
  .celebration-gate,
  .apercu-progression,
  .volet-gate { display: none; }
}

/* ===================================================================
 * IHP-18 : console staff (usage, invitations, base, modération)
 * Charte §4.13 inchangée — 3 couleurs, hiérarchie par opacité.
 * =================================================================== */

/* Onglets de la console : sobres, l'onglet actif porte l'accent. */
.console-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  border-bottom: 1px solid var(--encre-26);
  margin: 1.5rem 0 2rem;
  padding-bottom: 0.5rem;
}

.console-nav a {
  color: var(--encre-73);
  text-decoration: none;
  font-size: 0.95rem;
  padding-bottom: 0.5rem;
}

.console-nav a:hover { color: var(--encre); }

.console-nav a.actif {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
}

/* Compteurs d'usage : grands chiffres, libellés discrets. */
.console-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.console-compteur {
  border: 1px solid var(--encre-26);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}

.console-compteur h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--encre-73);
  font-family: inherit;
  font-weight: 500;
}

.console-nombre {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 600;
}

.console-detail { margin: 0; color: var(--encre-47); font-size: 0.9rem; }
.console-detail a { color: var(--encre-73); }

/* Tableaux de la console : lecture dense, lignes fines. */
.console-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem 2rem;
  margin-bottom: 2rem;
}

.console-colonnes h2 {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
  font-family: inherit;
  font-weight: 600;
}

.console-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 1.5rem 0;
}

.console-table th {
  text-align: left;
  font-weight: 600;
  color: var(--encre-73);
  border-bottom: 1px solid var(--encre-26);
  padding: 0.5rem 0.75rem 0.5rem 0;
}

.console-table td {
  border-bottom: 1px solid var(--encre-26);
  padding: 0.6rem 0.75rem 0.6rem 0;
  vertical-align: top;
}

/* « À re-vérifier » : mise en évidence SOBRE — fond accent à faible
 * opacité sur toute la ligne (charte : un seul accent). */
.console-table tr.console-alerte td {
  background: rgba(232, 96, 42, 0.06);
}

.console-alerte-texte {
  border-left: 3px solid var(--accent);
  padding: 0.5rem 0 0.5rem 1rem;
  color: var(--encre-73);
  margin: 0 0 1rem;
}

.console-alerte-texte a { color: var(--accent); }

/* Badges d'état : contour, pas d'aplats. */
.console-badge {
  display: inline-block;
  border: 1px solid var(--encre-26);
  border-radius: 3px;
  padding: 0.1rem 0.5rem;
  font-size: 0.8rem;
  color: var(--encre-73);
  white-space: nowrap;
}

.console-badge-ok { border-color: var(--encre-47); color: var(--encre); }

.console-badge-alerte {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.console-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
}

.console-texte { max-width: 28rem; }
.console-source { max-width: 14rem; color: var(--encre-73); font-size: 0.85rem; }

/* Formulaires de la console : mêmes principes que le produit. */
.console-formulaire,
.console-filtres {
  border: 1px solid var(--encre-26);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;
}

.console-formulaire h2 {
  width: 100%;
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-family: inherit;
  font-weight: 600;
}

.console-formulaire p,
.console-filtres p { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }

.console-formulaire label,
.console-filtres label { font-size: 0.9rem; color: var(--encre-73); }

.console-formulaire input,
.console-filtres select {
  border: 1px solid var(--encre-26);
  border-radius: 3px;
  padding: 0.5rem 0.6rem;
  font: inherit;
  background: var(--fond);
  color: var(--encre);
}

.console-formulaire .rassurement { width: 100%; margin: 0; }

/* Filtres par liens (modération) : mêmes onglets sobres. */
nav.console-filtres { gap: 1rem; align-items: center; }
nav.console-filtres a { color: var(--encre-73); text-decoration: none; }
nav.console-filtres a.actif { color: var(--accent); font-weight: 600; }

.console-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Suppression en masse : avertissement sans rouge criard — l'accent
 * suffit (3 couleurs, pas plus). */
.console-danger { border-color: var(--accent); color: var(--accent); }
.console-danger:hover { background: var(--accent); color: #ffffff; }

/* Zone remplacée quand la console est plus large que le corps produit. */
main:has(.console-grille) { max-width: 56rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Guides d'outils externes, contextuels au jalon actif (IHP-22, §4.5).
 * Même grammaire que le reste du corps : bordure fine à faible opacité,
 * hiérarchie par opacité, l'accent réservé au cadre légal (conformité
 * d'abord) et au retour au produit — deux moments qui comptent vraiment. */
.guides-jalon { margin: 0.75rem 0 0; display: grid; gap: 0.75rem; }

/* Livrables proposés au jalon actif (CORRECTIF B, §4.5) : liens discrets
 * vers les pages modules M-Risques / M-Budget / M-Décideurs — la même
 * grammaire que les étiquettes de jalon, hiérarchie par opacité. */
.livrables-jalon { margin: 0.75rem 0 0; }

.guide-outil {
  border: 1px solid var(--encre-26);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  margin: 0;
}

.guide-outil-titre {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}

.guide-outil-resume { color: var(--encre-73); margin: 0 0 0.5rem; }

.guide-outil-quand { color: var(--encre-73); margin: 0 0 0.6rem; font-size: 0.92rem; }

.etiquette-guide {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre-47);
}

.guide-conformite {
  border-left: 3px solid var(--accent);
  padding: 0.45rem 0.75rem;
  margin: 0 0 0.6rem;
  background: rgba(232, 96, 42, 0.05);
}

.guide-conformite-titre {
  font-weight: 600;
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}

.guide-conformite p { margin: 0; font-size: 0.92rem; color: var(--encre-73); }

.guide-section { margin: 0 0 0.6rem; }

.guide-section-titre {
  font-weight: 600;
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}

.guide-etapes, .guide-liste {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--encre-73);
  font-size: 0.92rem;
}

.guide-etapes li, .guide-liste li { margin: 0.2rem 0; }

.guide-alternatives p { margin: 0; font-size: 0.92rem; color: var(--encre-73); }

.guide-retour-produit {
  border-left: 3px solid var(--accent);
  padding: 0.45rem 0.75rem;
  margin: 0 0 0.5rem;
}

.guide-retour-titre {
  font-weight: 600;
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}

.guide-retour-produit p:last-child { margin: 0; font-size: 0.92rem; color: var(--encre-73); }

.guide-frontiere {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--encre-47);
}

.guide-site { margin: 0; font-size: 0.85rem; color: var(--encre-47); }

/* Page du jalon actif (copilote d'exécution, IHP-16 remise en charte
 * IHP-22 — la page portait des classes Tailwind inexistantes : le rendu
 * était brut. Même grammaire que la feuille de route. */
.copilote-jalon { display: grid; gap: 1.25rem; }

.copilote-jalon-carte { padding: 1rem 1.1rem; border: 1px solid var(--encre-26); border-radius: 6px; }

.copilote-jalon-carte .entete-jalon h2 { margin: 0; font-size: 1.1rem; }

.copilote-moments { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.copilote-moments h3 { margin: 0 0 0.25rem; font-size: 1rem; }

.copilote-moments p { margin: 0 0 0.6rem; color: var(--encre-73); font-size: 0.92rem; }

.copilote-moments ul { margin: 0 0 0.6rem; padding-left: 1.1rem; }

/* Signalement lecteur (IHP-23, §4.12 — discret par conception : la charte
 * fait la hiérarchie par opacité, le recours reste trouvable sans hurler). */
.lien-signaler {
  font-size: 0.8rem;
  color: var(--encre-47);
  text-decoration: underline dotted;
}

.lien-signaler:hover { color: var(--accent); }

.annotation-lecteur header { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }

.annotation-lecteur header .lien-signaler { margin-left: auto; }

.pied-signalement { margin-top: 1.5rem; padding-top: 0.75rem; border-top: 1px solid var(--encre-26); }

.pied-signalement .lien-signaler { font-size: 0.85rem; }

.choix-motif { margin: 0.35rem 0; }

.choix-motif label { margin-left: 0.4rem; }

.console-actions-ligne { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* --- M-Suivi (IHP-24, §4) : la réponse au point de suivi ------------------- */
/* Quatre réponses possibles, chacune son bloc — une action évidente (§4.9
   règle 4), pas de menu déroulant ni de logique conditionnelle cachée. */
.suivi-choix {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

.suivi-bloc {
  border: 1px solid var(--encre-26);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 0;
  background: var(--fond);
}

.suivi-bloc h2 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.suivi-bloc-attendu {
  border-color: var(--accent);
}

.choix-cadence,
.choix-pause {
  display: block;
  margin: 0.35rem 0;
}

.encart-contre-question {
  border-left: 3px solid var(--accent);
}

/* --- IHP-25 : bilan de parcours, porte de re-cadrage, post-parcours ------ */
/* Charte §4.13 inchangée : blanc, encre par opacité, UN accent. Le bilan   */
/* est un document de FIERTÉ — sobre, daté, factuel (§4.10).               */

.bilan-dates {
  border: 1px solid var(--encre-26);
  border-radius: 6px;
  padding: 0.9rem 1.25rem;
  margin: 1.5rem 0;
}

.bilan-dates ul { margin: 0; padding-left: 1.1rem; }

.idee-initiale {
  margin: 0 0 1rem;
  padding: 0.4rem 0.9rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--encre);
}

.bilan-feuille {
  margin: 1rem 0;
}

.bilan-feuille-archivee h3 { opacity: 0.66; }

.bilan-jalon { margin: 0.8rem 0; }

.bilan-defi { opacity: 0.72; }

/* La porte de re-cadrage : une porte OUVERTE, jamais une injonction —     */
/* un encart doux, l'accent n'apparaît que sur le bouton.                  */
.porte-recadrage h2 { font-size: 1.15rem; }
.fin-parcours-actions { margin-top: 0.9rem; }
.porte-recadrage-texte { opacity: 0.85; }

/* Le bilan s'imprime proprement (pattern Fiche IHP-4) : actions, porte    */
/* de re-cadrage et pied de page masqués — le document seul, encre/blanc.  */
@media print {
  .actions-fiche, .conseil-pdf, .porte-recadrage, .lien-compte,
  .fin-parcours-actions, .pied-fiche { display: none; }
  .bilan-parcours .section-fiche { break-inside: avoid; }
}