/* ============================================================
   Landing de capture. Objectif unique : l'email.
   Meme systeme que le guide, mais hierarchie resserree :
   une seule action possible, repetee deux fois.
   ============================================================ */
.page{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:0 40px 90px}
h1{font-size:clamp(1.85rem,4.6vw,3rem); font-weight:800; line-height:1.07}
h2{font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:700; line-height:1.22}
h3{font-size:1rem; font-weight:700}

/* Marque : le signe et le nom sur une meme ligne de base optique.
   Le nom est repris en blanc, le noir d'origine etant illisible sur
   ce fond. Le signe vit dans assets/img/logo.svg : le remplacer
   suffit a mettre a jour les deux pages. */
.brand{
  padding:34px 0 0; display:flex; align-items:center; gap:10px;
  font-family:"Plus Jakarta Sans",sans-serif; font-size:1rem; font-weight:800;
  letter-spacing:.005em; text-transform:uppercase; color:var(--text);
}
.brand .logo{width:34px; height:34px; display:block; flex:none}

/* ---------- Hero ---------- */
.hero{
  padding:44px 0 0; display:grid; gap:30px; align-items:start;
  grid-template-columns:1fr;
  grid-template-areas:"head" "card" "support";
}
.hero .head{grid-area:head}
.hero .card{grid-area:card}
.hero .support{grid-area:support}
.hero .kicker{
  font-family:"Plus Jakarta Sans",sans-serif; font-size:.73rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--orange); margin-bottom:16px;
}
/* Sous-titre accroche au titre : meme mesure que le chapeau, separe par
   une respiration plus courte que l'ecart de grille. */
.hero .sub{margin-top:18px; font-size:1.05rem; color:var(--text-2); line-height:1.6; max-width:54ch}
.hero .deck{margin-top:0; font-size:1.05rem; color:var(--text-2); line-height:1.6; max-width:54ch}
.hero .deck b{color:var(--text); font-weight:600}
.facts{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 28px;
}
.facts span{
  font-family:"Plus Jakarta Sans",sans-serif; font-size:.86rem; font-weight:600; color:var(--text-3);
  display:flex; align-items:center; gap:8px;
}
.facts span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--orange); flex:none}

/* ---------- Formulaire ---------- */
.card{border:1px solid var(--line-2); background:var(--bg-2); padding:30px 28px}
.card h3{font-size:1.12rem; margin-bottom:8px}
.card .lead{font-size:.93rem; color:var(--text-2); margin-bottom:22px}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.field label{
  font-family:"Plus Jakarta Sans",sans-serif; font-size:.71rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--text-3);
}
.field input[type=email],.field input[type=text]{
  width:100%; background:var(--bg); color:var(--text);
  border:1px solid var(--line-2); border-radius:4px; padding:14px 14px;
  font-family:"Inter",sans-serif; font-size:16.5px; transition:border-color .14s;
}
.field input::placeholder{color:#6F6C7C}
.field input:focus{outline:none; border-color:var(--orange)}
.consent{display:flex; gap:12px; align-items:flex-start; margin:18px 0 22px}
.consent input{
  appearance:none; -webkit-appearance:none; flex:none; margin:3px 0 0;
  width:19px; height:19px; border:1px solid var(--line-2); border-radius:3px;
  background:var(--bg); cursor:pointer; display:grid; place-content:center; transition:.12s;
}
.consent input:checked{background:var(--ok); border-color:var(--ok)}
.consent input:checked::after{content:"\2713"; color:#07160F; font-size:.78rem; font-weight:700; line-height:1}
.consent input:focus-visible{outline:2px solid var(--orange); outline-offset:2px}
.consent label{font-size:.86rem; color:var(--text-3); line-height:1.5; cursor:pointer}
.consent a{color:var(--text-2)}
.btn{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--orange); color:#150A02; text-decoration:none; cursor:pointer;
  font-family:"Plus Jakarta Sans",sans-serif; font-size:1rem; font-weight:700;
  padding:16px 24px; border-radius:999px; border:none; transition:background .15s;
}
.btn:hover{background:var(--orange-hi)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--orange-hi); outline-offset:3px}
.fine{margin-top:14px; font-size:.8rem; color:var(--text-3); line-height:1.5; text-align:center}
.err{
  margin-top:14px; font-size:.88rem; color:var(--danger); line-height:1.5;
  border-left:2px solid var(--danger); padding-left:14px; display:none;
}
.err.on{display:block}

/* Etat de confirmation */
.done{display:none}
.done.on{display:block}
.form-wrap.off{display:none}
.done .tick{
  width:46px; height:46px; border-radius:50%; background:rgba(62,207,142,.14);
  border:1px solid var(--ok); color:var(--ok); display:grid; place-content:center;
  font-size:1.3rem; font-weight:700; margin-bottom:18px;
}

/* ---------- Ecrans suivants ----------
   Une fois les coordonnees validees, la landing disparait et cede
   la place a un ecran par question, puis a l'ecran personnalise.
   Chaque ecran occupe exactement la hauteur de la fenetre et ne
   defile jamais : la hauteur est bornee, les espacements se
   resserrent sur les ecrans courts, et landing.js reduit encore le
   bloc si le contenu depasse malgre tout. */
