{# blog-hub-categories.html — Hub blog : chips catégories + grille articles + CTA "voir tout".
   Slots :
   {{EYEBROW}} / {{H2}}              — header
   {{CHIPS_HTML}}                    — répéter <a class="bhc__chip" href="…">Label</a>
   {{ARTICLES_HTML}}                 — répéter
                                       <article class="bhc__card">
                                         <a class="bhc__media" href="…"><img src="…" alt="…" loading="lazy"></a>
                                         <span class="bhc__tag">Catégorie</span>
                                         <h3 class="bhc__title"><a href="…">Titre</a></h3>
                                         <p class="bhc__excerpt">Extrait</p>
                                       </article>
   {{CTA_LABEL}} / {{CTA_HREF}}      — bouton "Voir tous les articles"
#}

<section class="bhc">
  <div class="bhc__inner">
    <header class="bhc__header">
      <span class="bhc__eyebrow">{{EYEBROW}}</span>
      <h2 class="bhc__h2">{{H2}}</h2>
    </header>
    <nav class="bhc__chips" aria-label="Catégories">{{CHIPS_HTML}}</nav>
    <div class="bhc__grid">{{ARTICLES_HTML}}</div>
    <div class="bhc__more"><a class="bhc__cta" href="{{CTA_HREF}}">{{CTA_LABEL}}</a></div>
  </div>
</section>

<style>
  .bhc { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .bhc__inner { max-width: 80rem; margin: 0 auto; padding: 5rem 1.5rem; }
  .bhc__header { text-align: center; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
  .bhc__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .bhc__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0; }
  .bhc__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2.5rem; }
  .bhc__chip { padding: 0.45rem 0.95rem; border-radius: 999px; background: var(--color-bg-alt, #f0f0f0); color: inherit; text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: background .2s; }
  .bhc__chip:hover { background: color-mix(in srgb, var(--color-accent, #ff2c7b) 20%, transparent); }
  .bhc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
  .bhc__card { display: flex; flex-direction: column; gap: 0.75rem; }
  .bhc__media { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16/10; }
  .bhc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .bhc__tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent, #ff2c7b); }
  .bhc__title { font-family: var(--font-heading, inherit); font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin: 0; }
  .bhc__title a { color: inherit; text-decoration: none; }
  .bhc__title a:hover { text-decoration: underline; }
  .bhc__excerpt { font-size: 0.95rem; line-height: 1.5; margin: 0; opacity: 0.8; }
  .bhc__more { text-align: center; margin-top: 3rem; }
  .bhc__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: 1rem; padding: 0.95rem 1.75rem; border-radius: 10px; }
  @media (max-width: 991px) { .bhc__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .bhc__grid { grid-template-columns: 1fr; } }
</style>