.bulle {
  background-size: contain;
  height: 150px;
  max-height: 25svw;
  width: 150px;
  max-width: 25svw;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99;
  transform: translateX(-50%);
}

.bulle1 {
  background-image: url("../images/sans gluten.png");
  left: 15svw;
  animation: tombe 10s linear infinite;
}

.bulle2 {
  background-image: url("../images/sans lactose.png");
  left: 35svw;
  animation: tombe2 10s linear infinite;
}

.bulle3 {
  background-image: url("../images/sans sucre.png");
  left: 80svw;
  animation: tombe3 10s linear infinite;
}

@keyframes vibre {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

@keyframes tombe {
  0% {
    top: calc(0svh - 150px);
  }
  5% {
    top: calc(0svh - 150px);
  }
  10% {
    top: 15svh;
  }
  70% {
    top: 15svh;
  }
  100% {
    top: 100svh;
  }
}

@keyframes tombe2 {
  0% {
    top: calc(0svh - 150px);
  }
  20% {
    top: calc(0svh - 150px);
  }
  25% {
    top: 25svh;
  }
  90% {
    top: 25svh;
  }
  100% {
    top: 100svh;
  }
}

@keyframes tombe3 {
  0% {
    top: calc(0svh - 150px);
  }
  15% {
    top: calc(0svh - 150px);
  }
  30% {
    top: 20svh;
  }
  85% {
    top: 20svh;
  }
  100% {
    top: 100svh;
  }
}