/* =====================================================
   MOVAWAY — HEADER (site-header + nav + drawer mobile)
   ===================================================== */

/* ============ HEADER ============ */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(241, 243, 246, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo img { height: 34px; width: auto; }
.header-left { display: flex; align-items: center; gap: 22px; }

.phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  background: #fff;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: transform .2s ease;
}
.phone-pill:hover { transform: translateY(-1px); }
.phone-pill .icon {
  width: 25px; height: 25px;
  border-radius: 50%;
  background: url("../img/phone.svg") no-repeat center;
  background-size: contain;
  display: inline-block;
}

/* Top-level UL/A seulement (scope direct child pour ne PAS affecter .dropdown-menu) */
nav.primary-nav > ul {
  display: flex;
  list-style: none;
  gap: 32px;
  align-items: center;
}
nav.primary-nav > ul > li > a {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  transition: color .15s ease;
}
nav.primary-nav > ul > li > a:hover { color: var(--primary); }

/* Dropdown */
/* Support des classes natives wp_nav_menu (générées quand l'admin assigne un menu via Apparence → Menus) :
   - WordPress utilise .menu-item-has-children (vs .has-dropdown)
   - WordPress utilise ul.sub-menu (vs ul.dropdown-menu)
   On accepte LES DEUX pour fonctionner aussi bien avec le fallback codé en dur qu'avec
   un menu personnalisé administré. */
.has-dropdown,
.menu-item-has-children { position: relative; }
.has-dropdown > a,
.menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.has-dropdown > a::after,
.menu-item-has-children > a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform .25s ease;
}
.has-dropdown:hover > a::after,
.has-dropdown:focus-within > a::after,
.menu-item-has-children:hover > a::after,
.menu-item-has-children:focus-within > a::after {
  transform: rotate(225deg);
  margin-top: 3px;
}
.dropdown-menu,
.sub-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 0; /* aligné sur le bord gauche du parent (chevron exclu) */
  transform: translateY(-8px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px;
  min-width: 200px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* items full width — pas centrés */
  gap: 10px;              /* 10px d'espace vertical entre items */
}
.dropdown-menu::before,
.sub-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 24px; /* fixé à gauche pour pointer vers le label "Logements" */
  transform: rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* Bridge invisible pour éviter de perdre le hover entre le label et le menu */
.has-dropdown::after,
.menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 20px;
}
.dropdown-menu li,
.sub-menu li { margin: 3px; list-style: none; }
/* Sous-menus : flex + drapeau en 1er avec marge 10px à gauche, padding du lien à 0 */
.dropdown-menu a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  transition: color .15s ease;
}
.dropdown-menu a:hover { color: var(--primary); }
.dropdown-menu .fi {
  margin-left: 10px;       /* aligné à 10px du bord gauche du lien */
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(10,23,51,0.08);
}

.header-right { display: flex; align-items: center; gap: 26px; }
.menu-toggle { display: none; }


/* ============ Header responsive (resserrer la nav à partir de 1024px) ============ */
@media (max-width: 1024px) {
  nav.primary-nav > ul { gap: 20px; }
  nav.primary-nav > ul > li > a { font-size: 16px; }
}

/* CTA mobile (caché en desktop, visible dans le drawer mobile) */
.mobile-cta { display: none; }

/* ============ Header mobile drawer ============ */
@media (max-width: 900px) {
  /* Nav cachée par défaut, .phone-pill aussi, et CTA desktop (pas dans la nav) */
  .phone-pill, .header-right > .btn-primary { display: none; }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: transparent;
    z-index: 102;
  }
  .menu-toggle span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
  }
  /* Croix au lieu du burger quand ouvert */
  .nav-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Drawer mobile : slide depuis la droite. Flex column pour pousser le CTA en bas */
  .primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 75%;
    max-width: 300px;
    height: 100vh;
    background: #fff;
    box-shadow: -10px 0 30px rgba(0, 8, 56, 0.12);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), visibility .3s;
    z-index: 101;
    padding: 90px 0 24px;
    overflow-y: auto;
    visibility: hidden;
    display: flex;
    flex-direction: column;
  }
  .nav-open .primary-nav {
    transform: translateX(0);
    visibility: visible;
  }
  .primary-nav ul {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* Trait séparateur : sur le LIEN principal (pas sur le <li>) → largeur identique
     même quand le sous-menu est déployé (la trait reste juste sous "Logements") */
  .primary-nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    border-bottom: 1px solid var(--border);
  }
  /* Pas de border sous le dernier item (évite la double ligne avant le CTA) */
  .primary-nav > ul > li:last-child > a {
    border-bottom: 0;
  }

  /* Chevron sur "Logements" — signale qu'un sous-menu existe ; rotate quand ouvert */
  .primary-nav .has-dropdown > a::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin: -3px 0 0 12px;
    transition: transform .25s ease, margin-top .25s ease;
    flex-shrink: 0;
  }
  .primary-nav .has-dropdown.is-open > a::after {
    transform: rotate(225deg);
    margin-top: 3px;
  }
  /* Bridge desktop masqué */
  .primary-nav .has-dropdown::after { content: none; }

  /* Sous-menu : fermé par défaut, fond transparent, items décalés vers la droite */
  .primary-nav .dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    margin: 0;
    min-width: 0;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    padding: 0;
    gap: 10px; /* 10px d'espace vertical entre items mobile */
    transition: max-height .35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity .25s ease,
                padding .35s ease;
  }
  .primary-nav .has-dropdown.is-open .dropdown-menu {
    max-height: 400px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding: 8px 0 12px;
  }
  .primary-nav .dropdown-menu::before { display: none; }
  /* Sous-menu : pas de tirets entre items */
  .primary-nav .dropdown-menu li { border: 0; margin: 0; }
  /* Items du sous-menu : padding 4px, drapeau à 10px du bord gauche du lien */
  .primary-nav .dropdown-menu a {
    padding: 4px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-soft);
    background: transparent;
    text-align: left;
  }
  .primary-nav .dropdown-menu .fi {
    margin-left: 10px;
  }
  .primary-nav .dropdown-menu a:hover {
    color: var(--primary);
    background: transparent;
  }

  /* CTA "Contactez-nous" en bas du drawer (poussé par flex column + margin-top: auto) */
  .primary-nav .mobile-cta {
    display: inline-flex;
    justify-content: center;
    margin: auto 12px 8px;
    padding: 14px 24px;
    font-size: 15px;
    /* Force la couleur blanche (sinon nav.primary-nav a (specificity 0,1,2) override .btn-primary) */
    color: #fff;
  }
  .primary-nav .mobile-cta:hover { color: #fff; }

  /* Overlay sombre */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 8, 56, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    z-index: 99;
  }
  .nav-open body::after,
  html.nav-open body::after {
    opacity: 1;
    visibility: visible;
  }
  /* Empêche le scroll du body quand le menu est ouvert */
  html.nav-open { overflow: hidden; }
}

