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

.menu-renovateur {
  @apply py-8 
  px-4
  sm:px-8
  md:px-16
  relative
   shadow-md 
   flex
   flex-wrap 
   items-center
   justify-between;

  .website_logo {
    @apply order-1
    mr-2 
    md:mr-12 
		w-[140px]
		md:w-[190px]
		xl:w-[222px];

    a:focus img {
      outline: red solid 1px;
      @apply outline-1 outline-offset-8;
      outline-radius: 50px;
    }
  }
  /* &__main-elements {
    @apply w-full bg-red-200 flex justify-between items-center;
  } */

  &__navlist {
    @apply lg:flex 
    justify-center
    relative;

    > .menu-item {
      &:hover > a,
      &:hover > button,
      > a:focus,
      > button:focus {
        @apply text-secondary bg-gray;
      }

      @apply text-black
     
      lg:relative
      font-bold;
    }
    /* Generic Submenu Item */
    .sub-menu {
      @apply fixed
    bg-white
      z-50
      top-0
      min-h-screen
      w-full 
      p-8
      lg:absolute
      lg:min-h-0
      lg:w-screen
      lg:max-w-3xl;

      @screen lg {
        bottom: -31px;
        transform: translateY(100%);
        top: unset;
      }

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

    /* Conseils — Thamtiques Submenu Item */
    li#menu-item-168 {
      .sub-menu__navlist {
        @apply grid md:grid-cols-2 gap-4;
        &__item a {
          @apply flex gap-4;
        }

        &__thematique-icon {
          max-width: 80px;
        }
        &__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 flex gap-5;
        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-gray-dark;
    }
    &__submenu-toggle,
    > a {
      @apply p-6  rounded-3xl
      flex
      justify-center
      items-center;
    }
    &__submenu-toggle {
      @apply text-left;
    }
    &__submenu-close {
      @apply absolute text-right top-8 right-8 w-fit h-auto rounded-full outline-offset-4;
      width: fit-content;
      padding: 0;
    }
  }
  &__navlist-container {
    @apply /* bg-white */
    order-3 
    lg:order-2
    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;
  }
  &__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;
    .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 hidden; */
      /* @apply absolute top-0 left-0 z-50 w-full h-full bg-white grid grid-cols-2; */
    }
  }
  .menu-item {
    &__submenu-toggle,
    > a {
      @apply p-3;
    }
  }
}