3 étapes connectées

<style>
.bn-steps-line {
  padding: 3.5rem 2rem;
  text-align: center;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-steps-line__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 780px;
  margin: 0 auto;
}

.bn-steps-line__item {
  flex: 1 1 200px;
  max-width: 220px;
}

.bn-steps-line__circle {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 1px solid rgba(230, 228, 221, 0.3);

  color: #E6E4DD;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;

  --fx-glow: none;
  box-shadow: var(--fx-glow);
}

.bn-steps-line.fx-glow .bn-steps-line__circle {
  --fx-glow: 0 0 30px 4px rgba(230, 228, 221, 0.2);
}

.bn-steps-line__item h3 {
  color: #E6E4DD;
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.bn-steps-line__item p {
  color: #979793;
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0;
}

.bn-steps-line__connector {
  flex: 0 0 60px;
  height: 1px;
  margin-top: 28px;
  background-image: linear-gradient(to right, rgba(230, 228, 221, 0.3) 40%, transparent 0%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
}

@media (max-width: 700px) {
  .bn-steps-line__row { flex-direction: column; align-items: center; }
  .bn-steps-line__connector { display: none; }
}

</style>

<section class="bn-steps-line" data-fx-root>
  <div class="bn-steps-line__row">

    <div class="bn-steps-line__item">
      <span class="bn-steps-line__circle">1</span>
      <h3>Créer un compte</h3>
      <p>Inscrivez-vous en quelques secondes et paramétrez votre profil.</p>
    </div>

    <span class="bn-steps-line__connector"></span>

    <div class="bn-steps-line__item">
      <span class="bn-steps-line__circle">2</span>
      <h3>Explorer le contenu</h3>
      <p>Parcourez cours, projets et membres inspirants.</p>
    </div>

    <span class="bn-steps-line__connector"></span>

    <div class="bn-steps-line__item">
      <span class="bn-steps-line__circle">3</span>
      <h3>Rejoindre et créer</h3>
      <p>Participez aux discussions et partagez votre travail.</p>
    </div>

  </div>
</section>