/* ============================================================
   Profil de Sensibilité — Site réel V3
   Design : Bohème clair vibrant (validé utilisateur 2026-08-21)
   Choix unique + avance auto + jalons + signal de fin
   ============================================================ */

:root {
  --bg: #f9f1e1;
  --ink: #382e22;
  --ink-soft: #6a5843;
  --muted: #9c8870;
  --rose: #c9806f;
  --rose-deep: #a85c4b;
  --rose-wash: rgba(201,128,111,.10);
  --gold: #c79a4e;
  --gold-deep: #9c742f;
  --olive: #7e8f6c;
  --sage: #a3ae8f;
  --line: rgba(56, 46, 34, .15);
  --hairline: rgba(199, 154, 78, .4);
  --card: rgba(255,252,244,.85);
  --error: #b3402f;
  --radius: 20px;
  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Nunito Sans", system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg); color: var(--ink); min-height: 100vh;
  -webkit-font-smoothing: antialiased; line-height: 1.65; overflow-x: hidden;
}
/* Grain papier (tue l'effet "plat numérique") */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .05;
  mix-blend-mode: multiply;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.55"/></svg>');
}

/* ---------- Fond ---------- */
.texture { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(ellipse 70% 50% at 50% -8%, rgba(201,128,111,.20), transparent 65%),
    radial-gradient(ellipse 55% 42% at 96% 106%, rgba(126,143,108,.22), transparent 65%),
    radial-gradient(ellipse 45% 34% at 2% 102%, rgba(199,154,78,.18), transparent 65%),
    repeating-linear-gradient(45deg, rgba(56,46,34,.014) 0 2px, transparent 2px 7px);
}
.ring { position: fixed; border-radius: 50%; z-index: 0; pointer-events: none; border: 1px solid rgba(199,154,78,.25); }
.r1 { width: 480px; height: 480px; top: -190px; left: -160px; }
.r2 { width: 340px; height: 340px; bottom: -140px; right: -110px; }
.r3 { width: 160px; height: 160px; top: 30%; right: -55px; border-style: dashed; opacity: .8; }

.petal { position: fixed; z-index: 0; pointer-events: none; width: 16px; height: 16px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23c9806f" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.4 6.6L21 12l-6.6 2.4L12 21l-2.4-6.6L3 12l6.6-2.4z"/></svg>') center/contain no-repeat;
  opacity: .5; animation: float 14s ease-in-out infinite; }
.p1 { top: 12%; left: 6%; animation-delay: -2s; }
.p2 { top: 64%; left: 88%; width: 12px; height: 12px; animation-delay: -7s; opacity: .4; }
.p3 { top: 82%; left: 14%; width: 10px; height: 10px; animation-delay: -11s;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23c79a4e" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.4 6.6L21 12l-6.6 2.4L12 21l-2.4-6.6L3 12l6.6-2.4z"/></svg>') center/contain no-repeat; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(8deg); } }

.bot { position: fixed; z-index: 0; pointer-events: none; opacity: .8; }
.bot-tl { top: 0; left: 0; }
.bot-br { bottom: 0; right: 0; transform: rotate(180deg); }

#app { position: relative; z-index: 1; }
.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; }
.container { width: 100%; max-width: 640px; margin: auto; padding: 48px 22px 72px; }

/* ---------- Typo & ornements ---------- */
h1, h2 { font-family: var(--font-serif); font-weight: 300; line-height: 1.13; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 7.2vw, 3.1rem); margin-bottom: 12px; }
h2 { font-size: clamp(1.55rem, 5.6vw, 2.05rem); line-height: 1.28; margin-bottom: 8px; }
h3 { font-family: var(--font-serif); font-size: 1.35rem; margin-bottom: 10px; color: var(--gold-deep); }
em { font-style: italic; }
h1 em { color: var(--rose-deep); }

.eyebrow { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--rose-deep); font-weight: 700; margin-bottom: 18px; }
.subtitle { color: var(--ink-soft); font-size: 1rem; margin-bottom: 26px; max-width: 44ch; margin-left: auto; margin-right: auto; }
.fineprint { color: var(--muted); font-size: .8rem; margin-top: 14px; }
.fineprint.byline { margin-top: 5px; font-size: .78rem; }
.fineprint.error { color: var(--error); font-weight: 700; }

.orn { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--gold-deep); margin: 20px 0; }
.orn::before, .orn::after { content: ""; height: 1px; width: 46px;
  background: linear-gradient(90deg, transparent, var(--hairline)); }
.orn::after { background: linear-gradient(90deg, var(--hairline), transparent); }

/* ---------- Boutons (mats, artisanaux — plus d'effet brillant) ---------- */
.btn-primary {
  display: inline-block; cursor: pointer; border: 1px solid rgba(120,60,45,.25);
  background: var(--rose-deep); color: #fff;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 1.02rem; padding: 16px 42px; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(168,92,75,.28), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(168,92,75,.4); background: #b96a58; }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-small { padding: 11px 26px; font-size: .9rem; }

/* ---------- Accueil ---------- */
.home { text-align: center; position: relative; }
.sun { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 320px; height: 320px; z-index: -1;
  background: radial-gradient(circle, rgba(199,154,78,.30), rgba(199,154,78,.08) 55%, transparent 72%); border-radius: 50%; }
.home-icons { display: flex; justify-content: center; align-items: center; gap: 18px; margin-bottom: 22px; }
.home-icons svg { width: 21px; height: 21px; }
.home-icons .c-olive { color: var(--olive); }
.home-icons .c-gold { color: var(--gold-deep); }
.home-icons .c-rose { color: var(--rose-deep); }

/* Soulignement manuscrit sous le titre */
.home h1 { position: relative; padding-bottom: 18px; }
.home h1::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 9px; opacity: .5;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 12" fill="none" stroke="%23a85c4b" stroke-width="2.4" stroke-linecap="round"><path d="M3 8C40 2 80 2 120 8s80 6 117 0"/></svg>') center/contain no-repeat; }

.hook { max-width: 40ch; margin: 0 auto 26px; text-align: left;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 20px; padding: 18px 22px; box-shadow: 0 14px 40px rgba(120, 90, 50, .10); }
.hook .hook-title { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: 10px; }
.hook li { list-style: none; font-family: var(--font-serif); font-style: italic; font-size: 1rem;
  color: var(--ink-soft); padding: 5px 0 5px 26px; position: relative; }
.hook li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 13px; height: 13px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23c9806f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20C4 10 10 4 20 4c0 10-6 16-16 16z"/><path d="M4 20C9 15 14 10 19 6"/></svg>') center/contain no-repeat; }

.trust-badges { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.trust-badges span { font-size: .75rem; color: var(--ink-soft);
  border: 1px solid rgba(126,143,108,.45); border-radius: 999px; padding: 7px 15px; background: rgba(163,174,143,.16); }
.trust-badges span.alt { border-color: rgba(201,128,111,.45); background: rgba(201,128,111,.12); }
.trust-badges svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; color: var(--olive); }
.trust-badges span.alt svg { color: var(--rose-deep); }
.orn svg, .q-orn svg { width: 13px; height: 13px; color: var(--gold-deep); }
.big svg { width: 44px; height: 44px; color: var(--gold-deep); }
.custom-answers h3 svg { width: 16px; height: 16px; color: var(--rose-deep); vertical-align: -2px; margin-left: 4px; }
.g-icon svg { width: 21px; height: 21px; color: var(--olive); }
.secure-line svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; color: var(--rose-deep); }
.fine b { color: var(--rose-deep); font-weight: 700; }

