/* NexEuro shared enhancements
   - Responsive hamburger / mobile menu (works on phones AND tablets)
   - Smooth animated mobile menu with stagger + body scroll lock
   - Showcase sections for marketing photos
   - SPA-style cross-page transitions (logo never reloads)
*/

/* ---------- Hamburger menu: show on tablets + phones ---------- */
@media (max-width: 900px) {
  .nlinks { display: none !important; }
  .nlogin { display: none !important; }
  .burger { display: flex !important; }
  /* Keep the download CTA visible but smaller on mid screens, hide on very small */
  .nright .ndl { padding: 9px 16px; font-size: 13px; }
}
/* Keep the Télécharger CTA visible on phones (it also lives in the drawer);
   it is sized below to fit down to ~320px instead of being hidden. */

/* Animated burger -> X */
.burger { z-index: 1001; position: relative; }
.burger span { transition: transform .35s cubic-bezier(.6,.05,.35,1), opacity .25s; transform-origin: center; }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu: smooth open, stagger links */
.mmenu {
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  display: flex !important;        /* always flex; visibility via opacity */
  padding: 80px 6vw 40px !important;
  gap: 4px !important;
}
.mmenu.open { opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }

.mmenu a {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), background .2s;
  width: min(420px, 92vw);
  text-align: center;
  font-size: clamp(24px, 6vw, 32px) !important;
}
.mmenu.open a { opacity: 1; transform: none; }
.mmenu.open a:nth-child(2) { transition-delay: .05s; }
.mmenu.open a:nth-child(3) { transition-delay: .1s; }
.mmenu.open a:nth-child(4) { transition-delay: .15s; }
.mmenu.open a:nth-child(5) { transition-delay: .2s; }
.mmenu.open a:nth-child(6) { transition-delay: .25s; }
.mmenu.open a:nth-child(7) { transition-delay: .3s; }

.mclose { z-index: 1002; }

/* ---------- Photo showcase sections ---------- */
.nex-showcase {
  padding: clamp(72px, 9vw, 120px) 5%;
  background: linear-gradient(180deg, #fff 0%, #F5F7FB 100%);
}
.nex-showcase-in { max-width: 1180px; margin: 0 auto; }
.nex-showcase-head { max-width: 690px; margin: 0 0 clamp(28px, 4vw, 44px); }
.nex-showcase-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.nex-showcase-head .htag { color: #1769C4; }
.nex-showcase-head .lead { margin-top: 14px; }

.nex-usecase {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(24px, 4vw, 52px);
}
.nex-usecase.reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.nex-usecase.reverse .nex-copy { order: 2; }
.nex-copy h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(30px, 3.6vw, 54px);
  font-weight: 900;
  color: #0B2545;
  line-height: 1.02;
  margin-bottom: 16px;
}
.nex-copy p { color: #4A5C72; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.7; max-width: 520px; }
.nex-points { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.nex-point { background: #EBF4FF; color: #1769C4; font-weight: 800; font-size: 12px; padding: 7px 13px; border-radius: 999px; }
.nex-point.green { background: #E6FBF4; color: #00A66F; }
.nex-point.gold { background: #FFF4D6; color: #A87419; }

.nex-photo {
  position: relative;
  min-height: clamp(320px, 44vw, 520px);
  overflow: hidden;
  border-radius: 8px;
  background: #0B2545;
  box-shadow: 0 26px 70px -34px rgba(11,37,69,.55);
  isolation: isolate;
}
.nex-photo::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255,255,255,.22);
  z-index: 2;
  pointer-events: none;
  border-radius: 4px;
}
.nex-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center center; position: absolute; inset: 0; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .4s; }
.nex-photo:hover img { transform: scale(1.035); filter: saturate(1.06); }
.nex-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,37,69,0) 65%, rgba(11,37,69,.45)); z-index: 1; pointer-events: none; }
.nex-badge {
  position: absolute;
  left: clamp(18px, 3vw, 32px);
  bottom: clamp(18px, 3vw, 32px);
  z-index: 3;
  background: rgba(255,255,255,.94);
  color: #0B2545;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.nex-badge strong { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; line-height: 1; }
.nex-badge span { display: block; font-size: 12px; color: #4A5C72; margin-top: 4px; font-weight: 700; }

.nex-feature-strip {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  min-height: clamp(460px, 52vw, 640px);
  background: #0B2545;
  color: #fff;
  overflow: hidden;
}
.nex-feature-strip .nex-photo { min-height: 100%; border-radius: 0; box-shadow: none; }
.nex-feature-strip .nex-photo::before { inset: 22px; }
.nex-feature-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 6vw, 86px); }
.nex-feature-copy .htag { color: rgba(255,255,255,.52); }
.nex-feature-copy h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(38px, 5vw, 72px); line-height: .98; font-weight: 900; margin-bottom: 18px; }
.nex-feature-copy p { color: rgba(255,255,255,.68); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; max-width: 520px; }
.nex-feature-copy .nex-points { margin-top: 26px; }

