/* popup video */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 255;
  padding: 10px;
}

.popup.active {
  display: flex;
}

.popup-content {
  position: relative;
  width: fit-content;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-container {
  position: relative;
  background-color: #000;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

/* Vidéo en paysage (16:9, horizontal) - Mobile */
.popup-content.landscape .video-container {
  aspect-ratio: 16 / 9;
}

/* Vidéo en portrait (9:16, vertical/mobile) - Mobile */
.popup-content.portrait .video-container {
  aspect-ratio: 9 / 16;
  height: 80vh;
}

/* Vidéo carrée (1:1) - Mobile */
.popup-content.square .video-container {
  aspect-ratio: 1 / 1;
}

/* Forcer le media article à prendre toute la place */
.video-container .media,
.video-container article {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.video-container video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 10px;
  object-fit: contain;
  background-color: #000;
}

/* Trigger (icône play) */
.popup-trigger {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.popup-trigger::before {
  content: url("../../images/play-video.svg");
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 111;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Bouton fermer */
.close-popup {
  content: url(../../images/close-popup.svg);
  position: absolute;
  top: -35px;
  right: 0;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 999;
  transition: transform 0.2s ease;
  display: inline-block;
}

.close-popup:hover {
  transform: scale(1.1);
}

/* Tablet */
@media (min-width: 768px) {
  .popup {
    padding: 20px;
  }
  
  .popup-content.landscape .video-container {
    width: 90vw;
  }
  
  .popup-content.portrait .video-container {
    width: 500px;
  }
  
  .popup-content.square .video-container {
    width: 600px;
  }
  
  .close-popup {
    top: -40px;
    width: auto;
    height: auto;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .popup-content.landscape .video-container {
    width: 1200px;
  }
}

/* Video CARD Styles */
.video-card {
  max-width: 1120px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.video-card__thumbnail, .video-card__thumbnail > *{
  display: block;
  border-radius: 10px;
}

.video-card__thumbnail > *::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.video-card {
  width: fit-content;
  display: inline-flex;
  flex-direction: column;
  height: 100%;
}

.video-card__title {
    color: var(--color-primary--1);
    font-family: Barlow;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: uppercase;
    padding-bottom: 32px;
    margin: 0;
}

@media screen and (min-width: 999px) {
    .video-card__title {
        font-size: 48px;
        padding-left: 95px;
        padding-bottom: 64px;
    }
}