/* ==========================================================
   Guide MDPH — Feuille de style V1 FINALE
   Direction artistique : référence prototype V2 validée.
   Éditorial, premium, respirant. Palette Partout un Dys.
   ========================================================== */

:root {
  --cream: #FBF8F1;
  --deep-green: #3D5F4E;
  --deep-green-hover: #325041;
  --sage: #7FA588;
  --sage-light: #E6EEE3;
  --terracotta: #C17A57;
  --terracotta-light: #F5E6DC;
  --pale-blue: #E9F1F3;
  --pale-blue-text: #4C7686;
  --white: #FFFFFF;
  --ink: #2A332E;
  --ink-soft: #6B756C;
  --ink-faint: #9BA39B;
  --line: #E2DCC9;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--deep-green); margin: 0; }
p { margin: 0; }
.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; }

a { color: var(--deep-green); }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }

.eyebrow { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage); }
.eyebrow.terracotta { color: var(--terracotta); }
.eyebrow.deep { color: var(--deep-green); }
.signature-em { font-style: italic; color: var(--terracotta); }
.filrouge-tag { display: block; font-family: var(--serif); font-style: italic; font-size: 0.82rem; color: var(--ink-faint); margin-top: 6px; }

.ghost-word {
  position: absolute;
  font-family: var(--serif);
  color: var(--deep-green);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
  z-index: 0;
}

/* ==========================================================
   Boutons
   ========================================================== */
.btn { display: inline-block; border: none; font-family: var(--sans); font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; border-radius: 14px; }
.btn-primary { background: var(--deep-green); color: var(--white); padding: 18px 36px; font-size: 1.02rem; width: 100%; }
.btn-primary:hover { background: var(--deep-green-hover); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-secondary, .btn-ghost { background: transparent; border: 1.5px solid var(--deep-green); color: var(--deep-green); padding: 15px 30px; font-size: 0.96rem; width: 100%; }
.btn-ghost-dark { background: var(--white); color: var(--deep-green); border: none; padding: 16px 32px; font-size: 0.98rem; }
.btn-ghost-light { background: transparent; border: 1.5px solid var(--sage); color: var(--deep-green); padding: 12px 22px; font-size: 0.92rem; }
@media (min-width: 480px) { .btn-primary, .btn-secondary, .btn-ghost { width: auto; } }
.link-secondary { background: none; border: none; color: var(--ink-soft); font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px 0; display: inline-block; }
.reset-link { background: none; border: none; color: var(--ink-faint); font-size: 0.8rem; text-decoration: underline; cursor: pointer; padding: 8px 0; margin-top: var(--space-1); }
.back-link { background: none; border: none; color: var(--ink-soft); font-size: 0.86rem; cursor: pointer; padding: 6px 0 var(--space-3); display: inline-block; }
.btn-continue { margin-top: var(--space-4); }

/* ==========================================================
   Structure générale des écrans
   ========================================================== */
#app { position: relative; }
.screen { min-height: 100vh; padding-bottom: 56px; }
.screen[hidden] { display: none !important; }
.page { background: var(--cream); }
.page-inner { max-width: 620px; margin: 0 auto; padding: var(--space-5) var(--space-3) var(--space-5); }
.home { min-height: 100vh; }
.disclaimer { font-size: 0.76rem; color: var(--ink-faint); margin-top: var(--space-4); }

.storage-warning { position: sticky; top: 0; z-index: 60; background: var(--terracotta); color: var(--white); text-align: center; padding: 10px 16px; font-size: 0.85rem; }

/* ==========================================================
   ACCUEIL
   ========================================================== */
.home { display: flex; align-items: center; justify-content: center; padding: 64px var(--space-3); position: relative; overflow: hidden; }
.home-inner { max-width: 560px; width: 100%; text-align: center; position: relative; z-index: 1; }

.ghost-word-home { font-size: 13rem; bottom: -6%; right: -6%; transform: rotate(-3deg); }
@media (min-width: 640px) { .ghost-word-home { font-size: 18rem; } }

.brandmark { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); margin-bottom: 20px; }
.brandmark .heart { color: var(--terracotta); font-size: 0.9em; }

