/* ===========================================
   MOBILE MENU - STANDALONE FILE
   Ce fichier doit être chargé APRÈS style.css
   =========================================== */

/* Reset pour mobile <= 960px */
@media (max-width: 960px) {

    /* HEADER - Fixe en haut, pleine largeur */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 70px !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        background: #ffffff !important;
        border: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        z-index: 99999 !important;
    }

    .header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
        padding: 0 16px !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* BODY - Padding pour le header fixe */
    body {
        padding-top: 70px !important;
    }

    body.menu-open {
        overflow: hidden !important;
    }

    /* LOGO - Titre complet visible */
    .logo {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .logo-mark {
        width: 38px !important;
        height: 38px !important;
        flex-shrink: 0 !important;
    }

    .logo-text {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 5px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .logo-name {
        font-size: 17px !important;
        white-space: nowrap !important;
    }

    .logo-sub {
        font-size: 17px !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
    }

    /* BOUTON DESKTOP - Caché */
    .nav-cta-desktop {
        display: none !important;
    }

    /* MENU TOGGLE (hamburger) */
    .menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        gap: 6px !important;
        background: #f3f4f6 !important;
        border: none !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    .menu-toggle span {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: #0B3772 !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }

    .menu-toggle.active {
        background: #0B3772 !important;
    }

    .menu-toggle.active span {
        background: #ffffff !important;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px) !important;
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px) !important;
    }

    /* NAVIGATION - Panneau plein écran avec FLEXBOX */
    .nav {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100vh - 70px) !important;
        max-height: calc(100vh - 70px) !important;
        background: #ffffff !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        z-index: 99998 !important;
    }

    .nav.active {
        display: flex !important;
    }

    /* NAV LIST - Prend l'espace disponible avec flex-grow */
    .nav-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 24px 20px !important;
        margin: 0 !important;
        gap: 8px !important;
        list-style: none !important;
        flex-grow: 1 !important;
        flex-shrink: 0 !important;
    }

    .nav-list > li {
        width: 100% !important;
        display: block !important;
    }

    /* ===========================================
       LIENS DE NAVIGATION - STYLE UNIFORME
       Tous les liens avec le même style carte
       =========================================== */

    /* LIENS SIMPLES (Accueil, À propos) - Style carte comme les services */
    .nav-list > li > a.nav-link {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 16px 18px !important;
        margin: 0 !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        text-decoration: none !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        border: none !important;
        transition: background 0.2s ease !important;
    }

    .nav-list > li > a.nav-link:hover,
    .nav-list > li > a.nav-link:active {
        background: #f1f5f9 !important;
    }

    .nav-link::before {
        display: none !important;
        content: none !important;
    }

    /* DROPDOWN CONTAINER */
    .nav-item-dropdown {
        width: 100% !important;
        display: block !important;
        position: static !important;
    }

    /* LABEL "NOS SERVICES" - Style simple texte */
    .nav-link-dropdown,
    .nav-list > li > a.nav-link-dropdown,
    .nav-list > li > span.nav-link-dropdown {
        display: block !important;
        padding: 12px 18px 8px 18px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #9ca3af !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        pointer-events: none !important;
        cursor: default !important;
        background: transparent !important;
        text-decoration: none !important;
        border-radius: 0 !important;
    }

    .dropdown-arrow {
        display: none !important;
    }

    /* DROPDOWN MENU - TOUJOURS VISIBLE */
    .dropdown-menu {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .dropdown-menu::before,
    .dropdown-menu::after {
        display: none !important;
        content: none !important;
    }

    /* LIENS SERVICES (Courtage, TURPE, Fiscalité) - Style carte */
    .dropdown-link {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 16px 18px !important;
        margin: 0 !important;
        background: #f8fafc !important;
        border: none !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        transition: background 0.2s ease !important;
    }

    .dropdown-link:hover,
    .dropdown-link:active {
        background: #f1f5f9 !important;
        transform: none !important;
    }

    .dropdown-link-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    }

    .dropdown-link-icon svg {
        width: 22px !important;
        height: 22px !important;
        color: #0B3772 !important;
    }

    .dropdown-link-text {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
    }

    .dropdown-link-title {
        font-size: 17px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        line-height: 1.3 !important;
    }

    .dropdown-link-desc {
        font-size: 13px !important;
        color: #6b7280 !important;
        line-height: 1.4 !important;
    }

    /* ===========================================
       BOUTON CONTACT - GESTION STRICTE
       =========================================== */

    /* Caché par défaut partout */
    .nav-cta,
    a.nav-cta,
    .nav .nav-cta,
    .nav > .nav-cta,
    nav.nav a.nav-cta,
    .header a.nav-cta,
    .header-inner a.nav-cta,
    .btn.nav-cta {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        pointer-events: none !important;
        left: -9999px !important;
    }

    /* Visible UNIQUEMENT quand menu est ouvert (nav.active) */
    .nav.active .nav-cta,
    .nav.active > .nav-cta,
    nav.nav.active .nav-cta,
    nav.nav.active > .nav-cta,
    nav.nav.active a.nav-cta,
    nav.nav.active a.nav-cta.btn,
    nav.nav.active a.nav-cta.btn.btn-primary {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        pointer-events: auto !important;
        left: auto !important;
        width: calc(100% - 40px) !important;
        margin: 0 20px 24px 20px !important;
        padding: 18px 24px !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        text-align: center !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #0B3772 0%, #1d4ed8 100%) !important;
        border: none !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(11, 55, 114, 0.3) !important;
        flex-shrink: 0 !important;
    }

    nav.nav.active .nav-cta:hover {
        background: linear-gradient(135deg, #1d4ed8 0%, #0B3772 100%) !important;
        box-shadow: 0 6px 16px rgba(11, 55, 114, 0.4) !important;
    }

    /* ABOUT PAGE - Masquer les floating cards sur mobile */
    .accomp-float-card,
    .accomp-float-1,
    .accomp-float-2,
    .accomp-float-3 {
        display: none !important;
    }

    /* HERO PAGES */
    .hero-page {
        padding-top: 120px !important;
    }
}

