/* Fix pour le bouton play sur mobile - Page Podcast */

/* Sur mobile, afficher le bouton play de manière permanente */
@media (max-width: 768px) {
    /* Overlay toujours visible sur mobile */
    .podcast-card .absolute.inset-0.bg-black\/40 {
        opacity: 0.6 !important;
        backdrop-filter: blur(2px) !important;
    }

    /* Bouton play toujours visible et à échelle normale sur mobile */
    .podcast-card .play-episode-btn {
        transform: scale(1) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Animation de pulsation pour attirer l'attention */
    @keyframes pulse-play {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.7);
        }
        50% {
            box-shadow: 0 0 0 10px rgba(250, 204, 21, 0);
        }
    }

    .podcast-card .play-episode-btn {
        animation: pulse-play 2s ease-in-out infinite;
    }

    /* Désactiver l'animation au touch */
    .podcast-card .play-episode-btn:active {
        animation: none !important;
    }

    /* S'assurer que le bouton est cliquable sur mobile */
    .podcast-card .play-episode-btn {
        position: relative;
        z-index: 10;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Améliorer la zone de touch sur mobile */
    .podcast-card .play-episode-btn {
        min-width: 64px !important;
        min-height: 64px !important;
    }

    /* Forcer l'affichage du conteneur du bouton */
    .podcast-card > div > div.absolute.inset-0 {
        pointer-events: auto !important;
    }

    /* Feedback visuel au touch */
    .podcast-card .play-episode-btn:active {
        transform: scale(0.95) !important;
        background-color: rgb(250, 204, 21) !important; /* yellow-400 */
    }
}

/* Pour les écrans tactiles en général */
@media (hover: none) and (pointer: coarse) {
    /* Overlay visible sur les appareils tactiles */
    .podcast-card .absolute.inset-0.bg-black\/40 {
        opacity: 0.6 !important;
        backdrop-filter: blur(2px) !important;
    }

    /* Bouton toujours visible sur tactile */
    .podcast-card .play-episode-btn {
        transform: scale(1) !important;
        opacity: 1 !important;
    }

    /* Améliorer l'interaction tactile */
    .podcast-card .play-episode-btn {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Assurer que l'élément audio est correctement initialisé */
#global-audio {
    position: fixed;
    opacity: 0;
    pointer-events: none;
}

/* Fix pour le bouton play principal du player sticky */
@media (max-width: 768px) {
    #main-play-btn {
        min-width: 48px !important;
        min-height: 48px !important;
        touch-action: manipulation;
    }

    #main-play-btn:active {
        transform: scale(0.95) !important;
    }
}

/* Améliorer la visibilité des contrôles sur mobile */
@media (max-width: 768px) {
    #sticky-player {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* S'assurer que les boutons sont assez grands pour être touchés */
    #sticky-player button {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }
}