/* ==========================================================================
   player-skin.css — skin du PLAYER EXPORTABLE de l'instance BPI
   Portee : la seule page servie par app_cdn/public/player_export.php.
   ========================================================================== */

@font-face {
    font-family: "Din";
    src: url('../fonts/DIN1451.ttf');
}

/* --------------------------------------------------------------------------
   Jetons de la skin
   -------------------------------------------------------------------------- */

html body #playerExport {
    --ply-accent: #33bf0d;
    --ply-fg: #ffffff;
    --ply-focus: var(--ply-accent);

    --ply-scrim-bottom: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .55));
    --ply-scrim-fade: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    --ply-scrim-fade-h: 64px;
    --ply-scrim-top: linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));

    --ply-header-h: 44px;
    --ply-ctrl-h: 44px;

    --ply-row-h: 72px;
    --ply-btn: 44px;

    --ply-icon: 28px;

    --ply-bigplay: 88px;
    --ply-bigplay-icon: 48px;

    --ply-track-h: 4px;
    --ply-track-h-hover: 6px;
    --ply-track-bg: rgba(255, 255, 255, .25);
    --ply-track-buffer: rgba(255, 255, 255, .45);
    --ply-handle: 12px;
    --ply-handle-hover: 14px;

    --ply-hover-bg: rgba(255, 255, 255, .12);
}

/* --------------------------------------------------------------------------
   Icones du controleur (masques SVG teintes par background-color)
   -------------------------------------------------------------------------- */

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel .btn {
    position: relative;
    width: var(--ply-btn);
    height: var(--ply-btn);
    line-height: var(--ply-btn);
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: transparent;
    mask: none;
    -webkit-mask: none;
    transition: background-color .12s ease;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--ply-fg);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel .btn:hover,
