body {
  background: #000;
  background-image: 
    radial-gradient(circle at center, 
      rgba(0, 0, 0, 1) 10%, 
      rgba(0, 0, 0, 0.85) 20%, 
      rgba(0, 255, 255, 0.5) 26%, 
      rgba(138, 43, 226, 0.4) 32%, 
      rgba(0, 0, 0, 0) 100%
    );
  background-size: cover;
  background-position: center;
  margin: 0;
  min-height: 100vh;
  overflow-y: auto;
  animation: pulseTurquoise 6s infinite ease-in-out,
             pulseViolet 8s infinite ease-in-out,
             rotateHalo 60s linear infinite;
}

/* Animation halo turquoise */
@keyframes pulseTurquoise {
  0%, 100% {
    background-image: radial-gradient(circle at center, 
      rgba(0, 0, 0, 1) 10%, 
      rgba(0, 0, 0, 0.85) 20%, 
      rgba(0, 255, 255, 0.5) 26%, 
      rgba(138, 43, 226, 0.4) 32%, 
      rgba(0, 0, 0, 0) 100%
    );
  }
  50% {
    background-image: radial-gradient(circle at center, 
      rgba(0, 0, 0, 1) 10%, 
      rgba(0, 0, 0, 0.85) 20%, 
      rgba(0, 255, 255, 0.8) 28%, 
      rgba(138, 43, 226, 0.4) 32%, 
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* Animation halo violet */
@keyframes pulseViolet {
  0%, 100% {
    background-image: radial-gradient(circle at center, 
      rgba(0, 0, 0, 1) 10%, 
      rgba(0, 0, 0, 0.85) 20%, 
      rgba(0, 255, 255, 0.5) 26%, 
      rgba(138, 43, 226, 0.4) 32%, 
      rgba(0, 0, 0, 0) 100%
    );
  }
  50% {
    background-image: radial-gradient(circle at center, 
      rgba(0, 0, 0, 1) 10%, 
      rgba(0, 0, 0, 0.85) 20%, 
      rgba(0, 255, 255, 0.5) 26%, 
      rgba(138, 43, 226, 0.7) 36%, 
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* Rotation lente du halo autour du centre */
@keyframes rotateHalo {
  0% {
    background-position: center center;
  }
  100% {
    background-position: 10% 10%;
  }
}

/* Canvas plein écran derrière le contenu */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; 
  background: radial-gradient(circle at center, #0a0a0a, #000);
}