arrière-plan aurora doux et premium (radiales colorées qui se déplacent lentement). Utilise peu de CPU

<!-- 7) Aurora Background -->
<section class="fx7-aurora">
  <h1>Section avec fond “Aurore”</h1>
</section>

<style>
.fx7-aurora{
  position:relative; isolation:isolate; min-height:38vh;
  display:grid; place-items:center; color:#111; background:#fff; overflow:hidden;
  border-radius:20px; padding:40px;
}
.fx7-aurora::before, .fx7-aurora::after{
  content:""; position:absolute; inset:-20%; z-index:-1; filter: blur(40px);
  background:
    radial-gradient(40% 60% at 20% 30%, rgba(0,122,255,.35), transparent 60%),
    radial-gradient(35% 55% at 80% 20%, rgba(52,199,89,.35), transparent 60%),
    radial-gradient(45% 60% at 50% 80%, rgba(255,45,85,.28), transparent 60%);
  animation: fx7 18s linear infinite alternate;
}
.fx7-aurora::after{ animation-duration: 24s; transform: rotate(12deg); opacity:.8; }
@keyframes fx7{
  0%{ transform: translate3d(-2%, -2%, 0) scale(1.02) }
  100%{ transform: translate3d(2%, 2%, 0) scale(1.05) }
}
@media (prefers-reduced-motion: reduce){
  .fx7-aurora::before,.fx7-aurora::after{ animation:none; }
}
.fx7-aurora h1{ font:800 clamp(28px,6vw,56px)/1.05 system-ui, -apple-system,"SF Pro Display"; }
</style>