.home-epigraph { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--terracotta); margin: 0 0 22px; }

.home-title { font-size: 2.5rem; line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 22px; }
@media (min-width: 640px) { .home-title { font-size: 3.4rem; } }

.home-subtitle { font-size: 1.05rem; color: var(--ink-soft); max-width: 440px; margin: 0 auto 26px; }
.home-tagline { font-size: 0.85rem; color: var(--sage); font-weight: 600; letter-spacing: 0.03em; margin: 0 0 38px; }

.home-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 20px; }
.home-actions .btn-primary { max-width: 340px; padding: 19px 36px; font-size: 1.04rem; }

.resume-banner { background: var(--white); border-radius: 16px; padding: var(--space-2) var(--space-3); margin: 0 auto var(--space-3); max-width: 420px; box-shadow: 0 6px 20px rgba(61,95,78,0.06); }
.resume-banner p { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 10px; }

.privacy-note { font-size: 0.78rem; color: var(--ink-faint); margin: var(--space-4) auto 4px; max-width: 420px; }

.morgane-mini { margin-top: var(--space-4); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.morgane-photo-round { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; box-shadow: 0 8px 20px rgba(42,51,46,0.18); }
.morgane-mini blockquote { margin: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.55; color: var(--ink); max-width: 420px; }

/* ==========================================================
   TRANSITIONS DE PARTIE
   ========================================================== */
.chapter { background: var(--sage-light); position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; text-align: center; }
.chapter-inner { max-width: 520px; margin: 0 auto; padding: var(--space-5) var(--space-3); position: relative; z-index: 1; }
.ghost-number { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%); font-size: 20rem; color: var(--deep-green); opacity: 0.07; z-index: 0; }
.chapter-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep-green); }
.chapter h1 { font-size: 2.3rem; margin: 14px 0 18px; line-height: 1.12; }
.chapter-lede { font-size: 1.02rem; color: var(--ink-soft); max-width: 400px; margin: 0 auto 16px; }

/* ==========================================================
   ÉCRAN D'ÉTAPE
   ========================================================== */
.ribbon { font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.02em; margin: 0 0 10px; }
.progress-line { height: 3px; background: var(--sage-light); border-radius: 2px; margin-bottom: var(--space-4); overflow: hidden; }
.progress-line span { display: block; height: 100%; background: var(--sage); }

.page-inner h1 { font-size: 1.9rem; line-height: 1.16; margin-bottom: 14px; }
.ouverture { font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--sage); margin-bottom: var(--space-4); line-height: 1.45; }

.page-inner p { font-size: 1.01rem; }

/* ==========================================================
   Blocs génériques (explication = texte nu, pas de carte)
   ========================================================== */
.block { margin: var(--space-3) 0; }
.block-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin-bottom: 8px; }
.block p { margin-bottom: 10px; }
.block p:last-child { margin-bottom: 0; }

/* Encadré ciblé (renouvellement, etc.) — filet gauche, pas de boîte fermée */
.encadre { border-left: 3px solid var(--sage); padding: 4px 0 4px var(--space-2); margin: var(--space-4) 0; }
.encadre-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--deep-green); margin-bottom: 6px; }
.encadre p { font-size: 0.96rem; color: var(--ink-soft); }