/* ---------- Quiz : mode plein écran sobre ---------- */
body.quiz-mode .petal, body.quiz-mode .ring, body.quiz-mode .bot { display: none; }
body.quiz-mode .texture { opacity: .22; }
/* Le pied de page (mentions légales & CGV, obligatoires) N'EST PAS masqué en mode quiz. Depuis le
   28-09, la question de situation est LA page d'arrivée de toutes les visites : masquer le pied ici
   retirait l'accès aux mentions légales sur la page la plus visitée du site (contrôle
   mentions_legales en rouge : « lien present invisible » sur /). Les décorations restent masquées,
   seul le pied — qui n'est pas une décoration — redevient visible. */

#screen-quiz .container {
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 28px 24px 32px;
}
#screen-quiz .quiz-head { margin-bottom: 6px; }
#screen-quiz .progress { margin-bottom: 30px; }
#screen-quiz h2 {
  font-size: clamp(1.7rem, 6.2vw, 2.3rem); line-height: 1.24; margin-bottom: 6px;
}
#screen-quiz .q-orn { margin: 16px 0 20px; }
#screen-quiz .option {
  padding: 16px 14px; font-size: 1.04rem; gap: 14px;
}
#screen-quiz .option .mark { flex-basis: 26px; width: 26px; height: 26px; }
#screen-quiz .milestone { padding-top: 20px; }
/* L'ÉCRAN D'ARRIVÉE (l'accroche de l'annonce) n'a pas la mécanique d'un quiz : la barre à 0 %,
   l'ornement et le libellé répété ne disent rien, et ils poussaient la première réponse à 398 px
   sur un écran de 844 (mesuré le 23-10-2026). On y va droit. La classe est posée par app.js
   (startQuiz) et retirée dès la première réponse. */
#screen-quiz.accroche .container { justify-content: flex-start; padding-top: 18px; }
#screen-quiz.accroche .progress { display: none; }
#screen-quiz.accroche .q-orn { display: none; }
#screen-quiz.accroche .quiz-entree { margin-bottom: 12px; }
/* Un libellé vide ne doit pas laisser son espace : sur l'arrivée, le repère du haut dit déjà
   « Pour commencer » (23-10-2026). */
#q-label:empty { display: none; }
/* Réassurance quiz (inspiration validée) : le pied reste visible — cf. bloc .quiz-foot plus bas */

/* ---------- Quiz ---------- */
.quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.back-btn {
  flex: 0 0 auto; background: none; border: none; cursor: pointer; padding: 6px 8px 6px 0;
  color: var(--muted); font-size: .86rem; font-family: inherit; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px; visibility: hidden; white-space: nowrap;
}
.back-btn:hover { color: var(--rose-deep); }
.q-num { flex: 1; text-align: center; }
.back-link {
  display: inline-block; margin-top: 16px; cursor: pointer;
  color: var(--muted); font-size: .86rem; text-decoration: none;
  border-bottom: 1px dashed rgba(0,0,0,.22); padding-bottom: 1px; font-weight: 600;
}
.back-link:hover { color: var(--rose-deep); border-bottom-color: var(--rose-deep); }
.q-num { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--rose-deep); font-weight: 700; }
.q-total { font-size: .68rem; letter-spacing: .2em; color: var(--muted); }
.progress { height: 3px; background: rgba(56,46,34,.12); border-radius: 99px; overflow: visible; position: relative; margin-bottom: 40px; }
.progress-bar { display: block; height: 3px; width: 0%; background: linear-gradient(90deg, var(--rose), var(--gold)); border-radius: 99px; position: relative; transition: width .5s ease; }
.progress-bar::after { content: ""; position: absolute; right: -14px; top: -11px; width: 15px; height: 15px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23a85c4b" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20C4 10 10 4 20 4c0 10-6 16-16 16z"/><path d="M4 20C9 15 14 10 19 6"/></svg>') center/contain no-repeat; }

.q-label { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: 14px; }
.q-orn { display: flex; align-items: center; gap: 10px; color: var(--gold-deep); margin: 10px 0 12px; }
.q-orn::before { content: ""; height: 1px; width: 14px; background: var(--hairline); }
.q-orn::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, var(--hairline), transparent); }

.options { list-style: none; }
/* Les réponses sont des CARTES, pas des lignes de texte (23-10-2026). Mesuré sur l'écran
   d'arrivée : deux rangées sans bordure, marqueur gris pâle, 16 px — rien n'indiquait qu'on
   pouvait toucher, et 77 % des arrivées quittaient là. */
.option { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 16px 14px; width: 100%;
  border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.72); box-shadow: 0 1px 0 rgba(74,63,51,.03);
  font-family: var(--font-sans); font-size: 1.04rem; color: var(--ink); text-align: left;
  margin-bottom: 10px; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.option:last-child { margin-bottom: 0; }
