/* =============================================================================
   LE PLANIFICATEUR · styles propres a la landing et a l'intake
   ============================================================================= */

#intake, #gatewrap, #sent { display:none }
#intake.on { display:block; min-height:100dvh; padding:0 0 60px }
#gatewrap.on, #sent.on { display:block }

/* ---------- ecran 5 : les trois engagements ---------- */
.engs { margin-top:38px; display:flex; flex-direction:column; gap:16px }
.eng-row {
  background:var(--card); border:1px solid var(--edge); border-radius:16px;
  padding:20px 20px 22px; transition:border-color .2s var(--ease);
}
.eng-row.filled { border-color:var(--hair-2) }
.eng-row .rank {
  font-size:.56rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--grey-4); margin-bottom:12px;
}
.eng-row.filled .rank { color:var(--red) }
.eng-row .req { color:var(--red) }
.eng-row input[type=text] {
  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:15px 18px;
  border-radius:100px; transition:border-color .2s var(--ease);
}
.eng-row input[type=text]::placeholder { color:var(--grey-4) }
.eng-row input[type=text]:focus { border-color:var(--red); background:rgba(0,0,0,.6); outline:none }

/* cadence hebdomadaire
   Le composant .stepper lui-meme vit dans theme.css : il est partage avec
   le bloc 3 de l'application, qui ne charge pas cette feuille. */
.freq { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px }
.freq .lbl {
  font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey-3);
}

/* ---------- ecran post-gate ---------- */
.resend { margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:12px }
.resend .note { font-size:.68rem; color:var(--grey-4); letter-spacing:.06em }
.mailbox .small {
  margin-top:20px; font-size:.74rem; color:var(--grey-4); line-height:1.8; letter-spacing:.03em;
}

/* bandeau de demonstration, a retirer au branchement du magic link */
.demo-strip {
  margin-top:22px; border:1px dashed rgba(255,180,0,.45); border-radius:16px;
  background:rgba(255,180,0,.05); padding:24px 22px; text-align:center;
}
.demo-strip .k {
  font-size:.56rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:#ffb400; margin-bottom:12px;
}
.demo-strip p { font-size:.78rem; color:var(--grey-3); margin-bottom:18px; line-height:1.8 }
.demo-strip .btn { max-width:none }

/* Sur les ecrans etroits on retrecit l'afficheur, jamais les boutons :
   ils sont tapes au doigt, de facon repetee. */
@media (max-width:380px) {
  .stepper .val { min-width:62px; font-size:.66rem }
  .freq { gap:8px }
  .freq .lbl { font-size:.55rem; letter-spacing:.14em }
}