/* ============================================================================
   Lead page — /fund-your-business/get-funds/
   Refonte 2026-05-13 — Chantier #31, étape 0 du tunnel onboarding porteur.

   Le wrapper page (mo-login + breadcrumb + layout 2 cols + responsive) vient
   de forms.css (pattern public partagé login / signup / contact / lead).
   Ce fichier ajoute uniquement les spécificités du form lead (sections
   numérotées + chip promesse + page de remerciement intégrée).
   ============================================================================ */

/* Chip promesse de service Comptoir */
.mo-lead-promise {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary, sans-serif);
  font-size: 13px;
  color: var(--bronze-600, #9A835C);
  background: white;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--bronze-300, #C5AE85);
  margin: 16px 0 28px;
}

/* Form lead — enveloppe blanche autour des 3 sections */
.mo-lead-form {
  background: white;
  border: 1px solid var(--ink-100, #E7E8EA);
  border-radius: 8px;
  padding: 32px 32px 28px;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .mo-lead-form {
    padding: 24px 20px 22px;
  }
}

/* Sections numérotées internes au form */
.mo-lead-form .mo-lead-form__section {
  margin: 0 0 28px;
  padding: 0;
  border: none;
}
.mo-lead-form .mo-lead-form__section:last-of-type {
  margin-bottom: 16px;
}
.mo-lead-form .mo-lead-form__section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-secondary, 'Stack Sans Headline Variable', 'Stack Sans Headline', sans-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-900, #1C1F24);
  margin: 0 0 16px;
  padding: 0;
  letter-spacing: -0.01em;
}
.mo-lead-form__section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink-900, #1C1F24);
  color: var(--cream-100, #F6F4EF);
  font-family: var(--font-primary, sans-serif);
  font-size: 12px;
  font-weight: 600;
}

