.popup {
  display: none; /* Cachée par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Fond assombri */
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* Rectangle noir pour l'animation */
.popup-rectangle {
  width: 0;
  height: 0;
  background-color: black;
  position: absolute;
  transition: width 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), transform 0.3s ease-in-out;
}

/* État agrandi avec rebond */
.popup.active .popup-rectangle {
  width: 90vw;
  height: calc(90vw * 9 / 16);
  max-width: 640px;
  max-height: 360px;
  animation: bounce 0.6s ease-out;
}

/* État rétréci proprement */
.popup.closing .popup-rectangle {
  width: 0;
  height: 0;
  transform: scale(1); /* Réinitialiser l'effet de rebond */
}

/* Animation pour l'effet de rebond */
@keyframes bounce {
  0% {
    transform: scale(1); /* Taille normale */
  }
  40% {
    transform: scale(1.15); /* Augmentation de la taille à 115% */
  }
  70% {
    transform: scale(0.98); /* Légère réduction pour accentuer le retour */
  }
  100% {
    transform: scale(1); /* Retour à la taille normale */
  }
}

/* Style iframe */
iframe {
  position: absolute;
  z-index: 2; /* Au-dessus du rectangle */
  width: 90vw; /* Largeur à 90% de l'écran */
  height: calc(90vw * 9 / 16); /* Maintenir un ratio 16:9 */
  max-width: 640px; /* Largeur maximale */
  max-height: 360px; /* Hauteur maximale */
  transition: opacity 0.2s ease-in-out;
}