/* =================================================================
   NAV — Navigation fixe bas de page, style pixel-art SNES
   Structure : pill bicolore sur fond transparent
     .nav-menu          : panel orange flex-1 (logo + liens)
     .btn-pixel--violet : CTA "Réserver un appel" (via btn-pixel.css)

   Requiert : btn-pixel.css (chargé globalement dans head.php)
================================================================= */

/* ─────────────────────────────────────────
   WRAPPER EXTERNE
   Fixé en bas, masqué jusqu'à .nav-in
───────────────────────────────────────── */
.site-nav {
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  z-index:         1000;
  display:         flex;
  flex-direction:  column;
  align-content:   center;
  align-items:     center;
  justify-content: center;
  padding:         16px;
  pointer-events:  none;
  transform:       translateY(110%);
}

@keyframes kNavUp {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

.site-nav.nav-in {
  animation: kNavUp 0.7s cubic-bezier(.22, 1, .36, 1) var(--nav-delay, 0ms) both;
}

/* ─────────────────────────────────────────
   PILL INTÉRIEURE
───────────────────────────────────────── */
.site-nav__inner {
  flex:          1;
  display:       flex;
  height:        60px;
  width:         100%;
  max-width:     1280px;
  align-items:   stretch;
  box-shadow:    var(--nav-shadow);
  pointer-events: auto;
  overflow:      hidden;
}

/* ─────────────────────────────────────────
   PANEL MENU — hérite des classes btn-pixel
   Palette orange (Figma : orange-100/50/700)
───────────────────────────────────────── */
.nav-menu {
  /* Variables btn-pixel — palette orange */
  --bp-h:     60px;
  --bp-step:   4px;
  --bp-black: #1a0f26;
  --bp-light: #fff7e7;
  --bp-gold:  #ffd793;
  --bp-shade: #fe9e3a;

  flex:         1;
  display:      flex;
  align-items:  stretch;
}

/* Centre : logo + liens (pas de gap → géré par nav__items flex: 1) */
.nav-menu .btn-pixel__center {
  padding: 0 16px;
  gap:     0;
}

/* ─────────────────────────────────────────
   LOGO
───────────────────────────────────────── */
.nav__logo {
  font-family:    var(--font-heading);
  font-size:      24px;
  font-weight:    var(--fw-bold);
  color:          #1a0f26;
  text-transform: uppercase;
  white-space:    nowrap;
  flex-shrink:    0;
  text-decoration: none;
  line-height:    1;
  align-self:     center;
}

/* ─────────────────────────────────────────
   LIENS NAV
───────────────────────────────────────── */
.nav__items {
  display:         flex;
  align-items:     center;
  gap:             64px;
  flex:            1;
  justify-content: flex-end;
  padding:         0 32px;
}

.nav__item {
  font-family:    var(--font-mono);
  font-size:      var(--text-md);
  color:          #1a0f26;
  text-transform: uppercase;
  text-decoration: none;
  white-space:    nowrap;
  line-height:    1;
}

.nav__item:hover { opacity: 0.6; }