/* 1. Variables globales */

:root {

    --plyr-color-main: #00b3ff;

}



/* 2. Le Conteneur Maître */

[data-player-hls] .plyr {

    border-radius: 12px !important;

    overflow: hidden !important;

    isolation: isolate;

    aspect-ratio: 16 / 9;

    box-shadow: 0 10px 30px rgba(0,0,0,0.5);

}



/* 3. Transition pour le badge et le watermark */

.plyr__direct-badge, 

.plyr__watermark {

    position: absolute;

    z-index: 10;

    pointer-events: none;

    /* On ajoute une transition fluide identique à celle de Plyr */

    transition: opacity 0.3s ease, transform 0.3s ease;

    opacity: 1;

}



/* 4. LOGIQUE DE DISPARITION */

/* Quand Plyr cache les contrôles, on cache nos éléments */

.plyr--hide-controls .plyr__direct-badge,

.plyr--hide-controls .plyr__watermark {

    opacity: 0;

    pointer-events: none;

    /* Optionnel : petit effet de glissement vers le haut */

    transform: translateY(-10px); 

}



/* 5. Style du Badge "Direct" */

.plyr__direct-badge {

    top: 20px;

    left: 20px;

    background: #e30613;

    color: white;

    padding: 4px 12px;

    font-family: Arial, sans-serif;

    font-weight: bold;

    font-size: 13px;

    text-transform: uppercase;

    border-radius: 4px;

    display: flex;

    align-items: center;

    gap: 6px;

}



.plyr__direct-badge::before {

    content: '';

    width: 7px;

    height: 7px;

    background: white;

    border-radius: 50%;

    animation: plyr-blink 1s infinite;

}



@keyframes plyr-blink {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.3; }

}



/* 6. Style du Watermark */

.plyr__watermark {

    top: 20px;

    right: 20px;

    width: 90px;

    height: auto;

    opacity: 0.9; /* Opacité quand visible */

}



/* 7. Forçage des arrondis sur la vidéo */

.plyr__video-wrapper, 

.plyr video {

    border-radius: inherit !important;

}