/* ==========================================================================
   KINTSU · charte v2
   Reprise exacte de l'identité du funnel créateurs :
   crème, vert profond, or, encre. Titres serif. Zéro noir, zéro emoji.
   ========================================================================== */

:root{
  /* charte Kintsu v4 · l'or est sorti.
     Le doré sur crème était le code visuel de la naturopathie, exactement le
     registre dont Kintsu doit se démarquer. Le vert reste la colonne
     vertébrale, l'accent devient un jade lumineux. Les noms de variables
     dorées sont conservés pour ne pas casser deux cents usages : ce sont
     maintenant les trois valeurs de l'accent jade. */
  --cream:#F2F5F1;      /* fond clair, blanc très légèrement verdi */
  --cream2:#E7EDE7;
  --cream3:#DBE5DC;
  --white:#FFFFFF;
  --ink:#0C1D15;        /* vert-noir, jamais du noir */
  --deep:#0F3728;       /* fond des écrans sombres */
  --green:#14603F;
  --green2:#1B7A50;
  --green3:#28A06A;
  --gold:#3FCB8C;       /* accent jade, sur fond sombre */
  --gold2:#137A4F;      /* accent lisible sur fond clair */
  --gold3:#8FEEC2;      /* jade clair, sur fond sombre */
  --muted:#4E6157;
  --muted2:#7B8F84;
  --line:#DCE6DD;
  --line2:#C3D3C6;
  --alert:#B4553A;

  --r:16px;
  --rl:22px;
  /* v3 : plus une seule serif. Deux variables embarquées en data URI (fonts.css). */
  --serif:"Kintsu Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Kintsu Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%}
body{
  font-family:var(--sans);
  background:radial-gradient(ellipse at 50% -12%,#24402F,#101B15 62%);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- scène : cadre iPhone + panneau debug ---------- */
#stage{display:flex;gap:26px;align-items:center;padding:18px}

#device{
  width:390px;height:844px;border-radius:44px;background:#0D1712;
  padding:10px;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(201,162,75,.18);
  flex:none;
}
#screen{
  width:100%;height:100%;border-radius:36px;overflow:hidden;background:var(--cream);
  position:relative;
}
#app{
  width:100%;height:100%;overflow-y:auto;overflow-x:hidden;
  position:relative;scroll-behavior:smooth;
  background:var(--cream);
}
#app::-webkit-scrollbar{width:0}

/* ---------- panneau debug ---------- */
#debug{
  width:236px;max-height:844px;overflow-y:auto;color:#B9C9BE;
  font-size:12px;font-family:var(--sans);
}
#debug h3{
  font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:#6E8377;
  margin:16px 0 7px;font-weight:600;font-family:var(--sans);
}
#debug h3:first-child{margin-top:0}
#debug .row{display:flex;flex-wrap:wrap;gap:5px}
#debug button{
  background:rgba(255,255,255,.05);border:1px solid rgba(201,162,75,.16);color:#B9C9BE;
  border-radius:8px;padding:6px 9px;font-size:11px;cursor:pointer;font-family:inherit;
  text-align:left;transition:.13s;
}
#debug button:hover{background:rgba(255,255,255,.1)}
#debug button.on{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
#debug .jump{display:block;width:100%;margin-bottom:3px}
#debug .state{
  background:rgba(0,0,0,.28);border-radius:10px;padding:10px;line-height:1.75;
  font-size:11px;color:#93A79A;
}
#debug .note{color:#6E8377;line-height:1.6;font-size:11px}

/* ==========================================================================
   BASE ÉCRAN
   ========================================================================== */
.wrap{
  min-height:100%;padding:20px 24px 30px;display:flex;flex-direction:column;
  position:relative;z-index:1;
}
.wrap.center{text-align:center;align-items:center}
.wrap.center>*{width:100%}
.grow{flex:1;min-height:18px}

/* v3 · titres en sans display. Une sans à 400 en gros corps paraît molle :
   on remonte la graisse et on resserre l'interlettrage. */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:640;letter-spacing:-.021em}
h1{font-size:28px;line-height:1.18;margin-top:14px;color:var(--ink)}
h1.sm{font-size:24px;line-height:1.24}
h1.xs{font-size:21px;line-height:1.3}
h2{font-size:22px;line-height:1.26;color:var(--ink)}
h3{font-size:17.5px;line-height:1.3}

/* corps ≥ 15 px et contraste relevé : le public Kintsu n'a pas 25 ans */
.sous{font-size:15.5px;line-height:1.55;color:var(--muted);margin-top:10px}
.foot{font-size:13px;color:var(--muted2);text-align:center;margin-top:10px;line-height:1.5}
.kicker{
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold2);
  font-weight:700;
}
.section-t{
  font-family:var(--serif);font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--green2);margin-bottom:13px;font-weight:700;
}
/* v3 · les grands nombres décoratifs héritaient des chasses d'une serif.
   En sans display il leur faut de la graisse et un interlettrage négatif. */
.huge,.slide-val,.rec-val,.pct,.etude .n,.facts .n,.ba2 .g-val,
.plan .nom,.plan .jour b,.sticky .lbl b,.delta .r{
  font-weight:700;letter-spacing:-.03em;
}
.avis blockquote,.avis q,.opt,.bubble{letter-spacing:-.008em}

.sep{height:1px;background:var(--line);margin:26px 0}
.grow-sep{height:22px}

/* filet de progression · hauteur fixe, déduite du gabarit de l'écran */
.chrome{position:sticky;top:0;z-index:5;background:var(--cream);padding:13px 24px;height:52px;flex:none}
.chrome.solid{background:var(--cream)}
.chrome-row{display:flex;align-items:center;gap:12px;height:26px}
#app>.chrome+.wrap{min-height:calc(100% - 52px)}
.back{
  background:none;border:0;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;
  width:26px;height:26px;flex:none;font-family:var(--serif);
}
.bar{flex:1;height:3px;background:var(--line2);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green2);border-radius:3px;transition:width .45s ease}

/* ---------- boutons ---------- */
.cta{
  display:block;width:100%;background:var(--green);color:var(--cream);border:1.5px solid var(--gold);
  border-radius:100px;padding:16px 18px;font-size:16.5px;font-family:var(--serif);cursor:pointer;
  font-weight:620;
  box-shadow:0 10px 24px rgba(30,77,59,.24);transition:.16s;letter-spacing:-.005em;
}
.cta:hover{background:var(--green2)}
.cta:disabled{opacity:.34;box-shadow:none;cursor:default}
.cta.gold{background:var(--gold);color:var(--ink);border-color:var(--gold2);box-shadow:0 10px 24px rgba(201,162,75,.3)}
.cta.ghost{background:transparent;color:var(--green);border-color:var(--line2);box-shadow:none}

/* ---------- options de question ---------- */
.opts{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:var(--white);border:1.5px solid var(--line);border-radius:14px;
  padding:15px 16px;font-size:15px;color:var(--ink);font-family:inherit;transition:.14s;
  line-height:1.35;
}
.opt:hover{border-color:var(--line2);background:#fff}
.opt.on{border-color:var(--green2);background:#F2F6F2;box-shadow:0 0 0 1px var(--green2) inset}
.opt .ic{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--cream2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:12px;color:var(--green2);
}
.opt.on .ic{background:var(--green);border-color:var(--green);color:var(--cream)}
.opt .chk{
  margin-left:auto;flex:none;width:21px;height:21px;border-radius:6px;
  border:1.5px solid var(--line2);position:relative;
}
.opt.on .chk{background:var(--green);border-color:var(--green)}
.opt.on .chk:after{
  content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;
  border:solid var(--cream);border-width:0 2px 2px 0;transform:rotate(43deg);
}

/* bulles d'âge */
.bubbles{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;justify-content:center}
.bubble{
  border:1.5px solid var(--line);background:var(--white);color:var(--ink);cursor:pointer;
  border-radius:100px;padding:15px 4px;font-family:var(--serif);font-size:17px;transition:.14s;
  flex:0 0 calc(50% - 5px);text-align:center;
}
.bubble:hover{border-color:var(--line2)}
.bubble.on{background:var(--green);border-color:var(--green);color:var(--cream)}

/* encart de renforcement contextuel */
.vert{
  background:#F0F5F0;border:1px solid #D4E3D8;border-left:3px solid var(--green2);
  border-radius:0 12px 12px 0;padding:13px 15px;font-size:13.5px;line-height:1.5;
  color:var(--green);margin-top:9px;
}

/* champs */
.field{
  width:100%;background:var(--white);border:1.5px solid var(--line);border-radius:13px;
  padding:15px 16px;color:var(--ink);font-size:16px;font-family:inherit;margin-top:18px;
  outline:none;transition:.14s;
}
.field:focus{border-color:var(--green2)}
.field::placeholder{color:var(--muted2)}
textarea.field{min-height:110px;resize:none;line-height:1.5}
.mini-field{
  width:100%;background:var(--white);border:1.5px solid var(--line);border-radius:11px;
  padding:12px 14px;color:var(--ink);font-size:14.5px;font-family:inherit;margin-top:8px;outline:none;
}
.mini-field:focus{border-color:var(--green2)}

/* ==========================================================================
   CURSEURS
   ========================================================================== */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;outline:none;
  background:linear-gradient(90deg,var(--green2) 0%,var(--green2) var(--p,40%),var(--line2) var(--p,40%));
  margin-top:26px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--white);
  border:3px solid var(--green);cursor:pointer;box-shadow:0 3px 10px rgba(22,40,31,.22);
}
input[type=range]::-moz-range-thumb{
  width:30px;height:30px;border-radius:50%;background:var(--white);
  border:3px solid var(--green);cursor:pointer;
}
.slide-val{font-family:var(--serif);font-size:60px;line-height:1;color:var(--green);text-align:center}
.slide-unit{
  text-align:center;font-size:11px;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--muted2);margin-top:8px;
}
.slide-palier{
  text-align:center;font-family:var(--serif);font-size:16px;color:var(--gold2);
  margin-top:16px;min-height:22px;
}
.slide-ends{
  display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted2);margin-top:10px;
}

/* curseur d'accord (remplace les emojis) */
.agree-val{
  text-align:center;font-family:var(--serif);font-size:19px;color:var(--green);
  min-height:26px;margin-top:6px;
}
.agree-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted2);margin-top:12px}
.agree-ticks{display:flex;justify-content:space-between;padding:0 2px;margin-top:8px}
.agree-ticks i{width:1px;height:6px;background:var(--line2);display:block}

/* ==========================================================================
   CARTES, LISTES, MESURES
   ========================================================================== */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--rl);padding:20px;
  margin-top:14px;
}
.card4{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-bottom:10px;
}
.card4 b{display:block;font-family:var(--serif);font-size:17px;font-weight:400;margin-bottom:5px}
.card4 span{font-size:13.5px;color:var(--muted);line-height:1.5;display:block}

