:root{
   /* grain réutilisable (feTurbulence en data-URI) */
    --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>");
}

div,header{
    &[data-canvas="Menu Container"]{
        position: fixed;
        transform: translateY(-100%);
        top: 0;
        left: 0;
        width: 100%;
    }
}

header.et-l.et-l--header{
    #nav_header {
        position: fixed !important;
        z-index: 999;
        background: transparent;
        width: 100%;

        .logo {
            svg {
                .cls-1{
                    fill: #FF6B00;
                }
                path {
                    transition: 0.5s fill;
                }
            }
        }

        .menu-icon{
            .et_pb_code_inner{
                cursor: pointer;
                display: flex;
                width: 60px;
                height: 60px;
                align-items: center;
                justify-content: center;
                border: 1px solid #FF6B00;
                border-radius: 20px;
                gap: 9px;
                flex-direction: column;
                transition: 0.5s all;
                span{
                    display: block;
                    width: 29.143px;
                    height: 3px;
                    background: #FF6B00;
                    transition: 0.5s all;
                }
            }
        }
    }

    &.open {
        #nav_header{
            .logo {
                svg path {
                    fill: #fff;
                }
            }

            .menu-icon {
                .et_pb_code_inner{
                    border-color: #fff;
                    span {
                        background: #fff;
                        &:nth-child(1) {
                            transform: translateY(6px) rotate(45deg);
                            @media screen and (max-width: 1024px){
                                transform: translateY(4px) rotate(45deg);
                            }
                        }

                        &:nth-child(2) {
                            transform: translateY(-6px) rotate(-45deg);
                            @media screen and (max-width: 1024px){
                                transform: translateY(-4px) rotate(-45deg);
                            }
                        }
                    }
                }
            }
        }
    }
}