Listes

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

.bn-lists {
  --bn-list-accent: #E6E4DD;

  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;

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

.bn-lists__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #979793;
  margin-bottom: 1rem;
}

.bn-list {
  margin: 0;
  padding: 0;
  list-style: none;

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

.bn-list li {
  color: #C7C1B7;
  font-size: 0.9rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

/* --- Puces --- */
.bn-list--bullet li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bn-list-accent);
  flex-shrink: 0;
}

/* --- Numérotée --- */
.bn-list--number {
  counter-reset: bn-counter;
}

.bn-list--number li::before {
  counter-increment: bn-counter;
  content: counter(bn-counter, decimal-leading-zero) ".";
  color: var(--bn-list-accent);
  font-weight: 600;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* --- Icônes (flèche) --- */
.bn-list--icon li::before {
  content: "→";
  color: var(--bn-list-accent);
  flex-shrink: 0;
}

</style>

<div class="bn-lists" data-fx-root>

  <div class="bn-lists__col">
    <span class="bn-lists__label">Liste à puces</span>
    <ul class="bn-list bn-list--bullet">
      <li>Explorer l'inconnu</li>
      <li>Questionner l'essentiel</li>
      <li>Créer autrement</li>
      <li>Partager des idées</li>
    </ul>
  </div>

  <div class="bn-lists__col">
    <span class="bn-lists__label">Liste numérotée</span>
    <ol class="bn-list bn-list--number">
      <li>Observer le monde</li>
      <li>Comprendre en profondeur</li>
      <li>Imaginer des possibles</li>
      <li>Donner forme aux idées</li>
    </ol>
  </div>

  <div class="bn-lists__col">
    <span class="bn-lists__label">Liste avec icônes</span>
    <ul class="bn-list bn-list--icon">
      <li>Explorer l'inconnu</li>
      <li>Questionner l'essentiel</li>
      <li>Créer autrement</li>
      <li>Partager des idées</li>
    </ul>
  </div>

</div>