/* ==========================================================================
   Navbar
   Floating glass pill. Logo left, links centered, actions right. Shrinks on
   scroll (see js/navbar.js) and collapses to a toggled panel on mobile.
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: var(--space-5) var(--space-5) 0;
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.site-header {
  /* Navbar sits on dark glass, so its text runs light regardless of the
     page's (light) text tokens. */
  --navbar-text: rgba(255, 255, 255, 1);
  --navbar-text-muted: rgba(255, 255, 255, 0.82);
}

.navbar {
  width: 100%;
  /* Flat cap, not var(--container-max-width) — that variable is 80vw-based
     for content sections, and applied to the pill it shrank the pill faster
     than the viewport itself between ~860-1250px, well below what the nav
     content needs, while width:100% already handles shrinking against
     .site-header's own padding down to the mobile breakpoint below. */
  max-width: 1200px;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-color: var(--glass-border-strong);
  transition: padding var(--transition-base), max-width var(--transition-base), background var(--transition-base);
}

.site-header.is-scrolled .navbar {
  /* Was 970px, tuned back when the nav only had 5 links — with "Partenaires"
     added as a 6th, that cap left too little room and the links/actions
     row would overflow or wrap once scrolled. Raised just enough to fit
     six links comfortably at the same shrunk padding/gap. */
  max-width: 1080px;
  padding: 6px 6px 6px var(--space-4);
  background: var(--glass-bg-strong);
}

.site-header.is-scrolled .navbar__links {
  gap: var(--space-4);
}

/* --- Logo --- */
.navbar__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.navbar__logo img {
  height: 40px;
  width: auto;
  transition: height var(--transition-base);
}

.site-header.is-scrolled .navbar__logo img {
  height: 34px;
}

/* --- Menu wrapper: holds links + actions, becomes the mobile dropdown --- */
.navbar__menu {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* --- Center links --- */
.navbar__links {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.navbar__link {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navbar-text-muted);
  padding-block: var(--space-2);
  transition: color var(--transition-fast);
}

.navbar__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-fast);
}

.navbar__link:hover,
.navbar__link.is-active,
.navbar__link[aria-current="page"] {
  color: var(--navbar-text);
}

.navbar__link:hover::after,
.navbar__link.is-active::after,
.navbar__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* --- Actions --- */
.navbar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- Mobile toggle (hidden on desktop) --- */
.navbar__toggle {
  position: relative;
  display: none;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
}

/* Each bar is pinned to the button's exact center, then nudged up/down —
   independent of flex/gap layout, so the open-state rotation always
   pivots around the same point instead of relying on a translateY that
   has to happen to cancel out the closed-state gap. */
.navbar__toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--navbar-text);
  border-radius: 2px;
  transform: translate(-50%, -50%) translateY(var(--toggle-bar-y, 0));
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.navbar__toggle span:nth-child(1) {
  --toggle-bar-y: -6px;
}

.navbar__toggle span:nth-child(3) {
  --toggle-bar-y: 6px;
}

/* Navbar buttons keep the original full-pill shape — the rest of the site's
   .btn was squared off to --radius-md, but that change excludes the navbar. */
.navbar .btn {
  border-radius: var(--radius-pill);
}

/* --- Navbar's own glass button (Login) reads white on the dark glass pill --- */
.navbar .btn--secondary {
  color: var(--navbar-text);
  background: rgba(255, 255, 255, 0.1);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.22);
}

.navbar .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
}

.site-header.nav-open .navbar__toggle span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.site-header.nav-open .navbar__toggle span:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0);
}

.site-header.nav-open .navbar__toggle span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* --- Responsive --- */
/* Tightens link/pill spacing before the hamburger takes over at 860px, so
   the still-unscrolled pill isn't relying on the full desktop gaps right up
   to the mobile cutoff. */
@media (max-width: 1080px) {
  .navbar {
    gap: var(--space-4);
  }

  .navbar__links {
    gap: var(--space-4);
  }
}

