/* ==========================================================================
   webroot/css/video.css — vidéo YouTube d'une fiche (element/video_youtube.php)

   Contrastes vérifiés :
   - lien #144d47 sur blanc .............. 9.62:1
   - focus : contour #144d47 + liseré blanc, visible sur toute image
   ========================================================================== */

.man-video__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #144d47;
  margin-bottom: 0.75rem;
}

/* Cadre 16:9 : la place est réservée avant le chargement (pas de saut de page) */
.man-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.man-video__frame iframe,
.man-video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── La façade : image + bouton ▶ ────────────────────────────────────── */

.man-video__play {
  display: block;
  padding: 0;
  background: #000;
  cursor: pointer;
}

/* hqdefault.jpg est en 4:3 avec bandes noires : on recadre en 16:9 */
.man-video__play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.man-video__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.man-video__icon-bg {
  fill: #212121;
  fill-opacity: 0.85;
}

.man-video__play:hover .man-video__icon-bg,
.man-video__play:focus-visible .man-video__icon-bg {
  fill: #c0231c; /* rouge de la charte */
  fill-opacity: 1;
}

/* Focus clavier : double contour, visible sur une image claire comme foncée */
.man-video__play:focus-visible {
  outline: 3px solid #144d47;
  outline-offset: -6px;
  box-shadow: inset 0 0 0 6px #fff;
}

/* ── Lien de secours ─────────────────────────────────────────────────── */

.man-video__link {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  text-align: right;
}

.man-video__link a {
  color: #144d47;
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .man-video__icon-bg {
    transition: fill 0.15s ease, fill-opacity 0.15s ease;
  }
}