/* Exemple — traitement éditorial, avant/après quand détecté */
.block-exemple { margin: var(--space-4) 0; }
.block-exemple .eyebrow { margin-bottom: 12px; }
.exemple-simple { font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--ink); line-height: 1.5; }
.exemple-avant-apres .exemple-avant, .exemple-avant-apres .exemple-apres { padding: 2px 0 2px 18px; border-left: 2px solid var(--ink-faint); margin-bottom: 4px; }
.exemple-avant-apres .exemple-apres { border-left-color: var(--terracotta); }
.exemple-tag { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.exemple-avant-apres .exemple-apres .exemple-tag { color: var(--terracotta); }
.exemple-avant-apres p { font-family: var(--serif); font-style: italic; font-size: 1.06rem; color: var(--ink); margin: 0; }
.exemple-arrow { text-align: center; color: var(--sage); font-size: 1.1rem; margin: 4px 0 4px 18px; }
.block-note { font-size: 0.8rem; color: var(--ink-faint); font-style: italic; margin-top: 8px; }

/* Morgane — signature terracotta */
.block-morgane { display: flex; gap: 16px; align-items: flex-start; background: var(--terracotta-light); border-radius: 20px; padding: var(--space-3) var(--space-3); margin: var(--space-4) 0; }
.morgane-avatar-mini { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(150deg, var(--terracotta-light), var(--sage-light)); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 0.85rem; color: var(--deep-green); border: 2px solid var(--white); }
.block-morgane .morgane-body { flex: 1; }
.block-morgane .block-label { color: var(--terracotta); margin-bottom: 8px; }
.block-morgane p { font-family: var(--serif); font-style: italic; font-size: 1.04rem; color: var(--ink); line-height: 1.55; }

/* Point de vigilance — bleu pâle, discret */
.block-erreur { background: var(--pale-blue); border-radius: 16px; padding: var(--space-3); margin: var(--space-4) 0; }
.block-erreur .block-label { color: var(--pale-blue-text); }
.block-erreur p { font-size: 0.96rem; }

/* Action / ressource — filet, pas de boîte */
.block-action, .block-ressource { margin: var(--space-4) 0; padding-left: var(--space-2); border-left: 2px solid var(--sage); }
.block-action .block-label, .block-ressource .block-label { color: var(--deep-green); }
.block-ressource ul { margin: 6px 0 0; padding-left: 18px; }
.block-ressource li { margin-bottom: 8px; font-size: 0.96rem; }

.lien-wrap { display: block; margin-top: 8px; }
.lien-externe { color: var(--deep-green); font-weight: 600; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px; }

/* Petite victoire — légère, émotionnelle */
.block-validation { margin: var(--space-4) 0; padding: var(--space-1) 2px; border-top: 1px solid var(--sage-light); border-bottom: 1px solid var(--sage-light); }
.victoire-row { display: flex; align-items: flex-start; gap: 14px; padding: var(--space-2) 0; }
.victoire-check { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--sage-light); color: var(--deep-green); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; margin-top: 2px; }
.victoire-text .block-label { color: var(--deep-green); margin-bottom: 4px; }
.victoire-text p { font-size: 0.98rem; }
.block-validation .btn-continue { display: block; width: 100%; margin: 0 0 var(--space-2); }

/* Checklist */
.checklist { margin: var(--space-4) 0; }
.checklist-counter { font-size: 0.82rem; color: var(--sage); font-weight: 600; margin-bottom: var(--space-2); }
.check-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.check-item:last-child { border-bottom: none; }
.check-item input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--deep-green); flex-shrink: 0; margin-top: 1px; }
.check-item span { font-size: 0.98rem; }
.checklist-finale { list-style: none; padding: 0; margin: var(--space-2) 0; }
.checklist-finale li { padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 0.98rem; }

/* Glossaire / définitions */
.glossaire-liste { margin: var(--space-3) 0; }
.glossaire-item { font-size: 0.98rem; margin-bottom: 10px; }

/* Accordéons (définitions, grille) */
.phase-list, .definitions { margin: var(--space-3) 0; }
.phase, .definition { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; border-bottom: 1px solid var(--line); padding: 14px 4px; text-align: left; cursor: pointer; font-family: var(--sans); }
.phase-title { font-weight: 600; color: var(--ink); font-size: 1rem; }
.phase-chevron { color: var(--sage); font-size: 1.1rem; }
.accordion-panel { max-height: 0; overflow: hidden; transition: none; }
.accordion-panel.open { max-height: 800px; padding: 12px 4px 18px; }
.accordion-panel p { font-size: 0.95rem; color: var(--ink-soft); }