/* Download/mobile image band */
.nex-hero-photo { padding: clamp(72px, 8vw, 108px) 5%; background: #fff; }
.nex-hero-photo-frame {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: stretch;
  min-height: clamp(420px, 50vw, 610px);
  overflow: hidden;
  border-radius: 8px;
  background: #0B2545;
  box-shadow: 0 30px 80px -40px rgba(11,37,69,.55);
}
.nex-hero-photo-copy { padding: clamp(32px, 5vw, 70px); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.nex-hero-photo-copy h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(34px, 4.4vw, 64px); line-height: 1; font-weight: 900; margin-bottom: 18px; }
.nex-hero-photo-copy p { color: rgba(255,255,255,.68); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.7; }
.nex-hero-photo-media { position: relative; min-height: 360px; overflow: hidden; }
.nex-hero-photo-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s cubic-bezier(.2,.7,.2,1); }
.nex-hero-photo-frame:hover img { transform: scale(1.03); }

@media (max-width: 900px) {
  .nex-usecase,
  .nex-usecase.reverse,
  .nex-feature-strip,
  .nex-hero-photo-frame { grid-template-columns: 1fr; min-height: 0; }
  .nex-usecase.reverse .nex-copy { order: 0; }
  .nex-feature-copy { order: -1; padding: clamp(28px, 7vw, 48px) 5%; }
  .nex-photo,
  .nex-feature-strip .nex-photo { min-height: min(96vw, 460px); border-radius: 0; }
  .nex-hero-photo { padding: 32px 0; }
  .nex-hero-photo-frame { border-radius: 0; }
  .nex-hero-photo-copy { padding: 32px 5%; }
  .nex-hero-photo-media { min-height: min(92vw, 440px); }
}

/* Footer bottom links: prevent dark-mode per-page card override from making them overflow */
.ft-bot { flex-wrap: wrap; gap: 12px 20px; }
.ft-bot p,
.ft-bot-links a {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.ft-bot-links { flex-wrap: wrap; gap: 10px 18px; }

/* Prevent accidental horizontal overflow on small screens */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .nex-feature-strip, .nex-hero-photo-frame, .nex-usecase { max-width: 100%; }
}

/* Reveal on scroll */
.nex-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.nex-reveal.in { opacity: 1; transform: none; }

/* ---------- Accessibility: honor prefers-reduced-motion (site-wide) ---------- */
@media (prefers-reduced-motion: reduce) {
  .nex-reveal, .sr { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nex-photo img, .nex-hero-photo-media img { transition: none !important; }
  .spa-fade main { animation: none !important; }
  .tick-track { animation: none !important; }
}

/* ---------- SPA transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  .spa-fade main { animation: spaFadeIn .35s ease both; }
}
@keyframes spaFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Loading bar at top during SPA navigation */
.spa-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #1769C4, #00B87A);
  z-index: 9999; transition: width .25s ease, opacity .3s;
  box-shadow: 0 0 12px rgba(23,105,196,.5);
}

/* NOTE: the runtime nav (sizing, mobile bar, drawer) is fully controlled by
   GLASS_CSS injected by nexeuro-enhance.js, which is appended to <head> after
   this stylesheet and therefore wins. Nav layout fixes must go there, not here. */

/* ---------- Mobile polish (consistent across every page) ---------- */
@media (max-width: 640px) {
  /* Tables: scroll horizontally instead of overflowing the page (legal, dashboard) */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Sub-page heroes ship with padding-top:140px (lots of empty space on phones).
     Trim it — content still clears the floating pill (~56px). */
  .about-hero, .feat-hero, .how-hero, .dev-hero, .dl-hero,
  .legal-hero, .compare-hero, .blog-hero, .faq-hero { padding-top: 92px !important; }
}

/* ============================================================
   Design system — unified tokens (radii, elevation, accent)
   Single source loaded AFTER each page's inline <style>, so
   these component rules win the cascade without !important
   (dark-mode only overrides colours, not radii/shadows).
   Special cases are intentionally NOT targeted: phone mockup
   (.ph/.ph-card), decorative rings, round avatars, tiny pills,
   and the bespoke dashboard UI.
   ============================================================ */
:root {
  --r-pill: 999px;   /* buttons & fully-rounded chips */
  --r-card: 14px;    /* cards & small panels (dominant existing value) */
  --r-panel: 24px;   /* large panels / rounded sections */
  --sh-1: 0 6px 20px rgba(11, 37, 69, .07);   /* resting elevation */
  --sh-2: 0 18px 42px rgba(11, 37, 69, .14);  /* raised / floating elevation */
  --acc: #1769C4;    /* single accent — CTAs, links, highlights */
  --acc-2: #4A9EFF;  /* lighter accent — focus ring, gradients */
}

