/* ============================================
   Header / Navbar (Figma 1:3893 — 1400×56)
   Bar transparente sur sections sombres,
   blanche sur sections claires ; blob central
   noir avec épaulements concaves (SVG Framer).
   ============================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* barre TOUJOURS transparente (comme l'original) :
     le contenu de la page défile derrière */
  background: transparent;
}

.nav {
  position: relative;
  height: var(--nav-h);
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Logo SVG TMT Design : blanc sur sections sombres,
       anthracite sur sections claires --- */
.nav__logo { display: flex; align-items: center; }
.nav__logo .logo-svg { transition: color 0.3s ease; }
.site-header[data-theme='light'] .nav__logo .logo-svg { color: #232323; }

/* --- Blob central : flare + liens + flare ---
   Blanc (liens noirs) au-dessus du hero,
   noir (liens blancs) partout ailleurs. --- */
.nav__center {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: var(--nav-h);
  display: flex;
  align-items: stretch;
  color: var(--c-black); /* pilote la couleur du blob entier */
  transition: color 0.3s ease;
}

/* Sections SOMBRES (hero, réalisations, footer) : blob blanc, liens noirs */
.site-header[data-theme='dark'] .nav__center { color: var(--c-white); }
.site-header[data-theme='dark'] .nav__roll span { color: var(--c-black); }
.site-header[data-theme='dark'] .nav__roll span + span { color: var(--c-gold); }

.nav__flare {
  width: 120px;
  height: var(--nav-h);
  flex: none;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.nav__flare--l {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 41'%3E%3Cpath d='M0 0C0 0 19.005 1.543 34.697 19.235C50.389 36.927 60.05 41 88 41L88 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 41'%3E%3Cpath d='M0 0C0 0 19.005 1.543 34.697 19.235C50.389 36.927 60.05 41 88 41L88 0Z'/%3E%3C/svg%3E");
}

.nav__flare--r {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 41'%3E%3Cpath d='M88 0C88 0 68.995 1.543 53.303 19.235C37.611 36.927 27.95 41 0 41L0 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 41'%3E%3Cpath d='M88 0C88 0 68.995 1.543 53.303 19.235C37.611 36.927 27.95 41 0 41L0 0Z'/%3E%3C/svg%3E");
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  background: currentColor;
  padding: 7px 4px;
  margin-inline: -1px; /* évite un liseré entre flare et bloc */
}

.nav__link {
  display: flex;
  align-items: center;
  height: 42px;
  overflow: hidden;
}

.nav__roll {
  position: relative;
  display: block;
  overflow: hidden; /* clippe la copie dorée qui glisse au survol */
}

.nav__roll span {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: var(--lh-ui);
  letter-spacing: 0;
  color: var(--c-white);
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* copie or qui glisse au survol (Figma « Text 2 » #B57505) */
.nav__roll span + span {
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--c-gold);
}

.nav__link:hover .nav__roll span { transform: translateY(-100%); }

/* lien actif (scrollspy) : orange Sea Buckthorn */
.nav__link.is-active .nav__roll span { color: var(--c-orange); }

/* --- Pilule Contact : liseré blanc intérieur (visible sur fonds sombres),
       sans modifier la géométrie 146×44 --- */
.btn-pill--nav { box-shadow: inset 0 0 0 1.5px var(--c-white); }

/* --- Burger (mobile) --- */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 28px;
  height: 28px;
}
.nav__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--c-black);
  border-radius: 2px;
}

/* ============ Responsive ============ */

/* Tablette 810–1199 (référence : site réel) */
@media (max-width: 1199px) and (min-width: 810px) {
  .nav { padding-inline: 32px; }
  .nav__links { gap: 16px; }
}

/* Mobile ≤ 809 : bar blanche 73px, logo REMODEL, burger */
@media (max-width: 809px) {
  .site-header { background: var(--c-white); }
  .nav {
    height: 73px;
    padding-inline: 16px;
  }
  .nav__center, .btn-pill--nav { display: none; }
  .nav__burger { display: flex; }
  .nav__logo .logo-svg { color: #232323; height: 32px; }
}