/* ==========================================================================
   Maneki Kitsune — Header sticky calqué sur axome.com — v3.3
   Reproduit leurs interactions Webflow :
   - « Nav-color » : l'opacité du fond suit la progression du scroll de la page
     (0 % en haut → opaque à 13 % de la page), lissée (smoothing 50)
   - PAGE_SCROLL_DOWN : le header glisse hors de l'écran
   - PAGE_SCROLL_UP   : il revient
   Tout est piloté par --mks-a (0 → 1) calculé par le JS, sans transition CSS
   sur le fond : c'est le scroll lui-même qui fait le fondu.
   À charger APRÈS style.css du thème (cf. functions.php).
   ========================================================================== */

:root {
  --mks-bg: 255 243 239;          /* #FFF3EF en RGB pour jouer sur l'alpha */
  --mks-fonce: #1D1510;
  --mks-cta: #931637;
  --mks-rose: #FCA6C2;
  --mks-pop: cubic-bezier(.34, 1.56, .64, 1);
  --mks-out-quart: cubic-bezier(.25, 1, .5, 1); /* easing « outQuart » de Webflow */
  --mks-enter: .5s;               /* Navbar Page Enter : réapparition (Axome : 500 ms) */
  --mks-out: .6s;                 /* Navbar Page Out : masquage (Axome : 600 ms) */
  --mks-top: 0px;                 /* recalculé par le JS (barre admin WP) */
}

/* ---------- Header fixe ---------- */
html body .mk-site-header.mks-fixed {
  position: fixed !important;
  top: var(--mks-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 1000;
  transform: translate3d(0, 0%, 0);
  transition: transform var(--mks-enter) var(--mks-out-quart);
  will-change: transform;
}
html body .mk-site-header.mks-fixed.is-hidden {
  transform: translate3d(0, calc(-100% - var(--mks-top, 0px) - 2px), 0);
  transition-duration: var(--mks-out);
}
html body .mk-site-header.mks-instant,
html body .mk-site-header.mks-instant *,
html body .mk-site-header.mks-instant *::before,
html body .mk-site-header.mks-instant *::after { transition: none !important; }

/* ---------- Fond crème : opacité = progression du scroll ---------- */
.mks-glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(var(--mks-bg) / .95);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgb(118 87 65 / .12);
  opacity: var(--mks-a, 0);
  pointer-events: none;
}

/* ---------- Couleurs : glissent du blanc au foncé avec le fond ---------- */
body:not(.mk-menu-open) .mk-site-header.mks-fx .mk-nav a:not(:hover):not(:focus-visible) {
  color: color-mix(in srgb, var(--mks-fonce) calc(var(--mks-a, 0) * 100%), var(--mks-link0, var(--mks-fonce)));
}
body:not(.mk-menu-open) .mk-site-header.is-scrolled .mk-nav a:hover,
body:not(.mk-menu-open) .mk-site-header.is-scrolled .mk-nav a:focus-visible {
  color: var(--mks-cta);
}
body:not(.mk-menu-open) .mk-site-header.mks-fx .mk-burger span,
body:not(.mk-menu-open) .mk-site-header.mks-fx .mk-burger span::before,
body:not(.mk-menu-open) .mk-site-header.mks-fx .mk-burger span::after {
  background: color-mix(in srgb, var(--mks-fonce) calc(var(--mks-a, 0) * 100%), var(--mks-burger0, var(--mks-fonce)));
}

/* ---------- Menu burger ouvert : jamais caché, le thème reprend la main ---------- */
html body.mk-menu-open .mk-site-header.mks-fixed { transform: none; }
body.mk-menu-open .mks-glass { opacity: 0; }

/* ---------- Le pétale sous les liens ---------- */
.mk-nav a { position: relative; }
.mk-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 9px;
  height: 12px;
  margin-left: -4.5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 0C10.5 4 11 10 6 16C1 10 1.5 4 6 0Z' fill='%23FCA6C2'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateY(-10px) rotate(-70deg) scale(.4);
  transition: opacity .2s ease, transform .55s var(--mks-pop);
  pointer-events: none;
}
.mk-nav a:hover::after,
.mk-nav a:focus-visible::after,
.mk-nav :is(.current-menu-item, .current_page_item) > a::after {
  opacity: 1;
  transform: translateY(0) rotate(18deg) scale(1);
}

/* ---------- Accessibilité ---------- */
.mk-site-header.is-scrolled :focus-visible {
  outline: 2px solid var(--mks-cta);
  outline-offset: 3px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  html body .mk-site-header.mks-fixed { transition: none; }
  .mk-nav a::after { transition: opacity .2s ease; transform: rotate(18deg); }
}