/* =====================================================
   Navbar — Adrien Carlier (charte luxe ivoire/noir/or)
   -----------------------------------------------------
   Kadence casse position:sticky (header.min.css remet
   #masthead{position:relative} apres nous, et
   #wrapper{overflow:clip} clippe le sticky) : on passe
   en position:fixed + padding-top compensatoire sur
   #wrapper. Etat compact .is-scrolled pose par navbar.js.
   Specificite #masthead.site-header pour gagner sur le
   CSS parent charge apres cette feuille.
   ===================================================== */

:root {
  --nav-h: 64px;
  --nav-h-scrolled: 64px;
  --nav-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1024px) {
  :root {
    --nav-h: 60px;
    --nav-h-scrolled: 60px;
  }
}

/* Ancres : ne pas passer sous le header fixe */
html {
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

/* Compensation de flux : le header est hors flux (fixed),
   on reserve sa hauteur -> zero CLS. */
#wrapper.site {
  padding-top: var(--nav-h);
}

/* =====================================================
   Conteneur header
   ===================================================== */
#masthead.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 990; /* sous le drawer mobile Kadence (100000) */
  /* Meme verre depoli que l'etat scrolle (souhait client) :
     seule difference subtile, filet neutre + blur un peu moindre */
  background: rgba(250, 248, 243, 0.97);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid rgba(201, 162, 39, 0.5);
  box-shadow: 0 10px 34px rgba(10, 10, 10, 0.08);
  transform: translateY(0);
  transition:
    background-color 0.35s var(--nav-ease),
    border-color 0.35s var(--nav-ease),
    box-shadow 0.35s var(--nav-ease),
    transform 0.35s var(--nav-ease);
}

/* Barre d'admin WP (utilisateur connecte) */
body.admin-bar #masthead.site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar #masthead.site-header { top: 46px; }
}

/* Etat compacte au scroll */
#masthead.site-header.is-scrolled {
  background: rgba(250, 248, 243, 0.97);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: rgba(201, 162, 39, 0.5);
  box-shadow: 0 10px 34px rgba(10, 10, 10, 0.08);
}

/* Hide-on-scroll DESACTIVE (souhait client : navbar toujours visible).
   navbar.js pose toujours .nav-hidden mais la classe est neutralisee ici. */
#masthead.site-header.nav-hidden {
  transform: translateY(0);
}

/* Hauteur : genereuse en haut, compacte au scroll.
   (.site-main-header-inner-wrap aussi : le CSS inline du
   customizer Kadence lui impose min-height:80px) */
#masthead .site-header-inner-wrap,
#masthead .site-main-header-inner-wrap {
  min-height: var(--nav-h);
  transition: min-height 0.35s var(--nav-ease);
}

#masthead.is-scrolled .site-header-inner-wrap,
#masthead.is-scrolled .site-main-header-inner-wrap {
  min-height: var(--nav-h-scrolled);
}

/* =====================================================
   Branding : logo image + double ligne texte
   ===================================================== */
#masthead .site-branding .brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

#masthead .site-branding img.custom-logo {
  height: 36px;
  width: auto;
  transition: height 0.35s var(--nav-ease);
}

#masthead.is-scrolled .site-branding img.custom-logo {
  height: 36px;
}

/* "ADRIEN CARLIER / ARCHITECTE - URBANISTE"
   (Futura LT sur le Wix -> Jost, equivalent libre) */
#masthead .site-branding .site-title {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em !important;
  font-size: 12px !important;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  transition: color 0.3s ease, font-size 0.35s var(--nav-ease);
}

#masthead.is-scrolled .site-branding .site-title {
  font-size: 12px;
}

#masthead .site-branding .site-title::after {
  content: "\00a0/ Architecte - Urbaniste";
  font-weight: 300;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s ease;
}

.site-branding .brand:hover .site-title,
.site-branding .brand:hover .site-title::after {
  color: var(--gold-dark);
}

/* =====================================================
   Menu principal
   ===================================================== */
#masthead #primary-menu > li > a {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0.025em;
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--ink-soft);
  position: relative;
  padding: 0.6rem 1.15rem;
  transition: color 0.25s ease;
}

/* Indicateur dore : filet qui s'ouvre depuis le centre */
#masthead #primary-menu > li > a::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  bottom: 0.28rem;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--nav-ease);
}

#masthead #primary-menu > li > a:hover,
#masthead #primary-menu > li.current-menu-item > a,
#masthead #primary-menu > li.current-menu-ancestor > a {
  color: var(--ink);
}

