homegrade_theme_production/resources/css/layout/menu-renovateur.css

.menu-renovateur {
  @apply py-4 
  px-4
  xl:px-8 
  relative
   lg:flex
   flex-nowrap
   xl:flex-wrap 
   items-center
   justify-between
   lg:justify-center
   xl:container
   xl:mx-auto;
  &:not(.menu-renovateur--footer) {
    /* @apply bg-white shadow-md; */
    &:after {
      @apply absolute top-0 left-1/2 w-screen h-full bg-white shadow-md  z-[-1] -translate-x-1/2;
      content: '';
    }
  }
  /* overflow: scroll; */

  .website_logo {
    @apply order-1
    mr-2 
    md:mr-12 
    lg:mr-0
    xl:mr-auto
		w-[140px]
		md:w-[190px]
		xl:w-[222px];
    a {
      @apply block;
    }

    a:focus-visible {
      @apply !opacity-90 rounded-md;
    }
  }

  &__navlist {
    @apply w-fit
    xl:pl-14
    lg:mx-auto
    lg:flex 
    justify-center;

    > .menu-item {
      @apply text-black
      font-bold;

      &:hover > a,
      &:hover > button,
      > a:focus,
      > button:focus {
        @apply bg-gray;
      }
    }
    /* Generic Submenu Item */
    .sub-menu {
      @apply z-50
      left-0
      min-h-screen
      w-full 
      py-8
      px-12
      bg-white
      xl:px-0
      fixed
      lg:absolute
      top-0
      lg:min-h-0
 
      overflow-y-scroll
      lg:overflow-visible;

      isolation: isolate;
      bottom: 1px;

      &:after {
        content: '';
        transform: translateX(-50%);
        @apply hidden lg:block bg-white w-screen h-full shadowed-bottom absolute top-0 left-1/2 -z-10;
      }
      .sub-menu__navlist {
        /* max-width: 1401px; */
        @apply -translate-x-4;
        align-self: center;
        margin: 0 auto;
        &__item a {
          @apply px-4 py-3 rounded-xl hover:bg-gray;
        }
      }

      &--closed {
        @apply hidden;
      }
      &--open {
        @apply block;
      }

      @screen lg {
        transform: translateY(100%);
        top: unset;
        &--open {
          animation: translate-in 400ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
            fade-in 300ms forwards ease-out;
        }
      }
    }

    /* Conseils — Thematiques Submenu Item */
    li#menu-item-168 {
      .sub-menu__navlist {
        @apply grid md:grid-cols-2;

        &__item a {
          @apply flex gap-4 py-2 items-start;
        }

        &__thematique-icon {
          max-width: 60px;
          @apply mt-1;
        }
        &__description {
          @apply text-sm font-normal;
          line-height: 1.3;
        }
      }
    }
    /* Conseils — Thamtiques Submenu Item */
    li#menu-item-169 {
      .sub-menu {
        /* @apply hidden; */
      }

      .sub-menu__navlist {
        @apply grid md:grid-cols-2 gap-5;
        li {
          @apply !no-underline;
          /* text-decoration: none !important;
          text-decoration-line: none !important; */
        }
        a {
          @apply block w-full !no-underline;

          .title {
            @apply font-bold text-lg pb-1;
          }
          .excerpt {
            @apply text-base font-normal;
            line-height: 1.3;
          }
        }
        li {
          @apply underline underline-offset-4;
        }
      }
    }
  }
  .menu-item {
    .page_icon {
      @apply w-[50px] h-[50px];
    }

    &__submenu-title {
      @apply pb-4 mb-4 border-b border-neutral-300;
    }
    &__submenu-toggle,
    > a {
      @apply lg:p-4 xl:p-6 rounded-3xl
      flex
      items-center;
    }
    &__submenu-toggle {
      @apply text-left;
    }
    &__submenu-toggle:after {
      transition: transform 0.3s ease-in-out;
      content: '';
      @apply ml-4   inline-block;
      background-image: url('../resources/img/graphic-assets/chevron_down_red.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      width: 13px;
      height: 13px;
    }
    &__submenu-toggle[aria-expanded='true']:after {
      transform: rotate(180deg);
    }
    &__submenu-close {
      @apply absolute text-right top-8 right-12 xl:right-0 w-fit h-auto rounded-full outline-offset-4;
      width: fit-content;
      padding: 0;
    }
  }
  &__navlist-container {
    @apply /* bg-white */
    order-3 
    lg:order-2
    mx-auto
    w-full
    lg:w-fit;
  }

  @media screen and (max-width: 960px) {
    &__navlist-container {
      @apply overflow-hidden;
    }

    &__navlist-container[opened] {
      animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
    }
    &__navlist-container[closing] {
      animation: height-out 500ms forwards ease-out, fade-out 800ms forwards ease-in;
    }
    &__navlist-container[closed] {
      @apply hidden;
    }
  }

  &__interaction_toggles {
    @apply order-2 lg:order-3 flex items-center justify-start gap-2 md:gap-4 xl:ml-auto;
  }
  &__mobile-menu-toggle {
    @apply lg:hidden flex items-center gap-4 px-4 md:px-8;
    .toggle-icon {
      /* transform: translate(0, 7px); */
      @apply w-6 h-4 relative opacity-80;
      &__bar {
        @apply bg-black w-full absolute;

        height: 3px;
      }
      &__bar--top {
        top: 0;
        transition: all 0.3s ease-in-out;
      }
      &__bar--middle {
        top: 50%;
        transform: translateY(-50%);
      }
      &__bar--bottom {
        bottom: 0;
        transition: all 0.3s ease-in-out;
      }
    }

    /* &:after {
      @apply block w-8 h-8;
      content: url('../resources/images/menu.svg');
    } */
  }
  &__mobile-menu-toggle[aria-expanded='true'] {
    .toggle-icon {
      @apply relative;
      &__bar--top {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
      }
      &__bar--middle {
        opacity: 0;
      }
      &__bar--bottom {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
      }
    }
  }
  &__search-module-toggle {
    @apply h-fit;
  }
}

.menu-renovateur--footer {
  @apply p-0 shadow-none w-full;
  .menu-renovateur__navlist-container {
    @apply w-full;
  }
  .menu-renovateur__navlist {
    @apply grid sm:grid-cols-2 lg:grid-cols-4 gap-y-4 relative pl-0 -translate-x-6 gap-x-2;
    .menu-item {
      @apply justify-start;
    }
  }
  li {
    .page_icon {
      @apply w-[50px] h-[50px];
    }
    @apply text-black
		flex
		justify-start
		items-center
		font-bold;

    .sub-menu {
      @apply w-full;
      &:after {
        content: none;
      }
    }
  }
  .menu-item {
    &__submenu-toggle,
    > a {
      @apply p-1 xl:p-3;
    }
  }
}