.option .mark { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  border: 1.5px solid rgba(168,92,75,.45); position: relative; transition: all .18s ease; }
.option .mark::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 700; color: #fff; opacity: 0; transform: scale(0); transition: all .15s ease; }
.option .txt { flex: 1; }
.option .arrow { font-size: .85rem; color: var(--rose-deep); opacity: 0; transform: translateX(-5px); transition: all .2s ease; }
.option:hover { background: #fff; border-color: var(--gold); }
.option:hover .mark { border-color: var(--rose); transform: scale(1.08); }
.option:hover .txt { color: var(--ink); }
.option:hover .arrow { opacity: 1; transform: none; }
.option.sel { background: var(--rose-wash); border-color: var(--rose-deep); }
.option.sel .mark { border-color: var(--rose-deep); background: var(--rose-deep); }
.option.sel .mark::after { opacity: 1; transform: scale(1); }
.option.sel .txt { color: var(--rose-deep); font-weight: 600; }
.option.sel .arrow { opacity: 1; transform: none; }

.option.autre { border: 1px dashed rgba(126,143,108,.45); background: transparent; margin-top: 10px; }
.option.autre .txt { color: var(--muted); font-size: .92rem; }

.custom-area { display: none; margin-top: 4px; padding: 2px 6px 8px; }
.custom-area.visible { display: block; animation: fadeUp .3s ease both; }
.custom-label { color: var(--gold-deep); font-size: .9rem; margin-bottom: 8px; font-weight: 700; letter-spacing: .02em; }
.custom-area input[type="text"] {
  width: 100%; border: none; border-bottom: 1.5px solid var(--hairline); background: transparent;
  font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--ink);
  padding: 8px 2px; outline: none; transition: border-color .2s;
}
.custom-area input[type="text"]:focus { border-bottom-color: var(--rose); }

.milestone { margin-top: 20px; font-family: var(--font-serif); font-style: italic; font-size: .95rem; color: var(--gold-deep); text-align: center; min-height: 1.4em; }
.quiz-foot { margin-top: 24px; text-align: center; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.screen.anim { animation: fadeUp .4s ease both; }

/* ---------- Email ---------- */
.email { text-align: center; }
.email .big { font-size: 2.4rem; margin-bottom: 10px; }
.email form { display: flex; flex-direction: column; gap: 14px; max-width: 420px; margin: 0 auto; }
.email input[type="email"], .email input[type="text"] {
  width: 100%; border: 1px solid var(--line); border-radius: 14px; background: #fffdf8;
  font-family: var(--font-sans); font-size: 1rem; color: var(--ink); padding: 14px 16px; outline: none; transition: border-color .2s;
}
.email input[type="email"]:focus, .email input[type="text"]:focus { border-color: var(--rose); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; color: var(--muted); cursor: pointer; text-align: left; }
.consent input { margin-top: 4px; accent-color: var(--rose-deep); }

/* ---------- Résultat ---------- */
.result { text-align: center; }
.profile-card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 34px 28px; margin-bottom: 26px; box-shadow: 0 14px 40px rgba(120, 90, 50, .12);
}
/* La situation, rendue à l'acheteuse (plan B, 24-09) : c'est ce que l'annonce promettait, et ce
   qu'elle vient de choisir en première question. Elle passe AVANT le profil — l'annonce parlait du
   repli, pas de sa sensibilité. Mêmes mots que la carte imprimable. */
.situation-card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 30px 26px; margin-bottom: 26px; box-shadow: 0 14px 40px rgba(120, 90, 50, .12);
  text-align: left;
}
.situation-card[hidden] { display: none; }
.situation-nom {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; color: var(--ink);
  margin: 0 0 10px;
}
.situation-resume { font-size: .96rem; line-height: 1.65; color: var(--ink); margin: 0 0 18px; }
.situation-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--gold-deep);
  font-weight: 700; margin: 0 0 8px;
}
.situation-signes { margin: 0 0 18px; padding-left: 18px; }
.situation-signes li { font-size: .95rem; line-height: 1.6; margin-bottom: 7px; }
.situation-geste {
  background: rgba(126, 143, 108, .09); border-left: 3px solid var(--olive);
  border-radius: 0 12px 12px 0; padding: 13px 16px; font-size: .95rem; line-height: 1.6; margin: 0;
}
/* Les écrans de transition (§4.1 du plan B). Sobres : un eyebrow, un titre, un texte, une source
   quand il y en a une, un bouton. Rien d'autre — c'est de la respiration, pas une page de vente. */
.transition-texte { font-size: 1rem; line-height: 1.7; color: var(--ink); margin: 0 0 14px; }
.transition-source {
  font-size: .78rem; color: var(--muted); font-style: italic; margin: 0 0 22px;
}
#screen-transition .btn-primary { margin-top: 4px; }
#transition-compteur { margin-top: 12px; }
.profile-icon {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 16px;
  background: linear-gradient(135deg, rgba(163,174,143,.28), rgba(201,128,111,.16));
  border: 1px solid rgba(126,143,108,.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-deep);
}
.profile-icon svg { width: 40px; height: 40px; }
.profile-tagline { color: var(--rose-deep); font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; margin-bottom: 12px; }
.profile-sign { display: inline-block; margin-bottom: 12px; font-size: .84rem; font-weight: 600;
  color: var(--gold-deep); letter-spacing: .04em; }
.profile-sign-note { display: none; margin: -6px 0 12px; font-size: .9rem; font-style: italic; color: var(--ink-soft); }
.profile-desc { color: var(--ink-soft); font-size: .98rem; }
.profile-secondary { margin-top: 14px; font-size: .9rem; color: var(--gold-deep); font-weight: 600; }
.profile-validation { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-style: italic; font-size: .92rem; color: var(--muted); line-height: 1.6; }
/* Le manque (20-09) : sous la carte du profil, ce que l'analyse payante apporte. Nos publicités
   promettent le profil gratuit — il est livré ici ; ce bloc donne la raison de vouloir la suite,
   en nommant le chapitre « piège » du profil (titre seulement, jamais son contenu). */
.profile-gap {
  margin: 18px 0 2px;
  padding: 15px 17px;
  border-left: 3px solid var(--gold-deep);
  background: rgba(199, 154, 78, .07);
  border-radius: 0 12px 12px 0;
  text-align: left;
}
.profile-gap-titre {
  font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 8px;
}
.profile-gap-texte { font-size: .93rem; color: var(--ink); margin: 0 0 6px; }
.profile-gap-piege {
  font-family: var(--font-serif, Georgia, serif); font-size: 1.04rem; line-height: 1.35;
  color: var(--ink); margin: 10px 0;
}
.profile-gap-texte:last-child { margin-bottom: 0; font-size: .87rem; color: var(--ink-soft); }