.meter{margin-bottom:15px}
.meter-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.meter-top b{font-size:14px;font-weight:600;color:var(--ink)}
.meter-top span{font-size:12px;color:var(--muted);font-family:var(--serif)}
.meter-bar{height:7px;background:var(--cream3);border-radius:7px;overflow:hidden}
.meter-bar i{
  display:block;height:100%;border-radius:7px;transition:width 1s cubic-bezier(.2,.7,.3,1);
  background:linear-gradient(90deg,var(--green2),var(--green3));
}
.meter-bar i.warn{background:linear-gradient(90deg,var(--gold2),var(--gold))}
.meter-bar i.low{background:linear-gradient(90deg,#9C5B3A,var(--alert))}

.list .li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5;margin-bottom:12px}
.li .m{
  flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:11px;margin-top:1px;font-family:var(--serif);
}
.li.up .m{background:#DCEBE0;color:var(--green)}
.li.down .m{background:#F3E3D6;color:var(--alert)}

.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{
  background:var(--cream2);border:1px solid var(--line);border-radius:100px;
  padding:7px 13px;font-size:12.5px;color:var(--green);
}

/* ==========================================================================
   BANDEAU DE FAITS (repris du funnel créateurs)
   ========================================================================== */
.facts{background:var(--green);color:var(--cream);display:flex;text-align:center;margin:0 -24px}
.facts div{flex:1;padding:20px 8px;border-right:1px solid rgba(247,241,228,.15)}
.facts div:last-child{border:0}
.facts .n{font-family:var(--serif);font-size:19px;color:var(--gold3);line-height:1.15}
.facts .l{font-size:11px;opacity:.85;margin-top:5px;line-height:1.35}

/* ==========================================================================
   AVIS · format imposé : case, 5 étoiles au-dessus, réseau en haut à droite
   ========================================================================== */
.avis{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px 14px;margin-bottom:11px;position:relative;
}
.avis-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.stars{color:var(--gold);font-size:13px;letter-spacing:2.5px}
.reseau{
  font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted2);
  border:1px solid var(--line);border-radius:100px;padding:3px 8px;font-weight:600;
}
.avis q{
  display:block;font-size:14.5px;line-height:1.55;color:var(--ink);quotes:"«\00a0" "\00a0»";
  font-family:var(--serif);
}
.avis q:before{content:open-quote}
.avis q:after{content:close-quote}
.avis cite{
  display:block;font-style:normal;font-size:12px;color:var(--muted2);margin-top:9px;
}
.todo-tag{
  display:inline-block;background:#F3E3D6;color:var(--alert);font-size:8.5px;letter-spacing:.9px;
  padding:2px 6px;border-radius:4px;margin-left:7px;vertical-align:middle;font-weight:700;
}

/* ==========================================================================
   BLOCS SOMBRES (encre Kintsu, jamais du noir)
   ========================================================================== */
.dark{background:var(--ink);color:var(--cream);margin:0 -24px;padding:34px 24px}
.dark h1,.dark h2,.dark h3{color:var(--cream)}
.dark .sous{color:rgba(247,241,228,.72)}
.dark .kicker{color:var(--gold3)}
.dark .foot{color:rgba(247,241,228,.5)}

.screen-dark{
  background:var(--ink);color:var(--cream);min-height:100%;
  display:flex;flex-direction:column;
}
.screen-dark>.wrap{flex:1;min-height:0}
.screen-dark h1,.screen-dark h2{color:var(--cream)}
.screen-dark .sous{color:rgba(247,241,228,.72)}
.screen-dark .foot{color:rgba(247,241,228,.5)}
.screen-dark .chrome{background:var(--ink)}
.screen-dark .bar{background:rgba(247,241,228,.18)}
.screen-dark .bar i{background:var(--gold)}
.screen-dark .back{color:rgba(247,241,228,.6)}
.screen-dark .cta{background:var(--gold);color:var(--ink);border-color:var(--gold2)}
.screen-dark .cta.ghost{background:transparent;color:var(--cream);border-color:rgba(247,241,228,.3)}
.screen-dark input[type=range]{
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) var(--p,40%),rgba(247,241,228,.2) var(--p,40%));
}
.screen-dark input[type=range]::-webkit-slider-thumb{background:var(--gold);border-color:var(--ink)}
.screen-dark .src{color:rgba(247,241,228,.45)}

/* chiffre choc · valeur en serif, unité en petites capitales, toujours sur une ligne */
.huge{
  font-family:var(--serif);font-size:70px;line-height:.95;color:var(--gold);text-align:center;
  letter-spacing:-.02em;white-space:nowrap;
}
.huge.sm{font-size:52px}
.huge .u2{
  font-family:var(--sans);font-size:16px;letter-spacing:.09em;text-transform:uppercase;
  opacity:.62;margin:0 13px 0 5px;vertical-align:.42em;letter-spacing:.1em;
}
.huge .u2:last-child{margin-right:0}
.rec-val{font-family:var(--serif);font-size:34px;color:var(--green);line-height:1.15;white-space:nowrap}
.rec-val .u2{
  font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  opacity:.62;margin:0 9px 0 4px;vertical-align:.4em;
}
.rec-val .u2:last-child{margin-right:0}
.unitbig{
  text-align:center;font-size:11px;letter-spacing:2.6px;text-transform:uppercase;
  color:rgba(247,241,228,.6);margin-top:12px;
}
.src{font-size:11.5px;color:var(--muted2);line-height:1.55;margin-top:12px;text-align:center}
.src.todo{color:var(--alert)}

/* fiche d'étude */
.etude{
  border:1px solid rgba(247,241,228,.16);border-radius:14px;padding:15px 16px;margin-top:11px;
  text-align:left;
}
.etude .n{font-family:var(--serif);font-size:26px;color:var(--gold);line-height:1;margin-bottom:8px}
.etude .t{font-size:14px;line-height:1.45;color:var(--cream)}
.etude .s{font-size:11px;color:rgba(247,241,228,.48);margin-top:8px;line-height:1.45}
.etude.light{border-color:var(--line);background:var(--white)}
.etude.light .n{color:var(--green)}
.etude.light .t{color:var(--ink)}
.etude.light .s{color:var(--muted2)}

/* ==========================================================================
   AVANT / APRÈS (jauges, sans jamais dire « score de bien-être »)
   ========================================================================== */
.ba2{display:flex;gap:12px;margin-top:20px}
.ba2 .col{
  flex:1;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 12px;text-align:center;
}
.ba2 .col.after{border-color:var(--green2);background:#F2F6F2}
.ba2 .k{
  font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);margin-bottom:12px;
}
.ba2 .col.after .k{color:var(--green2)}
.gauge{width:86px;height:86px;margin:0 auto;position:relative}
.gauge svg{transform:rotate(-90deg)}
.gauge .val{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:23px;color:var(--muted);
}
.ba2 .col.after .gauge .val{color:var(--green)}
.ba2 .t{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:12px}
.ba2 .col.after .t{color:var(--ink)}

.deltas{margin-top:20px}
.delta{padding:13px 0;border-bottom:1px solid var(--line)}
.delta:last-child{border:0}
.delta .l{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.delta .r{display:flex;align-items:baseline;gap:10px;font-family:var(--serif);line-height:1.3}
.delta .r .a{color:var(--muted2);font-size:15px}
.delta .r .ar{color:var(--gold2);font-size:13px;flex:none}
.delta .r .b{color:var(--green);font-size:17px}

/* ==========================================================================
   TRAITEMENT / ANALYSE EN COURS
   ========================================================================== */
.ring{width:170px;height:170px;margin:26px auto 0;position:relative}
.ring .center{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:15px;letter-spacing:1.5px;color:var(--green);text-align:center;
}
.pct{text-align:center;font-family:var(--serif);font-size:26px;color:var(--green);margin-top:14px}
.steps{margin-top:24px}
.step{
  display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--muted2);
  padding:8px 0;transition:.2s;
}
.step .b{
  flex:none;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line2);
  display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--cream);
}
.step.doing{color:var(--ink)}
.step.doing .b{border-color:var(--gold);border-style:dashed}
.step.done{color:var(--green)}
.step.done .b{background:var(--green);border-color:var(--green)}

/* modale question rapide */
.modal-bg{
  position:absolute;inset:0;background:rgba(22,40,31,.55);display:flex;align-items:flex-end;
  z-index:40;border-radius:36px;overflow:hidden;
}
.modal{
  width:100%;background:var(--cream);border-radius:26px 26px 0 0;padding:26px 24px 30px;
  border-top:2px solid var(--gold);
}

/* ==========================================================================
   PAYWALL
   ========================================================================== */
.sticky{
  position:sticky;top:0;z-index:20;background:var(--green);color:var(--cream);
  display:flex;align-items:center;gap:10px;padding:11px 16px;
}
.sticky .red{
  background:var(--gold);color:var(--ink);font-size:11px;font-weight:700;
  padding:4px 8px;border-radius:6px;flex:none;
}
.sticky .lbl{flex:1;font-size:11.5px;line-height:1.35;opacity:.92}
.sticky .lbl b{display:block;font-family:var(--serif);font-size:15px;color:var(--gold3)}
.sticky button{
  background:var(--cream);color:var(--green);border:0;border-radius:100px;padding:9px 15px;
  font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;flex:none;
}

.badge-free{
  display:inline-block;background:var(--cream2);border:1px solid var(--gold);color:var(--gold2);
  font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;padding:7px 14px;
  border-radius:100px;font-weight:700;
}

.feat{display:flex;gap:12px;align-items:flex-start;margin-bottom:15px}
.feat .c{
  flex:none;width:21px;height:21px;border-radius:50%;background:#DCEBE0;color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:1px;
}
.feat b{display:block;font-size:14.5px;font-weight:600;margin-bottom:3px}
.feat span{font-size:13px;color:var(--muted);line-height:1.5;display:block}

.faq-i{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;background:none;border:0;text-align:left;padding:15px 0;font-size:14.5px;
  color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:12px;font-family:inherit;font-weight:600;
}
.faq-q i{font-style:normal;color:var(--gold2);font-size:19px;flex:none;font-family:var(--serif)}
.faq-a{max-height:0;overflow:hidden;transition:.28s;font-size:13.5px;color:var(--muted);line-height:1.55}
.faq-i.open .faq-a{max-height:260px;padding-bottom:15px}
.faq-i.open .faq-q i{transform:rotate(45deg)}

