header{
padding:1rem 5%;
border-bottom: 1px solid var(--bleu);
z-index:999;
position:sticky; top:0;
background-color: var(--blanc);
-webkit-transition:all 0.2s ease; transition:all 0.2s ease;
}
header ul{
margin:0; padding:0; list-style:none;
}
header .menu-principal-container{
display:none;
}
header a.accueil{
display: block;
}
header a.accueil img{
display: block;
width:90%; max-width:350px;
-webkit-transition:all 0.2s ease; transition:all 0.2s ease;
}
.home header a.accueil{
pointer-events: none;
}
header .icomobile{
width:30px; height:30px;
}
header .icomobile .trt{
position:absolute;
left:50%; top:50%;
width:80%; height:2px; background-color: var(--noir);
-webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg);
-webkit-transition:all 0.2s ease; transition:all 0.2s ease;
}
header .icomobile .trt.un{
margin-top:-7px
}
header .icomobile .trt.dx{
margin-top:7px
}
header .icomobile.actif .trt.dx{
opacity:0;
}
header .icomobile.actif .trt.un{
margin:0;
-webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);
}
header .icomobile.actif .trt.tr{
margin:0;
-webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
}
@media screen and (min-width:1200px){
header .menu-principal-container{
display:block;
}
header .menu-principal-container ul{
display:flex;
align-items: center;
justify-content:center;
}
header .menu-principal-container ul li{
font-weight:500; text-transform: uppercase;
margin:0 1rem;
}
header .menu-principal-container ul ul.sub-menu li{
text-transform: none;
margin:0; font-weight:300;
text-align:center
}
header .menu-principal-container ul ul.sub-menu li a{
display:block;
padding:1rem;
}
header .menu-principal-container ul ul.sub-menu li a:hover{
background-color: rgb(240,240,240);
}
header .menu-principal-container ul li::after{
width:0; height:2px; background-color: var(--bleu);
content:""; display:block;
position:absolute; left:50%; top:80%;
-webkit-transform: translateX(-50%); transform: translateX(-50%);
-webkit-transition:all 0.2s ease; transition:all 0.2s ease;
}
header .menu-principal-container ul li:hover::after{
width:35px;
}
header .menu-principal-container ul li a{
display:block; padding:2rem 0; color: var(--orange);
}
header .menu-principal-container ul ul.sub-menu{
display:none;
position:absolute;
left:50%; top:100%;
-webkit-transform: translateX(-50%); transform: translateX(-50%);
background-color: var(--blanc);
min-width:300px; max-width:300px;
}
header.scroll{
padding-top:0.5rem; padding-bottom:0.5rem;
}
header.scroll a.accueil img{
max-width:250px;
}
}