/* Inputs / selects / textarea du form lead — fond cream-50 dans enveloppe blanche */
.mo-lead-form input[type="text"],
.mo-lead-form input[type="email"],
.mo-lead-form input[type="tel"],
.mo-lead-form input[type="url"],
.mo-lead-form select,
.mo-lead-form textarea {
  width: 100%;
  font-family: var(--font-primary, sans-serif);
  font-size: 14px;
  color: var(--ink-900, #1C1F24);
  padding: 10px 14px;
  background: var(--cream-50, #FAF8F1);
  border: 1px solid var(--ink-100, #E7E8EA);
  border-radius: 4px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
}
.mo-lead-form input[type="text"]:focus,
.mo-lead-form input[type="email"]:focus,
.mo-lead-form input[type="tel"]:focus,
.mo-lead-form input[type="url"]:focus,
.mo-lead-form select:focus,
.mo-lead-form textarea:focus {
  border-color: var(--bronze-600, #9A835C);
  background: var(--cream-100, #F6F4EF);
}
.mo-lead-form input[type="text"]::placeholder,
.mo-lead-form input[type="email"]::placeholder,
.mo-lead-form input[type="tel"]::placeholder,
.mo-lead-form input[type="url"]::placeholder,
.mo-lead-form textarea::placeholder {
  color: var(--ink-400, #A3A7AD);
}
.mo-lead-form textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--font-primary, sans-serif);
}

/* Radio cards funding_origin — réutilise le pattern .mo-form__radio-cards
   défini dans forms.css (2 cols, gap 14, padding 18/20, font 15/12, état
   :checked ink-900 + bronze-200 etc.). Ici on ajoute UNIQUEMENT :
     - la variante --text-only (sans picto signature)
     - le spacing inférieur dans le contexte d'une section numérotée
     - la mécanique de masquage equity (durée non-pertinente en levée)
   Tout le reste vient de forms.css — pas de surcharge typo/couleur. */
.mo-lead-form .mo-form__radio-cards {
  margin-bottom: 14px;
}
.mo-form__radio-card--text-only {
  gap: 0;
}

/* Conditionnement equity — la durée n'a pas de sens pour une levée de capital
   (closing horizon est demandé sur form 2 à la place). On masque via :has()
   uniquement en CSS, pas de JS. */
.mo-lead-form__section:has(input[name="funding_origin"][value="equity"]:checked) [data-equity-hide] {
  display: none;
}
.mo-lead-form__section:has(input[name="funding_origin"][value="equity"]:checked) [data-equity-collapse] {
  grid-template-columns: 1fr;
}
.mo-lead-form .mo-form__fieldset {
  margin: 0 0 18px;
  padding: 0;
  border: none;
}
.mo-lead-form .mo-form__legend {
  font-family: var(--font-primary, sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-500, #6E7682);
  margin: 0 0 10px;
  padding: 0;
  letter-spacing: 0.01em;
}

/* Layout rows (réutilise patternsemblable mo-form) */
.mo-lead-form .mo-form__row {
  display: grid;
  gap: 16px;
  margin-bottom: 14px;
}
.mo-lead-form .mo-form__row--1 {
  grid-template-columns: 1fr;
}
.mo-lead-form .mo-form__row--2 {
  grid-template-columns: 1fr 1fr;
}
.mo-lead-form .mo-form__row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 640px) {
  .mo-lead-form .mo-form__row--2,
  .mo-lead-form .mo-form__row--3 {
    grid-template-columns: 1fr;
  }
}

.mo-lead-form .mo-form__label {
  display: block;
  font-family: var(--font-primary, sans-serif);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500, #6E7682);
  font-weight: 500;
  margin: 0 0 6px;
}
.mo-lead-form .mo-form__help {
  font-family: var(--font-primary, sans-serif);
  font-size: 12px;
  color: var(--ink-500, #6E7682);
  margin: 6px 0 0;
}
.mo-lead-form .mo-form__error {
  font-family: var(--font-primary, sans-serif);
  font-size: 12px;
  color: var(--terracotta-dark, #B5413B);
  margin: 6px 0 0;
}

.mo-lead-form__legal {
  font-family: var(--font-primary, sans-serif);
  font-size: 12px;
  color: var(--ink-500, #6E7682);
  line-height: 1.5;
  margin: 16px 0 0;
  max-width: 60ch;
}
.mo-lead-form__legal a {
  color: var(--ink-900, #1C1F24);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--bronze-600, #9A835C);
  transition: color 0.15s ease;
}
.mo-lead-form__legal a:hover {
  color: var(--bronze-600, #9A835C);
}

/* ---- Page de remerciement (état succès) ---- */
.mo-lead-thanks {
  text-align: center;
  background: white;
  border: 1px solid var(--ink-100, #E7E8EA);
  border-radius: 8px;
  padding: 56px 40px 48px;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .mo-lead-thanks {
    padding: 40px 24px 36px;
  }
}
.mo-lead-thanks__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--celadon-50, #EAF3EE);
  color: var(--celadon-dark, #5C8A75);
  margin: 0 0 20px;
}
.mo-lead-thanks__eyebrow {
  font-family: var(--font-primary, sans-serif);
  font-size: 13px;
  letter-spacing: 0.18em;
  /* Compense le letter-spacing trailing pour un centrage optique correct. */
  text-indent: 0.18em;
  text-transform: uppercase;
  color: var(--celadon-dark, #5C8A75);
  font-weight: 500;
  margin: 0 0 12px;
  /* Override de la regle globale p { max-width: 68ch } qui empechait le bloc
     de se stretch dans la card text-align: center -> texte decale a gauche. */
  max-width: 100%;
}
.mo-lead-thanks__title {
  font-family: var(--font-secondary, 'Stack Sans Headline Variable', 'Stack Sans Headline', sans-serif);
  font-size: 32px;
  line-height: 1.2;
  color: var(--ink-900, #1C1F24);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.mo-lead-thanks__lead {
  font-family: var(--font-primary, sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-body, #424A55);
  margin: 0 auto 12px;
  max-width: 56ch;
}
.mo-lead-thanks__hint {
  font-family: var(--font-primary, sans-serif);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-500, #6E7682);
  margin: 0 auto 28px;
  max-width: 50ch;
}
.mo-lead-thanks__cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.mo-lead-thanks__cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: var(--ink-900, #1C1F24);
  color: var(--cream-100, #F6F4EF);
  border-radius: 999px;
  font-family: var(--font-primary, sans-serif);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease;
}
.mo-lead-thanks__cta:hover {
  background: var(--ink-800, #2C313A);
  color: var(--cream-100, #F6F4EF);
  text-decoration: none;
}
.mo-lead-thanks__cta--ghost {
  background: transparent;
  color: var(--ink-900, #1C1F24);
  border: 1px solid var(--ink-200, #C4CAD2);
}
.mo-lead-thanks__cta--ghost:hover {
  background: var(--cream-50, #FAF8F1);
  color: var(--ink-900, #1C1F24);
}