html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background: #a01028;
  animation: colorShift 20s infinite ease-in-out;
  position: relative;
  font-family: sans-serif;
}

h1 {
  font-size: 40px;
}

.jojo {
  width: 463px;
  margin: 0 auto;
  top: 0;
  
}

.mt-10 {
margin-top: 0;

}

.max-w-md {
  max-width: 30rem;
}

.jojo h1 {
  border-radius: 20px;
}



/* Animation bulles */
.bubble {  
  position: fixed;
  top: 250px;
  left: 0;
  z-index: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  animation: fall 12s linear infinite;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(0, 200, 255, 0.4);
  background: radial-gradient(circle, rgba(255,255,255,0.3), rgba(0,200,255,0.1));
}

.bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes fall {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translateY(20vh) translateX(-10px);
  }
  40% {
    transform: translateY(40vh) translateX(10px);
  }
  60% {
    transform: translateY(60vh) translateX(-10px);
  }
  80% {
    transform: translateY(80vh) translateX(10px);
  }
  100% {
    transform: translateY(110vh);
    opacity: 0;
  }
}

@keyframes colorShift {
  0%   { background-color: #a01028; }
  25%  { background-color: #1034a0; }
  50%  { background-color: #10a074; }
  75%  { background-color: #a06010; }
  100% { background-color: #a01028; }
}

        #myImage {
      position: absolute;
      top: -500px; /* Position initiale hors de l'écran */
      left: calc(100% + 0px); /* 30px à droite du label */
      height:200px;
      transition: top 1s ease;
      z-index: 10;
    }


/* Fond de la popup */
.popup-overlay {
  display: none;              /* caché par défaut */
  position: fixed;
  inset: 0;                   /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,0.6);
  justify-content: center;    /* fonctionne quand display:flex */
  align-items: center;        /* fonctionne quand display:flex */
  z-index: 9999;              /* devant presque tout */
}

/* Etat visible */
.popup-overlay.show {
  display: flex;
}

/* Contenu de la popup */
.popup-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  position: relative;
}

/* Bouton de fermeture */
.close-btn {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 24px;
  color: #333;
  cursor: pointer;
  background: transparent;
  border: none;
  line-height: 1;
}