.hidden { display: none; }
.custom-answers {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 22px 20px; margin-bottom: 26px; text-align: left; box-shadow: 0 14px 40px rgba(120,90,50,.10);
}
.custom-answers h3 { margin-bottom: 6px; }
.custom-answers-note { color: var(--muted); font-size: .88rem; margin-bottom: 12px; }
.custom-answers ul { list-style: none; }
.custom-answers li { border-top: 1px solid var(--line); padding: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.ca-q { color: var(--muted); font-size: .8rem; font-style: italic; }
.ca-a { color: var(--ink); font-size: .95rem; }

.teaser {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 28px 24px; box-shadow: 0 14px 40px rgba(120,90,50,.10);
}
.teaser ul { list-style: none; text-align: left; margin: 14px 0 22px; display: inline-block; color: var(--ink-soft); font-size: .95rem; }
.teaser li { margin-bottom: 9px; }
.teaser li::before { content: "✓ "; color: var(--rose-deep); font-weight: 700; }

/* Résumé de l'offre (gain C) : le prix et le bouton, placés juste après le « manque », pour que
   le prix apparaisse sans cinq écrans de défilement. Le bloc complet (teaser) reste en bas. */
.offer-summary {
  margin: 18px 0 2px;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--card);
  text-align: center;
  box-shadow: 0 10px 28px rgba(120, 90, 50, .08);
}
.offer-summary-price {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.offer-summary-price span {
  display: block;
  font-family: var(--font-sans);
  font-size: .64rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.offer-summary .btn-primary { margin: 6px 0 8px; width: 100%; }
.offer-summary .fineprint { margin: 0; }

/* ---------- Réassurance quiz + FAQ (cartes) + Avis (témoignages réels anonymisés) ---------- */
.quiz-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; }
.quiz-trust { font-size: .78rem; color: var(--muted); }
.faq-head { margin: 4px 0 10px; text-align: center; }
.faq-item { text-align: left; background: var(--card); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 11px 14px; margin-bottom: 8px; }
.faq-q { margin: 0; font-family: var(--font-serif); font-size: .94rem; font-weight: 600;
  color: var(--ink); line-height: 1.35; }
.faq-q::before { content: "✦ "; color: var(--gold); font-size: .82rem; }
.faq-a { margin: 5px 0 0 14px; font-size: .84rem; color: var(--ink-soft); line-height: 1.55; }

.avis { text-align: left; margin: 20px 0 4px; }
.avis-note { font-size: .72rem; color: var(--muted); text-align: center; margin: 10px auto 0;
  max-width: 30em; line-height: 1.45; }
.avis-card { position: relative; background: var(--card); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 14px 16px 12px; margin-bottom: 10px; }
.avis-card::before { content: "“"; position: absolute; top: -6px; left: 10px;
  font-family: var(--font-serif); font-size: 2.6rem; line-height: 1; color: var(--gold); opacity: .55; }
.avis-quote { margin: 6px 0 0; font-family: var(--font-serif); font-style: italic;
  font-size: .92rem; color: var(--ink); line-height: 1.5; }
.avis-quote .guillemet-ouvrant { color: var(--gold); }
.avis-who { margin: 8px 0 0; font-size: .74rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.avis-who b { color: var(--gold-deep); font-weight: 700; }

/* ---------- Aperçu du rapport (preuve avant paywall) ---------- */
.report-preview { margin: 18px 0 22px; text-align: left; }
.preview-eyebrow {
  text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; font-weight: 700;
  color: var(--gold-deep); margin-bottom: 8px;
}
.preview-page {
  background: var(--paper, #fffdf6); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 20px 22px; box-shadow: 0 8px 24px rgba(120,90,50,.08);
  border-top: 3px solid var(--gold, #c79a4e);
}
.preview-brand { display: flex; justify-content: space-between; font-size: .6rem;
  text-transform: uppercase; letter-spacing: .18em; color: var(--muted);
  border-bottom: 1px dashed var(--hairline); padding-bottom: 7px; margin-bottom: 12px; }
.preview-pagenum { text-align: right; font-size: .7rem; color: var(--muted); margin: 12px 0 0; }
.preview-title {
  font-family: var(--font-serif, Georgia, serif); font-size: 1.05rem; font-weight: 600;
  color: var(--ink); margin: 4px 0 8px;
}
.preview-title:not(:first-child) { margin-top: 16px; }
.preview-list { margin: 0 0 4px 20px; color: var(--ink-soft); font-size: .92rem; }
.preview-list li { margin-bottom: 7px; }
.preview-more { font-style: italic; color: var(--muted); font-size: .86rem; margin-top: 12px; }
.preview-note { font-size: .78rem; color: var(--muted); margin-top: 10px; text-align: center; }

/* ---------- Retouches audit (03-09) : confiance + bénéfice ---------- */
.privacy-note { margin-top: 10px; }
.teaser-benefit { font-size: .93rem; color: var(--ink-soft); line-height: 1.55; margin: 10px 0 14px; }
.teaser-trans { font-size: .95rem; color: var(--gold-deep); font-weight: 600; line-height: 1.55; margin: 10px 0 2px; }
.cred-note { font-size: .8rem; color: var(--ink-soft); line-height: 1.55; text-align: left;
  border-left: 2px solid var(--gold); padding: 2px 0 2px 12px; margin: 14px 0; }
.cred-note b { color: var(--ink); }

/* ---------- Origine du projet (écran résultat) ---------- */
.origin-note { max-width: 470px; margin: 16px auto 6px; text-align: center; }
.origin-note .eyebrow { margin-bottom: 8px; }
.origin-a { color: #57493a; font-size: .92rem; margin-bottom: 6px; }
.origin-a a { color: var(--gold-deep); text-decoration: underline; }
.origin-sign { font-family: var(--font-serif); font-style: italic; color: var(--rose-deep); font-size: .98rem; }

/* ---------- Page histoire (à propos) ---------- */
.story-body { max-width: 640px; margin: 0 auto; padding: 40px 20px 70px; }
.story-body h1 { font-size: 2.1rem; margin-bottom: 6px; }
.story-body .sub { color: var(--muted); font-style: italic; font-family: var(--font-serif); margin-bottom: 26px; }
.story-body h2 { font-size: 1.35rem; margin: 30px 0 10px; color: var(--gold-deep); }
.story-body p, .story-body li { color: #57493a; margin-bottom: 12px; line-height: 1.75; }
.story-body ul { padding-left: 20px; margin-bottom: 14px; }
.story-sign { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--rose-deep); margin-top: 22px; }
.story-cta { text-align: center; margin-top: 34px; }

/* ---------- Garantie 100% ---------- */
.guarantee {
  margin: 18px auto 0; max-width: 460px;
  background: rgba(163,174,143,.16); border: 1px solid rgba(126,143,108,.45);
  border-radius: 14px; padding: 12px 16px; font-size: .88rem; color: var(--ink-soft);
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
}
.guarantee .g-icon { font-size: 1.1rem; line-height: 1.3; }
.guarantee b { color: var(--olive); }

/* ---------- Checkout ---------- */
.checkout-page { max-width: 560px; margin: 0 auto; padding: 48px 22px 72px; }
.checkout-card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: 0 14px 40px rgba(120,90,50,.12);
}
.checkout-card .eyebrow { margin-bottom: 12px; }
.summary-list { list-style: none; margin: 16px 0 20px; }
.summary-list li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink-soft); display: flex; gap: 10px; align-items: flex-start; }
.summary-list li::before { content: "✓ "; color: var(--rose-deep); font-weight: 700; }
.summary-list li:last-child { border-bottom: none; }
.price-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 18px 0 6px; }
.price { font-family: var(--font-serif); font-size: 2.4rem; color: var(--ink); }
.price s { color: var(--muted); font-weight: 400; font-size: 1.5rem; margin-right: 10px; }
.price-note { color: var(--muted); font-size: .82rem; }
.teaser-price { font-family: var(--font-serif); font-size: 1.55rem; font-weight: 600; color: var(--ink); margin: 16px 0 4px; }
.teaser-price s { color: var(--muted); font-weight: 400; font-size: 1.1rem; margin-right: 10px; }
.teaser-price .tag { background: var(--rose-deep); color: #fff; font-family: var(--font-sans); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; margin-left: 8px; vertical-align: middle; white-space: nowrap; display: inline-block; }
.checkout-card .btn-primary { width: 100%; }
.pay-hint { text-align: center; color: var(--muted); font-size: .78rem; margin-top: 12px; }
.secure-line { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: .78rem; color: var(--muted); }
.checkout-success { display: none; text-align: center; padding: 10px 0; }
.checkout-success.active { display: block; animation: fadeUp .4s ease both; }
.checkout-success .big { font-size: 2.6rem; margin-bottom: 8px; }
.upsell { margin: 22px auto 6px; max-width: 400px; padding: 18px 22px; background: rgba(185,138,94,.08);
  border: 1px solid rgba(185,138,94,.3); border-radius: 12px; }
.upsell .eyebrow { font-size: .62rem; margin-bottom: 4px; }
.upsell h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.15rem; color: var(--rose-deep); margin-bottom: 4px; }
.upsell p { font-size: .9rem; color: var(--soft); }
.upsell .price { margin: 8px 0; font-size: 1.05rem; }
.upsell .price s { color: var(--soft); font-weight: 400; margin-right: 8px; }
.upsell .price { font-weight: 700; color: var(--ink); }
.upsell .tag { display: inline-block; background: rgba(201,128,111,.15); color: var(--rose-deep);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 999px; padding: 3px 10px; margin-left: 6px; vertical-align: 2px; }
.pay-logos { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.plogo { font-size: .62rem; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; border-radius: 5px;
  background: #f3eee3; border: 1px solid var(--hairline); color: #5a4d3f; }
.plogo.visa { font-style: italic; font-weight: 900; letter-spacing: .02em; }
.plogo.mc { font-weight: 700; }
.plogo.cb { font-weight: 700; }
.plogo.pp { font-style: italic; font-weight: 700; color: #003087; }
.deliverables { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.btn-deliverable { font-size: .92rem; padding: 13px 24px; }
.profile-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; background: rgba(201,128,111,.12); border: 1px solid rgba(201,128,111,.4); color: var(--rose-deep); font-weight: 700; font-size: .85rem; border-radius: 999px; padding: 6px 16px; }
.profile-pill svg { width: 14px; height: 14px; }
.back-link { display: block; text-align: center; margin-top: 22px; color: var(--gold-deep); text-decoration: none; font-size: .9rem; }
.back-link:hover { text-decoration: underline; }

/* ---------- Merci ---------- */
.thanks { text-align: center; }

/* ---------- Footer ---------- */
footer { position: relative; z-index: 1; text-align: center; padding: 34px 20px 40px;
  color: var(--muted); font-size: .78rem; border-top: 1px solid var(--line); }
footer nav { margin-top: 10px; }
footer a { color: var(--gold-deep); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ---------- Pages rapports ---------- */
.report-body { max-width: 720px; margin: 0 auto; padding: 40px 22px 80px; }
.report-body h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); margin: 8px 0 4px; }
.report-body h2 { font-size: 1.45rem; margin: 34px 0 10px; color: var(--gold-deep); }
.report-body h3 { font-size: 1.15rem; color: var(--rose-deep); }
.report-body p { margin-bottom: 14px; color: #57493a; }
.report-body ul, .report-body ol { margin: 0 0 16px 22px; color: #57493a; }
.report-body li { margin-bottom: 6px; }
.report-body hr { border: none; border-top: 1px solid var(--hairline); margin: 30px 0; }
.report-body blockquote { border-left: 3px solid var(--gold); padding: 14px 18px; margin: 22px 0; background: rgba(199,154,78,.07); border-radius: 0 12px 12px 0; color: #57493a; }
.report-body blockquote p { margin-bottom: 10px; }
.report-body blockquote p:last-child { margin-bottom: 0; }
.report-body blockquote p:first-child { font-family: var(--font-serif); font-weight: 600; color: var(--gold-deep); font-size: 1.05rem; }
.upsell-report { margin: 26px 0 10px; padding: 18px 20px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--card); text-align: center; }
.upsell-report-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; color: var(--rose-deep); margin-bottom: 8px; }
.upsell-report p { margin-bottom: 12px; }
.upsell-report-btn { display: inline-block; margin-top: 4px; padding: 12px 22px; border-radius: 99px; background: var(--rose-deep); color: #fff; font-weight: 700; text-decoration: none; font-size: .95rem; }
.upsell-report-btn:hover { background: var(--gold-deep); }
.gift-link { display: inline-block; margin-top: 14px; font-size: .92rem; color: var(--gold-deep);
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: rgba(255,253,248,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--hairline);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); align-items: center; gap: 12px; }
.sticky-cta.visible { display: flex; }
/* Bandeau de consentement affiché (26-09) : la barre collante remonte de la hauteur du bandeau
   (96 px), sinon celui-ci la recouvre (z-index 9999 contre 60) et une première visite ne peut plus
   avancer depuis le récapitulatif. consent.js pose/retire `body.consent-visible`. */
body.consent-visible .sticky-cta { bottom: 74px; }   /* 74 px = hauteur du bandeau affiné le 23-10 (96 avant) */
.sticky-price { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.25rem; color: var(--ink); white-space: nowrap; }
.sticky-price s { color: var(--muted); font-weight: 400; font-size: .95rem; margin-right: 8px; }
.sticky-price span { display: block; font-family: 'Nunito Sans', sans-serif; font-size: .64rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sticky-cta .btn-primary { flex: 1; margin: 0; font-size: .92rem; padding: 12px 14px; }
#screen-result .container { padding-bottom: 96px; }
/* Récapitulatif : la barre collante du bas ne doit pas recouvrir la fin de la page. */
#screen-reveal .container { padding-bottom: 150px; }
/* Écrans étroits : la barre passe sur deux lignes. Sans ça, le bouton est écrasé sur la
   largeur restante et son texte se replie sur trois lignes — il apparaît alors comme une
   grosse pastille ronde illisible (constaté sur iPhone 390 px, 17-09). Le bloc est placé
   APRÈS la règle ci-dessus, sinon c'est elle qui l'emporterait. */
@media (max-width: 560px) {
  .sticky-cta { flex-wrap: wrap; gap: 8px; padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); }
  .sticky-price { flex: 1 1 100%; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
  .sticky-price span { display: inline; white-space: normal; }
  .sticky-cta .btn-primary { flex: 1 1 100%; font-size: .95rem; padding: 13px 16px; }
  #screen-result .container { padding-bottom: 168px; }
  #screen-reveal .container { padding-bottom: 168px; }
}
.report-header .eyebrow { margin-bottom: 6px; }
.report-header .eyebrow svg { width: 13px; height: 13px; color: var(--gold-deep); vertical-align: -1px; margin-left: 4px; }

/* ---------- Réponses personnalisées dans le rapport ---------- */
#report-custom {
  background: rgba(201,128,111,.08); border: 1px solid rgba(201,128,111,.35);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 30px;
}
#report-custom.hidden { display: none; }
#report-custom h2 { font-size: 1.2rem; margin-bottom: 6px; }
#report-custom .report-custom-note { color: var(--muted); font-size: .9rem; margin-bottom: 12px; }
#report-custom ul { list-style: none; }
#report-custom li { padding: 10px 0; border-bottom: 1px solid var(--line); display: block; }
#report-custom li:last-child { border-bottom: none; }
#report-custom .ca-q { display: block; font-style: italic; color: var(--ink-soft); font-size: .9rem; margin-bottom: 3px; }
#report-custom .ca-a { display: block; color: var(--rose-deep); font-family: var(--font-serif); font-size: 1.05rem; }

/* ---------- Tableaux & schémas des rapports ---------- */
.report-table { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: .92rem; }
.report-table th { background: rgba(201,128,111,.10); color: var(--rose-deep); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; padding: 8px 10px;
  border-bottom: 1.5px solid var(--gold-deep); text-align: left; }
.report-table td { padding: 8px 10px; border-bottom: 1px solid var(--hairline); color: #57493a; vertical-align: top; }
.report-table tr:last-child td { border-bottom: none; }
.report-table th:first-child, .report-table td:first-child { text-align: left; }
.report-table td:nth-child(2), .report-table td:nth-child(3), .report-table td:nth-child(4) { text-align: center; }
.checkbox { display: inline-block; width: 13px; height: 13px; border: 1.5px solid var(--gold-deep);
  border-radius: 3px; vertical-align: -2px; }
.schema-box { margin: 20px 0 26px; padding: 18px 16px 14px; border: 1px solid var(--hairline);
  border-radius: var(--radius); background: linear-gradient(135deg, rgba(163,174,143,.10), rgba(201,128,111,.06));
  text-align: center; page-break-inside: avoid; }
.schema-title { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--gold-deep);
  font-weight: 700; margin-bottom: 12px; }
.schema-box svg { width: 100%; height: auto; }
.schema-box text { font-family: var(--font-sans); }
.suivi-table { width: 100%; border-collapse: collapse; margin: 18px 0 10px; page-break-inside: avoid; }
.suivi-table th { background: rgba(201,128,111,.10); padding: 7px 4px; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--rose-deep);
  border-bottom: 1.5px solid var(--gold-deep); text-align: center; }
.suivi-table th:first-child, .suivi-table td:first-child { text-align: left; }
.suivi-table td { text-align: center; padding: 8px 4px; border-bottom: 1px solid var(--hairline); }
.suivi-table td:last-child { border-left: 1px dashed var(--gold-deep); min-width: 100px; text-align: left; }
.schema-note { font-size: .85rem; color: var(--muted); font-style: italic; text-align: center; margin-top: 6px; }

/* ---------- Couverture (visible uniquement à l'impression/PDF) ---------- */
.report-cover { display: none; }

/* ---------- Impression / export PDF propre ---------- */
@media print {
  .report-part { break-before: page; }
  body { background: #fff; }
  body::after, .texture, .ring, .petal, .bot, .report-nav, footer { display: none !important; }
  .print-btn, .upsell-report { display: none !important; }
  .report-body { max-width: 100%; padding: 0; box-shadow: none; border: none; font-size: 12.5pt; line-height: 1.8; }
  .report-body h2 { font-size: 1.35rem; margin-top: 26px; margin-bottom: 12px; }
  .report-body h3 { font-size: 1.05rem; margin-top: 18px; }
  .report-body p { margin-bottom: 12px; }
  .report-body li { margin-bottom: 7px; }
  h1, h2 { page-break-after: avoid; }
  .report-body h2, .report-body h3 { break-after: avoid-page; }
  p, li { page-break-inside: avoid; }
  .report-table, .suivi-table { break-inside: auto; }
  .report-table tr, .suivi-table tr { break-inside: avoid; }
  .report-table thead, .suivi-table thead { display: table-header-group; }
  .checkbox { border-color: #57493a; }
  .report-cover {
    display: block; text-align: center;
    padding: 70mm 0 0; page-break-after: always;
  }
  .report-cover .eyebrow { margin-bottom: 16px; }
  .report-cover .cover-star { color: var(--gold-deep); margin-bottom: 18px; }
  .report-cover .cover-star svg { width: 40px; height: 40px; }
  .report-cover h1 { font-size: 2.6rem; margin-bottom: 12px; }
  .report-cover .cover-sub { color: var(--ink-soft); font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; }
  .report-cover .cover-date { margin-top: 40px; color: var(--muted); font-size: .85rem; letter-spacing: .08em; }
}

.secondary-box {
  background: linear-gradient(135deg, rgba(163,174,143,.18), rgba(201,128,111,.12));
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 22px 20px; margin: 0 0 30px; text-align: center;
}
.secondary-label { text-transform: uppercase; letter-spacing: .16em; font-size: .7rem;
  color: var(--gold-deep); font-weight: 700; margin-bottom: 8px; }
.secondary-box h3 { margin-bottom: 4px; }
.secondary-tagline { color: var(--rose-deep); font-style: italic; font-family: var(--font-serif); margin-bottom: 10px; }
.secondary-box p { color: #57493a; font-size: .95rem; margin-bottom: 10px; }
.secondary-more { margin-top: 6px; }
.secondary-box a { color: var(--gold-deep); text-decoration: underline; }

.report-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 40px; }
.report-nav a { color: var(--gold-deep); text-decoration: none; font-size: .88rem; margin: 0 10px; }
.astro-correlation { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--hairline); font-style: italic; color: var(--gold-deep); }
.astro-section { background: rgba(185,138,94,.06); border: 1px solid rgba(185,138,94,.22);
  border-radius: 12px; padding: 20px 24px; margin: 26px 0; }
.astro-section h2 { margin-top: 0; }
.print-btn { display: inline-block; margin: 18px auto 0; background: var(--rose-deep); color: #fffdf8;
  border: none; border-radius: 999px; padding: 12px 26px; font-family: var(--font-sans); font-weight: 700;
  font-size: .95rem; cursor: pointer; }
@media print { .print-btn { display: none !important; } }
.report-nav a:hover { text-decoration: underline; }

/* ---------- Legal ---------- */
.legal-body { max-width: 720px; margin: 0 auto; padding: 40px 22px 80px; }
.legal-body h1 { font-size: 2rem; }
.legal-body h2 { font-size: 1.3rem; margin-top: 30px; color: var(--gold-deep); }
.legal-body p, .legal-body li { color: #57493a; margin-bottom: 10px; }

@media (max-width: 480px) {
  .container { padding: 36px 18px 60px; }
  .option { padding: 14px 4px; font-size: .95rem; }
  /* Quiz plein écran : version compacte pour tenir dans le viewport sans scroll.
     RESSERRÉ le 26-09 après MESURE au téléphone (390x650, hauteur utile) : le dernier choix de
     trois questions sur quatorze tombait sous le bandeau de consentement (bas à 615 px pour un
     bandeau qui commence à 554). Une réponse hors de portée se lit comme une question à laquelle
     personne ne veut répondre — et on va réécrire le texte au lieu de la mise en page.
     Chaque valeur ci-dessous a été calculée, pas choisie : gain mesuré, puis remesuré. */
  #screen-quiz .container { padding: 14px 20px 24px; }
  #screen-quiz h2 { font-size: 1.44rem; line-height: 1.18; }
  #screen-quiz .q-label { margin-bottom: 8px; }
  #screen-quiz .progress { margin-bottom: 12px; }
  #screen-quiz .q-orn { margin: 8px 0 6px; }
  #screen-quiz .option { padding: 10px 6px; font-size: .98rem; gap: 14px; }
  #screen-quiz .option .mark { flex-basis: 24px; width: 24px; height: 24px; }
  #screen-quiz .milestone { padding-top: 6px; font-size: .88rem; }
}

/* ---------- Écran RÉVÉLATION : récap + composition (03-09) ---------- */
#screen-reveal .container { min-height: 100dvh; display: flex; flex-direction: column;
  justify-content: center; padding: 28px 24px 40px; text-align: center; }
.recap-list { list-style: none; margin: 18px 0 20px; padding: 4px 6px; text-align: left;
  max-height: 46vh; overflow-y: auto; background: var(--card); border: 1px solid var(--hairline);
  border-radius: 14px; }
.recap-list li { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px;
  border-bottom: 1px dashed rgba(199,154,78,.18); }
.recap-list li:last-child { border-bottom: none; }
.recap-list li.recap-sign { background: rgba(199,154,78,.08); }
.recap-q { flex: 0 0 88px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gold-deep); font-weight: 700; }
.recap-a { font-size: .88rem; color: var(--ink); line-height: 1.4; }
.recap-a.recap-custom { font-family: var(--font-serif); font-style: italic; color: var(--rose-deep); }
/* La porte douce (28-09) : le nom de la situation, montré AVANT la demande d'adresse. C'est la
   part du résultat qu'elle est venue chercher ; le geste, les signes et le cadeau restent derrière
   l'adresse. Le nom est grand et serif, la phrase qui le décrit vient dessous, et une ligne courte
   dit ce qui reste — sans jamais le dévoiler. */
.apercu-nom {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.9rem; line-height: 1.15;
  color: var(--ink); margin: 0 0 10px;
}
.apercu-resume { font-size: .98rem; line-height: 1.65; color: var(--ink); margin: 0 0 14px; }
.apercu-suite {
  font-size: .86rem; line-height: 1.55; color: var(--muted);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 10px 2px; margin: 0 auto 10px; max-width: 46ch;
}
.back-link { display: block; margin: 14px auto 0; background: none; border: none; cursor: pointer;
  font-size: .8rem; color: var(--muted); text-decoration: underline; font-family: inherit; }
#reveal-calc h2 { margin-top: 18px; }
.calc-orb { width: 96px; height: 96px; margin: 6px auto 0; border-radius: 50%;
  border: 1.5px dashed var(--gold); display: flex; align-items: center; justify-content: center;
  animation: orb-spin 5s linear infinite; position: relative; }
.calc-star { font-size: 2rem; color: var(--gold); animation: star-pulse 1.6s ease-in-out infinite; }
.calc-orb::after { content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 1px dotted rgba(126,143,108,.5); animation: orb-spin 9s linear infinite reverse; }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes star-pulse { 0%,100% { opacity: .55; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); } }

/* ── Le désamorçage (24-09) ──────────────────────────────────────────────────────────────────
   Deux endroits : la porte d'entrée du test (une phrase qui dit ce que ce test ne fait pas et
   rend la permission de ne pas être d'accord), et l'écran de résultat (la phrase sur la
   culpabilité, qui répond à la question 3 « Que c'est moi »). Recommandé par la psychologue de
   l'audit des cinq rôles ; absent de tout le tunnel auparavant. */
.desamorcage { max-width: 520px; margin: 14px auto 4px; padding: 12px 14px; text-align: left;
  border-left: 2px solid var(--gold); background: rgba(199,154,78,.08); border-radius: 0 8px 8px 0;
  font-size: .84rem; line-height: 1.55; color: var(--muted); }
.desamorcage-resultat { max-width: 560px; margin: 16px auto 0; padding: 12px 14px; text-align: left;
  border-left: 2px solid var(--gold); background: rgba(199,154,78,.08); border-radius: 0 8px 8px 0;
  font-size: .86rem; line-height: 1.55; }
/* Le bloc est passé de un à trois paragraphes (24-09) : la permission de ne pas décider ce soir et
   le rappel qu'un test ne remplace pas un soutien humain. Sans ces règles, les trois se collent. */
.desamorcage-resultat p { margin: 0 0 8px; }
.desamorcage-resultat p:last-child { margin-bottom: 0; }
.desamorcage-soin { color: var(--muted); font-size: .82rem; }

/* ── Ajouter son signe, en option, sur l'écran de résultat (18-09) ─────────── */
.sign-ask { max-width: 520px; margin: 16px auto 0; text-align: center; }
.sign-ask-titre { font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
/* Les deux signes (24-09) : un intitulé par champ — « le tien » et « le sien, à lui » ne se
   devinent pas depuis un champ vide, et un échange de champs passerait inaperçu. */
.sign-ask-sous { font-size: .82rem; font-weight: 700; color: var(--ink); margin: 12px 0 6px; }
.sign-ask select {
  font: inherit; font-size: .9rem; padding: 9px 12px; max-width: 210px;
  border: 1px solid #e8ddc9; border-radius: 4px; background: #fffdf6; color: var(--ink);
}
.sign-ask select:focus { outline: none; border-color: var(--gold); }
.sign-ask-row { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.sign-ask input[type="text"] {
  font: inherit; font-size: .9rem; padding: 9px 12px; max-width: 210px;
  border: 1px solid #e8ddc9; border-radius: 4px; background: #fffdf6; color: var(--ink);
}
.sign-ask input[type="text"]:focus { outline: none; border-color: var(--gold); }
.sign-ask button {
  font: inherit; font-size: .8rem; font-weight: 700; padding: 9px 16px; cursor: pointer;
  border: 1px solid var(--gold); border-radius: 999px; background: #fffdf6; color: var(--gold-deep);
}
.sign-ask button:hover { opacity: .9; }

/* ---------- Variante C : entrée directe sur la première question (21-09-2026) ----------
   Une moitié des visites arrive directement sur la question 01, sans écran d'accueil. Le titre
   est volontairement plus petit que celui de l'accueil : sur un téléphone de 390 × 650, la
   première question et ses réponses doivent rester atteignables sans défiler — le bandeau de
   consentement occupe déjà le bas de l'écran (c'est le défaut qu'on a payé sur le récapitulatif :
   bouton à 653 px pour un écran de 650). Voir app.js, entreeDirecte(). */
.quiz-entree { text-align: center; margin-bottom: 18px; }
.quiz-entree h1 { font-size: clamp(1.5rem, 5.4vw, 1.95rem); margin-bottom: 6px; }
.quiz-entree .quiz-entree-question { font-family: var(--font-serif); font-style: italic;
  font-size: 1.02rem; color: var(--rose-deep); line-height: 1.35; margin: 0 0 6px; }
.quiz-entree .quiz-entree-sous { font-size: .84rem; color: var(--muted); margin: 0; }
.quiz-entree .fineprint { margin-top: 10px; }

/* ---------- LA LETTRE DE VENTE (engendrée depuis le maître, 15-10-2026) ----------
   Le HTML vient de `lettre-vente.js`, engendré par `outils/lettre_vers_html.py` depuis
   `LETTRE-DE-VENTE-2026-10-15.md`. Les classes ci-dessous n'existent que pour ce bloc :
   si on en renomme une ici, il faut la renommer dans le convertisseur, qui les écrit. */
/* Le cadre de la lettre. `app.js` RETIRE la classe `teaser` au moment d'injecter la lettre : les
   règles du teaser statique (listes sans puce, « ✓ » devant chaque item, texte centré) s'appliquaient
   au contenu de la lettre — mesuré le 15-10, les dix-sept items sortaient avec un « ✓ ». */
.offre-lettre {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 28px 22px 34px; box-shadow: 0 14px 40px rgba(120, 90, 50, .10);
}
.lettre { text-align: left; margin-top: 6px; }
.lettre .lettre-titre {
  font-family: var(--font-serif); font-weight: 300; font-size: 1.42rem; line-height: 1.22;
  color: var(--ink); margin: 36px 0 12px; text-align: left;
}
.lettre .lettre-titre:first-child { margin-top: 10px; }
.lettre p {
  font-family: var(--font-serif); font-size: 1.04rem; line-height: 1.62;
  color: var(--ink-soft); margin: 0 0 15px; text-align: left;
}
.lettre strong { color: var(--ink); font-weight: 600; }
.lettre em { font-style: italic; }
.lettre .lettre-liste { list-style: disc; display: block; margin: 6px 0 20px; padding-left: 22px; }
.lettre .lettre-liste li::before { content: none; }   /* jamais de « ✓ » hérité d'un autre bloc */
.lettre .lettre-liste li {
  font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.55;
  color: var(--ink-soft); margin-bottom: 10px;
}
.lettre .lettre-table { width: 100%; border-collapse: collapse; margin: 16px 0 22px; }
.lettre .lettre-table th {
  font-family: var(--font-sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rose-deep); text-align: left; padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--hairline);
}
.lettre .lettre-table td {
  font-family: var(--font-serif); font-size: .95rem; line-height: 1.45; color: var(--ink-soft);
  padding: 9px 10px 9px 0; border-bottom: 1px solid var(--hairline); vertical-align: top;
}
.lettre .lettre-sep { border: 0; border-top: 1px solid var(--hairline); margin: 30px 0; }
.lettre .lettre-cta { display: block; width: 100%; margin: 24px 0 10px; }
.lettre .lettre-lien { color: var(--rose-deep); text-decoration: underline; text-underline-offset: 3px; }
.lettre .lettre-phrase { margin: 20px 0 22px; }
.lettre .lettre-citation {
  font-family: var(--font-serif); font-style: italic; font-size: 1.16rem; line-height: 1.5;
  color: var(--ink); border-left: 2px solid var(--gold); padding-left: 16px; margin: 0 0 14px;
}
/* Le bloc de situation : un seul des trois, inséré par app.js — il doit se distinguer du reste
   sans crier (c'est le passage le plus personnel du document). */
.lettre #bloc-situation {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 22px 20px 8px; margin: 24px 0 30px;
}
.lettre #bloc-situation .lettre-titre { font-size: 1.3rem; margin-top: 0; }
@media (max-width: 560px) {
  .lettre .lettre-titre { font-size: 1.28rem; margin-top: 30px; }
  .lettre p { font-size: 1.01rem; }
  .lettre .lettre-table td { font-size: .9rem; }
  .lettre #bloc-situation { padding: 18px 15px 6px; }
}