/* ===========================================================
   PLACE — feuille de style éditoriale
   Palette calée sur reprends-ta-place-cover.png (bas de couverture) :
   crème / terracotta brûlé / encre. Beaucoup d'air, peu de cartes.
   Typographies : Fraunces (titres), Lora (éditorial/citations), Poppins (UI)
   =========================================================== */

:root {
  --paper: #f8f2e5;
  --surface: #fbf6ec;
  --ink: #211d1a;
  --ink-muted: #6d5f52;
  --border: #e6d9c2;

  /* Terracotta échantillonné directement sur le bas de reprends-ta-place-cover.png
     (médiane RGB ~164,90,65 sur plusieurs bandes propres du fond de couverture).
     Pas le brun foncé de la passe précédente, qui n'était voulu que pour le fond
     du bloc e-book intermédiaire (voir --ebook-mid-bg, volontairement différent). */
  --terracotta: #a45a41;
  --terracotta-dark: #7f4632;
  --terracotta-soft: #f1ded0;
  --ebook-mid-bg: #f1ded0;
  --divider-strong: #ddcba9;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-editorial: "Lora", Georgia, serif;
  --font-ui: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

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

  --radius: 14px;
  --max-width: 640px;
  --reading-width: 28ch;
  /* Espace réservé en bas de page pour que tout contenu (notamment le
     formulaire e-mail) puisse toujours être scrollé entièrement au-dessus du
     sticky, sans jamais le chevaucher — plutôt que de masquer le sticky
     devant le formulaire. Inclut la safe-area iPhone, comme le sticky
     lui-même (voir .sticky-cta plus bas), pour rester cohérent sur les
     appareils à encoche. */
  --sticky-clearance: calc(96px + env(safe-area-inset-bottom));
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

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

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  /* Garde-fou global : .app a déjà overflow-x:hidden, mais le sticky-cta
     (position:fixed) est un frère de .app dans le DOM, donc en dehors de
     cette protection. On la remonte ici pour couvrir toute la page, y
     compris les éléments fixes. overflow-x:hidden en repli si `clip`
     n'est pas supporté ; ce garde-fou vient en plus de la vraie cause
     traitée à la source, pas à sa place (aucun débordement réel constaté
     lors de l'audit — voir le rapport). */
  overflow-x: hidden;
  overflow-x: clip;
  /* Aucun débordement mesurable (scrollWidth) n'empêche iOS Safari de
     laisser le doigt "traîner" la page horizontalement (rubber-banding /
     pan latéral), un comportement tactile indépendant du layout. On
     restreint le geste de scroll du document à l'axe vertical uniquement
     (pan-y garde le scroll vertical et les taps, contrairement à "none"
     qui casserait tout scroll) et on désactive le rebond élastique
     horizontal quand le navigateur le supporte. */
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

body {
  font-family: var(--font-editorial);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--sticky-clearance);
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

.screen {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
}

/* ---------- QUESTIONNAIRE (écran) ---------- */

.screen--question {
  /* Marge de garde dédiée au sticky flottant, seulement ici (pas un grand vide
     dans le flux : juste assez pour que Précédent/Suivant ne soient jamais
     recouverts si le contenu remplit tout l'écran sur un petit viewport). */
  padding-bottom: calc(var(--space-4) + var(--sticky-clearance));
}

/* ---------- ACCUEIL ---------- */

.screen--home {
  justify-content: center;
  gap: var(--space-5);
}

/* Un seul wrapper de largeur fixe, centré comme un bloc : tout ce qui est à
   l'intérieur (y compris la liste à puces alignée à gauche) partage la même
   colonne, au lieu que chaque élément se centre indépendamment. */
.home__content {
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}

.home__eyebrow {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--terracotta);
  margin: 0 0 var(--space-2);
}

.home__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 6.5vw, 2.3rem);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

.home__tagline {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1rem, 4vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}

.home__bullets {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  align-self: stretch;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.92rem;
}

.home__bullets li {
  position: relative;
  padding-left: 1.4em;
  color: var(--ink);
}

.home__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}

.home__small-note {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 0 0 var(--space-4);
}

.home__note {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin: var(--space-2) 0 0;
}

/* AJOUT : petite transition éditoriale reliant le mini-test au livre, avant la couverture. */
.home__book-intro {
  width: 100%;
  max-width: 440px;
  /* Pas de margin-top ici : l'espacement vient uniquement du gap de
     .screen--home, pour éviter un double espacement avec le bloc du dessus. */
  margin: 0 auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  text-align: center;
}

.home__book-intro-line {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}

.home__book-intro-line:last-child {
  margin-bottom: 0;
  color: var(--ink);
}

