header{
position: sticky;
z-index:999;
top:0;
padding:0.65rem 0;
background-color: var(--blanc);
}
header a.logo img{
width:100%;
max-width: 260px;
transition: all 0.35s ease-out;
}
header.scrolled a.logo img{
max-width: 180px;
}
.home header a.logo{
pointer-events: none;
}
header ul{
margin:0; padding:0;
list-style: none;
}
.menu-principal-container ul{
display: flex;
gap:0 2rem;
}
.menu-principal-container ul li{
text-transform: uppercase;
font-size: 0.9rem;
font-weight: normal;
letter-spacing: 1px;
position: relative;
}
.menu-principal-container ul li a{
color: var(--bleufonce);
display:block;
padding:0.5rem;
position:relative;
}
.menu-principal-container ul li::after{
content:"";
display: block;
position:absolute;
left:50%;
top:90%;
width:0;
height: 5px;
background-color: var(--bleufonce);
transform: translateX(-50%);
transition: all 0.2s ease;
}
.menu-principal-container ul li:hover::after{
width:35px;
background-color: var(--vert);
}
.menu-principal-container ul li.current-menu-item a, .menu-principal-container ul li.current-menu-ancestor a{
color: var(--vert);
}
.menu-principal-container ul li.current-menu-item::after, .menu-principal-container ul li.current-menu-ancestor::after{
width:35px;
height:5px;
background-color: var(--vert);
}
.menu-principal-container ul li a:hover{
color: var(--vert)
}
.menu-principal-container ul.sub-menu{
display: none;
position:absolute;
left:50%;
top:100%;
background-color: var(--grisclair);
width:320px;
padding:1rem;
box-sizing: border-box;
transform: translateX(-50%);
}
.menu-principal-container ul.sub-menu li{
text-transform: none;
font-size:0.9em;
}
.menu-principal-container ul.sub-menu li::after{
display:none;
}
.icomobile{
width:40px; height: 40px;
}
.icomobile .trt{
position:absolute;
left:50%; top:50%;
width:70%; height: 3px;
background-color: var(--bleufonce);
transition: all 0.2s ease;
transform: translate(-50%, -50%)
}
.icomobile .trt.un{
margin-top:-8px;
}
.icomobile .trt.qt{
margin-top:8px;
}
.icomobile.active .trt.un, .icomobile.active .trt.qt{
display:none;
}
.icomobile.active .trt.dx{
transform: translate(-50%, -50%) rotate(-45deg);
}
.icomobile.active .trt.tr{
transform: translate(-50%, -50%) rotate(45deg);
}