#masthead #primary-menu > li > a:hover::after,
#masthead #primary-menu > li.current-menu-item > a::after,
#masthead #primary-menu > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* Page courante : filet or fonce toujours visible */
#masthead #primary-menu > li.current-menu-item > a::after,
#masthead #primary-menu > li.current-menu-ancestor > a::after {
  background: var(--gold-dark);
}

/* =====================================================
   Dernier item (Contact) : pastille contour or,
   remplissage or au survol — centree verticalement
   ===================================================== */
#masthead #primary-menu > li:last-child {
  display: flex;
  align-items: center;
}

#masthead #primary-menu > li:last-child > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  line-height: 1;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0 1.6rem;
  margin-left: 1rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  background: transparent;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    height 0.35s var(--nav-ease),
    box-shadow 0.3s ease;
}

#masthead #primary-menu > li:last-child > a::after { display: none; }

#masthead #primary-menu > li:last-child > a:hover,
#masthead #primary-menu > li.current-menu-item:last-child > a {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(201, 162, 39, 0.35);
}

#masthead.is-scrolled #primary-menu > li:last-child > a {
  height: 38px;
}

/* =====================================================
   Mobile (<= 1024px) : header fixe + drawer Kadence
   ===================================================== */
@media (max-width: 1024px) {
  #masthead .site-branding img.custom-logo {
    height: 34px;
  }

  #masthead.is-scrolled .site-branding img.custom-logo {
    height: 34px;
  }

  /* Bouton burger : encre, or au survol */
  #masthead .menu-toggle-open {
    color: var(--ink);
    transition: color 0.25s ease;
  }

  #masthead .menu-toggle-open:hover,
  #masthead .menu-toggle-open:focus {
    color: var(--gold-dark);
    background: transparent;
  }
}

/* Drawer mobile : fond noir, liens clairs, or en accent */
#mobile-drawer .drawer-inner {
  background: var(--ink, #0A0A0A);
}

#mobile-drawer .drawer-header .menu-toggle-close {
  color: rgba(255, 255, 255, 0.75);
}

#mobile-drawer .drawer-header .menu-toggle-close:hover,
#mobile-drawer .drawer-header .menu-toggle-close:focus {
  color: var(--gold);
  background: transparent;
}

#mobile-drawer .mobile-navigation ul li {
  font-family: var(--font-sans);
}

#mobile-drawer .mobile-navigation ul li a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.12rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  transition: color 0.25s ease, padding-left 0.25s ease;
}

#mobile-drawer .mobile-navigation ul li a:hover {
  color: #fff;
  padding-left: 0.35rem;
}

#mobile-drawer .mobile-navigation ul li.current-menu-item > a,
#mobile-drawer .mobile-navigation ul li.current-menu-ancestor > a {
  color: var(--gold);
}

#mobile-drawer .mobile-navigation ul li.current-menu-item > a::before {
  content: "\2014\00a0"; /* tiret cadratin dore */
  color: var(--gold);
}

/* Filet discret entre items */
#mobile-drawer .mobile-navigation ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* =====================================================
   Accessibilite : mouvement reduit
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  #masthead.site-header,
  #masthead .site-header-inner-wrap,
  .site-branding img.custom-logo,
  .site-branding .site-title,
  #masthead #primary-menu > li > a::after,
  #masthead #primary-menu > li:last-child > a {
    transition: none !important;
  }

  /* Jamais de masquage au scroll */
  #masthead.site-header.nav-hidden {
    transform: none;
  }
}

/* =====================================================
   Vague 3-B — polish tactile mobile + safe-area
   (aucun changement desktop)
   ===================================================== */

/* Burger : cible tactile >= 44px */
@media (max-width: 1024px) {
  #masthead .menu-toggle-open {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Admin-bar WP mobile : sous 600px la barre d'admin se
   dé-fixe au scroll, le header fixe doit rester colle en haut */
@media (max-width: 600px) {
  body.admin-bar #masthead.site-header {
    top: 0;
  }
}

/* Safe-area iPhone paysage (encoche) : conteneur interieur du
   header (.site-container, base = --global-content-edge-padding
   Kadence, 1.5rem) + drawer mobile (base 0, aucun changement
   hors appareils a encoche) */
@supports (padding: max(0px)) {
  #masthead .site-header-row-container-inner > .site-container {
    padding-left: max(var(--global-content-edge-padding, 1.5rem), env(safe-area-inset-left));
    padding-right: max(var(--global-content-edge-padding, 1.5rem), env(safe-area-inset-right));
  }

  #mobile-drawer .drawer-inner {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}