/* =====================================================================
   PETRA IMMO — En-tête (header) fidèle aux maquettes Laëtitia.
   Override du header Houzez v1 (template-parts/header/header-1.php).
   Vanilla, sans Bootstrap. Variables héritées de petra-brand/petra-pages.
   ===================================================================== */

/* Neutralise les résidus de structure Houzez autour de notre header. */
.header-main-wrap { background: transparent !important; box-shadow: none !important; }
#header-section.petra-header-wrap { padding: 0 !important; background: transparent !important; border: 0 !important; }
.petra-header .header-inner-wrap, .petra-header .navbar.d-flex { display: block !important; }

/* Notre header n'utilise PLUS la classe Houzez « header-desktop » (qui est masquée en mobile) :
 * il reste donc visible à toutes les tailles et gère lui-même son burger. */
#header-section.petra-header-wrap { display: block !important; }

/* Masque tout header/menu MOBILE natif de Houzez (on a notre propre panneau .main-nav.open). */
.header-mobile, .nav-mobile, .mobile-header,
.header-main-wrap .nav-mobile, .header-main-wrap .header-mobile { display: none !important; }

/* ---- Barre fixe ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding: 1.1rem 0;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  max-width: var(--wrap, 1240px); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.4rem);
  width: 100%; box-sizing: border-box;
}

/* ---- Logo ---- */
.site-header .brand { flex: 0 0 auto; display: inline-flex; align-items: center; }
.site-header .brand img { height: 76px; width: auto; max-width: none; transition: height .5s var(--ease); display: block; }

/* ---- Navigation ---- */
.site-header .main-nav { display: flex; align-items: center; gap: .3rem; }
.site-header .nav-item { position: relative; }
.site-header .nav-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--ff-text, 'Montserrat', sans-serif);
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  padding: .7rem .95rem; border-radius: 2px;
  transition: color .3s var(--ease); white-space: nowrap; text-decoration: none; background: none; border: 0;
}
/* Couleur du menu BLINDÉE (id #petra-header + !important) : Houzez ne colore le menu en blanc
 * que sur les pages marquées « header transparent » (l'accueil). Sur les autres pages, sans
 * cette classe, le menu prenait la couleur sombre par défaut de Houzez → illisible.
 * Notre header étant toujours sur fond sombre (transparent sur hero, ou vert), on force le clair. */
#petra-header.site-header .nav-link { color: rgba(255,255,255,.9) !important; }
#petra-header.site-header .nav-link:hover,
#petra-header.site-header .nav-link.is-active { color: var(--stone) !important; }
.site-header .nav-link .chev {
  width: 7px; height: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); opacity: .8;
}
.site-header .nav-item.has-children:hover .chev { transform: rotate(225deg) translateY(-1px); }

/* ---- Dropdown ---- */
.site-header .dropdown {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--fir-deep); border: 1px solid rgba(217,195,169,.22);
  min-width: 248px; padding: .6rem; border-radius: 4px;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), transform .35s var(--ease);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
/* Pont invisible entre le lien et le panneau : sans lui, la souris traverse l'espace de 6px,
 * quitte le .nav-item et le menu se referme avant qu'on ait pu cliquer un sous-lien. */
