#toggle-wrapper{
    transition:0.2s;
    background-color:rgba(255, 255, 255, 0);
}
#toggle-wrapper:hover{
    transition:0.2s;
    background-color:rgba(255, 255, 255, 0.2);
}

#toggle-button{
    position:relative;
    width:40px;
    height:40px;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:0.5s;
    z-index:100;
}
#toggle-button::before{
    content:'';
    position:absolute;
    width:28px;
    width:56%;
    height:3px;
    background:#222;
    transition:0.5s;
    transform:translateY(-10px);
    box-shadow:0 10px 0 #aaa;
    box-shadow:0 10px 0 #222;
    z-index:100;
}
#toggle-button::after{
    content:'';
    position:absolute;
    width:28px;
    width:56%;
    height:3px;
    background:#222;
    transition:0.5s;
    transform:translateY(10px);
    z-index:100;
}

#responsive-menu.active #toggle-button{}
#responsive-menu.not-active #toggle-button{}

    #responsive-menu.active #toggle-button::before{
        transform:translateY(0px) rotate(45deg);
        box-shadow:unset;
    }
    #responsive-menu.active #toggle-button::after{
        transform:translateY(0px) rotate(-45deg);
        box-shadow:unset;
    }

    /*#responsive-menu.active #toggle-button,*/
    #responsive-menu.active #toggle-button::before{
        background-color: #fff;
    }
    #responsive-menu.active #toggle-button::after{
        background-color: #fff;
    }
@keyframes gradientScroll {
  0%   { background-position: 50% 0%; }
  50%  { background-position: 50% 100%; }
  100% { background-position: 50% 0%; }
}
#responsive-menu.not-active #menu-links{
    /*background: radial-gradient(circle at top, #1f2937 0, #020617 50%, #000 100%);*/
    background-color:#fff;
        background-color:#fff;
        background: radial-gradient(circle at top, #ccc 0, #ddd 50%, #eee 100%);
        background: linear-gradient(to bottom, var(--color-bg-responsive1), var(--color-bg-responsive2));
    height:100vh;
    width:0px;
    position:fixed;
    top:0;
    right:0;
    transition:0.5s;
    z-index:88;
    overflow:hidden;

    background-size: 100% 100%;
    animation: none;
}

#responsive-menu.active #menu-links{
    /*background: radial-gradient(circle at top, #1f2937 0, #020617 50%, #000 100%);*/
    background-color:#fff;
        background-color:#fff;
        background: radial-gradient(circle at top, #ccc 0, #ddd 50%, #eee 100%);
        background: linear-gradient(to bottom, var(--color-bg-responsive1), var(--color-bg-responsive2));
    height:100vh;
    width:100vw;
    top:0;
    right:0;
    
    inset: 0;

    transition:0.5s;
    z-index:88;
    position:fixed;

    /* le gradient est "plus grand" que le bloc, donc on voit le mouvement */
    background-size: 100% 300%;
    background-position: 50% 0%;
    animation: gradientScroll 4s linear infinite;
}
    #responsive-menu.active #menu-links li{
        cursor:pointer;
        position: relative;
    }

/* ============================================== */

#responsive-menu.not-active #menu-links ul#menu-cat{
    opacity: 1;
}
#responsive-menu.active #menu-links ul#menu-cat{
    position:relative;
    opacity: 1;
}
/*#responsive-menu.active #menu-links ul#menu-cat > li.cat-li a {*/
#responsive-menu #menu-links ul#menu-cat > li.cat-li a {
    color: #333;
    text-decoration: none;
    /*font-size: 1em;
    font-size: 2rem;*/
    padding: 0px 20px;
    /*display: inline-flex;*/
    font-weight: 700;
    transition: 0.01s;
}
/*#responsive-menu.active #menu-links #menu-cat:hover li a {*/
#responsive-menu.active #menu-links ul#menu-cat > li.cat-li a {
    color: #0002;
    color: #0004;
    color: #fff7;
    width:calc(100vw - 40px);
    text-align:center;
}
    #responsive-menu.not-active #menu-links ul#menu-cat > li.cat-li a {
        color: rgba(0, 0, 0, 0.1);
        /*color: #fff;*/
    }
