/* ============================================================
   BLOC FOOTER RICHE (structure neutre)
   Contenu : 4 colonnes (NAP, services, zones, mentions) + ligne
   de copyright. Fond inversé (le pack décide).
   Zéro couleur, zéro police nominale, zéro valeur de style.
   ============================================================ */

.bloc-footer {
  background: var(--surface-invert);
  color: var(--ink-invert);
  padding-block: var(--sp-8) var(--sp-6);
}

/* Grille 4 colonnes desktop, 1 colonne mobile */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6) var(--sp-5);
}

/* NAP en première colonne */
.footer-nom {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--ink-invert);
  margin-bottom: var(--sp-3);
}

.footer-adresse {
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-invert-muted);
}

.footer-adresse p + p {
  margin-top: var(--sp-3);
}

.footer-adresse a {
  color: var(--ink-invert);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Titres de colonne */
.footer-titre {
  font-family: var(--font-display);
  font-weight: var(--w-strong);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-invert);
  margin-bottom: var(--sp-3);
}

/* Listes de liens */
.footer-liens {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.footer-liens a {
  color: var(--ink-invert-muted);
  text-decoration: none;
}

.footer-liens a:hover {
  color: var(--ink-invert);
  text-decoration: underline;
}

/* Ligne du bas */
.footer-bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: var(--bw-1) solid color-mix(in srgb, var(--ink-invert-muted) 25%, transparent);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-invert-muted);
}

.footer-bottom a {
  color: var(--ink-invert-muted);
}

/* Mobile : tout empile */
@media (max-width: 640px) {
  .bloc-footer { padding-block: var(--sp-7) var(--sp-5); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* Tablette : 2 colonnes */
@media (min-width: 641px) and (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}