/* Footer : grille en 5 parties égales — [ LAVA ] [ Accueil ] [ Explorer ] [ Mon projet ] [ Contact ] —
   puis une ligne d'informations légales, plus petite. Zone bleue (tokens.css).
   Les libellés reprennent la typographie des titres et les codes des liens du héros
   (filet orange au survol, point orange sur la page courante). */
.footer {
  background: var(--blue);
  border-top: 1px solid var(--line);
  padding: 0 var(--gutter) calc(clamp(1.5rem, 3vw, 2.5rem) + var(--tabbar-h, 0px));
}
.footer__inner { max-width: var(--maxw); margin: 0 auto; }

.footer__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(3.5rem, 2.5rem + 3vw, 6rem) 0;
  border-bottom: 1px solid var(--line);
}

/* 1 — Identité : « LAVA » au-dessus, le A agrandi dessous, bleu Magnetic sur le crème du héros */
.footer .footer__mark { /* .footer pour passer devant les styles de liens génériques */
  align-self: start;
  display: grid; justify-items: start; row-gap: clamp(0.9rem, 0.5rem + 1vw, 1.4rem);
  width: min(100%, 210px);
  padding: clamp(1.1rem, 0.8rem + 0.8vw, 1.6rem);
  background: var(--page);
  color: var(--blue);
  border-radius: var(--radius);
  transition: transform var(--t-ui) var(--ease);
}
.footer .footer__mark:hover { transform: translateY(-3px); }
.footer__mark svg { display: block; height: auto; overflow: hidden; }
.footer__lava { width: 100%; aspect-ratio: 372 / 55; }
.footer__a { width: 100%; aspect-ratio: 81 / 55; }

/* 2 à 5 — Les pages : chaque libellé dans sa colonne, filet vertical à gauche, posé en bas de la grille */
.footer__nav { display: contents; }
.footer__nav ul { display: contents; }
.footer__nav li {
  display: flex; align-items: flex-end;
  padding-left: clamp(0.75rem, 1.2vw, 1.25rem);
  border-left: 1px solid var(--line);
  min-width: 0;
}
.footer__nav a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.2em 0;
  font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: var(--display-track); text-transform: uppercase; line-height: 1;
  font-size: clamp(1rem, 1.85vw, 1.7rem); /* tient dans 1/5 de largeur (« Mon projet » est le plus long) */
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--t-micro);
}
.footer__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--ease);
}
.footer__nav a:hover, .footer__nav a:focus-visible { color: var(--orange-text); }
.footer__nav a:hover::after, .footer__nav a:focus-visible::after { transform: scaleX(1); }
.footer__nav a[aria-current="true"]::before {
  content: ''; flex: none; width: 0.2em; height: 0.2em; min-width: 6px; min-height: 6px; border-radius: 50%;
  background: var(--orange); margin-right: 0.45em;
}

/* Informations légales : ligne séparée, petit texte */
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem;
  padding-top: 1.5rem;
  font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.02em;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; transition: color var(--t-micro); }
.footer__legal a:hover { color: var(--ink); }

/* Tablette : l'identité au-dessus, les 4 pages en 4 colonnes égales */
@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 2.5rem; }
  .footer .footer__mark { grid-column: 1 / -1; width: 180px; }
  .footer__nav a { font-size: clamp(0.95rem, 2.2vw, 1.3rem); }
}
/* Mobile et petite tablette : identité, puis les pages en 2 × 2 (en 4 colonnes, « Mon projet » ne tiendrait plus) */
@media (max-width: 719px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
  .footer .footer__mark { width: 150px; }
  .footer__nav a { font-size: clamp(0.95rem, 4.4vw, 1.2rem); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}