@media (max-width: 860px) {
  /* Outer gutter around the pill shrinks so the pill itself spans more of
     the narrow viewport. */
  .site-header {
    padding: var(--space-5) var(--space-4) 0;
  }

  /* Logo/toggle are the only two in-flow items once .navbar__menu drops
     into its absolutely-positioned dropdown, so a 3-col grid centers the
     logo on the pill while pinning the toggle to the far edge. */
  .navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: var(--space-3) var(--space-2) var(--space-3) var(--space-5);
  }

  .navbar__logo {
    grid-column: 2;
    justify-self: center;
  }

  /* The logo image bundles the round mark + wordmark as one SVG, so centering
     the image centers that whole block instead of the readable text. The
     mark occupies the left 28% of the image's width, so shift left by half
     that share to bring the wordmark itself to the pill's center. */
  .navbar__logo img {
    height: 36px;
    transform: translateX(-14%);
  }

  .site-header.is-scrolled .navbar {
    max-width: var(--container-max-width);
    padding: var(--space-3) var(--space-2) var(--space-3) var(--space-5);
  }

  .site-header.is-scrolled .navbar__logo img {
    height: 36px;
    transform: translateX(-14%);
  }

  .navbar__toggle {
    grid-column: 3;
    justify-self: end;
  }

  .navbar__menu {
    position: absolute;
    top: calc(100% + var(--space-3));
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    /* Solid (no backdrop-filter) rather than glass: a translucent/blurred
       dropdown over body copy either bled the links through against the
       hero text or, when blurred, hit a Safari bug where nested
       backdrop-filter behind the navbar pill's own blur/transform renders
       as a dead spot. Solid sidesteps both. */
    background: rgb(23, 24, 27);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 48px rgba(10, 10, 12, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  }

  /* Caret bridging the gap up to the toggle button — a square rotated
     45deg, clipped to just its top-left corner so only the point shows,
     with the same fill/border as the panel so it reads as one shape. */
  .navbar__menu::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 21px;
    width: 12px;
    height: 12px;
    background: rgb(23, 24, 27);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px 0 0 0;
    transform: rotate(45deg);
  }

  .navbar__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .navbar__link {
    padding: var(--space-3) var(--space-3);
    text-align: center;
  }

  .navbar__link::after {
    display: none;
  }

  .navbar__link.is-active,
  .navbar__link[aria-current="page"] {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
  }

  .navbar__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .navbar__actions .btn {
    width: 100%;
  }

  /* "Contactez-nous" moves to the fixed bottom bar (.mobile-cta below) so
     it's reachable without opening the dropdown; only the login link stays
     in the menu. */
  .navbar__actions .btn--primary {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }

  .site-header.nav-open .navbar__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Room for the floating bottom CTA so it never overlaps the page's own
     footer/content. */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

/* --- Mobile bottom CTA ---
   Mirrors the navbar's "Contactez-nous" button, but floats above the bottom
   of the viewport instead of living inside the hamburger dropdown, so it
   stays reachable without opening the menu. */
.mobile-cta {
  display: none;
}

@media (max-width: 860px) {
  .mobile-cta {
    display: flex;
    justify-content: center;
    position: fixed;
    inset-inline: 0;
    bottom: var(--space-4);
    z-index: 100;
    pointer-events: none;
    transform: translateY(0);
    transition: transform var(--transition-base);
  }

  /* Tucked fully out of view (plus a margin) while scrolling down, per
     navbar.js's scroll-direction tracking. */
  .mobile-cta.is-hidden {
    transform: translateY(calc(100% + var(--space-4) + env(safe-area-inset-bottom)));
  }

  .mobile-cta__btn {
    pointer-events: auto;
    border-radius: var(--radius-pill);
    box-shadow: 0 12px 32px rgba(10, 10, 12, 0.35);
  }
}