/* =========================================
= FOOTER — footer/footer.css (chargé par footer/inc-footer.php)
= Markup : footer.php (racine). Carte vitrée, colonnes de liens, bas de page.
= Bandeau réassurance → sous-composant footer/subfooter/.
========================================= */
/* Hauteur : 80 % de la fenêtre moins la hauteur du header (5rem) et la marge
   basse de la carte (2rem) → la carte vitrée arrive juste sous la ligne de pli. */
.nl-footer {
  position: relative;
  padding: 2rem;
  min-height: calc(80vh - 7.5rem);
  color: var(--primary);
  font-size: var(--text-base);
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* Image de fond : choisie dans Réglages > Nouli (footer/admin-footer.php).
   La variable est écrite par footer/inc-footer.php ; sans image → fond uni. */
.nl-footer--bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--nl-footer-bg, none);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: grayscale(100%);
}

/* Carte vitrée — sticky bottom : poussée en bas du footer + colle à 2rem du viewport pendant le scroll */
.nl-footer--card {
  position: sticky;
  bottom: 2rem;
  margin-top: auto;
  background: rgba(255, 255, 255, 0.625);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 2.5rem 2rem 1.25rem;
  width: 100%;
  display: grid;
  gap: 1.25rem;
}

/* Grid 4 colonnes (mêmes propriétés que .nl-mega--inner) */
.nl-footer--inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-bottom: 1rem;
}

/* Colonne « Réseaux sociaux » : 4e colonne, la 3e reste vide (respiration).
   Sous 64rem la grille passe sur une seule colonne : placement annulé. */
.nl-footer--col--social { grid-column: 4; }

/* Titre de colonne — même style que .nl-mega--menu-link */
.nl-footer--title {
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  font-style: italic;
  color: var(--primary);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}

.nl-footer--list {
  list-style: none;
  display: grid;
  gap: 0.625rem;
  font-size: var(--text-sm);
}

.nl-footer--link {
  position: relative;
  display: inline-block;
  font-family: var(--SR);
  font-size: var(--text-sm);
  color: var(--primary);
  text-decoration: none;
}
.nl-footer--link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.125em;
  width: 100%;
  height: 0.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.nl-footer--link:hover::after,
.nl-footer--link:focus-visible::after {
  transform: scaleX(1);
}

/* Séparateur inner ↔ bottom */
.nl-footer--sep {
  border: 0;
  height: 1px;
  background: var(--muted);
}


.nl-footer--copy {
  font-size: var(--text-xxs);
  color: var(--primary-60);
  text-transform: uppercase;
}

@media (max-width: 64rem) {
  .nl-footer--inner { grid-template-columns: 1fr; }
  .nl-footer--col--social { grid-column: auto; }
}

@media (max-width: 48rem) {
  .nl-footer { padding: 3rem 1rem; }
  .nl-footer--card { padding: 1.5rem 1.25rem; }
}