/* ============ RECHERCHE LOGEMENT (loupe header + panneau) ============ */
.mvw-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .1s ease;
}
.mvw-search-toggle:hover {
  color: var(--primary);
  border-color: var(--primary);
}
.mvw-search-toggle[aria-expanded="true"] {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.mvw-search-toggle:active { transform: scale(.94); }

/* Panneau déroulant */
.mvw-hsearch {
  position: absolute;
  top: calc(100% + 10px);
  right: max(16px, calc((100% - var(--max-w, 1280px)) / 2 + 16px));
  width: min(600px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 18px;
  z-index: 120;
  transform-origin: top right;
  animation: mvwHsearchIn .18s cubic-bezier(.2, .8, .3, 1);
}
.mvw-hsearch[hidden] { display: none; }
@keyframes mvwHsearchIn {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.mvw-hsearch-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mvw-hsearch-heading svg { color: var(--primary); flex: none; }

/* ============ BARRE DE RECHERCHE (composant partagé loupe + hero) ============ */
.mvw-searchbar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  padding: 7px 7px 7px 6px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.mvw-searchbar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow-md);
}
.mvw-sb-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 8px 0 16px;
  min-width: 0;
}
.mvw-sb-ville { flex: 0 0 auto; }
.mvw-sb-kw    { flex: 1 1 auto; }
.mvw-sb-icon    { color: var(--primary); flex: none; }
.mvw-sb-chevron { color: var(--ink-mute); flex: none; margin-left: -4px; pointer-events: none; }
.mvw-sb-sep {
  width: 1px;
  align-self: stretch;
  margin: 10px 2px;
  background: var(--border);
  flex: none;
}
.mvw-sb-select,
.mvw-sb-input {
  border: 0;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  height: 100%;
  min-width: 0;
  padding: 0;
}
.mvw-sb-select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-weight: 600;
  padding-right: 2px;
}
/* Dropdown custom (remplace la liste native non stylée via JS, cf. scripts.js).
   Sans JS, le <select> natif reste visible et fonctionnel. */
.mvw-sb-ville.is-cselect { position: relative; }
.mvw-sb-ville.is-cselect .mvw-sb-select { display: none; }
.mvw-cselect-btn {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  height: 100%;
}
.mvw-sb-ville.is-cselect.is-open .mvw-sb-chevron { transform: rotate(180deg); }
.mvw-sb-chevron { transition: transform .2s ease; }
.mvw-cselect-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: -6px;
  min-width: 230px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 60;
}
.mvw-cselect-panel[hidden] { display: none; }
.mvw-cselect-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}
.mvw-cselect-opt:hover,
.mvw-cselect-opt.is-active { background: var(--bg-soft); }
.mvw-cselect-opt[aria-selected="true"] {
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 700;
}
.mvw-cselect-opt::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0;
  flex: none;
}
.mvw-cselect-opt[aria-selected="true"]::before { opacity: 1; }
.mvw-sb-input { width: 100%; }
.mvw-sb-input::placeholder { color: var(--ink-mute); }
.mvw-sb-submit {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary-cta);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, transform .1s ease;
}
.mvw-sb-submit:hover { background: var(--primary-dark); }
.mvw-sb-submit:active { transform: scale(.97); }
.mvw-sb-submit svg { flex: none; }

/* Variantes */
.mvw-searchbar--compact { box-shadow: var(--shadow-sm); }
.mvw-searchbar--compact .mvw-sb-field,
.mvw-searchbar--compact .mvw-sb-submit { height: 46px; }
.mvw-searchbar--compact .mvw-sb-submit { padding: 0 20px; }

/* Empilement mobile : chaque champ redevient une pilule bordée */
@media (max-width: 600px) {
  .mvw-hsearch { right: 12px; left: 12px; width: auto; }
  .mvw-searchbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-radius: 18px;
    padding: 10px;
  }
  .mvw-sb-field {
    border: 1px solid var(--border);
    border-radius: 12px;
    height: 50px;
    padding: 0 14px;
  }
  .mvw-sb-ville, .mvw-sb-kw { flex: 1 1 auto; }
  .mvw-sb-select { max-width: none; flex: 1; }
  .mvw-sb-sep { display: none; }
  .mvw-sb-submit { width: 100%; justify-content: center; border-radius: 12px; }
}