/* ---------- Pied de page ---------- */
.footer {
  position: relative;
  padding: 80px 0 72px;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.footer-top nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-top nav .kicker {
  margin-bottom: 8px;
  font-size: 10px;
}
.footer-top nav a {
  font: 700 20px / 28px var(--sans);
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.2s ease;
}
.footer-top nav a:hover {
  color: var(--ink);
}
.back-top {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--ink-2);
}
.back-top .mono {
  font-size: 9px;
  letter-spacing: 0.1em;
}
.back-top-circle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 16px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.back-top:hover .back-top-circle {
  background: var(--ink);
  color: var(--bg);
}
/* Le nom, sur une ligne, d'un bord à l'autre de la grille. Décoratif (aria-hidden) : il suit la largeur, pas le zoom.
   « CLÉMENT ROUX » en 900 fait 7,80 fois sa taille de large ; 12,72 % de la largeur le laisse juste à l'intérieur.
   Le padding de droite (0,048em) recentre le dessin, que l'interlettrage négatif après le X décale vers la droite. */
.footer .wrap {
  container-type: inline-size;
}
.footer-name {
  padding: max(40px, 0.3em) 0.048em max(40px, 0.3em) 0;
  border-bottom: 1px solid var(--line);
  /* Sans unités de conteneur : la même largeur calculée sur l'écran (grille de 1600 px au plus). */
  font: 900 min((100vw - 2 * var(--edge)) * 0.1272, 1600px * 0.1272) / 1 var(--sans);
  font-size: 12.72cqw;
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--faint);
  user-select: none;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
}
.footer-bottom .mono {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.footer-sep {
  margin: 0 16px;
  color: var(--line);
}
/* Copyright puis liens légaux, sur une ligne ; empilés sur téléphone. */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
}
.footer-meta > .footer-sep {
  font: 400 11px / 1.5 var(--mono);
}
.footer-meta a {
  transition: color 0.2s ease;
}
.footer-meta a:hover {
  color: var(--ink);
}
.footer-icons {
  display: flex;
  gap: 10px;
}
.footer-icons a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 15px;
  color: var(--ink-2);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.footer-icons a:hover {
  background: var(--ink);
  color: var(--bg);
}
@media (max-width: 640px) {
  .footer {
    padding: 56px 0 72px;
  }
  .footer-top nav a {
    font-size: 18px;
  }
  .footer-bottom {
    flex-direction: column-reverse;
  }
  .footer-meta {
    flex-direction: column;
  }
  .footer-meta > .footer-sep {
    display: none;
  }
}
/* Écran tactile : 44 × 44 px au moins sous le doigt (voir base.css) ; les liens et les icônes s'écartent assez
   pour que leurs zones ne se chevauchent pas. */
@media (pointer: coarse) {
  .footer-top nav {
    gap: 16px;
  }
  .footer-icons {
    gap: 12px;
  }
  .footer-top nav a,
  .footer-meta a,
  .footer-icons a {
    position: relative;
  }
  .footer-top nav a::after,
  .footer-meta a::after,
  .footer-icons a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    translate: -50% -50%;
  }
}

/* ---------- Animations (états posés par reveal.js ; rien n'est masqué sans .has-motion) ---------- */
/* La dernière ligne ne monte pas : collée au bas de la page, elle n'atteint jamais la zone où reveal.js déclenche
   l'apparition (marge basse de 10 %) et resterait cachée sur les écrans hauts. */
.has-motion .footer .footer-bottom[data-reveal] {
  opacity: 1;
  translate: none;
}