/* ==========================================================
   Zone "À vous" (exercices — groupeChamps)
   ========================================================== */
.block-exercice { background: var(--sage-light); border-radius: 20px; padding: var(--space-3) var(--space-3); margin: var(--space-4) 0; }
.block-exercice > .block-label { color: var(--deep-green); font-size: 0.74rem; }
.consigne { font-family: var(--serif); font-size: 1.08rem; color: var(--ink); margin-bottom: var(--space-2); line-height: 1.4; }
.champ-field { display: block; margin-bottom: var(--space-2); }
.champ-field:last-child { margin-bottom: 0; }
.champ-label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.champ-input { width: 100%; border: none; border-bottom: 1.5px solid var(--sage); background: transparent; padding: 9px 2px; font-family: var(--sans); font-size: 1rem; color: var(--ink); border-radius: 0; }
textarea.champ-input { min-height: 70px; resize: vertical; }
.champ-input::placeholder { color: var(--ink-faint); font-style: italic; }
.champ-input:focus-visible { outline: none; border-bottom-color: var(--deep-green); }
.champ-conclusion { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid rgba(61,95,78,0.15); font-size: 0.92rem; color: var(--deep-green); font-weight: 600; }

/* ==========================================================
   Restitutions signature — le moment "waouh"
   ========================================================== */
.block-restitution {
  position: relative; overflow: hidden;
  background: var(--white);
  border-radius: 26px;
  padding: 44px 30px;
  margin: var(--space-5) -6px;
  box-shadow: 0 24px 56px rgba(61, 95, 78, 0.11);
}
.ghost-word-reveal { font-size: 7rem; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-2deg); opacity: 0.045; }
.reveal-eyebrow { position: relative; z-index: 1; display: block; font-family: var(--serif); font-style: italic; font-size: 0.92rem; color: var(--terracotta); text-align: center; margin-bottom: 8px; }
.reveal-heading { position: relative; z-index: 1; font-size: 1.35rem; line-height: 1.25; text-align: center; margin-bottom: var(--space-4); }

.restitution-items { position: relative; z-index: 1; }
.restitution-flow .restitution-items, .restitution-fiche .restitution-items, .restitution-cards .restitution-items { padding-left: 26px; position: relative; }
.restitution-flow .restitution-items::before, .restitution-fiche .restitution-items::before, .restitution-cards .restitution-items::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1.5px; background: var(--sage-light);
}
.flow-box { position: relative; margin-bottom: 22px; }
.flow-box:last-child { margin-bottom: 0; }
.flow-box::before { content: ""; position: absolute; left: -26px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.restitution-fiche .flow-box:nth-child(2)::before, .restitution-cards .flow-box:nth-child(2n)::before { background: var(--terracotta); }
.flow-label { display: block; font-family: var(--serif); font-size: 0.92rem; color: var(--deep-green); margin-bottom: 3px; }
.flow-value { font-size: 1.02rem; color: var(--ink); }
.flow-conclusion {
  position: relative; z-index: 1;
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--sage-light);
  font-family: var(--serif); font-size: 1.15rem; font-style: italic;
  color: var(--deep-green); text-align: center; line-height: 1.4;
}

