.page-wrapper {
  position: relative;
}

.floating-tags-container {
  position: absolute;
  top: 8rem;
  margin-left: 8rem;
  width: 100%;
  height: 5rem;
  z-index: -1; /* Passe derrière */
  pointer-events: none;
}

.floating-tag {
  position: absolute;
  animation: float 12s infinite ease-in-out;
}

/* Couleurs */
.tag-purple {
  background-color: #d1b3ff; 
  color: #1a0033;
  left: 5%;
  top: 20%;
  animation-delay: 0s;
}
.tag-red {
  background-color: #ff6b6b;
  color: #330000;
  left: 45%;
  top: 50%;
  animation-delay: 1s;
}
.tag-cyan {
  background-color: #4ff1f1;
  color: #002b2b;
  left: 25%;
  top: 30%;
  animation-delay: 2s;
}
.tag-yellow {
  background-color: #fff58c;
  color: #333000;
  left: 65%;
  top: 10%;
  animation-delay: 3s;
}

/* Animation flottante */
@keyframes float {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) translateX(30px) rotate(-5deg);
  }
  50% {
    transform: translateY(0px) translateX(-30px) rotate(5deg);
  }
  75% {
    transform: translateY(15px) translateX(15px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) translateX(0px) rotate(-5deg);
  }
}