/* ═══ NexLab — socle commun aux pages secondaires (jetons, typo Syne/Inter, nav, boutons). Extrait de site.css. ═══ */
:root{
  --bg: #07090c; --bg-2: #0c1016; --bg-3: #121821;
  --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18);
  --text: #f4f6fa; --muted: #98a2b3; --muted-2: #6b7482;
  --accent: #4f8dfd; --accent-2: #22d3ee; --on-accent: #06080c;
  --grad: linear-gradient(135deg, #4f8dfd, #22d3ee);
  --glow: 0 24px 70px rgba(79,141,253,.20);
  --r-sm: 12px; --r: 20px; --r-lg: 28px;
  --display: 'Inter Tight', 'Inter', 'Manrope', system-ui, sans-serif;
  --body: 'Inter', 'Manrope', system-ui, sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --wrap: 1240px;
}
html{ scroll-behavior: smooth; }
body{
  font-family: var(--body) !important; font-size: 16px; line-height: 1.55; color: var(--text); background: var(--bg) !important;
  background-image: radial-gradient(1000px 700px at 12% -10%, rgba(79,141,253,.16), transparent 60%), radial-gradient(800px 600px at 105% 15%, rgba(34,211,238,.09), transparent 60%) !important;
  background-attachment: fixed !important;
}
h1, h2, h3, h4, .brand-word, .section-kicker, .marquee-item, .figure, .met-num, .hero-preuves b{ font-family: var(--display) !important; }
h1, h2{ letter-spacing: -.035em !important; text-transform: none !important; font-weight: 800 !important; }
h3{ letter-spacing: -.01em !important; text-transform: none !important; font-weight: 700 !important; }


/* ── Navigation ───────────────────────────────────────────────── */
.topnav{ position: sticky; top: 0; z-index: 40; padding: 14px 32px !important; background: rgba(7,9,12,.55) !important; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--line); }
.brand-word{ font-weight: 800 !important; letter-spacing: .06em !important; }
.navlink{ font-family: var(--body) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--muted) !important; position: relative; padding: 6px 2px; }
.navlink:hover{ color: var(--text) !important; }
.navlink::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.navlink:hover::after{ transform: scaleX(1); }

/* ── Boutons ──────────────────────────────────────────────────── */
.btn-primary, .navcta, .estim-cta, .contact-form .btn-primary{
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 26px !important;
  border-radius: 999px !important; background: var(--accent) !important; color: var(--on-accent) !important;
  font-family: var(--body) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  border: 0 !important; box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 10px 30px rgba(79,141,253,.28) !important;
  position: relative; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease) !important; cursor: pointer;
}
.btn-primary:hover, .navcta:hover, .estim-cta:hover{ transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 16px 40px rgba(79,141,253,.4) !important; }
.btn-primary::before, .navcta::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); transform: translateX(-130%); transition: transform .8s var(--ease); }
.btn-primary:hover::before, .navcta:hover::before{ transform: translateX(130%); }
.btn-ghost{
  display: inline-flex !important; align-items: center; justify-content: center; height: 48px; padding: 0 26px !important; border-radius: 999px !important;
  background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line-2) !important; backdrop-filter: blur(10px);
  font-family: var(--body) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  transition: background .3s, border-color .3s, transform .35s var(--ease) !important;
}
.btn-ghost:hover{ background: var(--surface-2) !important; border-color: rgba(79,141,253,.6) !important; transform: translateY(-2px); }


/* ── Bandeau cookies, cmdk ────────────────────────────────────── */
.cookie-banner{ border-radius: var(--r) !important; border: 1px solid var(--line) !important; background: rgba(12,16,22,.85) !important; backdrop-filter: blur(16px); }
.cookie-btn{ border-radius: 999px !important; font-family: var(--body) !important; }
.cmdk-box{ border-radius: var(--r) !important; border: 1px solid var(--line) !important; background: rgba(12,16,22,.92) !important; backdrop-filter: blur(20px); }


/* ── Menu mobile ──────────────────────────────────────────────── */
.mobile-menu{ background: rgba(7,9,12,.96) !important; backdrop-filter: blur(20px); }
.mobile-menu-link{ font-family: var(--display) !important; font-size: 30px !important; font-weight: 700 !important; letter-spacing: -.01em !important; text-transform: none !important; }
.mobile-menu-cta{ border-radius: 999px !important; background: var(--accent) !important; color: var(--on-accent) !important; font-family: var(--body) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }

/* Titres des pages secondaires : Syne est large, on resserre les tailles pensées pour Bebas. */
h1{ font-size: clamp(34px, 4.4vw, 60px) !important; line-height: 1.02 !important; letter-spacing: -.02em !important; }
h2{ font-size: clamp(26px, 3vw, 40px) !important; line-height: 1.06 !important; }
h3{ font-size: clamp(18px, 1.6vw, 22px) !important; line-height: 1.2 !important; }

/* ── Rideau de transition entre pages (nx-page.js) ─────────────── */
@view-transition{ navigation: none; }
html.nx-arrive::before{ content: ""; position: fixed; inset: 0; z-index: 11999; background: var(--bg); }
.nx-rideau{ position: fixed; inset: 0; z-index: 12000; pointer-events: none; background: var(--bg); display: grid; place-items: center; transform: translateY(101%); }
.nx-rideau::after{ content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 40px; background: linear-gradient(180deg, transparent, var(--bg)); }
.nx-rideau-mot{ font-family: var(--display); font-size: clamp(28px, 4vw, 48px); font-weight: 900; letter-spacing: .12em; color: var(--text); opacity: 0; }
.nx-rideau.is-ferme{ pointer-events: auto; animation: nxRideauFerme .46s cubic-bezier(.76,0,.24,1) forwards; }
.nx-rideau.is-ferme .nx-rideau-mot{ animation: nxRideauMot .4s ease .12s forwards; }
.nx-rideau.is-ouvre{ animation: nxRideauOuvre .6s cubic-bezier(.76,0,.24,1) .06s forwards; transform: translateY(0); }
.nx-rideau.is-ouvre .nx-rideau-mot{ opacity: 1; animation: nxRideauMotOut .25s ease forwards; }
@keyframes nxRideauFerme{ from{ transform: translateY(101%); } to{ transform: translateY(0); } }
@keyframes nxRideauOuvre{ from{ transform: translateY(0); } to{ transform: translateY(-101%); } }
@keyframes nxRideauMot{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }
@keyframes nxRideauMotOut{ to{ opacity: 0; } }