/* components/main-menu/main-menu.css */
@layer components {
  .main-menu {
    position: relative;
  }

  .main-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .main-menu__list--level-1 {
    padding-inline-start: var(--space-m);
  }

  .main-menu__link {
    display: block;
    padding: var(--space-xs) var(--space-s);
    font-weight: var(--fw-semi);
    color: var(--couleur-lien);
    text-decoration: none;
    border-radius: var(--radius-s);
    transition: color var(--duree-rapide) var(--easing),
      background-color var(--duree-rapide) var(--easing);

    &:hover {
      color: var(--couleur-lien-hover);
      background-color: var(--vert-100);
    }

    &.is-active {
      color: var(--couleur-primaire-fonce);
      text-decoration: underline;
      text-underline-offset: 0.25em;
    }
  }

  /* ---------- Bouton burger ---------- */
  .main-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    font: inherit;
    font-weight: var(--fw-semi);
    color: var(--couleur-texte);
    background: none;
    border: var(--bordure);
    border-radius: var(--radius-s);
    cursor: pointer;

    &[hidden] {
      display: none;
    }
  }

  .main-menu__toggle-icon,
  .main-menu__toggle-icon::before,
  .main-menu__toggle-icon::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    background-color: currentColor;
    border-radius: var(--radius-rond);
    transition: transform var(--duree-normale) var(--easing),
      background-color var(--duree-rapide) var(--easing);
  }

  .main-menu__toggle-icon {
    position: relative;

    &::before,
    &::after {
      content: "";
      position: absolute;
      inset-inline-start: 0;
    }

    &::before {
      transform: translateY(-6px);
    }

    &::after {
      transform: translateY(6px);
    }
  }

  .main-menu__toggle[aria-expanded="true"] .main-menu__toggle-icon {
    background-color: transparent;

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }
  }

  /* ---------- Mobile, JS actif ---------- */
  @media (width < 768px) {
    .main-menu.is-enhanced .main-menu__list--level-0 {
      position: absolute;
      inset-inline-end: 0;
      inset-block-start: calc(100% + var(--space-xs));
      z-index: var(--z-menu);
      min-width: 14rem;
      padding: var(--space-xs);
      background-color: var(--couleur-surface);
      border: var(--bordure);
      border-radius: var(--radius-m);
      box-shadow: var(--ombre-m);
    }

    .main-menu.is-enhanced:not(.is-open) .main-menu__list--level-0 {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .main-menu__link,
    .main-menu__toggle-icon,
    .main-menu__toggle-icon::before,
    .main-menu__toggle-icon::after {
      transition: none;
    }
  }

  /* ---------- Desktop ---------- */
  @media (width >= 768px) {
    .main-menu__toggle {
      display: none !important;
    }

    .main-menu__list--level-0 {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
    }

    .main-menu__item--has-children {
      position: relative;
    }

    .main-menu__list--level-1 {
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 0;
      z-index: var(--z-menu);
      min-width: 12rem;
      padding: var(--space-xs);
      background-color: var(--couleur-surface);
      border: var(--bordure);
      border-radius: var(--radius-m);
      box-shadow: var(--ombre-m);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--duree-rapide) var(--easing),
        visibility var(--duree-rapide);
    }

    .main-menu__item--has-children:hover > .main-menu__list--level-1,
    .main-menu__item--has-children:focus-within > .main-menu__list--level-1 {
      opacity: 1;
      visibility: visible;
    }
  }
}