html { overflow-x: hidden; } nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; transition: all 0.4s; } nav.scrolled { background: rgba(10,10,8,0.88); backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--border); padding: 12px 32px; } .nav-logo { display: flex; align-items: center; text-decoration: none; } .nav-logo img { height: 36px; width: auto; display: block; } .nav-logo-text { display: none; } .nav-links { display: flex; align-items: center; gap: 36px; } .nav-links a { font-size: 14px; color: var(--muted); text-decoration: none; font-weight: 500; transition: color 0.2s; } .nav-links a:hover { color: var(--text); } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-plan-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: rgba(245,158,11,0.12); color: var(--amber); border: 1px solid rgba(245,158,11,0.25); margin-right: 4px; } .btn-ghost-nav { font-size: 13.5px; color: var(--muted); text-decoration: none; font-weight: 500; padding: 8px 16px; border-radius: 8px; transition: all 0.2s; } .btn-ghost-nav:hover { color: var(--text); background: rgba(255,255,255,0.04); } .btn-nav-cta { font-size: 13.5px; font-weight: 700; color: #0A0A08; text-decoration: none; padding: 9px 20px; border-radius: 8px; background: var(--amber); box-shadow: 0 0 24px rgba(245,158,11,0.35); transition: all 0.2s; letter-spacing: -0.2px; } .btn-nav-cta:hover { background: var(--amber3); box-shadow: 0 0 36px rgba(245,158,11,0.55); transform: translateY(-1px); } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 11px; z-index: 200; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--muted); border-radius: 2px; transition: all 0.25s; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--amber); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--amber); } @media (max-width: 768px) { nav { padding: 14px 20px; } .nav-links { display: none; } .hamburger { display: flex; } .nav-cta .btn-ghost-nav, .nav-cta .btn-nav-cta, .nav-cta .nav-plan-badge { display: none; } .mobile-menu { display: none; position: fixed; inset: 0; top: 64px; background: rgba(10,10,8,0.97); backdrop-filter: blur(12px); z-index: 150; flex-direction: column; align-items: center; justify-content: flex-start; padding: 40px 24px; gap: 0; border-top: 1px solid var(--border); } .mobile-menu.open { display: flex; } .mobile-menu a { display: block; width: 100%; text-align: center; padding: 16px 0; font-size: 17px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border); transition: color 0.2s; } .mobile-menu a:hover, .mobile-menu a:active { color: var(--text); } .mobile-menu .mobile-cta { margin-top: 24px; width: 100%; text-align: center; background: var(--amber); color: #0A0A08 !important; font-weight: 700 !important; border-radius: 12px; padding: 16px !important; border-bottom: none !important; font-size: 16px !important; } } @media (min-width: 769px) { .mobile-menu { display: none !important; } } .lang-switcher { position: relative; } .lang-btn { display: flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: 'Inter', sans-serif; letter-spacing: 0.3px; } .lang-btn:hover { color: var(--text); border-color: var(--border2); background: rgba(255,255,255,0.05); } .lang-flag { font-size: 14px; line-height: 1; } .lang-chevron { font-size: 9px; opacity: 0.5; } .lang-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: #1A1A10; border: 1px solid var(--border2); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.4); z-index: 300; min-width: 150px; } .lang-switcher.open .lang-dropdown { display: block; } .lang-option { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; transition: all 0.12s; text-decoration: none; border: none; background: none; width: 100%; text-align: left; } .lang-option:hover { background: rgba(245,158,11,0.08); color: var(--text); } .lang-option.active { color: var(--amber); background: rgba(245,158,11,0.05); } footer { border-top: 1px solid var(--border); padding: 52px 24px; text-align: center; } .footer-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 28px; text-decoration: none; } .footer-logo img { height: 32px; width: auto; display: block; } .footer-logo-text { display: none; } .footer-links { display: flex; justify-content: center; gap: 28px; margin-bottom: 24px; flex-wrap: wrap; row-gap: 14px; } .footer-links a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color 0.2s; padding: 4px 0; } .footer-links a:hover { color: var(--text); } .footer-copy { font-size: 12px; color: var(--muted2); }

Mentions légales

← Retour à l'accueil