html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel .btn:focus-visible {
    background-color: var(--ply-hover-bg);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel .btn.uk-margin-small-right {
    margin-right: 0 !important;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_left,
html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_right {
    gap: 2px;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_sec_rewind::before {
    mask: url('../images/css/replay_10.svg') no-repeat center / var(--ply-icon);
    -webkit-mask: url('../images/css/replay_10.svg') no-repeat center / var(--ply-icon);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_play_pause::before {
    mask: url('../images/css/play_arrow.svg') no-repeat center / var(--ply-icon);
    -webkit-mask: url('../images/css/play_arrow.svg') no-repeat center / var(--ply-icon);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_play_pause.pause::before {
    mask: url('../images/css/pause.svg') no-repeat center / var(--ply-icon);
    -webkit-mask: url('../images/css/pause.svg') no-repeat center / var(--ply-icon);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_sec_forward::before {
    mask: url('../images/css/forward_10.svg') no-repeat center / var(--ply-icon);
    -webkit-mask: url('../images/css/forward_10.svg') no-repeat center / var(--ply-icon);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_srt::before {
    mask: url('../images/css/chat.svg') no-repeat center / var(--ply-icon);
    -webkit-mask: url('../images/css/chat.svg') no-repeat center / var(--ply-icon);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_srt.audioHide {
    display: none;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_fullscreen::before {
    mask: url('../images/css/fullscreen.svg') no-repeat center / var(--ply-icon);
    -webkit-mask: url('../images/css/fullscreen.svg') no-repeat center / var(--ply-icon);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel.controllerpanelFS #ow_bouton_fullscreen::before {
    mask: url('../images/css/fullscreen_exit.svg') no-repeat center / var(--ply-icon);
    -webkit-mask: url('../images/css/fullscreen_exit.svg') no-repeat center / var(--ply-icon);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_pip::before {
    mask: url('../images/css/picture_in_picture.svg') no-repeat center / var(--ply-icon);
    -webkit-mask: url('../images/css/picture_in_picture.svg') no-repeat center / var(--ply-icon);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_loop::before {
    mask: url('../images/css/loop.svg') no-repeat center / var(--ply-icon);
    -webkit-mask: url('../images/css/loop.svg') no-repeat center / var(--ply-icon);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_loop.activated::before {
    background-color: var(--ply-accent);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_mute_sound::before {
    mask: url('../images/css/volume_up.svg') no-repeat center / var(--ply-icon);
    -webkit-mask: url('../images/css/volume_up.svg') no-repeat center / var(--ply-icon);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_mute_sound.ClickBouton::before {
    mask: url('../images/css/volume_off.svg') no-repeat center / var(--ply-icon);
    -webkit-mask: url('../images/css/volume_off.svg') no-repeat center / var(--ply-icon);
}

/* --------------------------------------------------------------------------
   Focus clavier (ARIA / TAB)
   -------------------------------------------------------------------------- */

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_sec_rewind:focus-visible,
html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_play_pause:focus-visible,
html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_play_pause.play:focus-visible,
html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_play_pause.pause:focus-visible,
html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_sec_forward:focus-visible,
html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_srt:focus-visible,
html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_fullscreen:focus-visible,
html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_pip:focus-visible,
html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_mute_sound:focus-visible
{
    outline: 2px solid var(--ply-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(255, 191, 71, .6);
}

html body #playerExport #ow_controllerheader .uk-navbar-right .uk-navbar-nav > li > a:focus-visible {
    color: var(--ply-accent);
}

html body #playerExport .focus-ring:focus-visible,
html body #playerExport #ow_boutons button:focus-visible,
html body #playerExport #ow_boutons input[type="range"]:focus-visible {
    outline: 2px solid var(--ply-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(255, 191, 71, .6);
}

/* --------------------------------------------------------------------------
   Mise en page : conteneur, video, poster
   -------------------------------------------------------------------------- */

html body #playerExport #media_space {
    position: relative;
    min-height: 100vh;
    vertical-align: middle;
    max-height: 100%;
}

html body #playerExport #media_space #container #ow_main_container {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    left: 0;
    right: 0;
}

html body #playerExport #media_space #container #ow_main_container #capsVid {
    position: absolute;
    width: auto;
    height: auto;
    max-height: none !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

html body #playerExport #media_space #container #ow_main_container #video,
html body #playerExport #media_space #container #ow_main_container video[id^=video] {
    position: absolute;
    height: 100% !important;
    width: 100%;
    max-height: none !important;
    object-fit: contain;
    background-color: black;
}

html body #playerExport #media_space #container.video img#poster {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    border: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto !important;
    width: auto;
    height: auto;
}

html body #playerExport #media_space #container.audio_poster img#poster:not(.wait4video),
html body #playerExport #media_space #container.video img#poster:not(.wait4video) {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Mode audio (#container.audio_poster)
   -------------------------------------------------------------------------- */

html body #playerExport #media_space #container.audio_poster img#poster,
html body #playerExport #media_space #container.audio_poster #ow_audioviewport img#ow_audiovignette {
    position: absolute;
    top: var(--ply-header-h);
    bottom: var(--ply-row-h);
    left: 0;
    right: 0;
    border: 0;
    margin: auto !important;
    width: auto;

    height: calc(100% - var(--ply-header-h) - var(--ply-row-h));
    max-width: 100%;
    max-height: 100%;
}

html body #playerExport #media_space #container.audio_poster #ow_controllerpanel {
    opacity: 1 !important;
    visibility: visible !important;
}

html body #playerExport #media_space #container.audio_poster .audioHide {
    display: none;
}

/* display ow_bouton_fullscreen en audio */
html body #playerExport #media_space #container.audio_poster #ow_main_container #ow_controllerpanel #ow_bouton_fullscreen.audioHide {
    display: block;
}

/* --------------------------------------------------------------------------
   Bandeau titre
   -------------------------------------------------------------------------- */

html body #playerExport #ow_controllerheader#ow_controllerheader {
    background: var(--ply-scrim-top);
    height: var(--ply-header-h);
    transition: opacity .2s ease, visibility 0s;
}

html body #playerExport.ply-controls-off #ow_controllerheader {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}

html body #playerExport #ow_controllertitle {
    z-index: 90;
    background: none;
    border-bottom: none;
    height: var(--ply-header-h);
    font-family: 'Din', Arial, sans-serif;
    font-size: 14px;
    white-space: nowrap;
    color: var(--ply-fg);
    font-weight: bold;
}

html body #playerExport #ow_controllertitle .uk-dropdown {
    background-color: rgba(0, 0, 0, .92);
    font-family: 'Din', Arial, sans-serif;
    font-size: 12px;
    white-space: nowrap;
    color: var(--ply-fg);
    border-radius: 4px;
}

html body #playerExport #ow_controllertitle .uk-dropdown a {
    color: white;
}

html body #playerExport #ow_controllertitle .uk-dropdown .code_embed_label {
    display: block;
    margin: 10px 0 4px;
    font-size: 12px;
    color: var(--ply-fg);
}

html body #playerExport #ow_controllertitle .uk-dropdown .code_embed {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px dashed #888;
    border-radius: 0;
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
    color: white;
    background-color: rgba(0, 0, 0, .92);
    resize: none;
}

