@layer components {
  .site-header { position: relative; }
  .site-header__stage { position: relative; width: min(100%, var(--stage)); min-height: 10.875rem; margin-inline: auto; }
  .site-header__decorations { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
  .site-header__decoration { position: absolute; display: block; aspect-ratio: 1; background: center / contain no-repeat; }
  .site-header__decoration--yellow { top: -5.5rem; left: -8rem; width: 21.5rem; background-image: url("../images/tache-jaune.webp"); }
  .site-header__decoration--pink { top: 4.25rem; left: -12.9375rem; width: 17.0625rem; background-image: url("../images/tache-rose.webp"); }
  .site-header__decoration--green { top: -6.6875rem; right: -6.75rem; width: 31.25rem; background-image: url("../images/tache-verte.webp"); }
  .site-brand { position: absolute; z-index: 1; top: 1.4375rem; left: clamp(var(--page-gutter), 8.333vw, 7.5rem); display: block; width: 13.4375rem; }
  .site-brand__signature { width: 100%; height: auto; }
  .site-tagline { position: absolute; top: 4.25rem; left: clamp(18rem, calc(8.333vw + 16.875rem), 24.375rem); width: min(46.75rem, calc(100% - 35rem)); margin: 0; font-family: var(--font-typewriter); font-size: var(--text-menu); font-weight: 100; line-height: var(--line-height-ui); }
  .site-navigation { position: fixed; z-index: 50; top: 11.875rem; left: calc(50% + min(50vw, 45rem) - 15rem); width: var(--nav-rail); font-family: var(--font-typewriter); font-size: var(--text-menu); font-weight: 100; line-height: var(--line-height-ui); }
  .site-navigation .menu, .site-navigation .sub-menu { display: flex; flex-direction: column; gap: 0.4375rem; margin: 0; padding: 0; list-style: none; }
  .site-navigation .menu-item { position: relative; }
  .site-navigation .menu-item > a { display: table; position: relative; padding: 0.6875rem 1.125rem; background: var(--color-white); text-decoration: none; white-space: nowrap; transition: color var(--transition-fast), background-color var(--transition-fast); }
  .site-navigation .menu > .menu-item:not(:last-child) > a::after { content: ""; position: absolute; bottom: -0.0625rem; left: 1.125rem; width: 1.125rem; height: 0.0625rem; background: currentColor; }
  .site-navigation .menu > .menu-item:nth-child(1) > a:hover, .site-navigation .menu > .menu-item:nth-child(1) > a:focus-visible { background: var(--color-green); }
  .site-navigation .menu > .menu-item:nth-child(2) > a:hover, .site-navigation .menu > .menu-item:nth-child(2) > a:focus-visible { background: var(--color-pink); }
  .site-navigation .menu > .menu-item:nth-child(3) > a:hover, .site-navigation .menu > .menu-item:nth-child(3) > a:focus-visible { background: var(--color-yellow); }
  .site-navigation .menu > .menu-item:nth-child(4) > a:hover, .site-navigation .menu > .menu-item:nth-child(4) > a:focus-visible { color: var(--color-white); background: var(--color-blue); }
  .site-navigation .menu > .menu-item:nth-child(5) > a:hover, .site-navigation .menu > .menu-item:nth-child(5) > a:focus-visible { background: var(--color-green); }
  .site-navigation .menu > .menu-item:nth-child(6) > a:hover, .site-navigation .menu > .menu-item:nth-child(6) > a:focus-visible { background: var(--color-orange); }
  .site-navigation .menu > .menu-item > a::before { content: ""; position: absolute; top: 50%; left: -1rem; width: 1.625rem; height: 0.375rem; background: url("../images/ziguigui.svg") center / contain no-repeat; opacity: 0; transform: translateY(-50%); transition: opacity var(--transition-fast); }
  .site-navigation .menu > .menu-item > a:hover::before, .site-navigation .menu > .menu-item > a:focus-visible::before, .site-navigation .menu > .current-menu-item > a::before, .site-navigation .menu > .current-menu-ancestor > a::before { opacity: 1; }
  .site-navigation .sub-menu { visibility: hidden; position: absolute; top: 0; right: 100%; min-width: 13rem; padding-right: 0.4375rem; opacity: 0; transform: translateX(0.5rem); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 160ms; }
  .site-navigation .sub-menu a { background: var(--color-light-gray); }
  .site-navigation .menu-item:hover > .sub-menu, .site-navigation .menu-item:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: translateX(0); }
  .menu-toggle { display: none; }
}

@media (max-width: 64rem) {
  body.menu-is-open { overflow: hidden; }
  .site-header__stage { min-height: 7.5rem; }
  .site-header__decorations { display: none; }
  .site-brand { top: 1rem; left: var(--page-gutter); width: clamp(9rem, 32vw, 12rem); }
  .site-tagline { display: none; }
  .menu-toggle { display: block; position: fixed; z-index: 110; top: 1.25rem; right: var(--page-gutter); padding: 0.625rem 1rem; border: 1px solid var(--color-black); border-radius: var(--radius-pill); color: var(--color-black); background: var(--color-white); font-family: var(--font-typewriter); font-size: var(--text-meta); font-weight: 100; cursor: pointer; }
  .site-navigation { display: none; }
  .site-navigation.is-open { display: block; position: fixed; inset: 0; z-index: 100; width: auto; padding: 6rem var(--page-gutter) var(--space-l); overflow-y: auto; background: var(--color-white); font-size: clamp(1.5rem, 5vw, 2rem); }
  .site-navigation.is-open .menu { gap: var(--space-xs); }
  .site-navigation.is-open .menu-item > a { white-space: normal; }
  .site-navigation.is-open .sub-menu { visibility: visible; position: static; min-width: 0; padding: 0.4375rem 0 0 1rem; opacity: 1; transform: none; }
}