.site-header .nav-item.has-children::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
  display: none;
}
.site-header .nav-item.has-children:hover::after,
.site-header .nav-item.has-children:focus-within::after { display: block; }
.site-header .nav-item:hover .dropdown,
.site-header .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.site-header .dropdown::before {
  content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: var(--fir-deep);
  border-left: 1px solid rgba(217,195,169,.22); border-top: 1px solid rgba(217,195,169,.22);
}
.site-header .dropdown a {
  display: block; padding: .66rem .9rem; font-size: .86rem; letter-spacing: .04em;
  color: rgba(255,255,255,.78); border-radius: 3px; text-decoration: none;
  transition: background .25s, color .25s, padding-left .25s;
}
.site-header .dropdown a small {
  display: block; font-size: .72rem; letter-spacing: .02em; color: var(--stone-deep);
  text-transform: uppercase; margin-top: .12rem; opacity: .85;
}
.site-header .dropdown a:hover { background: rgba(217,195,169,.10); color: #fff; padding-left: 1.1rem; }

/* ---- Bouton « Espace investisseur » ----
   Styles ciblés via .nav-cta (et #petra-nav .nav-cta) pour survivre au détachement du
   panneau vers <body> en mobile (où l'ancêtre .site-header n'existe plus). */
.site-header .nav-cta,
#petra-nav .nav-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-text, 'Montserrat', sans-serif);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: var(--fir); background: var(--stone);
  padding: .72rem 1.25rem; border-radius: 2px; border: 1px solid var(--stone); text-decoration: none; margin-left: .4rem;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.site-header .nav-cta:hover,
#petra-nav .nav-cta:hover { background: transparent; color: var(--stone); transform: translateY(-1px); }
.site-header .nav-cta svg,
#petra-nav .nav-cta svg { width: 13px; height: 13px; }

/* Croix de fermeture du drawer (mobile uniquement). */
.petra-nav-close { display: none; }

/* ---- État « scrolled » : fond vert plein ---- */
.site-header.scrolled { background: rgba(14,26,19,.96); backdrop-filter: blur(10px); padding: .55rem 0; box-shadow: 0 1px 0 rgba(217,195,169,.15); }
.site-header.scrolled .brand img { height: 56px; }

/* ---- Pages à fond clair au sommet (Actualités, archives…) : header vert dès le chargement ----
 * Sans hero sombre, le menu blanc transparent serait illisible. On force donc le fond vert
 * et on décale le contenu sous le header fixe. */
body.petra-header-solid .site-header { background: #15251B; box-shadow: 0 1px 0 rgba(217,195,169,.15); }
body.petra-header-solid #main-wrap { padding-top: 92px; }
@media (max-width: 991.98px) { body.petra-header-solid #main-wrap { padding-top: 74px; } }

/* ---- Burger ---- */
.site-header .burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; z-index: 1200; }
.site-header .burger span { display: block; width: 26px; height: 1.6px; background: #fff; transition: transform .4s var(--ease), opacity .3s; }
.site-header .burger.open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.site-header .burger.open span:nth-child(2) { opacity: 0; }
.site-header .burger.open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* ---- Mobile : drawer premium ----
   Le panneau #petra-nav est DÉTACHÉ vers <body> par JS (pour échapper au backdrop-filter
   du header qui casserait son position:fixed). On le cible donc par son id #petra-nav,
   valable où qu'il soit dans le DOM. Le burger reste dans le header. ---- */
@media (max-width: 991.98px) {
  #petra-header .burger { display: flex !important; }

  /* Croix de fermeture en haut à droite du drawer. */
  #petra-nav .petra-nav-close {
    display: block !important; position: absolute !important; top: 1.1rem; right: 1.3rem; z-index: 3;
    width: 40px; height: 40px; padding: 0; line-height: 38px; text-align: center;
    background: none; border: 0; color: rgba(255,255,255,.7); font-size: 2rem; cursor: pointer;
    transition: color .25s, transform .25s;
  }
  #petra-nav .petra-nav-close:hover { color: var(--stone); transform: rotate(90deg); }

  /* Panneau plein écran, glissant depuis la droite, fond vert premium dégradé. */
  #petra-nav.main-nav {
    position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    height: 100% !important; width: min(88vw, 380px) !important; z-index: 1100 !important;
    display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important;
    gap: 0 !important; margin: 0 !important; padding: 5.5rem 1.9rem 2.2rem !important;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(60,80,56,.45), transparent 60%),
      linear-gradient(170deg, #1b2e22 0%, #15251B 42%, #0c1610 100%) !important;
    transform: translateX(100%); transition: transform .45s var(--ease, ease);
    box-shadow: -34px 0 70px -30px rgba(0,0,0,.7); overflow-y: auto;
  }
  #petra-nav.main-nav.open { transform: translateX(0) !important; }

  /* Voile sombre derrière le panneau quand ouvert. */
  #petra-nav.main-nav.open::before {
    content: ""; position: fixed; inset: 0; right: min(88vw, 380px); z-index: -1;
    background: rgba(8,16,11,.55);
  }

  /* Filigrane monogramme dans l'angle inférieur droit du drawer (DA maquette). */
  #petra-nav.main-nav::after {
    content: ""; position: absolute; right: -1.6rem; bottom: -1.6rem; z-index: 0; pointer-events: none;
    width: 230px; height: 230px;
    background: url('https://petra.eloy-eric.fr/wp-content/uploads/2026/06/petra-mono-white-hd.png') no-repeat center/contain;
    opacity: .05;
  }

  /* Items : pleine largeur, espacés, séparateur fin doré, texte clair. */
  #petra-nav .nav-item { width: 100% !important; position: relative; z-index: 1; }
  #petra-nav .nav-link {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    width: 100% !important; padding: 1.15rem .2rem !important;
    font-size: .82rem !important; letter-spacing: .16em !important; text-transform: uppercase !important; font-weight: 500 !important;
    color: #fff !important; border-bottom: 1px solid rgba(217,195,169,.14) !important; background: none !important;
  }
  #petra-nav .nav-link:hover,
  #petra-nav .nav-link.is-active { color: var(--stone) !important; }
  #petra-nav .nav-link .chev {
    width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); opacity: .7; transition: transform .3s var(--ease);
  }
  #petra-nav .nav-item.expanded > .nav-link .chev { transform: rotate(-135deg); }

  /* Sous-menu : replié par défaut, déplié au tap. Sous-titres en doré clair. */
  #petra-nav .dropdown {
    position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; min-width: 0 !important;
    padding: .3rem 0 .6rem .4rem !important; display: none !important;
  }
  #petra-nav .dropdown::before { display: none !important; }
  #petra-nav .nav-item.expanded .dropdown { display: block !important; }
  #petra-nav .dropdown a {
    padding: .74rem .6rem !important; font-size: .86rem !important; letter-spacing: .04em !important;
    color: rgba(255,255,255,.78) !important; text-transform: none !important; border-radius: 4px !important;
  }
  #petra-nav .dropdown a small {
    display: block !important; font-size: .68rem !important; letter-spacing: .12em !important; text-transform: uppercase !important;
    color: var(--stone-deep) !important; margin-top: .15rem !important; opacity: .9 !important;
  }
  #petra-nav .dropdown a:hover { background: rgba(217,195,169,.1) !important; color: #fff !important; }

  /* Bouton « Espace investisseur » détaché, pleine largeur. */
  #petra-nav .nav-cta {
    margin: 1.8rem 0 0 !important; justify-content: center !important; width: 100% !important;
    padding: .95rem 1.25rem !important; font-size: .76rem !important; position: relative; z-index: 1;
  }
}

/* ---- Compensation : le header est fixe → on décale le contenu sous lui ----
   (sauf hero plein écran qui passe SOUS le header transparent). */
body:not(.home) #main-wrap { padding-top: 0; }

/* ---- Neutralisation du survol bleu Houzez dans le header ----
 * Le thème applique « .header-v1…v6 a:hover { color:#00aeff; background-color:rgba(0,174,255,.1) } ».
 * Ce bleu n'est pas dans la charte et le fond translucide se voyait comme un voile, notamment
 * sur le logo. Le menu déroulant et le bouton « Espace investisseur » posent déjà leur propre
 * fond au survol : ils étaient donc protégés. Restaient le logo et les liens du menu, seuls
 * ciblés ici — inutile d'employer un sélecteur plus large, qui écraserait nos propres survols. */
#petra-header .brand:hover,
#petra-header .brand:active,
#petra-header .nav-link:hover,
#petra-header .nav-link:active,
#petra-nav .brand:hover,
#petra-nav .nav-link:hover { background-color: transparent; }