/* Fond du hero de l'accueil : massif en trame de carrés bleus, posé en bas
   du hero, pleine largeur (le bloc sort du conteneur centré ; --hx-w = largeur
   de la fenêtre sans la barre de défilement, posée par hero-terrain.js). */
#hero > .hx {
  position: absolute; z-index: 0; top: auto; bottom: 0;
  height: clamp(200px, 30vw, 420px);
  left: 50%; width: var(--hx-w, 100vw); translate: -50% 0;
  pointer-events: none; overflow: hidden; contain: strict;
  opacity: 0; transition: opacity .6s ease;
}
#hero > .hx.is-ready { opacity: 1; }
#hero > .hx canvas { display: block; width: 100%; height: 100%; }
body.a11y-hc #hero > .hx { display: none; }