{# produits-dual.html — Comparaison 2 offres côte à côte (carte feature + carte alt sombre).
   Slots :
   {{EYEBROW}} / {{H2}}                                              — header
   {{CARD_1_BADGE}} / {{CARD_1_TITLE}} / {{CARD_1_LEAD}}             — card gauche
   {{CARD_1_FEATURES_HTML}}                                          — <li>… ×N
   {{CARD_1_CTA_LABEL}} / {{CARD_1_CTA_HREF}}
   {{CARD_2_BADGE}} / {{CARD_2_TITLE}} / {{CARD_2_LEAD}}             — card droite (fond sombre)
   {{CARD_2_FEATURES_HTML}}                                          — <li>… ×N
   {{CARD_2_CTA_LABEL}} / {{CARD_2_CTA_HREF}}
#}

<section class="pdu">
  <div class="pdu__inner">
    <header class="pdu__header">
      <span class="pdu__eyebrow">{{EYEBROW}}</span>
      <h2 class="pdu__h2">{{H2}}</h2>
    </header>
    <div class="pdu__grid">
      <article class="pdu__card">
        <span class="pdu__badge">{{CARD_1_BADGE}}</span>
        <h3 class="pdu__title">{{CARD_1_TITLE}}</h3>
        <p class="pdu__lead">{{CARD_1_LEAD}}</p>
        <ul class="pdu__features">{{CARD_1_FEATURES_HTML}}</ul>
        <a class="pdu__cta" href="{{CARD_1_CTA_HREF}}">{{CARD_1_CTA_LABEL}}</a>
      </article>
      <article class="pdu__card pdu__card--alt">
        <span class="pdu__badge">{{CARD_2_BADGE}}</span>
        <h3 class="pdu__title">{{CARD_2_TITLE}}</h3>
        <p class="pdu__lead">{{CARD_2_LEAD}}</p>
        <ul class="pdu__features">{{CARD_2_FEATURES_HTML}}</ul>
        <a class="pdu__cta" href="{{CARD_2_CTA_HREF}}">{{CARD_2_CTA_LABEL}}</a>
      </article>
    </div>
  </div>
</section>

<style>
  .pdu { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .pdu__inner { max-width: 80rem; margin: 0 auto; padding: 5rem 1.5rem; }
  .pdu__header { text-align: center; margin-bottom: 3rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
  .pdu__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .pdu__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.75rem, 4vw, 3rem); margin: 0; line-height: 1.15; }
  .pdu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .pdu__card { background: var(--color-bg-alt, #f7f7f7); border-radius: 16px; padding: 2.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
  .pdu__card--alt { background: var(--color-bg-dark, #111); color: var(--color-bg, #fff); }
  .pdu__badge { align-self: flex-start; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.35rem 0.65rem; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); }
  .pdu__title { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 1.5rem; margin: 0; }
  .pdu__lead { font-size: 1rem; line-height: 1.55; margin: 0; opacity: 0.85; }
  .pdu__features { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
  .pdu__features li::before { content: "\2713"; margin-right: 0.5rem; color: var(--color-accent, #ff2c7b); font-weight: 700; }
  .pdu__cta { margin-top: auto; align-self: flex-start; 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: 1rem; padding: 0.85rem 1.5rem; border-radius: 10px; transition: transform .2s, filter .2s; }
  .pdu__card--alt .pdu__cta { background: var(--color-bg, #fff); color: var(--color-fg, #111) !important; }
  .pdu__cta:hover { transform: scale(.97); filter: saturate(.85); }
  @media (max-width: 768px) { .pdu__grid { grid-template-columns: 1fr; } }
</style>