/* ============================================================
   Veille, site-wide navigation & page transitions
   Injected on every page. Self-contained tokens (sn- prefix)
   so it works on pages that don't load shared.css.
   ============================================================ */

:root {
  --sn-accent: #0E3D2E;
  --sn-accent-2: #155E47;
  --sn-accent-3: #E4EEEA;
  --sn-accent-soft: #F1F6F3;
  --sn-bg: #FAFAF9;
  --sn-surface: #FFFFFF;
  --sn-ink: #0A0A0A;
  --sn-ink-2: #262626;
  --sn-muted: #525252;
  --sn-mute-2: #737373;
  --sn-mute-3: #6E6E6E;
  --sn-line: #E5E5E5;
  --sn-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Gouttiere unique du bandeau. Le header est PLEINE LARGEUR : le logo est
     colle au bord gauche du viewport et le bloc de droite au bord droit, a
     toutes les tailles d'ecran. Ne jamais remettre de max-width sur
     .sn-nav-in, sinon le logo se recentre et se rapproche du menu. */
  --sn-nav-gutter: 24px;
  --sn-nav-h: 64px;
}

/* ============ PREMIUM INTERACTIVE HOVERS & TRANSITIONS ============ */
.btn, .btn-primary, .btn-secondary, .sn-cta, .pr-btn {
  position: relative;
  overflow: hidden;
  transition: background 0.28s var(--sn-ease),
              color 0.28s var(--sn-ease),
              border-color 0.28s var(--sn-ease),
              box-shadow 0.28s var(--sn-ease),
              transform 0.2s var(--sn-ease) !important;
}

.btn:hover, .btn-primary:hover, .sn-cta:hover, .pr-btn:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 6px 20px rgba(14, 61, 46, 0.15) !important;
}

.btn-secondary:hover {
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.05) !important;
}

.btn:active, .btn-primary:active, .btn-secondary:active, .sn-cta:active, .pr-btn:active {
  transform: translateY(0.5px) scale(0.985) !important;
  box-shadow: 0 2px 4px rgba(10, 10, 10, 0.08) !important;
}

/* Premium Light Shimmer/Sweep Animation on primary hover */
.btn-primary::after, .sn-cta::after, .pr-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -150%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  transition: 0.8s;
  pointer-events: none;
}

.btn-primary:hover::after, .sn-cta:hover::after, .pr-btn:hover::after {
  left: 150%;
  transition: 0.8s;
}

/* Glassmorphic Navigation Header Overrides */
.nav, .sn-nav {
  background: rgba(250, 250, 249, 0.72) !important;
  backdrop-filter: saturate(190%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(190%) blur(16px) !important;
  border-bottom: 1px solid rgba(229, 229, 229, 0.6) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.005);
}

/* Feature Card Premium Hover Elevate */
.feature-card {
  position: relative;
  transition: background 0.3s var(--sn-ease),
              transform 0.3s var(--sn-ease),
              box-shadow 0.3s var(--sn-ease) !important;
}

.feature-card:hover {
  background: var(--surface) !important;
  transform: scale(1.02);
  box-shadow: 0 12px 36px rgba(14, 61, 46, 0.06) !important;
  z-index: 2; /* Elevate card above its grid neighbors */
}

/* Smooth Arrow Hover Shift */
.btn .arrow, .sn-cta .arrow {
  display: inline-block;
  transition: transform 0.25s var(--sn-ease);
}
.btn:hover .arrow, .sn-cta:hover .arrow {
  transform: translateX(4px);
}


/* ============ PAGE TRANSITIONS ============ */

/* A clean fade-in on every page load, applied site-wide so every navigation
   feels identical, on the very first page and on every page after it. This
   works everywhere, including file://, the browser's native cross-document
   view transitions only run over http, so we do not rely on them. The html
   background keeps the brief inter-page blank on-brand instead of flashing
   white. */
html { background: var(--sn-bg); }

/* Responsive data tables: on phones/small tablets, let wide tables scroll
   horizontally within their own box (swipe) instead of overflowing the page.
   Harmless when the table already fits. */
