thalim-theme/scss/_navigation.scss

.main-menu {
    overflow-y: scroll;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 4;
    padding-bottom: 4vh;
    transition: top 0.4s ease-out, opacity 0.2s ease-out;
    border-top: 2px solid $light_gray;
    position: absolute;
    opacity: 0;
    @media ($tablet) {
        overflow-y: unset;
        position: fixed;
    }

    &::after {
        @include yellow-gradient-after();
        opacity: 0;
        transition: opacity 0.2s ease-out 0.3s;
        @media ($tablet) {
            opacity: 1;
        }
    }
    &.active {
        opacity: 1;
        &::after {
            position: fixed;
            opacity: 1;
            @media ($tablet) {
                position: absolute;
            }
        }
    }
}

.menu-navigation-container,
.menu-navigation-en-container {
    > ul {
      display: grid;
      gap: 3rem;
      padding: 2rem 1.5rem;
      max-width: 1400px;
      margin: 0 auto;
      @media ($tablet) {
        padding: 3rem 4rem;
        grid-template-columns: repeat(3, auto);
      }
      @media ($desktop) {
        grid-template-columns: repeat(5, auto);
      }
    > li {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        align-items: start;
        > a {
          text-transform: uppercase;
          text-decoration: none;
          position: relative;
          padding-bottom: 0.8rem;
          margin-bottom: 0.5rem;
            &::after {
                content: '';
                display: block;
                position: absolute;
                height: 8px;
                width: 100%;
                bottom: 0;
                left: 0;
                z-index: 2;
            }
        }
        &:nth-of-type(1) {
            a:hover {
                color: $laboratoire;
            }
            > a::after {
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, $laboratoire 100%);
            }
            > ul.sub-menu > li:first-of-type {
                border-bottom: 1px solid $laboratoire;
                padding-bottom: 0.8rem;
            }

        }

        &:nth-of-type(2) {
            a:hover {
                color: $manifestations;
            }
            > a::after {
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, $manifestations 100%);
            }
            > ul.sub-menu > li:first-of-type {
                border-bottom: 1px solid $manifestations;
                padding-bottom: 0.8rem;
            }
        }

        &:nth-of-type(3) {
            a:hover {
                color: $publications;
            }
            > a::after {
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, $publications 100%);
            }
            > ul.sub-menu > li:first-of-type {
                border-bottom: 1px solid $publications;
                padding-bottom: 0.8rem;
            }

        }

        &:nth-of-type(4) {
            a:hover {
                color: $mediations;
            }
            > a::after {
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, $mediations 100%);
            }
            > ul.sub-menu > li:first-of-type {
                border-bottom: 1px solid $mediations;
                padding-bottom: 0.8rem;
            }

        }

        &:nth-of-type(5) {
            a:hover {
                color: $ressources;
            }
            > a::after {
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, $ressources 100%);
            }
            > ul.sub-menu > li:first-of-type {
                border-bottom: 1px solid $ressources;
                padding-bottom: 0.8rem;
            }

        }

        > ul.sub-menu {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            > li {
                > a {
                    text-decoration: none;
                }
            }
        }
    }
  }
}

// Axes thématiques dropdown inside nav first column
.nav-axes-item {
    .nav-axes-trigger {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        font-family: $font-primary;
        font-size: inherit;
        color: inherit;
        display: flex;
        align-items: center;
        gap: 0.3rem;

        i {
            transition: transform 0.2s ease;
        }
    }

    &.is-open .nav-axes-trigger i {
        transform: rotate(180deg);
    }

    .nav-axes-list {
        display: none;
        flex-direction: column;
        gap: 0.8rem;
        padding-top: 0.8rem;

        li a {
            font-size: 0.8rem;
            padding-left: 0.5rem;
            text-decoration: none;
        }
    }

    &.is-open .nav-axes-list {
        display: flex;
    }
}

.menu-navigation-container,
.menu-navigation-en-container {
    > ul > li:nth-of-type(1) {
        .nav-axes-trigger:hover {
            color: $laboratoire;
        }
    }
}