.page.off{display:none}
/* Pendant le funnel, rien ne doit allonger le document : ni le
   rembourrage du bandeau colle, ni le halo, haut de 900 px. */
html.sur-ecran,
body.sur-ecran{height:100%; padding-bottom:0; overflow:hidden}
body.sur-ecran .halo{height:100vh; height:100dvh}

.ecran{display:none}
.ecran.on{
  display:flex; flex-direction:column;
  height:100vh; height:100dvh;   /* dvh : la barre d'adresse mobile ne triche plus */
  overflow:hidden;
  position:relative; z-index:1;
}
/* Dernier recours : si meme reduit le contenu ne tient pas, mieux
   vaut un defilement qu'un texte tronque. */
.ecran.deborde{overflow-y:auto}

.ecran > .brand{flex:none; width:100%; max-width:620px; margin-inline:auto; padding:26px 0 0}
.ecran > .brand,
.jauge{width:calc(100% - 80px)}

/* Progression : un filet fin sous la marque, plus discret qu'un compteur. */
.jauge{flex:none; max-width:620px; margin:20px auto 0; height:2px; background:var(--line-2)}
.jauge span{display:block; height:100%; width:0; background:var(--orange); transition:width .3s ease}

.ecran-in{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:22px 40px 26px;
}
.ecran-bloc{width:100%; max-width:620px; transform-origin:center center}

/* Hors de la carte, ces deux blocs ne heritent plus de .card. */
.ecran h3{font-size:1.12rem; margin-bottom:8px}
.ecran .lead{font-size:.93rem; color:var(--text-2); margin-bottom:22px}

@media (min-width:900px) and (min-height:840px){
  .ecran .quiz h3{font-size:clamp(1.3rem,3vw,1.65rem); line-height:1.24; margin-bottom:26px}
  .ecran .opt{padding:18px 20px}
  .ecran .opt b{font-size:1rem}
}

/* Ecrans courts : on resserre avant d'avoir a reduire le bloc. */
@media (max-height:820px){
  .ecran > .brand{padding-top:18px}
  .jauge{margin-top:14px}
  .ecran-in{padding-top:14px; padding-bottom:16px}
  .ecran .etape{margin-bottom:10px}
  .ecran .quiz h3{font-size:1rem; line-height:1.28; margin-bottom:14px}
  .ecran .opts{gap:8px}
  .ecran .opt{padding:11px 14px}
  .ecran .opt b{font-size:.9rem; margin-bottom:3px}
  .ecran .opt .d{font-size:.79rem; line-height:1.42}
  /* Ecran final : la confirmation se reduit a l'essentiel pour que
     l'argumentaire et les deux boutons tiennent sans defilement. */
  .ecran .done .tick{width:26px; height:26px; font-size:.85rem; margin-bottom:10px}
  .ecran .done > h3{font-size:1rem; margin-bottom:4px}
  .ecran .pitch{margin:14px 0 12px; padding-top:14px}
  .ecran .pitch h3{font-size:1rem; margin-bottom:8px}
  .ecran .pitch .lead{font-size:.86rem; line-height:1.45; margin-bottom:12px}
  .ecran .pitch .avec{font-size:.86rem; margin-bottom:13px}
  .ecran .pts{gap:7px; margin-bottom:12px}
  .ecran .pts li{font-size:.84rem; line-height:1.45}
  .ecran .pitch .bascule{font-size:.83rem; line-height:1.45; margin-bottom:14px}
  .ecran .pitch .fine{display:none}
  .ecran .btn{padding:13px 20px; font-size:.95rem}
  .ecran #direct{margin-top:10px}
}
@media (max-width:600px){
  .ecran > .brand,
  .jauge{width:calc(100% - 40px)}
  .ecran-in{padding-left:20px; padding-right:20px}
}
@media (prefers-reduced-motion:reduce){ .jauge span{transition:none} }

/* ---------- Question de qualification ----------
   Le clic sur une reponse est le geste utilisateur qui ouvre le
   guide : c'est pour cela que les reponses sont des boutons et
   non des cases a cocher. */
.quiz{display:none}
.quiz.on{display:block}
.qstep{display:none}
.qstep.on{display:block}
.etape{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-family:"Plus Jakarta Sans",sans-serif; font-size:.71rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--orange); margin-bottom:12px;
}
.etape b{color:var(--text-3); font-weight:700; font-variant-numeric:tabular-nums; flex:none}
.quiz h3{font-size:1.05rem; line-height:1.32; margin-bottom:18px}
.opts{display:flex; flex-direction:column; gap:10px}
.opt{
  width:100%; display:flex; gap:12px; align-items:flex-start;
  text-align:left; background:var(--bg); color:var(--text-2); cursor:pointer;
  border:1px solid var(--line-2); border-radius:4px; padding:14px 16px;
  font-family:"Inter",sans-serif; font-size:16.5px;
  transition:border-color .14s, background .14s;
}
.opt .lab{flex:1; min-width:0}
.opt:hover{border-color:var(--orange); background:var(--panel)}
.opt:focus-visible{outline:2px solid var(--orange); outline-offset:2px}
.opt .ico{font-size:1.1rem; line-height:1.35}
.opt b{
  display:block; font-family:"Plus Jakarta Sans",sans-serif; font-size:.94rem;
  font-weight:700; color:var(--text); line-height:1.35; margin-bottom:5px;
}
.opt b:last-child{margin-bottom:0}
.opt .d{display:block; font-size:.85rem; color:var(--text-3); line-height:1.5}
.opt.on{border-color:var(--orange); background:var(--orange-dim)}
.opt.on b{color:var(--orange)}
.opts.fige .opt{pointer-events:none}
.opts.fige .opt:not(.on){opacity:.4}

