Formulaire newsletter

<style>
.bn-newsletter {
  --bn-newsletter-accent: #E6E4DD;

  max-width: 380px;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-newsletter__title {
  margin: 0 0 1rem;
  color: #E6E4DD;
  font-size: 0.95rem;
}

.bn-newsletter__form {
  display: flex;
  border: 1px solid rgba(230, 228, 221, 0.2);
  border-radius: 999px;
  overflow: hidden;
}

.bn-newsletter__form input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1.1rem;

  font-family: inherit;
  font-size: 0.85rem;
  color: #E6E4DD;
  background: transparent;
  border: none;
}

.bn-newsletter__form input::placeholder {
  color: #5C6160;
}

.bn-newsletter__form input:focus-visible {
  outline: none;
}

.bn-newsletter__form button {
  flex-shrink: 0;
  width: 44px;

  border: none;
  background: var(--bn-newsletter-accent);
  color: #0B0F10;
  font-size: 1rem;
  cursor: pointer;

  transition: opacity 0.2s ease;
}

.bn-newsletter__form button:hover {
  opacity: 0.85;
}

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

/* Utilitaire : cache visuellement le label sans le retirer pour
   les lecteurs d'écran (accessibilité) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

</style>

<div class="bn-newsletter" data-fx-root>
  <p class="bn-newsletter__title">Recevez les dernières réflexions et projets.</p>

  <form class="bn-newsletter__form">
    <label for="bn-newsletter-email" class="visually-hidden">Votre email</label>
    <input id="bn-newsletter-email" type="email" placeholder="Votre email" required />
    <button type="submit" aria-label="S'abonner">→</button>
  </form>

  <p class="bn-newsletter__note">Aucune publicité. Désinscription en 1 clic.</p>
</div>