/* Récapitulatif (3.9) — plus léger, continuité plutôt que révélation */
.restitution-liste { background: var(--cream); border-radius: 18px; box-shadow: none; padding: var(--space-3) var(--space-3); margin: var(--space-4) 0; }
.restitution-liste .block-label { color: var(--deep-green); }
.restitution-liste .sim-lead { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: var(--space-2); }
.restitution-liste .restitution-items { padding-left: 0; }
.restitution-liste .restitution-items::before { display: none; }
.restitution-liste .flow-box { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.restitution-liste .flow-box::before { display: none; }
.restitution-liste .flow-box:last-child { border-bottom: none; margin-bottom: 0; }
.restitution-liste .flow-label { min-width: 160px; flex-shrink: 0; margin-bottom: 0; }

/* Cartes (3.8) en grille sur desktop, empilées sur mobile */
.restitution-cards .restitution-items { padding-left: 0; }
.restitution-cards .restitution-items::before { display: none; }
@media (min-width: 640px) {
  .restitution-cards .restitution-items { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .restitution-cards .flow-box { margin-bottom: 0; padding: var(--space-2); background: var(--cream); border-radius: 14px; }
  .restitution-cards .flow-box::before { display: none; }
}

/* ==========================================================
   Calcul de temps (3.6)
   ========================================================== */
.block-calcul { background: var(--sage-light); border-radius: 20px; padding: var(--space-3); margin: var(--space-4) 0; }
.block-calcul > .block-label { color: var(--deep-green); }
.calcul-result { background: var(--deep-green); color: var(--white); border-radius: 14px; padding: var(--space-3); text-align: center; margin: var(--space-2) 0; }
.calc-number { display: block; font-family: var(--serif); font-size: 1.35rem; }
.calc-number.secondary { font-size: 1rem; opacity: 0.9; margin-top: 2px; }
.calc-empty { font-size: 0.92rem; opacity: 0.95; }
.calcul-disclaimer { font-size: 0.8rem; color: var(--ink-soft); margin-top: 10px; }

/* ==========================================================
   Frise de suivi (5.2) — chronologie verticale
   ========================================================== */
.frise { position: relative; padding-left: 26px; margin: var(--space-3) 0; }
.frise::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1.5px; background: var(--sage-light); }
.frise-step { position: relative; margin-bottom: 20px; font-size: 0.94rem; color: var(--ink); }
.frise-step:last-child { margin-bottom: 0; }
.frise-step::before { content: ""; position: absolute; left: -26px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }

/* ==========================================================
   Comparaison (6.2)
   ========================================================== */
.compare-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin: var(--space-3) 0; }
@media (min-width: 640px) { .compare-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ==========================================================
   Bouton flottant sommaire
   ========================================================== */
.fab { position: fixed; bottom: 56px; right: 20px; background: var(--deep-green); color: #fff; border: none; border-radius: 999px; padding: 14px 22px; font-weight: 600; font-size: 0.95rem; box-shadow: 0 6px 18px rgba(42,51,46,0.3); cursor: pointer; z-index: 40; }

/* ==========================================================
   Sommaire (overlay)
   ========================================================== */
.overlay { position: fixed; inset: 0; background: rgba(42,51,46,0.45); z-index: 60; display: flex; align-items: flex-end; }
.overlay[hidden] { display: none !important; }
.overlay-scrim { position: absolute; inset: 0; z-index: 0; }
.sommaire { background: var(--cream); width: 100%; max-height: 86vh; overflow-y: auto; border-radius: 24px 24px 0 0; padding: var(--space-3); position: relative; z-index: 1; }
.sommaire-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.sommaire-header h2 { font-size: 1.2rem; }
.icon-button { background: none; border: none; font-size: 1.5rem; color: var(--ink-soft); cursor: pointer; padding: 4px 8px; line-height: 1; }
.sommaire-partie-label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sage); margin: var(--space-3) 0 8px; }
.sommaire-partie-label:first-child { margin-top: 0; }
.sommaire-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.sommaire-item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; text-align: left; padding: 11px 6px; font-size: 0.96rem; color: var(--ink); cursor: pointer; border-radius: 10px; }
.sommaire-item:hover { background: var(--sage-light); }
.sommaire-item .status-icon { flex-shrink: 0; width: 18px; text-align: center; font-size: 0.9rem; color: var(--ink-faint); }
.sommaire-item.status-done .status-icon { color: var(--sage); }
.sommaire-item.status-current .status-icon { color: var(--terracotta); }
.sommaire-item.current { background: var(--sage-light); font-weight: 600; }
.tag-current { font-size: 0.68rem; color: var(--terracotta); margin-left: auto; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

@media (min-width: 768px) {
  .overlay { align-items: center; justify-content: center; }
  .sommaire { max-width: 480px; width: 90%; max-height: 82vh; border-radius: 20px; }
}

/* ==========================================================
   Porte bêta (simplifiée — une seule case)
   ========================================================== */
#screen-beta-gate .page-inner { max-width: 480px; }
.beta-gate-footer { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: 0.76rem; color: var(--ink-faint); line-height: 1.6; }
#btn-beta-enter:disabled { opacity: 0.45; cursor: not-allowed; }
.beta-conditions { background: var(--sage-light); border-radius: 16px; padding: var(--space-3); margin: var(--space-3) 0; font-size: 0.94rem; }
.beta-conditions ul { margin: 8px 0 0; padding-left: 20px; }
.beta-conditions li { margin-bottom: 4px; }

/* ==========================================================
   Fin de parcours
   ========================================================== */
#screen-end .page-inner, #screen-end-thanks .page-inner { text-align: center; }
.end-stats { font-size: 0.95rem; color: var(--sage); font-weight: 600; margin: 4px 0 var(--space-3); }
.feedback-teaser { margin: var(--space-4) 0; }
.feedback-teaser p { font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--ink); margin-bottom: var(--space-2); }
#feedback-form-wrap { text-align: left; margin-top: var(--space-4); }
#feedback-form-wrap[hidden] { display: none; }

