Card article / réflexion

<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600&display=swap');

.bn-card-article {
  max-width: 340px;
  font-family: 'Inter', sans-serif;

  background: #0B0F10;
  border: 1px solid rgba(230, 228, 221, 0.1);
  border-radius: 4px;
  overflow: hidden;

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

.bn-card-article.fx-shadow {
  --fx-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.bn-card-article.fx-glow {
  --fx-glow: 0 0 60px 4px rgba(230, 228, 221, 0.12);
}

.bn-card-article__media {
  aspect-ratio: 5 / 3;
  overflow: hidden;
}

.bn-card-article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bn-card-article__body {
  padding: 1.5rem;
}

.bn-card-article__kicker {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #979793;
  margin-bottom: 0.5rem;
}

.bn-card-article__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: #E6E4DD;
  margin: 0 0 0.4rem;
  line-height: 1.15;
}

.bn-card-article__meta {
  font-size: 0.75rem;
  color: #5C6160;
  margin: 0 0 0.75rem;
}

.bn-card-article__excerpt {
  font-size: 0.85rem;
  color: #979793;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.bn-card-article__link {
  color: #E6E4DD;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
}

.bn-card-article__link:hover {
  text-decoration: underline;
}

</style>

<article class="bn-card-article" data-fx-root>
  <div class="bn-card-article__media">
    <img src="https://placehold.co/500x300" alt="Illustration de l'article" />
  </div>

  <div class="bn-card-article__body">
    <span class="bn-card-article__kicker">Réflexion</span>
    <h3 class="bn-card-article__title">L'inconnu comme horizon</h3>
    <p class="bn-card-article__meta">12 mai 2026 · 6 min</p>
    <p class="bn-card-article__excerpt">
      Réflexion sur notre rapport à l'inconnu et sur ce qu'il révèle de l'essentiel.
    </p>
    <a href="#" class="bn-card-article__link">Lire l'article →</a>
  </div>
</article>