/* ===================================
   PORTFOLIO MOBILE - OVERRIDE FINAL
   Priorité absolue sur tous les autres styles
   =================================== */

@media (max-width: 992px) {
    /* Container ne doit PAS avoir overflow hidden */
    .ide-container {
        position: relative !important;
        z-index: 1 !important;
        overflow: visible !important;
    }
    
    /* Sidebar doit permettre les clics et le scroll */
    .ide-sidebar {
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }
    
    /* Force le scroll horizontal */
    .ide-file-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important;
        padding: 0.75rem 0.5rem !important;
        gap: 0.5rem !important;
        position: relative !important;
        z-index: 10 !important;
        overscroll-behavior-x: contain !important;
    }
    
    /* Masque la scrollbar */
    .ide-file-list::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Fichiers non wrappables */
    .ide-file {
        flex-shrink: 0 !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        min-width: 200px !important;
        touch-action: pan-x !important;
        -webkit-tap-highlight-color: transparent !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 100 !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    
    /* Images responsive */
    .project-image-wrapper {
        overflow: hidden !important;
        max-width: 100% !important;
    }
    
    .project-image {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Force l'affichage des projets actifs */
    .project-view {
        display: none !important;
    }
    
    .project-view.active {
        display: block !important;
    }
    
    /* Force l'affichage des tabs actifs */
    .tab-content {
        display: none !important;
    }
    
    .tab-content.active {
        display: block !important;
    }
}