/*	*********************************************	*/
/*	Vignettes video portfolio	*/
/*	*********************************************	*/

/* 1. Base commune de masque parfaitement harmonisée */
.video-item, .video-item-9-16 {
  position: relative;
  cursor: pointer;
  z-index: 0;
  transition: transform 0.3s ease;
  border-radius: 22px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Fix bulletproof Safari */
}

/* 2. Gestion des ratios et dimensions */

/* --- Vidéo 16/9 classique --- */
.video-item {
  aspect-ratio: 16 / 9;
}

/* --- Vidéo 9/16 verticale - CORRECTION BLINDÉE POUR RATIO --- */
/* Base de la vignette 9/16 */
.video-item-9-16 {
  aspect-ratio: 9 / 16 !important;
  width: 74% !important; 
  height: auto !important; 
  padding: 0 !important; 
  /* Alignement centré par défaut si aucune autre classe n'est précisée */
  margin: 0 auto !important; 
}

/* --- Classes d'alignement --- */

/* Alignement à gauche */
.video-item-9-16.align-left {
  margin: 0 auto 0 0 !important;
}

/* Alignement au centre (redondant avec le défaut, mais pratique pour la clarté du HTML) */
.video-item-9-16.align-center {
  margin: 0 auto !important;
}

/* Alignement à droite */
.video-item-9-16.align-right {
  margin: 0 0 0 auto !important;
}

/* 3. Bordure décalée visible */
.video-item::before,
.video-item-9-16::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border: 2px solid #32fa88; /* vert */
  border-radius: 11px;
  z-index: 999;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* Effet optionnel au survol */
.video-item:hover::before,
.video-item-9-16:hover::before {
  border-color: #ffffff;
}

/* 4. Images et Vidéos */
.video-item img,
.video-item video,
.video-item-9-16 img,
.video-item-9-16 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.5s ease;
  /* border-radius supprimé ici pour les coins lisses */
}

/* La vidéo doit être parfaitement calée sur la vignette */
.video-item video,
.video-item-9-16 video {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* Transition fluide entre image et vidéo */
.video-item:hover video,
.video-item-9-16:hover video {
  opacity: 1;
}

.video-item:hover img,
.video-item-9-16:hover img  {
  opacity: 0;
}


/*	*********************************************	*/
/*	POPUP video	*/
/*	*********************************************	*/
.video-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  opacity: 0;
  transition: background 0.3s ease, opacity 0.3s ease;
}
.video-popup.active {
  background: rgba(0,0,0,0.9);
  opacity: 1;
}
.video-popup-inner {
  position: relative;
  width: 80vw;
  max-width: 1000px;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.video-popup.active .video-popup-inner {
  transform: scale(1);
  opacity: 1;
}
.video-popup video {
  width: 100%;
  height: auto;
  border-radius: 11px; /* <-- On ajoute l'arrondi ici pour la vidéo popup */
  display: block;
}
/* Bouton fermeture clean */
.close-popup {
  position: absolute;
  top: -45px;
  right: 0;
  font-size: 36px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.close-popup:hover {
  transform: scale(1.2);
  opacity: 0.7;
}
/* Modification de la popup quand elle est en 9/16 */
.video-popup.popup-9-16 .video-popup-inner {
  width: auto;
  height: 85vh; /* On se base sur 85% de la hauteur de l'écran */
  max-width: 100%;
}

.video-popup.popup-9-16 video {
  width: auto;
  height: 100%; /* La vidéo remplit les 85vh */
  margin: 0 auto;
}

/* Ajustement du bouton fermeture pour la popup verticale pour éviter qu'il ne sorte de l'écran en haut */
.video-popup.popup-9-16 .close-popup {
  right: -50px;
  top: 0;
}

/* Sur mobile, on remet le bouton de fermeture à l'intérieur ou au-dessus */
@media (max-width: 767px) {
  .video-popup.popup-9-16 .close-popup {
    right: 0;
    top: -40px;
  }
}