/* =====================================================
   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(217, 180, 33, 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(217, 180, 33, 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: 16px !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: 16px;
}

/* Le libelle complet « ADRIEN CARLIER / ARCHITECTE - URBANISTE » est long :
   on le reduit progressivement pour qu'il ne pousse jamais le menu. */
@media (max-width: 1024px) {
  #masthead .site-branding .site-title,
  #masthead.is-scrolled .site-branding .site-title {
    font-size: 14px !important;
  }
}

@media (max-width: 430px) {
  #masthead .site-branding .site-title,
  #masthead.is-scrolled .site-branding .site-title {
    font-size: 12px !important;
  }
}

#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);
}

/* =====================================================
   Dropdowns desktop (Projets / Prestations / Blog)
   -----------------------------------------------------
   Kadence bascule le sous-menu en display:none/block au
   survol ou au focus (nav--toggle-sub + hover-to-open).
   On force display:block en permanence et on pilote la
   visibilite via opacity/transform pour un vrai fondu,
   au lieu du "pop" instantane par defaut.
   ===================================================== */
#masthead #primary-menu .menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
}

#masthead #primary-menu .nav-drop-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

#masthead #primary-menu .dropdown-nav-toggle svg {
  width: 13px;
  height: 13px;
  color: var(--muted);
  transition: transform 0.3s var(--nav-ease), color 0.25s ease;
}

#masthead #primary-menu > li:hover > a .dropdown-nav-toggle svg,
#masthead #primary-menu > li.menu-item--toggled-on > a .dropdown-nav-toggle svg,
#masthead #primary-menu > li:focus-within > a .dropdown-nav-toggle svg {
  transform: rotate(180deg);
  color: var(--gold-dark);
}

#masthead #primary-menu .sub-menu {
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  width: 280px;
  /* Pas de marge ici : un vide entre le lien et le panneau cree une
     "zone morte" ou la souris perd le survol en diagonale et le
     dropdown se referme avant d'etre atteint. Le panneau reste colle
     (top:100%), le filet or + le padding interne donnent l'air. */
  margin-top: 0;
  padding: 0.7rem 0 !important;
  background: var(--bg);
  border-top: 2px solid var(--gold);
  box-shadow: 0 18px 40px rgba(10, 10, 10, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 0.25s var(--nav-ease),
    transform 0.25s var(--nav-ease),
    visibility 0.25s;
  z-index: 995;
}

/* Pont invisible : couvre le residu de quelques px entre le bas du
   lien et le haut du panneau (bordure, line-height) pour que le
   survol ne "tombe" jamais dans un trou pendant la traversee. */
#masthead #primary-menu .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 20px;
}

#masthead #primary-menu > li:hover > .sub-menu,
#masthead #primary-menu > li.menu-item--toggled-on > .sub-menu,
#masthead #primary-menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

#masthead #primary-menu .sub-menu li {
  border-bottom: 1px solid var(--border);
}

#masthead #primary-menu .sub-menu li:last-child {
  border-bottom: 0;
}

#masthead #primary-menu .sub-menu li a {
  display: block;
  padding: 0.65rem 1.35rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  white-space: normal;
  transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
}

#masthead #primary-menu .sub-menu li a:hover,
#masthead #primary-menu .sub-menu li a:focus {
  color: var(--gold-dark);
  background: var(--bg-alt);
  padding-left: 1.6rem;
}

#masthead #primary-menu .sub-menu li.current-menu-item > a {
  color: var(--gold-dark);
}

/* Le bouton d'accessibilite superpose a la fleche : on le
   rend invisible mais toujours cliquable/focusable (le hover
   CSS suffit en usage souris, le clic couvre tactile/clavier). */
#masthead #primary-menu .dropdown-nav-special-toggle {
  opacity: 0;
}

/* =====================================================
   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(217, 180, 33, 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);
}

/* =====================================================
   Dropdowns mobile (accordeon dans le drawer)
   -----------------------------------------------------
   Kadence enveloppe le lien + le bouton fleche dans
   .drawer-nav-drop-wrap et affiche/masque .sub-menu via
   .show-drawer (JS deja fonctionnel) : on stylise juste
   la ligne (fleche a droite, pleine largeur tactile) et
   la sous-liste indentee, plus sombre/discrete.
   ===================================================== */
#mobile-drawer .drawer-nav-drop-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#mobile-drawer .drawer-nav-drop-wrap a {
  flex: 1 1 auto;
}

#mobile-drawer .drawer-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--gold);
  background: transparent;
  border: 0;
}

#mobile-drawer .drawer-sub-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--nav-ease);
}

#mobile-drawer .drawer-sub-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

#mobile-drawer .menu-item-has-children > .sub-menu {
  background: rgba(255, 255, 255, 0.04);
}

#mobile-drawer .menu-item-has-children > .sub-menu li {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

#mobile-drawer .menu-item-has-children > .sub-menu li a {
  padding-left: 1.75rem;
  font-size: 0.98rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
}

#mobile-drawer .menu-item-has-children > .sub-menu li a:hover {
  color: var(--gold);
  padding-left: 2.1rem;
}

/* =====================================================
   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,
  #masthead #primary-menu .sub-menu,
  #masthead #primary-menu .dropdown-nav-toggle svg,
  #mobile-drawer .drawer-sub-toggle svg {
    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));
  }
}