Floating Header

<header class="wtl-fh" id="wtlFh">
  <div class="wtl-fh__wrap">
    <div class="wtl-fh__bar">
      <a href="#" class="wtl-fh__logo">Studio</a>

      <nav class="wtl-fh__nav">
        <a class="wtl-fh__link is-active" href="#">Accueil</a>
        <a class="wtl-fh__link" href="#">Services</a>
        <a class="wtl-fh__link" href="#">À propos</a>
        <a class="wtl-fh__link" href="#">Contact</a>
      </nav>

      <div class="wtl-fh__actions">
        <a href="#" class="wtl-fh__cta"><span class="wtl-fh__dot"></span> Nous contacter</a>
        <button id="wtlFhToggle" class="wtl-fh__burger" type="button" aria-label="Ouvrir le menu" aria-expanded="false">
          <span></span><span></span>
        </button>
      </div>
    </div>

    <nav id="wtlFhMobile" class="wtl-fh__mobile is-hidden">
      <a href="#">Accueil</a>
      <a href="#">Services</a>
      <a href="#">À propos</a>
      <a href="#">Contact</a>
    </nav>
  </div>
</header>

<!--
  Header adaptatif : ajoute data-header="light" sur tes sections à fond sombre
  pour que le header passe en verre teinté + contenu clair au survol de ces zones.
  Ex. <section data-header="light"> … </section>
-->

/* Floating Header — pilule en verre dépoli, responsive (menu burger mobile) et
   adaptative : s'éclaircit (verre teinté + contenu clair) au-dessus des sections
   marquées data-header="light", et se densifie au scroll. Police Geist. */

.wtl-fh {
  --wtl-fh-ink: #14110f; /* texte par défaut */
  --wtl-fh-bone: #ffffff; /* texte sur fond sombre */
  --wtl-fh-accent: #d94a26; /* logo, lien actif, pastille CTA */
  --wtl-fh-radius: 18px;
  --wtl-fh-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wtl-fh-gutter: clamp(1.2rem, 0.4rem + 3vw, 3.5rem);

  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  font-family: "Geist", system-ui, sans-serif;
  transition: color 0.45s ease;
}

/* Rétablit un flux normal dans l'aperçu (body centré). */
body {
  display: block;
}

.wtl-fh__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem var(--wtl-fh-gutter) 0;
}

