/* =========================================================
   unéo — site-header.css
   Nav v4 partagée, chargée sur index.html + les pages à hero photo/vidéo
   plein écran (gestion-multiresidentielle, gestion-commerciale-mixte,
   service-de-location). S'appuie sur tokens.css. Voir SECTIONS.md.

   Par défaut : nav pleine (fond crème), le même état visuel que la classe
   ".scrolled". Ajouter .site-header--floating sur les pages dont le hero est
   une photo/vidéo sombre plein écran : la nav démarre transparente, texte
   crème, logo crème — puis bascule au style plein via .scrolled (déjà géré
   par main.js sur toutes les pages, aucun changement JS requis).
   ========================================================= */

@font-face{
  font-family: "Geist";
  src: url("../fonts/geist-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--c-creme);
  border-bottom: 1px solid var(--c-gres);
  box-shadow: none;
  transition: background .3s ease, border-color .3s ease;
}
/* style.css pose un calque flou crème toujours visible en ::before
   (backdrop-filter, opacity:1 par défaut) — invisible ici puisque le fond
   du header est déjà crème plein, MAIS il perce derrière un header
   transparent (.site-header--floating) et rend la nav semi-opaque au lieu
   de laisser voir la photo/vidéo. Masqué explicitement, revient avec .scrolled. */
.site-header::before{ transition: opacity .3s ease; }
.site-header--floating::before{ opacity: 0; }
.site-header--floating.scrolled::before{ opacity: 1; }
.site-header .container{
  display: flex; align-items: center; justify-content: flex-start;
  height: 78px; gap: var(--space-3, 16px);
}
/* La nav (Multi-résidentiel / Commercial / Avec unéo / À propos) respire
   davantage du logo — signalé le 2026-08-19, elle collait au wordmark avec
   le seul petit intervalle de base du container. Espace fixe entre logo et
   nav ; le reste de l'espace excédentaire est poussé devant le CTA, qui
   reste collé au sélecteur de langue (corrigé le 2026-08-19 — un essai
   précédent avec margin-left:auto sur .main-nav avait déplacé les liens
   eux-mêmes, ce que l'utilisateur ne voulait pas cette fois-là : seul le
   bouton devait se rapprocher). Les deux ajustements coexistent : marge
   fixe après le logo, marge auto avant le CTA. */
@media (min-width: 901px){
  .site-header .main-nav{ margin-left: clamp(40px, 5vw, 80px); }
  .site-header .header-cta{ margin-left: auto; }
}
.site-header .brand{ position: relative; display: inline-flex; }
.site-header .brand img{
  height: 34px; width: auto; aspect-ratio: 800/274; padding: .21em; box-sizing: content-box;
  transition: opacity .3s ease;
}
.site-header .brand img.logo-floating{ position: absolute; inset: 0; opacity: 0; }

.site-header .main-nav > ul{ display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.site-header .main-nav > ul > li > a::after{ display: none; } /* le poids suffit, pas de soulignement de l'ancien système */
.site-header .main-nav > ul > li > a,
.site-header .nav-drop-btn{
  font-family: var(--f-poids);
  font-weight: 400;
  color: var(--c-charbon);
  font-size: 16px;
  text-decoration: none;
  transition: font-weight 120ms var(--ease), color .3s ease;
}
.site-header .main-nav > ul > li > a:hover,
.site-header .main-nav > ul > li > a[aria-current],
.site-header .main-nav > ul > li > a.active,
.site-header .nav-drop-btn:hover,
.site-header .nav-drop-btn.active{ font-weight: 600; }
.site-header .nav-drop-btn svg{ transition: transform .3s var(--ease); }

/* Action secondaire en contour au repos (COMPONENTS.md §10) : un seul
   remplissage vert par écran, celui de la capsule du hero/CTA final. Le vert
   n'apparaît qu'au survol — précisé le 2026-08-18, un essai précédent l'avait
   rendu permanent par erreur. */
.site-header .header-cta{
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--cible-desktop);
  padding: 0 20px;
  font-family: var(--f-poids); font-size: 16px; font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--c-gres);
  border-radius: var(--r-pill);
  color: var(--c-charbon);
  transition: background var(--dur-nav) var(--ease), color var(--dur-nav) var(--ease), border-color var(--dur-nav) var(--ease);
}
.site-header .header-cta:hover,
.site-header .header-cta:focus-visible{
  background: var(--c-vert);
  border-color: var(--c-vert);
  color: var(--c-creme);
}
.site-header .header-tel{
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--cible-desktop);
  padding: 0 18px;
  font-family: var(--f-poids); font-size: 16px; font-weight: 600;
  color: var(--c-charbon);
  border: 1px solid var(--c-gres);
  border-radius: var(--r-pill);
}

