/* MOBILE MENU MODERN - Inspiré des sites d'entreprise modernes */

/* Variables pour cohérence avec le design NetworkX */
:root {
    --mobile-primary: #00b9f9;
    --mobile-primary-dark: #00a0e3;
    --mobile-gradient: linear-gradient(135deg, #00b9f9 0%, #b792fc 100%);
    --mobile-bg: #000000 !important;  /* NOIR NetworkX */
    --mobile-text: #ffffff;  /* BLANC pour fond noir */
    --mobile-text-light: rgba(255, 255, 255, 0.8);  /* Blanc 80% */
    --mobile-border: rgba(0, 185, 249, 0.2);  /* Cyan transparent */
    --mobile-hover: rgba(0, 185, 249, 0.08);  /* Cyan très transparent */
    --mobile-transition: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override des styles desktop pour mobile - Activation responsive */
@media (max-width: 768px) {
    /* Réinitialiser l'ultra-hide du desktop */
    .mega-mobile-nav {
        display: block !important;
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(15, 23, 42, 0.6) !important;
        backdrop-filter: blur(8px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s var(--mobile-transition), visibility 0.3s !important;
        z-index: 9998 !important;
        overflow-y: auto !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        max-width: 100% !important;
        pointer-events: none !important;
        clip: unset !important;
    }

    .mega-mobile-nav.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: all !important;
    }

    /* Conteneur interne - Slide from right - FOND NOIR NetworkX */
    .mega-mobile-inner {
        display: block !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 85% !important;
        max-width: 380px !important;
        background: #000000 !important;
        background-color: #000000 !important;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important;
        transform: translateX(100%) !important;
        transition: transform 0.4s var(--mobile-transition) !important;
        overflow-y: auto !important;
        padding: 0 !important;
        height: auto !important;
        max-height: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        left: auto !important;
        clip: unset !important;
        line-height: normal !important;
    }

    .mega-mobile-nav.active .mega-mobile-inner {
        transform: translateX(0) !important;
    }

    /* Header du menu mobile avec branding */
    .mobile-menu-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 20px 24px !important;
        background: var(--mobile-gradient) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        width: auto !important;
        max-width: none !important;
        position: relative !important;
        left: 0 !important;
        clip: unset !important;
        margin: 0 !important;
        border: 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
    }

    .mobile-menu-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border: none !important;
        border-radius: 50% !important;
        color: white !important;
        font-size: 24px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        max-width: none !important;
        position: relative !important;
        left: 0 !important;
        clip: unset !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    .mobile-menu-close:active {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: scale(0.95) !important;
    }

    /* Navigation items */
    .mobile-nav-content {
        display: block !important;
        padding: 8px 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        width: auto !important;
        max-width: none !important;
        position: relative !important;
        left: 0 !important;
        clip: unset !important;
        margin: 0 !important;
        border: 0 !important;
        line-height: normal !important;
    }

    /* Items principaux */
    .mega-mobile-item {
        display: block !important;
        border-bottom: 1px solid var(--mobile-border) !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        width: auto !important;
        max-width: none !important;
        position: relative !important;
        left: 0 !important;
        clip: unset !important;
        margin: 0 !important;
        line-height: normal !important;
        overflow: visible !important;
    }

    .mega-mobile-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 18px 24px !important;
        background: none !important;
        border: none !important;
        color: var(--mobile-text) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-align: left !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        max-width: none !important;
        position: relative !important;
        left: 0 !important;
        clip: unset !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    .mega-mobile-trigger:active {
        background: var(--mobile-hover) !important;
    }

    .mobile-arrow {
        display: inline-block !important;
        font-size: 14px !important;
        color: var(--mobile-text-light) !important;
        transition: transform 0.3s var(--mobile-transition) !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        max-width: none !important;
        position: relative !important;
        left: 0 !important;
        clip: unset !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    .mega-mobile-item.active .mobile-arrow {
        transform: rotate(180deg) !important;
    }

    /* Submenus - Accordéon élégant */
    .mega-mobile-submenu {
        display: block !important;
        max-height: 0 !important;
        overflow: hidden !important;
        background: #1a1a1a !important;
        transition: max-height 0.4s var(--mobile-transition) !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        max-width: none !important;
        position: relative !important;
        left: 0 !important;
        clip: unset !important;
        margin: 0 !important;
        border: 0 !important;
        padding: 0 !important;
        line-height: normal !important;
    }

    .mega-mobile-item.active .mega-mobile-submenu {
        max-height: 800px !important;
        border-top: 2px solid var(--mobile-primary) !important;
    }

    /* Sections dans les submenus */
    .mobile-submenu-section {
        display: block !important;
        padding: 16px 24px !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        width: auto !important;
        max-width: none !important;
        position: relative !important;
        left: 0 !important;
        clip: unset !important;
        margin: 0 !important;
        border: 0 !important;
        line-height: normal !important;
    }

    .mobile-submenu-section h4 {
        display: block !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: var(--mobile-primary) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        width: auto !important;
        max-width: none !important;
        position: relative !important;
        left: 0 !important;
        clip: unset !important;
        border: 0 !important;
        line-height: 1.2 !important;
    }

    .mobile-submenu-section a {
        display: flex !important;
        align-items: center !important;
        padding: 12px 16px !important;
        margin-bottom: 4px !important;
        color: var(--mobile-text) !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        width: auto !important;
        max-width: none !important;
        position: relative !important;
        left: 0 !important;
        clip: unset !important;
        border: 0 !important;
        line-height: 1.4 !important;
    }

    .mobile-submenu-section a:active {
        background: linear-gradient(135deg, rgba(0, 185, 249, 0.1) 0%, rgba(183, 146, 252, 0.05) 100%) !important;
        color: var(--mobile-primary) !important;
        transform: translateX(4px) !important;
    }

    /* Liens directs (sans submenu) */
    .mega-mobile-link {
        display: flex !important;
        align-items: center !important;
        padding: 18px 24px !important;
        color: var(--mobile-text) !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-bottom: 1px solid var(--mobile-border) !important;
        transition: all 0.2s ease !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        width: auto !important;
        max-width: none !important;
        position: relative !important;
        left: 0 !important;
        clip: unset !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    .mega-mobile-link:active {
        background: var(--mobile-hover) !important;
    }

    /* CTA button - Contact */
    .mega-mobile-cta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 16px 24px !important;
        padding: 16px !important;
        background: var(--mobile-gradient) !important;
        color: white !important;
        border-radius: 12px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(0, 185, 249, 0.3) !important;
        transition: all 0.2s ease !important;
        border: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        width: auto !important;
        max-width: none !important;
        position: relative !important;
        left: 0 !important;
        clip: unset !important;
        line-height: 1.4 !important;
    }

    .mega-mobile-cta:active {
        transform: scale(0.98) !important;
        box-shadow: 0 2px 8px rgba(0, 185, 249, 0.4) !important;
    }

    /* Footer du menu mobile */
    .mobile-menu-footer {
        display: block !important;
        padding: 24px !important;
        margin-top: 16px !important;
        background: #1a1a1a !important;
        border-top: 1px solid var(--mobile-border) !important;
        text-align: center !important;
        font-size: 13px !important;
        color: var(--mobile-text-light) !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        width: auto !important;
        max-width: none !important;
        position: relative !important;
        left: 0 !important;
        clip: unset !important;
        line-height: 1.4 !important;
    }

    /* Scrollbar personnalisée */
    .mega-mobile-inner::-webkit-scrollbar {
        width: 6px;
    }

    .mega-mobile-inner::-webkit-scrollbar-track {
        background: #1a1a1a;
    }

    .mega-mobile-inner::-webkit-scrollbar-thumb {
        background: rgba(0, 185, 249, 0.3);
        border-radius: 3px;
    }

    .mega-mobile-inner::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 185, 249, 0.5);
    }
}

