carhop__dynamiques-theme__PROD-DEV/resources/css/layout/nav.css

.primary-menu-container {
  @apply mx-auto  
	
	text-white
	relative
	h-fit
	py-8
	px-8 
	2xl:px-32
 	my-0;

  nav#primary-menu-nav {
    @apply max-w-screen-2xl w-full mx-auto;
  }
  .logo {
    @apply mr-12 
		w-[190px]
		xl:w-[222px];
  }
  #primary-menu {
    @apply flex 
		flex-col 
		lg:flex-row 
		items-center 
		justify-around
		lg:justify-between;

    ul {
      @apply lg:flex 
			gap-x-2 
			lg:gap-x-4 
			xl:gap-x-8
			pr-0
			lg:pr-4
			xl:pr-24;
    }

    li.menu-item:has(.page_icon) {
      @apply flex flex-col items-center justify-center gap-3;
      .page_icon {
        @apply w-12 h-12 object-contain;
      }
    }
    /* Highlight using list element */
    li.current-page-parent > a,
    li.current_page_item > a {
      @apply font-medium
		!text-white
		decoration-secondary
		underline
				underline-offset-8;
    }

    li.menu-item {
      @apply font-medium 
			text-sm
			text-center;

      &:hover > a,
      a:focus {
        @apply cursor-pointer
				underline
				underline-offset-8
				!text-white;
      }
      a:focus {
        text-decoration: none;
      }

      /* IF SUBMENU CHILD */
      .menu-item-submenu-toggle {
        &:hover,
        &:focus {
          @apply !text-white;
        }
        @apply relative pr-4;
        &:after {
          @apply absolute right-0;
          content: '▼';
          position: absolute;
          display: inline-block;
          line-height: 0.5;
          height: 10px;
          top: calc(50% - 4px);
          width: 10px;
          margin-left: 20px;
          transform-origin: center;
          background-repeat: no-repeat;
          background-size: contain;
          transition: all 0.3s ease-out;
        }
      }
      .menu-item-submenu-toggle[aria-expanded='false']:after {
        transform: rotate(0deg);
      }
      .menu-item-submenu-toggle[aria-expanded='true']:after {
        transform: rotate(180deg);
      }
    }
    li.menu-item.menu-item-has-children:hover {
      @screen lg {
        .menu-item-submenu-toggle:after {
          transform: rotate(180deg);
        }
        .sub-menu {
          display: block;
        }
      }
    }
    /* submenus */
    li .sub-menu {
      @apply bg-primary 
			p-6
			mx-auto
			lg:mx-0
			static
			lg:absolute;
      z-index: 999;
      display: none;

      &.sub-menu-open {
        display: block;
      }

      li {
        @apply py-2 lg:text-left;
      }

      > a::after {
        transform: translateY(-2px) rotate(-90deg);
        content: '';
        display: inline-block;
        height: 10px;
        width: 10px;
        margin-left: 20px;
        background-image: url('../resources/img/arrow_down_white.svg');
        background-repeat: no-repeat;
        background-size: contain;
        transition: all 0.3s ease-out;
      }
    }
  }
}
button#burger-menu-toggle {
  @apply lg:hidden 
	absolute
	right-10
	-translate-y-1/2	
	z-50	
	top-1/2;
  width: 26px;
  height: 26px;

  .menu-toggle-bar {
    @apply top-1/2
		absolute
		block
		right-0
		w-full
		h-[2px]
		/* bg-red-400 */
		bg-white;
    margin-top: -1px;
    transition: all 0.3s ease;

    &.menu-toggle-bar--top {
      transform: translate(0, -7px);
    }
    &.menu-toggle-bar--middle {
    }
    &.menu-toggle-bar--bottom {
      transform: translate(0, 7px);
    }
    .nav-open & {
      @apply bg-secondary;

      &.menu-toggle-bar--top {
        transform: translate(0, 0) rotate(45deg);
      }
      &.menu-toggle-bar--middle {
        opacity: 0;
      }
      &.menu-toggle-bar--bottom {
        transform: translate(0, 0) rotate(-45deg);
      }
    }
  }

  &:hover {
    path {
      @apply fill-secondary;
    }
  }
}

/* RESPONSIVE */
@media (max-width: 960px) {
  .primary-menu-container {
    #primary-menu {
      @apply bg-primary
			mt-0
			left-0
			z-40
			absolute
			hidden;

      /* transition: all 0.3s ease-out;
			transform: translateY(-120vh); */
      min-height: 100vh;
      height: fit-content;
      top: 0;
      width: 100vw;

      /* Rendu conditionnel de l'élément si contenu dans une classe de parent  (nesting inversé) */

      .nav-open & {
        @apply flex;
      }

      > ul {
        @apply max-w-xs
				mx-auto;
        /* min-height: 96vh; */
        padding-top: 5vh;
      }
      li.menu-item {
        @apply mt-0
				text-center
				text-white
				font-medium
				py-8
				text-lg
				!block
				pb-0;

        .sub-menu li {
          @apply text-sm;
        }
      }
    }
  }

  /* BURGER MENU */
  body:has(.nav-open) {
    @apply max-h-screen
		overflow-hidden;

    /* #content,
		footer,
		.wpml-ls-statics-footer {
			@apply !hidden;
		} */
  }

  .cta_plain_secondary,
  .switch_language {
    /* @apply self-end; */
  }
}

@media (max-width: 960px) and (hover: none) {
  /* ul {
		@apply w-max mx-auto;
	} */
  .primary-menu-container {
    li.menu-item {
      @apply mx-auto 
			/* !text-left */;
    }
  }
}