Module actualités (cartes)

<style>
.bn-news-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;

  padding: 1.5rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-news-cards__item {
  padding: 1.5rem;
  border: 1px solid rgba(230, 228, 221, 0.1);
  border-radius: 6px;

  --fx-shadow: none;
  box-shadow: var(--fx-shadow);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.bn-news-cards.fx-shadow .bn-news-cards__item {
  --fx-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}

.bn-news-cards.fx-shadow .bn-news-cards__item:hover {
  transform: translateY(-3px);
}

.bn-news-cards__date {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5C6160;
  margin-bottom: 0.75rem;
}

.bn-news-cards__item h3 {
  color: #E6E4DD;
  font-size: 1rem;
  margin: 0 0 0.6rem;
}

.bn-news-cards__item p {
  color: #979793;
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.bn-news-cards__item a {
  color: #E6E4DD;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
}

.bn-news-cards__item a:hover {
  text-decoration: underline;
}

</style>

<section class="bn-news-cards" data-fx-root>
  <article class="bn-news-cards__item">
    <span class="bn-news-cards__date">12 mai 2026</span>
    <h3>Concevoir pour l'avenir</h3>
    <p>Comment les technologies émergentes changent notre façon de concevoir et d'interagir.</p>
    <a href="#">Lire l'article →</a>
  </article>

  <article class="bn-news-cards__item">
    <span class="bn-news-cards__date">30 avril 2026</span>
    <h3>Les coulisses de Signal</h3>
    <p>Un aperçu de notre dernier projet et du processus créatif qui l'accompagne.</p>
    <a href="#">Lire l'article →</a>
  </article>

  <article class="bn-news-cards__item">
    <span class="bn-news-cards__date">18 avril 2026</span>
    <h3>5 astuces pour rester créatif</h3>
    <p>Des habitudes simples pour garder sa créativité vivante au quotidien.</p>
    <a href="#">Lire l'article →</a>
  </article>
</section>