/* ═══════════════════════════════════════════════════════════════════════════
   Jetour — Hero Vidéo CSS Fix
   Corrige l'affichage pour YouTube (API), Vimeo (iframe) et MP4 (video)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Conteneur générique vidéo hero ─────────────────────────────────────── */
.jt-hero__video-wrap,
.jt-single-hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Démarre invisible → devient visible quand le player est prêt (JS) */
  opacity: 0;
  transition: opacity .8s ease;
  background: #000;
}

/* État prêt (ajouté par JS quand player démarre) */
.jt-hero__video-wrap.video-ready,
.jt-single-hero__video-wrap.video-ready {
  opacity: 1;
}

/* ── Iframe YouTube / Vimeo — technique "fullscreen iframe" ─────────────── */
/* L'iframe doit être plus grande que le conteneur pour éviter les bandes noires */
.jt-hero__video-wrap iframe,
.jt-single-hero__video-wrap iframe,
.jt-hero__iframe,
.jt-single-hero__iframe {
  position: absolute;
  /* Centrage + débordement pour remplir tout l'espace */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Plus grand que 100% × ratio 16:9 pour couvrir les écrans larges et portaits */
  width: 177.78vh;  /* 16/9 × 100vh */
  height: 56.25vw;  /* 9/16 × 100vw */
  min-width: 100%;
  min-height: 100%;
  border: none;
  pointer-events: none; /* Empêche les interactions sur le hero */
}

/* ── Player YouTube injecté par YT.Player() ─────────────────────────────── */
/* L'API YouTube crée un <iframe> dans le div cible */
.jt-hero__video-wrap > div,
.jt-single-hero__video-wrap > div {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.jt-hero__video-wrap > div iframe,
.jt-single-hero__video-wrap > div iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  border: none;
  pointer-events: none;
}

/* ── Vidéo MP4 native ────────────────────────────────────────────────────── */
.jt-hero__video,
.jt-single-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* ── Image fallback (derrière la vidéo) ─────────────────────────────────── */
.jt-hero__bg,
.jt-single-hero__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  /* L'image est visible par défaut, masquée quand la vidéo démarre */
  opacity: 1;
  transition: opacity .8s ease;
}

/* Image fallback derrière la vidéo (z-index inférieur) */
.jt-single-hero__img--fallback {
  z-index: 0;
  opacity: 1;
}

/* Quand la vidéo est prête, l'image fallback disparaît */
.video-ready ~ .jt-hero__bg,
.video-ready ~ .jt-single-hero__img--fallback {
  opacity: 0;
  pointer-events: none;
}

/* ── Overlay gradient (toujours au-dessus de la vidéo) ──────────────────── */
.jt-hero__overlay,
.jt-single-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1; /* Au-dessus de la vidéo (z-index 0) */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .80) 0%,
    rgba(0, 0, 0, .30) 50%,
    rgba(0, 0, 0, .10) 100%
  );
  pointer-events: none;
}

/* ── Contenu hero (texte + boutons) ─────────────────────────────────────── */
.jt-hero__content,
.jt-single-hero__content {
  position: relative;
  z-index: 2; /* Au-dessus de l'overlay */
}

/* ── Responsive — mobile portrait ───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sur mobile, la proportion 16:9 de l'iframe YouTube peut créer des bandes
     → on force l'objet à couvrir complètement */
  .jt-hero__video-wrap iframe,
  .jt-single-hero__video-wrap iframe,
  .jt-hero__video-wrap > div iframe,
  .jt-single-hero__video-wrap > div iframe {
    width: 300vw;
    height: 168.75vw; /* 300 × 9/16 */
    min-width: 300vw;
    min-height: 100%;
  }
}

/* ── Fix spécifique iOS Safari ───────────────────────────────────────────── */
/* iOS Safari ignore parfois autoplay même muted sur iframe */
@supports (-webkit-overflow-scrolling: touch) {
  .jt-hero__video {
    -webkit-playsinline: '';
  }
}

/* ── Animation d'entrée du héro ─────────────────────────────────────────── */
.jt-hero__content {
  animation: heroContentIn .8s cubic-bezier(.4,0,.2,1) .3s both;
}
@keyframes heroContentIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section financement ─────────────────────────────────────────────────── */
/* Inclusion du CSS financement dans frontend (évite un fichier extra) */
.jt-section--financement { background: var(--jt-grey-100, #f5f5f5); }