/*--------------------------------------------------------------
# Video Player
--------------------------------------------------------------*/

.e360-video-player {
    --plyr-color-main: var(--e360-theme-color, #1a58e2);
    --e360-video-ratio: 16 / 9;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    background: #0f0f0f;
}

.e360-video-player__stage,
.e360-video-player__media {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--e360-video-ratio);
    background: #0f0f0f;
}

.e360-video-player .plyr { display: block; width: 100%; max-width: 100%; background: #0f0f0f; }
.e360-video-player .plyr__video-wrapper video { height: 100%; aspect-ratio: auto; }

.e360-video-player[data-e360-video-ratio="9:16"] {
    --e360-video-ratio: 9 / 16;
    width: min(100%, 540px);
    margin-inline: auto;
}

.e360-video-player__media {
    height: auto;
    object-fit: contain;
}

.e360-video-player__stage {
    position: relative;
}

.e360-video-player__consent {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    background: #1d1d1d;
    color: #fefefe;
    text-align: center;
}

.e360-video-player__consent p {
    max-width: 520px;
    margin: 0;
    color: #dfdfdf;
}

.e360-video-player[data-e360-video-state="consent"] .e360-video-player__consent {
    display: flex;
}

.e360-video-player[data-e360-video-state="consent"] .e360-video-player__stage > [data-e360-video] {
    visibility: hidden;
}

.e360-video-player__stage > [data-e360-video] {
    width: 100%;
    height: 100%;
}

.e360-video-player__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #fff;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.e360-video-player[data-e360-video-state="pending"] .e360-video-player__fallback,
.e360-video-player[data-e360-video-state="ready"] .e360-video-player__fallback {
    display: none;
}

.e360-video-player[data-e360-video-state="fallback"] .e360-video-player__fallback {
    display: flex;
}

.e360-video-player .plyr__control:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.92);
    outline-offset: 3px;
}

.e360-video-player__details {
    display: grid;
    gap: 8px;
    padding: 16px 18px 18px;
    color: var(--e360-text-main, #171717);
    background: var(--e360-surface, #fff);
}

.e360-video-player__details p {
    margin: 0;
}

.e360-video-player__caption {
    font-weight: 600;
}

.e360-video-player__description,
.e360-video-player__credit {
    color: var(--e360-text-muted, #656565);
    font-size: 14px;
    line-height: 1.55;
}

.e360-video-player__transcript {
    width: fit-content;
    color: var(--e360-theme-color, #1a58e2);
    font-weight: 600;
    text-underline-offset: 4px;
}

.e360-video-player--featured,
.e360-video-player--featured .e360-video-player__stage,
.e360-video-player--featured > .e360-video-player__media,
.e360-video-player--featured .plyr {
    max-height: 78vh;
}

.e360-video-player--compact,
.e360-video-player--compact .plyr,
.e360-video-player--article,
.e360-video-player--article .plyr {
    border-radius: 8px;
}

#plyr-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#plyr-wrapper.visible {
    opacity: 1;
    visibility: visible;
}

#plyr-wrapper .plyr {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

#plyr-wrapper .plyr--video .plyr__control--overlaid {
    background: var(--e360-theme-color);
    opacity: 0.9;
    color: white;
}

#plyr-wrapper .plyr--video .plyr__control--overlaid:hover {
    background: var(--e360-theme-color);
    opacity: 1;
}

/* Commande de qualité commune, dans les contrôles Plyr et leur plein écran. */
.e360-video-player .e360-video-quality { max-width: 120px; color: #161b22; background: #fff; font-size: 12px; }
.e360-video-player .e360-video-quality option { color: #161b22; background: #fff; }
@media (max-width: 414px) { .e360-video-player .e360-video-quality { max-width: 92px; } }

.e360-video-player [data-video-status],
.e360-video-player .e360-media-notice { margin: 0; padding: 8px 12px; color: #fefefe; font-size: 14px; line-height: 1.5; }
.e360-video-player .e360-media-notice a { color: inherit; text-decoration: underline; }