/*
 * Vision Future Cachan Média — Responsive video stage
 * Version 1.0.4
 *
 * Keeps every principal video player at a stable 16:9 ratio from the first
 * paint, while preserving the site's centered content width and adapting to
 * desktop, tablet and mobile screens.
 */

:root {
  --vfcm-video-ratio: 16 / 9;
  --vfcm-video-max-width: 1920px;
  --vfcm-content-max-width: 1350px;
}

/* Use the whole centered content area and remove Bootstrap side gutters only
   around the principal player. */
.container-fluid.video-player-base {
  width: 100% !important;
  max-width: var(--vfcm-content-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: #000 !important;
}

.video-player-base > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.video-player-base > .row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.video-player-base .video-posts-video {
  width: 100%;
  max-width: 100%;
  margin: 0;
  background: #000;
  overflow: hidden;
}

/* External embeds: YouTube, Vimeo and any iframe supplied from administration. */
.video-player-base .vfcm-video-frame,
.video-player-base .youtube-video-item {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: var(--vfcm-video-max-width) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  aspect-ratio: var(--vfcm-video-ratio) !important;
  overflow: hidden !important;
  background: #000 !important;
}

/* Neutralize Bootstrap's old ratio pseudo-element and historical fixed heights. */
.video-player-base .vfcm-video-frame::before,
.video-player-base .youtube-video-item::before {
  display: none !important;
  padding: 0 !important;
}

.video-player-base .vfcm-video-frame iframe,
.video-player-base .vfcm-video-frame embed,
.video-player-base .vfcm-video-frame object,
.video-player-base .vfcm-video-frame video,
.video-player-base .youtube-video-item iframe,
.video-player-base .youtube-video-item embed,
.video-player-base .youtube-video-item object,
.video-player-base .youtube-video-item video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #000 !important;
}

/* FWDEVPlayer: reserve the definitive 16:9 area before JavaScript finishes
   loading, eliminating the small-player-to-large-player jump. */
.video-player-base .vfcm-native-player,
.video-player-base #viavi_player {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: var(--vfcm-video-max-width) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  aspect-ratio: var(--vfcm-video-ratio) !important;
  overflow: hidden !important;
  background: #000 !important;
}

.video-player-base .vfcm-native-player > div:first-child,
.video-player-base #viavi_player > div:first-child {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* Video.js HLS / DASH players. Use a real 16:9 content box instead of a
   zero-height element with padding: browser controls remain fully clickable. */
.video-player-base .video-js,
.video-player-base .video-js.vjs-16-9,
.video-player-base video.vfcm-html5-player {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: var(--vfcm-video-max-width) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  aspect-ratio: var(--vfcm-video-ratio) !important;
  background: #000 !important;
  pointer-events: auto !important;
}

.video-player-base .video-js .vjs-tech {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  background: #000;
  pointer-events: auto !important;
}

/* Older browsers without aspect-ratio support. */
@supports not (aspect-ratio: 16 / 9) {
  .video-player-base .vfcm-video-frame,
  .video-player-base .youtube-video-item,
  .video-player-base .vfcm-native-player,
  .video-player-base #viavi_player {
    height: 0 !important;
    padding-bottom: 56.25% !important;
  }
}

@media only screen and (max-width: 767px) {
  .container-fluid.video-player-base {
    max-width: 100% !important;
  }
}

/* Smart external players and explicit playback fallback. */
.video-player-base .vfcm-smart-embed,
.video-player-base .vfcm-smart-embed iframe,
.video-player-base .vfcm-native-player,
.video-player-base .vfcm-native-player * {
  pointer-events: auto !important;
}

.video-player-base .vfcm-player-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(320px, 45vw, 760px);
  aspect-ratio: var(--vfcm-video-ratio);
  padding: 32px;
  background: radial-gradient(circle at 50% 25%, #21163d 0%, #0d0620 70%);
  text-align: center;
}

.video-player-base .vfcm-player-unavailable__content {
  width: min(680px, 100%);
}

.video-player-base .vfcm-player-unavailable i {
  display: block;
  margin-bottom: 18px;
  font-size: 42px;
  color: #ffb000;
}

.video-player-base .vfcm-player-unavailable h3 {
  margin-bottom: 12px;
  color: #fff;
  font-size: clamp(21px, 2vw, 30px);
}

.video-player-base .vfcm-player-unavailable p {
  margin: 0 auto 22px;
  color: #d8d3e3;
  line-height: 1.65;
}

.video-player-base .vfcm-player-unavailable__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 4px;
  background: #fe8805;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.video-player-base .vfcm-player-unavailable__link:hover,
.video-player-base .vfcm-player-unavailable__link:focus {
  background: #e97800;
  color: #fff;
}