/* Styles du quiz, repris du funnel de référence (references/quiz.html). */
/* ============================================================
   LE TEST DU DÉCLIC. Quiz funnel
   Palette alignée sur la page de vente : turquoise, encre, crème.
   ============================================================ */
:root{
  --ink-900:#060e19;
  --ink-800:#0a1626;
  --ink-600:#233246;
  --ink-400:#5b6b7f;
  --ink-300:#8494a5;

  --paper:#fbfaf7;
  --card:#ffffff;
  --line:#e6e2d9;
  --line-soft:#f0ece3;

  --teal-700:#1f6b6a;
  --teal-600:#237e7d;
  --teal-500:#329d9c;
  --teal-100:#e4f2f1;
  --teal-050:#f1f9f8;

  --marker:#ffe86b;
  --warn:#c4533f;
  --warn-soft:#fbeceA;

  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --shadow:0 1px 2px rgba(10,22,38,.05), 0 8px 24px rgba(10,22,38,.06);
  --shadow-lift:0 2px 4px rgba(10,22,38,.06), 0 14px 34px rgba(10,22,38,.10);
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink-800);
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font-family:inherit;font-size:inherit;color:inherit}

/* ---------- Chrome : barre du haut ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(251,250,247,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-soft);
  padding-top:env(safe-area-inset-top);
}
.topbar-in{
  max-width:560px;margin:0 auto;
  height:54px;display:flex;align-items:center;gap:10px;
  padding:0 16px;
}
.back{
  border:0;background:none;padding:6px 8px 6px 0;cursor:pointer;
  color:var(--ink-400);display:flex;align-items:center;gap:4px;
  font-size:15px;border-radius:8px;
}
.back:disabled{opacity:0;pointer-events:none}
.brand{
  flex:1;text-align:center;font-weight:800;letter-spacing:-.02em;
  font-size:16px;color:var(--ink-800);
}
.brand span{color:var(--teal-500)}
.count{
  font-size:13px;color:var(--ink-300);min-width:52px;text-align:right;
  font-variant-numeric:tabular-nums;
}
.count b{color:var(--ink-800);font-weight:700}
.progress{height:3px;background:var(--line-soft);position:relative}
.progress i{
  position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,var(--teal-600),var(--teal-500));
  transition:width .45s cubic-bezier(.4,0,.2,1);
}

/* ---------- Scène ---------- */
.scene{max-width:560px;margin:0 auto;padding:22px 18px 18px}
.topbar[hidden]+.scene{padding-top:30px}
/* 17/10 : la scène prend au moins tout l'écran, pour que le pied de page (mentions) ne soit visible qu'en scrollant, jamais collé sous les questions (demande de Thélio) */
.scene{min-height:100vh;min-height:100dvh}
.screen{animation:in .32s cubic-bezier(.2,.7,.3,1) both}
/* 24/10 (Thélio) : les questions au milieu de l'écran, là où tombe le pouce (on tient le téléphone par le bas, pas par le haut) */
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .screen{animation:none}
  .progress i{transition:none}
}

.eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-600);margin:0 0 10px;
}
h1{font-size:clamp(23px,6.4vw,28px);line-height:1.22;letter-spacing:-.02em;margin:0 0 12px;font-weight:800}
h2{font-size:clamp(20px,5.4vw,24px);line-height:1.26;letter-spacing:-.02em;margin:0 0 10px;font-weight:800}
h3{font-size:17px;line-height:1.3;margin:0 0 8px;font-weight:800}
.sub{color:var(--ink-400);font-size:clamp(15px,4vw,16px);margin:0 0 18px}
.hint{color:var(--ink-300);font-size:14px;margin:-6px 0 16px}
p{margin:0 0 14px}
.mark{background:linear-gradient(transparent 58%, var(--marker) 58%);padding:0 2px}
strong{font-weight:800}

/* ---------- Options ---------- */
.opts{display:flex;flex-direction:column;gap:9px;margin:0 0 18px}
.opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:15px 16px;cursor:pointer;
  transition:border-color .15s, background .15s, transform .08s;
  box-shadow:0 1px 2px rgba(10,22,38,.03);
}
.opt:hover{border-color:var(--teal-500)}
.opt:active{transform:scale(.988)}
.opt .ico{font-size:20px;line-height:1;width:26px;flex:none;text-align:center}
.opt .lab{flex:1;font-size:16px;line-height:1.35}
.opt .tick{
  width:22px;height:22px;flex:none;border-radius:7px;border:1.5px solid var(--line);
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:900;
}
.opt.on{border-color:var(--teal-500);background:var(--teal-050)}
.opt.on .tick{background:var(--teal-500);border-color:var(--teal-500)}
.opt.single .tick{display:none}