@media (max-width: 768px) {
  .data-table, .pr-table, .sp-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mobile horizontal-overflow fix, WITHOUT clipping the root. Clipping html/body with
   overflow-x:clip stops decorative bleed but breaks iOS pinch-zoom panning: you zoom
   in, try to pan, and hit white because the root clip cuts the content off. Instead
   we clip each TOP-LEVEL block. Oversized decorative glows no longer inflate the
   document width, so the page is exactly viewport-wide (no side-swipe, no zoom-out
   gaps) AND pinch-zoom still pans across the full content, like a normal site.
   overflow-x:clip leaves overflow-y visible, so dropdowns opening downward are fine.
   Desktop (>900px) keeps the intended glow bleed. */
@media (max-width: 900px) {
  body > * { overflow-x: clip; }
  /* The video hero only clips itself on desktop (.hero--video overflow:hidden),
     so on mobile a decorative bleed leaks ~33px of horizontal scroll. Force-clip
     it here (higher specificity than .hero--video) to keep the page screen-wide. */
  body > .hero, body > .hero--video { overflow-x: clip !important; }
}

@keyframes snPageFade { from { opacity: 0; } to { opacity: 1; } }
body { animation: snPageFade 0.34s var(--sn-ease) both; }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

/* Accent sweep, a 2px forest-green line draws across the top
   on every page load, then fades. Brand signature. */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--sn-accent);
  transform-origin: left;
  z-index: 9999;
  pointer-events: none;
  animation: snSweep 1.1s var(--sn-ease) 0.08s both;
}
@keyframes snSweep {
  0%   { transform: scaleX(0);   opacity: 0.9; }
  65%  { transform: scaleX(1);   opacity: 0.9; }
  100% { transform: scaleX(1);   opacity: 0; }
}

/* ============ SCROLL REVEAL ============
   Content blocks fade + slide up as they enter the viewport,
   on every page, same feel as home.html. site.js tags the
   blocks ([data-sn]) and adds .sn-anim to <html>; without JS
   (or reduced motion) everything stays fully visible. */
html.sn-anim [data-sn] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s var(--sn-ease);
  will-change: opacity, transform;
}
html.sn-anim [data-sn].sn-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.sn-anim [data-sn] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============ FULL MARKETING NAV (injected on subpages) ============
   Mirrors home.html's header so every marketing page shares
   the same navigation. The page's own .cover-nav row is hidden
   (html.sn-nav-on) because the nav replaces it. ============ */

.sn-nav {
  position: sticky;
  top: 0;
  z-index: 210;
  background: rgba(250, 250, 249, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  /* Bordure basse revelee au defilement (comportement autrefois propre a la
     home, desormais universel puisque la nav est partagee). */
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.sn-nav.scrolled { border-bottom-color: var(--sn-line); }
.sn-nav-in {
  /* PLEINE LARGEUR, pas de conteneur centre. Le logo se cale sur le bord
     gauche du viewport, le bloc de droite sur le bord droit, sur ordinateur,
     tablette et tres grand ecran. */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 var(--sn-nav-gutter);
  height: var(--sn-nav-h);
  display: grid;
  /* 1fr auto 1fr : les liens sont centres sur le BANDEAU, et non sur la colonne
     du milieu. Avec "auto 1fr auto", la largeur du bloc de droite les decalait
     visuellement vers la droite. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.sn-brand {
  display: inline-flex;
  align-items: baseline;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.020em;
  color: var(--sn-ink);
  line-height: 1;
  text-decoration: none;
  justify-self: start;
  /* Compensation optique du jambage du "v" uniquement, pas un decalage de
     mise en page : le calage vient de la gouttiere du conteneur. */
  margin-left: -2px;
}
.sn-brand-v {
  height: 34px;
  width: 21px;
  flex-shrink: 0;
  color: var(--sn-accent);
  margin-right: -2px;
  transform: translateY(3px);
  transition: color 0.25s ease;
}
.sn-brand:hover .sn-brand-v { color: var(--sn-ink); }
.sn-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  font-size: 15.5px;
}
.sn-nav-links a {
  color: var(--sn-ink-2);
  text-decoration: none;
  transition: color 0.15s ease;
}
.sn-nav-links a:hover { color: var(--sn-ink); }
.sn-nav-links a.sn-nav-active {
  color: var(--sn-accent);
  font-weight: 500;
}
.sn-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  justify-self: end;
}
.sn-bulletin {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--sn-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.sn-bulletin:hover {
  text-decoration: underline;
}
.sn-bulletin .sn-pip { display: none; }
@keyframes snPulse {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}
.sn-cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  background: var(--sn-ink);
  color: var(--sn-bg);
  text-decoration: none;
  transition: background 0.18s ease;
  white-space: nowrap;
}
.sn-cta:hover { background: var(--sn-ink-2); }
.sn-lang {
  display: inline-flex;
  align-items: center;
  /* Dans le flux du bloc de droite : c'est la grille pleine largeur qui cale
     le cluster sur le bord droit, en miroir exact du logo a gauche. */
  position: static;
  border: 1px solid var(--sn-line);
  border-radius: 6px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sn-muted);
  background: var(--sn-bg);
}
.sn-lang button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 7px 11px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.sn-lang button:hover { color: var(--sn-ink); }
.sn-lang button.active { background: var(--sn-ink); color: var(--sn-bg); }

