Skeleton loading

<style>
.bn-skeleton-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;

  padding: 1.5rem;
  background: #0B0F10;
}

.bn-skeleton-card {
  padding: 1.25rem;
  border-radius: 8px;
  border: 1px solid rgba(230, 228, 221, 0.08);

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

/* Le scintillement : un dégradé plus clair qui traverse le bloc de
   gauche à droite en boucle, via background-position animé */
.bn-skeleton {
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.12) 37%,
    rgba(255, 255, 255, 0.05) 63%
  );
  background-size: 400% 100%;
  animation: bn-shimmer 1.6s ease-in-out infinite;
}

@keyframes bn-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bn-skeleton--image {
  width: 100%;
  height: 140px;
}

.bn-skeleton--avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.bn-skeleton--line {
  height: 12px;
}

@media (max-width: 700px) {
  .bn-skeleton-grid {
    grid-template-columns: 1fr;
  }
}

</style>

<div class="bn-skeleton-grid">
  <div class="bn-skeleton-card bn-skeleton-card--large">
    <div class="bn-skeleton bn-skeleton--image"></div>
    <div class="bn-skeleton bn-skeleton--line" style="width: 60%;"></div>
    <div class="bn-skeleton bn-skeleton--line" style="width: 90%;"></div>
    <div class="bn-skeleton bn-skeleton--line" style="width: 40%;"></div>
  </div>

  <div class="bn-skeleton-card">
    <div class="bn-skeleton bn-skeleton--avatar"></div>
    <div class="bn-skeleton bn-skeleton--line" style="width: 70%;"></div>
    <div class="bn-skeleton bn-skeleton--line" style="width: 50%;"></div>
  </div>

  <div class="bn-skeleton-card">
    <div class="bn-skeleton bn-skeleton--avatar"></div>
    <div class="bn-skeleton bn-skeleton--line" style="width: 70%;"></div>
    <div class="bn-skeleton bn-skeleton--line" style="width: 50%;"></div>
  </div>
</div>