Fil d'Ariane

<style>
.bn-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;

  padding: 1rem 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.03em;

  background: #0B0F10;
}

.bn-breadcrumb__link {
  color: #979793;
  text-decoration: none;
  text-transform: uppercase;
}

.bn-breadcrumb__link:hover {
  color: #E6E4DD;
}

.bn-breadcrumb__sep {
  color: #5C6160;
}

.bn-breadcrumb__current {
  color: #E6E4DD;
  font-weight: 600;
  text-transform: uppercase;
}

</style>

<nav class="bn-breadcrumb" aria-label="Fil d'ariane">
  <a href="#" class="bn-breadcrumb__link">Accueil</a>
  <span class="bn-breadcrumb__sep">/</span>
  <a href="#" class="bn-breadcrumb__link">Projets</a>
  <span class="bn-breadcrumb__sep">/</span>
  <span class="bn-breadcrumb__current" aria-current="page">Entre ombre et silence</span>
</nav>