body {
  position: relative;
  min-height: 100vh;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  
  /* Définir l'image de fond */
  background-image: url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&h=400&fit=crop');
  background-size: cover;
  background-position: center;
}

.icon-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* Inclut le padding dans la largeur/hauteur */
}

.icon {
  position: absolute;
  max-width: 100px;
  max-height: 100px;
  
  /* Générer des valeurs aléatoires pour la position et la rotation */
  left: calc(random() * (100% - 100px));
  top: calc(random() * (100% - 100px));
  transform: rotate(calc(random() * 360deg));
}

/* Espacer les icônes pour éviter les superpositions */
.icon:nth-child(1) { z-index: 1; }
.icon:nth-child(2) { z-index: 2; left: calc(random() * (50% - 100px)); top: calc(random() * (100% - 100px)); }
.icon:nth-child(3) { z-index: 3; left: calc(50% + random() * (50% - 100px)); top: calc(random() * (100% - 100px)); }
.icon:nth-child(4) { z-index: 4; left: calc(random() * (50% - 100px)); top: calc(50% + random() * (50% - 100px)); }
.icon:nth-child(5) { z-index: 5; left: calc(50% + random() * (50% - 100px)); top: calc(50% + random() * (50% - 100px)); }
/* Ajoutez plus de règles .icon:nth-child() si vous avez plus de 5 icônes */