{# retailers-grid.html — Grille N cards de retailers (logo + nom + tagline + lien "Acheter").
   Slots :
   {{EYEBROW}} / {{H2}}                     — header
   {{ITEMS_HTML}}                           — répéter pour chaque retailer :
                                              <a class="rgr__card" href="…" target="_blank" rel="noopener">
                                                <span class="rgr__logo">LOGOTYPE</span>
                                                <span class="rgr__name">Amazon</span>
                                                <span class="rgr__tagline">Livraison Prime</span>
                                                <span class="rgr__btn">Acheter →</span>
                                              </a>
#}

<section class="rgr">
  <div class="rgr__inner">
    <header class="rgr__header">
      <span class="rgr__eyebrow">{{EYEBROW}}</span>
      <h2 class="rgr__h2">{{H2}}</h2>
    </header>
    <div class="rgr__grid">
      {{ITEMS_HTML}}
    </div>
  </div>
</section>

<style>
  .rgr { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .rgr__inner { max-width: 80rem; margin: 0 auto; padding: 4rem 1.5rem; }
  .rgr__header { text-align: center; margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
  .rgr__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .rgr__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.5rem, 3.5vw, 2.25rem); margin: 0; }
  .rgr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .rgr__card { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.5rem 1rem; background: var(--color-bg-alt, #f7f7f7); border-radius: 12px; color: inherit; text-decoration: none; text-align: center; transition: transform .2s, box-shadow .2s; }
  .rgr__card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
  .rgr__logo { font-family: var(--font-heading, inherit); font-weight: 900; font-size: 1.1rem; letter-spacing: -0.02em; opacity: 0.85; }
  .rgr__name { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 1rem; }
  .rgr__tagline { font-size: 0.8rem; opacity: 0.7; }
  .rgr__btn { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 0.85rem; color: var(--color-accent, #ff2c7b); margin-top: 0.25rem; }
  @media (max-width: 768px) { .rgr__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .rgr__grid { grid-template-columns: 1fr; } }
</style>