/* ============================================
   FIX DÉFINITIF POUR BOUTON PLAY PODCAST MOBILE
   Résout le problème d'interaction tactile causé par:
   - backdrop-blur qui crée un stacking context
   - Animations qui créent des layers
   - Z-index insuffisant
   ============================================ */

/* ============================================
   FIX BADGES BD/FORMATION - VISIBILITÉ MOBILE
   ============================================ */

/* Rendre les badges toujours visibles au-dessus de tout */
.podcast-card > div:first-child > div.absolute.top-4.left-4 {
    z-index: 1000 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Sur mobile: repositionner les badges plus haut et plus visibles */
@media (max-width: 768px) {
    .podcast-card > div:first-child > div.absolute.top-4.left-4 {
        top: 0.5rem !important;
        left: 0.5rem !important;
        z-index: 1000 !important;
    }

    /* Améliorer la visibilité des badges sur mobile */
    .podcast-card > div:first-child > div.absolute.top-4.left-4 span {
        font-size: 0.7rem !important;
        padding: 0.35rem 0.65rem !important;
        font-weight: 800 !important;
        background: rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: blur(8px) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }

    /* Badge NEW - rendre plus visible */
    .podcast-card > div:first-child > div.absolute.top-4.left-4 span.bg-red-500\/90 {
        background: rgba(239, 68, 68, 0.95) !important;
    }
}

/* Sur très petits écrans: badges encore plus compacts mais visibles */
@media (max-width: 480px) {
    .podcast-card > div:first-child > div.absolute.top-4.left-4 {
        top: 0.375rem !important;
        left: 0.375rem !important;
    }

    .podcast-card > div:first-child > div.absolute.top-4.left-4 span {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* Sur mobile: désactiver complètement le backdrop-blur et les animations */
@media (max-width: 768px) {

    /* OVERLAY: supprimer backdrop-blur et rendre non-interactif */
    .podcast-card > div:first-child > div[class*="absolute"][class*="inset-0"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        pointer-events: none !important;
        opacity: 1 !important;
        background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%) !important;
    }

    /* BOUTON PLAY: maximiser l'accessibilité tactile */
    .podcast-card .play-episode-btn {
        /* Taille minimale pour zone tactile */
        min-width: 64px !important;
        min-height: 64px !important;
        width: 64px !important;
        height: 64px !important;

        /* Z-index très élevé pour être au-dessus de tout */
        position: relative !important;
        z-index: 999 !important;

        /* Rendre le bouton interactif */
        pointer-events: auto !important;

        /* Toujours visible à 100% */
        opacity: 1 !important;
        transform: scale(1) !important;

        /* Optimisation tactile */
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;

        /* Désactiver toutes les transitions qui peuvent créer des layers */
        transition: background-color 0.15s ease, transform 0.1s ease !important;

        /* Forcer le rendu GPU mais sans créer de layers problématiques */
        will-change: transform !important;

        /* S'assurer que le bouton est bien visible */
        background: linear-gradient(135deg, #facc15 0%, #eab308 100%) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(250, 204, 21, 0.2) !important;
    }

    /* Feedback tactile au touch */
    .podcast-card .play-episode-btn:active {
        transform: scale(0.95) !important;
        background: linear-gradient(135deg, #fde047 0%, #facc15 100%) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(250, 204, 21, 0.3) !important;
    }

    /* Désactiver toutes les animations sur le bouton en mobile */
    .podcast-card .play-episode-btn,
    .podcast-card.is-playing .play-episode-btn {
        animation: none !important;
    }

    /* Container de l'image: s'assurer qu'il ne bloque pas les interactions */
    .podcast-card > div:first-child {
        position: relative !important;
        isolation: isolate !important;
    }

    /* Désactiver les pseudo-éléments animés qui peuvent créer des layers */
    .podcast-card > div:first-child::before,
    .podcast-card > div:first-child::after {
        pointer-events: none !important;
    }
}

/* Pour les appareils tactiles en général (même en mode paysage) */
@media (hover: none) and (pointer: coarse) {

    .podcast-card > div:first-child > div[class*="absolute"][class*="inset-0"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        pointer-events: none !important;
    }

    .podcast-card .play-episode-btn {
        z-index: 999 !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        transform: scale(1) !important;
        min-width: 64px !important;
        min-height: 64px !important;
        touch-action: manipulation !important;
    }

    /* Désactiver les hover effects qui ne marchent pas sur tactile */
    .podcast-card:hover .play-episode-btn,
    .podcast-card .play-episode-btn:hover {
        transform: scale(1) !important;
    }

    .podcast-card .play-episode-btn:active {
        transform: scale(0.95) !important;
    }
}

/* Sur très petits écrans: bouton encore plus accessible */
@media (max-width: 480px) {
    .podcast-card .play-episode-btn {
        min-width: 56px !important;
        min-height: 56px !important;
        width: 56px !important;
        height: 56px !important;
    }
}

/* ============================================
   FIX POUR LE PLAYER STICKY EN BAS
   ============================================ */

@media (max-width: 768px) {
    #sticky-player {
        /* S'assurer que le player est accessible */
        z-index: 1000 !important;
        pointer-events: auto !important;

        /* Padding pour safe area iOS */
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem) !important;
    }

    /* Tous les boutons du player sticky */
    #sticky-player button {
        min-width: 44px !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Bouton play principal */
    #main-play-btn {
        min-width: 48px !important;
        min-height: 48px !important;
        z-index: 2 !important;
        pointer-events: auto !important;
    }

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