/* Header CSS */
header{
    position: sticky;
    top:0;
    background-color: var(--blanc);
    padding: 0.7rem 0;
    z-index: 999;
}
header::before{
    content:"";
    display: block;
    position: absolute;
    left:50%; bottom:0;
    width:0; height: 1px;
    background: var(--jade);
    transform: translateX(-50%);
    transition: all 0.5s ease-in-out
}
header.scrolled{
    padding: 0.25rem 0;
}
header.scrolled::before{
    width:100%;
}
header .inner, footer .inner{
    margin: 0 auto;
    width:90%;
    max-width: 1680px;
}
header a.logo img{
    width:100%;
    max-width: 315px;
}
.home header a.logo{
    pointer-events: none;
}
header .icomobile{
    width:40px; height:40px;
    position: relative;
}
header .icomobile .trt{
    width: 70%;
    height:3px;
    background-color: var(--noir);
    position: absolute;
    left:50%; top:50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease;
}
header .icomobile .trt.un{
    margin-top:8px
}
header .icomobile .trt.qt{
    margin-top:-8px
}
header .icomobile.active .trt.un, header .icomobile.active .trt.qt{
    display: none;
}
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 ul{
        margin:0; padding:0;
        list-style: none;
        display: flex;
        align-items: center;
        gap:0 1rem;
    }
    header .navigation ul li{
        text-transform: uppercase;
        font-weight: bold;
        font-size: 0.9rem;
    }
    header .navigation ul li a{
        display: block;
        padding: 0.5rem 0;
    }
    header .top ul li{
        font-size:0.85rem;
        letter-spacing: 0.1rem;
    }
    header ul li a{
        color: var(--noir)
    }
    header ul li a:hover{
        color: var(--jade);
    }
    header .mn{
        padding-right:1rem;
    }
    header .top{
        gap:0 1rem;
    }
    header .contact{
        gap:0 1rem;
        padding-left:2rem;
        border-left:1px solid var(--noir)
    }
    header .contact .lib{
        font-size:0.7rem;
    }
    header.scrolled .lib{
        display: none;
    }
    header .contact .ico{
        width:24px; height:24px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat
    }
    header .contact .tel, header .contact .mail{
        gap:0 0.5rem;
        align-items: center;
        line-height:1.1
    }
    header .contact .tel .ico{
        background-image: url(../img/call.svg);
    }
    header .contact .mail .ico{
        background-image: url(../img/mail.svg);
    }
}

@media screen and (min-width: 1680px){
    header .navigation ul li{
        font-size: 1rem;
    }
    header ul{
        gap: 0 2rem;
    }
}