.premium-bridge { background: var(--white); border-radius: 24px; padding: var(--space-4) var(--space-3); margin: var(--space-5) 0; box-shadow: 0 16px 40px rgba(61,95,78,0.07); text-align: center; }
.premium-bridge .eyebrow { margin-bottom: 10px; }
.premium-bridge h2 { font-size: 1.4rem; margin-bottom: 14px; }
.premium-bridge p { color: var(--ink-soft); font-size: 0.96rem; margin-bottom: var(--space-2); }
.premium-offer { font-family: var(--serif); font-size: 1.05rem; color: var(--deep-green); margin: var(--space-2) 0; }
.premium-offer strong { display: block; font-size: 1.15rem; }

/* Formulaire de retour */
.form-section { margin-bottom: var(--space-4); text-align: left; }
.form-section-title { font-family: var(--serif); font-size: 1.1rem; margin-bottom: var(--space-2); }
.form-field { display: block; margin-bottom: var(--space-2); border: none; padding: 0; }
.form-label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.form-input, .form-textarea, .form-textarea-large {
  width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-family: var(--sans); font-size: 0.98rem; color: var(--ink); background: var(--white);
}
.form-textarea { min-height: 80px; resize: vertical; }
.form-textarea-large { min-height: 120px; resize: vertical; }
.form-radio-item, .form-check-item { display: flex; align-items: center; gap: 10px; padding: 10px 4px; cursor: pointer; }
.form-radio-item input, .form-check-item input { width: 20px; height: 20px; accent-color: var(--deep-green); flex-shrink: 0; }
.fab-icon { margin-right: 4px; }
.end-actions { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-4); }
@media (min-width: 480px) { .end-actions { flex-direction: row; justify-content: center; } }

/* Statut d'envoi (formulaire de retour et liste d'intérêt) */
.form-privacy-note { font-size: 0.8rem; color: var(--ink-faint); margin: var(--space-2) 0; }
.form-status { font-size: 0.92rem; font-weight: 600; padding: 10px 14px; border-radius: 10px; margin: var(--space-2) 0; }
.form-status-pending { background: var(--sage-light); color: var(--deep-green); }
.form-status-error { background: var(--terracotta-light); color: var(--terracotta); }
.form-status-success { background: var(--sage-light); color: var(--deep-green); }

/* ==========================================================
   Page Premium — teaser
   ========================================================== */
