/* [HOME-FOOTER-WAVE-20260917] Bas de page façon duolingo.com : une étendue
   noire pleine largeur ferme la page, précédée d'une vague d'entrée reprenant
   la silhouette de l'étendue verte de Duo (plateaux hauts, baie centrale),
   mais noire et moins haute. La vague est un SVG autonome sur fond transparent :
   la page (blanche) reste visible dans les creux. Le socle (.legal-wave-socle)
   porte le noir sous la vague ; les mentions blanches y restent dans la
   gouttière habituelle de la page. Full-bleed : le conteneur s'étend sur toute
   la largeur de l'écran. Anti-couture : la vague chevauche le socle de 1px
   (même noir #000) — aucune ligne blanche au-dessus des mentions. */

/* [HOME-FOOTER-SHORT-20260918] En bas de page, les quatre boutons de
   téléchargement doivent rester visibles : l'étendue noire est raccourcie
   (vague basse, socle tassé) et l'écart boutons → étendue resserré.
   La taille des boutons est inchangée. */
.legal-wave-footer {
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}

/* La vague elle-même : pleine largeur, silhouette façon Duo étirée par
   preserveAspectRatio="none", mais basse pour laisser les boutons visibles
   en bas de page. margin-bottom négatif : fait chevaucher le socle de 1px
   — les deux sont en #000 pur, cela colmate la couture subpixel qui
   dessinait une ligne blanche au-dessus de « Mentions légales ». */
.legal-wave {
  display: block;
  width: 100%;
  height: clamp(7rem, 16vw, 12rem);
  margin-bottom: -1px;
}

/* Socle noir : la marge haute historique de .legal-link-footer
   (--home-legal-gap, pensée pour laisser de l'air au-dessus du footer plat)
   est annulée sur le footer à l'intérieur du socle — l'écart au-dessus de
   l'étendue est porté par .legal-wave-footer, sur fond page. */
.legal-wave-socle {
  background: #000;
}

.legal-wave-socle .legal-link-footer {
  margin-top: 0;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* Mentions en blanc sur le socle noir (demandé : les trois mentions du bas
   passent en blanc). light-theme.css les peint en gris : ces règles doivent
   donc gagner — footer-wave.css est chargé après light-theme.css. */
.legal-wave-socle .legal-link-footer a {
  color: #fff;
}

.legal-wave-socle .legal-copyright {
  color: #fff;
}

/* [HOME-FOOTER-NEVER-GREEN-20260919] Les trois mentions du bas
   (Mentions légales, contact@duello.fr, © 2026 Duello) restent blanches
   dans TOUS les états : repos, survol, clic, visité, focus. Ni vert
   (--accent, #d9ff57), ni violet de lien visité du navigateur : cliquer
   ne change jamais la couleur. Le contour de focus reste visible mais
   blanc (styles.css le peint en --accent par défaut). Remplace le
   NEVER-GREEN limité au seul contact : même garantie, étendue aux trois
   mentions. */
.legal-wave-socle .legal-link-footer a:link,
.legal-wave-socle .legal-link-footer a:visited,
.legal-wave-socle .legal-link-footer a:hover,
.legal-wave-socle .legal-link-footer a:active,
.legal-wave-socle .legal-link-footer a:focus,
.legal-wave-socle .legal-link-footer a:focus-visible {
  color: #fff;
}

.legal-wave-socle .legal-link-footer a:focus-visible {
  outline-color: #fff;
}

/* Pas de voile gris au toucher (téléphones) : le tapotement ne teinte
   ni les liens ni le © 2026 Duello. */
.legal-wave-socle .legal-link-footer a,
.legal-wave-socle .legal-copyright {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 680px) {
  .legal-wave {
    height: clamp(8rem, 26vw, 12rem);
  }

  /* [HOME-FOOTER-TALL-SYMMETRIC-20260919] Sur téléphone uniquement :
     étendue noire rehaussée, boutons légèrement décollés du noir (marge
     haute accrue). L'air Windows → noir égale l'air ligne du bandeau →
     App Store (voir schools-band.css) : les quatre boutons restent
     visibles en bas de page. */
  .legal-wave-footer {
    margin-top: clamp(1.5rem, 4vw, 2.25rem);
  }
}