/* ============================================================
   JOHNNY TV — LECTEUR "TV EN DIRECT" (écran + barre sous l'écran)
   Surcharge volontairement les anciennes règles de dimensionnement
   du lecteur (johnny-tv-all-styles.css / video-controls-improved.css)
   pour :
   - avoir un cadre plus petit et centré sur PC (ne déborde plus),
   - isoler l'écran vidéo (16:9) de la barre de boutons, qui reste
     donc visible et à la même place, même en plein écran,
   - rendre l'iframe YouTube/Vimeo totalement non cliquable (aucun
     menu, aucune suggestion de vidéo ne peut être ouverte dedans),
   - afficher une barre de contrôle maison FIXE sous l'écran, sur
     tous les écrans (PC, mobile, TV) — plus seulement sur TV.
   ============================================================ */

/* ----- Cadre général : écran + barre, empilés verticalement ----- */
#tvVideoContainer.jtv-live-frame {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    aspect-ratio: auto;              /* le cadre entier (écran + barre) n'a plus à faire du 16:9 */
    height: auto;
    padding-bottom: 0;               /* on annule l'ancien hack padding-bottom:56.25% */
    max-width: 900px;                /* écran moins grand sur PC, comme demandé */
    width: 100%;
    margin: 0 auto;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
}

#tvVideoContainer.jtv-live-frame:hover {
    /* on annule l'effet "flotte au survol" hérité, qui accentuait le débordement */
    transform: none;
}

/* ----- Zone écran : ratio 16:9, tout le reste de l'ancien contenu
   (spinner, iframe, badge) vit ici ----- */
.jtv-screen-area {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    flex-shrink: 0;
}

.jtv-screen-area #tvVideoWrapper,
.jtv-screen-area .custom-video-wrapper,
.jtv-screen-area .loading-spinner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* L'iframe (YouTube/Vimeo) ne doit JAMAIS être cliquable : aucun menu,
   aucune vidéo suggérée, aucun bouton natif ne doit pouvoir être ouvert.
   Toutes les interactions passent par nos boutons sous l'écran. */
.jtv-screen-area iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none !important;
}

/* Calque transparent au-dessus de l'iframe : capte les clics/tap pour
   afficher/activer les contrôles, sans jamais laisser passer un clic
   jusqu'à l'interface YouTube en dessous. */
.video-interaction-layer {
    position: absolute;
    inset: 0;
    z-index: 40;
    cursor: pointer;
    background: transparent;
}

/* ----- Barre de contrôle : sous l'écran, fixe, toujours visible ----- */
.video-custom-controls {
    position: static !important;     /* n'est plus un calque flottant sur la vidéo */
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.25);
    padding: 12px 16px;
    z-index: 10;
    flex-shrink: 0;
}

/* Pas de bouton "avancer" : c'est une diffusion en direct, on ne peut
   pas avancer plus vite que le direct. On masque toute icône éventuelle
   qui porterait cette classe si elle existait ailleurs dans le code. */
.video-control-btn.skip-forward-btn {
    display: none !important;
}

/* ----- Bouton Cast ----- */
.video-control-btn.cast-btn svg {
    stroke: white;
    stroke-width: 2;
    fill: none;
}

/* ----- Panneau d'aide "Comment caster" (ouvert au clic sur Cast) ----- */
.jtv-cast-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.jtv-cast-help-panel {
    position: relative;
    background: linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 16px;
    padding: 28px 26px 22px;
    max-width: 380px;
    width: 100%;
    color: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.jtv-cast-help-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.jtv-cast-help-panel h3 {
    margin: 0 0 14px;
    font-size: 18px;
    color: #d4af37;
}

.jtv-cast-help-panel ol {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.jtv-cast-help-panel ol li b {
    color: #f0d77e;
}

.jtv-cast-help-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.jtv-cast-help-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ----- Auto-hide EN PLEIN ÉCRAN uniquement -----
   Hors plein écran, la barre reste fixe sous l'écran et le badge EN
   DIRECT toujours visible (règles ci-dessus, opacity:1 !important).
   En plein écran, ils se comportent comme un vrai lecteur vidéo :
   ils disparaissent après quelques secondes d'inactivité et
   réapparaissent dès que la souris bouge ou qu'on touche l'écran
   (logique dans js/video-controls-improved.js, classe .jtv-idle). */
.video-custom-controls,
.video-live-badge {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#tvVideoContainer.jtv-live-frame:fullscreen.jtv-idle .video-custom-controls,
#tvVideoContainer.jtv-live-frame:-webkit-full-screen.jtv-idle .video-custom-controls {
    opacity: 0 !important;
    transform: translateY(100%);
    pointer-events: none !important;
}

#tvVideoContainer.jtv-live-frame:fullscreen.jtv-idle .video-live-badge,
#tvVideoContainer.jtv-live-frame:-webkit-full-screen.jtv-idle .video-live-badge {
    opacity: 0;
    transform: translateY(-20px);
}

#tvVideoContainer.jtv-live-frame:fullscreen.jtv-idle,
#tvVideoContainer.jtv-live-frame:-webkit-full-screen.jtv-idle {
    cursor: none;
}

/* ----- Plein écran : l'écran grandit, la barre reste en bas ----- */
#tvVideoContainer.jtv-live-frame:fullscreen,
#tvVideoContainer.jtv-live-frame:-webkit-full-screen {
    max-width: none;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    justify-content: center;
}

#tvVideoContainer.jtv-live-frame:fullscreen .jtv-screen-area,
#tvVideoContainer.jtv-live-frame:-webkit-full-screen .jtv-screen-area {
    flex: 1 1 auto;
    aspect-ratio: auto;
    height: auto;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    #tvVideoContainer.jtv-live-frame {
        max-width: 100%;
        border-radius: 12px;
    }
}

/* ----- Neutraliser l'ancien hack "padding-bottom" mobile -----
   D'anciennes règles (css/johnny-tv-all-styles.css) forcent, en
   !important, un énorme padding-bottom sur .tv-video-container aux
   petites tailles d'écran et en paysage (ancienne technique de ratio
   d'aspect). Ça s'ajoute par-dessus la nouvelle mise en page flex et
   crée un grand bloc noir vide sous la barre de boutons sur mobile.
   Un sélecteur plus spécifique (#id + classes), même règle !important,
   l'emporte quel que soit l'ordre des fichiers.
   IMPORTANT : ces trois blocs ne doivent PAS s'appliquer en plein
   écran (:fullscreen), sinon ils écrasent height:100vh de la règle
   plein écran plus bas et cassent sa mise en page sur mobile. */
@media (max-width: 768px) {
    #tvVideoContainer.jtv-live-frame:not(:fullscreen):not(:-webkit-full-screen) {
        padding-bottom: 0 !important;
        height: auto !important;
    }
}

@media (max-width: 480px) {
    #tvVideoContainer.jtv-live-frame:not(:fullscreen):not(:-webkit-full-screen) {
        padding-bottom: 0 !important;
        height: auto !important;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    #tvVideoContainer.jtv-live-frame:not(:fullscreen):not(:-webkit-full-screen) {
        padding-bottom: 0 !important;
        height: auto !important;
    }
}

/* Filet de sécurité supplémentaire : si un navigateur ne supporte pas
   :not(:fullscreen) correctement, on réaffirme explicitement la bonne
   hauteur en plein écran ici, après les règles ci-dessus. */
#tvVideoContainer.jtv-live-frame:fullscreen,
#tvVideoContainer.jtv-live-frame:-webkit-full-screen {
    height: 100vh !important;
    padding-bottom: 0 !important;
}