.premium-step-list { margin: var(--space-4) 0; position: relative; padding-left: 30px; }
.premium-step-list::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 1.5px; background: var(--sage-light); }
.premium-step { position: relative; display: flex; gap: 18px; margin-bottom: var(--space-4); }
.premium-step:last-child { margin-bottom: 0; }
.premium-step-num {
  position: absolute; left: -30px; top: 0;
  width: 20px; text-align: center;
  font-family: var(--serif); font-size: 0.85rem; color: var(--deep-green);
  background: var(--cream);
}
.premium-step-body h3 { font-size: 1.08rem; margin-bottom: 8px; }
.premium-step-body p { font-size: 0.96rem; color: var(--ink-soft); margin-bottom: 8px; }
.premium-step-questions { margin: 8px 0; padding-left: 18px; }
.premium-step-questions li { font-size: 0.92rem; color: var(--ink); margin-bottom: 5px; font-style: italic; font-family: var(--serif); }
.premium-step-note { font-size: 0.76rem; color: var(--sage); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }

.premium-step.locked { opacity: 0.55; }
.premium-step.locked .premium-step-num { font-size: 1rem; }
.premium-step.locked h3 { color: var(--ink-soft); }
.premium-step.locked p { margin-bottom: 0; }

.premium-closing { background: var(--white); border-radius: 24px; padding: var(--space-4) var(--space-3); margin-top: var(--space-5); box-shadow: 0 16px 40px rgba(61,95,78,0.07); text-align: center; }
.premium-closing h2 { font-size: 1.3rem; margin-bottom: 10px; }
.premium-closing > p { color: var(--ink-soft); margin-bottom: var(--space-3); }
.premium-closing form { text-align: left; }
.premium-closing .btn-primary { width: 100%; margin-top: var(--space-1); }

/* ==========================================================
   RGPD & Conditions du test
   ========================================================== */
.rgpd-body { margin-top: var(--space-3); }
.rgpd-body ul { padding-left: 20px; margin: 8px 0 var(--space-3); }
.rgpd-body li { margin-bottom: 8px; font-size: 0.97rem; }
.rgpd-body p { margin-bottom: var(--space-2); }
.rgpd-links { font-size: 0.86rem; color: var(--ink-soft); margin: var(--space-2) 0; }
.rgpd-links .link-secondary { font-size: 0.86rem; padding: 4px 2px; }
.rgpd-config-missing { background: var(--terracotta-light); color: var(--terracotta); font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.star-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-rating label { font-size: 1.6rem; color: var(--line); cursor: pointer; }
.star-rating input:checked ~ label, .star-rating label:hover, .star-rating label:hover ~ label { color: var(--terracotta); }
.nps-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.nps-scale label { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 0.9rem; cursor: pointer; }
.nps-scale input { position: absolute; opacity: 0; width: 0; height: 0; }
.nps-scale input:checked ~ label, .nps-scale label:has(input:checked) { background: var(--deep-green); color: #fff; border-color: var(--deep-green); }

/* ==========================================================
   Bandeau permanent de protection (bêta)
   ========================================================== */
.beta-watermark { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--deep-green); color: rgba(251,248,241,0.8); font-size: 0.68rem; text-align: center; padding: 7px 12px; line-height: 1.3; }

/* ==========================================================
   Responsive — mobile, priorité absolue
   ========================================================== */
@media (max-width: 560px) {
  .page-inner { padding: var(--space-4) var(--space-2) var(--space-4); }
  .home { padding: 48px var(--space-2) 64px; }
  .home-title { font-size: 2.1rem; }
  .home-epigraph { font-size: 1.05rem; }
  .ghost-word-home { font-size: 8rem; }
  .ghost-number { font-size: 11rem; }
  .chapter h1 { font-size: 1.9rem; }
  .block-restitution { padding: 32px 20px; margin: var(--space-4) 0; border-radius: 20px; }
  .ghost-word-reveal { font-size: 5rem; }
  .reveal-heading { font-size: 1.18rem; }
  .block-exercice, .block-calcul, .premium-bridge, .beta-conditions { padding: var(--space-2); }
  .block-morgane { padding: var(--space-2); gap: 12px; }
  .restitution-liste .flow-box { flex-direction: column; gap: 2px; }
  .restitution-liste .flow-label { min-width: 0; }
  .premium-step-list { padding-left: 26px; }
  .premium-step-num { left: -26px; width: 18px; font-size: 0.78rem; }
  .premium-closing { padding: var(--space-3) var(--space-2); }
}