Liens dans un paragraphe

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

.bn-links {
  --bn-link-color: #E6E4DD;

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

.bn-links__paragraph {
  max-width: 560px;
  margin: 0 0 2rem;
  color: #C7C1B7;
  font-size: 1rem;
  line-height: 1.75;
}

.bn-link {
  color: var(--bn-link-color);
  text-decoration: underline;
  text-decoration-color: rgba(230, 228, 221, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.bn-link:hover {
  text-decoration-color: var(--bn-link-color);
}

.bn-link:focus-visible {
  outline: 2px solid rgba(230, 228, 221, 0.5);
  outline-offset: 3px;
  border-radius: 2px;
}

.bn-links__states {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(230, 228, 221, 0.1);
}

.bn-links__state {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bn-links__state-label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #979793;
}

/* Ces deux classes ne servent qu'à FORCER visuellement l'état pour
   la démonstration côte à côte (le vrai ":hover" fonctionne aussi
   normalement sur les liens si tu passes la souris dessus) */
.bn-link--hover-demo {
  text-decoration-color: var(--bn-link-color);
}

.bn-link--visited-demo {
  color: #979793;
}

</style>

<div class="bn-links" data-fx-root>
  <p class="bn-links__paragraph">
    Blaig Nova est une invitation à explorer l'inconnu. Découvrez mes
    <a href="#" class="bn-link">projets</a>, lisez mes
    <a href="#" class="bn-link">réflexions</a>
    ou parcourez la <a href="#" class="bn-link">collection Blaig Nova</a>.
  </p>

  <div class="bn-links__states">
    <div class="bn-links__state">
      <span class="bn-links__state-label">Par défaut</span>
      <a href="#" class="bn-link">En savoir plus →</a>
    </div>
    <div class="bn-links__state">
      <span class="bn-links__state-label">Au survol</span>
      <a href="#" class="bn-link bn-link--hover-demo">En savoir plus →</a>
    </div>
    <div class="bn-links__state">
      <span class="bn-links__state-label">Focus (tabulez)</span>
      <a href="#" class="bn-link">En savoir plus →</a>
    </div>
    <div class="bn-links__state">
      <span class="bn-links__state-label">Visité</span>
      <a href="#" class="bn-link bn-link--visited-demo">En savoir plus →</a>
    </div>
  </div>
</div>