/* Sélecteur de langue — EN pas encore construit (signalé le 2026-08-18),
   href="#" en attente du contenu anglais. Texte simple, pas de pastille,
   pour rester visuellement subordonné au CTA primaire (CLAUDE.md §4.1). */
.site-header .header-lang{
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--cible-desktop);
  padding: 0 4px;
  font-family: var(--f-poids); font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-charbon);
  text-decoration: none;
  transition: color .3s ease;
}
.site-header .header-lang:hover,
.site-header .header-lang:focus-visible{ color: var(--c-vert); }
.site-header .header-call{ color: var(--c-vert); }

/* ---------- Variante flottante : hero photo/vidéo sombre ---------- */
.site-header--floating{
  background: transparent;
  border-bottom-color: transparent;
}
.site-header--floating.scrolled{
  background: var(--c-creme);
  border-bottom-color: var(--c-gres);
}
.site-header--floating:not(.scrolled) .brand img.logo-floating{ opacity: 1; }
.site-header--floating:not(.scrolled) .brand img.logo-solid{ opacity: 0; }
.site-header--floating:not(.scrolled) .main-nav:not(.nav-open) > ul > li > a,
.site-header--floating:not(.scrolled) .nav-drop-btn,
.site-header--floating:not(.scrolled) .header-tel,
.site-header--floating:not(.scrolled) .header-lang{
  color: var(--c-creme);
  text-shadow: var(--ombre-texte-photo);
}
.site-header--floating:not(.scrolled) .header-cta{
  /* Vert plein tant que la nav flotte sur la photo (précisé le 2026-08-18) —
     dès le scroll, la nav passe crème et le bouton revient au contour du
     repos par défaut (ci-dessus), le vert redevenant réservé au survol. */
  background: var(--c-vert);
  border-color: var(--c-vert);
  color: var(--c-creme);
}
.site-header--floating:not(.scrolled) .header-tel{
  border-color: var(--creme-bordure);
}

/* Lien de langue dupliqué dans la liste du menu mobile (le .header-lang du
   header reste masqué en mobile) — ajouté le 2026-08-19, sans lui aucun accès
   à la version EN/FR n'existait une fois le menu plein écran ouvert. */
.nav-lang-mobile{ display: none; }

/* ---------- Mobile : menu plein écran ---------- */
@media (max-width: 900px){
  .site-header .header-cta,
  .site-header .header-tel,
  .site-header .header-call,
  .site-header .header-lang{ display: none; }
  .nav-lang-mobile{ display: list-item; }
  /* header-cta porte le margin-left:auto en desktop, mais il est masqué ici —
     sans lui, logo et hamburger (les deux seuls éléments visibles restants)
     se retrouvent collés à gauche. Corrigé le 2026-08-19 : le hamburger doit
     rester ancré à droite dans tous les états de la nav, sur toutes les pages. */
  .site-header .nav-toggle{ margin-left: auto; }
  .main-nav.nav-open{ background: var(--c-creme); }
  .main-nav.nav-open ul{ gap: 8px; }
  .site-header:has(.main-nav.nav-open) .header-cta,
  .site-header:has(.main-nav.nav-open) .header-tel{ display: none; }
  .main-nav.nav-open .nav-tel-mobile{
    display: inline-flex; align-items: center; justify-content: center;
    height: var(--cible-mobile);
    padding: 0 24px;
    margin-top: 24px;
    font-family: var(--f-poids);
    font-size: 16px; font-weight: 600;
    color: var(--c-charbon);
    border: 1px solid var(--c-gres);
    border-radius: var(--r-pill);
  }
  .main-nav.nav-open > ul > li > a,
  .main-nav.nav-open .nav-drop-btn{
    font-family: var(--f-poids);
    font-size: clamp(24px, 6vw, 32px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
  }
  .main-nav.nav-open > ul > li > a.nav-cta-mobile{
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; margin-top: 32px; width: 100%;
    font-size: 16px; font-weight: 600; padding: 16px 24px;
    background: var(--c-vert); color: var(--c-creme); border-radius: var(--r-pill);
  }
  .main-nav.nav-open > ul > li > a.nav-cta-mobile:hover{ font-weight: 600; }
}