/**
 * Composant de navigation d'en-tête — MENUS DÉROULANTS + BOUTONS CTA.
 * ---------------------------------------------------------------------------
 * DÉ-SCOPÉ VOLONTAIREMENT.
 *
 * Les règles historiques de l'en-tête (.nav-left, .nav-right, .brand,
 * .header-grid…) sont dupliquées dans CHAQUE fichier de scope
 * (body.is-front, body.bgfi-page-{slug}) et NE DOIVENT PAS être modifiées :
 * elles constituent la zone protégée contre les régressions.
 *
 * Ce fichier n'introduit QUE des classes NOUVELLES, absentes de tous les
 * scopes existants (.has-dropdown, .nav-dropdown, .nav-caret, .nav-cta,
 * .bgfi-cta-btn…). Aucune collision de spécificité n'est donc possible : les
 * menus déroulants et les boutons s'affichent à l'identique sur toutes les
 * pages, quel que soit le body-scope, sans toucher au design validé.
 *
 * Chargé globalement (sur chaque page), juste après common.css.
 *
 * @package BGFI_Immobilier
 */

/* ------------------------------------------------------------------ */
/*  0. Centrage du logo + équilibrage des deux groupes de navigation   */
/* ------------------------------------------------------------------ */

/* La grille reste 1fr auto 1fr (logo mathématiquement centré). On aligne
   chaque colonne CONTRE le logo pour un équilibre visuel symétrique :
   groupe gauche poussé à droite, groupe droit poussé à gauche. */
.site-header .header-grid > .nav-left {
  justify-content: flex-end;
}

.site-header .header-grid > .nav-right {
  justify-content: flex-start;
}

/* Espacements homogènes de part et d'autre du logo. */
.site-header .nav-left {
  padding-right: 6px;
}

.site-header .nav-right {
  padding-left: 6px;
}

/* ------------------------------------------------------------------ */
/*  1. Déroulants — conteneur                                          */
/* ------------------------------------------------------------------ */

.nav-left .has-dropdown,
.nav-right .has-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Le lien parent réutilise le style .nav-link / lien de nav existant ;
   on ajoute seulement le chevron et le décalage du soulignement animé. */
.nav-left .has-dropdown > a,
.nav-right .has-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.nav-caret {
  font-size: .62rem;
  line-height: 1;
  transition: transform var(--t, .35s ease);
  opacity: .85;
}

.has-dropdown:hover > a .nav-caret,
.has-dropdown.open > a .nav-caret {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------------ */
/*  2. Déroulants — panneau                                            */
/* ------------------------------------------------------------------ */

.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 268px;
  background: #fff;
  border: 1px solid var(--border, rgba(8, 56, 104, .12));
  border-radius: 12px;
  box-shadow: var(--shadow-lg, 0 22px 60px rgba(8, 56, 104, .18));
  padding: 10px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t, .35s ease), transform var(--t, .35s ease), visibility var(--t, .35s ease);
  z-index: 1200;
}

/* Petit pont invisible pour que le survol ne « tombe » pas dans le vide
   entre le lien parent et le panneau. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

/* Flèche du panneau */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 13px;
  height: 13px;
  background: #fff;
  border-left: 1px solid var(--border, rgba(8, 56, 104, .12));
  border-top: 1px solid var(--border, rgba(8, 56, 104, .12));
  border-radius: 3px 0 0 0;
}

.has-dropdown:hover > .nav-dropdown,
.has-dropdown.open > .nav-dropdown,
.has-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Items du panneau — style neutre indépendant du scope */
.nav-dropdown li {
  margin: 0;
}

.site-header .has-dropdown .nav-dropdown > li > a {
  display: block;
  position: relative;
  padding: 12px 16px 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy, #083868) !important;
  white-space: nowrap;
  transition: background var(--t, .35s ease), color var(--t, .35s ease), padding-left var(--t, .35s ease);
}

/* Fin liseré sage à gauche, révélé au survol (plus sobre que des icônes) */
.site-header .has-dropdown .nav-dropdown > li > a::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translateY(-50%) scaleY(0) !important;
  width: 3px !important;
  height: 18px !important;
  border-radius: 3px;
  background: var(--sage, #6d7a52);
  transition: transform var(--t, .35s ease);
}

