/* Essais de fonds animés du hero (27/10/2026), choisis par ?fond= dans l'adresse.
   Sans paramètre : le fond actuel, inchangé. Le quadrillé incliné reste dans toutes les versions.
   Mouvement réduit : tout est figé (règle Hallmark : rien ne bouge pour qui l'a demandé). */
.fond-couche { position: absolute; pointer-events: none; }

/* 1 · vive : l'aurora actuelle, visible (opacités x3) et plus ample */
.hero[data-fond="vive"] .fond-aurora__bg::before {
  background: radial-gradient(ellipse 45% 38% at 20% 25%, rgba(139, 70, 235, 0.22) 0%, transparent 65%),
              radial-gradient(ellipse 32% 28% at 85% 15%, rgba(196, 140, 255, 0.18) 0%, transparent 60%);
  animation-duration: 11s; }
.hero[data-fond="vive"] .fond-aurora__bg::after {
  background: radial-gradient(ellipse 50% 42% at 80% 75%, rgba(109, 43, 201, 0.16) 0%, transparent 62%),
              radial-gradient(ellipse 38% 32% at 20% 90%, rgba(236, 120, 200, 0.12) 0%, transparent 65%);
  animation-duration: 15s; }
.hero[data-fond="vive"] .fond-aurora__layer {
  background: radial-gradient(ellipse 38% 32% at 55% 45%, rgba(165, 113, 240, 0.16) 0%, transparent 60%),
              radial-gradient(ellipse 28% 24% at 35% 70%, rgba(120, 160, 255, 0.10) 0%, transparent 60%);
  animation-duration: 9s; }

/* 2 · pixels et 5 · projecteur : calques posés exactement sur le quadrillé (même boîte, même rotation) */
.fond-grille { left: -15%; top: -15%; width: 130%; height: 130%; transform: rotate(6deg); }
.fond-grille--masque { mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 100%); }

/* 3 · fluide : dégradé liquide calculé petit puis étalé par le flou */
.hero[data-fond="fluide"] .fond-aurora__bg::before, .hero[data-fond="fluide"] .fond-aurora__bg::after, .hero[data-fond="fluide"] .fond-aurora__layer { display: none; }
.fond-fluide { left: -10%; top: -10%; width: 120%; height: 120%; filter: blur(48px) saturate(1.15); opacity: 0.55; }

/* 4 · sol 3D : un sol quadrillé en perspective qui avance vers soi */
.fond-sol { left: -60%; right: -60%; top: 0; height: 60%; transform-origin: 50% 100%; transform: perspective(420px) rotateX(55deg);
  background-image: linear-gradient(to right, rgba(109, 43, 201, 0.42) 1px, transparent 1px), linear-gradient(to bottom, rgba(109, 43, 201, 0.42) 1px, transparent 1px);
  background-size: 56px 56px; animation: fond-sol 2.6s linear infinite;
  mask-image: linear-gradient(to top, transparent 0%, #000 25%, #000 45%, transparent 95%); -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 25%, #000 45%, transparent 95%); }
.fond-sol-lueur { left: 0; right: 0; top: 30%; height: 50%; background: radial-gradient(ellipse 55% 60% at 50% 100%, rgba(139, 70, 235, 0.20), transparent 70%); }
@keyframes fond-sol { from { background-position: 0 0; } to { background-position: 0 56px; } }

/* 5 · projecteur : lueur et quadrillé violet révélés sous le curseur */
.fond-projecteur-lueur { inset: 0; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%), rgba(139, 70, 235, 0.16), transparent 70%); }
.fond-projecteur-cadre { inset: 0; mask-image: radial-gradient(300px circle at var(--mx, 50%) var(--my, 40%), #000 0%, transparent 100%); -webkit-mask-image: radial-gradient(300px circle at var(--mx, 50%) var(--my, 40%), #000 0%, transparent 100%); }
.fond-projecteur-grille { background-image: linear-gradient(to right, rgba(109, 43, 201, 0.55) 1px, transparent 1px), linear-gradient(to bottom, rgba(109, 43, 201, 0.55) 1px, transparent 1px); background-size: 56px 56px; }

@media (prefers-reduced-motion: reduce) { .fond-sol { animation: none; } .hero[data-fond="vive"] .fond-aurora__bg::before, .hero[data-fond="vive"] .fond-aurora__bg::after, .hero[data-fond="vive"] .fond-aurora__layer { animation: none; } }

/* Fond pixels : quadrillé de 28 px (au lieu de 56) pour des Z et des € plus fins (27/10). */
.hero.fond-aurora[data-fond="pixels"]::after, .fond-aurora[data-fond-mode="dodo"]::after { background-size: 28px 28px; opacity: 0.55; }

/* Fond pixels : les trois nappes floues ne bougent plus (elles coûtaient un tiers des images par seconde),
   leur couleur reste. Le mouvement vient des pixels seuls. */
.hero[data-fond="pixels"] .fond-aurora__bg::before, .hero[data-fond="pixels"] .fond-aurora__bg::after, .hero[data-fond="pixels"] .fond-aurora__layer, [data-fond-mode="dodo"] .fond-aurora__bg::before, [data-fond-mode="dodo"] .fond-aurora__bg::after, [data-fond-mode="dodo"] .fond-aurora__layer { animation: none; will-change: auto; }
.fond-grille { will-change: transform; } /* calque à part : redessiner les pixels ne redessine plus le fond coloré */
.fond-aurora__bg { contain: paint; }

/* Mode « dodo » (calculateur, 28/10) : le bloc fait toute la page ; le fond ne couvre que le haut, sinon le
   quadrillé, son masque et la naissance des Z se centrent à mi-page, hors de l'écran. */
.fond-aurora[data-fond-mode="dodo"] .fond-aurora__bg { bottom: auto; height: min(100%, 1000px); }
.fond-aurora[data-fond-mode="dodo"]::after { bottom: auto; height: min(130%, 1300px); }