/* Empreintes — menu direction selected by Youssef, 22 October 2026.
   Only the background appears; labels and layout remain still. */
.header #navigation > .nav-link,
.header #navigation > .nav-link:hover,
.header #navigation > .nav-link[aria-current="page"] {
  position: relative;
  isolation: isolate;
  background: transparent;
  border-radius: var(--pebble);
  transform: none;
  transition: none;
}
.header #navigation > .nav-link::before {
  content: "";
  position: absolute;
  inset: 1px -2px;
  z-index: -1;
  pointer-events: none;
  background: #e8edca;
  border-radius: 46% 54% 44% 56% / 50% 43% 57% 50%;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .16s ease, transform .16s ease;
}
.header #navigation > .nav-link:is(:hover, :focus-visible, :active, [aria-current="page"])::before {
  opacity: 1;
  transform: scale(1);
}
.header #navigation > .nav-link[aria-current="page"]::before {
  background: var(--citron);
}
/* Collections: galet. Materials: pétale. */
.header #navigation > .nav-link[href="/materials/"]::before {
  border-radius: 77% 23% 73% 27% / 66% 40% 60% 34%;
}
/* Rounded fallbacks also work in browsers without gradient masks. */
.header #navigation > .nav-link[href="/quality/"]::before {
  border-radius: 37% 63% 48% 52% / 60% 42% 58% 40%;
}
.header #navigation > .nav-link[href="/products/"]::before {
  border-radius: 33% 48% 38% 55% / 58% 37% 63% 42%;
}
/* Professionals: a lower, elongated ribbon. */
.header #navigation > .nav-link[href="/professionals/"]::before {
  inset-block: 9px 5px;
  border-radius: 26% 74% 23% 77% / 32% 52% 48% 68%;
}
@supports ((mask-image: radial-gradient(black, transparent)) or (-webkit-mask-image: radial-gradient(black, transparent))) {
  .header #navigation > .nav-link[href="/quality/"]::before {
    --empreinte-mask: radial-gradient(ellipse 34% 42% at 35% 55%, #000 98%, transparent 100%), radial-gradient(ellipse 34% 44% at 65% 45%, #000 98%, transparent 100%);
  }
  .header #navigation > .nav-link[href="/products/"]::before {
    --empreinte-mask: radial-gradient(ellipse 25% 38% at 25% 55%, #000 98%, transparent 100%), radial-gradient(ellipse 30% 44% at 50% 47%, #000 98%, transparent 100%), radial-gradient(ellipse 25% 38% at 75% 55%, #000 98%, transparent 100%);
  }
  .header #navigation > .nav-link:is([href="/quality/"], [href="/products/"])::before {
    border-radius: 0;
    -webkit-mask-image: var(--empreinte-mask);
    mask-image: var(--empreinte-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}
.header .header-contact {
  border-radius: 44% 56% 48% 52% / 56% 44% 56% 44%;
}
@media (max-width: 1100px) {
  .header #navigation > .nav-link {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    text-align: start;
  }
  .header #navigation > .nav-link::before {
    background: rgba(255, 246, 232, .6);
  }
  .header #navigation > .nav-link[aria-current="page"]::before {
    background: var(--cream);
  }
}
@media (prefers-reduced-motion: reduce) {
  .header #navigation > .nav-link::before {
    transition: none;
    transform: none;
  }
}