/* ============================================================
   COMPONENT — Video Player
   Poster + overlay navy semi-transparent + bouton play centré.
   Au clic : la vidéo se lance avec les contrôles natifs.
   Logique JS : initVideoPlayer() dans site.js (data-video-player).
   ============================================================ */

.videoPlayer {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-primary-dark-blue);     /* fallback Figma navy si poster absent */
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
}

/* Même cursor pointer si pas encore de vidéo (poster seul) — l'utilisateur
   sait visuellement qu'il y aura une vidéo. */

.videoPlayer:focus-visible {
    outline: 2px solid var(--color-secondary-teal);
    outline-offset: 2px;
}

.videoPlayer__el,
.videoPlayer__posterOnly {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.videoPlayer__placeholder {
    width: 100%;
    height: 100%;
    background: transparent;     /* laisse le bg navy du .videoPlayer s'afficher */
}

/* ----- Overlay navy semi-transparent (50%) ------------------------------ */
.videoPlayer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 26, 56, 0.50);
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1;
}

/* ----- Bouton play 80px centré, opacité 50% (Figma) -------------------- */
.videoPlayer__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 2;
    pointer-events: none;
}

.videoPlayer__play img {
    display: block;
    width: 100%;
    height: 100%;
}

.videoPlayer:hover .videoPlayer__play,
.videoPlayer:focus-visible .videoPlayer__play {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.05);
}

/* ----- Lancement : on cache overlay + bouton ---------------------------- */
.videoPlayer.is-playing {
    cursor: default;
}

.videoPlayer.is-playing .videoPlayer__overlay,
.videoPlayer.is-playing .videoPlayer__play {
    opacity: 0;
    pointer-events: none;
}