/* ---------- TRANSITION ÉDITORIALE VERS L'E-BOOK (accueil) ---------- */

.ebook-transition {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

.ebook-transition__cover {
  width: 110px;
  border-radius: 3px;
  transform: rotate(-5deg);
  box-shadow: 0 16px 28px rgba(33, 29, 26, 0.2), 0 2px 6px rgba(33, 29, 26, 0.1);
  margin-bottom: var(--space-1);
}

/* ---------- BOUTONS ---------- */

.btn {
  /* Certains .btn sont des <button>, d'autres des <a> (CTA e-book) : les <button>
     rendent déjà en inline-block par défaut, donc ceci ne change rien pour eux ;
     ça aligne juste les <a>.btn sur le même box-model. */
  display: inline-block;
  /* Le wrapper de page bloque déjà le pan horizontal (touch-action:pan-y) ;
     ici, sur l'élément interactif lui-même, "manipulation" retire le délai/
     l'ambiguïté de double-tap-zoom pour une réponse tactile directe. */
  touch-action: manipulation;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.92rem;
  border: none;
  border-radius: 999px;
  padding: 15px 28px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, background 0.12s ease;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: var(--terracotta);
  color: var(--paper);
  box-shadow: 0 6px 16px rgba(164, 90, 65, 0.32);
}

/* :hover réservé aux appareils avec un vrai pointeur (souris) : sur iOS Safari,
   un :hover défini sans condition peut absorber le premier tap (l'appareil
   "prévisualise" l'état hover au 1er tap, puis n'exécute le clic qu'au 2e). */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover:not(:disabled) {
    background: var(--terracotta-dark);
    box-shadow: 0 8px 20px rgba(164, 90, 65, 0.4);
  }
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn--secondary:hover:not(:disabled) {
    border-color: var(--terracotta);
    color: var(--terracotta-dark);
  }
}

.btn--cta {
  width: 100%;
  padding: 19px 28px;
  font-size: 1.02rem;
}

/* ---------- PROGRESSION ---------- */

.progress {
  margin-bottom: var(--space-5);
}

.progress__bar {
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.progress__fill {
  height: 100%;
  background: var(--terracotta);
  width: 0%;
  transition: width 0.25s ease;
}

.progress__label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin: 0;
}

/* ---------- QUESTION ---------- */

.question {
  /* Pas de flex:1 : le bloc se replie sur son propre contenu au lieu de
     s'étirer et de repousser Précédent/Suivant vers le bas de l'écran.
     Même largeur que les réponses : pas de max-width propre ici, le bloc
     utilise toute la largeur disponible du container .screen (voir plus bas). */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0;
}

.question__prompt {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink);
  /* Respire sur (presque) toute la largeur du bloc, comme les réponses, au
     lieu d'une colonne étroite forçant des retours à la ligne prématurés. */
  max-width: 46ch;
  text-align: center;
  margin: 0 auto;
}

.answers {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
}

.answer {
  text-align: left;
  font-family: var(--font-editorial);
  font-size: 0.98rem;
  line-height: 1.5;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  touch-action: manipulation;
  color: var(--ink);
  width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.answers__edit-link {
  align-self: flex-start;
  background: none;
  border: none;
  padding: var(--space-1) 0;
  margin-top: calc(var(--space-1) * -1);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .answers__edit-link:hover {
    color: var(--terracotta-dark);
  }
}

.answer:active {
  transform: scale(0.99);
}

@media (hover: hover) and (pointer: fine) {
  .answer:hover {
    border-color: var(--terracotta);
  }
}

.answer--selected {
  border-color: var(--terracotta);
  border-width: 1.5px;
  background: var(--terracotta-soft);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  /* Seul espaceur entre la réponse retenue et la navigation : ~16px, pas de
     cumul margin+padding qui repoussait Précédent/Suivant trop bas. */
  margin-top: var(--space-3);
  width: 100%;
}

.nav .btn {
  flex: 0 0 auto;
  padding: 13px 24px;
  font-size: 0.85rem;
  min-width: 118px;
  text-align: center;
}

/* ---------- RÉSULTAT ---------- */

.result {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-top: var(--space-1);
  /* Empêche le "scroll anchoring" du navigateur : sans ça, fermer un accordéon
     tout en en ouvrant un autre dans le même rendu peut faire sauter la page
     vers le bas, le navigateur recalculant mal quel élément ancrer le scroll. */
  overflow-anchor: none;
}

.result__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: var(--space-3) 0 var(--space-2);
  color: var(--ink);
}

