header{
    padding:1rem 5%;
    position: sticky;
    top:0;
    transition: all 0.35s ease;
    z-index:999;
    background-color: var(--blanc);
}
header.scroll{
    padding-top:0.35rem; padding-bottom:0.35rem;
}
header a.logo img{
    width:90%;
    transition: all 0.35s ease;
}
header.scroll a.logo img{
    width:80%;
}
.home a.logo{
    pointer-events:none;
}
.knak{
    font-size:0.8rem
}
.icomobile{
    width:40px; height:40px;
    border-radius: 50%;
    background: var(--bleufonce) url(../img/icomobile.svg) no-repeat center top / 100% auto;
    transition: all 0.2s ease;
    cursor: pointer;
}
.icomobile:hover{
    width:40px; height:40px;
    border-radius: 50%;
    background-color: var(--bleu);
}
.icomobile.active{
    width:40px; height:40px;
    border-radius: 50%;
    background: var(--bleu) url(../img/icomobile.svg) no-repeat center bottom / 100% auto;
}

@media screen and (min-width:1200px){
    header ul{
        margin:0; padding:0;
        list-style: none;
        display:flex;
        gap:0 0.65rem 
    }
    header ul li{
        text-transform:uppercase;
        font-size:0.8rem;
        font-weight:500;
        position:relative
    }
    header ul li a{
        color: var(--bleufonce);
        display:block;
        padding:0.75rem 0;
    }
    header ul li a:hover{
        color: var(--bleu);
    }
    header ul ul.sub-menu{
        display:none;
        position:absolute;
        left:50%; top:100%;
        padding:1rem 0;
        background-color: var(--blanc);
        -webkit-transform: translateX(-50%); transform: translateX(-50%);
        box-shadow:0 0.2rem 0.2rem rgba(0,0,0,.3);
        min-width:300px;
    }
    header ul ul.sub-menu li{
        text-transform: none;
        text-align:left;
        font-size:0.9em
    }
    header ul ul.sub-menu li a{
        padding: 0.75rem 1.5rem
    }
}

@media screen and (min-width:1440px){
    header{
        padding:1rem 6.5%;
    }
    header ul{
        gap:0 1rem 
    }
    header ul li, .knak{
        font-size:0.9rem;
    }
    
}
@media screen and (min-width:1680px){
    header ul{
        gap:0 1.2rem 
    }
    header ul li, .knak{
        font-size:1rem;
    }

    
}
@media screen and (min-width:1920px){
    header ul{
        gap:0 2rem 
    }
}
@media screen and (min-width:1921px){
    header{
        padding:1rem 10%;
    } 
}