/* Fix pour le débordement mobile du lecteur podcast sur les pages BD */

/* Styles pour desktop (écrans >= 768px) */
@media (min-width: 768px) {
    /* Conteneur podcast sur desktop - largeur normale */
    .podcast-container-desktop {
        width: 100% !important;
        max-width: 100% !important;
        margin: 1rem auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Header podcast sur desktop */
    #podcast-header {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Contenu podcast sur desktop */
    #podcast-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 2rem !important;
    }
}

/* Corrections spécifiques pour mobile (écrans < 768px) */
@media (max-width: 767px) {
    
    /* Conteneur principal - empêcher tout débordement */
    .max-w-6xl {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Conteneur podcast sur mobile */
    .podcast-container-desktop {
        width: calc(100vw - 0.5rem) !important;
        max-width: calc(100vw - 0.5rem) !important;
        margin: 1rem 0.25rem !important;
        margin-left: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Bloc podcast principal sur mobile */
    .bg-gray-900.rounded-xl {
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
        max-width: calc(100vw - 0.5rem) !important;
    }
    
    /* Contenu du podcast - réduire le padding */
    #podcast-content {
        padding: 0.75rem !important;
    }
    
    /* Lecteur principal - contraindre la largeur */
    .bg-gray-50.rounded-xl {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 0.75rem !important;
    }
    
    /* Section des contrôles - empêcher le débordement horizontal */
    .podcast-controls {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Réorganiser les contrôles en mode mobile */
    .podcast-controls .flex.flex-wrap {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    /* Sélecteur de vitesse - empêcher le débordement */
    .speed-selector {
        max-width: 100% !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    
    .speed-selector select {
        max-width: 80px !important;
        min-width: 0 !important;
    }
    
    /* Contrôles de volume - adapter à mobile */
    .podcast-controls input[type="range"] {
        max-width: 120px !important;
        flex-shrink: 1 !important;
    }
    
    /* Boutons rewind/forward - centrer sur mobile */
    .podcast-controls .flex.items-center.space-x-5 {
        justify-content: center !important;
        width: 100% !important;
    }
    
    /* Section volume - centrer sur mobile */
    .podcast-controls .flex.items-center.space-x-2 {
        justify-content: center !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
    
    /* Forcer la largeur maximale pour tous les éléments enfants */
    #podcast-content * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Contrôles flexbox - empêcher le débordement */
    .flex {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }
    
    /* Éléments flex - permettre le rétrécissement */
    .flex > * {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    
    /* Conteneur des contrôles de lecture */
    .space-y-3, .space-y-4, .space-y-6 {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Barre de progression - contraindre */
    #progress-container {
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 !important;
    }
    
    /* Titre et description - empêcher le débordement */
    .podcast-player h3,
    .podcast-player p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Bouton de lecture - adapter la taille sur mobile */
    .podcast-play-button {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
    }
}

/* Corrections spécifiques pour très petits écrans (< 480px) */
@media (max-width: 479px) {
    
    .podcast-player {
        padding: 0.5rem !important;
        margin: 0.5rem 0 !important;
    }
    
    /* Réduire encore plus les espaces sur très petits écrans */
    .podcast-controls .flex.items-center.space-x-5 > * {
        margin-left: 0.75rem !important;
        margin-right: 0.75rem !important;
    }
    
    .podcast-controls .flex.items-center.space-x-2 > * {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
    
    /* Slider de volume plus petit sur très petits écrans */
    .podcast-controls input[type="range"] {
        max-width: 100px !important;
    }
    
    /* Texte du pourcentage de volume plus petit */
    .volume-percentage {
        font-size: 0.75rem !important;
    }
}

/* Assurer que le conteneur parent ne déborde jamais */
.container,
.max-w-6xl,
.mx-auto {
    overflow-x: hidden !important;
}

/* Corrections globales pour éviter le débordement */
body {
    overflow-x: hidden !important;
}

/* Spécifique au bloc podcast - empêcher tout débordement */
.bg-gray-900 {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Corrections pour les éléments de liste des épisodes */
.episode-item {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Corrections pour les grilles d'épisodes */
#podcast-list-view,
#podcast-grid-view {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Corrections pour les textes longs */
.break-words {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}