/* reset de bord */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* corps plein écran */
body {

  background-color: #050505;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* conteneur pour le reste du contenu */
.content-container {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 600px;
  padding: 2rem;
}

/* titres dégradés */
h1 {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  background: linear-gradient(to right, #fff, #acacac);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(255,255,255,0.1);
}




/* arriere-plan animé */
/* background.css */
.gradient-background {
  position: fixed;   /* reste en place */
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 0;        /* sous la site-content */
  overflow: hidden;
  pointer-events: none;
}

.site-content {
  position: relative;
  z-index: 1;        /* au-dessus du background */
}

/* ... toutes tes règles .gradient-sphere, .glow, etc. ci-dessous ... */


/* sphères floues */
.gradient-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.sphere-1 {
  width: 40vw; height: 40vw;
  background: linear-gradient(40deg, rgba(255,0,128,0.8), rgba(255,102,0,0.4));
  top: -10%; left: -10%;
  animation: float-1 15s ease-in-out infinite alternate;
}
.sphere-2 {
  width: 45vw; height: 45vw;
  background: linear-gradient(240deg, rgba(72,0,255,0.8), rgba(0,183,255,0.4));
  bottom: -20%; right: -10%;
  animation: float-2 18s ease-in-out infinite alternate;
}
.sphere-3 {
  width: 30vw; height: 30vw;
  background: linear-gradient(120deg, rgba(133,89,255,0.5), rgba(98,216,249,0.3));
  top: 60%; left: 20%;
  animation: float-3 20s ease-in-out infinite alternate;
}

/* animations float */
@keyframes float-1 {
  0%   { transform: translate(0,0)   scale(1); }
  100% { transform: translate(10%,10%) scale(1.1); }
}
@keyframes float-2 {
  0%   { transform: translate(0,0)    scale(1); }
  100% { transform: translate(-10%,-5%) scale(1.15); }
}
@keyframes float-3 {
  0%   { transform: translate(0,0) scale(1); opacity: 0.3; }
  100% { transform: translate(-5%,10%) scale(1.05); opacity: 0.6; }
}

/* overlay quadrillage */
.grid-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,0.03) 1px, transparent 1px);
  z-index: 2;
}

/* halo central */
.glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 40vw; height: 40vh;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(72,0,255,0.15), transparent 70%);
  filter: blur(30px);
  animation: pulse 8s infinite alternate;
  z-index: 2;
}
@keyframes pulse {
  0% { opacity:0.3; transform:translate(-50%,-50%) scale(0.9); }
  100% { opacity:0.7; transform:translate(-50%,-50%) scale(1.1); }
}

/* bruit léger */
.noise-overlay {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  z-index:5;
  opacity:0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* conteneur particules */
.particles-container {
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:3;
}
/* === PARTICULES === */
.particle {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0;            /* le JS va monter puis baisser l’opacité */
  pointer-events: none;
  will-change: transform, opacity;
}