/* ==========================================================================
   MAGNÉTIQUE · CHARTE COMMUNE
   Repris intégralement de test-de-frequence.html (fichier de référence).
   Ne rien modifier ici sans répercuter sur les autres funnels.
   ========================================================================== */

:root{
  --bg:#050505;
  --ink:#ffffff;
  --grey-1:#E8E8E8;
  --grey-2:#CBCBCB;
  --grey-3:#9E9E9E;
  --grey-4:#606060;
  --red:#C00000;
  /* DEUX ROUGES, ET C'EST NECESSAIRE. --red sert aux SURFACES : boutons,
     filets, aplats. Sur du texte il ne fait que 3,15:1 sur #050505 et
     echoue AA. --red-txt est le meme rouge remonte a 5,3:1, et c'est le
     seul autorise sur du texte. */
  --red-txt:#F51111;
  --red-soft:rgba(192,0,0,.12);
  --red-line:rgba(192,0,0,.38);
  --hair:rgba(255,255,255,.15);
  --hair-2:rgba(255,255,255,.26);
  --edge:rgba(255,255,255,.32);
  --card:rgba(255,255,255,.085);
  --card-2:rgba(255,255,255,.14);
  --sans:'Montserrat',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(20px,5.5vw,40px);
  --maxw:760px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.75;
}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1}
.glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 45% at 50% -8%, rgba(192,0,0,.16), transparent 62%),
    radial-gradient(60% 40% at 88% 108%, rgba(192,0,0,.07), transparent 60%);}
.wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- primitives ---------- */
.eyebrow{font-size:.63rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--grey-3);line-height:1.9}
.eyebrow .on{color:var(--red)}
h1,h2,h3{font-weight:900;text-transform:uppercase;letter-spacing:-.4px;line-height:1.08}
h1{font-size:clamp(1.85rem,7.4vw,3.05rem)}
h2{font-size:clamp(1.4rem,5.2vw,2.1rem)}
h3{font-size:clamp(.98rem,3.4vw,1.15rem);letter-spacing:.02em}
.red{color:var(--red)}
p{color:var(--grey-2);font-size:clamp(.9rem,3.5vw,.97rem);line-height:2.05}
p strong,li strong{color:var(--ink);font-weight:600}
p em{font-style:normal;color:var(--grey-1)}
.lead{color:var(--grey-1);font-size:clamp(.95rem,3.8vw,1.05rem);line-height:1.95}
.rule{height:1px;background:var(--hair);border:0;margin:0}
.tick{width:34px;height:2px;background:var(--red);margin:0 auto 34px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--red);color:#fff;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  padding:20px 34px;border-radius:100px;width:100%;max-width:400px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  box-shadow:0 0 0 0 rgba(192,0,0,0);
}
.btn:hover{background:#d40606;transform:translateY(-2px);box-shadow:0 14px 34px rgba(192,0,0,.28)}
.btn:active{transform:translateY(0)}
.btn:disabled{background:var(--grey-4);color:var(--grey-3);cursor:not-allowed;transform:none;box-shadow:none}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-ghost{background:none;border:1px solid var(--hair-2);color:var(--grey-1)}
.btn-ghost:hover{background:var(--card-2);border-color:var(--grey-4);box-shadow:none}
.btn-sm{padding:13px 24px;font-size:.66rem;letter-spacing:.14em}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- header ---------- */
header{position:relative;z-index:3;padding:clamp(18px,3.4vw,26px) var(--pad) 0;text-align:center}
.logo{display:block;margin:0 auto;width:clamp(150px,38vw,176px);aspect-ratio:560/91;
  background:url(data:image/png;base64,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) center/contain no-repeat}
.byline{margin-top:8px;font-size:.6rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--grey-3)}
.byline b{color:var(--red);font-weight:600}

