Hiérarchie typographique

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

.bn-typo {
  padding: 2.5rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;

  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bn-typo__item {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(230, 228, 221, 0.08);
}

.bn-typo__legend {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #979793;
}

.bn-typo__h1,
.bn-typo__h2,
.bn-typo__h3,
.bn-typo__h4 {
  font-family: 'Bebas Neue', sans-serif;
  color: #E6E4DD;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.bn-typo__h1 { font-size: 3.2rem; }
.bn-typo__h2 { font-size: 2.4rem; }
.bn-typo__h3 { font-size: 1.8rem; }
.bn-typo__h4 { font-size: 1.3rem; }

.bn-typo__h5,
.bn-typo__h6 {
  font-family: 'Inter', sans-serif;
  color: #C7C1B7;
  margin: 0;
  font-weight: 600;
}

.bn-typo__h5 { font-size: 1rem; }
.bn-typo__h6 {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #979793;
}

</style>

<div class="bn-typo">
  <div class="bn-typo__item">
    <h1 class="bn-typo__h1">Explorer l'inconnu.</h1>
    <span class="bn-typo__legend">H1 — Titre principal / impact</span>
  </div>
  <div class="bn-typo__item">
    <h2 class="bn-typo__h2">Entre ombre et silence</h2>
    <span class="bn-typo__legend">H2 — Titre de section</span>
  </div>
  <div class="bn-typo__item">
    <h3 class="bn-typo__h3">Horizons perdus</h3>
    <span class="bn-typo__legend">H3 — Sous-titre de section</span>
  </div>
  <div class="bn-typo__item">
    <h4 class="bn-typo__h4">Signal dans le bruit</h4>
    <span class="bn-typo__legend">H4 — Titre de bloc</span>
  </div>
  <div class="bn-typo__item">
    <h5 class="bn-typo__h5">Questionner l'essentiel</h5>
    <span class="bn-typo__legend">H5 — Petit titre</span>
  </div>
  <div class="bn-typo__item">
    <h6 class="bn-typo__h6">Détail / surtitre</h6>
    <span class="bn-typo__legend">H6 — Micro titre</span>
  </div>
</div>