/* ══════════════════════════════════════════════════════════════════════════
   FOND ANIMÉ DE LA PAGE D'ACCUEIL

   CE QUE C'EST
   Une courte vidéo d'atelier de technologie, posée DERRIÈRE la carte de
   connexion. Elle donne à voir le contexte réel de la plateforme — établi,
   imprimante 3D, cartes électroniques — là où la page n'offrait qu'un
   dégradé.

   POURQUOI ELLE EST AUSSI SOMBRE
   Ce n'est pas un réglage esthétique, c'est un calcul. La carte de connexion
   est translucide (rgba(26,24,37,.4)) : ce qui passe derrière change le
   contraste du texte. Or cette vidéo contient de grandes fenêtres presque
   blanches. Sans correction, le texte principal tombait à 2,52 : 1 et le
   texte secondaire à 1,09 : 1 — illisibles, très loin du minimum WCAG AA
   de 4,5 : 1.

   Avec brightness(.75), opacity(.55) et le voile radial ci-dessous, le PIRE
   pixel de la vidéo laisse 15,4 : 1 au texte principal et 6,5 : 1 au
   secondaire, mesurés au centre — là où se trouve la carte.
   Ces trois valeurs vont ensemble : les changer sans refaire le calcul, c'est
   rendre la page illisible pour quelqu'un. Le contrôle
   scripts/test-fond-anime.js les verrouille.

   CE QUI LA COUPE, ET POURQUOI
   · prefers-reduced-motion : mouvement non désiré (vertiges, migraines) ;
   · html.accessibility-focus : le mode « sans distraction » de la page ;
   · html.accessibility-contrast : le fond doit y rester blanc uni ;
   · connexion lente ou économiseur de données : voir fond-anime.js.
   Dans tous ces cas l'affiche fixe reste, la page ne perd rien.
   ══════════════════════════════════════════════════════════════════════════ */

.fond-anime {
  position: fixed;
  inset: 0;
  z-index: 0;               /* même plan que les décors existants, sous la carte */
  overflow: hidden;
  pointer-events: none;     /* ne vole jamais un clic à la carte de connexion */
}

.fond-anime video,
.fond-anime .fond-anime-affiche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le flou adoucit les arêtes du décor : l'œil ne cherche plus à lire ce
     qu'il y a derrière la carte. */
  filter: brightness(0.75) blur(2px);
  opacity: 0.55;
  transition: opacity .9s ease;
}

/* La vidéo n'apparaît qu'une fois vraiment prête : sans cela on verrait un
   rectangle noir remplacer l'affiche pendant le chargement. */
.fond-anime video { opacity: 0; }
.fond-anime.prete video { opacity: 0.55; }
.fond-anime.prete .fond-anime-affiche { opacity: 0; }

/* LE VOILE EST RADIAL, ET C'EST TOUT L'INTÉRÊT.

   Un assombrissement uniforme calé sur le pire pixel effaçait l'atelier :
   la page redevenait le dégradé qu'elle était, avec 163 Ko en plus. Le
   contraste ne se joue pourtant qu'à UN endroit — derrière la carte de
   connexion, seule zone où il y a du texte à lire.

   Le voile est donc dense au centre (0,65 : le texte secondaire y garde
   6,5 : 1, au-delà du minimum AA de 4,5) et s'efface vers les bords, où
   l'atelier reste visible. La carte est centrée par `body { display:flex;
   align-items:center; justify-content:center }` : le centre du voile et le
   centre de la carte coïncident donc toujours, quelle que soit la taille
   de l'écran. */
.fond-anime::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 65% at 50% 50%,
      rgba(8, 6, 18, 0.78) 0%,
      rgba(8, 6, 18, 0.65) 45%,
      rgba(8, 6, 18, 0.30) 78%,
      rgba(8, 6, 18, 0.12) 100%);
}

/* ── Coupures ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fond-anime video { display: none !important; }
  .fond-anime .fond-anime-affiche { opacity: 0.55 !important; }
}
html.accessibility-focus .fond-anime,
html.accessibility-contrast .fond-anime {
  display: none !important;
}

/* Sur un téléphone tenu à l'horizontale, la carte occupe presque tout
   l'écran : le fond ne se verrait pas, autant ne pas le télécharger. */
@media (max-height: 540px) and (orientation: landscape) {
  .fond-anime { display: none; }
}