/* ---------- sections ---------- */
section{position:relative;z-index:2}
.sec{padding:clamp(58px,9vw,88px) 0}
.sec-tight{padding:clamp(44px,7vw,66px) 0}
.center{text-align:center}

/* HERO */
.hero{padding:0 0 clamp(56px,10vw,86px);text-align:center}
.hero .fold{position:relative;display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100vh - var(--headh,80px));
  min-height:calc(100dvh - var(--headh,80px));
  padding-bottom:5vh}
.scrollcue{position:absolute;left:50%;bottom:clamp(22px,3.2vh,38px);color:var(--grey-3);line-height:0;
  transform:translateX(-50%);animation:bob 2.4s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
.hero h1{margin:18px 0 0}
.hero h1 span{display:block}
.hero .sub{max-width:34ch;margin:28px auto 0}
.reprise{max-width:44ch;font-size:.78rem;line-height:1.7;color:var(--grey-3);text-align:center}
.reprise button{background:none;border:0;color:var(--grey-2);font:inherit;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;padding:0}
.reprise button:hover{color:#fff}
.hero .cta-wrap{margin-top:54px;display:flex;flex-direction:column;align-items:center;gap:16px}
.hero .micro{font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-3)}
.meta-row{display:flex;justify-content:center;gap:0;margin-top:46px;background:var(--card);
  border:1px solid var(--edge);border-radius:18px}
.meta-row div{flex:1;padding:25px 8px;text-align:center}
.meta-row .n{font-weight:900;font-size:1.12rem;color:#fff;letter-spacing:-.3px}
.meta-row .l{font-size:.56rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-3);margin-top:5px}

.hero .wrap{max-width:1060px}
h1.long{font-size:clamp(1.55rem,5.9vw,2.85rem);line-height:1.1}
.hero .subs{max-width:54ch;margin:clamp(40px,8.5vw,60px) auto 0;display:flex;flex-direction:column;gap:15px}
.hero .subs p{margin:0}
.hero .subs .hit{color:#fff;font-weight:500}
.hero .meta-row{max-width:620px;margin-left:auto;margin-right:auto}

/* GRID CARDS */
.cards{display:grid;gap:18px;margin-top:48px}
@media(min-width:620px){.cards.two{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--edge);border-radius:18px;padding:33px 30px}
.card .num{font-size:.6rem;font-weight:700;letter-spacing:.24em;color:var(--red);text-transform:uppercase}
.card h3{margin:17px 0 13px;color:#fff}
.card p{font-size:.86rem;line-height:1.85;margin:0}
.list{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:18px}
.list li{position:relative;padding-left:24px;color:var(--grey-2);font-size:.88rem;line-height:1.8}
.list li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--red)}
.list.no li{color:var(--grey-3)}
.list.no li::before{background:var(--grey-4)}
.verdict{margin-top:54px;padding:36px 32px 36px 34px;background:var(--card);border-radius:18px;
  box-shadow:inset 2px 0 0 var(--red)}
.verdict p{color:var(--grey-1);margin:0}
.verdict p+p{margin-top:19px}

/* ---------- QUESTIONNAIRE ---------- */
.qbar{position:sticky;top:0;z-index:10;background:rgba(5,5,5,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);padding:16px var(--pad) 14px}
.qbar-in{max-width:var(--maxw);margin:0 auto}
.qbar .row{display:flex;justify-content:space-between;align-items:center;font-size:.6rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--grey-3);margin-bottom:11px}
.qbar .row .cur{color:#fff}
.track{height:2px;background:rgba(255,255,255,.09);position:relative;overflow:hidden}
.fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--red);transition:width .5s var(--ease)}
.qstage{max-width:var(--maxw);margin:0 auto;padding:clamp(50px,11vw,86px) var(--pad) 0;min-height:60vh}
.qcard{animation:qin .45s var(--ease) both}
@keyframes qin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.qscene{font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin-bottom:20px}
.qtext{font-size:clamp(1.15rem,4.8vw,1.5rem);font-weight:600;line-height:1.42;color:#fff;letter-spacing:-.3px;max-width:26ch}
.qsub{margin-top:18px;font-size:clamp(.85rem,3.4vw,.92rem);color:var(--grey-2);line-height:1.8;max-width:46ch}
.qhint{margin-top:17px;font-size:.8rem;color:var(--grey-3);line-height:1.7;font-style:italic}
.opts{margin-top:42px;display:flex;flex-direction:column;gap:13px}
.opt{
  width:100%;text-align:left;background:var(--card);border:1px solid var(--edge);color:var(--grey-1);
  font-family:var(--sans);font-weight:400;font-size:clamp(.87rem,3.5vw,.94rem);line-height:1.65;
  padding:23px 22px 23px 54px;cursor:pointer;position:relative;border-radius:14px;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.opt::before{
  content:attr(data-k);position:absolute;left:20px;top:50%;transform:translateY(-50%);
  font-size:.62rem;font-weight:700;letter-spacing:.1em;color:var(--grey-3);
  border:1px solid var(--hair-2);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:all .2s var(--ease);
}
.opt:hover{background:var(--card-2);border-color:var(--hair-2);color:#fff;transform:translateX(3px)}
.opt:hover::before{border-color:var(--red);color:var(--red)}
.opt.sel{border-color:var(--red);background:var(--red-soft);color:#fff}
.opt.sel::before{background:var(--red);border-color:var(--red);color:#fff}
.opt .od{display:block;margin-top:7px;font-size:.79rem;font-weight:400;color:var(--grey-3);line-height:1.55}
.opt.sel .od{color:var(--grey-2)}
.qnav{max-width:var(--maxw);margin:0 auto;padding:44px var(--pad) 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.back{background:none;border:0;color:var(--grey-3);font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:8px 0;transition:color .2s}
.back:hover{color:var(--grey-1)}
.back[hidden]{visibility:hidden}

/* ---------- FORMULAIRES ---------- */
.form{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.field label{display:block;font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-3);margin-bottom:11px}
.field input,.field textarea,.field select{
  width:100%;background:rgba(0,0,0,.4);border:1px solid var(--hair-2);color:#fff;
  font-family:var(--sans);font-weight:400;font-size:.95rem;padding:16px 20px;border-radius:100px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.field textarea{border-radius:16px;resize:vertical;min-height:92px;line-height:1.7}
.field select{border-radius:100px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239E9E9E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 20px center;padding-right:46px}
.field select option{background:#0b0b0b;color:#fff}
.field input::placeholder,.field textarea::placeholder{color:var(--grey-4)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--red);background:rgba(0,0,0,.6);outline:none}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red)}
.field .err{font-size:.7rem;color:var(--red);margin-top:7px;display:none}
.field .err.on{display:block}
.field .opt-tag{color:var(--grey-4);font-weight:600}
.field .count{font-size:.62rem;color:var(--grey-4);margin-top:8px;text-align:right;letter-spacing:.06em}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:10px}
.consent input{flex:none;width:16px;height:16px;margin-top:3px;accent-color:var(--red)}
.consent span{font-size:.72rem;color:var(--grey-3);line-height:1.65}
.consent a,.consent .lnk{color:var(--grey-2);text-decoration:underline;text-underline-offset:2px;
  background:none;border:0;cursor:pointer;font:inherit;padding:0}

/* propositions cliquables sous un champ (exemples, suggestions de phrase) */
.seeds{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* min-height 44px : cible tactile confortable, ces puces sont tapees au doigt */
.seed{background:rgba(255,255,255,.05);border:1px solid var(--hair);color:var(--grey-3);
  font-family:var(--sans);font-size:.74rem;font-weight:400;line-height:1.4;padding:9px 15px;border-radius:100px;
  min-height:44px;display:inline-flex;align-items:center;
  cursor:pointer;text-align:left;transition:all .2s var(--ease)}
.seed:hover{border-color:var(--red-line);color:#fff;background:var(--red-soft)}
.seeds-lbl{font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-4);margin-top:16px}

/* ---------- incrementeur ----------
   Partage par l'ecran 5 de l'intake (cadence hebdomadaire) et par le bloc 3
   de l'application (repartition des 168 heures). A ce titre il appartient a
   la charte commune, pas a l'une des deux feuilles specifiques. */
.stepper{display:flex;align-items:center;gap:4px}
.stepper button{
  width:38px;height:38px;flex:none;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid var(--hair-2);color:var(--grey-1);
  font-family:var(--sans);font-size:1.05rem;font-weight:600;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:all .18s var(--ease);
  touch-action:manipulation;  /* pas de zoom sur double appui : on tape vite et souvent */
}
.stepper button:hover:not(:disabled){border-color:var(--red);color:#fff;background:var(--red-soft)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper .val{min-width:76px;text-align:center;font-size:.72rem;font-weight:700;
  letter-spacing:.1em;color:#fff}

/* ---------- GATE ---------- */
.gate{margin-top:16px;border:1px solid var(--red-line);border-radius:18px;background:linear-gradient(180deg,rgba(192,0,0,.07),rgba(192,0,0,.015));
  padding:clamp(36px,7.5vw,54px)}
.gate .locked{display:flex;flex-direction:column;gap:16px;margin:31px 0 38px}
.gate .li{display:flex;gap:14px;align-items:flex-start;font-size:.88rem;color:var(--grey-1);line-height:1.7}
.gate .li .lk{flex:none;width:15px;margin-top:5px;opacity:1;color:var(--red)}
.gate .after{font-size:.68rem;color:var(--grey-3);text-align:center;margin-top:21px;letter-spacing:.04em}
.mailbox{margin-top:16px;border:1px solid var(--edge);border-radius:18px;background:var(--card);padding:clamp(34px,7vw,48px);text-align:center;
  animation:qin .6s var(--ease) both}
.mailbox .ic{width:48px;height:48px;margin:0 auto 20px;border:1px solid var(--red-line);border-radius:50%;display:grid;place-items:center;color:var(--red)}
.mailbox h3{color:#fff;margin-bottom:15px}
.mailbox p{margin:0 auto;max-width:44ch}
.mailbox .addr{color:#fff;font-weight:600}

/* ---------- footer ---------- */
footer{position:relative;z-index:2;margin-top:clamp(58px,10vw,88px);border-top:1px solid var(--hair);
  padding:48px var(--pad) 58px;text-align:center}
footer .logo{width:122px}
footer .tl{margin-top:14px;font-size:.6rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--grey-3)}
footer .lk{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
footer .lk button{background:none;border:0;color:var(--grey-3);font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:color .2s}
footer .lk button:hover{color:var(--grey-1)}
footer .cp{margin-top:24px;font-size:.58rem;letter-spacing:.16em;color:var(--grey-4);text-transform:uppercase}

/* ---------- modales ---------- */
.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);
  display:none;padding:var(--pad);overflow-y:auto}
.modal.on{display:block}
.modal-in{max-width:660px;margin:5vh auto;background:#0b0b0b;border:1px solid var(--hair-2);border-radius:18px;padding:clamp(26px,6vw,42px)}
.modal-in h2{font-size:1.15rem;margin-bottom:6px}
.modal-in h4{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:26px 0 10px}
.modal-in p,.modal-in li{font-size:.82rem;line-height:1.85;color:var(--grey-2)}
.modal-in ul{margin:10px 0 0 18px}
.modal-in li{margin-bottom:7px}
.todo{color:#ffb400;font-weight:600;background:rgba(255,180,0,.09);padding:1px 6px;font-size:.78em;letter-spacing:.04em}
.modal-close{margin-top:30px}

.hide{display:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}