{# livre-showcase.html — Vitrine livre : visuel couverture gauche + badge + h2 + lead + citation + CTA droit.
   Slots :
   {{COVER_SRC}} / {{COVER_ALT}}        — image couverture
   {{BADGE}}                            — petit badge (ex. "Bestseller NYT")
   {{EYEBROW}}                          — "Le livre"
   {{H2_HTML}}                          — titre
   {{LEAD}}                             — pitch du livre
   {{QUOTE_HTML}}                       — accolade tierce
   {{QUOTE_AUTHOR}}                     — signataire de l'accolade
   {{CTA_LABEL}} / {{CTA_HREF}}         — bouton "Acheter"
#}

<section class="lsh">
  <div class="lsh__inner">
    <div class="lsh__cover">
      <img src="{{COVER_SRC}}" alt="{{COVER_ALT}}" loading="lazy">
    </div>
    <div class="lsh__copy">
      <span class="lsh__badge">{{BADGE}}</span>
      <span class="lsh__eyebrow">{{EYEBROW}}</span>
      <h2 class="lsh__h2">{{H2_HTML}}</h2>
      <p class="lsh__lead">{{LEAD}}</p>
      <figure class="lsh__quote">
        <blockquote>{{QUOTE_HTML}}</blockquote>
        <figcaption>— {{QUOTE_AUTHOR}}</figcaption>
      </figure>
      <a class="lsh__cta" href="{{CTA_HREF}}">{{CTA_LABEL}}</a>
    </div>
  </div>
</section>

<style>
  .lsh { background: var(--color-bg-alt, #f7f4ef); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .lsh__inner { max-width: 80rem; margin: 0 auto; padding: 5rem 1.5rem; display: grid; grid-template-columns: 0.45fr 0.55fr; gap: 4rem; align-items: center; }
  .lsh__cover img { width: 100%; height: auto; max-height: 32rem; object-fit: contain; display: block; filter: drop-shadow(0 24px 48px rgba(0,0,0,0.2)); }
  .lsh__copy { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
  .lsh__badge { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.35rem 0.7rem; border-radius: 999px; background: var(--color-accent, #ff2c7b); color: var(--color-cta-text, #fff); }
  .lsh__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; opacity: 0.7; }
  .lsh__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0; }
  .lsh__lead { font-size: 1.1rem; line-height: 1.55; margin: 0; }
  .lsh__quote { margin: 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--color-accent, #ff2c7b); background: color-mix(in srgb, currentColor 4%, transparent); border-radius: 0 8px 8px 0; }
  .lsh__quote blockquote { margin: 0; font-style: italic; line-height: 1.5; }
  .lsh__quote figcaption { margin-top: 0.5rem; font-size: 0.85rem; opacity: 0.75; font-family: var(--font-heading, inherit); font-weight: 600; }
  .lsh__cta { background: var(--color-cta-bg, #111); color: var(--color-cta-text, #fff) !important; text-decoration: none; font-family: var(--font-heading, inherit); font-weight: 700; font-size: 1.05rem; padding: 1rem 1.75rem; border-radius: 10px; transition: transform .2s, filter .2s; }
  .lsh__cta:hover { transform: scale(.97); filter: saturate(.85); }
  @media (max-width: 900px) { .lsh__inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 3.5rem 1.25rem; } .lsh__cover { max-width: 18rem; margin: 0 auto; } }
</style>