Footer complet

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

.bn-footer {
  --bn-footer-accent: #E6E4DD;

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

.bn-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;

  max-width: 1100px;
  margin: 0 auto 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(230, 228, 221, 0.1);
}

.bn-footer__logo {
  display: block;
  color: #E6E4DD;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.bn-footer__desc {
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 280px;
  margin: 0;
}

.bn-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bn-footer__col-title {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #979793;
  margin-bottom: 0.4rem;
}

.bn-footer__col a {
  color: #C7C1B7;
  text-decoration: none;
  font-size: 0.85rem;
}

.bn-footer__col a:hover {
  color: var(--bn-footer-accent);
}

.bn-footer__bottom {
  max-width: 1100px;
  margin: 0 auto;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;

  font-size: 0.75rem;
  color: #5C6160;
}

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

</style>

<footer class="bn-footer" data-fx-root>
  <div class="bn-footer__top">
    <div class="bn-footer__brand">
      <span class="bn-footer__logo">BN</span>
      <p class="bn-footer__desc">
        Une invitation à explorer l'inconnu, à questionner l'essentiel et à créer autrement.
      </p>
    </div>

    <div class="bn-footer__col">
      <span class="bn-footer__col-title">Navigation</span>
      <a href="#">À propos</a>
      <a href="#">Projets</a>
      <a href="#">Réflexions</a>
      <a href="#">Contact</a>
    </div>

    <div class="bn-footer__col">
      <span class="bn-footer__col-title">Projets</span>
      <a href="#">Tous les projets</a>
      <a href="#">Entre ombre et silence</a>
      <a href="#">Signal</a>
    </div>

    <div class="bn-footer__col">
      <span class="bn-footer__col-title">Informations</span>
      <a href="#">Mentions légales</a>
      <a href="#">Politique de confidentialité</a>
      <a href="#">CGV</a>
    </div>
  </div>

  <div class="bn-footer__bottom">
    <span>© 2026 Blaig Nova — Tous droits réservés</span>
    <span>Site conçu comme un signal</span>
  </div>
</footer>