.plan{
  width:100%;display:flex;align-items:center;gap:13px;background:var(--white);
  border:1.5px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:11px;
  cursor:pointer;position:relative;text-align:left;font-family:inherit;transition:.14s;
}
.plan.on{border-color:var(--green);background:#F2F6F2}
.plan-badge{
  position:absolute;top:-9px;left:16px;background:var(--gold);color:var(--ink);font-size:9px;
  letter-spacing:1.1px;padding:3px 9px;border-radius:5px;font-weight:700;
}
.plan .radio{
  flex:none;width:21px;height:21px;border-radius:50%;border:1.5px solid var(--line2);position:relative;
}
.plan.on .radio{border-color:var(--green);border-width:6px}
.plan .nom{display:block;font-family:var(--serif);font-size:16.5px;margin-bottom:3px}
.plan .sous{display:block;font-size:12.5px;color:var(--muted);margin:0}
.plan .sous s{opacity:.65}
.plan .reduc{
  background:var(--gold);color:var(--ink);font-size:9.5px;padding:2px 6px;border-radius:4px;
  vertical-align:middle;font-weight:700;font-family:var(--sans);
}
.plan .jour{margin-left:auto;text-align:right;flex:none}
.plan .jour b{display:block;font-family:var(--serif);font-size:16px;color:var(--green)}
.plan .jour span{font-size:10px;color:var(--muted2)}

.legal{font-size:12px;color:var(--muted2);line-height:1.6;text-align:center;margin:16px 0 14px}
.legal b{color:var(--muted);font-weight:700}
.guar{
  display:flex;gap:11px;align-items:flex-start;background:var(--cream2);border:1px solid var(--gold);
  border-radius:14px;padding:14px 15px;font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:16px;
}
.guar b{color:var(--ink)}
.guar>span:first-child{
  flex:none;width:22px;height:22px;border-radius:50%;background:var(--green);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-family:var(--serif);
}
.pay-logos{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px;
  font-size:9px;letter-spacing:1.1px;color:var(--muted2);
}
.pay-logos span{border:1px solid var(--line);border-radius:5px;padding:4px 8px}

.sheet{
  background:var(--cream);border-radius:26px 26px 0 0;padding:20px 24px 30px;
  border-top:2px solid var(--gold);
}
.line{
  display:flex;justify-content:space-between;align-items:center;padding:14px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted);
}
.line b{font-family:var(--serif);font-size:18px;color:var(--ink)}

/* ==========================================================================
   LANDING
   ========================================================================== */
.brandbar{display:flex;align-items:center;justify-content:center;gap:10px;padding:22px 0 2px}
.mark{width:34px;height:34px;border-radius:50%;background:var(--green);position:relative;overflow:hidden;flex:none}
.mark:after{
  content:"";position:absolute;top:-3px;bottom:-3px;left:16px;width:2.5px;background:var(--gold);
  transform:rotate(9deg);border-radius:3px;
}
.brandbar span{font-family:var(--serif);font-size:19px;color:var(--ink)}
.announce{
  background:var(--green);color:var(--cream);text-align:center;font-size:11.5px;letter-spacing:.05em;
  padding:9px 14px;font-weight:600;margin:0 -24px;
}
.announce b{color:var(--gold3)}

.portrait{
  width:96px;height:96px;border-radius:50%;background:var(--cream2);border:1px solid var(--line);
  margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:10px;
  color:var(--muted2);text-align:center;line-height:1.4;
}
.logos{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:9px;letter-spacing:1.2px;
  color:var(--muted2);margin:14px 0 16px;
}
.logos span{border:1px solid var(--line);border-radius:100px;padding:4px 9px}

.reveal{opacity:0;transform:translateY(14px);transition:.55s ease}
.reveal.in{opacity:1;transform:none}
.counter{font-family:var(--serif);font-size:40px;color:var(--green);letter-spacing:-.01em}

