/* Preserve the original top-of-page wash; define its edge progressively on scroll. */
body:has(#page-home.active),
body .page[id^="page-"]:is(#page-home, #page-recherche, #page-transport, #page-equipements, #page-pro, #page-pieces, #page-compte, #page-achat-vente) {
  background-color: #f6f9fc !important;
  background-image:
    radial-gradient(ellipse var(--mt-blue-w, 65vw) var(--mt-blue-h, 380px) at var(--mt-blue-x, 100%) -5%,
      rgba(137, 203, 248, var(--mt-blue-alpha, .38)) 0%,
      rgba(154, 209, 247, var(--mt-blue-mid-alpha, .17)) var(--mt-blue-mid-stop, 48%),
      rgba(154, 209, 247, var(--mt-blue-edge-alpha, .0425)) 72%, transparent 80%),
    radial-gradient(ellipse 70vw 420px at 72% 0%, #e1dfff66, transparent 75%),
    linear-gradient(180deg, #fff, #f6f9fc) !important;
  background-size: 100% 100% !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Transparent navigation above the page background. */
body > nav {
  background: transparent !important;
  box-shadow: none;
  transition: background-color .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* The white surface appears with mouse, keyboard or the open mobile menu. */
body > nav:is(:has(:focus-visible), .mt-menu-open) {
  background: #fff !important;
  box-shadow: 0 18px 38px -16px rgba(10, 37, 64, .24);
}
@media (hover: hover) {
  body > nav:hover {
    background: #fff !important;
    box-shadow: 0 18px 38px -16px rgba(10, 37, 64, .24);
  }
  body:has(#page-mobilhome.active) > nav:hover .logo span:first-child { color: #0a2540 !important; }
  body:has(#page-mobilhome.active) > nav:hover .logo span:last-child { color: #2b4ec2 !important; }
  body:has(#page-mobilhome.active) > nav:hover .nav-link:not(.active):not([aria-current="page"]) { color: #111; }
}
/* Existing canvas decoration also stops below the navigation. */
#bg-canvas { clip-path: inset(64px 0 0); }

/* Keep the same navigation readable over the dark analysis page. */
body:has(#page-mobilhome.active) > nav::after {
  background: #54708b70;
  box-shadow: 0 0 0 100vmax #54708b70;
}
body:has(#page-mobilhome.active) > nav .logo span:first-child { color: #f6f9fc !important; }
body:has(#page-mobilhome.active) > nav .logo span:last-child { color: #82adff !important; }
body:has(#page-mobilhome.active) > nav:is(:has(:focus-visible), .mt-menu-open) .logo span:first-child { color: #0a2540 !important; }
body:has(#page-mobilhome.active) > nav:is(:has(:focus-visible), .mt-menu-open) .logo span:last-child { color: #2b4ec2 !important; }
body:has(#page-mobilhome.active) > nav:is(:has(:focus-visible), .mt-menu-open) .nav-link:not(.active):not([aria-current="page"]) { color: #111; }
@media (min-width: 1200px) {
  body:has(#page-mobilhome.active) > nav .nav-link:not(.active):not([aria-current="page"]) { color: #e4edf8; }
}
body:has(#page-mobilhome.active) > nav .nav-link:is(.active, [aria-current="page"]) { color: #111; background: #eaf1fb; }
body #page-mobilhome {
  background-color: #0b1929 !important;
  background-image:
    radial-gradient(ellipse var(--mt-blue-w, 65vw) var(--mt-blue-h, 380px) at var(--mt-blue-x, 100%) -5%,
      rgba(40, 111, 173, var(--mt-blue-alpha, .38)) 0%,
      rgba(40, 111, 173, var(--mt-blue-dark-mid-alpha, .152)) var(--mt-blue-mid-stop, 48%),
      rgba(40, 111, 173, var(--mt-blue-dark-edge-alpha, .038)) 72%, transparent 80%),
    linear-gradient(#9dbcd605 1px, transparent 1px),
    linear-gradient(90deg, #9dbcd605 1px, transparent 1px) !important;
  background-size: 100% 100%, 48px 48px, 48px 48px !important;
  background-position: center top !important;
  background-attachment: fixed !important;
}

/* Let the shared scroll wash show through the account workspace. */
#page-compte #compteLoggedIn { background: transparent; }