/* Conteneur qui couvre tout l'écran en arrière-plan */
.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Se place DERRIÈRE votre texte et vos menus */
  pointer-events: none; /* Permet de cliquer sur vos liens à travers la neige */
  background-color: transparent;
}

.snow {
  position: absolute;
  top: -1000px;
  left: 0;
  right: 0;
  bottom: 0;
  /* On multiplie les points blancs de tailles différentes */
  background-image: 
    radial-gradient(4px 4px at 20px 30px, #fff, transparent),
    radial-gradient(9px 10px at 40px 70px, #fff, transparent),
    radial-gradient(5px 7px at 50px 160px, #f0f8ff, transparent),
    radial-gradient(5px 4px at 90px 40px, #fff, transparent),
    radial-gradient(4px 6px at 110px 110px, #fff, transparent),
    radial-gradient(10px 10px at 150px 10px, #fff, transparent),
    radial-gradient(8px 8px at 180px 190px, #f0f8ff, transparent),
    radial-gradient(4px 4px at 210px 60px, #fff, transparent),
    radial-gradient(6px 7px at 240px 140px, #fff, transparent),
    radial-gradient(8px 10px at 270px 20px, #fff, transparent),
    radial-gradient(4px 5px at 310px 180px, #f0f8ff, transparent),
    radial-gradient(3px 3px at 340px 80px, #fff, transparent);
  
  /* On réduit la taille du motif pour qu'il se répète plus souvent */
  background-size: 300px 300px; 
}

/* Vitesses différentes pour l'effet de profondeur */
/* On accélère un peu la chute pour l'effet de tempête */
.layer1 { animation: fall 15s linear infinite; }
.layer2 { animation: fall 22s linear infinite; opacity: 0.8; }
.layer3 { animation: fall 30s linear infinite; opacity: 0.6; }

@keyframes fall {
  from { transform: translateY(0); }
  to { transform: translateY(1000px); }
} 
@keyframes fall {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-15px, 250px); }
  50% { transform: translate(15px, 500px); }
  75% { transform: translate(-15px, 750px); }
  100% { transform: translate(0, 1000px); }
}