/* Header CSS */
header{
    display: flex;
    justify-content: center;
    padding:1.75rem 0 0 0;
    position: sticky;
    left:0; top:0;
    width:100%;
    z-index:999;
    transition: all 0.35s ease-out;
}
.home header{
    position: fixed;
}
header.scrolled{
    padding-top:0;
}
header .content{
    width:90%;
    max-width:1280px;
    border-radius: 0.75rem;
    padding:0.5rem 1rem;
    background-color: var(--blanc);
    box-shadow: 0 0 1rem rgba(0,0,0,.2);
    transition: all 0.35s ease-out;
}
@media screen and (min-width:640px){
    header .content{
        padding:1.5rem 2rem;
    }
}
header.scrolled .content{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top:0.75rem;
    padding-bottom:0.75rem;
}
header .content a.logo{
    display: block;
    max-width:250px;
}
.home header a.logo{
    pointer-events: none;
}
header .content a.logo img{
    width:100%
}
header .icomobile{
    width:40px; height: 40px;
    position: relative;
}
header .icomobile .trt{
    width:80%; height: 3px;
    position: absolute;
    left:50%; top:50%;
    transform: translate(-50%, -50%);
    background-color: var(--bleufonce);
    transition: all 0.35s ease;
}
header .icomobile .trt.un{
    margin-top: -8px;
    transition: all 0.1s ease;
}
header .icomobile .trt.qt{
    margin-top: 8px;
    transition: all 0.1s ease;
}
header .icomobile.active .trt{
    width:50%
}
header .icomobile.active .trt.un, header .icomobile.active .trt.qt{
    width:0; opacity:0
}
header .icomobile.active .trt.dx{
    transform: translate(-50%, -50%) rotate(-45deg);
}
header .icomobile.active .trt.tr{
    transform: translate(-50%, -50%) rotate(45deg);
}



@media screen and (min-width:1200px){
    header .navigation ul{
        margin:0; padding:0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap:0 1.5rem
    }
    header .navigation ul li{
        font-weight: bold;
    }
    header .navigation ul li a{
        color: var(--bleufonce)
    }
    header .navigation ul li a:hover{
        color: var(--bleuelectric)
    }
    header .navigation ul li.bt a{
        display: flex;
        justify-content: center;
        align-items: center;
        gap:0 0.25rem;
        background-color: var(--emeraude);
        color: var(--blanc);
        padding:0.7rem 1.35rem;
        border-radius: 2rem;
        border: 2px solid var(--emeraude);
    }
    header .navigation ul li.bt a::before{
        content:""; display: block;
        width:26px; height: 26px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    header .navigation ul li.bt.adhesion a::before{
        background-image: url(../img/adhesion.svg);
    }
    header .navigation ul li.bt.contact a::before{
        background-image: url(../img/email.svg);
    }
    header .navigation ul li.bt.contour a{
        background-color: var(--blanc);
        border-color: var(--bleuelectric);
        color: var(--bleuelectric)
    }
    header .navigation ul li.bt a:hover{
        background-color: var(--bleufonce);
        border-color: var(--bleufonce);
        color: var(--blanc)
    }
    header .navigation ul li.bt.contact a:hover::before{
        background-image: url(../img/email-white.svg);
    }
}

@media screen and (min-width:1680px){
    header .navigation ul{
        gap:0 2.25rem
    }
}