{# long-form-story.html — Bloc manifesto / philosophie long-form : eyebrow + h2 + body riche + pullquote + CTA.
   Slots :
   {{EYEBROW}}                              — petite ligne
   {{H2_HTML}}                              — titre principal (HTML pour <span> accent)
   {{BODY_HTML}}                            — corps narratif (HTML autorisé, plusieurs <p>, <strong>, <em>)
   {{PULLQUOTE}}                            — citation extraite mise en évidence (optionnel)
   {{CTA_LABEL}} / {{CTA_HREF}}             — bouton CTA final (optionnel)
#}

<section class="lfs">
  <div class="lfs__inner">
    <header class="lfs__header">
      <span class="lfs__eyebrow">{{EYEBROW}}</span>
      <h2 class="lfs__h2">{{H2_HTML}}</h2>
    </header>
    <div class="lfs__body">
      {{BODY_HTML}}
    </div>
    <aside class="lfs__pullquote">
      <p>"{{PULLQUOTE}}"</p>
    </aside>
    <div class="lfs__cta-wrap">
      <a class="lfs__cta" href="{{CTA_HREF}}">{{CTA_LABEL}} →</a>
    </div>
  </div>
</section>

<style>
  .lfs { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .lfs__inner { max-width: 50rem; margin: 0 auto; padding: 5rem 1.5rem; }
  .lfs__header { margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
  .lfs__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .lfs__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
  .lfs__h2 :where(span) { color: var(--color-accent, #ff2c7b); }
  .lfs__body { font-size: 1.125rem; line-height: 1.65; }
  .lfs__body :where(p) { margin: 0 0 1.25rem; }
  .lfs__body :where(strong) { color: var(--color-accent, #ff2c7b); font-weight: 700; }
  .lfs__pullquote { margin: 2.5rem 0; padding: 1.5rem 1.75rem; border-left: 4px solid var(--color-accent, #ff2c7b); background: var(--color-bg-alt, #f7f4ef); border-radius: 0 10px 10px 0; }
  .lfs__pullquote p { font-family: var(--font-heading, inherit); font-style: italic; font-size: 1.25rem; line-height: 1.45; margin: 0; }
  .lfs__cta-wrap { margin-top: 2rem; }
  .lfs__cta { color: var(--color-accent, #ff2c7b); font-family: var(--font-heading, inherit); font-weight: 700; font-size: 1.05rem; text-decoration: underline; text-underline-offset: 6px; }
  .lfs__cta:hover { opacity: 0.7; }
  @media (max-width: 600px) { .lfs__inner { padding: 3.5rem 1.25rem; } }
</style>