header{
position:sticky; top:0;
padding:1rem 5%;
z-index:999;
background-color:var(--blanc);
border-bottom:1px solid transparent;
}
header a.logo{
display:block;
text-align:left;
}
header a.logo img{
width:100%;
transition:all 0.2s ease;
}
header.scroll{
border-bottom:1px solid var(--bleuclair);
padding-top:0.75rem; padding-bottom:0.75rem;
}
header.scroll a.logo img{
width:80%;
}
.home header a.logo{
pointer-events:none;
}
header .menu-principal-container{
display:none;
}
.menu-mobile{
width:40px; height:30px;
}
.menu-mobile .trt{
width:30px; height:3px;
border-radius:2px;
background-color: var(--bleufonce);
position:absolute; left:50%; top:50%;
-webkit-transform: translate(-50%, -50% ); transform: translate(-50%, -50% );
}
.menu-mobile .trt.un{
margin-top: -7px;
}
.menu-mobile .trt.tr{
margin-top: 7px;
}
@media screen and (min-width:1280px){
header .menu-principal-container{
display:block;
}
header ul{
list-style:none; display:flex;
margin:0; padding:0;
justify-content: center;
}
header ul li{
text-transform: uppercase;
font-weight: 500;
margin:0 0.5rem;
font-size:0.8rem;
text-align:left;
}
header ul li::before{
content:""; display:block;
width:0; height:3px;
background-color: var(--bleufonce);
position: absolute; left:50%; top:0;
-webkit-transform: translate(-50%, -65%); transform: translate(-50%, -65%);
-webkit-transition:all 0.2s ease; transition:all 0.2s ease;
opacity:0;
}
header ul li.current-menu-item::before{
width:30px;
opacity:1;
}
header ul li:hover::before{
width:30px;
opacity:1;
}
header ul li a{
color: var(--bleufonce);
display:block; padding:0.5rem 0;
}
.menu-mobile{
display:none;
}
}
@media screen and (min-width:1680px){
header ul li{
font-size:1rem;
margin-left:1rem; margin-right:1rem;
}
}