/**
 * Vidéo popup — carte de couverture + bouton, et lightbox sombre animée.
 * La lightbox (.bejoy-vp-modal) est créée une seule fois par le JS et
 * partagée par toutes les vidéos de la page.
 */

/* --- Carte de couverture + bouton --- */
.bejoy-video-popup__trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bejoy-video-popup__cover {
  display: block;
  overflow: hidden;
  border-radius: 16px;
}

/* Dimensions de la couverture pilotées par les réglages (largeur + hauteur
   exactes). object-fit: cover recadre sans déformer, jamais lié à la vidéo. */
.bejoy-video-popup__cover img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Neutralise le fond/anneau par défaut des <button> Elementor & navigateur
   (hover/focus/active) — sinon une couleur parasite apparaît DERRIÈRE le pill
   au survol. !important pour battre les styles de bouton du thème/kit. */
.bejoy-video-popup__trigger,
.bejoy-video-popup__trigger:hover,
.bejoy-video-popup__trigger:focus,
.bejoy-video-popup__trigger:active {
  background: none !important;
  box-shadow: none !important;
  outline: none;
  color: inherit;
}
.bejoy-video-popup__trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.bejoy-video-popup__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: #ffffff;
  color: #141414;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  /* Aucune animation de survol : seule la couleur transitionne (réglage hover). */
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bejoy-video-popup__icon {
  display: inline-flex;
  align-items: center;
}
.bejoy-video-popup__icon svg,
.bejoy-video-popup__icon i {
  width: 1em;
  height: 1em;
  font-size: 0.8em;
  fill: currentColor;
}

/* --- Lightbox partagée --- */
.bejoy-vp-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  /* Flou d'arrière-plan « premium » (frosted), teinte légère. Fond non animé en
     opacité + ré-échantillonnage forcé en JS à l'ouverture (cf. galerie) pour
     éviter l'affichage bizarre du 1er clic. La croix s'adapte (classe --light). */
  background: var(--bejoy-vp-overlay, rgba(20, 20, 24, 0.28));
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.45s;
}

.bejoy-vp-modal.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;
}
.bejoy-vp-stage {
  position: relative;
  /* Affichage réduit (~25 % plus petit que l'ancien 1100px). */
  width: min(var(--bejoy-vp-maxw, 825px), 100%);
  aspect-ratio: 16 / 9;
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--bj-t-base, 0.55s) var(--bj-ease-out, ease), opacity var(--bj-t-base, 0.55s) var(--bj-ease-out, ease);
}
.bejoy-vp-modal.is-open .bejoy-vp-stage {
  transform: scale(1);
  opacity: 1;
}

.bejoy-vp-stage.ratio-4-3 { aspect-ratio: 4 / 3; }
.bejoy-vp-stage.ratio-1-1 { aspect-ratio: 1 / 1; width: min(60vh, 100%); }
.bejoy-vp-stage.ratio-9-16 { aspect-ratio: 9 / 16; width: min(42vh, 100%); }

.bejoy-vp-player,
.bejoy-vp-player iframe,
.bejoy-vp-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
  background: #000;
}
/* Pas de liseré de focus bleu (défaut navigateur/Elementor) sur la vidéo/scène. */
.bejoy-vp-modal,
.bejoy-vp-stage,
.bejoy-vp-player,
.bejoy-vp-player iframe,
.bejoy-vp-player video {
  outline: none !important;
}

/* Croix fine, SANS fond, en haut à droite de la vidéo. !important pour battre
   le fond de bouton par défaut d'Elementor/thème (sinon carré rose au survol). */
.bejoy-vp-close,
.bejoy-vp-close:hover,
.bejoy-vp-close:focus,
.bejoy-vp-close:active {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
}
.bejoy-vp-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.25s ease, transform 0.3s ease;
}
.bejoy-vp-close::before,
.bejoy-vp-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1.5px;
  background: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.bejoy-vp-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.bejoy-vp-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
/* Fond clair → croix NOIRE (sinon blanche). Classe posée en JS. */
.bejoy-vp-modal--light .bejoy-vp-close::before,
.bejoy-vp-modal--light .bejoy-vp-close::after {
  background: #141414;
  filter: none;
}
.bejoy-vp-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .bejoy-vp-modal, .bejoy-vp-stage, .bejoy-video-popup__cover img, .bejoy-video-popup__btn {
    transition-duration: 0.01ms;
  }
}