@charset "UTF-8";/* custom.css — version corrigée pour éviter écrasement de hauteur */

/* Wrapper responsive (16:9 par défaut) */
.video-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* fallback 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* Contenu interne : ne pas forcer height:100% pour <video> (utiliser height:auto) */
.video-responsive iframe,
.video-responsive embed,
.video-responsive object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  box-sizing: border-box;
}

/* Pour les <video> HTML5, préserver le ratio natif */
.video-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;            /* important : laisse le navigateur préserver le ratio */
  max-height: 100%;
  min-height: 100%;       /* fallback pour certains navigateurs, voir notes */
  display: block;
  object-fit: contain;     /* contain évite le recadrage ; cover si tu veux remplir */
  box-sizing: border-box;
}

/* Modern browsers: preferer aspect-ratio sur le wrapper (plus précis) */
@supports (aspect-ratio: 16/9) {
  .video-responsive {
    padding-bottom: 0;
    height: auto;
  }
  .video-responsive iframe,
  .video-responsive video,
  .video-responsive embed,
  .video-responsive object {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Ratios alternatifs */
.video-4x3 { padding-bottom: 75% !important; }
.video-21x9 { padding-bottom: 42.85% !important; }

/* Forcer l'écrasement uniquement si nécessaire (laisser en dernier recours) */
.video-responsive.force-override iframe,
.video-responsive.force-override video {
  width: 100% !important;
  height: 100% !important;
}

/* Images/GIF responsives */
figure img, img.responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Focus visible pour accessibilité */
.video-responsive iframe:focus,
.video-responsive video:focus {
  outline: 3px solid #2a9df4;
  outline-offset: 2px;
}