.result__title--level {
  /* NIVEAU 3 : résultat principal (niveau global, titre duo/aucun réflexe net). */
  margin-top: 0;
  font-size: clamp(1.25rem, 4.5vw, 1.875rem);
  color: var(--terracotta-dark);
}

.result__title--reflex {
  /* NIVEAU 4 : nom du réflexe seul (ex. SURPRÉPARÉ), sous son petit label. */
  margin-top: var(--space-1);
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  color: var(--ink);
}

.result__super-title {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin: var(--space-5) 0 var(--space-2);
}

.result__body {
  font-family: var(--font-editorial);
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.65;
  /* Espacement resserré : plusieurs phrases courtes qui se suivent doivent se
     lire comme un texte qui coule, pas comme des blocs séparés par de grands vides. */
  margin: 0 0 var(--space-2);
}

.result__question {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  margin: var(--space-2) 0 var(--space-4);
}

.result__reminder {
  font-family: var(--font-editorial);
  font-style: italic;
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.subsection-heading {
  /* Style unique pour tous les petits labels internes (QUESTION, À UTILISER
     PLEINEMENT, À CALIBRER, LA LIMITE AVANT DE COMMENCER, MINI-DÉFI, MA FORCE,
     MON POINT DE BASCULE, le label au-dessus du nom du réflexe...). */
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terracotta);
  margin: var(--space-4) 0 var(--space-2);
}

.duo-names {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
  color: var(--terracotta-dark);
}

.result__steps,
.result__bullets-inline {
  font-family: var(--font-editorial);
  margin: 0 0 var(--space-3);
  padding-left: 1.25em;
  color: var(--ink-muted);
  line-height: 1.6;
}

.result__steps li,
.result__bullets-inline li {
  margin-bottom: var(--space-1);
}

/* ---------- ACCORDÉONS — légers, pas de grosses cartes ---------- */

.accordion {
  border: none;
  border-bottom: 1px solid var(--divider-strong);
}

.accordion:first-child {
  border-top: 1px solid var(--divider-strong);
}

.accordion__heading {
  margin: 0;
}

.accordion__trigger {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  text-align: left;
  font-family: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  padding: var(--space-4) var(--space-1);
  color: var(--ink);
}

.accordion__title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta);
  flex: 1 1 calc(100% - 40px);
  order: 1;
}

.accordion__teaser {
  flex: 1 1 100%;
  order: 3;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.94rem, 2.3vw, 1.1rem);
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

.accordion__teaser::before {
  content: "« ";
}

.accordion__teaser::after {
  content: " »";
}

.accordion--open .accordion__teaser {
  display: none;
}

.accordion__arrow {
  order: 2;
  margin-left: auto;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  position: relative;
}

.accordion__arrow::before {
  content: "";
  position: absolute;
  top: 35%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--terracotta);
  border-bottom: 2px solid var(--terracotta);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.2s ease;
}

.accordion--open .accordion__arrow::before {
  transform: translate(-50%, -20%) rotate(-135deg);
}

.accordion__panel {
  animation: accordion-reveal 0.2s ease;
}

@keyframes accordion-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.accordion__content {
  padding: var(--space-2) 0 var(--space-6) var(--space-3);
  margin-left: var(--space-1);
  border-left: 1.5px solid var(--terracotta);
}

/* ---------- BLOC E-MAIL ---------- */

.email-block {
  /* Pas de border-top ici : le 3e accordéon a déjà sa propre ligne de
     séparation (border-bottom) juste au-dessus — en ajouter une seconde ici
     créait un double trait très proche, visuellement inutile. */
  padding: var(--space-4) 0 0;
}

.email-block__title {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  font-size: 1.15rem;
}

.email-block__text {
  font-family: var(--font-editorial);
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
}

.email-block__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.email-block__input {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
}

.email-block__input:focus {
  outline: none;
  border-color: var(--terracotta);
}

.email-block__spam-note {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--ink-muted);
  text-align: center;
  margin: var(--space-1) 0 0;
}

.email-block__status {
  font-family: var(--font-ui);
  min-height: 1.3em;
  font-size: 0.85rem;
  margin: 0 0 var(--space-3);
}

.email-block__status--pending {
  color: var(--ink-muted);
}

.email-block__status--success {
  color: #3d6b3f;
  font-weight: 600;
}

.email-block__status--error {
  color: var(--terracotta-dark);
  font-weight: 600;
}

.email-block__checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.email-block__checkbox-row input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: var(--terracotta);
}

.email-block__small-note {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--ink-muted);
  margin: 0;
}

/* ---------- E-BOOK — bloc résultat (léger, éditorial) ---------- */

