/* Responsive overrides — mobile-first */ /* Breakpoints: 810px (tablet), 1200px (desktop) */ /* === Mobile menu toggle (hamburger) === */ /* Hidden on desktop by default */ .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 10; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .mobile-menu-toggle span { display: block; width: 24px; height: 2px; background-color: var(--color-black, rgb(0, 0, 0)); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } /* === Mobile (<810px) === */ @media (max-width: 809px) { .mobile-menu-toggle { display: flex; } .nav-bar .nav-links-group, .nav-bar .nav-cta-area { display: none; } .nav-bar .nav-inner { flex-wrap: wrap; } /* Nav bar adjustments (collapsed state) */ .nav-bar.nav-layout { width: 100%; height: auto; padding: 12px 16px; } /* === Open state: full-viewport overlay (portalled to ) === */ body.mobile-menu-body-lock { overflow: hidden; } nav.nav-bar.mobile-menu-open { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; background-color: var(--color-white, #fff); height: 100vh; justify-content: flex-start; align-content: flex-start; align-items: stretch; padding: 0; } nav.nav-bar.mobile-menu-open .nav-inner { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; padding: 0; width: 100%; height: auto; min-height: 100%; } nav.nav-bar.mobile-menu-open .nav-logo-area { padding: 20px 24px; border-bottom: 1px solid #ebebeb; justify-content: flex-start; } nav.nav-bar.mobile-menu-open .nav-links-group, nav.nav-bar.mobile-menu-open .nav-cta-area { display: flex; flex-direction: column; width: 100%; align-items: stretch; gap: 0; padding: 0; } /* Top-level rows */ nav.nav-bar.mobile-menu-open .nav-dropdown-trigger, nav.nav-bar.mobile-menu-open .nav-link-livre-anchor, nav.nav-bar.mobile-menu-open .nav-link-communaute-anchor, nav.nav-bar.mobile-menu-open .nav-link-media-anchor { display: flex; flex-direction: column; width: 100%; padding: 0; border-bottom: 1px solid #f0f0f0; } nav.nav-bar.mobile-menu-open .nav-link-coaching-wrap, nav.nav-bar.mobile-menu-open .nav-link-livre-wrap, nav.nav-bar.mobile-menu-open .nav-link-communaute-wrap, nav.nav-bar.mobile-menu-open .nav-link-media-wrap { width: 100%; height: auto; } nav.nav-bar.mobile-menu-open .nav-link-coaching, nav.nav-bar.mobile-menu-open .nav-link-livre, nav.nav-bar.mobile-menu-open .nav-link-communaute, nav.nav-bar.mobile-menu-open .nav-link-media { padding: 20px 24px; justify-content: flex-start; place-content: center flex-start; width: 100%; height: auto; } nav.nav-bar.mobile-menu-open .nav-link-coaching-text, nav.nav-bar.mobile-menu-open .nav-link-livre-text, nav.nav-bar.mobile-menu-open .nav-link-communaute-text, nav.nav-bar.mobile-menu-open .nav-link-media-text { transform: none !important; position: static !important; } nav.nav-bar.mobile-menu-open .nav-link-coaching-text p, nav.nav-bar.mobile-menu-open .nav-link-livre-text p, nav.nav-bar.mobile-menu-open .nav-link-communaute-text p, nav.nav-bar.mobile-menu-open .nav-link-media-text p { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--color-black, #000); } /* Programmes accordion trigger: chevron + click affordance */ nav.nav-bar.mobile-menu-open .nav-link-coaching { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } nav.nav-bar.mobile-menu-open .nav-link-coaching::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(45deg); transition: transform 0.2s; } nav.nav-bar.mobile-menu-open .nav-dropdown-trigger.mobile-sub-open .nav-link-coaching::after { transform: rotate(-135deg); margin-top: 6px; } /* Mega-dropdown becomes an inline accordion panel on mobile */ nav.nav-bar.mobile-menu-open .static-dropdown { display: none !important; position: static !important; min-width: 0 !important; width: 100% !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: #fafafa !important; padding: 8px 24px 20px !important; order: 2; } nav.nav-bar.mobile-menu-open .nav-dropdown-trigger.mobile-sub-open .static-dropdown { display: block !important; } nav.nav-bar.mobile-menu-open .static-dropdown > div { flex-direction: column !important; gap: 20px !important; display: flex; } nav.nav-bar.mobile-menu-open .static-dropdown p { font-family: 'Inter', sans-serif; text-transform: uppercase; font-size: 11px !important; letter-spacing: 0.08em; color: #999 !important; margin: 0 0 4px !important; } nav.nav-bar.mobile-menu-open .static-dropdown a { font-family: 'Manrope', sans-serif !important; font-weight: 600 !important; font-size: 16px !important; padding: 12px 0 !important; border-bottom: 1px solid #ececec; color: #333 !important; } nav.nav-bar.mobile-menu-open .static-dropdown > div > div > a:last-child { border-bottom: none; } /* CTA stack at the bottom */ nav.nav-bar.mobile-menu-open .nav-cta-area { gap: 12px; padding: 24px; } nav.nav-bar.mobile-menu-open .nav-cta-contact-link, nav.nav-bar.mobile-menu-open .nav-cta-login-link { width: 100%; } nav.nav-bar.mobile-menu-open .nav-cta-contact-wrap, nav.nav-bar.mobile-menu-open .nav-cta-login-wrap { width: 100%; } nav.nav-bar.mobile-menu-open .btn-primary, nav.nav-bar.mobile-menu-open .btn-secondary { width: 100%; padding: 18px 24px; justify-content: center; } nav.nav-bar.mobile-menu-open .btn-primary { background-color: var(--color-accent, #f9cf01) !important; border-color: var(--color-accent, #f9cf01) !important; } /* Close button: hamburger morphs to X */ nav.nav-bar.mobile-menu-open .mobile-menu-toggle { position: fixed; top: 24px; right: 16px; z-index: 1001; } nav.nav-bar.mobile-menu-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } nav.nav-bar.mobile-menu-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; } nav.nav-bar.mobile-menu-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } }