#top-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;

    @media(width > 992px) {
        display: flex;
    }

    > li {
         &.menu-item-has-children {
            position: relative;

            >a {
                &:after {
                    content: '';
                    display: inline-block;
                    transition: all 200ms ease-in-out;
                    width: 10px;
                    height: 10px;
                    background: url(../../../assets/img/icon-chevron.svg) center no-repeat;
                    background-size: contain;
                    margin-left: 8px;
                }
            }

            &:hover {
                >a {
                    &:after {
                        transform: rotate(180deg);
                    }
                }
            }
        }

        ul.sub-menu {
            list-style: none;
            margin: 0;
            padding: 0;

            @media(width > 991px) {
                background-color: #fff;
                border: solid 1px var(--wp--preset--color--border-light);
                border-radius: 7px;
                padding: 15px;
                position: absolute;
                left: -22px;
                top: 27px;
                z-index: 6;
                box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
                display: flex;
                flex-direction: column;
                gap: 4px;
                width: 298px;
                opacity: 0;
                visibility: hidden;
                transition: all 200ms ease-in-out;
            }

            >li {
                position: relative;
                flex: auto 0 0;
                padding: 7px;
                border-radius: 7px;

                &:hover {
                    background-color: #F8F8F8;

                    a {
                        font-weight: var(--wp--custom--font-weight--semi-bold);
                    }

                    >.sub-menu {
                        opacity: 1;
                        visibility: visible;
                    }
                }

                >a {
                    text-decoration: none;
                }


                @media(width > 991px) {
                    >ul.sub-menu {
                        margin-top: 0;
                        list-style: none;
                        padding: 0;
                        position: absolute;
                        left: 97%;
                        top: 0;
                        width: 323px;
                        background-color: #fbfbfb;
                        bottom: 0;
                        padding: 8px;
                        border-radius: 0 8px 8px 0;

                        >li {
                            padding: 8px;

                            &:hover {
                                background-color: #eee;
                            }

                            >a {
                                display: flex;
                                text-decoration: none;
                                align-items: center;
                                font-weight: normal;
                                color: var(--wp--preset--color--main);
                                width: 100%;

                                .item-thumbnail {
                                    flex: 94px 0 0;
                                    width: 94px;
                                    height: 82px;
                                    margin-right: 14px;
                                    opacity: .8;
                                    transition: all 200ms ease-in-out;

                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                        border-radius: 6px;
                                    }
                                }
                            }
                        }
                    }
                }



                &.menu-item-has-children {
                    position: initial;

                    >a {

                        position: relative;

                        &:after {
                            display: block;
                            content: '';
                            width: 14px;
                            height: 14px;
                            background: url('../../../assets/img/arrow-small.svg');
                            background-position: center;
                            background-repeat: no-repeat;
                            position: absolute;
                            right: 7px;
                            top: 0;
                            bottom: 0;
                            margin: auto;
                        }
                    }
                }
            }
        }

        &:hover {
            >ul.sub-menu {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    li {
        margin: 0 .5em;

        a {
            text-decoration: none;
            font-size: var(--wp--preset--font-size--small);
            color: #636363;
            transition: all 200ms ease-in-out;

            &:hover {
                color: #000;
            }
        }

        &.client,
        &.teamviewer {
            font-weight: var(--wp--custom--font-weight--medium);
        }
    }
}

#primary-menu {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;

    >li {
        margin: 0 1em;
        padding: 0;
        cursor: pointer;

        &:hover {
            >a {
                font-weight: var(--wp--custom--font-weight--semi-bold);
            }
        }

        >a {
            display: flex;
            align-items: center;
            text-decoration: none;
            font-size: var(--wp--preset--font-size--base);
            font-weight: var(--wp--custom--font-weight--regular);
            line-height: var(--wp--custom--line-height--loose);
            position: relative;
            transition: all 200ms ease-in-out;

            @media(width > 1280px) {
                padding: 30px 0;
            }

            &:before {
                content: '';
                width: 100%;
                height: 4px;
                background-color: var(--wp--preset--color--global-primary);
                transform: scaleX(0);
                transition: all 200ms ease-in-out;
                position: absolute;
                bottom: 0;
            }

            /* transition: all 200ms ease-in-out; */

        }

        &.current-menu-ancestor,
        &.current-menu-item {
            >a {
                color: var(--wp--preset--color--global-primary);
                font-weight: var(--wp--custom--font-weight--bold);

                &:before {
                    transform: scaleX(1);
                }
            }
        }

        &.menu-item-has-children {
            position: relative;

            >a {
                &:after {
                    content: '';
                    display: inline-block;
                    transition: all 200ms ease-in-out;
                    width: 10px;
                    height: 10px;
                    background: url(../../../assets/img/icon-chevron.svg) center no-repeat;
                    background-size: contain;
                    margin-left: 8px;
                }
            }

            &:hover {
                box-shadow: inset 0 -4px 0 0 var(--wp--preset--color--global-primary);

                >a {
                    &:after {
                        transform: rotate(180deg);
                    }
                }
            }
        }

        &.megamenu {
            >ul.sub-menu {
                >li {
                    >a {
                        text-transform: uppercase;
                    }
                }
            }
        }

        ul.sub-menu {
            list-style: none;
            margin: 0;
            padding: 0;

            @media(width > 1280px) {
                background-color: #fff;
                border: solid 1px var(--wp--preset--color--border-light);
                border-radius: 7px;
                padding: 15px;
                position: absolute;
                left: -22px;
                top: 100%;
                z-index: 2;
                box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
                display: flex;
                flex-direction: column;
                gap: 4px;
                width: 298px;
                opacity: 0;
                visibility: hidden;
                transition: all 200ms ease-in-out;
            }

            >li {
                position: relative;
                flex: auto 0 0;
                padding: 7px;
                border-radius: 7px;

                &:hover {
                    background-color: #F8F8F8;

                    a {
                        font-weight: var(--wp--custom--font-weight--semi-bold);
                    }

                    >.sub-menu {
                        opacity: 1;
                        visibility: visible;
                    }
                }

                >a {
                    text-decoration: none;
                }


                @media(width > 1280px) {
                    >ul.sub-menu {
                        margin-top: 0;
                        list-style: none;
                        padding: 0;
                        position: absolute;
                        left: 97%;
                        top: 0;
                        width: 323px;
                        background-color: #fbfbfb;
                        padding: 8px;
                        border-radius: 0 8px 8px 8px;

                        >li {
                            padding: 8px;

                            &:hover {
                                background-color: #eee;
                            }

                            >ul.sub-menu {
                                width: max-content;
                                max-width: 100%;
                            }

                            >a {
                                display: flex;
                                text-decoration: none;
                                align-items: center;
                                font-weight: normal;
                                color: var(--wp--preset--color--main);
                                width: 100%;

                                .item-thumbnail {
                                    flex: 94px 0 0;
                                    width: 94px;
                                    height: 82px;
                                    margin-right: 14px;
                                    opacity: .8;
                                    transition: all 200ms ease-in-out;

                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                        border-radius: 6px;
                                    }
                                }

                                .item-wrap {
                                    display: flex;
                                    flex-wrap: wrap;
                                    flex-direction: column;

                                    .item-titre {
                                        font-size: .875rem;
                                        text-decoration: none;
                                        transition: all 200ms ease-in-out;
                                    }

                                    .item-description {
                                        font-size: .75rem;
                                        text-decoration: none;
                                    }
                                }

                                &:hover {

                                    .item-thumbnail {
                                        opacity: 1;
                                    }

                                    .item-titre {
                                        color: var(--wp--preset--color--main);
                                    }
                                }

                            }
                        }
                    }
                }



                &.menu-item-has-children {
                    position: initial;

                    >a {

                        position: relative;

                        &:after {
                            display: block;
                            content: '';
                            width: 14px;
                            height: 14px;
                            background: url('../../../assets/img/arrow-small.svg');
                            background-position: center;
                            background-repeat: no-repeat;
                            position: absolute;
                            right: 7px;
                            top: 0;
                            bottom: 0;
                            margin: auto;
                        }
                    }
                }
            }

            >.introduction .item-titre,
            >a {
                padding: 0;
                font-weight: 400;
                text-transform: uppercase;
            }

            .item-titre {
                display: flex;
                align-items: center;
                gap: 9px;
            }

            .menu-color {
                width: 20px;
                height: 20px;
                border-radius: 7px;
            }

        }


        &:hover {
            >ul.sub-menu {
                opacity: 1;
                visibility: visible;
            }
        }
    }

}

