/* ============================================= Aqua-Net — mobile-nav-patch.css Ajouter en APRÈS styles.css existant ============================================= */ /* ── VARIABLES ──────────────────────────────── */ :root { --cyan: #00AEEF; --cyan-dk: #0097d0; --nav-h: 60px; --radius: 14px; --card-line: rgba(0,174,239,0.35); --card-muted: #a9b4bb; } /* ── HEADER ─────────────────────────────────── */ .header { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: rgba(11,15,18,.95); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid rgba(0,174,239,0.3); color: #e9f0f2; } .header a { color: #e9f0f2; } .header a:hover { color: var(--cyan); } .nav { display: flex; align-items: center; height: var(--nav-h); gap: 12px; } .logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; flex-shrink: 0; white-space: nowrap; text-decoration: none; } /* ── DESKTOP NAV LINKS ──────────────────────── */ .navlinks { display: none; gap: 0; flex: 1; justify-content: center; flex-wrap: nowrap; align-items: stretch; } .navlinks > a, .navlinks .nav-dropdown > a { display: flex; align-items: center; padding: 0 14px; font-size: 14px; white-space: nowrap; color: #e9f0f2; text-decoration: none; height: 100%; line-height: 1; } .navlinks a:hover { color: var(--cyan); } /* ── DROPDOWN ───────────────────────────────── */ .nav-dropdown { position: relative; display: flex; align-items: center; } .nav-dropdown > a { display: flex; align-items: center; height: 100%; line-height: 1; } .nav-dropdown > a::after { content: ' ▾'; font-size: 11px; opacity: .7; } .dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; background: rgba(11,15,18,.97); border: 1px solid rgba(0,174,239,0.3); border-radius: var(--radius); padding: 8px 0; z-index: 200; } .dropdown-menu a { display: block; padding: 9px 18px; font-size: 14px; white-space: nowrap; color: #e9f0f2; text-decoration: none; } .dropdown-menu a:hover { color: var(--cyan); background: rgba(0,174,239,.08); } .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { display: block; } .resources-dropdown .dropdown-menu { min-width: 220px; } /* ── NAV ACTIONS ────────────────────────────── */ .nav-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-shrink: 0; } /* ── HAMBURGER BUTTON ───────────────────────── */ .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: 1px solid rgba(0,174,239,0.4); border-radius: 10px; cursor: pointer; padding: 8px; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .hamburger span { display: block; height: 2px; background: #e9f0f2; border-radius: 2px; transition: all .25s; } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── MOBILE MENU DRAWER ─────────────────────── */ /* CRITICAL: hidden by default, shown only with .open */ .mobile-menu { display: none !important; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: rgba(11,15,18,.98); z-index: 99; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 20px 40px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); } .mobile-menu.open { display: block !important; } .mobile-menu a { display: block; color: #e9f0f2; font-size: 18px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); text-decoration: none; } .mobile-menu a:hover { color: var(--cyan); } .mobile-menu .sub-links { padding: 8px 0 8px 16px; } .mobile-menu .sub-links a { font-size: 15px; font-weight: 400; color: var(--card-muted); padding: 8px 0; border-bottom: none; } .mobile-menu .mobile-cta { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; } /* ── DESKTOP: show navlinks, hide hamburger ─── */ @media (min-width: 900px) { .navlinks { display: flex !important; } .hamburger { display: none !important; } .mobile-menu { display: none !important; } .mobile-menu.open { display: none !important; } } /* ── BUTTONS ─────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; padding: 10px 18px; font-weight: 700; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s; -webkit-tap-highlight-color: transparent; white-space: nowrap; text-decoration: none; } .btn.primary { background: var(--cyan); color: #fff; border-color: transparent; } .btn.primary:hover { background: var(--cyan-dk); color: #fff; } .btn-lang { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; padding: 7px 14px; font-weight: 700; font-size: 13px; background: var(--cyan); color: #fff !important; border: none; cursor: pointer; letter-spacing: .04em; transition: background .2s; white-space: nowrap; -webkit-tap-highlight-color: transparent; text-decoration: none; } .btn-lang:hover { background: var(--cyan-dk); color: #fff !important; } /* ── URGENCE BANNER ──────────────────────────── */ .urgence-banner { background: linear-gradient(90deg, #003340, #004d66); border: 1px solid rgba(0,174,239,.4); border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0; } .urgence-banner .icon { font-size: 22px; flex-shrink: 0; } .urgence-banner .text { flex: 1; color: #e9f0f2; font-size: 14px; } .urgence-banner .text strong { color: var(--cyan); } /* ── MOBILE TOUCH TARGETS ───────────────────── */ @media (max-width: 899px) { .btn { min-height: 44px; } .btn-lang { min-height: 40px; } } /* ── PRINT ───────────────────────────────────── */ @media print { .header, .hamburger, .mobile-menu, .btn-lang { display: none !important; } }