/* Animation d'entrée progressive des items */
@media (max-width: 768px) {
    .mega-mobile-nav.active .mega-mobile-item,
    .mega-mobile-nav.active .mega-mobile-link {
        animation: slideInFromRight 0.4s var(--mobile-transition) forwards;
        opacity: 0;
    }

    .mega-mobile-nav.active .mega-mobile-item:nth-child(1),
    .mega-mobile-nav.active .mega-mobile-link:nth-child(1) {
        animation-delay: 0.05s;
    }

    .mega-mobile-nav.active .mega-mobile-item:nth-child(2),
    .mega-mobile-nav.active .mega-mobile-link:nth-child(2) {
        animation-delay: 0.1s;
    }

    .mega-mobile-nav.active .mega-mobile-item:nth-child(3),
    .mega-mobile-nav.active .mega-mobile-link:nth-child(3) {
        animation-delay: 0.15s;
    }

    .mega-mobile-nav.active .mega-mobile-item:nth-child(4),
    .mega-mobile-nav.active .mega-mobile-link:nth-child(4) {
        animation-delay: 0.2s;
    }

    .mega-mobile-nav.active .mega-mobile-item:nth-child(5),
    .mega-mobile-nav.active .mega-mobile-link:nth-child(5) {
        animation-delay: 0.25s;
    }

    @keyframes slideInFromRight {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

/* Performance optimizations */
@media (max-width: 768px) {
    .mega-mobile-nav,
    .mega-mobile-inner {
        will-change: transform, opacity;
    }

    .mega-mobile-item.active .mega-mobile-submenu {
        will-change: max-height;
    }
}