.site-header .has-dropdown .nav-dropdown > li > a:hover::after {
  transform: translateY(-50%) scaleY(1) !important;
  width: 3px !important;
}

.site-header .has-dropdown .nav-dropdown > li > a:hover {
  background: var(--cream, #f7f4ef);
  padding-left: 22px;
  color: var(--navy, #083868) !important;
}

/* ------------------------------------------------------------------ */
/*  3. Boutons CTA (Contact + Formulaire en ligne)                    */
/* ------------------------------------------------------------------ */

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 22px;
}

.bgfi-cta-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 20px !important;
  border-radius: 999px;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  transition: transform var(--t, .35s ease), box-shadow var(--t, .35s ease),
    background var(--t, .35s ease), color var(--t, .35s ease), border-color var(--t, .35s ease);
}

/* Neutralise le soulignement animé ::after hérité */
.bgfi-cta-btn::after {
  display: none !important;
}

.bgfi-cta-btn i {
  font-size: .8rem;
}

/* Bouton secondaire : Contact (contour) */
.bgfi-cta-btn.bgfi-cta-ghost {
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, .55);
  background: transparent;
}

.bgfi-cta-btn.bgfi-cta-ghost:hover {
  background: #fff;
  color: var(--navy, #083868) !important;
  border-color: #fff;
  transform: translateY(-2px);
}

/* Bouton principal : Formulaire en ligne (plein) */
.bgfi-cta-btn.bgfi-cta-solid {
  color: #fff !important;
  background: var(--sage, #6d7a52);
  border: 1.5px solid var(--sage, #6d7a52);
  box-shadow: 0 6px 18px rgba(109, 122, 82, .32);
}

.bgfi-cta-btn.bgfi-cta-solid:hover {
  background: var(--sage-2, #4a5246);
  border-color: var(--sage-2, #4a5246);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(109, 122, 82, .42);
}

/* --- État « scrolled » (fond blanc, texte marine) sur toutes les pages --- */
.site-header.scrolled .nav-caret {
  color: var(--navy, #083868);
}

.site-header.scrolled .bgfi-cta-btn.bgfi-cta-ghost {
  color: var(--navy, #083868) !important;
  border-color: rgba(8, 56, 104, .35);
}

.site-header.scrolled .bgfi-cta-btn.bgfi-cta-ghost:hover {
  background: var(--navy, #083868);
  color: #fff !important;
  border-color: var(--navy, #083868);
}

/* Le bouton plein garde son fond sage en scrolled (bon contraste). */

/* ------------------------------------------------------------------ */
/*  4. Menu mobile — sous-menus (accordéon léger)                     */
/* ------------------------------------------------------------------ */

.mobile-nav .m-group > .m-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.mobile-nav .m-group > .m-group-toggle .nav-caret {
  font-size: .7rem;
}

.mobile-nav .m-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t, .35s ease);
}

.mobile-nav .m-group.open .m-submenu {
  max-height: 520px;
}

.mobile-nav .m-submenu a {
  padding-left: 16px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  font-size: .9rem !important;
  opacity: .92;
}

.mobile-nav .m-group.open > .m-group-toggle .nav-caret {
  transform: rotate(180deg);
}

/* Boutons CTA dans le tiroir mobile */
.mobile-nav .m-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.mobile-nav .m-cta .bgfi-cta-btn {
  justify-content: center;
  width: 100%;
  padding: 13px 20px !important;
}

.mobile-nav .m-cta .bgfi-cta-btn.bgfi-cta-ghost {
  color: var(--navy, #083868) !important;
  border-color: rgba(8, 56, 104, .3);
}

.mobile-nav .m-cta .bgfi-cta-btn.bgfi-cta-ghost:hover {
  background: var(--navy, #083868);
  color: #fff !important;
}

/* ------------------------------------------------------------------ */
/*  5. Réglages responsives des largeurs de nav                        */
/* ------------------------------------------------------------------ */

/* Sur les écrans intermédiaires, on resserre un peu les espacements pour
   garder le logo parfaitement centré avec 3 entrées + 2 boutons. */
@media (min-width: 992px) and (max-width: 1200px) {

  .nav-left,
  .nav-right {
    gap: 20px !important;
  }

  .nav-cta {
    gap: 12px;
  }

  .bgfi-cta-btn {
    padding: 9px 15px !important;
    font-size: .74rem;
  }
}