/* En-tête site (wordmark + waveform) — même position sur toutes les pages */
.home__header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--page-pad-x) 0.5rem;
  background: transparent;
  overflow: visible;
  pointer-events: none;
}

.home__header * {
  pointer-events: auto;
}

.home__logo {
  --home-logo-nudge: 0.08em;

  position: relative;
  z-index: 2;
  display: block;
  margin: calc(var(--home-align-top) - var(--home-logo-nudge)) 0 0;
  line-height: 0;
}

.home__logo a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.home__logo-mark {
  display: block;
  width: clamp(1.45rem, 6vw, 2rem);
  height: auto;
  flex-shrink: 0;
}

.home__logo-img {
  display: block;
  width: clamp(10rem, 42vw, 14.5rem);
  height: auto;
}

@media (hover: hover) and (pointer: fine) {
  .home__logo a:hover,
  .home__logo a:focus-visible {
    opacity: 0.85;
  }

  .home__logo a:hover .home__logo-mark,
  .home__logo a:hover .home__logo-img,
  .home__logo a:focus-visible .home__logo-mark,
  .home__logo a:focus-visible .home__logo-img {
    filter: brightness(0) saturate(100%) invert(21%) sepia(95%) saturate(5436%)
      hue-rotate(350deg) brightness(102%) contrast(107%);
  }
}

.home__waveform {
  --wave-pad-y: clamp(5.5rem, 20vw, 11rem);

  position: absolute;
  z-index: 0;
  left: calc(-1 * var(--page-pad-x));
  right: calc(-1 * var(--page-pad-x));
  bottom: 0.5rem;
  height: clamp(32px, 6vw, 52px);
  overflow: visible;
  cursor: none;
}

.home__waveform-canvas {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 100%;
  height: calc(100% + var(--wave-pad-y) * 2);
  transform: translateY(-50%);
  pointer-events: none;
}

@media (min-width: 768px) {
  .home__header {
    padding: 0 var(--home-pad-x) 0.5rem;
  }

  .home__logo {
    --home-logo-nudge: 0.1em;
  }

  .home__logo-mark {
    width: clamp(2.6rem, 4vw, 3.5rem);
  }

  .home__logo-img {
    width: clamp(18rem, 28vw, 24rem);
  }

  .home__waveform {
    left: calc(-1 * var(--home-pad-x));
    right: calc(-1 * var(--home-pad-x));
  }
}