/* Plus aucune reservation d'espace n'est necessaire : le bandeau est pleine
   largeur et le bloc de droite est dans le flux, il ne peut plus passer sous
   un element epingle en absolu. */

/* Nav present → breadcrumb bar docks below it, redundant
   in-page cover-nav row disappears. */
html.sn-nav-on .sn-bar { top: var(--sn-nav-h); }
html.sn-nav-on .cover-nav { display: none; }

.nav-right {
  position: relative;
}
.nav-right .sn-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 220;
}
.home-menu-btn {
  display: none !important;
}

@media (max-width: 980px) {
  .sn-nav-links { display: none; }
}
@media (max-width: 700px) {
  .sn-bulletin { display: none; }
}
@media (max-width: 680px) {
  .home-menu-btn {
    display: inline-flex !important;
    margin-left: 12px;
  }
  .nav-right .sn-panel {
    position: fixed;
    top: var(--sn-nav-h);
    left: 16px;
    right: 16px;
    width: auto;
  }
}


/* ============ BREADCRUMB BAR ============ */

.sn-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(250, 250, 249, 0.88);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--sn-line);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.sn-bar-in {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Breadcrumb trail */
.sn-crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  min-width: 0;
  white-space: nowrap;
}
.sn-crumbs a {
  color: var(--sn-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.sn-crumbs a:hover { color: var(--sn-ink); }
.sn-sep {
  color: var(--sn-mute-3);
  font-size: 12px;
  user-select: none;
}
.sn-section {
  color: var(--sn-mute-2);
  font-weight: 400;
}
/* Current page, plain text (no pill, no dot) */
.sn-current {
  display: inline-flex;
  align-items: center;
  color: var(--sn-accent);
  font-weight: 600;
  font-size: 12px;
}

/* Right side */
.sn-right {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  flex-shrink: 0;
}
.sn-home-link {
  font-size: 12.5px;
  color: var(--sn-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.sn-home-link:hover { color: var(--sn-ink); }
.sn-menu-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sn-ink-2);
  background: var(--sn-surface);
  border: 1px solid var(--sn-line);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.sn-menu-btn:hover {
  border-color: var(--sn-accent);
  color: var(--sn-accent);
  background: var(--sn-accent-soft);
}
.sn-menu-btn .sn-chev {
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s var(--sn-ease);
}
.sn-menu-btn[aria-expanded="true"] .sn-chev {
  transform: rotate(225deg) translateY(-1px);
}

/* Dropdown panel, all pages, grouped by section */
.sn-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(720px, calc(100vw - 32px));
  background: var(--sn-surface);
  border: 1px solid var(--sn-line);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 40px rgba(0, 0, 0, 0.10),
    0 4px 16px rgba(14, 61, 46, 0.06);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 20px 24px;
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  pointer-events: none;
  transition: opacity 0.22s var(--sn-ease), transform 0.22s var(--sn-ease);
}
.sn-panel.sn-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.sn-panel h4 {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sn-mute-2);
}
.sn-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.sn-panel a {
  font-size: 13px;
  color: var(--sn-ink-2);
  text-decoration: none;
  transition: color 0.13s ease;
}
.sn-panel a:hover { color: var(--sn-accent); }
.sn-panel a.sn-here {
  color: var(--sn-accent);
  font-weight: 600;
}

/* ============ APP PAGES (full-screen demo shells) ============
   dashboard / vault / login / onboarding use display:flex +
   overflow:hidden bodies. There the bar becomes a floating
   pill, bottom-center, so it never disturbs the app layout. */

html.sn-app .sn-bar {
  position: fixed;
  top: auto;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--sn-line);
  border-bottom: 1px solid var(--sn-line);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 10px 32px rgba(0, 0, 0, 0.14),
    0 4px 18px rgba(14, 61, 46, 0.10);
  z-index: 500;
  animation: snBarUp 0.6s var(--sn-ease) 0.25s both;
}
@keyframes snBarUp {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
html.sn-app .sn-bar-in {
  height: 44px;
  padding: 0 8px 0 18px;
  max-width: none;
}
html.sn-app .sn-home-link { display: none; }
html.sn-app .sn-panel {
  position: fixed;
  top: auto;
  bottom: 74px;
  left: 50%;
  right: auto;
  transform: translate(-50%, 8px) scale(0.985);
}
html.sn-app .sn-panel.sn-open {
  transform: translate(-50%, 0) scale(1);
}

/* ============ RESPONSIVE ============ */

@media (max-width: 640px) {
  .sn-bar-in { padding: 0 16px; }
  .sn-section, .sn-section + .sn-sep { display: none; }
  .sn-home-link { display: none; }
  .sn-panel {
    position: fixed;
    top: 54px;
    left: 16px; right: 16px;
    width: auto;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
}

/* ============ REDUCED MOTION ============ */

@media (prefers-reduced-motion: reduce) {
  body { animation: none; transition: none; }
  body::after { animation: none; opacity: 0; }
  html.sn-exit body { opacity: 1; transform: none; }
  .sn-panel { transition: none; }
}

/* ============ SITE FOOTER ============ */

/* Hide existing page-level footers when global footer is active */
html.sn-footer-on footer:not(.sn-footer),
html.sn-footer-on .doc-footer,
html.sn-footer-on .legal-foot {
  display: none !important;
}

.sn-footer {
  background: var(--sn-bg);
  border-top: 1px solid var(--sn-line);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.sn-foot-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 32px 56px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}

.sn-foot-logo {
  display: inline-block;
  line-height: 0;
  /* 11px, not 20px, so the tagline's first line lands on the same baseline as
     the first nav link (Discovery) while the logo stays aligned with the
     column headings. Tuned to logo height 22 + heading block 30. */
  margin-bottom: 11px;
  text-decoration: none;
}

.sn-foot-tag {
  font-size: 13.5px;
  color: var(--sn-muted);
  line-height: 1.65;
  max-width: 28ch;
  margin: 0 0 14px;
}

.sn-foot-founder {
  font-size: 12.5px;
  color: var(--sn-mute-3);
  margin: 0;
}

.sn-foot-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.sn-foot-col h4 {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sn-mute-2);
  margin: 0 0 14px;
}

.sn-foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sn-foot-col a {
  font-size: 13.5px;
  color: var(--sn-ink-2);
  text-decoration: none;
  transition: color 0.13s ease;
}

.sn-foot-col a:hover { color: var(--sn-accent); }

.sn-foot-bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 32px;
  border-top: 1px solid var(--sn-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 12.5px;
  color: var(--sn-mute-2);
}

.sn-foot-legal {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sn-foot-legal a,
.sn-foot-status {
  font-size: 12.5px;
  color: var(--sn-mute-2);
  text-decoration: none;
  transition: color 0.13s ease;
}

.sn-foot-legal a:hover { color: var(--sn-ink); }

@media (max-width: 960px) {
  .sn-foot-in {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 24px 40px;
  }
  .sn-foot-nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .sn-foot-nav {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
  .sn-foot-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px;
  }
}

/* ============ PRICING CARD BULLET CLAMP + SEE MORE ============ */
/* Every bullet is clamped to ONE line so all rows share the same height and
   line up horizontally across the three cards. A per-card "See more" (via
   site.js) appears only when a bullet is actually truncated at the current
   width, then reveals the full text. Header blocks are height-matched below
   (desktop only) so the lists start at the same Y and the rows truly align. */
.pr-card .pr-list { flex: 0 0 auto; }
.pr-li-txt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.pr-card.pr-expanded .pr-li-txt {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.pr-more {
  align-self: flex-start;
  margin: 2px 0 22px;
  padding: 4px 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--sn-accent, #0E3D2E);
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 5px;
}
.pr-more.is-visible { display: inline-flex; }
.pr-more:hover { text-decoration: underline; }
.pr-card.dark .pr-more { color: #5BA88C; }
.pr-more .pr-chev { font-size: 16px; line-height: 1; transition: transform .2s ease; }
.pr-card.pr-expanded .pr-more .pr-chev { transform: rotate(90deg); }

/* Bloc de droite du bandeau (CTA + theme + EN/FR).
   Il reste DANS LE FLUX de la grille pleine largeur : c'est la colonne de
   droite qui le cale sur le bord droit, exactement en miroir du logo cale sur
   le bord gauche. Aucun positionnement absolu, aucune marge de compensation :
   c'est precisement ce qui desynchronisait le logo du bord de l'ecran. */
@media (min-width: 681px) {
  .nav-right, .sn-nav-right {
    position: relative; /* ancre le panneau deroulant, sans sortir du flux */
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
    margin-right: 0;
  }
  .nav-toggles {
    display: flex;
    align-items: center;
  }
  .nav-lang, .sn-lang {
    position: static;
    transform: none;
  }
}
@media (max-width: 680px) {
  .nav-toggles {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
  }
  .nav-lang, .sn-lang {
    position: static !important;
    transform: none !important;
  }
  .theme-toggle-btn {
    margin-right: 8px !important;
  }
}

/* ============ SCROLL-REVEAL ANIMATIONS ============ */
.scroll-reveal {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, opacity;
}
.scroll-reveal.in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Staggered delays for grids/lists */
.feature-card:nth-child(1), .price-card:nth-child(1), .guides-grid a:nth-child(1) { transition-delay: 0ms !important; }
.feature-card:nth-child(2), .price-card:nth-child(2), .guides-grid a:nth-child(2) { transition-delay: 80ms !important; }
.feature-card:nth-child(3), .price-card:nth-child(3), .guides-grid a:nth-child(3) { transition-delay: 160ms !important; }
.feature-card:nth-child(4), .price-card:nth-child(4) { transition-delay: 240ms !important; }

/* ============ GLOWING HOVER CARD BORDERS ============ */
.feature-card, .price-card, .guides-grid a {
  position: relative;
  overflow: hidden;
}
.feature-card::before, .price-card::before, .guides-grid a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 240px at var(--mouse-x, 0) var(--mouse-y, 0), rgba(46, 125, 91, 0.08), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
  pointer-events: none;
}
.feature-card:hover::before, .price-card:hover::before, .guides-grid a:hover::before {
  opacity: 1;
}
/* Ensure card content sits above the background glow */
.feature-card > *, .price-card > *, .guides-grid a > * {
  position: relative;
  z-index: 1;
}

/* ============ THEME SWITCHER TOGGLE BUTTON ============ */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--line, var(--sn-line));
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  margin-right: 12px;
  transition: background 0.15s ease, border-color 0.15s ease;
  color: var(--ink, var(--sn-ink));
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: var(--line, var(--sn-line));
  border-color: var(--ink-2, var(--sn-ink-2));
}

/* ============================================================
   MOBILE HEADER, decisive override. Placed AFTER the older
   "Fix header ... layout" block so its !important rules win.
   The phone header is deliberately minimal: a small wordmark on
   the left, EN/FR + an "All pages" menu on the right. The
   Request-a-demo CTA lives in the hero, and the day/night toggle
   is desktop-only, so both are hidden here, which is what was
   overflowing the header and cutting off "All pages".
   Le logo reste colle au bord gauche : seule la gouttiere retrecit.
   ============================================================ */
@media (max-width: 980px) {
  :root { --sn-nav-gutter: 16px; }
  .sn-nav-in {
    grid-template-columns: auto 1fr !important;
    gap: 10px !important;
  }
  .sn-nav-links { display: none !important; }
  .sn-cta { display: none !important; }
  .theme-toggle-btn { display: none !important; }
  .sn-bulletin { display: none !important; }

  .sn-brand {
    font-size: 20px !important;
    margin-left: -1px !important;
    justify-self: start !important;
  }
  .sn-nav-right {
    position: relative !important;
    transform: none !important;
    margin-right: 0 !important;
    gap: 8px !important;
    justify-self: end !important;
    flex-wrap: nowrap !important;
  }
  .nav-toggles { margin-left: 0 !important; }

  /* "All pages" is the mobile menu; show it and drop its panel as a
     full-width sheet under the header. */
  .home-menu-btn { display: inline-flex !important; margin-left: 4px !important; }
  .nav-right .sn-panel, .sn-nav-right .sn-panel {
    position: fixed !important;
    top: var(--sn-nav-h) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
  }
}

/* ============ PREMIUM DARK MODE VARIABLES ============ */
html.dark {
  /* Surfaces */
  --bg:            #0A0A0A;
  --bg-2:          #141414;
  --bg-deep:       #1D1D1C;
  --surface:       #181818;
  --surface-2:     #141414;
  --dark:          #FAFAF9;
  --dark-2:        #E5E5E5;

  /* Text */
  --ink:           #FAFAF9;
  --ink-2:         #E5E5E5;
  --ink-3:         #D4D4D4;
  --muted:         #A3A3A3;
  --mute-2:        #737373;
  --mute-3:        #525252;
  --on-dark:       #0A0A0A;
  --on-dark-mute:  #525252;

  /* Lines */
  --line:          #262626;
  --line-2:        #404040;
  --line-soft:     #1E1E1E;
  --line-dark:     #E5E5E5;
  
  /* Brand accent overrides for dark mode readability */
  --accent:        #2E7D5B;
  --accent-2:      #36966C;
  --accent-3:      #132B20;
  --accent-soft:   rgba(46, 125, 91, 0.08);
  --accent-on-dark: #36966C;
  
  /* sn- prefixed variables for sub-pages */
  --sn-bg:         #0A0A0A;
  --sn-surface:    #181818;
  --sn-ink:        #FAFAF9;
  --sn-ink-2:      #E5E5E5;
  --sn-muted:      #A3A3A3;
  --sn-mute-2:     #737373;
  --sn-mute-3:     #525252;
  --sn-line:       #262626;
  
  color-scheme: dark;
}

html.dark body {
  background: var(--bg, #0A0A0A) !important;
  color: var(--ink, #FAFAF9) !important;
}

/* Specific elements dark overrides */
html.dark .section-light {
  background: var(--bg-2) !important;
}
html.dark .nav {
  background: rgba(10, 10, 10, 0.85) !important;
  border-bottom-color: var(--line) !important;
}
html.dark .sn-nav {
  background: rgba(10, 10, 10, 0.85) !important;
  border-bottom-color: var(--sn-line) !important;
}
html.dark .btn-secondary {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: transparent !important;
}
html.dark .btn-secondary:hover {
  background: var(--line) !important;
  color: var(--ink) !important;
}
html.dark .brand {
  color: var(--ink) !important;
}
html.dark .nav-lang {
  border-color: var(--line) !important;
  background: var(--bg) !important;
  color: var(--muted) !important;
}
html.dark .nav-lang button.active {
  background: var(--ink) !important;
  color: var(--bg) !important;
}
html.dark .nav-lang button:hover {
  color: var(--ink) !important;
}
html.dark .nav-links a {
  color: var(--ink-2) !important;
}
html.dark .nav-links a:hover {
  color: var(--ink) !important;
}
html.dark .hero-h1 {
  color: var(--ink) !important;
}
html.dark .hero-p {
  color: var(--ink-2) !important;
}
html.dark .footer {
  background: #080808 !important;
  border-top: 1px solid var(--line) !important;
}
html.dark .footer-col-title {
  color: var(--ink) !important;
}
html.dark .footer-col a {
  color: var(--muted) !important;
}
html.dark .footer-col a:hover {
  color: var(--ink) !important;
}
html.dark .footer-bottom {
  border-top-color: var(--line) !important;
  color: var(--muted) !important;
}

/* ============ PREMIUM HIGH-TECH DESIGN UPGRADES ============ */

/* 1. Grid Blueprint Technical Background */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    linear-gradient(to right, rgba(14, 61, 46, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 61, 46, 0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: -2;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
html.dark body::before {
  background-image: 
    linear-gradient(to right, rgba(54, 150, 108, 0.012) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(54, 150, 108, 0.012) 1px, transparent 1px);
}

/* 2. Soft Ambient Radial Glows */
.hero, .pr-section, .contact-section, .about-section, .product-hero {
  position: relative;
  overflow: visible !important;
}

.hero::before, .product-hero::before {
  content: '';
  position: absolute;
  top: 20%; left: 50%;
  transform: translate(-50%, -50%);
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(14, 61, 46, 0.06) 0%, rgba(14, 61, 46, 0) 70%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
  animation: snAmbientPulse 10s ease-in-out infinite alternate;
}
html.dark .hero::before, html.dark .product-hero::before {
  background: radial-gradient(circle, rgba(54, 150, 108, 0.04) 0%, rgba(54, 150, 108, 0) 70%);
}

.pr-section::before, .contact-section::before {
  content: '';
  position: absolute;
  bottom: 10%; right: 10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(21, 94, 71, 0.04) 0%, rgba(21, 94, 71, 0) 70%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}
html.dark .pr-section::before, html.dark .contact-section::before {
  background: radial-gradient(circle, rgba(54, 150, 108, 0.02) 0%, rgba(54, 150, 108, 0) 70%);
}

@keyframes snAmbientPulse {
  0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.95); }
  100% { opacity: 1.0; transform: translate(-50%, -50%) scale(1.05); }
}

/* 3. Advanced Glassmorphism and Double-Borders on Cards */
.feature-card, .pr-card, .about-card, .value-card, .guide-card, .teaser-card, .reg-card, .sn-nav {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: saturate(180%) blur(12px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
  border: 1px solid rgba(14, 61, 46, 0.08) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.6), 
    0 1px 3px rgba(0, 0, 0, 0.02),
    0 8px 24px rgba(14, 61, 46, 0.02) !important;
}

html.dark .feature-card, html.dark .pr-card, html.dark .about-card, html.dark .value-card, html.dark .guide-card, html.dark .teaser-card, html.dark .reg-card {
  background: rgba(18, 18, 18, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.03), 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* 3b. Dark Cards Override (like Inventory Sprint on pricing) */
.pr-card.dark, .teaser-card.dark, .feature-card.dark {
  background: rgba(14, 61, 46, 0.94) !important; /* Tinted deep forest green */
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15), 
    0 4px 24px rgba(0, 0, 0, 0.18) !important;
}
html.dark .pr-card.dark, html.dark .teaser-card.dark, html.dark .feature-card.dark {
  background: rgba(14, 46, 35, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 4. Spotlight Card cursor-glow container */
.feature-card, .pr-card, .about-card, .value-card, .guide-card, .teaser-card, .reg-card {
  position: relative;
  overflow: hidden;
}
.feature-card::before, .pr-card::before, .about-card::before, .value-card::before, .guide-card::before, .teaser-card::before, .reg-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: radial-gradient(circle 180px at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(21, 94, 71, 0.08), transparent 80%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.feature-card:hover::before, .pr-card:hover::before, .about-card:hover::before, .value-card:hover::before, .guide-card:hover::before, .teaser-card:hover::before, .reg-card:hover::before {
  opacity: 1;
}
html.dark .feature-card::before, html.dark .pr-card::before, html.dark .about-card::before, html.dark .value-card::before, html.dark .guide-card::before, html.dark .teaser-card::before, html.dark .reg-card::before {
  background: radial-gradient(circle 180px at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(54, 150, 108, 0.15), transparent 80%);
}

/* 5. Precision Monospace Font Accents */
.pr-eyebrow, .cinematic-label, .hero-trust, .footer-col-title, .sn-badge {
  font-family: "Geist Mono", "Courier New", Courier, monospace !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
  color: var(--accent, var(--sn-accent)) !important;
}
html.dark .pr-eyebrow, html.dark .cinematic-label, html.dark .hero-trust, html.dark .footer-col-title, html.dark .sn-badge {
  color: var(--accent-2, var(--sn-accent-2)) !important;
}

.hero-trust {
  text-transform: none !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em !important;
}

/* 6. Smooth Global Transitions */
body, .nav, .sn-nav, .feature-card, .pr-card, .btn, .btn-primary, .btn-secondary, h1, h2, h3, p, a, button, input, select {
  transition: background-color 0.4s var(--sn-ease),
              border-color 0.4s var(--sn-ease),
              color 0.4s var(--sn-ease),
              box-shadow 0.3s var(--sn-ease),
              transform 0.2s var(--sn-ease) !important;
}

/* 7. Animated scanning radar */
@keyframes snScanning {
  0% { transform: translateY(-100%); opacity: 0; }
  15% { opacity: 0.8; }
  85% { opacity: 0.8; }
  100% { transform: translateY(100%); opacity: 0; }
}
.scan-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--accent, #0E3D2E), transparent);
  animation: snScanning 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: 10;
}

/* 8. Staggered Entrance Transition Delays */
.features-grid .feature-card:nth-child(1), 
.teaser-grid .teaser-card:nth-child(1), 
.reg-overlap .reg-card:nth-child(1),
.pr-tiers .pr-card:nth-child(1) { 
  transition-delay: 0.05s !important; 
}
.features-grid .feature-card:nth-child(2), 
.teaser-grid .teaser-card:nth-child(2), 
.reg-overlap .reg-card:nth-child(2),
.pr-tiers .pr-card:nth-child(2) { 
  transition-delay: 0.12s !important; 
}
.features-grid .feature-card:nth-child(3), 
.teaser-grid .teaser-card:nth-child(3), 
.reg-overlap .reg-card:nth-child(3),
.pr-tiers .pr-card:nth-child(3) { 
  transition-delay: 0.18s !important; 
}
.features-grid .feature-card:nth-child(4) { 
  transition-delay: 0.24s !important; 
}

/* 9. Premium High-Tech Title Sweep Reflection */
.hero-h1 .word > span, .section-h2, .pr-h2 {
  background: linear-gradient(110deg, var(--ink, #0A0A0A) 35%, var(--accent-2, #155E47) 50%, var(--ink, #0A0A0A) 65%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  animation: snTitleSweep 12s linear infinite;
}
html.dark .hero-h1 .word > span, html.dark .section-h2, html.dark .pr-h2 {
  background: linear-gradient(110deg, var(--ink, #FAFAF9) 35%, var(--accent-2, #36966C) 50%, var(--ink, #FAFAF9) 65%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
}
@keyframes snTitleSweep {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

/* 10. Dashboard Cinematic Showcase Enhancements */
.cinematic-glow::before,
.cinematic-glow::after {
  background:
    radial-gradient(circle at 15% 20%, rgba(14, 61, 46, 0.75), transparent 55%),
    radial-gradient(circle at 85% 15%, rgba(54, 150, 108, 0.75), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(21, 94, 71, 0.75), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.45), transparent 55%) !important;
}

.cinematic-glow::after {
  display: none !important;
}

.cinematic-glow::before {
  --glow-size: 36px !important;
  filter: blur(34px) !important;
  animation: cinemaGlowRotate 16s linear infinite !important;
  opacity: 0.9 !important;
}

@keyframes cinemaGlowRotate {
  0% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.05) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

.cinematic-chrome {
  background: rgba(20, 20, 20, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 11. Interactive Floating Technical Hotspots */
.cinematic-vis {
  position: relative;
}

.dash-hotspot {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  animation: hsFloat 4.5s ease-in-out infinite alternate;
}

.hs-l1 {
  top: 10%;
  left: -8%;
  animation-delay: 0s;
}

.hs-l2 {
  top: 45%;
  left: -11%;
  animation-delay: 1.6s;
}

.hs-l3 {
  top: 80%;
  left: -9%;
  animation-delay: 3.2s;
}

.hs-r1 {
  top: 8%;
  right: -8%;
  animation-delay: 0.8s;
}

.hs-r2 {
  top: 42%;
  right: -11%;
  animation-delay: 2.4s;
}

.hs-r3 {
  top: 78%;
  right: -9%;
  animation-delay: 4s;
}

.hotspot-badge {
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 6px 14px;
  color: var(--accent-2, #36966C) !important;
  font-family: "Geist Mono", "Courier New", monospace !important;
  font-size: 0.66rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
}

html.dark .hotspot-badge {
  background: rgba(18, 18, 18, 0.75);
  border-color: rgba(255, 255, 255, 0.05);
  color: var(--accent-2, #36966C) !important;
}

@keyframes hsFloat {
  0% { transform: translateY(0px) scale(0.98); }
  100% { transform: translateY(-12px) scale(1.02); }
}

@media (max-width: 1280px) {
  .dash-hotspot { display: none !important; }
}