header{
    padding:1rem 7.5%;
    position:sticky; top:0; z-index:999;
    -webkit-transition: all 0.5s ease;transition: all 0.5s ease;
    background-color: var(--fdpage);
}
header::after{
    content:""; display:block;
    position:absolute; left:50%; top:calc( 100% - 1px);
    width:0; height:1px; background-color: var(--holytag)
;    -webkit-transform: translateX(-50%); transform: translateX(-50%);
    -webkit-transition:all 1s ease; transition:all 1s ease;
}
.home header{
    position:fixed; top:0; left:0;
    width:calc( 100% - 15% ); z-index:999;background-color: transparent;
}

header .navigation-principale{
    display:none;
}
header .mbmenu{
    width:30px; height:35px;
    float:right;
}
header .mbmenu .trt{
    position:absolute; left:50%; top:50%;
    width:100%; height:2px;
    background-color: var(--blanc);
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    -webkit-transition:all 0.2s ease; transition:all 0.2s ease;
}
header .mbmenu .trt.un{
    margin-top:-7px;
}
header .mbmenu .trt.tr{
    margin-top:7px;
}
header .mbmenu.actif .trt.un{
    -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);
    margin-top:0;
}
header .mbmenu.actif .trt.tr{
    -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
    margin-top:0;
}
header .mbmenu.actif .trt.dx{
    opacity:0;
}

header a.logo{
    display:block;
}
.home header a.logo{
    pointer-events: none;
}
header a.logo img{
    width:90%; max-width:300px;
    -webkit-transition:all 0.5s ease;transition:all 0.5s ease;
}
header.scroll{
    background-color: var(--fdpage);
}
header.scroll::after{
    width:100%;
}
header.scroll a.logo img{
    max-width:250px;
}

@media screen and (min-width: 1280px ){
    header .navigation-principale{
        display:flex;
        align-items: center;
        justify-content: space-between;
    }
    header ul{
        display:flex;
        justify-content: center;
        margin:0; padding:0; list-style:none; align-items: center;
    }
    header ul li{
        margin:0 0.5rem; text-transform:uppercase; font-size:0.75rem;
    }
    header ul li a{
        color: var(--blanc); display:block;
        padding:0.5rem 0.5rem; text-align:center;
    }
    header .mbmenu{
        display:none;
    }
    header ul li.cpt a{
        padding:0;
        width:40px; height:40px; overflow:hidden;
        background: url(img/cpt.svg) no-repeat center / 25px;
        text-indent:100%; white-space:nowrap;
        border-radius:5px;
    }
    header ul li a:hover{
        color: var(--blanc);
    }
    header ul li a::after{
        content:""; display:block;
        position:absolute; left:50%; top:calc(100% - 1px);
        width:0; height:1px; background-color: var(--blanc);
        -webkit-transform: translateX(-50%); transform: translateX(-50%);
        -webkit-transition:all 0.2s ease; transition:all 0.2s ease;
    }
    header ul li a:hover::after{
        width:60px;
    }
    header ul li.cpt a:hover{
        background-color: var(--holytag);
    }
    header ul ul.sub-menu{
        position:absolute;
        left:50%; top:100%;
        padding:1rem 0;
        -webkit-transform: translateX(-50%);transform: translateX(-50%);
        flex-direction: column;
        align-items:start;
        background-color: var(--bleudark);
        display:none;
        overflow: hidden;
        z-index:999
    }
    header ul ul.sub-menu li{
        text-transform: none;
    }
    header ul ul.sub-menu li a{
        text-align:left; white-space:nowrap;
    }
    header ul ul.sub-menu li a:hover{
        color: var(--holytag);
    }
    header ul ul.sub-menu li a::after{
        display:none;
    }
    header a.bouton.compte{
        font-size:0.75rem;
        padding-left:40px; padding-right:20px;
        background-image: url(img/cpt.svg);
        background-position:10px center;
        background-repeat: no-repeat;
        background-size:20px;
    }
    header a.bouton.compte:hover{
        background-color: var(--bleudark);
        border-color: var(--blanc);
    }
}

@media screen and (min-width: 1680px ){
    header ul li a{
        padding:0.5rem 1rem;
        font-size:0.85rem;
    }
}