/* Copie du bloc « Fond aurora + quadrillage » de /shared-styles.css (27/10/2026), le temps de la preview.
   À la bascule : sortir ce bloc dans un fichier partagé lu par la prod ET cette page, jamais deux copies. */
/* ---------- Fond aurora + quadrillage (mutualisé le 2026-09-01) ----------
   Le fond violet du hero, partagé : aurora 3 couches animées + quadrillage
   incliné. Défini ICI et seulement ici, jamais recopié dans une page.
   Usage : classe `fond-aurora` sur la section (elle pose relative + overflow
   + quadrillage), enfant
     <div class="fond-aurora__bg" aria-hidden="true"><div class="fond-aurora__layer"></div></div>
   et la classe `fond-aurora__contenu` sur le conteneur du contenu (z-index
   au-dessus du fond). Utilisé par : hero de l'accueil, section Cash Dormant
   (accueil + variantes), /outils/calculateur-cash-dormant, /affilies. */
.fond-aurora { position: relative; overflow-x: clip;   /* ⚠️ jamais `hidden` : il ferait de la section une zone de
                         défilement, et tout `position: sticky` à l'intérieur
                         cesserait de coller, sans erreur nulle part. */ }
.fond-aurora__contenu { position: relative; z-index: 1; }
.fond-aurora__bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fond-aurora__bg::before,
.fond-aurora__bg::after,
.fond-aurora__layer {
  content: "";
  position: absolute; inset: -30%;
  will-change: transform;
}
.fond-aurora__bg::before {
  background:
    radial-gradient(ellipse 45% 35% at 20% 25%, rgba(139, 70, 235, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse 30% 25% at 85% 15%, rgba(165, 113, 240, 0.045) 0%, transparent 60%);
  animation: fond-aurora-a 16s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.fond-aurora__bg::after {
  background:
    radial-gradient(ellipse 50% 40% at 80% 75%, rgba(109, 43, 201, 0.055) 0%, transparent 62%),
    radial-gradient(ellipse 35% 30% at 20% 90%, rgba(139, 70, 235, 0.045) 0%, transparent 65%);
  animation: fond-aurora-b 22s cubic-bezier(0.45, 0, 0.55, 1) infinite reverse;
}
.fond-aurora__layer {
  position: absolute; inset: -30%;
  will-change: transform;
  background:
    radial-gradient(ellipse 35% 30% at 55% 45%, rgba(165, 113, 240, 0.045) 0%, transparent 60%),
    radial-gradient(ellipse 25% 22% at 35% 70%, rgba(139, 70, 235, 0.03) 0%, transparent 60%);
  animation: fond-aurora-c 13s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes fond-aurora-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  25%      { transform: translate3d(12%, 8%, 0)  scale(1.18) rotate(2deg); }
  50%      { transform: translate3d(-8%, 14%, 0) scale(1.25) rotate(-3deg); }
  75%      { transform: translate3d(6%, -10%, 0) scale(1.12) rotate(1deg); }
}
@keyframes fond-aurora-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  33%      { transform: translate3d(-14%, 6%, 0) scale(1.20) rotate(-2deg); }
  66%      { transform: translate3d(10%, -12%, 0) scale(1.15) rotate(3deg); }
}
@keyframes fond-aurora-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(8%, -6%, 0) scale(1.30); }
}
/* Quadrillage incliné, au-dessus de l'aurora, sous le contenu. */
.fond-aurora::after {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(15, 15, 20, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 15, 20, 0.10) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: rotate(6deg);
  filter: blur(0.5px);
  opacity: 0.7;
  mask-image: radial-gradient(ellipse 70% 60% at center, rgba(0,0,0,0.85) 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, rgba(0,0,0,0.85) 30%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .fond-aurora__bg::before,
  .fond-aurora__bg::after,
  .fond-aurora__layer { animation: none; }
}