/* Écrans plus petits - 768px */
@media (max-width: 768px) {
    .header {
        height: 64px !important;
    }

    .nav {
        top: 64px !important;
        height: calc(100vh - 64px) !important;
    }

    body {
        padding-top: 64px !important;
    }

    .hero-page {
        padding-top: 110px !important;
    }

    /* Bouton contact 768px */
    nav.nav.active .nav-cta,
    nav.nav.active a.nav-cta {
        margin: 0 16px 20px 16px !important;
        padding: 16px 20px !important;
        font-size: 16px !important;
        width: calc(100% - 32px) !important;
    }
}

/* Écrans plus petits - 480px */
@media (max-width: 480px) {
    .header {
        height: 60px !important;
    }

    .nav {
        top: 60px !important;
        height: calc(100vh - 60px) !important;
    }

    body {
        padding-top: 60px !important;
    }

    /* Bouton contact 480px */
    nav.nav.active .nav-cta,
    nav.nav.active a.nav-cta {
        margin: 0 12px 16px 12px !important;
        padding: 14px 16px !important;
        font-size: 15px !important;
        width: calc(100% - 24px) !important;
    }

    .header-inner {
        padding: 0 12px !important;
    }

    .logo {
        gap: 8px !important;
    }

    .logo-mark {
        width: 34px !important;
        height: 34px !important;
    }

    .logo-text {
        gap: 4px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .logo-name {
        font-size: 15px !important;
        white-space: nowrap !important;
    }

    .logo-sub {
        display: inline !important;
        font-size: 15px !important;
        white-space: nowrap !important;
    }

    /* Menu toggle plus petit */
    .menu-toggle {
        width: 40px !important;
        height: 40px !important;
    }

    /* Liens menu - taille adaptée */
    .nav-list > li > a.nav-link,
    .dropdown-link {
        padding: 14px 16px !important;
        gap: 14px !important;
    }

    .nav-list > li > a.nav-link {
        font-size: 16px !important;
    }

    .dropdown-link-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    .dropdown-link-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    .dropdown-link-title {
        font-size: 16px !important;
    }

    .dropdown-link-desc {
        font-size: 12px !important;
    }

    .hero-page {
        padding-top: 100px !important;
    }
}