/* =================================================================
   MOBILE MENU - NAVBAR MODERNE ET PROPRE
   ================================================================= */

/* Variables CSS pour le menu mobile */
:root {
    --mobile-menu-bg: #ffffff;
    --mobile-menu-shadow: 0 8px 32px rgba(0, 188, 212, 0.15);
    --mobile-menu-overlay: rgba(0, 0, 0, 0.5);
    --mobile-item-hover: rgba(0, 188, 212, 0.08);
    --mobile-dropdown-bg: #f8fafb;
    --mobile-transition: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =================================================================
   MENU MOBILE - RESPONSIVE (max-width: 768px)
   ================================================================= */

@media (max-width: 768px) {

    /* ========== BOUTON HAMBURGER ========== */
    .header .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: none;
        background: transparent;
        cursor: pointer;
        z-index: 1001;
        position: relative;
        transition: transform 0.2s var(--mobile-transition);
    }

    .header .mobile-menu-btn:active {
        transform: scale(0.95);
    }

    .header .mobile-menu-btn i {
        font-size: 1.5rem;
        color: var(--color-primary);
        transition: all 0.3s var(--mobile-transition);
    }

    /* ========== OVERLAY SOMBRE ========== */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--mobile-menu-overlay);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s var(--mobile-transition);
        z-index: 999;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* ========== MENU PRINCIPAL ========== */
    .header .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 400px;
        height: 100vh;
        background: var(--mobile-menu-bg);
        flex-direction: column;
        padding: 0;
        margin: 0;
        gap: 0;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
        transition: right 0.4s var(--mobile-transition);
        z-index: 1000;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .header .nav-links.active {
        right: 0;
    }

    /* ========== HEADER DU MENU MOBILE ========== */
    .header .nav-links::before {
        content: '';
        display: block;
        width: 100%;
        height: 80px;
        background: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-cyan-light) 100%);
        flex-shrink: 0;
    }

    /* ========== ÉLÉMENTS DU MENU ========== */
    .header .nav-links li {
        width: 100%;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(0, 188, 212, 0.08);
        list-style: none;
    }

    .header .nav-links li:last-child {
        border-bottom: none;
    }

    /* ========== LIENS DU MENU ========== */
    .header .nav-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1.25rem 1.5rem;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-text);
        text-decoration: none;
        text-align: center;
        border-radius: 0;
        box-shadow: none;
        transition: all 0.25s var(--mobile-transition);
        position: relative;
    }

    .header .nav-links a:hover {
        background: var(--mobile-item-hover);
        color: var(--color-cyan);
    }

    .header .nav-links a.active {
        background: linear-gradient(90deg, transparent 0%, rgba(0, 188, 212, 0.12) 50%, transparent 100%);
        color: var(--color-cyan);
        font-weight: 700;
    }

    .header .nav-links a.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 60%;
        background: var(--color-cyan);
        border-radius: 0 4px 4px 0;
    }

    /* ========== BOUTON CTA (REJOINS-NOUS) ========== */
    .header .nav-links .nav-cta {
        margin: 1rem;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-light) 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
        font-weight: 700;
    }

    .header .nav-links .nav-cta:hover {
        background: linear-gradient(135deg, var(--color-orange-light) 0%, var(--color-orange) 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
    }

    /* ========== DROPDOWNS ========== */
    .header .nav-links .dropdown {
        position: relative;
    }

    .header .nav-links .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .header .nav-links .dropdown-toggle i {
        font-size: 0.875rem;
        transition: transform 0.3s var(--mobile-transition);
    }

    .header .nav-links .dropdown.active .dropdown-toggle i {
        transform: rotate(180deg);
    }

    /* ========== SOUS-MENU DROPDOWN ========== */
    .header .nav-links .dropdown-menu {
        position: static;
        width: 100%;
        background: var(--mobile-dropdown-bg);
        box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.05);
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: all 0.35s var(--mobile-transition);
        transform: none;
        visibility: visible;
        left: 0;
        right: 0;
        box-sizing: border-box;
    }

    .header .nav-links .dropdown.active .dropdown-menu {
        max-height: 500px;
        opacity: 1;
        padding: 0.5rem 0;
        overflow: visible;
    }

    .header .nav-links .dropdown-menu li {
        border-bottom: none;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }

    .header .nav-links .dropdown-menu a {
        padding: 1.125rem 1.5rem;
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-text-light);
        text-align: center;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        display: block;
        transition: all 0.25s var(--mobile-transition);
    }

    .header .nav-links .dropdown-menu a:hover {
        background: rgba(0, 188, 212, 0.1);
        color: var(--color-cyan);
    }

    .header .nav-links .dropdown-menu a.active {
        background: rgba(0, 188, 212, 0.15);
        color: var(--color-cyan);
        font-weight: 600;
    }

    /* ========== ANIMATIONS D'ENTRÉE ========== */
    @keyframes slideInFromRight {
        from {
            right: -100%;
        }
        to {
            right: 0;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* ========== SCROLL DANS LE MENU ========== */
    .header .nav-links::-webkit-scrollbar {
        width: 6px;
    }

    .header .nav-links::-webkit-scrollbar-track {
        background: transparent;
    }

    .header .nav-links::-webkit-scrollbar-thumb {
        background: rgba(0, 188, 212, 0.3);
        border-radius: 3px;
    }

    .header .nav-links::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 188, 212, 0.5);
    }

}

/* =================================================================
   DESKTOP - Cacher le bouton hamburger
   ================================================================= */

@media (min-width: 769px) {
    .header .mobile-menu-btn {
        display: none;
    }

    .mobile-menu-overlay {
        display: none;
    }
}