/**
 * CSS de correction pour les interactions FasoFlix
 * Force les interactions et corrige les problèmes de clics
 */

/* Corrections pour les cartes de contenu */
.group.cursor-pointer {
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 1 !important;
}

.group.cursor-pointer:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

.group.cursor-pointer:focus {
    outline: 2px solid #dc2626 !important;
    outline-offset: 2px !important;
}

/* Forcer la visibilité des overlays au survol */
.group:hover .absolute.inset-0 {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.group .absolute.inset-0 {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
}

/* Améliorer les boutons dans les overlays */
.group .absolute.inset-0 a,
.group .absolute.inset-0 button {
    pointer-events: auto !important;
    z-index: 10 !important;
    position: relative !important;
    cursor: pointer !important;
}

/* Forcer l'interactivité des liens "Regarder" */
a[href*="contenus.watch"],
a[href*="login"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 15 !important;
    position: relative !important;
}

/* Corrections pour les images */
.group img {
    transition: transform 0.3s ease !important;
    pointer-events: none !important;
}

.group:hover img {
    transform: scale(1.05) !important;
}

/* Forcer les interactions sur les boutons d'abonnement */
button[type="submit"],
.bg-red-600,
.bg-gray-700,
.bg-gray-800 {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    z-index: 2 !important;
}

button[type="submit"]:hover,
.bg-red-600:hover,
.bg-gray-700:hover,
.bg-gray-800:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

button[type="submit"]:active,
.bg-red-600:active,
.bg-gray-700:active,
.bg-gray-800:active {
    transform: translateY(0) !important;
}

/* Corrections pour la barre de recherche */
.relative.max-w-4xl input {
    pointer-events: auto !important;
    z-index: 1 !important;
}

.relative.max-w-4xl button {
    pointer-events: auto !important;
    z-index: 2 !important;
}

/* Suggestions de recherche */
#search-suggestions {
    pointer-events: auto !important;
    z-index: 50 !important;
}

#search-suggestions div:hover {
    background-color: #374151 !important;
}

/* Corrections pour les liens */
a {
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

a:hover {
    opacity: 0.8 !important;
}

/* Forcer l'interactivité des formulaires */
form {
    pointer-events: auto !important;
}

form input,
form button,
form select,
form textarea {
    pointer-events: auto !important;
}

/* Corrections pour les sections avec scroll */
section {
    opacity: 0.8;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

section.in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Animation fade-in pour les images */
img.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Corrections pour les notifications toast */
.fixed.top-4.right-4 {
    pointer-events: auto !important;
    z-index: 9999 !important;
}

/* Améliorer l'accessibilité */
*:focus {
    outline: 2px solid #dc2626 !important;
    outline-offset: 2px !important;
}

/* Corrections pour les éléments interactifs masqués */
.opacity-0 {
    pointer-events: none !important;
}

.opacity-100 {
    pointer-events: auto !important;
}

/* Forcer la visibilité des éléments critiques */
.container,
.mx-auto,
.px-6 {
    pointer-events: auto !important;
}

/* Corrections spécifiques pour les grilles de contenu */
.grid > * {
    pointer-events: auto !important;
}

.grid .group {
    position: relative !important;
    z-index: 1 !important;
}

.grid .group:hover {
    z-index: 2 !important;
}

/* Améliorer les transitions */
.transition,
.transition-all,
.transition-transform,
.transition-opacity {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Corrections pour les boutons désactivés */
button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
}

/* Forcer l'interactivité des éléments Tailwind */
.hover\:bg-red-700:hover {
    background-color: #b91c1c !important;
}

.hover\:bg-gray-600:hover {
    background-color: #4b5563 !important;
}

.hover\:bg-gray-700:hover {
    background-color: #374151 !important;
}

.hover\:scale-110:hover {
    transform: scale(1.1) !important;
}

/* Corrections pour les problèmes de z-index */
.relative {
    z-index: auto !important;
}

.absolute {
    z-index: auto !important;
}

/* Forcer l'affichage des éléments cachés au survol */
.group:hover .group-hover\:opacity-100 {
    opacity: 1 !important;
}

.group:hover .group-hover\:scale-110 {
    transform: scale(1.1) !important;
}

/* Corrections pour les problèmes de débordement */
.overflow-hidden {
    overflow: hidden !important;
}

/* Améliorer la réactivité mobile */
@media (max-width: 768px) {
    .group.cursor-pointer {
        padding: 8px !important;
    }
    
    .group.cursor-pointer:hover {
        transform: none !important;
    }
    
    .group:hover img {
        transform: none !important;
    }
}

/* Corrections pour les problèmes de performance */
.group img,
.transition-transform {
    will-change: transform !important;
}

.transition-opacity {
    will-change: opacity !important;
}

/* Forcer l'affichage correct des flexbox */
.flex {
    display: flex !important;
}

.items-center {
    align-items: center !important;
}

.justify-center {
    justify-content: center !important;
}

/* Corrections finales pour garantir l'interactivité */
* {
    box-sizing: border-box !important;
}

html, body {
    scroll-behavior: smooth !important;
}

/* Améliorer les performances de scroll */
.container {
    contain: layout style paint !important;
}