/* ==========================================================================
   Lucid Archviz — en-tête partagé
   Porté depuis grapheva/website (.site-header) : même hauteur, même fond
   flouté, même nav centrée. Trois différences assumées :
     • la barre est flottante en permanence (cf. plus bas) ;
     • à droite, le bouton « Contact » est remplacé par le logo client ;
     • pas de bouton de thème — la visionneuse 3D n'est pas thémable.
   Dépend de brand.css pour les jetons.
   ========================================================================== */
/* Barre flottante — l'état « .is-scrolled » du site, mais permanent : la
   visionneuse ne défile pas (body en overflow:hidden), il n'y a donc pas de
   position haute à quitter, et la galerie garde le même repère du haut en bas
   de page. overflow:hidden pour que le menu mobile épouse les angles. */
.site-header{
  position: fixed; left:0; right:0; top: 14px; z-index: 100;
  /* Plus large que la pastille du site (1040px) : la nav porte cinq entrées
     et la barre se termine par un logo client, là où le site a quatre
     entrées et un bouton. À 1040px le contenu ne tenait plus. */
  width: min(1200px, calc(100% - 28px));
  margin-inline: auto;
  background: var(--header-bg-scrolled);
  backdrop-filter: var(--header-blur);
  -webkit-backdrop-filter: var(--header-blur);
  border: 1px solid var(--border);
  /* 5px, comme les tuiles et l'overlay de la galerie et toute la chrome de
     la visionneuse — et non le --radius-lg (18px) hérité du site. */
  border-radius: 5px;
  box-shadow: var(--shadow-dropdown);
  overflow: hidden;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
/* La pastille borne déjà la largeur : pas de max-width ici, juste la marge
   intérieure. */
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 78px;
  width:100%;
  padding-inline: 24px;
}
/* Sélecteur composé volontaire : main.css de la maquette impose Manrope via
   `*`, chargé après. Cibler les descendants par classe reprend la main. */
/* L'en-tête porte son propre border-box : il est monté dans des pages qui
   n'ont pas toutes un reset (la maquette n'en avait pas), et sans lui
   .header-inner rend 48px plus large que la pastille — padding compris —
   ce qui éjecte le logo client par la droite. */
.site-header,
.site-header *{ box-sizing: border-box; }

.site-header,
.site-header *{ font-family: var(--font-sans); }
.site-header a{ color: inherit; text-decoration: none; }
.site-header button{ cursor: pointer; }

/* ---- Marque : logomark + mot-signe Grapheva, comme sur le site ----
   Les deux tracés sont en currentColor et héritent donc de --ink via .brand. */
.brand{
  display:flex; align-items:center; gap:12px;
  color: var(--ink);
  flex-shrink:0;
  transition: color .3s var(--ease);
}
.brand-logo{ height: 30px; width: auto; display:block; flex-shrink:0; }
.brand-type{ height: 18px; width: auto; display:block; }

/* Nom du projet — posé après coup depuis la feuille, séparé de la marque par
   un filet. Discret : la marque reste l'élément principal. */
.brand-project{
  display:flex; align-items:center;
  margin-left: 14px;
  padding-left: 15px;
  border-left: 1px solid var(--border);
  font-size: .8rem; font-weight: 500; letter-spacing: .04em;
  color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.brand-project[hidden]{ display:none; }

/* ---- Nav ---- */
.nav{ display:flex; align-items:center; gap:28px; margin-inline:auto; padding-left: 40px; min-width: 0; }
.nav-link{
  font-size:.92rem; font-weight:500; color: var(--ink-muted);
  display:flex; align-items:center; gap:6px;
  background:none; border:none; padding:0;
  transition: color .2s var(--ease);
}
.nav-link:hover{ color: var(--ink); }
.nav-link.is-active{ color: var(--accent-text); }

/* ---- Logo client (à la place du bouton Contact du site) ----
   Cadre neutre : les logos clients arrivent en PNG de rapports de forme très
   variables, la hauteur est donc bornée et le fond reste transparent. */
.client-logo{
  flex-shrink:0;
  margin-left: 14px;
  /* Dégagé du bord droit de la pastille */
  margin-right: 14px;
  display:inline-flex; align-items:center; justify-content:center;
  height: 42px; padding: 0 4px;
}
.client-logo img,
.client-logo svg{
  height: 100%; width:auto; max-width: 132px;
  object-fit: contain; display:block;
}
/* Repli tant qu'aucun logo client n'est fourni : le gabarit SVG dessine
   lui-même son cadre en pointillés, en currentColor. */
.client-logo.is-placeholder{
  color: var(--ink-muted);
  opacity: .9;
}

/* ---- Burger + nav mobile ---- */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; margin-left:12px;
}
.nav-toggle span{
  width:100%; height:2px; background: var(--ink); border-radius:2px;
  transition: transform .25s var(--ease), opacity .25s var(--ease), background-color .3s var(--ease);
}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column; gap:2px;
  max-height:0; overflow:hidden;
  background: var(--bg-elevated);
  transition: max-height .35s var(--ease), background-color .3s var(--ease);
}
.mobile-nav.is-open{ max-height: 400px; }
.mobile-nav .nav-link{
  display:block;
  padding: 16px 24px; font-size:.95rem; font-weight:500; color: var(--ink-muted);
  border-top:1px solid var(--border);
  width:100%; text-align:left;
}

/* Dégressif : on rend d'abord la gouttière de la nav, puis le nom du projet,
   puis la taille des libellés — et seulement ensuite on bascule en burger. */
@media (max-width: 1200px){
  .nav{ gap: 20px; padding-left: 24px; }
}
@media (max-width: 1080px){
  .nav{ gap: 16px; padding-left: 0; }
  .brand-project{ display:none; }
}
@media (max-width: 980px){
  .nav{ gap: 12px; }
  .nav-link{ font-size:.86rem; }
}
@media (max-width: 900px){
  .nav{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav{ display:flex; }
  .header-inner{ height:68px; }
  .client-logo{ margin-left:auto; height: 32px; }
  /* Le mot-signe et le nom du projet sortent en premier : le logomark seul
     suffit à identifier la marque sur un écran étroit. */
  .brand-type{ display:none; }
  .brand-project{ display:none; }
}