header{
padding:1.5rem 5% 0.75rem 5%;
background-color: var(--blanc);
position: sticky;
top:0;
z-index: 999;
-webkit-transition:all 0.35s ease; transition:all 0.35s ease;
}
header.scroll{
padding-top:0.5rem;
}
header a.logo{
display:inline-block;
}
header a.logo img{
width:80%; height: auto;
max-width:220px;
display:block;
}
header .bloc-titre{
-webkit-transform: translateX(-1rem); transform: translateX(-1rem);
}
header .bloc-titre .ttl{
text-transform: uppercase;
margin-right:1rem;
line-height: 1;
color: var(--bleu);
font-size:0.9rem;
}
header .bloc-titre .accroche{
font-weight: bold;
color: var(--bleu);
font-size: 0.7rem;
}
header .icomobile{
position:absolute !important;
right:1rem;
top:50%;
-webkit-transform: translateY(-50%); transform: translateY(-50%);
width:40px; height:40px;
position:relative;
}
header .icomobile .trt{
position: absolute;
left:50%; top:50%;
width:70%; height:3px;background-color: var(--bleu);
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
-webkit-transition: all 0.2s ease; transition: all 0.2s ease;
transform-origin: center;
}
header .icomobile .trt.un{
margin-top: -8px;
}
header .icomobile .trt.tr{
margin-top: 8px;
}
header .icomobile.active .trt.un{
margin-top: 0;
-webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
}
header .icomobile.active .trt.dx{
display: none;
}
header .icomobile.active .trt.tr{
margin-top: 0;
-webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (min-width:580px){
header .bloc-titre .ttl{
font-size:1.5rem;
}
header .bloc-titre .accroche{
font-weight: bold;
color: var(--bleu);
font-size: 1rem;
}
}
@media screen and (min-width:992px){
header .bloc-titre .ttl{
font-size:2rem;
}
header .bloc-titre .accroche{
font-size: 0.9rem;
}
header .filet{
width:2px;
height:100%;
background-color: var(--bleu);
position:absolute;
left:20%; top:0;
transform: skewX(45deg);
transform-origin: left top;
}
header .bloc-titre{
-webkit-transform: translateX(0); transform: translateX(0);
}
}
@media screen and (min-width:1200px){
header ul{
list-style: none;
margin:0; padding:0;
}
header .menu-principal-container ul{
display: flex;
flex-wrap: wrap;
justify-content : start;
}
header .menu-principal-container ul li{
position: relative;
text-transform: uppercase;
font-weight: 600;
font-size:0.9rem;
}
header .menu-principal-container ul li a{
color: var(--noir);
display: block;
padding:1rem 1rem 0 1rem;
}
header .menu-principal-container ul li a:hover{
color: var(--bleuclair)
}
header .menu-principal-container ul ul.sub-menu{
display:none;
flex-direction: column;
align-items: stretch;
position:absolute;
left:50%;
top:100%;
-webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);
min-width:20em;
max-width:30em;
background-color: var(--noir);
padding:1rem;
border-top:0.5rem solid var(--blanc)
}
header .menu-principal-container ul.sub-menu li{
font-weight: normal;
font-size:0.9em;
text-transform: none;
}
header .menu-principal-container ul.sub-menu li a{
color: var(--blanc);
padding-top:0.5rem;
padding-bottom:0.5rem;
}
header .menu-principal-container ul.sub-menu li a:hover{
color: var(--bleuclair)
}
header .bloc-titre{
padding:0 1rem;
}
}
@media screen and (min-width:1440px){
}
@media screen and (min-width:1680px){
header .bloc-titre .ttl{
font-size:2.5em;
}
header .menu-principal-container ul li{
font-size:1.05rem;
}
header .menu-principal-container ul{
gap: 1rem;
}
}