{# blog-trio.html — Grille 3 articles featured (sans chips de catégories).
   Variante simple de blog-hub-categories (qui inclut chips + 6+ articles).
   Slots :
   {{EYEBROW}} / {{H2}}
   {{ARTICLE_1_IMG_SRC}} / {{ARTICLE_1_TITLE}} / {{ARTICLE_1_DATE}} / {{ARTICLE_1_EXCERPT}} / {{ARTICLE_1_HREF}}
   {{ARTICLE_2_IMG_SRC}} / {{ARTICLE_2_TITLE}} / {{ARTICLE_2_DATE}} / {{ARTICLE_2_EXCERPT}} / {{ARTICLE_2_HREF}}
   {{ARTICLE_3_IMG_SRC}} / {{ARTICLE_3_TITLE}} / {{ARTICLE_3_DATE}} / {{ARTICLE_3_EXCERPT}} / {{ARTICLE_3_HREF}}
#}

<section class="btr">
  <div class="btr__inner">
    <header class="btr__header">
      <span class="btr__eyebrow">{{EYEBROW}}</span>
      <h2 class="btr__h2">{{H2}}</h2>
    </header>
    <div class="btr__grid">
      <article class="btr__card">
        <a class="btr__media" href="{{ARTICLE_1_HREF}}"><img src="{{ARTICLE_1_IMG_SRC}}" alt="" loading="lazy"></a>
        <time class="btr__date">{{ARTICLE_1_DATE}}</time>
        <h3 class="btr__title"><a href="{{ARTICLE_1_HREF}}">{{ARTICLE_1_TITLE}}</a></h3>
        <p class="btr__excerpt">{{ARTICLE_1_EXCERPT}}</p>
      </article>
      <article class="btr__card">
        <a class="btr__media" href="{{ARTICLE_2_HREF}}"><img src="{{ARTICLE_2_IMG_SRC}}" alt="" loading="lazy"></a>
        <time class="btr__date">{{ARTICLE_2_DATE}}</time>
        <h3 class="btr__title"><a href="{{ARTICLE_2_HREF}}">{{ARTICLE_2_TITLE}}</a></h3>
        <p class="btr__excerpt">{{ARTICLE_2_EXCERPT}}</p>
      </article>
      <article class="btr__card">
        <a class="btr__media" href="{{ARTICLE_3_HREF}}"><img src="{{ARTICLE_3_IMG_SRC}}" alt="" loading="lazy"></a>
        <time class="btr__date">{{ARTICLE_3_DATE}}</time>
        <h3 class="btr__title"><a href="{{ARTICLE_3_HREF}}">{{ARTICLE_3_TITLE}}</a></h3>
        <p class="btr__excerpt">{{ARTICLE_3_EXCERPT}}</p>
      </article>
    </div>
  </div>
</section>

<style>
  .btr { background: var(--color-bg, #fff); color: var(--color-fg, #111); font-family: var(--font-body, system-ui, sans-serif); }
  .btr__inner { max-width: 80rem; margin: 0 auto; padding: 5rem 1.5rem; }
  .btr__header { text-align: center; margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
  .btr__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #ff2c7b); }
  .btr__h2 { font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.75rem); margin: 0; }
  .btr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .btr__card { display: flex; flex-direction: column; gap: 0.6rem; }
  .btr__media { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16/10; margin-bottom: 0.4rem; }
  .btr__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
  .btr__media:hover img { transform: scale(1.04); }
  .btr__date { font-size: 0.8rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.08em; }
  .btr__title { font-family: var(--font-heading, inherit); font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: 0; }
  .btr__title a { color: inherit; text-decoration: none; }
  .btr__title a:hover { text-decoration: underline; }
  .btr__excerpt { font-size: 0.95rem; line-height: 1.55; margin: 0; opacity: 0.8; }
  @media (max-width: 991px) { .btr__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .btr__grid { grid-template-columns: 1fr; } }
</style>