/* ============================================================
   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}

.brand{
  padding:34px 0 0; display:flex; align-items:center; gap:11px;
  font-family:"Plus Jakarta Sans",sans-serif; font-size:.95rem; font-weight:700;
}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--orange)}

/* ---------- 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;
}
.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;
}

/* ---------- 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} }