/* Gestion du menu mobile */

.main-primary-menu .menu__container {
    @media(width < 1280px) {
        transform: translateX(-100vw);
        transition: all 300ms ease-in-out;
        position: fixed;
        top: 163px;
        left: 0;
        right: 0;
        z-index: 5;
        background: #fff;
        height: calc(100vh - 163px);
        overflow-y: scroll;

        &.is-open {
            transform: translateX(0);
        }

        #primary-menu > li > .sub-menu > li.menu-item-has-children > a{
            display:flex; 
            align-items:center; 
            gap:.5rem;
        }

        #primary-menu > li > .sub-menu > li.menu-item-has-children > a .chevron{
            display:inline-flex; 
            width:19px; 
            height:20px; 
            cursor:pointer;
        }

        #primary-menu > li > .sub-menu > li.menu-item-has-children > a .chevron svg{
            width:100%; 
            height:100%; 
            transition:transform .2s ease;
        }

        #primary-menu > li > .sub-menu > li.is-open > a .chevron svg{
            transform:rotate(180deg);
        }

        #primary-menu > li > .sub-menu > li.menu-item-has-children > .sub-menu{ 
            display:none; 
        }

        #primary-menu > li > .sub-menu > li.is-open > .sub-menu{ 
            display:block; 
        }

        #primary-menu {
            flex-direction: column;
            padding: 0 20px;

            li {
                a {
                    &::before {
                        display: none;
                    }

                    &:after {
                        display: none !important;
                    }
                }

                &:hover {
                    box-shadow: none;
                }
            }

            >li {
                margin: 1em 0;

                >a {
                    color: var(--wp--preset--color--primary); 
                }

                >.sub-menu {
                    >li {
                        &.menu-item-has-children {
                            position: relative;

                            >.sub-menu {
                                margin-top: .9375rem;

                                >li {
                                    &.menu-item-has-children {
                                        >a {
                                            &:after {
                                                display: none;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        /* top menu */
        #top-menu > li.menu-item-has-children > .sub-menu { 
            display: none; 
        }

        #top-menu > li.menu-item-has-children.is-open > .sub-menu { 
            display: block; 
        }

        #top-menu > li.menu-item-has-children > a {
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        #top-menu > li.menu-item-has-children > a .chevron {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            cursor: pointer;
        }

        #top-menu > li.menu-item-has-children > a .chevron svg {
            width: 20px;
            height: 20px;
            transition: transform .2s ease;
        }

        #top-menu > li.menu-item-has-children.is-open > a .chevron svg {
            transform: rotate(180deg);
        }

        #top-menu {
            & > li {
                &.menu-item-has-children {
                    & > a {
                        padding: 0;

                        &:after {
                            display: none;
                        }
                    }
                }
            }
        }
    }

    @media(width < 666px) {
        top: 115px;
        height: calc(100vh - 115px);
    }

    @media(width < 376px) {
        top: 113px;
        height: calc(100vh - 113px);
    }

    #top-menu {
        display: block;
        padding: 20px;
        margin-top: 10px;
        border-top: solid 1px var(--wp--preset--color--grey);
        background: #f7f7f7;

        li {
            margin: 1em 0;

            a {
                padding: 1em 0;
                font-size: 1rem;
            }
        }
    }
}


.hamburger {
    display: inline-block;
    width: 42px;
    height: 42px;
    flex: 42px 0 0;
    border: solid 2px var(--wp--preset--color--global-primary);
    border-radius: 7px;
    order: 3;
    padding: 0;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    margin: 0;
    overflow: visible;
    position: relative;

    @media(width > 1280px) {
        display: none;
    }

    &:hover {
        cursor: pointer;
    }
}

.hamburger:hover {
    opacity: 0.7;
}

.hamburger.is-active:hover {
    opacity: 0.7;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: var(--wp--preset--color--global-primary);
}


.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 18px;
    height: 2px;
    background-color: var(--wp--preset--color--global-primary);
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
    left: 0;
    right: 0;
    margin: auto;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -6px;
}

.hamburger-inner::after {
    bottom: -6px;
}

.hamburger--squeeze .hamburger-inner {
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}

.hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze.is-active .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}

.hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}