/* projection */
.proj{
  border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--white);
}
.proj .k{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);margin-bottom:6px}
.proj .v{font-family:var(--serif);font-size:19px;color:var(--ink)}
.arrowpill{display:flex;justify-content:center;margin:10px 0}
.arrowpill span{
  background:var(--cream2);border:1px solid var(--line);border-radius:100px;padding:6px 14px;
  font-size:12px;color:var(--green2);
}
.notif{
  display:flex;gap:12px;align-items:center;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:13px 15px;margin-bottom:9px;
}
.notif .ic{
  flex:none;width:32px;height:32px;border-radius:9px;background:var(--cream2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:14px;color:var(--green2);
}
.notif b{font-size:14px;font-weight:600;display:block}
.notif .foot{text-align:left;margin-top:2px}

.live{
  display:flex;align-items:center;gap:8px;justify-content:center;font-size:11.5px;color:var(--muted);
  background:var(--white);border:1px solid var(--line);border-radius:100px;padding:8px 14px;
  width:fit-content;margin:0 auto;
}
.live i{width:6px;height:6px;border-radius:50%;background:var(--green3);animation:pulse 1.7s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.carou{margin-top:20px}
.carou-dots{display:flex;gap:5px;justify-content:center;margin-top:10px}
.carou-dots i{width:5px;height:5px;border-radius:50%;background:var(--line2)}
.carou-dots i.on{background:var(--green2);width:14px;border-radius:3px}

/* bénéfices du curseur bonne nouvelle */
.benefs{margin-top:20px;text-align:left}
.benef{
  display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.45;padding:9px 0;
  opacity:.25;transition:.3s;
}
.benef.on{opacity:1}
.benef .m{
  flex:none;width:19px;height:19px;border-radius:50%;background:rgba(201,162,75,.2);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:10px;margin-top:1px;font-family:var(--serif);
}

.promesse{
  border:1px solid rgba(201,162,75,.4);border-radius:16px;padding:16px;margin-top:20px;
  font-size:14.5px;line-height:1.5;text-align:center;background:rgba(201,162,75,.07);
}

/* ==========================================================================
   V3 · LANDING REFONDUE (structure Blow Up, 6 blocs)
   ========================================================================== */

/* --- bloc 1 · nav, deux ancres, aucun CTA --- */
.nav3{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;background:rgba(247,241,228,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(225,214,191,.7);margin:0 -24px;
}
.nav3 .brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:700;
  font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.nav3 .brand .mark{width:20px;height:20px;margin:0}
.nav3 nav{display:flex;gap:18px}
.nav3 a{
  font-size:13px;color:var(--muted);text-decoration:none;font-weight:500;cursor:pointer;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.nav3 a:hover{color:var(--green);border-bottom-color:var(--gold)}

/* --- bloc 2 · hero pleine hauteur --- */
.hero3{
  min-height:646px;display:flex;flex-direction:column;justify-content:center;
  text-align:center;padding:34px 0 30px;
}
.hero3 h1{
  font-size:44px;line-height:1.04;letter-spacing:-.036em;margin:0;
  font-weight:700;
}
.hero3 h1 .grad{
  display:block;
  background:linear-gradient(96deg,var(--gold2) 4%,var(--gold) 34%,var(--green3) 78%,var(--green) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero3 .sous{max-width:320px;margin:16px auto 0;font-size:16px;color:var(--muted)}
.hero3 .cta{margin-top:28px}

/* note étoiles sous le CTA */
.starnote{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px}
.starnote .stars{font-size:14px}
.starnote span{font-size:12.5px;color:var(--muted2);line-height:1.3;text-align:left}
.starnote b{color:var(--ink);font-weight:600}

/* --- bloc 3 · comment ça marche, 4 cartes 01 à 04 --- */
.steps4{display:flex;flex-direction:column;gap:11px}
.step4{
  display:flex;gap:15px;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);border-radius:var(--rl);padding:17px 17px 18px;
}
.step4 .no{
  flex:none;font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:-.02em;
  color:var(--gold2);background:var(--cream2);border:1px solid var(--line);
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.step4 b{display:block;font-family:var(--serif);font-size:17.5px;font-weight:640;
  letter-spacing:-.02em;margin-bottom:5px;color:var(--ink)}
.step4 span{display:block;font-size:14.5px;line-height:1.52;color:var(--muted)}

/* --- bloc 4 · six fonctionnalités, icônes monochromes --- */
.feat6{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f6{
  background:var(--white);border:1px solid var(--line);border-radius:var(--rl);
  padding:17px 15px 16px;
}
.f6 svg{width:24px;height:24px;stroke:var(--green2);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:12px}
.f6 b{display:block;font-family:var(--serif);font-size:14.5px;font-weight:640;
  letter-spacing:-.015em;line-height:1.28;margin-bottom:6px;color:var(--ink)}
.f6 span{display:block;font-size:13px;line-height:1.5;color:var(--muted)}

/* --- bloc 6 · CTA final sur fond vert --- */
.final3{
  background:var(--green);color:var(--cream);margin:0 -24px;padding:40px 26px 42px;
  text-align:center;border-radius:28px 28px 0 0;
}
.final3 h2{color:var(--cream);font-size:26px;letter-spacing:-.028em}
.final3 .sous{color:rgba(247,241,228,.76);max-width:300px;margin:14px auto 0}
.final3 .cta{background:var(--gold);color:var(--ink);border-color:var(--gold3);margin-top:26px;
  box-shadow:0 10px 26px rgba(0,0,0,.28)}
.final3 .cta:hover{background:var(--gold3)}
.final3 .foot{color:rgba(247,241,228,.55)}

/* ==========================================================================
   V3 · NOUVEAUX ÉCRANS D'ONBOARDING
   ========================================================================== */

/* --- écran cerveau · deux zones nommées, aucune métaphore inventée --- */
.brainmap{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.bz{
  border:1px solid rgba(201,162,75,.28);border-radius:var(--rl);padding:15px 16px;
  background:rgba(247,241,228,.05);
}
.bz.on{border-color:var(--gold);background:rgba(201,162,75,.13)}
.bz b{display:block;font-family:var(--serif);font-size:16.5px;font-weight:640;
  letter-spacing:-.02em;color:var(--cream);margin-bottom:5px}
.bz.on b{color:var(--gold3)}
.bz span{display:block;font-size:14px;line-height:1.5;color:rgba(247,241,228,.66)}

/* le task bracketing, littéralement mis entre crochets */
.bracket{
  display:flex;align-items:center;gap:9px;margin-top:20px;
  font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--gold3);
}
.bracket i{
  flex:none;width:11px;height:30px;border:1.5px solid var(--gold);border-radius:2px;
}
.bracket i:first-child{border-right:0}
.bracket i:last-child{border-left:0}
.bracket em{
  flex:1;font-style:normal;text-align:center;letter-spacing:0;text-transform:none;
  font-size:13px;color:rgba(247,241,228,.5);border-top:1px dashed rgba(201,162,75,.4);
  padding-top:7px;
}

/* --- avant / après du quotidien, au conditionnel --- */
.cond{margin-top:6px}
.cond-i{border-left:2px solid var(--line2);padding:0 0 16px 15px;position:relative}
.cond-i:last-child{padding-bottom:0}
.cond-i .av{display:block;font-size:13.5px;line-height:1.45;color:var(--muted2);
  text-decoration:line-through;text-decoration-color:var(--line2)}
.cond-i .ap{display:block;font-size:15.5px;line-height:1.5;color:var(--ink);margin-top:6px;
  font-family:var(--serif);font-weight:540;letter-spacing:-.012em}
.cond-i:before{
  content:'';position:absolute;left:-5px;top:6px;width:8px;height:8px;border-radius:50%;
  background:var(--gold);border:2px solid var(--cream);
}

/* --- fausse alerte système, écran notifications --- */
.iosalert{
  max-width:278px;margin:26px auto 0;background:rgba(255,253,248,.96);border-radius:15px;
  overflow:hidden;box-shadow:0 18px 44px rgba(22,40,31,.22);text-align:center;
  border:1px solid var(--line);
}
.iosalert .body{padding:19px 18px 16px}
.iosalert .body b{display:block;font-size:15px;font-weight:640;margin-bottom:6px;color:var(--ink)}
.iosalert .body span{display:block;font-size:13px;line-height:1.45;color:var(--muted)}
.iosalert .btns{display:flex;border-top:1px solid var(--line)}
.iosalert .btns button{
  flex:1;background:none;border:0;padding:13px 6px;font-size:15px;cursor:pointer;
  font-family:inherit;color:var(--muted);
}
.iosalert .btns button+button{border-left:1px solid var(--line);color:var(--green);font-weight:700}

/* --- interrupteurs de moments (micro-pauses) --- */
.toggles{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.tg{
  display:flex;align-items:center;gap:13px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 15px;cursor:pointer;text-align:left;width:100%;
  font-family:inherit;transition:.15s;
}
.tg.on{border-color:var(--green2);background:#F2F7F3}
.tg .txt{flex:1}
.tg .txt b{display:block;font-size:15px;font-weight:640;color:var(--ink);margin-bottom:2px}
.tg .txt span{display:block;font-size:13px;color:var(--muted);line-height:1.4}
.tg .sw{
  flex:none;width:44px;height:26px;border-radius:100px;background:var(--line2);
  position:relative;transition:.18s;
}
.tg.on .sw{background:var(--green2)}
.tg .sw:after{
  content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--white);transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.24);
}
.tg.on .sw:after{left:21px}

/* --- récapitulatif pré-paywall --- */
.recap{
  background:var(--white);border:1px solid var(--line);border-radius:var(--rl);
  padding:6px 17px;margin-top:20px;
}
.recap .r{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.recap .r:last-child{border-bottom:0}
.recap .r .k{font-size:13px;color:var(--muted);flex:none}
.recap .r .v{font-family:var(--serif);font-size:15.5px;font-weight:640;letter-spacing:-.018em;
  color:var(--ink);text-align:right}
.recap .r .v.gold{color:var(--gold2)}

/* ==========================================================================
   V4 · ATMOSPHÈRE
   Un dégradé vert descend du haut de CHAQUE écran, fixe, et le contenu
   défile par-dessus. Pour que ça marche, #app devient transparent et c'est
   #screen qui porte la couleur de fond.
   ========================================================================== */
#screen{background:var(--cream)}
#app{background:transparent;position:relative;z-index:1}

#screen:before{
  content:'';position:absolute;left:0;right:0;top:0;height:400px;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% -22%,rgba(63,203,140,.34),transparent 66%),
    linear-gradient(180deg,rgba(20,96,63,.19),rgba(20,96,63,.05) 46%,transparent);
}

/* la barre de progression ne doit plus masquer le dégradé */
.chrome,.chrome.solid{background:transparent;backdrop-filter:blur(9px)}
.bar{background:rgba(12,29,21,.13)}
.bar i{background:linear-gradient(90deg,var(--green),var(--green3))}

/* écrans sombres : même geste, en jade sur vert-noir */
.screen-dark{background:var(--deep);position:relative}
.screen-dark:before{
  content:'';position:absolute;left:0;right:0;top:0;height:420px;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -20%,rgba(63,203,140,.30),transparent 64%),
    linear-gradient(180deg,rgba(143,238,194,.10),transparent 58%);
}
.screen-dark>*{position:relative;z-index:1}
.screen-dark .chrome{background:transparent}
.screen-dark .bar{background:rgba(143,238,194,.2)}
.screen-dark .bar i{background:linear-gradient(90deg,var(--gold),var(--gold3))}
.screen-dark .back{color:rgba(243,246,241,.62)}
.screen-dark .cta{
  background:linear-gradient(180deg,var(--gold3),var(--gold));color:#06231A;
  border:0;box-shadow:0 12px 30px rgba(63,203,140,.26);
}
.screen-dark .cta:hover{background:linear-gradient(180deg,#A8F5D3,#55D69B)}

/* ==========================================================================
   V4 · SURFACES
   Les cases ne sont plus des rectangles blancs bordés : voile vert au repos,
   dégradé jade net à la sélection.
   ========================================================================== */
.opt,.bubble,.tg,.plan{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(231,237,231,.72));
  border:1.5px solid var(--line);
  box-shadow:0 1px 2px rgba(12,29,21,.03);
  transition:.18s cubic-bezier(.2,.7,.3,1);
}
.opt:hover,.bubble:hover,.tg:hover,.plan:hover{
  border-color:var(--line2);transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(12,29,21,.07);
}
.opt.on,.tg.on,.plan.on{
  border-color:var(--green3);
  background:linear-gradient(180deg,rgba(63,203,140,.16),rgba(63,203,140,.05));
  box-shadow:0 0 0 1px var(--green3) inset,0 8px 22px rgba(20,96,63,.11);
}
.bubble.on{
  background:linear-gradient(180deg,var(--green2),var(--green));
  border-color:var(--green);color:#fff;
  box-shadow:0 8px 22px rgba(20,96,63,.24);
}
.opt.on .chk{background:var(--green2);border-color:var(--green2)}
.opt .ic{background:var(--cream2);border-color:var(--line)}
.opt.on .ic{background:var(--green2);border-color:var(--green2);color:#fff}
.plan.on .radio{border-color:var(--green2)}

.card,.card4,.avis,.f6,.step4,.recap,.etude.light{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(242,245,241,.82));
  border-color:var(--line);
  box-shadow:0 2px 10px rgba(12,29,21,.04);
}

/* bouton principal, dégradé vert plutôt que filet doré */
.cta{
  background:linear-gradient(180deg,var(--green2),var(--green));
  border:0;box-shadow:0 12px 28px rgba(20,96,63,.26);color:#fff;
}
.cta:hover{background:linear-gradient(180deg,#228D5D,#176946)}
.cta.ghost{
  background:rgba(255,255,255,.6);color:var(--green);
  border:1.5px solid var(--line2);box-shadow:none;
}

/* jauges et mesures reprennent le jade */
.meter-bar{background:var(--cream3)}
.meter-bar i{background:linear-gradient(90deg,var(--green),var(--green3))}
.meter-bar i.warn{background:linear-gradient(90deg,#B08A2E,#D8AE4A)}
.meter-bar i.low{background:linear-gradient(90deg,#9C4E33,var(--alert))}
.li.up .m{background:rgba(63,203,140,.2);color:var(--green)}
.li.down .m{background:rgba(180,85,58,.14);color:var(--alert)}
.feat .c{background:rgba(63,203,140,.2);color:var(--green)}
.tag{background:rgba(63,203,140,.11);border-color:rgba(40,160,106,.28);color:var(--green)}
.stars{color:var(--green3)}
.badge-free{
  background:rgba(63,203,140,.14);border-color:var(--green3);color:var(--gold2);
}
.guar{background:rgba(63,203,140,.09);border-color:rgba(40,160,106,.34)}
.guar>span:first-child{background:var(--green2)}
.vert{background:rgba(63,203,140,.11);border-color:rgba(40,160,106,.26);border-left-color:var(--green3)}
.live{background:rgba(255,255,255,.8);border-color:var(--line)}
.live i{background:var(--green3)}

input[type=range]{
  background:linear-gradient(90deg,var(--green3) 0%,var(--green3) var(--p,40%),var(--line2) var(--p,40%));
}
input[type=range]::-webkit-slider-thumb{border-color:var(--green2)}
input[type=range]::-moz-range-thumb{border-color:var(--green2)}
.screen-dark input[type=range]{
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) var(--p,40%),rgba(143,238,194,.22) var(--p,40%));
}
.screen-dark input[type=range]::-webkit-slider-thumb{background:var(--gold3);border-color:var(--deep)}

/* le bandeau collant du paywall, plus profond */
.sticky{background:linear-gradient(180deg,var(--green),#0F4E33)}
.sticky .red{background:var(--gold3);color:#06231A}
.sticky button{background:#fff;color:var(--green)}

/* la marque */
.mark{background:linear-gradient(150deg,var(--green2),var(--green))}
.mark:after{background:var(--gold3)}

/* ==========================================================================
   V4 · LANDING
   ========================================================================== */
.nav3{
  justify-content:center;background:transparent;backdrop-filter:none;
  border-bottom:0;padding:20px 22px 0;position:relative;
}
.nav3 .brand{font-size:17px}

/* pastille qui dit tout de suite de quoi il s'agit */
.pill{
  display:inline-block;margin:0 auto;
  background:rgba(255,255,255,.72);border:1px solid var(--line2);
  color:var(--green);font-size:12.5px;font-weight:600;letter-spacing:.01em;
  padding:8px 15px;border-radius:100px;backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(12,29,21,.05);
}
.hero3{min-height:600px;padding:20px 0 30px}
.hero3 .pill{margin-bottom:22px}
.hero3 h1 .grad{
  background:linear-gradient(96deg,var(--green3) 2%,#3FCB8C 38%,var(--green2) 82%,var(--green) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.starnote{margin-top:20px}

/* le pied de landing n'est plus un aplat vert plein écran */
.final3{
  background:linear-gradient(168deg,#14603F,#0F3728 62%,#0C2A1F);
  border-radius:30px;margin:0 0 26px;padding:40px 26px 40px;position:relative;overflow:hidden;
}
.final3:before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 50% 0%,rgba(63,203,140,.30),transparent 68%);
}
.final3>*{position:relative}
.final3 .cta{
  background:linear-gradient(180deg,var(--gold3),var(--gold));color:#06231A;
  box-shadow:0 12px 30px rgba(63,203,140,.24);
}
.final3 .cta:hover{background:linear-gradient(180deg,#A8F5D3,#55D69B)}
.final3 .foot{color:rgba(243,246,241,.5)}

/* les icônes de fonctionnalités passent au jade */
.f6 svg{stroke:var(--green3)}
.step4 .no{
  color:#fff;background:linear-gradient(160deg,var(--green2),var(--green));
  border-color:transparent;box-shadow:0 4px 12px rgba(20,96,63,.2);
}

/* ==========================================================================
   V4 · ARCHÉTYPE, INDICE SUR 100, CARTE DE DONNÉE
   ========================================================================== */
.arche{
  margin-top:14px;text-align:center;padding:26px 20px 24px;border-radius:28px;
  background:linear-gradient(168deg,#14603F,#0F3728 70%);position:relative;overflow:hidden;
  box-shadow:0 18px 40px rgba(12,29,21,.18);
}
.arche:before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 60% at 50% -6%,rgba(63,203,140,.36),transparent 66%);
}
.arche>*{position:relative}
.arche .ico{
  width:58px;height:58px;margin:0 auto 14px;border-radius:50%;
  background:rgba(143,238,194,.14);border:1px solid rgba(143,238,194,.32);
  display:flex;align-items:center;justify-content:center;
}
.arche .ico svg{width:30px;height:30px;fill:none;stroke:var(--gold3);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.arche .nom{
  font-family:var(--serif);font-size:31px;font-weight:700;letter-spacing:-.032em;
  color:#fff;line-height:1.1;
}
.arche .ph{font-size:15.5px;line-height:1.5;color:rgba(243,246,241,.8);margin-top:10px}
.arche .sup{
  display:inline-block;margin-top:18px;background:rgba(143,238,194,.15);
  border:1px solid rgba(143,238,194,.34);border-radius:100px;padding:9px 16px;
  font-size:13px;font-weight:600;color:var(--gold3);line-height:1.4;
}

.ab{display:flex;flex-direction:column;gap:9px;margin-top:11px}
.ab-c{border-radius:var(--rl);padding:15px 17px;border:1px solid var(--line)}
.ab-c.up{background:linear-gradient(180deg,rgba(63,203,140,.13),rgba(63,203,140,.04));
  border-color:rgba(40,160,106,.3)}
.ab-c.down{background:linear-gradient(180deg,rgba(180,85,58,.09),rgba(180,85,58,.03));
  border-color:rgba(180,85,58,.24)}
.ab-c .k{display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  font-weight:700;margin-bottom:7px}
.ab-c.up .k{color:var(--gold2)}
.ab-c.down .k{color:var(--alert)}
.ab-c .t{display:block;font-size:14.5px;line-height:1.55;color:var(--ink)}

.scorebox{text-align:center}
.score-ring{width:150px;height:150px;margin:0 auto;position:relative}
.score-ring circle{transition:stroke-dashoffset 1.5s cubic-bezier(.2,.7,.3,1)}
.score-ring .c{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;
}
.score-ring .c b{
  font-family:var(--serif);font-size:50px;font-weight:700;letter-spacing:-.04em;
  color:var(--green);line-height:1;
}
.score-ring .c span{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted2)}

.datacard{
  border-radius:var(--rl);padding:20px;margin-top:6px;
  background:linear-gradient(168deg,rgba(63,203,140,.14),rgba(63,203,140,.04));
  border:1px solid rgba(40,160,106,.3);
}
.datacard .big{
  font-family:var(--serif);font-size:42px;font-weight:700;letter-spacing:-.04em;
  color:var(--green);line-height:1;margin-bottom:10px;
}
.datacard p{font-size:14.5px;line-height:1.55;color:var(--ink)}
.datacard .src{color:var(--muted2);margin-top:10px}

/* ==========================================================================
   V4 · ÉCRAN COÛT · le chiffre des répétitions
   ========================================================================== */
.mega{
  font-family:var(--serif);font-size:92px;font-weight:700;line-height:.9;
  letter-spacing:-.05em;text-align:center;white-space:nowrap;
  background:linear-gradient(168deg,#DFFBED,#8FEEC2 42%,#3FCB8C);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  margin-top:6px;
}
.huge{font-size:78px}
.huge.sm{font-size:56px}
.unitbig{color:rgba(243,246,241,.58);margin-top:10px}

/* la grille de pastilles qui s'allume au rythme du compteur */
.dots{
  display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin-top:24px;
  padding:0 4px;
}
.dots i{
  display:block;width:100%;aspect-ratio:1;border-radius:50%;
  background:rgba(143,238,194,.13);transition:.28s;
}
.dots i.on{background:var(--gold);box-shadow:0 0 8px rgba(63,203,140,.55)}

.sepdark{height:1px;background:rgba(143,238,194,.18);margin:30px 0}

/* la nuance sous la promesse : visible, pas cachée en petit gris */
.nuance{
  display:block;margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(143,238,194,.24);
  font-size:13.5px;line-height:1.5;color:rgba(243,246,241,.66);
}

/* ==========================================================================
   V4 · MENTION DE CADRE, posée à un moment stratégique de l'onboarding
   ========================================================================== */
.cadre{
  display:flex;gap:13px;align-items:flex-start;margin-top:20px;
  background:linear-gradient(168deg,rgba(63,203,140,.1),rgba(63,203,140,.03));
  border:1px solid rgba(40,160,106,.3);border-radius:var(--rl);padding:16px 17px;
}
.cadre .m{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--green2);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
}
.cadre b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:5px;font-weight:700}
.cadre span{display:block;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* ==========================================================================
   V4 · BARRE DE NAVIGATION BASSE · retour discret sous le bouton principal
   ========================================================================== */
.navbas{display:flex;flex-direction:column;align-items:center;gap:2px}
.navbas .cta{margin-bottom:2px}
.retour{
  background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:13.5px;color:var(--muted2);padding:11px 16px;border-radius:100px;
  transition:.15s;
}
.retour:hover{color:var(--green);background:rgba(63,203,140,.09)}
.screen-dark .retour{color:rgba(243,246,241,.5)}
.screen-dark .retour:hover{color:var(--gold3);background:rgba(143,238,194,.1)}

/* prix annoncé haut de paywall */
.prixhaut{
  display:flex;align-items:baseline;justify-content:center;gap:9px;margin-top:14px;
}
.prixhaut b{
  font-family:var(--serif);font-size:34px;font-weight:700;letter-spacing:-.035em;color:var(--green);
}
.prixhaut s{color:var(--muted2);font-size:16px}
.prixhaut span{font-size:14px;color:var(--muted)}

/* ==========================================================================
   V5 · LANDING · dégradé vert ET jaune, étoiles Trustpilot
   ========================================================================== */
:root{
  --jaune:#F2C14E;
  --jaune2:#D9A62F;
  --jaune3:#FCE9B4;
}

.hero3{position:relative;isolation:isolate}
.hero3:before{
  content:'';position:absolute;left:-24px;right:-24px;top:-120px;height:660px;z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(58% 42% at 22% 8%,rgba(242,193,78,.42),transparent 68%),
    radial-gradient(64% 46% at 82% 22%,rgba(63,203,140,.40),transparent 70%),
    linear-gradient(178deg,rgba(20,96,63,.16),transparent 62%);
}

/* les étoiles restent jaunes : c'est le code de confiance que tout le monde lit */
.stars{color:var(--jaune2)}
.avis .stars,.starnote .stars{color:var(--jaune2)}
.starnote{
  background:rgba(255,255,255,.62);border:1px solid var(--line);
  border-radius:100px;padding:9px 16px;width:fit-content;margin:20px auto 0;
  backdrop-filter:blur(6px);
}

/* emplacement de l'image du hero */
.heroimg{
  width:100%;max-width:300px;margin:0 auto 26px;aspect-ratio:1/1;
  border-radius:34px;overflow:hidden;position:relative;
  background:linear-gradient(168deg,rgba(242,193,78,.22),rgba(63,203,140,.22));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 22px 50px rgba(12,29,21,.14);
  display:flex;align-items:center;justify-content:center;
}
.heroimg img{width:100%;height:100%;object-fit:cover;display:block}
.heroimg .ph{
  font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted2);
  text-align:center;line-height:1.7;padding:0 24px;
}

/* emplacement de l'image de l'écran cerveau */
.ecranimg{
  width:100%;margin:22px 0 4px;aspect-ratio:4/3;border-radius:24px;overflow:hidden;
  background:rgba(143,238,194,.07);border:1px solid rgba(143,238,194,.22);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.ecranimg img{width:100%;height:100%;object-fit:cover;display:block}
.ecranimg .ph{
  font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:rgba(143,238,194,.5);text-align:center;line-height:1.8;padding:0 26px;
}

/* ==========================================================================
   V5 · INDICATEUR DE DÉFILEMENT
   ========================================================================== */
.scrollhint{
  position:absolute;left:0;right:0;bottom:16px;z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  pointer-events:none;transition:opacity .35s;
}
.scrollhint.gone{opacity:0}
.scrollhint span{
  font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
  color:var(--muted2);
  background:rgba(255,255,255,.82);border:1px solid var(--line);
  border-radius:100px;padding:7px 15px;backdrop-filter:blur(8px);
}
.scrollhint i{
  display:block;width:11px;height:11px;border-right:2px solid var(--muted2);
  border-bottom:2px solid var(--muted2);transform:rotate(45deg);
  animation:glisse 1.5s ease-in-out infinite;
}
.scrollhint.surdark span{
  color:var(--gold3);background:rgba(12,29,21,.55);border-color:rgba(143,238,194,.28);
}
.scrollhint.surdark i{border-color:var(--gold3)}
@keyframes glisse{
  0%,100%{transform:rotate(45deg) translate(0,0);opacity:.45}
  50%{transform:rotate(45deg) translate(3px,3px);opacity:1}
}
@media (prefers-reduced-motion:reduce){.scrollhint i{animation:none}}

/* ==========================================================================
   V5 · ÉCRANS SOMBRES ALLÉGÉS
   Seul l'écran du coût garde l'aplat vert plein. Les autres passent sur
   fond clair avec le même dégradé que le reste du parcours.
   ========================================================================== */
.screen-dark.clair{background:transparent}
.screen-dark.clair:before{display:none}
.screen-dark.clair h1,.screen-dark.clair h2{color:var(--ink)}
.screen-dark.clair .sous{color:var(--muted)}
.screen-dark.clair .foot,.screen-dark.clair .src{color:var(--muted2)}
.screen-dark.clair .kicker{color:var(--gold2)}
.screen-dark.clair .back{color:var(--muted)}
.screen-dark.clair .bar{background:rgba(12,29,21,.13)}
.screen-dark.clair .bar i{background:linear-gradient(90deg,var(--green),var(--green3))}
.screen-dark.clair .cta{
  background:linear-gradient(180deg,var(--green2),var(--green));color:#fff;
  box-shadow:0 12px 28px rgba(20,96,63,.26);
}
.screen-dark.clair .cta:hover{background:linear-gradient(180deg,#228D5D,#176946)}
.screen-dark.clair .retour{color:var(--muted2)}
.screen-dark.clair .bz{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(242,245,241,.8));
  border-color:var(--line);
}
.screen-dark.clair .bz b{color:var(--ink)}
.screen-dark.clair .bz span{color:var(--muted)}
.screen-dark.clair .bz.on{
  background:linear-gradient(180deg,rgba(63,203,140,.15),rgba(63,203,140,.05));
  border-color:var(--green3);
}
.screen-dark.clair .bz.on b{color:var(--green)}
.screen-dark.clair .etude{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(242,245,241,.82));
  border-color:var(--line);
}
.screen-dark.clair .etude .n{color:var(--green)}
.screen-dark.clair .etude .t{color:var(--ink)}
.screen-dark.clair .etude .s{color:var(--muted2)}
.screen-dark.clair .promesse{
  background:linear-gradient(180deg,rgba(63,203,140,.13),rgba(63,203,140,.04));
  border-color:rgba(40,160,106,.32);color:var(--ink);
}
.screen-dark.clair .nuance{border-top-color:rgba(40,160,106,.3);color:var(--muted)}
.screen-dark.clair .huge{
  background:linear-gradient(168deg,var(--green3),var(--green));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.screen-dark.clair .unitbig{color:var(--muted2)}
.screen-dark.clair .benef{color:var(--ink)}
.screen-dark.clair .benef .m{background:rgba(63,203,140,.2);color:var(--green)}
.screen-dark.clair input[type=range]{
  background:linear-gradient(90deg,var(--green3) 0%,var(--green3) var(--p,40%),var(--line2) var(--p,40%));
}
.screen-dark.clair input[type=range]::-webkit-slider-thumb{background:#fff;border-color:var(--green2)}
.screen-dark.clair .agree-ends,.screen-dark.clair .slide-ends{color:var(--muted2)}

/* le sujet annoncé au-dessus de l'anneau d'analyse */
.theme{
  text-align:center;margin-top:20px;
  font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:-.03em;
  color:var(--green);
}
.ring{margin-top:18px}
.pctring{
  font-family:var(--serif);font-size:30px;font-weight:700;letter-spacing:-.035em;
  color:var(--green);
}
.steps{margin-top:26px}

/* le bloc de plans du haut de paywall */
[data-plans-haut]{margin-top:18px}

/* les emplacements d'image vides ne doivent pas afficher l'icône cassée */
[hidden]{display:none !important}

/* le repère de défilement se détache sur un voile, il ne mange plus le contenu */
.scrollhint:before{
  content:'';position:absolute;left:0;right:0;bottom:-20px;height:120px;z-index:-1;
  background:linear-gradient(0deg,var(--cream) 30%,rgba(242,245,241,0));
}
.scrollhint.surdark:before{
  background:linear-gradient(0deg,var(--deep) 30%,rgba(15,55,40,0));
}

/* l'image ne doit pas repousser le titre hors du premier écran */
.heroimg{max-width:236px;aspect-ratio:5/4;margin-bottom:22px;border-radius:28px}
.hero3{min-height:660px;padding-top:8px}
.hero3 .pill{margin-bottom:20px}

/* ==========================================================================
   V6 · PALETTE RECALÉE SUR L'APP RÉELLE
   Le blanc verdi faisait clinique. On revient au crème chaud et au vert
   plus doux du Hypno Studio, et le dégradé descend du vert vers le jaune.
   ========================================================================== */
:root{
  --cream:#FAF6EE;
  --cream2:#F2EDE1;
  --cream3:#E7E0D1;
  --white:#FFFDF9;
  --ink:#182A22;
  --deep:#20493A;
  --green:#2C5545;
  --green2:#376A55;
  --green3:#4A8C70;
  --gold:#5FB88E;
  --gold2:#2F6B52;
  --gold3:#A6DCC0;
  --muted:#5B6B62;
  --muted2:#8B978E;
  --line:#E3DCCC;
  --line2:#CFC5B1;
  --alert:#B4553A;
  --jaune:#E9CE8C;
  --jaune2:#C39A3E;
  --jaune3:#F6E8C4;
}

/* vert en haut, jaune en bas, tous les deux désaturés */
#screen:before{
  height:100%;
  background:
    linear-gradient(180deg,
      rgba(44,85,69,.26) 0%,
      rgba(74,140,112,.15) 22%,
      rgba(233,206,140,.13) 62%,
      rgba(233,206,140,.24) 100%);
}
.screen-dark:before{
  background:
    radial-gradient(120% 80% at 50% -18%,rgba(95,184,142,.26),transparent 62%),
    linear-gradient(180deg,rgba(166,220,192,.09),transparent 55%);
}

/* le hero porte le même geste, en plus marqué */
.hero3:before{
  left:-24px;right:-24px;top:-140px;height:100%;min-height:820px;
  background:
    radial-gradient(70% 34% at 76% 6%,rgba(74,140,112,.34),transparent 68%),
    linear-gradient(180deg,
      rgba(44,85,69,.30) 0%,
      rgba(74,140,112,.16) 30%,
      rgba(233,206,140,.20) 70%,
      rgba(233,206,140,.34) 100%);
}

/* ==========================================================================
   V6 · HERO PLEIN CADRE, façon Opal
   L'image occupe tout le format 9/16 du téléphone, le texte passe dessus.
   ========================================================================== */
.hero3{
  min-height:780px;padding:0 0 34px;justify-content:flex-end;
  margin:-72px -24px 0;padding-left:24px;padding-right:24px;padding-top:100px;
}
.herobg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.herobg img{width:100%;height:100%;object-fit:cover;display:block}
.herobg .veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(24,42,34,.30) 0%,
    rgba(24,42,34,.06) 26%,
    rgba(250,246,238,.62) 58%,
    var(--cream) 88%);
}
.herobg .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 40px;
  font-size:12px;letter-spacing:1.4px;text-transform:uppercase;line-height:1.9;
  color:var(--muted2);
}
.hero3 .pill{background:rgba(255,253,249,.82)}

/* ==========================================================================
   V6 · LES QUATRE ÉTAPES · une vraie séquence, reliée par un filet
   ========================================================================== */
.steps4{position:relative;padding-left:6px}
.steps4:before{
  content:'';position:absolute;left:32px;top:34px;bottom:34px;width:2px;
  background:linear-gradient(180deg,var(--green3),rgba(233,206,140,.7));
  border-radius:2px;
}
.step4{
  background:none;border:0;box-shadow:none;padding:10px 0 16px;gap:18px;align-items:flex-start;
}
.step4 .no{
  width:52px;height:52px;font-size:16px;
  background:var(--cream);color:var(--green);
  border:2px solid var(--green3);box-shadow:0 0 0 5px var(--cream);
}
.step4 b{font-size:18.5px}
.step4 span{font-size:14.5px}
.step4:last-child .no{
  background:linear-gradient(160deg,var(--green3),var(--green));color:#fff;border-color:transparent;
}

/* ==========================================================================
   V7 · PALETTE RÉCHAUFFÉE
   La v6 était juste, mais éteinte : verts un peu gris, jaune un peu sale,
   filets presque invisibles. On garde exactement le même parti pris (crème
   chaud, vert chaleureux, jaune en bas) en remontant la luminosité des verts
   et en réchauffant le jaune vers l'abricot. Aucun token n'est ajouté, tous
   les usages existants en profitent.
   ========================================================================== */
:root{
  --cream:#FBF8F1;      /* crème un cran plus lumineux, toujours chaud */
  --cream2:#F5F0E4;
  --cream3:#EAE3D3;
  --white:#FFFEFB;
  --ink:#15291F;
  --deep:#1B4636;
  --green:#2B5B47;
  --green2:#38795F;     /* +8 % de luminosité : les titres respirent */
  --green3:#55A583;     /* le jade vivant, c'est lui qui porte l'accent */
  --gold:#6FC79E;       /* accent sur fond sombre */
  --gold2:#2E7457;      /* accent lisible sur fond clair */
  --gold3:#B0E5C9;
  --muted:#576B60;
  --muted2:#899690;
  --line:#E7E0D0;
  --line2:#D3C9B5;
  --alert:#BB5A3C;
  --jaune:#EFD199;      /* réchauffé vers l'abricot, moins moutarde */
  --jaune2:#C6993C;
  --jaune3:#F9EDCE;
}

/* le fond général gagne un peu de présence sans virer au coloré */
#screen:before{
  height:100%;
  background:
    radial-gradient(90% 40% at 78% -4%,rgba(85,165,131,.20),transparent 66%),
    linear-gradient(180deg,
      rgba(43,91,71,.24) 0%,
      rgba(85,165,131,.13) 24%,
      rgba(239,209,153,.14) 62%,
      rgba(239,209,153,.28) 100%);
}
.screen-dark:before{
  background:
    radial-gradient(120% 80% at 50% -18%,rgba(111,199,158,.28),transparent 62%),
    linear-gradient(180deg,rgba(176,229,201,.10),transparent 55%);
}

/* ==========================================================================
   V7 · HERO TYPOGRAPHIQUE · l'image est abandonnée
   Plus de plein cadre 9/16, plus de voile, plus de placeholder. Le hero
   redevient un bloc de texte centré, calibré comme une affiche : le titre
   descend à 42 px pour tenir en trois lignes maximum sur 390 px de large,
   la ligne d'explication est bornée à 300 px pour éviter les veuves, et la
   seconde ligne passe en retrait pour ne pas concurrencer la première.
   ========================================================================== */
.hero3{
  min-height:0;margin:0;padding:14px 0 34px;
  justify-content:flex-start;
}
.herobg{display:none}

/* la nappe de couleur reste, mais recentrée derrière du texte seul.
   Deux taches de jade en haut plutôt qu'un aplat vert sombre : sur du crème,
   l'aplat tournait au gris kaki dès qu'il n'y avait plus d'image dessous. */
.hero3:before{
  left:-24px;right:-24px;top:-150px;height:auto;min-height:700px;
  background:
    radial-gradient(62% 28% at 80% 14%,rgba(85,165,131,.38),transparent 68%),
    radial-gradient(56% 24% at 18% 6%,rgba(111,199,158,.32),transparent 70%),
    radial-gradient(64% 28% at 26% 36%,rgba(239,209,153,.36),transparent 72%),
    linear-gradient(180deg,
      rgba(56,121,95,.18) 0%,
      rgba(85,165,131,.10) 34%,
      rgba(239,209,153,.16) 72%,
      rgba(250,246,238,0) 100%);
}

.hero-txt .pill{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.74));
  border-color:rgba(85,165,131,.38);color:var(--gold2);
  margin-bottom:26px;
}
.hero-txt h1{
  font-size:42px;line-height:1.02;letter-spacing:-.038em;
  max-width:330px;margin:0 auto;
}
/* le clip sur texte coupe les jambages quand l'interligne est aussi serré :
   on rend 0,07 em au bloc, invisible à l'œil, suffisant pour le « g ». */
.hero-txt h1 .grad{
  background:linear-gradient(94deg,var(--green3) 0%,#79C9A4 40%,var(--green2) 78%,var(--green) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.07em;
}
.hero-txt .sous{
  max-width:300px;margin:20px auto 0;font-size:16px;line-height:1.5;color:var(--muted);
}
.hero-txt .sous2{
  max-width:300px;margin:9px auto 0;
  font-size:14.5px;line-height:1.45;color:var(--muted2);
}
.hero-txt .cta{margin-top:30px}
.hero-txt .starnote{margin-top:18px}
.hero-txt h1{margin-top:16px}

/* ==========================================================================
   V7 · ÉCRAN VERROUILLÉ DU HERO
   Un téléphone de trois quarts face, fond d'écran = le paysage du hero,
   et quatre notifications qui débordent du cadre à gauche et à droite.
   Le débordement est le geste : c'est ce qui fait sortir le produit
   de l'écran et lui donne du relief sur un fond plat.
   ========================================================================== */
/* Bloc en 4:5. Le téléphone est plus haut que le bloc, donc son bas sort du
   cadre et le fondu le mange : on montre le produit sans avoir à montrer un
   écran entier, et le visuel se raccorde au fond de la page. */
/* text-align:left explicite : le hero est centré, et sans ça tout le contenu
   du téléphone et des notifications héritait du centrage. */
.lockphone{position:relative;width:100%;aspect-ratio:4/5;margin:10px 0 0;text-align:left}
/* c'est ce conteneur qui coupe le bas du téléphone, au ras du bloc 4:5.
   Il déborde sur les côtés pour ne pas rogner l'ombre portée.
   La coupe se fait au masque, pas par un voile crème posé par-dessus : le
   fond de la page est un dégradé, donc un aplat crème laissait une bande
   visible au raccord. Là le téléphone se dissout et le fond passe au travers. */
.lp-clip{
  position:absolute;left:-30px;right:-30px;top:0;bottom:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,.62) 80%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,.62) 80%,transparent 100%);
}
.lp-body{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:250px;height:520px;
  border-radius:40px;background:linear-gradient(160deg,#33463C,#131F19);
  padding:7px;box-shadow:0 26px 60px rgba(21,41,31,.26),0 0 0 1px rgba(21,41,31,.10);
}
.lp-screen{
  position:relative;height:100%;border-radius:34px;overflow:hidden;
  background:var(--cream);padding:14px 12px;
  display:flex;flex-direction:column;gap:9px;
}

.lp-head{display:flex;align-items:center;gap:7px;justify-content:center;margin-bottom:2px}
.lp-head .mark{width:17px;height:17px}
.lp-head .mark:after{left:8px;width:1.5px}
.lp-head b{display:block;font-family:var(--serif);font-size:12.5px;color:var(--ink);line-height:1.1}
.lp-head span{display:block;font-size:8.5px;color:var(--muted2);letter-spacing:.04em}

.lp-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:9px 10px 10px}
.lp-lab{
  font-size:8px;letter-spacing:1.1px;text-transform:uppercase;font-weight:700;
  color:var(--gold2);margin-bottom:7px;
}
.lp-q{font-size:8.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.lp-in{
  background:var(--cream2);border:1px solid var(--line);border-radius:9px;
  padding:6px 8px;font-size:9px;line-height:1.35;color:var(--ink);margin-bottom:7px;
}
.lp-in.tall{margin-bottom:0;line-height:1.42}
.lp-card:last-of-type .lp-in{margin-bottom:0}
.lp-go{
  margin-top:2px;background:linear-gradient(180deg,#3F8A6C,var(--green));color:#fff;
  border-radius:100px;text-align:center;padding:9px;font-family:var(--serif);
  font-size:11px;font-weight:640;
}

/* les notifications sortent du téléphone, à gauche puis à droite, décalées
   en hauteur. C'est ce décalage qui donne la profondeur, pas une ombre. */
.lp-notifs{position:absolute;inset:0;z-index:4;pointer-events:none}
.lp-n{
  position:absolute;width:184px;
  display:flex;gap:7px;align-items:flex-start;
  background:rgba(255,254,251,.94);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.85);border-radius:15px;padding:7px 10px 8px;
  box-shadow:0 12px 28px rgba(21,41,31,.2);
}
.lp-n:nth-child(1){left:-18px;top:9%;transform:rotate(-1.4deg)}
.lp-n:nth-child(2){right:-18px;top:37%;transform:rotate(1.2deg)}
.lp-n:nth-child(3){left:-12px;top:64%;transform:rotate(-.9deg)}
.lp-n .mark{width:16px;height:16px;margin-top:1px;flex:none}
.lp-n .mark:after{left:7px;width:1.4px}
.lp-txt{flex:1;min-width:0}
.lp-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:1px}
.lp-top b{font-size:9px;font-weight:700;letter-spacing:.02em;color:var(--green)}
.lp-top span{font-size:8px;color:var(--muted2);flex:none;letter-spacing:0;white-space:nowrap}
.lp-t{font-size:10.5px;font-weight:640;line-height:1.24;color:var(--ink);letter-spacing:-.012em}
.lp-d{font-size:9.5px;line-height:1.3;color:var(--muted);margin-top:1px}

/* ==========================================================================
   V8 · GRAPHIQUES
   Deux formes, réutilisées partout : barres comparées et curseur sur un axe.
   La barre mise en avant est la seule en vert plein, les autres restent en
   crème : c'est le contraste qui fait lire la comparaison, pas la couleur.
   ========================================================================== */
.chart{
  background:var(--white);border:1px solid var(--line);border-radius:var(--rl);
  padding:17px 16px 15px;margin-top:18px;
  box-shadow:0 2px 8px rgba(21,41,31,.045);
}
.chart-t{
  font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;font-weight:700;
  color:var(--muted2);line-height:1.5;margin-bottom:16px;
}
.bars{display:flex;align-items:flex-end;gap:14px;height:142px}
.bar-c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bar-v{
  font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:-.02em;
  color:var(--muted2);text-align:center;margin-bottom:7px;
}
.bar-i{
  background:var(--cream3);border-radius:10px 10px 5px 5px;
  transform-origin:bottom;animation:barup .9s cubic-bezier(.2,.7,.3,1) both;
}
.bar-c.on .bar-v{color:var(--gold2)}
.bar-c.on .bar-i{background:linear-gradient(180deg,var(--green3),var(--green))}
@keyframes barup{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.bar-i{animation:none}}

.bar-ls{display:flex;gap:14px;margin-top:10px}
.bar-l{flex:1;font-size:11.5px;line-height:1.32;color:var(--muted2);text-align:center}
.bar-l.on{color:var(--green2);font-weight:640}

/* l'échelle : un axe, deux extrêmes, un curseur là où l'état se situe */
.scale{position:relative;padding-top:30px}
.scale-tag{
  position:absolute;transform:translateX(-50%);white-space:nowrap;
  background:var(--green);color:var(--cream);font-size:11px;font-weight:640;
  padding:5px 11px;border-radius:100px;margin-top:-30px;
}
.scale-bar{
  position:relative;height:8px;border-radius:8px;
  background:linear-gradient(90deg,var(--jaune3),var(--cream3) 52%,var(--green3));
}
.scale-bar i{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:18px;height:18px;border-radius:50%;background:var(--green);
  border:3px solid var(--white);box-shadow:0 2px 8px rgba(21,41,31,.22);
}
.scale-ends{display:flex;justify-content:space-between;margin-top:11px;font-size:11.5px;color:var(--muted2)}

/* ==========================================================================
   V9 · LE VISUEL DE L'APP DANS LE HERO
   Pas de détourage : le fond du visuel est déjà le dégradé Kintsu. On fond
   ses quatre bords, il se raccorde tout seul, et les ombres portées des
   notifications restent intactes. Un détourage les aurait hachées.
   Le bas remonte de 46 px pour que le titre arrive tout de suite après.
   ========================================================================== */
/* Les marges négatives ne rognent rien : le haut et le bas du visuel sont
   du fond vide, et le masque les efface déjà. Elles servent uniquement à
   remonter le titre au-dessus de la ligne de flottaison, pour qu'on voie
   le titre, la phrase et le bouton sans avoir à faire défiler. */
/* Le visuel porte du vide en haut et en bas, hors du téléphone. Plutôt que
   de tirer sur les marges jusqu'à faire chevaucher le titre, on rogne ce
   vide : hauteur fixe, cadrage sur la zone utile. Le bloc perd 120 px sans
   qu'aucune notification ne soit coupée, et le titre remonte d'autant. */
/* v9 · la marque du hero passe en plus gros : c'est la seule chose au-dessus
   du visuel, elle doit poser le nom avant tout le reste. */
.nav3 .brand{font-size:22px}
.nav3 .brand .mark{width:28px;height:28px}

.hypno{margin:0 0 -14px;position:relative}
/* v9.7 · le visuel est maintenant un vrai PNG-32 detoure : le damier peint
   dans les pixels a ete retire et les ombres portees converties en noir
   semi-transparent. Plus besoin du fondu lateral qui servait a effacer un
   fond opaque, le degrade du hero passe directement derriere le telephone.
   Il ne reste qu'un fondu en bas, pour que la coupe ne soit pas nette. */
.hypno img{
  display:block;width:78%;max-width:300px;margin:0 auto;height:352px;
  object-fit:cover;object-position:center top;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 76%,transparent 100%);
}

/* ==========================================================================
   V9 · LA MARQUE
   Le rond barré d'un trait droit ne ressemblait pas au logo. C'est un galet
   organique traversé d'un trait ondulé doré. Le trait passe par un masque
   SVG plutôt qu'un pseudo-élément rectangulaire.
   ========================================================================== */
.mark{
  border-radius:56% 44% 52% 48% / 46% 40% 60% 54%;
  background:linear-gradient(150deg,var(--green2),var(--deep));
}
.mark:after{
  inset:0;top:0;bottom:0;left:0;width:auto;
  background:var(--jaune);transform:none;border-radius:0;
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.9 2.2c-2.4 3.7-2.4 5.9-.6 8.6 1.9 2.8 1.9 5.3-1 11' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.9 2.2c-2.4 3.7-2.4 5.9-.6 8.6 1.9 2.8 1.9 5.3-1 11' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ==========================================================================
   V9 · LES CHIFFRES EN GRAND · écran autorité
   ========================================================================== */
.fait{padding:22px 0 20px;border-bottom:1px solid var(--line)}
.fait:last-of-type{border-bottom:0}
.fait-n{
  font-family:var(--serif);font-size:52px;font-weight:700;letter-spacing:-.04em;
  line-height:1;color:var(--green2);margin-bottom:10px;
}
.fait-t{font-size:16px;line-height:1.5;color:var(--ink)}
.fait-s{font-size:11.5px;line-height:1.5;color:var(--muted2);margin-top:9px}

/* ==========================================================================
   V9 · LES DEUX JALONS DE LA JAUGE
   Au tiers et aux deux tiers. Sans eux la barre avance sans qu'on sache
   vers quoi ; avec eux le parcours se lit en trois temps, et chaque jalon
   franchi est une petite récompense. Ils sont dessinés en fond de la barre,
   pas en éléments : la barre a un overflow:hidden qui les rognerait.
   ========================================================================== */
/* Les jalons sont posés PAR-DESSUS le remplissage, pas en fond : un jalon
   franchi doit rester visible, sinon on perd l'information « j'ai passé
   une étape » au moment précis où elle vaut quelque chose. */
.bar{overflow:visible;position:relative}
.bar i{border-radius:3px}
.bar:after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 33.33% 50%,var(--jaune2) 0 2.7px,transparent 2.7px),
    radial-gradient(circle at 66.66% 50%,var(--jaune2) 0 2.7px,transparent 2.7px);
}
.screen-dark .bar:after{
  background:
    radial-gradient(circle at 33.33% 50%,var(--jaune) 0 2.7px,transparent 2.7px),
    radial-gradient(circle at 66.66% 50%,var(--jaune) 0 2.7px,transparent 2.7px);
}

/* la touche de jaune demandée, posée sur les repères de lecture */
.kicker{color:var(--jaune2)}
.chart-t{color:var(--jaune2)}

/* la ligne de confiance, sous le bouton, sans encadré : deux lignes de texte
   pèsent moins lourd qu'une pastille et laissent le bouton seul en avant */
.trustline{
  margin:14px auto 0;max-width:320px;text-align:center;
  font-size:13px;line-height:1.45;color:var(--muted2);
}
.trustline b{color:var(--muted);font-weight:700}

/* v9 · les chiffres se lisent centrés, pas alignés à gauche */
.fait,.etude,.etude .n,.etude .t,.etude .s{text-align:center}
.fait-n{margin-left:auto;margin-right:auto}

/* v9 · connexion Google sur l'écran de bilan */
.cta.google{
  background:var(--white);color:var(--ink);border:1.5px solid var(--line2);
  box-shadow:0 2px 8px rgba(21,41,31,.06);
  display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;
}
.cta.google:hover{background:#fff;border-color:var(--muted2)}
.g-ic{
  flex:none;width:19px;height:19px;border-radius:50%;
  background:conic-gradient(from -45deg,#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0);
  position:relative;
}
.g-ic:after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--white)}
.ou{display:flex;align-items:center;gap:12px;margin:18px 0 4px;color:var(--muted2);font-size:12.5px}
.ou:before,.ou:after{content:'';flex:1;height:1px;background:var(--line)}

/* la nuance qui borne une comparaison, en encadré discret */
.nuance{
  margin-top:16px;padding:13px 14px;border-radius:14px;
  background:var(--jaune3);border:1px solid rgba(198,153,60,.28);
  font-size:13.5px;line-height:1.5;color:var(--ink);
}

/* liste des moments du quotidien · écran de réponse sur la réceptivité */
.quot{display:flex;flex-direction:column;gap:13px}
.quot-i{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--ink)}
.quot-i i{
  flex:none;width:7px;height:7px;border-radius:50%;margin-top:7px;
  background:var(--jaune2);
}

/* le fondu qui adoucit la coupe du bas et raccorde le visuel à la page */
.lp-fade{
  position:absolute;left:-24px;right:-24px;bottom:0;height:190px;z-index:5;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(251,248,241,0) 0%,rgba(251,248,241,.30) 34%,rgba(251,248,241,.86) 68%,var(--cream) 96%);
}

/* ==========================================================================
   V7 · LES SURFACES · un peu de relief, sinon tout est plat sur le crème
   ========================================================================== */
.f6,.avis,.opt{
  box-shadow:0 2px 8px rgba(21,41,31,.045);
}
.f6{border-color:rgba(211,201,181,.8)}
.f6 svg{stroke:var(--green3)}
.opt:hover{border-color:var(--green3);background:#fff;box-shadow:0 4px 14px rgba(21,41,31,.07)}
.opt.on{
  border-color:var(--green3);background:#F2F8F3;
  box-shadow:0 0 0 1px var(--green3) inset,0 4px 14px rgba(56,121,95,.12);
}
.cta{
  background:linear-gradient(180deg,#3F8A6C,var(--green));
  box-shadow:0 12px 28px rgba(43,91,71,.26);
}
.cta:hover{background:linear-gradient(180deg,#489A79,#2F6650)}
.step4 .no{box-shadow:0 0 0 5px var(--cream),0 3px 10px rgba(21,41,31,.06)}

/* le filet de la séquence était une seule barre posée sur toute la hauteur du
   bloc, bornée par `bottom:34px`. Dès que le texte de la dernière étape
   dépassait la hauteur de son rond, la barre continuait dans le vide sous
   le 04. On le trace maintenant par segments : un par étape sauf la dernière,
   du centre de son rond au centre du suivant.
   36px = 10px de padding haut + 26px de rayon.
   47px = 11px d'écart entre étapes + 10px de padding + 26px de rayon. */
.steps4:before{display:none}
.step4{position:relative}
.step4:not(:last-child):before{
  content:'';position:absolute;left:25px;top:36px;bottom:-47px;width:2px;
  border-radius:2px;z-index:0;
  background:linear-gradient(180deg,var(--green3),rgba(239,209,153,.85));
}
.step4 .no{position:relative;z-index:1}

/* le prix barré cassait en plein milieu et la ligne orpheline « 179 € »
   passait sous le prix par jour : il reste solidaire, quitte à passer
   à la ligne en entier */
.plan .sous{font-size:12px;line-height:1.44}
.plan .sous s{display:inline-block;white-space:nowrap}

/* le pied de landing était resté sur les verts codés en dur de la v4, et son
   bouton menthe faisait bonbon. Il repasse sur les tokens, et le bouton
   devient crème : c'est la seule surface claire du bloc, donc c'est elle
   qu'on regarde. */
.final3{
  background:linear-gradient(168deg,var(--green) 0%,var(--deep) 56%,#143526 100%);
}
.final3:before{
  background:
    radial-gradient(88% 56% at 50% 0%,rgba(111,199,158,.30),transparent 66%),
    radial-gradient(74% 42% at 86% 104%,rgba(239,209,153,.14),transparent 70%);
}
.final3 .cta{
  background:linear-gradient(180deg,var(--cream),#F0E9D9);color:var(--deep);
  box-shadow:0 14px 32px rgba(8,32,23,.34);
}
.final3 .cta:hover{background:linear-gradient(180deg,#fff,var(--cream2))}

/* ==========================================================================
   V7 · DIAGRAMME DE L'ÉCRAN CERVEAU
   Remplace les deux cases de texte et le crochet en pointillés.
   La comète tourne lentement : c'est la seule chose qui bouge sur l'écran,
   donc c'est elle qu'on regarde, et elle dit « ça continue sans toi ».
   ========================================================================== */
.brainloop{display:block;width:100%;margin:26px 0 0;font-family:var(--sans);overflow:visible}
.bl-box{fill:rgba(176,229,201,.07);stroke:rgba(176,229,201,.34);stroke-width:1.5}
.bl-k{font-size:10px;letter-spacing:1.5px;font-weight:700;fill:var(--gold3);text-anchor:middle}
.bl-t{font-size:12.5px;fill:rgba(250,246,238,.78);text-anchor:middle}
.bl-sm{font-size:11.5px;fill:rgba(250,246,238,.6);text-anchor:start}
.bl-line{stroke:var(--gold3);stroke-width:1.5}
.bl-wall{stroke:rgba(250,246,238,.28);stroke-width:1.5;stroke-dasharray:4 6}
.bl-x{stroke:rgba(250,246,238,.55);stroke-width:1.6;stroke-linecap:round}
.bl-track{fill:none;stroke:rgba(176,229,201,.2);stroke-width:2}
.bl-comet{
  fill:none;stroke:var(--gold3);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:104 348;
  transform-box:view-box;transform-origin:171px 224px;
  animation:brainspin 9s linear infinite;
}
.bl-c{font-family:var(--serif);font-size:16px;font-weight:640;fill:var(--cream);text-anchor:middle}
.bl-cs{font-size:12px;fill:rgba(250,246,238,.6);text-anchor:middle}
@keyframes brainspin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bl-comet{animation:none}}
.steps4:before{background:linear-gradient(180deg,var(--green3),rgba(239,209,153,.85))}
.starnote{background:rgba(255,255,255,.78);border-color:rgba(211,201,181,.9)}

/* ==========================================================================
   V9.7 · DESKTOP
   Le prototype tourne dans un cadre de 390 px : une media query sur le
   viewport ne se déclencherait donc jamais. On passe par une container query
   sur #app, qui réagit à la largeur réelle du contenu, que le cadre fasse
   390 ou 1180 px. Pour kintsu.care, remplacer @container par @media suffit,
   les règles ne changent pas d'une ligne.
   Bascule : bouton Desktop du panneau debug, ou ?d=1 dans l'URL.
   ========================================================================== */
#app{container-type:inline-size}

body.desk #device{width:1180px;height:768px;border-radius:16px;padding:8px}
body.desk #screen{border-radius:10px}
body.desk #stage{align-items:flex-start}

@container (min-width:760px){

  /* le parcours garde une colonne étroite : une question qui court sur
     1100 px devient illisible. Seule la landing s'élargit vraiment. */
  .wrap{max-width:620px;margin-left:auto;margin-right:auto}
  .chrome-row{max-width:620px;margin-left:auto;margin-right:auto}

  .landing-wrap{max-width:1080px;padding-left:40px;padding-right:40px}
  .landing-wrap .nav3{margin-left:-40px;margin-right:-40px;padding-left:40px;padding-right:40px}
  .landing-wrap .final3{margin-left:-40px;margin-right:-40px}

  /* le hero passe en deux colonnes, le téléphone à droite du texte.
     Flex et non grid : en grid, chaque paragraphe occupe sa propre ligne et
     l'image, qui les enjambe toutes, écarte le texte aux quatre coins. */
  .landing-wrap .hero3{
    display:flex;flex-direction:row-reverse;align-items:center;
    gap:60px;text-align:left;min-height:0;padding:54px 0 46px;
  }
  .landing-wrap .hero3 .hypno{flex:0 0 380px;margin:0}
  .landing-wrap .hero3 .hypno img{width:100%;max-width:380px;height:520px}
  .landing-wrap .hero3 .hero-col{flex:1 1 auto;min-width:0;max-width:530px}
  /* .hero-txt h1 est calé en 330 px centrés pour le mobile : on le libère */
  .landing-wrap .hero3 h1{font-size:52px;max-width:none;margin:0}
  /* la nappe de couleur déborde de 24 px, il en faut 40 avec ce padding */
  .landing-wrap .hero3:before{left:-40px;right:-40px}
  .landing-wrap .hero3 .sous{margin:18px 0 0;max-width:470px;font-size:17px}
  .landing-wrap .hero3 .cta{width:auto;padding-left:46px;padding-right:46px;margin-top:30px}
  .landing-wrap .hero3 .reassure{margin-left:0;margin-right:0;max-width:360px}
  .landing-wrap .hero3 .reassure .r1{justify-content:flex-start}
  .landing-wrap .hero3 .reassure .r2{text-align:left}

  /* les grilles respirent, rien d'autre ne change */
  .landing-wrap .steps4{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  /* le filet qui relie une étape à la suivante n'a plus de sens sur deux
     colonnes : il pend dans le vide sous 01 et sous 03. */
  .landing-wrap .step4:before{display:none}
  .landing-wrap .step4{align-items:center}
  .landing-wrap .feat6{grid-template-columns:repeat(3,1fr);gap:12px}
  .landing-wrap .avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .landing-wrap .avis-grid .avis{margin-bottom:0;height:100%}
  .landing-wrap .avis-grid>div{display:flex}
  /* un bouton de 1000 px de large ne ressemble plus à un bouton */
  .landing-wrap .final3 .cta{width:auto;min-width:330px;margin:0 auto}
  .landing-wrap .final3{padding-top:52px;padding-bottom:56px}
}

/* ==========================================================================
   V9.8 · HERO MOBILE RESSERRÉ
   Le bouton doit être visible sans défiler, et les deux lignes de réassurance
   avec lui. On gagne la place sur les marges, pas sur le corps du texte.
   ========================================================================== */
.hero3{padding:10px 0 24px}
.hero3 .sous{max-width:340px;margin-top:14px}
.hero3 .cta{margin-top:22px}

/* le bloc de réassurance sous le CTA · une carte, deux niveaux séparés par
   un filet. Sans cadre, les deux phrases cassaient au milieu d'un mot et
   laissaient « minutes » puis « ans de cabinet » orphelins et centrés. */
.reassure{
  margin:16px auto 0;max-width:322px;
  background:rgba(255,255,255,.66);border:1px solid var(--line);
  border-radius:15px;padding:11px 14px 12px;
}
.reassure .r1{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:13.5px;line-height:1.3;color:var(--muted);
}
.reassure .r1 b{color:var(--ink);font-weight:700}
.reassure .r1 i{font-style:normal;color:var(--line2);font-size:15px}
.reassure .r2{
  margin-top:8px;padding-top:9px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.5;color:var(--muted2);
}
.reassure .r2 b{color:var(--muted);font-weight:650}

/* ==========================================================================
   V9.9 · OUVERTURE SUR UN VRAI TÉLÉPHONE
   Jusqu'ici le prototype ne s'ouvrait proprement que sur un ordinateur :
   le cadre d'iPhone de 390 px et le panneau de 236 px débordaient de l'écran
   d'un mobile. Envoyé par message, il était illisible.
   Sous 900 px de large, on retire le cadre et le panneau, et l'application
   prend tout l'écran. C'est aussi la façon la plus juste de la juger.
   ========================================================================== */
@media (max-width:900px){
  body{display:block;overflow:auto;background:var(--cream)}
  #stage{display:block;padding:0;gap:0}
  #device{
    width:100%;height:100dvh;border-radius:0;padding:0;box-shadow:none;
  }
  #screen{border-radius:0}
  #debug{display:none}
}