/* * peeryx-v126-navbar.css — Design premium v3 * Classe unique : .pxnav → zéro conflit avec tout l'existant * * CLASSES APPLIQUÉES PAR v95-bundle.min.js : * .open sur [data-mobile-nav] (tiroir ouvert) * .menu-open sur (scroll lock) * .scrolled sur [data-header] (sticky scrollé) * .active sur [data-mobile-toggle](hamburger actif) * aria-expanded sur le toggle (synchronisé) */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VARIABLES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pxnav { --px-bg: rgba(5, 12, 26, 0.86); --px-bg-solid: rgb(4, 10, 20); --px-border: rgba(255, 255, 255, 0.065); --px-border-act: rgba(0, 208, 162, 0.20); --px-text: #7a9fb6; --px-text-hover: #d0eaff; --px-text-active: #eef7ff; --px-accent: #00d4a8; --px-cta-text: #030e1e; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RESET INTERNE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pxnav, .pxnav *, .pxnav *::before, .pxnav *::after { box-sizing: border-box; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HEADER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pxnav { position: sticky; top: 0; z-index: 1000; width: 100%; overflow: visible; background: var(--px-bg); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border-bottom: 1px solid var(--px-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(0, 0, 0, 0.10); transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } /* Classe "scrolled" — appliquée par v95-bundle */ .pxnav.scrolled { background: var(--px-bg-solid); border-bottom-color: var(--px-border-act); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 28px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(0, 208, 162, 0.05); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BARRE INTÉRIEURE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pxnav__bar { display: flex; align-items: center; height: 60px; padding: 0 18px; max-width: 1380px; margin: 0 auto; position: relative; } @media (min-width: 480px) { .pxnav__bar { height: 62px; padding: 0 24px; } } @media (min-width: 768px) { .pxnav__bar { height: 64px; padding: 0 32px; } } @media (min-width: 1024px) { .pxnav__bar { height: 68px; padding: 0 clamp(28px, 3vw, 56px); } } @media (min-width: 1280px) { .pxnav__bar { height: 70px; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LOGO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pxnav__brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; border-radius: 6px; outline: none; transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1); } .pxnav__brand:hover { opacity: 0.78; transform: scale(0.975); } .pxnav__brand:focus-visible { outline: 2px solid var(--px-accent); outline-offset: 5px; } .pxnav__logo { display: block; width: 114px; height: auto; max-height: 34px; object-fit: contain; } @media (max-width: 360px) { .pxnav__logo { width: 96px; } } @media (min-width: 480px) { .pxnav__logo { width: 126px; max-height: 36px; } } @media (min-width: 1024px) { .pxnav__logo { width: 148px; max-height: 42px; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LIENS DESKTOP ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pxnav__links { display: none; } @media (min-width: 1024px) { .pxnav__links { display: flex !important; align-items: center; gap: 2px; flex: 1; justify-content: center; padding: 0 24px; overflow: visible; min-width: 0; } } .pxnav__link { position: relative; display: inline-flex; align-items: center; padding: 8px 13px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--px-text); text-decoration: none; white-space: nowrap; letter-spacing: 0.02em; line-height: 1; outline: none; transition: color 0.2s ease, background 0.2s ease; } .pxnav__link::after { content: ''; position: absolute; bottom: 4px; left: 13px; right: 13px; height: 1.5px; background: linear-gradient(90deg, transparent 0%, var(--px-accent) 25%, var(--px-accent) 75%, transparent 100%); border-radius: 2px; opacity: 0; transform: scaleX(0); transform-origin: center; transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.34, 1.5, 0.64, 1); pointer-events: none; } .pxnav__link:hover { color: var(--px-text-hover); background: rgba(255, 255, 255, 0.055); } .pxnav__link--active, .pxnav__link[aria-current="page"] { color: var(--px-text-active); font-weight: 600; } .pxnav__link--active::after, .pxnav__link[aria-current="page"]::after { opacity: 1; transform: scaleX(1); } .pxnav__link:focus-visible { outline: 2px solid var(--px-accent); outline-offset: 2px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CÔTÉ DROIT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pxnav__end { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; } @media (min-width: 1024px) { .pxnav__end { margin-left: 0; gap: 5px; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LOCALE SWITCHER — autonome, indépendant du legacy CSS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pxnav__locale { display: none; } @media (min-width: 1024px) { .pxnav__locale { display: inline-flex !important; align-items: center; position: relative; } } .pxnav__locale .locale-switcher { position: relative !important; display: inline-flex !important; align-items: center !important; } .pxnav__locale .locale-trigger { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 7px 11px !important; font-size: 11.5px !important; font-weight: 700 !important; color: #527a92 !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.085) !important; border-radius: 8px !important; cursor: pointer !important; letter-spacing: 0.07em !important; transition: color 0.17s, background 0.17s, border-color 0.17s !important; white-space: nowrap !important; line-height: 1 !important; } .pxnav__locale .locale-trigger:hover { color: #a0c8e0 !important; background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14) !important; } .pxnav__locale .locale-trigger span { display: inline !important; background: none !important; color: inherit !important; padding: 0 !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; } .pxnav__locale .locale-trigger svg { width: 12px !important; height: 12px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2.2px !important; transition: transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1) !important; flex-shrink: 0 !important; } .pxnav__locale .locale-switcher.open .locale-trigger { color: #a8d2ec !important; background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(0, 208, 162, 0.20) !important; } .pxnav__locale .locale-switcher.open .locale-trigger svg { transform: rotate(180deg) !important; } /* Menu déroulant */ .pxnav__locale .locale-menu { display: none !important; position: absolute !important; top: calc(100% + 9px) !important; right: 0 !important; left: auto !important; min-width: 160px !important; background: rgba(5, 14, 28, 0.98) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border: 1px solid rgba(255, 255, 255, 0.11) !important; border-radius: 11px !important; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.62), 0 4px 14px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; padding: 6px !important; z-index: 200 !important; overflow: hidden !important; animation: pxnav-dd-in 0.16s cubic-bezier(0.22, 1, 0.36, 1) !important; } .pxnav__locale .locale-switcher.open .locale-menu { display: block !important; } @keyframes pxnav-dd-in { from { opacity: 0; transform: translateY(-5px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .pxnav__locale .locale-menu a { display: flex !important; align-items: center !important; padding: 9px 12px !important; font-size: 12px !important; font-weight: 600 !important; color: #5a7d95 !important; text-decoration: none !important; border-radius: 7px !important; letter-spacing: 0.04em !important; transition: color 0.14s, background 0.14s !important; } .pxnav__locale .locale-menu a:hover { color: #bcdff4 !important; background: rgba(255, 255, 255, 0.07) !important; } .pxnav__locale .locale-menu a.active { color: var(--px-accent) !important; background: rgba(0, 208, 162, 0.09) !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CONNEXION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pxnav__login { display: none; } @media (min-width: 1024px) { .pxnav__login { display: inline-flex !important; align-items: center; padding: 7px 14px; margin-left: 4px; font-size: 13px; font-weight: 500; color: #4e7890; text-decoration: none; border-radius: 8px; white-space: nowrap; letter-spacing: 0.01em; border-left: 1px solid rgba(255, 255, 255, 0.065); padding-left: 18px; transition: color 0.18s, background 0.18s; outline: none; } } .pxnav__login:hover { color: #b8d8ee; background: rgba(255,255,255,0.05); } .pxnav__login:focus-visible { outline: 2px solid var(--px-accent); outline-offset: 2px; border-radius: 8px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CTA "Demander une démo →" ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pxnav__cta { display: none; } @media (min-width: 1024px) { .pxnav__cta { display: inline-flex !important; align-items: center; gap: 7px; padding: 9px 19px; font-size: 13px; font-weight: 700; color: var(--px-cta-text); background: linear-gradient(135deg, #00d9ac 0%, #00b690 100%); border-radius: 9px; text-decoration: none; white-space: nowrap; letter-spacing: 0.01em; position: relative; overflow: hidden; outline: none; box-shadow: 0 2px 14px rgba(0, 200, 150, 0.30), 0 1px 4px rgba(0, 0, 0, 0.20); transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.15s cubic-bezier(0.34, 1.4, 0.64, 1); } } .pxnav__cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.26) 50%, transparent 80%); transform: translateX(-110%) skewX(-8deg); transition: transform 0.52s ease; pointer-events: none; } .pxnav__cta-arrow { display: inline-block; font-style: normal; transition: transform 0.18s cubic-bezier(0.34, 1.5, 0.64, 1); } .pxnav__cta:hover { background: linear-gradient(135deg, #00e8bc 0%, #00c89e 100%); box-shadow: 0 5px 22px rgba(0, 215, 165, 0.48), 0 1px 5px rgba(0, 0, 0, 0.24); transform: translateY(-1.5px); color: #020c18; } .pxnav__cta:hover::before { transform: translateX(110%) skewX(-8deg); } .pxnav__cta:hover .pxnav__cta-arrow { transform: translateX(3px); } .pxnav__cta:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(0, 195, 148, 0.26); } .pxnav__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HAMBURGER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pxnav__toggle { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5.5px; width: 44px; height: 44px; min-width: 44px; padding: 0 11px 0 0; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 10px; flex-shrink: 0; -webkit-tap-highlight-color: transparent; outline: none; transition: background 0.18s, border-color 0.18s; } .pxnav__toggle:hover { background: rgba(255, 255, 255, 0.062); border-color: rgba(255, 255, 255, 0.095); } .pxnav__toggle:focus-visible { outline: 2px solid rgba(0, 212, 168, 0.50); outline-offset: 1px; } /* .active = appliqué par v95-bundle + aria-expanded=true en backup */ .pxnav__toggle.active, .pxnav__toggle[aria-expanded="true"] { background: rgba(0, 208, 162, 0.08); border-color: rgba(0, 208, 162, 0.20); } .pxnav__toggle-bar { display: block; height: 1.75px; background: #8ab0c8; border-radius: 2px; transform-origin: center; transition: transform 0.30s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.20s ease, width 0.22s ease, background 0.20s ease; } .pxnav__toggle-bar:nth-child(1) { width: 20px; } .pxnav__toggle-bar:nth-child(2) { width: 13px; } .pxnav__toggle-bar:nth-child(3) { width: 20px; } .pxnav__toggle.active .pxnav__toggle-bar, .pxnav__toggle[aria-expanded="true"] .pxnav__toggle-bar { background: var(--px-accent); } .pxnav__toggle.active .pxnav__toggle-bar:nth-child(1), .pxnav__toggle[aria-expanded="true"] .pxnav__toggle-bar:nth-child(1) { width: 20px; transform: translateY(7.25px) rotate(45deg); transform-origin: right; } .pxnav__toggle.active .pxnav__toggle-bar:nth-child(2), .pxnav__toggle[aria-expanded="true"] .pxnav__toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .pxnav__toggle.active .pxnav__toggle-bar:nth-child(3), .pxnav__toggle[aria-expanded="true"] .pxnav__toggle-bar:nth-child(3) { width: 20px; transform: translateY(-7.25px) rotate(-45deg); transform-origin: right; } @media (min-width: 1024px) { .pxnav__toggle { display: none !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TIROIR MOBILE Classe "open" ajoutée par v95-bundle sur [data-mobile-nav] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .pxnav__drawer { position: fixed; top: var(--pxnav-height, 62px); left: 0; right: 0; z-index: 999; background: rgba(3, 9, 20, 0.98); backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); border-bottom: 1px solid rgba(255, 255, 255, 0.065); max-height: calc(100dvh - var(--pxnav-height, 62px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* Fermé par défaut */ visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: visibility 0s linear 0.26s, opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.26s cubic-bezier(0.22, 1.2, 0.5, 1); } /* .open est la classe réelle appliquée par v95-bundle */ .pxnav__drawer.open { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition: visibility 0s linear 0s, opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.26s cubic-bezier(0.22, 1.2, 0.5, 1); } @media (min-width: 1024px) { .pxnav__drawer { display: none !important; } } .pxnav__drawer-inner { padding: 6px 0 40px; } .pxnav__drawer-link { display: flex; align-items: center; justify-content: space-between; padding: 15px 28px; font-size: 15.5px; font-weight: 500; color: #708fa6; text-decoration: none; border-left: 2.5px solid transparent; letter-spacing: 0.01em; min-height: 54px; transition: color 0.17s, background 0.17s, border-color 0.17s; } .pxnav__drawer-link-arrow { display: inline-block; font-size: 14px; color: rgba(255, 255, 255, 0.14); opacity: 0; transform: translateX(-5px); transition: opacity 0.18s, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1); } .pxnav__drawer-link:hover { color: #ddf4ff; background: rgba(255, 255, 255, 0.04); border-left-color: rgba(0, 208, 162, 0.32); } .pxnav__drawer-link:hover .pxnav__drawer-link-arrow { opacity: 1; transform: translateX(0); color: rgba(0, 208, 162, 0.55); } .pxnav__drawer-link--active, .pxnav__drawer-link[aria-current="page"] { color: #eaf6ff; font-weight: 600; border-left-color: var(--px-accent); background: rgba(0, 208, 162, 0.05); } .pxnav__drawer-link--active .pxnav__drawer-link-arrow, .pxnav__drawer-link[aria-current="page"] .pxnav__drawer-link-arrow { opacity: 1; transform: translateX(0); color: var(--px-accent); } .pxnav__drawer-sep { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.065) 20%, rgba(255,255,255,0.065) 80%, transparent); margin: 8px 0; } .pxnav__drawer-lang { padding: 14px 28px 16px; } .pxnav__drawer-lang-label { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #1e3f58; margin-bottom: 12px; } .pxnav__drawer-lang-list { display: flex; flex-wrap: wrap; gap: 7px; } .pxnav__drawer-lang-link { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 7px; font-size: 11px; font-weight: 700; color: #36627e; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.065); text-decoration: none; letter-spacing: 0.07em; min-height: 36px; transition: color 0.16s, background 0.16s, border-color 0.16s; } .pxnav__drawer-lang-link:hover { color: #a8d0ec; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); } .pxnav__drawer-lang-link--active { color: var(--px-accent); background: rgba(0, 208, 162, 0.09); border-color: rgba(0, 208, 162, 0.26); } .pxnav__drawer-auth { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 14px 20px 4px; } .pxnav__drawer-auth-login { display: flex; align-items: center; justify-content: center; padding: 14px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #4a7088; text-decoration: none; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.085); text-align: center; min-height: 52px; transition: color 0.17s, background 0.17s; } .pxnav__drawer-auth-login:hover { color: #b0d6ec; background: rgba(255,255,255,0.08); } .pxnav__drawer-auth-cta { display: flex; align-items: center; justify-content: center; padding: 14px 16px; border-radius: 10px; font-size: 14px; font-weight: 700; color: #030e1e; background: linear-gradient(135deg, #00d9ac 0%, #00b690 100%); text-decoration: none; box-shadow: 0 2px 14px rgba(0, 195, 148, 0.30); text-align: center; min-height: 52px; position: relative; overflow: hidden; transition: background 0.2s, box-shadow 0.2s, transform 0.14s; } .pxnav__drawer-auth-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.20) 50%, transparent 80%); transform: translateX(-110%); transition: transform 0.5s ease; } .pxnav__drawer-auth-cta:hover { background: linear-gradient(135deg, #00e8bc 0%, #00c89e 100%); box-shadow: 0 4px 20px rgba(0, 212, 165, 0.44); transform: translateY(-1px); } .pxnav__drawer-auth-cta:hover::before { transform: translateX(110%); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SCROLL LOCK + OVERFLOW body.menu-open appliqué par v95-bundle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ body.menu-open { overflow: hidden; } html, body { overflow-x: hidden; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ REDUCED MOTION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (prefers-reduced-motion: reduce) { .pxnav, .pxnav__brand, .pxnav__link, .pxnav__link::after, .pxnav__toggle-bar, .pxnav__drawer, .pxnav__cta, .pxnav__cta::before, .pxnav__cta-arrow, .pxnav__drawer-link, .pxnav__drawer-link-arrow, .pxnav__locale .locale-trigger svg, .pxnav__locale .locale-menu { transition: none !important; animation: none !important; } }