/* One pill radius for the shared marketing buttons */
.bp, .bs, .btn-w, .btn-ow, .btn-dev, .btn-dev-o { border-radius: var(--r-pill); }

/* One card radius */
.wv-card, .uc { border-radius: var(--r-card); }

/* One large-panel radius (collapses the 22/24/28/32px spread) */
.why-visual, .nums-g, .plan, .tm, .val, .doc-card, .about-card { border-radius: var(--r-panel); }

/* Two elevation levels + one hover language on the shared marketing card */
.wv-card { box-shadow: var(--sh-1); transition: transform .2s, box-shadow .2s; }
.wv-card:hover { box-shadow: var(--sh-2); transform: translateY(-4px); }

/* Single accent: retire the competing gold from shared chips.
   Green stays reserved for confirmations / positive amounts; gold
   survives only as a status colour (e.g. the "pending" ACPR dot). */
.nex-point.gold { background: var(--sky, #EBF4FF); color: var(--acc); }

/* ---------- Keyboard focus ring (accessibility, all static pages) ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--bs, #4A9EFF);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Eyebrow label: plain text everywhere (no pill) ----------
   Some pages add a pill background to .htag in dark mode — neutralise it
   so the eyebrow stays plain coloured text, consistent with the homepage. */
@media (prefers-color-scheme: dark) {
  .htag { background: none !important; padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---------- Trim sub-page hero top padding ----------
   With the old main{padding-top} gap removed, the heroes' 140px top is now
   excessive; bring the title up while still clearing the floating nav. */
.about-hero, .feat-hero, .how-hero, .dev-hero, .dl-hero { padding-top: 104px; }

/* =========================================================
   v22 — Crop + whitespace global fixes
   ========================================================= */

/* Picture wrapper used by the runtime image upgrader — must not introduce a box */
.nex-photo picture,
.nex-hero-photo-media picture,
.nex-feature-strip .nex-photo picture { display: contents; }

/* Better default focal point for portrait/lifestyle photos */
.nex-photo img,
.nex-hero-photo-media img,
.nex-feature-strip .nex-photo img { object-position: 50% 32% !important; }

/* ---------- Unified image utility (.nex-img)
   aspect-ratio + focal point + object-fit, single source of truth.
   Usage: <div class="nex-img" style="--nex-ar:16/9; --nex-focal:50% 32%"><img src=...></div>
*/
.nex-img {
  position: relative;
  width: 100%;
  aspect-ratio: var(--nex-ar, 16 / 10);
  overflow: hidden;
  border-radius: var(--r-card, 14px);
  background: #0B2545;
}
.nex-img > img,
.nex-img > picture > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--nex-focal, 50% 35%);
  display: block;
}
.nex-img > picture { display: contents; }


/* Slightly tighter photo blocks on small screens (avoid letterboxing) */
@media (max-width: 640px) {
  .nex-photo, .nex-feature-strip .nex-photo { min-height: min(78vw, 360px) !important; }
  .nex-hero-photo-media { min-height: min(72vw, 320px) !important; }
  .nex-hero-photo { padding: 24px 0 !important; }
  .nex-feature-strip { grid-template-columns: 1fr !important; }
}

/* Trim oversized hero whitespace on legacy pages (esp. mobile) */
.feat-hero, .about-hero, .how-hero, .dev-hero, .dl-hero, .legal-hero,
.compare-hero, .blog-hero, .faq-hero { min-height: 0 !important; }
@media (max-width: 900px) {
  .feat-hero, .about-hero, .how-hero, .dev-hero, .dl-hero, .legal-hero,
  .compare-hero, .blog-hero, .faq-hero {
    padding-top: 96px !important;
    padding-bottom: 40px !important;
    min-height: 0 !important;
  }
  .feat-hero .h1, .about-hero .h1, .how-hero .h1, .dev-hero .h1, .dl-hero .h1 {
    font-size: clamp(36px, 9vw, 56px) !important;
    line-height: 1.05 !important;
  }
}
@media (min-width: 901px) {
  .feat-hero, .about-hero, .how-hero, .dev-hero, .dl-hero {
    min-height: 0 !important;
    padding-top: 120px !important;
    padding-bottom: 64px !important;
  }
}

/* Mobile page — keep background photo subtle so content reads */
@media (max-width: 860px) {
  .mobile-scene { opacity: .18 !important; }
  .mobile-scene img { object-position: 50% 30% !important; }
}

/* Reduce vertical gap between consecutive sections on small screens */
@media (max-width: 640px) {
  section + section { padding-top: clamp(40px, 8vw, 64px) !important; }
}