.ebook {
  border-top: 1px solid var(--border);
  padding: var(--space-5) 0 var(--space-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.ebook__cover {
  width: 100px;
  border-radius: 3px;
  transform: rotate(-5deg);
  box-shadow: 0 14px 26px rgba(33, 29, 26, 0.2), 0 2px 6px rgba(33, 29, 26, 0.1);
  margin-bottom: var(--space-3);
}

.ebook__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  margin: 0;
  color: var(--ink);
}

.ebook__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 36ch;
  margin: 0 0 var(--space-3);
}

.ebook__paragraph {
  font-family: var(--font-editorial);
  color: var(--ink-muted);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

/* ---------- CTA E-BOOK INTERMÉDIAIRE (entre les accordéons 1 et 2) ---------- */

.ebook-mid {
  /* Fond clair et distinct du terracotta du bouton/CTA : c'est ce contraste,
     pas une couleur de bouton, qui permet à la couverture de rester lisible. */
  background: var(--ebook-mid-bg);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-1) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}

/* Couverture visible en entier, sans cadre blanc : légère inclinaison + ombre douce uniquement. */
.ebook-mid__cover {
  width: 56px;
  border-radius: 3px;
  display: block;
  flex: 0 0 auto;
  transform: rotate(-5deg);
  box-shadow: 0 8px 16px rgba(33, 29, 26, 0.18), 0 2px 5px rgba(33, 29, 26, 0.1);
}

.ebook-mid__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.ebook-mid__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ebook-mid__paragraph {
  font-family: var(--font-editorial);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}

.ebook-mid__btn {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.85rem;
  background: var(--terracotta);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(164, 90, 65, 0.32);
  transition: transform 0.12s ease, background 0.12s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ebook-mid__btn:hover {
    background: var(--terracotta-dark);
  }
}

.ebook-mid__btn:active {
  transform: scale(0.97);
}

@media (min-width: 640px) {
  .ebook-mid {
    flex-direction: row;
    text-align: left;
  }

  .ebook-mid__content {
    align-items: flex-start;
  }

  /* Le bouton se centre dans toute la largeur utile du bloc (colonne texte
     incluse), au lieu de rester collé à gauche comme le texte au-dessus. */
  .ebook-mid__btn {
    align-self: center;
    margin-top: var(--space-1);
  }
}

/* ---------- EN-TÊTE LÉGER DE LA PAGE RÉSULTAT (avant le 1er accordéon) ---------- */

.result__header {
  text-align: center;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.result__header-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--terracotta);
  margin: 0 0 var(--space-1);
}

.result__header-title {
  font-family: var(--font-display);
  font-weight: 600;
  /* NIVEAU 1 : ~30-36px desktop, nettement plus petit mobile. */
  font-size: clamp(1.6rem, 5.5vw, 2.25rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.result__header-intro {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-muted);
  /* Utilise (presque) toute la largeur utile du container résultat (jusqu'à
     820px, comme .screen) plutôt qu'une colonne étroite qui revient trop
     vite à la ligne. */
  max-width: 720px;
  width: 100%;
  margin: 0 auto var(--space-2);
}

.result__header-disclaimer {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--ink-muted);
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- CTA FLOTTANT — petit pill discret (masqué sur l'accueil uniquement) ---------- */

.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 14px;
  touch-action: pan-y;
  /* Sur iPhone à encoche/barre de home, évite que le pill ne soit trop
     proche de la zone de geste du bas (safe-area). Navigateurs sans
     support de env() gardent simplement le bottom:14px ci-dessus. */
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 20;
  max-width: calc(100vw - 24px);
  transform: translate(-50%, 0);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.sticky-cta--hidden {
  transform: translate(-50%, 140%);
  opacity: 0;
  pointer-events: none;
}

.sticky-cta__btn {
  display: block;
  touch-action: manipulation;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.76rem;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--terracotta);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  box-shadow: 0 6px 14px rgba(164, 90, 65, 0.4);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease;
}

.sticky-cta__btn:active {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  .sticky-cta__btn:hover {
    background: var(--terracotta-dark);
  }
}

/* ---------- RESPONSIVE (tablette / desktop) ---------- */

@media (min-width: 640px) {
  .screen {
    padding: var(--space-6) var(--space-5);
  }

  .btn--cta {
    width: auto;
    padding: 19px 40px;
  }
}

@media (min-width: 900px) {
  .screen {
    /* Un peu plus large pour que le bloc question/réponses respire vraiment ;
       n'affecte pas l'accueil, dont les colonnes internes (.home__content,
       .ebook-transition) ont leur propre max-width indépendant, plus étroit. */
    max-width: 820px;
  }
}