header:has(.etw-menu) {

    /******Layout de base******/
    position: fixed;
    z-index: 100;
    width: 100vw;
    transition: all 0.4s ease;


    /******Menu par défaut (transparent)******/
    .etw-menu {
        background-color: transparent !important;

        .menu span          { color: var(--e-global-color-primary); }
        .logo svg path      { fill: var(--e-global-color-primary) !important; }
    }


    /******Bouton contact******/
    .contact-button a .elementor-button-text {
        color: white !important;
    }


    /******Dropdown trigger******/
    .drop-down-trigger {
        cursor: pointer;

        &.drop-down-active { opacity: 0.6; }
    }


    /******Colonnes (animation d'entrée)******/
    .column-container               { transform: translateY(-100%); }
    .column:nth-child(2)            { transition: transform 0.2s 0.1s ease; }
    .column:nth-child(3)            { transition: transform 0.2s 0.2s ease; }
    .column:nth-child(4)            { transition: transform 0.2s 0.3s ease; }
    .column:nth-child(5)            { transition: transform 0.2s 0.4s ease; }


    /******Dropdown content******/
    .drop-down-content {
        position: absolute;
        top: 50px;
        height: 0;
        opacity: 0;
        pointer-events: none;
        transition: all 0.2s ease;

        &.drop-down-active {
            height: auto;
            opacity: 1;
            pointer-events: auto;
        }
    }


    /******Overlay (caché par défaut)******/
    .overlay {
        opacity: 0 !important;
        height: 0 !important;
        pointer-events: none;
        cursor: pointer;
    }


    /******État dropdown ouvert******/
    .drop-down-active {

        .column {
            transform: translateY(100%);
            height: auto;
        }

        .overlay {
            display: block;
            opacity: 0.5 !important;
            height: 100vh !important;
            pointer-events: auto;
        }

        /* Menu couleurs quand dropdown actif */
        &.etw-menu {
            .menu span     { color: white ; }
            .logo svg path { fill: white !important; }
        }
    }


    /******État scrollé (header compact)******/
    &.mutated {
        background-color: white;

        .menu span          { color: var(--e-global-color-primary) !important; }
        .logo svg path      { fill: var(--e-global-color-primary) !important; }
        .column             { background-color: white !important; }

        .elementor-button {
            background-color: var(--e-global-color-accent) !important;
            .elementor-button-text { color: white !important; }
        }

        /* Dropdown actif + scrollé */
        .etw-menu.drop-down-active {
            :not(.contact-button).menu-item span     { color: var(--etw-blue); }
            .logo svg path      { fill: var(--e-global-color-primary) !important; }
            .contact-button a   { 
                background-color: var(--etw-green) !important; 
                color : white!important;
            }
        }
    }


    /******État header caché (scroll vers le bas)******/
    &.scroll-down.mutated {
        top: -100px;
        opacity: 0;
        height: 0;

        .overlay        { opacity: 0 !important; height: 0 !important; pointer-events: none; }
        .column         { transform: translateY(-100%); }

        &.drop-down-content {
            height: 0;
            opacity: 0;
            pointer-events: none;
            transition: all 0.2s ease;
        }
    }


    /******Mobile (≤ 1024px)******/
    @media (max-width: 1024px) {

        .menu           { display: none; }
        .overlay        { display: none !important; }
        .arrow          { transform: rotate(90deg); }


        /* Dropdown mobile (panneau latéral) */
        .drop-down-content {
            position: fixed;
            z-index: 2;
            top: 0;
            width: 100dvw !important;
            height: 100dvh !important;
            display: flex !important;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 40px;
            background-color: var(--e-global-color-accent) !important;
            transform: translateX(100%);
            transition: transform 0.2s ease;
        }


        /* Hamburger */
        .hamburger {
            z-index: 1;
            height: 36px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            cursor: pointer;

            .stripe {
                width: 36px;
                height: 5px;
                background-color: var(--etw-soft-blue);
            }
        }

        /* Stripes sombres au scroll */
        &.scroll-down .hamburger .stripe {
            background-color: var(--e-global-color-primary);
        }


        /******État menu ouvert (mobile)******/
        &.open {

            .menu-item:hover    { color: var(--etw-green); }

            /* Hamburger → croix */
            .hamburger {
                position: absolute;
                top: 20px;
                right: 20px;

                .stripe {
                    position: absolute;
                    &:nth-child(1) { transform: rotate(45deg); }
                    &:nth-child(2) { display: none; }
                    &:nth-child(3) { transform: rotate(-45deg); }
                }
            }

            /* Menu visible si pas scrollé */
            &:not(.scroll-down) {
                height: 100vh;
                .menu { display: flex; }
            }

            /* Couleurs si pas mutated */
            &:not(.mutated) {

                background-color: white;
                .hamburger .stripe { background-color:var(--e-global-color-primary) }
            }

            /* Dropdown actif en mobile */
            .drop-down-content.drop-down-active  { 
                transform: translatex(0)!important; 
                background-color : var(--etw-soft-blue)!important;
                
                span {color : white!important;}

            }
            &.drop-down-active .drop-down-trigger.menu-item{
                display: none !important;
            }
            
            &.drop-down-active {                
               
                .hamburger { 
                    display: none !important;
                }

                .arrow {
                    position: absolute;
                    bottom: 30px;
                    right: 30px;
                }

                /* Texte blanc si scroll down actif */
                &.scrolldown .drop-down-content span {
                    color: white !important;
                }
            }
        }
    }
}
@media (max-width: 1024px) {
    header.open :has(.drop-down-active) .menu-item {
        display: none !important;
    }
}

body:has(header.open){
    overflow: hidden;
}