html body #playerExport #ow_controllerheader #ow_controllertitle .uk-navbar-left {
    min-width: 0;
    flex: 1 1 auto;
}

html body #playerExport #ow_controllerheader #ow_controllertitle .uk-navbar-left .uk-navbar-nav {
    min-width: 0;
    max-width: 100%;
}

html body #playerExport #ow_controllerheader #ow_controllertitle .uk-navbar-left .uk-navbar-nav > li {
    text-transform: none;
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: var(--ply-header-h);
}

/* --------------------------------------------------------------------------
   Controleur : panneau, boutons, timecodes
   -------------------------------------------------------------------------- */

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel {
    background: var(--ply-scrim-bottom);
    transition: opacity .2s ease;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--ply-scrim-fade-h);
    background: var(--ply-scrim-fade);
    pointer-events: none;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: none;
    border-top: none;
    height: auto;
    flex-wrap: wrap;
    padding: 0 8px 6px;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel .timecode-container span {
    color: white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    white-space: nowrap;
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   Menu des sous-titres
   -------------------------------------------------------------------------- */

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_right .subtitles-menu {
    margin-left: 84px;
    bottom: var(--ply-ctrl-h);
    background-color: rgba(0, 0, 0, .92);
    border-top: none;
    border-radius: 4px;
    width: 120px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_right .subtitles-menu li button {
    background-color: transparent;
    color: var(--ply-fg);
    border: none;
    padding: 5px;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_right .subtitles-menu li button:hover {
    background-color: var(--ply-hover-bg);
}

/* --------------------------------------------------------------------------
   Timeline et slider de volume (noUiSlider)
   -------------------------------------------------------------------------- */

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #progressBarContainer {
    order: -1;
    flex: 0 0 100%;
    width: 100%;

    padding: 8px 0;
    margin: 0 0 2px;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_left {
    order: 0;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_right {
    order: 1;
    margin-right: 0;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #progressBarContainer:hover,
html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #progressBarContainer:focus-within {
    --ply-track-h: var(--ply-track-h-hover);
    --ply-handle: var(--ply-handle-hover);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #progressBarContainer #ow_id_progress_uislider {
    position: relative;
    height: var(--ply-track-h);
    background: var(--ply-track-bg);
    border-radius: calc(var(--ply-track-h) / 2);
    transition: height .1s ease;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #progressBarContainer #ow_id_progress_uislider .noUi-base {
    z-index: 2;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #progressBarContainer #bufferedDisplayContainer {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--ply-track-h) * -1) !important;
    height: var(--ply-track-h);
    background: none;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #progressBarContainer #bufferedDisplayContainer .bufferedDisplayDivs {
    position: absolute;
    top: 0;
    height: var(--ply-track-h);
    background: var(--ply-track-buffer);
    border-radius: calc(var(--ply-track-h) / 2);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #progressBarContainer #markerSelector {
    height: auto;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #progressBarContainer #ow_id_progress_uislider .noUi-base .noUi-connects .noUi-connect {
    background-color: var(--ply-accent);
    pointer-events: none;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #progressBarContainer #ow_id_progress_uislider .noUi-base .noUi-handle {
    height: var(--ply-handle);
    width: var(--ply-handle);

    top: calc((var(--ply-track-h) - var(--ply-handle)) / 2);
    right: calc(var(--ply-handle) / -2);
    border-radius: 50%;
    background-color: var(--ply-accent);
    box-shadow: none;
    border: none;
    transition: height .1s ease, width .1s ease, top .1s ease;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #containSound #ow_id_sound_slider {
    background: var(--ply-track-bg);
    border-radius: calc(var(--ply-track-h) / 2);
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #containSound #ow_id_sound_slider .noUi-handle {
    background-color: var(--ply-accent);
    border: none;
    box-shadow: none;
}

html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #containSound #ow_id_sound_slider .noUi-connect {
    background-color: var(--ply-accent);
}

/* --------------------------------------------------------------------------
   Gros bouton de lecture au centre de l'image
   -------------------------------------------------------------------------- */

html body #playerExport #media_space #container #ow_main_container #ply_bigplay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--ply-bigplay);
    height: var(--ply-bigplay);
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .55);

    box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 2px 12px rgba(0, 0, 0, .6);
    cursor: pointer;
    z-index: 3;
    transition: opacity .2s ease, background-color .12s ease;
}

html body #playerExport #media_space #container #ow_main_container #ply_bigplay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--ply-fg);
    mask: url('../images/css/play_arrow.svg') no-repeat center / var(--ply-bigplay-icon);
    -webkit-mask: url('../images/css/play_arrow.svg') no-repeat center / var(--ply-bigplay-icon);
}

