/* ---------- Menu mobile : fenêtre glass ---------- ≤ 1100 px. La barre n'est plus centrée par transform : un transform enferme le panneau « fixed » dans la barre (le menu était tronqué). Le voile derrière la fenêtre est le ::before de la barre ; un clic dessus ferme le menu (js/ui.js). */ @media (max-width: 1100px) { html.ui-ready .main-nav { left: 10px; right: 10px; width: auto; max-width: none; transform: none; } /* Pendant la fermeture, la barre attend avant de reprendre son flou : un backdrop-filter enfermerait la fenêtre (position fixed) dans la barre. */ body.nav-closing .main-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.ui-ready .main-nav::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(80% 50% at 100% 0%, rgba(168, 85, 247, .16), transparent 70%), rgba(4, 4, 8, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; /* Fermeture : le voile s'efface en même temps que la fenêtre */ transition: opacity .34s ease, visibility 0s linear .34s; } body.nav-open .main-nav::before { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; } html.ui-ready .main-nav .nav-links { position: fixed; top: 88px; right: 10px; bottom: auto; left: auto; width: min(420px, calc(100vw - 20px)); max-height: calc(100dvh - 104px); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; padding: 14px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(255, 255, 255, .12); border-radius: 26px; background: radial-gradient(120% 70% at 100% 0%, rgba(168, 85, 247, .24), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(6, 182, 212, .14), transparent 65%), linear-gradient(160deg, rgba(24, 19, 38, .8), rgba(10, 10, 16, .86)); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); box-shadow: 0 32px 80px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(168, 85, 247, .08), inset 0 1px 0 rgba(255, 255, 255, .1); transform-origin: top right; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.9); /* Fermeture : fondu qui recule (rétrécit vers l'arrière, vers le bouton) */ transition: opacity .32s ease, transform .36s cubic-bezier(.4, 0, .6, 1), visibility 0s linear .36s; } body.nav-open .main-nav .nav-links { opacity: 1; visibility: visible; transform: none; transition: opacity .26s ease, transform .45s cubic-bezier(.22, 1, .36, 1), visibility 0s; } /* Filet iris en haut de la fenêtre */ html.ui-ready .main-nav .nav-links::before { content: ''; position: absolute; top: 0; left: 26px; right: 26px; height: 1px; background: var(--grad-iris); opacity: .8; } html.ui-ready .main-nav .nav-links a { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 16px; border-radius: 16px; font-family: 'Urbanist', sans-serif; font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; color: var(--text-main); opacity: 0; transform: translateY(8px); /* À la fermeture, les liens s'effacent avec la fenêtre (sans cascade) ; leur position se réinitialise une fois la fenêtre cachée. */ transition: opacity .24s ease, transform 0s linear .36s, background-color .2s ease; } html.ui-ready .main-nav .nav-links a::after { content: '→'; position: static; display: block; width: auto; height: auto; background: none; box-shadow: none; transform: none; font-family: 'Inter', sans-serif; font-size: .95rem; color: rgba(255, 255, 255, .35); transition: color .2s ease, transform .2s ease; } html.ui-ready .main-nav .nav-links a:is(:hover, :focus-visible) { background-color: rgba(255, 255, 255, .06); } html.ui-ready .main-nav .nav-links a:is(:hover, :focus-visible)::after { color: #c5a9ff; transform: translateX(3px); } html.ui-ready .main-nav .nav-links a.is-current { background-color: rgba(168, 85, 247, .14); } html.ui-ready .main-nav .nav-links a.is-current::after { color: #c5a9ff; } body.nav-open .main-nav .nav-links a { opacity: 1; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1), background-color .2s ease; } body.nav-open .main-nav .nav-links a:nth-child(1) { transition-delay: .05s, .05s, 0s; } body.nav-open .main-nav .nav-links a:nth-child(2) { transition-delay: .08s, .08s, 0s; } body.nav-open .main-nav .nav-links a:nth-child(3) { transition-delay: .11s, .11s, 0s; } body.nav-open .main-nav .nav-links a:nth-child(4) { transition-delay: .14s, .14s, 0s; } body.nav-open .main-nav .nav-links a:nth-child(5) { transition-delay: .17s, .17s, 0s; } body.nav-open .main-nav .nav-links a:nth-child(6) { transition-delay: .2s, .2s, 0s; } body.nav-open .main-nav .nav-links a:nth-child(7) { transition-delay: .23s, .23s, 0s; } body.nav-open .main-nav .nav-links a:nth-child(8) { transition-delay: .26s, .26s, 0s; } /* IDN.Essential et l'espace client forment un second groupe */ html.ui-ready .main-nav .nav-links .nav-essential { margin-top: 12px; } html.ui-ready .main-nav .nav-links .nav-essential::before { content: ''; position: absolute; top: -7px; left: 16px; right: 16px; height: 1px; background: rgba(255, 255, 255, .08); } body.nav-open .main-nav .nav-links .nav-portal { opacity: .8; } html.ui-ready .main-nav .nav-links .nav-cta-mobile { justify-content: center; gap: 10px; margin-top: 10px; padding: 15px 20px; border-radius: 999px; background: var(--grad-iris-2); color: #fff; font-size: 1rem; } html.ui-ready .main-nav .nav-links .nav-cta-mobile::after { content: '↗'; color: #fff; } } @media (max-width: 1100px) and (max-height: 620px) and (orientation: landscape) { html.ui-ready .main-nav .nav-links { top: 76px; max-height: calc(100dvh - 88px); } html.ui-ready .main-nav .nav-links a { min-height: 44px; padding: 8px 14px; font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { html.ui-ready .main-nav .nav-links, body.nav-open .main-nav .nav-links, html.ui-ready .main-nav .nav-links a { transform: none !important; } }