/* Fond vivant d'IMPERIUM AGENCY (29/10, demande du fondateur : « plus de blanc seul »). Un seul système pour tout le site :
 * la vitrine (public/accueil), le catalogue 03 (public/independants) et les pages Next.js (importé par app/layout.tsx).
 *
 * Principe (propositions/RECHERCHE_29_OCT.md, technique A) : la page est posée sur une teinte légère (perle bleutée en clair,
 * nuit profonde en sombre), jamais un blanc plat. Derrière tout le contenu, UNE seule couche fixe porte quatre taches de
 * lumière de la palette IMPA (bleu #3b5bdb, bleu ciel #9db0ff, or #efe4c8) et un grain très fin. Seule sa transformation
 * (déplacement et échelle) est animée : rien n'est repeint pendant le mouvement, la carte graphique déplace une image.
 * Boucle de 84 s en aller-retour, courbe sinusoïdale douce : un mouvement de brume, qu'on ne remarque pas en lisant.
 * Arrêt complet si le visiteur demande moins d'animations ; la couche reste, immobile.
 *
 * Utilisation : poser la classe « fv » sur <html>, laisser <body> sans fond. Une page peut figer la couche (classe
 * « fv-fige » sur <html>) quand elle a déjà son propre fond animé. Les couleurs sont des variables : une page peut les changer.
 * Le thème est lu sur html[data-theme="dark"] (clé « imp-theme », commune à tout le site). */
:root {
  /* clair : perle bleutée, pas de blanc */
  --fv-base: #edf0f7;
  --fv-base-rgb: 237 240 247;
  --fv-t1: 59 91 219;   --fv-a1: .13;  /* bleu IMPA, en haut à gauche */
  --fv-t2: 157 176 255; --fv-a2: .34;  /* bleu ciel, en haut à droite */
  --fv-t3: 239 228 200; --fv-a3: .85;  /* or pâle, en bas à droite */
  --fv-t4: 255 255 255; --fv-a4: .75;  /* lumière blanche au centre : le relief */
}
html[data-theme="dark"] {
  /* sombre : nuit profonde, halos bleus et or, aucune couleur criarde */
  --fv-base: #05070d;
  --fv-base-rgb: 5 7 13;
  --fv-t1: 59 91 219;   --fv-a1: .26;
  --fv-t2: 157 176 255; --fv-a2: .09;
  --fv-t3: 201 164 78;  --fv-a3: .12;
  --fv-t4: 27 35 80;    --fv-a4: .55;
}
html.fv { background-color: var(--fv-base); }
html.fv body { background: transparent; }
html.fv body::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  /* plus grande que l'écran : la dérive ne montre jamais un bord */
  inset: -9vmax;
  /* cinq taches de lumière, puis le grain : une petite tuile de bruit peinte une seule fois, sur la même couche */
  background:
    radial-gradient(ellipse 44% 38% at 20% 20%, rgb(var(--fv-t1) / var(--fv-a1)), rgb(var(--fv-t1) / 0) 70%),
    radial-gradient(ellipse 40% 36% at 84% 16%, rgb(var(--fv-t2) / var(--fv-a2)), rgb(var(--fv-t2) / 0) 70%),
    radial-gradient(ellipse 46% 40% at 76% 82%, rgb(var(--fv-t3) / var(--fv-a3)), rgb(var(--fv-t3) / 0) 70%),
    radial-gradient(ellipse 38% 34% at 36% 60%, rgb(var(--fv-t4) / var(--fv-a4)), rgb(var(--fv-t4) / 0) 72%),
    radial-gradient(ellipse 36% 32% at 12% 88%, rgb(var(--fv-t1) / calc(var(--fv-a1) * .7)), rgb(var(--fv-t1) / 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 .22 0 0 0 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px repeat;
  animation: fv-derive 84s cubic-bezier(.45, .05, .55, .95) infinite alternate;
  will-change: transform;
}
@keyframes fv-derive {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  35%  { transform: translate3d(3.5vmax, -2.5vmax, 0) scale(1.05); }
  70%  { transform: translate3d(-3vmax, 2vmax, 0) scale(1.03); }
  100% { transform: translate3d(2vmax, 3vmax, 0) scale(1.07); }
}
/* figé = mis en pause là où il en est (30/10) : « animation: none » le ramenait d'un coup à son départ à chaque défilement,
   le fond sautait et toute la couche était redessinée, d'où l'impression que la page remontait et ramait */
html.fv.fv-fige body::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html.fv body::before { animation: none; will-change: auto; }
}
/* impression : pas de fond */
@media print {
  html.fv { background: #fff; }
  html.fv body::before { display: none; }
}