html body #playerExport #media_space #container #ow_main_container #ply_bigplay:hover {
    background-color: rgba(0, 0, 0, .75);
}

html body #playerExport #media_space #container #ow_main_container #ply_bigplay.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   Cadres etroits
   -------------------------------------------------------------------------- */

@media (max-width: 599px) {
    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_pip,
    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_loop {
        display: none;
    }

    html body #playerExport {
        --ply-bigplay: 64px;
        --ply-bigplay-icon: 34px;
    }
}

/* --------------------------------------------------------------------------
   Cadres etroits : transport au centre de l'image
   -------------------------------------------------------------------------- */

@media (max-width: 599px) and (min-height: 360px) {
    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_left {
        --ply-btn: 64px;
        --ply-icon: 38px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        gap: 22px;
        z-index: 4;
    }

    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_left #ow_bouton_play_pause {
        --ply-btn: 88px;
        --ply-icon: 64px;
        background-color: rgba(0, 0, 0, .55);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 12px rgba(0, 0, 0, .6);
    }

    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_left #ow_bouton_sec_rewind,
    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_left #ow_bouton_sec_forward {
        background-color: rgba(0, 0, 0, .45);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 10px rgba(0, 0, 0, .5);
    }

    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_left #ow_bouton_play_pause:hover,
    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_left #ow_bouton_play_pause:focus-visible,
    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_left #ow_bouton_sec_rewind:hover,
    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_left #ow_bouton_sec_rewind:focus-visible,
    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_left #ow_bouton_sec_forward:hover,
    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_left #ow_bouton_sec_forward:focus-visible {
        background-color: rgba(0, 0, 0, .75);
    }

    html body #playerExport:not(.ply-controls-off) #media_space #container #ow_main_container #ply_bigplay {
        display: none;
    }

    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_right {
        flex: 1 1 auto;
    }

    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_boutons_right .timecode-container.uk-margin-small-right {
        margin-right: auto !important;
    }

    html body #playerExport #media_space #container.audio_poster #ow_main_container #ow_controllerpanel #ow_boutons_left {
        top: calc(50% - (var(--ply-row-h) - var(--ply-header-h)) / 2);
    }
}

@media (max-width: 599px) and (max-height: 359px) {
    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel .timecode-container #timecodeDisplay ~ span {
        display: none;
    }
}

@media (max-width: 399px) and (max-height: 359px) {
    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_sec_rewind,
    html body #playerExport #media_space #container #ow_main_container #ow_controllerpanel #ow_bouton_sec_forward {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Cadres PLATS — contrainte de hauteur
   -------------------------------------------------------------------------- */

@media (max-height: 359px) {
    html body #playerExport {
        --ply-bigplay: 64px;
        --ply-bigplay-icon: 34px;
    }
}

@media (max-height: 239px) {
    html body #playerExport #media_space #container #ow_main_container #ply_bigplay {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Sous-titres incrustes
   -------------------------------------------------------------------------- */

html body #playerExport video::cue {
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Messages de statut (player-export-a11y.js)
   -------------------------------------------------------------------------- */

html body #playerExport .ply-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

html body #playerExport #ply_erreur {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    padding: 12px 16px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .85);
    color: var(--ply-fg);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-align: center;
    z-index: 5;
}