Badges de statut & compteurs

<style>
.bn-status-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;

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

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

.bn-status-demo__col {
  display: flex;
  flex-direction: column;
}

.bn-status-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #C7C1B7;
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}

.bn-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bn-status-dot--online { background: #3FB950; box-shadow: 0 0 6px rgba(63, 185, 80, 0.6); }
.bn-status-dot--degraded { background: #F5C518; box-shadow: 0 0 6px rgba(245, 197, 24, 0.6); }
.bn-status-dot--offline { background: #E5484D; box-shadow: 0 0 6px rgba(229, 72, 77, 0.6); }

.bn-counters {
  display: flex;
  gap: 1.5rem;
}

.bn-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(230, 228, 221, 0.2);
}

.bn-counter__number {
  color: #E6E4DD;
  font-size: 1.15rem;
  font-weight: 700;
}

.bn-counter__label {
  color: #979793;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

</style>

<div class="bn-status-demo">

  <div class="bn-status-demo__col">
    <span class="bn-status-demo__label">Indicateurs de statut</span>
    <div class="bn-status-item"><span class="bn-status-dot bn-status-dot--online"></span> En ligne</div>
    <div class="bn-status-item"><span class="bn-status-dot bn-status-dot--degraded"></span> Dégradé</div>
    <div class="bn-status-item"><span class="bn-status-dot bn-status-dot--offline"></span> Hors ligne</div>
  </div>

  <div class="bn-status-demo__col">
    <span class="bn-status-demo__label">Compteurs</span>
    <div class="bn-counters">
      <div class="bn-counter">
        <span class="bn-counter__number">07</span>
        <span class="bn-counter__label">Projets</span>
      </div>
      <div class="bn-counter">
        <span class="bn-counter__number">24</span>
        <span class="bn-counter__label">Articles</span>
      </div>
      <div class="bn-counter">
        <span class="bn-counter__number">1.2K</span>
        <span class="bn-counter__label">Vues</span>
      </div>
    </div>
  </div>

</div>