/* ---------- Ecran personnalise ----------
   Compose a partir des trois reponses : l'accroche et les benefices
   viennent de la difficulte, le constat du volume, l'argument de
   bascule de l'organisation. Soixante-quatre combinaisons possibles. */
.pitch{display:none; margin:26px 0 22px; padding-top:24px; border-top:1px solid var(--line-2)}
.pitch.on{display:block}
.pitch h3{font-size:1.08rem; line-height:1.3; margin-bottom:10px}
.pitch .lead{margin-bottom:16px}
/* Intertitre : marque la bascule entre le constat et ce que l'outil apporte. */
.pitch .avec{
  font-family:"Plus Jakarta Sans",sans-serif; font-size:.92rem; font-weight:700;
  color:var(--orange); margin-bottom:17px;
}
.pts{margin:0 0 18px; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px}
.pts li{font-size:.9rem; color:var(--text-2); line-height:1.55; padding-left:20px; position:relative}
.pts li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:1px; background:var(--orange);
}
.pitch .bascule{
  font-size:.89rem; color:var(--text-2); line-height:1.55;
  border-left:2px solid var(--orange); padding:2px 0 2px 14px; margin-bottom:20px;
}
/* Le guide reste accessible, mais cesse d'etre l'action principale
   une fois l'ecran personnalise affiche. */
.btn.btn-2{
  background:transparent; color:var(--text-2);
  border:1px solid var(--line-2); font-weight:600;
}
.btn.btn-2:hover{background:var(--bg-2); color:var(--text)}

/* ---------- Contenu ---------- */
.sec{margin-top:86px; padding-top:30px; border-top:2px solid var(--line-2)}
.sec > h2{margin-bottom:26px}
.grid{display:grid; grid-template-columns:1fr; gap:0}
.it{padding:20px 0; border-bottom:1px solid var(--line); display:grid; gap:5px 22px; grid-template-columns:auto 1fr}
.it:first-child{border-top:1px solid var(--line-2)}
.it .n{
  font-family:"Plus Jakarta Sans",sans-serif; font-size:.82rem; font-weight:700;
  color:var(--orange); font-variant-numeric:tabular-nums; grid-row:1 / span 2; padding-top:.22em;
}
.it h3{grid-column:2}
.it p{grid-column:2; font-size:.93rem; color:var(--text-2)}

.pull{
  margin-top:40px; border-left:2px solid var(--orange); padding:4px 0 4px 20px;
  font-size:1rem; color:var(--text-2); line-height:1.6; max-width:62ch;
}
.pull b{color:var(--text)}

.closing{margin-top:70px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px}
.closing h2{max-width:22ch}
.closing p{color:var(--text-2); max-width:52ch}
.closing .btn{width:auto; margin-top:10px; padding:16px 34px}

footer{
  margin-top:70px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px;
}
footer p{font-family:"Plus Jakarta Sans",sans-serif; font-size:.79rem; color:var(--text-3); line-height:1.7}
footer a{color:var(--text-3)}

@media (min-width:900px){
  .hero{
    padding-top:52px; grid-template-columns:1.15fr .85fr; gap:26px 60px;
    grid-template-areas:"head card" "support card";
  }
  .grid{grid-template-columns:1fr 1fr; gap:0 48px}
  .it:nth-child(2){border-top:1px solid var(--line-2)}
}
@media (max-width:600px){
  .page{padding:0 20px 70px}
  .card{padding:24px 20px}
  .sec{margin-top:64px}
  /* cible tactile confortable */
  .consent{margin:16px 0 20px}
  .consent input{width:23px; height:23px}
  .consent label{font-size:.88rem}
  /* le bandeau colle laisse de la place en bas de page */
  body.has-bar{padding-bottom:86px}
}

/* Rappel colle en bas d'ecran, uniquement mobile et uniquement
   quand le formulaire est sorti du champ de vision. */
.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:rgba(10,9,16,.94); backdrop-filter:blur(10px);
  border-top:1px solid var(--line-2); padding:12px 20px;
  transform:translateY(110%); transition:transform .22s ease;
  display:none;
}
.bar.on{transform:translateY(0)}
.bar .btn{padding:14px 24px; font-size:.95rem}
@media (max-width:899px){ .bar{display:block} }
@media (prefers-reduced-motion:reduce){ .bar{transition:none} }