/*#responsive-menu.active #menu-links #menu-cat li:hover a {*/
#responsive-menu.active #menu-links ul#menu-cat > li.cat-li a:hover {
    color: #000;
    color: #fff;
    background: transparent;
}
#responsive-menu #menu-links ul#menu-cat > li.cat-li a:before {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    font-size: 4em;
    color: rgba(0, 0, 0, 0.1);
    /*border-radius: 50%;*/
    z-index: -1;
    opacity: 0;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 20px;
    transition: 0.5s;
    transition: letter-spacing 1.0s, left 1.0s;


    /**/
    top: 50vh;
    left: 50vw;
    width: 100vw;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    /**/
    z-index: -100;
    align-items: center;

    pointer-events: none;
}
/*/
#responsive-menu.active #menu-links ul#menu-cat > li.cat-li:not(.inactive) a:hover:before,
#responsive-menu.active #menu-links ul#menu-cat > li.cat-li.active a:before
{
/*/
#responsive-menu #menu-links ul#menu-cat > li.cat-li:not(.inactive) a:hover:before,
#responsive-menu #menu-links ul#menu-cat > li.cat-li.active a:before{
/**/
    content: attr(data-text);
    opacity: 1;
    letter-spacing: 5px;

    text-align: center;

    /*display: block;*/
    top: 50vh;
    left: 50vw;
    width: 100vw;
    height: 100vh;
    position: fixed;
    overflow: hidden;

    transition: 0.5s;


    z-index: -1;
}

#responsive-menu.active #menu-links ul#menu-cat > li.cat-li.active a{
    color: #000;
    color: #fff;
}
#responsive-menu.active #menu-links ul#menu-cat > li.cat-li ul.menu-subcat {
    font-size: 15px;
    list-style: none;

    color: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.7)
}
/*#responsive-menu.active #menu-links ul#menu-cat > li.cat-li:not(:hover) ul.menu-subcat {*/
#responsive-menu.not-active #menu-links ul#menu-cat > li.cat-li ul.menu-subcat,
#responsive-menu.active #menu-links ul#menu-cat > li.cat-li:not(.active) ul.menu-subcat {
    max-height:0px;
    transition: 0.5s;
}
/*#responsive-menu.active #menu-links ul#menu-cat > li.cat-li:hover ul.menu-subcat {*/
#responsive-menu.active #menu-links ul#menu-cat > li.cat-li.active ul.menu-subcat {
    max-height:100px;
    transition: 0.5s;
}

#responsive-menu.active #menu-links ul#menu-cat > li.cat-li.active ul.menu-subcat li:hover {
    color: #000;
    color: #fff;
}


#responsive-menu #menu-links {
    display: flex;
    justify-content: center;  /* centre horizontal */
    align-items: center;      /* centre vertical */
}

#menu-links #menu-cat {
    list-style:none;
    margin:0;
    padding:0;
    /*text-align:center;*/
}
    #menu-links ul#menu-cat > li.cat-li {
        position:relative;
        margin:0px 0;
            font-size:1.5rem;
        font-weight:700;*/
        letter-spacing:0.05em;
        text-transform:uppercase;
            font-weight:bold;
            font-family: FoundersGrotesk, Arial, sans-serif;
        font-family:Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
        animation:0.5s;
        overflow:hidden;
    }
    #menu-links ul#menu-cat > li.cat-li:hover {
        animation:0.5s;
    }


@media screen and (max-width:799px){
    #responsive-menu{
        display: block;
    }
}
@media screen and (min-width:800px){
    #responsive-menu{
        display: none;
    }
}