/*
 * Navigation principale
 * Conserve le bloc Navigation natif. navigation.js pilote notamment la classe is-closing pour l’animation de fermeture.
 * Chargement : functions.php ; règles conservées dans leur ordre de cascade.
 */
/* 01. Liens : casse, alignement et soulignement animé. */
.primary-nav .wp-block-navigation-item__content {
  position: relative;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}
.primary-nav .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -4px;
  height: 1px;
  background: var(--lgr-color-charcoal);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 220ms ease-out;
}
.primary-nav .wp-block-navigation-item__content:focus-visible::after {
  clip-path: inset(0);
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .primary-nav .wp-block-navigation-item__content:hover::after {
    clip-path: inset(0);
  }
}
/* 02. Menu ouvert : padding du panneau natif. */
.primary-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: 24px;
}
/* 03. Animations d’entrée : panneau latéral puis liens en cascade. */
@keyframes lgr-menu-enter {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes lgr-menu-link-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* 04. Menu mobile / tablette : bascule à 1024 px et alignement des wrappers Gutenberg. */
@media (max-width: 1023px) {
  /* Remplacer la bascule native de Gutenberg à 600 px. */
  .primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
  .primary-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  /* Aligner les conteneurs flex natifs dans le panneau mobile. */
  .primary-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content,
  .primary-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container,
  .primary-nav
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item {
    align-items: flex-start;
    justify-content: flex-start;
  }
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open {
    --navigation-layout-justification-setting: flex-start;
    text-align: left;
  }
  .primary-nav
    .is-menu-open
    .wp-block-navigation__container
    > .wp-block-navigation-item {
    animation: lgr-menu-link-enter 320ms ease-out 120ms both;
  }
  .primary-nav
    .is-menu-open
    .wp-block-navigation__container
    > .wp-block-navigation-item:nth-child(2) {
    animation-delay: 160ms;
  }
  .primary-nav
    .is-menu-open
    .wp-block-navigation__container
    > .wp-block-navigation-item:nth-child(3) {
    animation-delay: 200ms;
  }
  .primary-nav
    .is-menu-open
    .wp-block-navigation__container
    > .wp-block-navigation-item:nth-child(4) {
    animation-delay: 240ms;
  }
  .primary-nav
    .is-menu-open
    .wp-block-navigation__container
    > .wp-block-navigation-item:nth-child(5) {
    animation-delay: 280ms;
  }
  .primary-nav
    .is-menu-open
    .wp-block-navigation__container
    > .wp-block-navigation-item:nth-child(6) {
    animation-delay: 320ms;
  }
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open {
    transform-origin: right bottom;
    animation: lgr-menu-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
/* 05. Accessibilité : neutraliser les animations d’entrée et de soulignement. */
@media (prefers-reduced-motion: reduce) {
  .primary-nav
    .is-menu-open
    .wp-block-navigation__container
    > .wp-block-navigation-item {
    animation: none;
  }
  .primary-nav .wp-block-navigation__responsive-container.is-menu-open {
    animation: none;
  }
  .primary-nav .wp-block-navigation-item__content::after {
    transition: none;
  }
}

/* Conserver les boutons et libellés accessibles natifs ; remplacer uniquement les icônes. */
/* 06. Boutons natifs : icônes menu et fermeture, avec leurs libellés accessibles conservés. */
.primary-nav .wp-block-navigation__responsive-container-open,
.primary-nav .wp-block-navigation__responsive-container-close {
  width: 44px;
  height: 44px;
  padding: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}
.primary-nav .wp-block-navigation__responsive-container-open {
  background-image: url('../../icons/menu.svg');
}
.primary-nav .wp-block-navigation__responsive-container-close {
  background-image: url('../../icons/x.svg');
}
.primary-nav .wp-block-navigation__responsive-container-open svg,
.primary-nav .wp-block-navigation__responsive-container-close svg {
  opacity: 0;
}
/* 07. Mobile : réduire la hauteur visuelle du bouton de menu. */
@media (width < 600px) {
  .primary-nav .wp-block-navigation__responsive-container-open {
    height: 32px;
    padding-block: 4px;
  }
}
/* 08. Contraste renforcé : réafficher les SVG natifs si les fonds CSS sont masqués. */
@media (forced-colors: active) {
  .primary-nav .wp-block-navigation__responsive-container-open,
  .primary-nav .wp-block-navigation__responsive-container-close {
    background-image: none;
  }
  .primary-nav .wp-block-navigation__responsive-container-open svg,
  .primary-nav .wp-block-navigation__responsive-container-close svg {
    opacity: 1;
  }
}

/* 09. Typographie finale des liens : complément des règles de structure du début. */
.primary-nav .wp-block-navigation-item__content {
  font-size: 12px;
  line-height: 1;
}

/* 10. Fermeture : état is-closing ajouté par navigation.js avant le retrait du panneau. */
@keyframes lgr-menu-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
@media (max-width: 1023px) {
  .primary-nav
    .wp-block-navigation__responsive-container.is-menu-open.is-closing {
    animation: lgr-menu-exit 250ms ease-in both;
  }
}
/* 11. Accessibilité : supprimer aussi l’animation de fermeture. */
@media (prefers-reduced-motion: reduce) {
  .primary-nav
    .wp-block-navigation__responsive-container.is-menu-open.is-closing {
    animation: none;
  }
}

/* 12. Écrans tactiles : retirer le soulignement prévu pour le survol à la souris. */
@media (max-width: 1023px), (hover: none) {
  .primary-nav .wp-block-navigation-item__content::after {
    content: none;
  }
}