/* Menu principal (home, about, …) — position identique sur toutes les pages */
.home,
.about,
.sets,
.events,
.event {
  --home-rail-right: var(--page-pad-x);
  --home-align-top: var(--page-pad-y);
}

.home__menu {
  position: fixed;
  z-index: 31;
  top: var(--home-align-top);
  right: var(--home-rail-right);
  left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  transform: none;
  pointer-events: auto;
}

.home__menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.0625rem;
  flex-shrink: 0;
  transform-origin: center center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  border: 1.5px solid var(--color-fg);
  background-color: var(--color-bg);
  background-image:
    linear-gradient(to right, var(--grid-minor-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-minor-line) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-major-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major-line) 1px, transparent 1px);
  background-size:
    var(--grid-minor) var(--grid-minor),
    var(--grid-minor) var(--grid-minor),
    var(--grid-major) var(--grid-major),
    var(--grid-major) var(--grid-major);
}

.home__menu-label {
  position: relative;
  z-index: 1;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--color-fg);
  transform: rotate(-90deg);
  transform-origin: center center;
  transition: color 0.2s ease;
}

.about .home__menu-link[href*='about'] .home__menu-label,
.sets .home__menu-link[href*='sets'] .home__menu-label,
.events .home__menu-link[href*='events'] .home__menu-label,
.event .home__menu-link[href*='events'] .home__menu-label {
  color: var(--color-red);
}

@media (hover: hover) and (pointer: fine) {
  .home__menu-link:hover,
  .home__menu-link:focus-visible {
    opacity: 1;
    transform: scale(1.06);
  }

  .home__menu-link:hover .home__menu-label,
  .home__menu-link:focus-visible .home__menu-label {
    color: var(--color-red);
  }
}

@media (max-width: 767px) {
  .home__menu {
    gap: 0.75rem;
  }

  .home__menu-link {
    box-sizing: border-box;
    width: 1.05em;
    padding: 0;
    border-width: 1px;
    font-size: clamp(0.875rem, 3.25vw, 1.0625rem);
    line-height: 1;
  }

  .home__menu-label {
    display: block;
    padding: 0;
    margin: 0;
    font-size: inherit;
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .home__menu-link[href*='about'],
  .home__menu-link[href*='sets'],
  .home__menu-link[href*='events'] {
    font-size: clamp(1.0625rem, 4.5vw, 1.3125rem);
  }

  .home__menu-link[href*='about'] {
    height: 6.25ch;
    min-height: 6.25ch;
  }

  .home__menu-link[href*='sets'] {
    height: 4.85ch;
    min-height: 4.85ch;
  }

  .home__menu-link[href*='events'] {
    height: 6.35ch;
    min-height: 6.35ch;
  }
}

@media (min-width: 768px) {
  .home,
  .about,
  .sets,
  .events,
  .event {
    --home-pad-x: 1.25rem;
    --home-pad-y: 1.1875rem;
    --home-align-top: var(--home-pad-y);
    --home-rail-right: var(--home-pad-x);
  }

  .home__menu {
    top: var(--home-align-top);
    right: var(--home-rail-right);
    gap: 2rem;
  }

  .home__menu-label {
    font-size: 2.5rem;
    letter-spacing: -0.03em;
  }

  .home__menu-link {
    border-width: 2px;
  }

  .home__menu-link[href*='about'] {
    min-height: 6.875rem;
  }

  .home__menu-link[href*='sets'] {
    min-height: 5rem;
  }

  .home__menu-link[href*='events'] {
    min-height: 8.75rem;
  }
}