/* ---------- Écran d'arrivée : épuré, rien d'autre que le choix ---------- */
.landing{
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 0 0;
  min-height:calc(100vh - 96px);
  min-height:calc(100dvh - 96px);
  justify-content:safe center;   /* safe : jamais de contenu coupé en haut */
}
.landing .logo{width:80px;height:auto;display:block;margin:0 0 12px}
.landing .logo-txt{
  font-size:19px;font-weight:800;letter-spacing:.01em;color:var(--ink-800);margin:0 0 20px;
}
.landing .logo-txt b{color:var(--teal-600)}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--teal-100);color:var(--teal-700);
  border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:700;
  letter-spacing:.01em;margin:0 0 22px;
}
.badge b{font-weight:800}
.ask{font-size:clamp(18px,5vw,22px);line-height:1.3;font-weight:800;letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
.landing .headline{
  font-size:clamp(24px,5.5vw,32px);line-height:1.2;letter-spacing:-.02em;font-weight:800;
  color:var(--ink-900);margin:0 0 12px;text-wrap:balance;
}
/* 23/10 : bandeau d'urgence (A/B quiz_urgence) */
.urg-bar{background:#c4342a;color:#fff;font-weight:800;text-align:center;padding:9px 12px;border-radius:12px;margin:0 0 12px;font-size:14.5px;line-height:1.35;box-shadow:0 4px 14px rgba(196,52,42,.25)}
.urg-bar b{font-variant-numeric:tabular-nums;background:rgba(0,0,0,.22);padding:1px 6px;border-radius:6px;white-space:nowrap;display:inline-block;margin-top:2px}
/* Sophie intro : avatar + nom + rôle + bulle */
.sophie-intro{
  display:flex;align-items:flex-start;gap:14px;
  margin:14px 0 20px;padding:14px 16px;
  background:var(--teal-050);border:1px solid var(--teal-100);border-radius:14px;
}
.sophie-ava{
  flex:none;width:58px;height:58px;border-radius:50%;object-fit:cover;
  border:2px solid #fff;box-shadow:0 3px 10px rgba(6,14,25,.12);
}
.sophie-body{flex:1;min-width:0}
.sophie-name{font-size:15px;font-weight:800;color:var(--ink-900);letter-spacing:-.01em;line-height:1.2}
.sophie-role{
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-400);
  margin-top:2px;line-height:1.35;
}
.sophie-role b{color:var(--teal-700);font-weight:800}
.sophie-bubble{
  font-size:14px;line-height:1.5;color:var(--ink-800);
  margin-top:8px;padding-top:8px;border-top:1px dashed var(--teal-100);
}
/* Trustpilot mini badge */
.satisf{margin:6px auto 0;text-align:center;font-size:14px;color:var(--ink-600,#233246)}
.satisf b{color:var(--ink-900,#060e19);font-weight:800}
.satisf small{display:block;font-size:10.5px;color:var(--ink-400,#5b6b7f);margin-top:2px}
.trustpilot{
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  margin:16px 0 6px;padding:8px 14px;background:#f6fbf9;border-radius:10px;
  font-size:13px;color:var(--ink-600);letter-spacing:.01em;
}
.trustpilot b{color:var(--ink-900);font-weight:800}
.trustpilot .tp-stars{
  letter-spacing:2px;font-size:15px;color:#00b67a;line-height:1;
}
.landing .subheadline{
  font-size:clamp(15px,3.5vw,16.5px);line-height:1.5;color:var(--ink-400);
  margin:0 0 22px;text-wrap:pretty;
}
.landing h2.ask{font-size:clamp(17px,4vw,19px);color:var(--ink-600);font-weight:700;margin:0 0 14px}
.landing .picks{width:100%}
.mini{color:var(--ink-300);font-size:11.5px;line-height:1.5;margin:22px 0 0;max-width:400px}
.mini a{color:var(--ink-300)}
.mini.meta{margin-top:10px;opacity:.85}

/* ---------- Compacter l'intro sur mobile pour remonter le CTA above-fold ---------- */
@media (max-width:520px){
  .landing .logo{width:64px;margin:0 0 10px}
  .badge{padding:5px 12px;font-size:12.5px;margin:0 0 12px}
  .sophie-intro{gap:11px;padding:10px 12px;margin:8px 0 12px}
  .sophie-ava{width:44px;height:44px}
  .sophie-name{font-size:14px}
  .sophie-role{font-size:11px}
  .sophie-bubble{font-size:12.5px;margin-top:6px;padding-top:6px}
  .landing .headline{font-size:20px;margin:0 0 8px;line-height:1.22}
  .landing .subheadline{font-size:14px;margin:0 0 12px;line-height:1.4}
  .landing h2.ask{font-size:15.5px;margin:0 0 10px}
}

/* ---------- Cartes avec photo (écran d'entrée) ---------- */
.picks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
.pick{
  display:flex;flex-direction:column;width:100%;padding:0;cursor:pointer;overflow:hidden;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(10,22,38,.04);
  transition:border-color .15s, box-shadow .2s, transform .08s;
}
.pick:hover{border-color:var(--teal-500);box-shadow:var(--shadow-lift)}
.pick:active{transform:scale(.99)}
.pick.on{border-color:var(--teal-500);box-shadow:var(--shadow-lift)}
.pick figure{
  margin:0;aspect-ratio:1/1;width:100%;overflow:hidden;
  background:linear-gradient(160deg, var(--teal-050), var(--teal-100));
  display:grid;place-items:end center;
}
.pick figure img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block}
.pick .lab{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:13px 14px;font-size:16.5px;font-weight:800;text-align:left;
}
.pick .lab i{font-style:normal;color:var(--teal-500);font-size:18px;line-height:1}
/* Si la photo manque, la carte reste utilisable telle quelle. */
.pick.noimg figure{display:none}
.pick.noimg .lab{padding:20px 16px;font-size:17px}

/* ---------- Blocs de contenu ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow);margin:0 0 16px;
}
.card.tint{background:var(--teal-050);border-color:var(--teal-100)}
.card.warn{background:#fdf6f4;border-color:#f0dcd6}
.quote{
  border-left:3px solid var(--teal-500);padding:2px 0 2px 14px;
  color:var(--ink-600);font-size:16px;margin:0 0 14px;
}
.stat{
  display:flex;align-items:baseline;gap:10px;margin:0 0 6px;flex-wrap:wrap;
}
.stat b{font-size:clamp(30px,9vw,38px);font-weight:800;letter-spacing:-.03em;color:var(--teal-600);font-variant-numeric:tabular-nums}
.stat span{font-size:15px;color:var(--ink-400)}
.rows{display:flex;flex-direction:column;gap:0;margin:14px 0 0}
.row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line-soft);font-size:15.5px}
.row:first-child{border-top:0}
.row b{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{
  display:inline-flex;align-items:center;gap:6px;background:var(--teal-100);color:var(--teal-700);
  border-radius:999px;padding:5px 12px;font-size:13.5px;font-weight:700;margin:0 0 12px;
}

/* ---------- Champs ---------- */
.field{margin:0 0 14px}
.field label{display:block;font-size:14.5px;font-weight:700;margin:0 0 6px;color:var(--ink-600)}
.inp{
  position:relative;display:flex;align-items:center;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-md);
  transition:border-color .15s;
}
.inp:focus-within{border-color:var(--teal-500)}
.inp input{
  flex:1;border:0;background:none;outline:0;padding:15px 16px;font-size:17px;
  color:var(--ink-800);width:100%;border-radius:var(--r-md);
}
.inp .unit{padding:0 16px;color:var(--ink-300);font-size:15px;flex:none}
.err{color:var(--warn);font-size:14px;margin:6px 0 0;display:none}
.err.on{display:block}

/* Suggestions de domaine email (gmail.com, hotmail.fr, etc.) pendant la frappe */
.email-sugg{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 8px 24px rgba(6,14,25,.12);overflow:hidden;display:none;
}
.email-sugg.on{display:block}
.email-sugg button{
  display:block;width:100%;text-align:left;padding:12px 16px;border:0;background:none;
  font-size:15.5px;color:var(--ink-800);cursor:pointer;font-family:inherit;
}
.email-sugg button:hover,.email-sugg button:active{background:var(--card)}
.email-sugg button b{color:var(--teal-600)}

/* ---------- Preview locké du résultat (avant email) ---------- */
.preview-lock{
  position:relative;margin:8px 0 22px;border-radius:14px;overflow:hidden;
  border:1px solid var(--teal-100,#e4f2f1);
  background:linear-gradient(180deg,#fff,var(--teal-050,#f1f9f8));
  box-shadow:0 4px 18px rgba(6,14,25,.08);
}
.preview-lock-inner{
  padding:20px 22px 24px;
  filter:blur(4.5px) saturate(0.85);
  user-select:none;pointer-events:none;
  min-height:230px;
}
.preview-score-row{
  display:flex;align-items:baseline;gap:14px;margin:0 0 14px;
}
.preview-score-num{
  font-size:48px;font-weight:900;color:var(--teal-600,#237e7d);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.preview-score-lbl{
  font-size:14px;color:var(--ink-400,#5b6b7f);line-height:1.3;
}
.preview-score-lbl b{color:var(--ink-800,#0a1626);font-weight:700;display:block;font-size:15px}
.preview-profil{
  display:inline-block;padding:5px 12px;border-radius:99px;
  background:var(--teal-500,#329d9c);color:#fff;font-size:13px;font-weight:700;
  margin:0 0 12px;letter-spacing:.02em;
}
.preview-lock-inner ul{list-style:none;padding:0;margin:0;}
.preview-lock-inner li{
  padding:8px 0 8px 22px;position:relative;font-size:15px;color:var(--ink-800,#0a1626);
  line-height:1.35;
}
.preview-lock-inner li::before{
  content:"✓";position:absolute;left:0;top:8px;
  color:var(--teal-500,#329d9c);font-weight:800;
}
.preview-lock-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0.82) 45%,rgba(255,255,255,0.92) 100%);
  padding:20px 24px;text-align:center;
}
.preview-lock-icon{
  font-size:28px;line-height:1;margin:0 0 8px;
}
.preview-lock-title{
  font-size:17px;font-weight:800;color:var(--ink-900,#060e19);
  letter-spacing:-.01em;margin:0 0 4px;
}
.preview-lock-sub{
  font-size:13.5px;color:var(--ink-600,#233246);
  line-height:1.45;max-width:280px;
}
.preview-lock-sub b{color:var(--teal-700,#1f6b6a);font-weight:700}
.legal{color:var(--ink-300);font-size:12.5px;line-height:1.45;margin:14px 0 0}
.legal a{color:var(--ink-400)}
.shield{display:flex;gap:10px;align-items:flex-start;color:var(--ink-600);font-size:13.5px;line-height:1.5;margin:14px 0 0;padding:12px 14px;background:var(--teal-050,#f1f9f8);border:1px solid var(--teal-100,#e4f2f1);border-radius:10px}
.shield b{color:var(--teal-700,#1f6b6a);font-weight:700}

/* ---------- CTA ---------- */
/* 17/10 : sticky au lieu de fixed. Le bouton reste collé en bas pendant qu'on scrolle,
   mais en fin de page il se pose à sa place, et le pied de page (mentions) passe EN DESSOUS du bouton et de « Ton résultat s'affiche… ». */
.dock{
  position:sticky;left:0;right:0;bottom:0;z-index:30;
  background:linear-gradient(to top, var(--paper) 62%, rgba(251,250,247,0));
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
}
.dock-in{max-width:560px;margin:0 auto}
.cta{
  display:block;width:100%;border:0;cursor:pointer;
  background:var(--teal-600);color:#fff;font-weight:800;font-size:17.5px;
  padding:17px 20px;border-radius:var(--r-md);
  box-shadow:0 6px 18px rgba(35,126,125,.28);
  transition:transform .08s, background .15s, opacity .15s;
}
.cta:hover{background:var(--teal-700)}
.cta:active{transform:scale(.99)}
.cta:disabled{background:#cfd6dc;box-shadow:none;cursor:not-allowed}
.cta.big{
  font-size:18px;padding:19px 20px;
  animation: ctaPulse 1.6s cubic-bezier(.4,0,.6,1) infinite;
}
.cta.big:hover, .cta.big:active{animation-play-state:paused}
@keyframes ctaPulse{
  0%, 100% {
    transform:scale(1);
    box-shadow:0 6px 18px rgba(35,126,125,.28), 0 0 0 0 rgba(50,157,156,.55);
  }
  50% {
    transform:scale(1.028);
    box-shadow:0 10px 28px rgba(35,126,125,.36), 0 0 0 14px rgba(50,157,156,0);
  }
}
.cta-note{text-align:center;color:var(--ink-300);font-size:13px;margin:10px 0 0}
.ghost{
  display:block;width:100%;background:none;border:0;cursor:pointer;
  color:var(--ink-300);font-size:14.5px;padding:12px;margin:2px 0 0;text-decoration:underline;
}

/* ---------- Écran d'analyse ---------- */
.loader{text-align:center;padding:30px 0 10px}
.dial{width:132px;height:132px;margin:0 auto 22px;position:relative}
.dial svg{transform:rotate(-90deg)}
.dial .val{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:29px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.steps{max-width:330px;margin:0 auto;text-align:left}
.step{display:flex;gap:11px;align-items:center;padding:9px 0;color:var(--ink-300);font-size:15.5px;transition:color .3s}
.step .dot{
  width:20px;height:20px;flex:none;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;font-size:11px;color:#fff;font-weight:900;
}
.step.done{color:var(--ink-800)}
.step.done .dot{background:var(--teal-500);border-color:var(--teal-500)}
.step.live .dot{border-color:var(--teal-500);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}

/* ---------- Pyramide du résultat ---------- */
.pyr{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0 4px}
.lvl{
  position:relative;border-radius:8px;color:#fff;font-weight:800;font-size:clamp(13px,3.6vw,14.5px);
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 13px;
  box-shadow:0 2px 8px rgba(10,22,38,.10);
}
.lvl small{font-weight:600;opacity:.85;font-size:12.5px;display:block;margin-top:1px}
.lvl .pct{font-size:16px;font-variant-numeric:tabular-nums;margin-left:12px;white-space:nowrap;text-align:right}
.lvl .pct small{display:block;font-size:11.5px;font-weight:600;opacity:.85;margin-top:1px}
.lvl.l1{width:100%;background:var(--ink-800)}
.lvl.l2{width:88%;background:var(--teal-700)}
.lvl.l3{width:76%;background:var(--teal-500)}
.lvl.hot{outline:3px solid var(--marker);outline-offset:2px}
.pyr-cap{text-align:center;color:var(--ink-300);font-size:12.5px;margin:10px 0 0}

/* ---------- Graphique ---------- */
.chart{width:100%;height:auto;aspect-ratio:320/190;display:block;margin:6px 0 4px}
.legend{display:flex;gap:16px;justify-content:center;font-size:13px;color:var(--ink-400);margin:6px 0 0;flex-wrap:wrap}
.legend i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* ---------- Bandeau de score ---------- */
.scorecard{padding:18px}
.sc-row{display:flex;align-items:center;gap:16px}
.sc-big{
  flex:none;font-size:44px;font-weight:800;color:var(--teal-600);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;
  display:flex;align-items:baseline;gap:1px;
}
.sc-big small{font-size:20px;font-weight:800;color:var(--teal-500)}
.sc-txt{font-size:15px;line-height:1.4;color:var(--ink-800)}
.sc-txt b{color:var(--teal-700)}
.dopa{
  margin:18px 0 24px;padding:20px 20px 16px;text-align:center;
  background:linear-gradient(160deg,var(--teal-050),#fff);
  border:1.5px solid var(--teal-500);border-radius:14px;
  box-shadow:0 6px 24px rgba(50,157,156,.14);
  position:relative;
}
.dopa-kicker{
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-500);margin:0 0 8px;
}
.dopa-body{
  font-size:16px;color:var(--ink-800);line-height:1.5;margin:0 0 12px;
}
.dopa-body b{color:var(--teal-700);font-weight:800}
.dopa-badge{
  display:inline-block;padding:6px 14px;border-radius:99px;
  background:var(--teal-500);color:#fff;
  font-size:12.5px;font-weight:800;letter-spacing:.02em;
}
.auto-redirect{
  text-align:center;font-size:13px;color:var(--ink-400);
  margin:10px 0 4px;line-height:1.4;
}
.auto-redirect b{color:var(--teal-600);font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- Bloc projection ("le rêve") ---------- */
.card.dream{
  background:#0a1626;
  background:linear-gradient(160deg, #0a1626 0%, #13293f 100%);
  border-color:#1b3550;color:#fff;position:relative;overflow:hidden;
}
.card.dream::before{
  content:"";position:absolute;left:-20%;right:-20%;top:-30%;height:80%;
  background:radial-gradient(ellipse at center, rgba(50,157,156,.32), transparent 70%);
  pointer-events:none;
}
.card.dream > *{position:relative;z-index:1}
.card.dream h2, .card.dream p{color:#fff}
.card.dream .mark{background:#d0892c;color:#fff;padding:2px 8px;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dream-tag{
  display:inline-block;background:rgba(240,194,115,.18);color:#f0c273;
  border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;position:relative;z-index:1;
}
.timeline{display:flex;flex-direction:column;gap:0;margin:6px 0 0;position:relative;z-index:1}
.tl-item{
  display:flex;gap:14px;padding:11px 0;border-top:1px solid rgba(255,255,255,.09);
  font-size:14.5px;line-height:1.4;
}
.tl-item:first-child{border-top:0}
.tl-item b{
  flex:none;width:74px;font-weight:800;color:#f0c273;font-size:15px;
  font-variant-numeric:tabular-nums;
}
.tl-item span{color:rgba(255,255,255,.86)}
.tl-item.done b{color:#7ce0dd}
.tl-item.done span{color:#fff;font-weight:600}

.dream-fact{
  display:flex;align-items:center;gap:14px;
  background:rgba(240,194,115,.10);border:1px solid rgba(240,194,115,.28);
  border-radius:10px;padding:12px 14px;margin:0 0 14px;position:relative;z-index:1;
}
.df-num{
  flex:none;font-size:32px;font-weight:800;color:#f0c273;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.df-txt{font-size:14.5px;line-height:1.45;color:#fff}
.df-txt b{color:#f0c273;font-weight:800}

.ghost.tiny{font-size:12.5px;padding:8px;margin-top:6px}

/* ---------- Très petits écrans (iPhone SE et compagnie) ---------- */
@media (max-width:360px){
  body{font-size:16px}
  .scene{padding-left:14px;padding-right:14px}
  .landing .logo{width:64px;margin-bottom:10px}
  .badge{margin-bottom:18px;font-size:13px;padding:6px 12px}
  .picks{gap:9px}
  .pick .lab{padding:11px 11px;font-size:15px}
  .opt{padding:13px 13px;gap:10px}
  .opt .lab{font-size:15px}
  .card{padding:16px}
  .lvl{padding:11px}
  .lvl small{font-size:11.5px}
  .cta{font-size:16.5px;padding:16px 14px}
  .cta.big{font-size:17px;padding:17px 14px}
}
/* ---------- Écrans larges : la colonne reste une colonne ---------- */
@media (min-width:640px){
  .landing .logo{width:88px}
  .pick figure img{object-position:center 10%}
}

/* ---------- Divers ---------- */
.faces{display:flex;align-items:center;gap:-8px;margin:0 0 12px}
.faces i{
  width:34px;height:34px;border-radius:50%;border:2px solid var(--card);margin-right:-9px;
  display:grid;place-items:center;font-size:15px;font-style:normal;background:var(--teal-100);
}
.foot{max-width:560px;margin:0 auto;padding:4px 18px calc(24px + env(safe-area-inset-bottom));color:var(--ink-300);font-size:12px;line-height:1.5;text-align:center}
.foot a{color:var(--ink-300)}
.foot .disc{display:block;margin-top:8px;font-size:11px;line-height:1.45}
.hide{display:none !important}

.illus{display:block;width:100%;max-width:520px;margin:-8px auto 20px;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:#0e1620}
.illus[src*="illus-cerveau"]{object-position:50% 25%}

/* ---------- Moment de bascule : flow signal → 3 s → cigarette ---------- */
.bascule{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:6px;align-items:stretch;margin:14px 0 14px}
.bs-step{background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;gap:4px;justify-content:center}
.bs-step.hot{background:var(--teal-500);border-color:var(--teal-500);color:#fff;box-shadow:0 6px 20px rgba(50,157,156,.28)}
.bs-ico{font-size:22px;line-height:1}
.bs-lab{font-size:13.5px;font-weight:700;color:var(--ink-800);letter-spacing:-.01em;line-height:1.2}
.bs-step.hot .bs-lab{color:#fff}
.bs-sub{font-size:11.5px;color:var(--ink-400);line-height:1.3}
.bs-step.hot .bs-sub{color:rgba(255,255,255,.92)}
.bs-arrow{display:flex;align-items:center;justify-content:center;color:var(--ink-300);font-size:18px;font-weight:400}
@media (max-width:520px){
  .bascule{grid-template-columns:1fr;gap:6px}
  .bs-arrow{transform:rotate(90deg);padding:2px 0;height:22px}
}

/* ---------- Espérance de vie : chiffre héros + timeline ---------- */
.esp-hero{
  display:flex;align-items:baseline;gap:14px;margin:12px 0 4px;
  padding:14px 16px;background:var(--teal-050);border:1px solid var(--teal-100);
  border-radius:12px;
}
.esp-plus{font-size:44px;font-weight:800;color:var(--teal-600);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;flex:none}
.esp-unit{font-size:14.5px;color:var(--ink-800);font-weight:600;line-height:1.35}
.esp-tl{margin:18px 0 0;display:flex;flex-direction:column;gap:16px}
.esp-tl-row{display:flex;flex-direction:column;gap:6px}
.esp-tl-lab{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink-800)}
.esp-tl-lab.bad{color:#a63e2a}
.esp-tl-lab.good{color:var(--teal-700)}
.esp-tl-bar{
  position:relative;height:22px;background:var(--line-soft);
  border-radius:6px;overflow:visible;margin-top:2px;
}
.esp-tl-fill{position:absolute;top:0;bottom:0;left:0;border-radius:6px 0 0 6px;transition:width 1.3s cubic-bezier(.2,.7,.3,1)}
.esp-tl-fill.bad{background:linear-gradient(90deg,#c4533f,#e67659);border-radius:6px}
.esp-tl-fill.good{background:linear-gradient(90deg,var(--teal-600),var(--teal-500))}
.esp-tl-bonus{
  position:absolute;top:0;bottom:0;
  background:repeating-linear-gradient(45deg,var(--teal-500) 0 6px,var(--teal-600) 6px 12px);
  border-radius:0 6px 6px 0;transition:width 1.3s cubic-bezier(.2,.7,.3,1) .35s, left 1.3s cubic-bezier(.2,.7,.3,1) .35s;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.esp-tl-end{
  position:absolute;top:-6px;transform:translateX(-50%);
  background:var(--card);padding:2px 6px;border-radius:4px;
  font-size:11px;font-weight:800;letter-spacing:-.01em;line-height:1.5;
  border:1px solid var(--line);white-space:nowrap;
  transition:left 1.3s cubic-bezier(.2,.7,.3,1);
}
.esp-tl-end.bad{color:#c4533f;border-color:#f0dcd6}
.esp-tl-end.good{color:var(--teal-700);border-color:var(--teal-100);top:-6px}
.esp-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-300);margin-top:6px;padding:0 2px}
.esp-note{font-size:13px;color:var(--ink-600);margin:14px 0 0;line-height:1.5}
.esp-note b{color:var(--teal-700)}
.esp-src{font-size:11px;color:var(--ink-300);margin:6px 0 0;text-align:right;font-style:italic}

/* ---------- Courbe : chances de réussir sur 21 jours ---------- */
.courbe-wrap{margin:14px 0 4px}
.courbe{width:100%;height:auto;display:block;overflow:visible}
.courbe-endpoints{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.courbe-end{padding:10px 12px;border-radius:10px;border:1.5px solid;text-align:center}
.courbe-end.bad{background:#fdf6f4;border-color:#f0dcd6}
.courbe-end.good{background:var(--teal-050);border-color:var(--teal-100)}
.courbe-end-head{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
.courbe-end.bad .courbe-end-head{color:#a63e2a}
.courbe-end.good .courbe-end-head{color:var(--teal-700)}
.courbe-end-val{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:2px 0 0;font-variant-numeric:tabular-nums}
.courbe-end.bad .courbe-end-val{color:#c4533f}
.courbe-end.good .courbe-end-val{color:var(--teal-600)}
.courbe-end-sub{font-size:12px;color:var(--ink-400);margin-top:2px;line-height:1.25}
.courbe-note{font-size:12.5px;color:var(--ink-600);margin:12px 0 0;line-height:1.5}
.courbe-note b{color:var(--ink-800)}
@media (max-width:520px){
  .courbe-endpoints{grid-template-columns:1fr}
  .courbe-end-val{font-size:24px}
}

/* ---- Design « rb » (version retenue du test A/B) ---- */
/* 24/10 : variante « institutionnelle » (inspiration medicare.gov) : blanc, vert profond, bandeau marine, photos de famille. Rien n'indique un organisme officiel ou médical. */
body.rb{
  --paper:#ffffff;--card:#ffffff;--line:#d9e0e6;--line-soft:#edf1f4;
  --ink-900:#1d2b3a;--ink-800:#26323f;--ink-600:#3b4856;--ink-400:#5d6b79;--ink-300:#7d8a97;
  --teal-700:#0f5247;--teal-600:#146a5d;--teal-500:#1b7d6e;--teal-100:#dcefeb;--teal-050:#f2f8f6;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:#fff;
}
.rb h1,.rb h2,.rb .headline,.rb .ask,.rb .brand,.rb .rb-word{font-family:Montserrat,var(--font)}
.rb-band{background:#1e3a5f;color:#fff;font-size:12.5px;line-height:1.35;padding:7px 14px;text-align:center;font-weight:500}
.rb-band b{font-weight:700}
.rb .topbar{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line-soft)}
.rb .brand{font-weight:700;color:#1d2b3a}
.rb .brand span{color:var(--teal-600)}
.rb .landing{justify-content:flex-start;padding-top:4px}
.rb-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.rb-word{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;color:#1d2b3a;letter-spacing:-.01em}
.rb-word img{width:34px;height:34px;object-fit:contain}
.rb-word span{color:var(--teal-600)}
.rb-pill{border:1.5px solid var(--teal-600);color:var(--teal-700);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;white-space:nowrap}
.rb-hero{width:100%;margin:0 0 16px;border-radius:16px;overflow:hidden;position:relative;aspect-ratio:2/1;background:#eef3f1}
.rb-hero img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.iv-c .rb-hero{aspect-ratio:3/1;margin-bottom:12px}   /* 30/10 : variante c, boutons plus haut */
.iv-c .sophie-intro{margin-top:18px}
.rb .landing .headline{font-weight:800;color:#1d2b3a;letter-spacing:-.015em;font-size:clamp(25px,6.4vw,32px)}
.rb .mark{background:none;color:var(--teal-600);padding:0}
.rb .landing .subheadline{color:#4a5764}
.rb .sophie-intro{background:#f6f8fa;border:1px solid #e3e8ed;text-align:left;margin:4px 0 18px}
.rb .sophie-role b{color:var(--teal-600)}
.rb .sophie-bubble{border-top-color:#dfe5ea}
.rb .landing h2.ask{color:#1d2b3a;font-weight:700}
.rb .pick{border:1.5px solid #d9e0e6;border-radius:14px;box-shadow:0 1px 2px rgba(29,43,58,.06)}
.rb .pick .lab{font-family:Montserrat,var(--font);font-weight:700}
.rb .pick .lab i{color:var(--teal-600)}
.rb .cta{background:var(--teal-600);border-radius:999px;font-family:Montserrat,var(--font);font-weight:700}
.rb .cta:hover{background:var(--teal-700)}
.rb .opt{border-radius:12px;border-color:#d9e0e6}
.rb .opt.on{background:var(--teal-050);border-color:var(--teal-600)}
.rb .progress i{background:var(--teal-600)}
.rb-trust{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 4px}
.rb-trust div{background:#f6f8fa;border:1px solid #e3e8ed;border-radius:12px;padding:10px 6px;font-size:12px;line-height:1.3;color:#3b4856;text-align:center}
.rb-trust b{display:block;font-family:Montserrat,var(--font);font-size:15px;color:#1d2b3a;margin-bottom:2px}
.rb-trust .st{color:#00b67a;letter-spacing:1px;font-size:12px;display:block}
.rb .trustpilot,.rb .satisf{display:none}

/* ---- Pop-up de sortie de l'intro ---- */
.xp-ov{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(10,22,38,.55);backdrop-filter:blur(2px)}
.xp-ov[hidden]{display:none}
.xp-box{position:relative;width:100%;max-width:380px;background:#fff;border-radius:20px;padding:26px 20px 18px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);font-family:inherit}
.xp-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:28px;line-height:1;color:#8a96a3;cursor:pointer;padding:6px 10px}
.xp-ic{font-size:34px;margin:0 0 6px}
.xp-box h2{font-size:22px;line-height:1.25;margin:0 0 10px;color:#0a1626}
.xp-box p{font-size:16px;line-height:1.5;color:#3b4a5c;margin:0 0 12px}
.xp-ask{font-weight:700;color:#0a1626!important;margin-top:4px!important}
.xp-btns{display:flex;gap:10px;margin:4px 0 10px}
.xp-b{flex:1;min-height:52px;border:0;border-radius:14px;background:#2f7d6d;color:#fff;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(47,125,109,.3)}
.xp-mini{font-size:13px!important;color:#8a96a3!important;margin:0!important}

/* ---- Développement : signal du mode démo (à retirer avec DEMO_MODE:false) ---- */
.demo-flag{position:fixed;top:0;right:0;z-index:10000;padding:2px 8px;border-bottom-left-radius:8px;
  background:#c27b00;color:#fff;font:600 10px/1.6 system-ui,sans-serif;letter-spacing:.02em;pointer-events:none;opacity:.9}