/* Pilule en verre dépoli */
.wtl-fh__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 64px;
  padding: 0 0.75rem 0 1.25rem;
  border-radius: 999px;
  color: var(--wtl-fh-ink);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  backdrop-filter: blur(18px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 12px 34px rgba(26, 22, 19, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition:
    background-color 0.5s ease,
    border-color 0.5s ease,
    color 0.45s ease,
    box-shadow 0.5s ease;
}
.wtl-fh.is-scrolled .wtl-fh__bar {
  background: rgba(255, 255, 255, 0.78);
}

/* Au-dessus d'une section sombre : verre teinté + contenu clair */
.wtl-fh.is-light .wtl-fh__bar {
  color: var(--wtl-fh-bone);
  background: rgba(22, 18, 16, 0.34);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.wtl-fh.is-light.is-scrolled .wtl-fh__bar {
  background: rgba(22, 18, 16, 0.5);
}

.wtl-fh__logo {
  color: var(--wtl-fh-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

/* Liens : pilule au survol, lien actif en accent */
.wtl-fh__nav {
  display: none;
  align-items: center;
  gap: 0.1rem;
}
.wtl-fh__link {
  color: inherit;
  opacity: 0.78;
  white-space: nowrap;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.52rem 0.9rem;
  border-radius: 999px;
  line-height: 1;
  transition:
    background-color 0.3s var(--wtl-fh-ease),
    opacity 0.3s ease,
    color 0.3s ease;
}
.wtl-fh__link:hover {
  opacity: 1;
  background: rgba(26, 22, 19, 0.07);
}
.wtl-fh.is-light .wtl-fh__link:hover {
  background: rgba(255, 255, 255, 0.14);
}
.wtl-fh__link.is-active {
  opacity: 1;
  color: var(--wtl-fh-accent);
}

/* CTA + burger */
.wtl-fh__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wtl-fh__cta {
  display: none; /* visible ≥ 640px */
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.68rem 1.25rem;
  border-radius: 999px;
  background: var(--wtl-fh-ink);
  color: #fff;
  border: 1px solid var(--wtl-fh-ink);
  transition:
    background-color 0.35s var(--wtl-fh-ease),
    color 0.35s var(--wtl-fh-ease),
    border-color 0.35s var(--wtl-fh-ease);
}
.wtl-fh__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wtl-fh-accent);
  transition: transform 0.35s var(--wtl-fh-ease);
}
.wtl-fh__cta:hover {
  background: var(--wtl-fh-accent);
  border-color: var(--wtl-fh-accent);
}
.wtl-fh__cta:hover .wtl-fh__dot {
  transform: scale(2.2);
  background: #fff;
}
.wtl-fh.is-light .wtl-fh__cta {
  background: #fff;
  color: var(--wtl-fh-ink);
  border-color: #fff;
}
.wtl-fh.is-light .wtl-fh__cta:hover {
  background: var(--wtl-fh-accent);
  color: #fff;
  border-color: var(--wtl-fh-accent);
}

.wtl-fh__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
}
.wtl-fh__burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.wtl-fh__burger:hover {
  background: rgba(26, 22, 19, 0.07);
}
.wtl-fh.is-light .wtl-fh__burger:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Menu mobile (carte verre dépoli) */
.wtl-fh__mobile {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: var(--wtl-fh-radius);
  color: var(--wtl-fh-ink);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(26, 22, 19, 0.09);
  box-shadow: 0 30px 80px rgba(26, 22, 19, 0.18);
}
.wtl-fh__mobile a {
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}
.wtl-fh__mobile a:hover {
  background: rgba(26, 22, 19, 0.06);
}
.wtl-fh__mobile.is-hidden {
  display: none;
}

/* ≥ 640px : le CTA apparaît */
@media (min-width: 640px) {
  .wtl-fh__cta {
    display: inline-flex;
  }
}

/* ≥ 1024px : nav visible, burger + menu mobile masqués */
@media (min-width: 1024px) {
  .wtl-fh__nav {
    display: flex;
  }
  .wtl-fh__burger,
  .wtl-fh__mobile {
    display: none;
  }
}

// --- Menu mobile ---
const toggle = document.getElementById("wtlFhToggle");
const mobile = document.getElementById("wtlFhMobile");
if (toggle && mobile) {
  toggle.addEventListener("click", () => {
    const open = mobile.classList.toggle("is-hidden") === false;
    toggle.setAttribute("aria-expanded", String(open));
    toggle.setAttribute("aria-label", open ? "Fermer le menu" : "Ouvrir le menu");
  });
  mobile.querySelectorAll("a").forEach((a) =>
    a.addEventListener("click", () => {
      mobile.classList.add("is-hidden");
      toggle.setAttribute("aria-expanded", "false");
    }),
  );
}

// --- Header adaptatif : verre clair par défaut, contenu clair au-dessus des
//     sections marquées data-header="light" (fonds sombres) + densification au scroll.
const header = document.getElementById("wtlFh");
if (header) {
  const darkSecs = Array.from(document.querySelectorAll('[data-header="light"]'));
  const PROBE = 40; // px : niveau vertical sondé (milieu du header)
  const update = () => {
    header.classList.toggle("is-scrolled", window.scrollY > 40);
    let light = false;
    for (const s of darkSecs) {
      const r = s.getBoundingClientRect();
      if (r.top <= PROBE && r.bottom >= PROBE) {
        light = true;
        break;
      }
    }
    header.classList.toggle("is-light", light);
  };
  update();
  window.addEventListener("scroll", update, { passive: true });
  window.addEventListener("resize", update);
}