{# lead-magnet-kit.html — Bloc kit/freebie lead magnet : visuel kit + h2 + lead + features + form capture inline.
   Différent de capture-form-ac (juste form) et quiz-zone-cta (quiz interactif).
   Ici : offre lead magnet complète "What you get + form".
   Slots :
   {{EYEBROW}} / {{H2_HTML}} / {{LEAD}}
   {{KIT_IMG_SRC}} / {{KIT_IMG_ALT}}
   {{FEATURES_HTML}}                        — répéter <li>Item</li> (4-6 items "What you get:")
   {{FORM_ACTION}}                          — POST endpoint (ex. ActiveCampaign URL)
   {{FORM_HIDDEN_FIELDS}}                   — <input type="hidden" name="…" value="…"> × N
   {{CTA_LABEL}}                            — texte bouton "Télécharger"
   {{LEGAL}}                                — micro-ligne légale (RGPD, anti-spam)
#}

<section class="lmk">
  <div class="lmk__inner">
    <div class="lmk__media">
      <img src="{{KIT_IMG_SRC}}" alt="{{KIT_IMG_ALT}}" loading="lazy">
    </div>
    <div class="lmk__copy">
      <span class="lmk__eyebrow">{{EYEBROW}}</span>
      <h2 class="lmk__h2">{{H2_HTML}}</h2>
      <p class="lmk__lead">{{LEAD}}</p>
      <div class="lmk__features-wrap">
        <span class="lmk__features-title">Ce que tu reçois :</span>
        <ul class="lmk__features">{{FEATURES_HTML}}</ul>
      </div>
      <form class="lmk__form" method="post" action="{{FORM_ACTION}}">
        {{FORM_HIDDEN_FIELDS}}
        <label class="lmk__label"><span>Prénom</span><input type="text" name="firstname" required autocomplete="given-name"></label>
        <label class="lmk__label"><span>Email</span><input type="email" name="email" required autocomplete="email"></label>
        <button type="submit" class="lmk__cta">{{CTA_LABEL}}</button>
        <p class="lmk__legal">{{LEGAL}}</p>
      </form>
    </div>
  </div>
</section>

<style>
  .lmk { background: var(--color-bg-alt, #f7f4ef); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .lmk__inner { max-width: 80rem; margin: 0 auto; padding: 5rem 1.5rem; display: grid; grid-template-columns: 0.4fr 0.6fr; gap: 4rem; align-items: center; }
  .lmk__media img { width: 100%; height: auto; max-height: 28rem; object-fit: contain; display: block; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.18)); border-radius: 14px; }
  .lmk__copy { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
  .lmk__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .lmk__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.1; margin: 0; }
  .lmk__h2 :where(span) { color: var(--color-accent, #ff2c7b); }
  .lmk__lead { font-size: 1.05rem; line-height: 1.55; margin: 0; }
  .lmk__features-wrap { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
  .lmk__features-title { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
  .lmk__features { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; font-size: 0.975rem; }
  .lmk__features li::before { content: "✓"; margin-right: 0.5rem; color: var(--color-accent, #ff2c7b); font-weight: 700; }
  .lmk__form { background: var(--color-bg, #fff); padding: 1.5rem; border-radius: 12px; display: flex; flex-direction: column; gap: 0.85rem; width: 100%; margin-top: 0.5rem; }
  .lmk__label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.875rem; }
  .lmk__label input { font-family: inherit; font-size: 1rem; padding: 0.75rem 0.95rem; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 8px; background: var(--color-bg, #fff); color: inherit; }
  .lmk__cta { border: none; background: var(--color-cta-bg, #111); color: var(--color-cta-text, #fff) !important; font-family: var(--font-heading, inherit); font-weight: 700; font-size: 1.05rem; padding: 0.95rem 1.25rem; border-radius: 10px; cursor: pointer; margin-top: 0.25rem; }
  .lmk__legal { font-size: 0.78rem; opacity: 0.65; margin: 0.25rem 0 0; }
  @media (max-width: 900px) { .lmk__inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 3.5rem 1.25rem; } .lmk__media { max-width: 20rem; margin: 0 auto; } }
</style>