header{
background-color:#FFFFFF;
position:relative;
border-bottom:1px solid var(--bleu);
z-index:999;
}
.home header{ border:none;}
header .top{
display:none;
}
header .main{ margin-left:1rem; margin-right:1rem; }
header .main a.logo{ display:inline-block; text-align:left; }
header .main a.logo{
display: block;
}
header .main a.logo img{ margin: 0.5rem 0; width:100%; }
header .main img.frenchfab{ width:auto; height:40px;}
.home header .main a.logo{ pointer-events:none; }
header .main .nav{ display:none; }
header .main .devis, header .main .recherche{ display: none; }
header .main .recherche input[type=search]{ width:calc(100% - 1rem); font-family: 'Roboto', sans-serif; font-size:1rem; padding:0.5rem;}
header .mn-mobile{ width:40px; height:40px; position:relative; margin:0 auto; display:inline-block; }
header .mn-mobile .trt{ width:25px; height:3px; background-color:var(--noir); position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); }
header .mn-mobile .trt.un{ margin-top:-7px;}
header .mn-mobile .trt.tr{ margin-top:7px;}
header .wrap{ text-align:right; }
header.scroll{
position:sticky; top:0;
z-index:999;
}
header .bt-search, header .bloc-recherche{
display:none
}
@media screen and (min-width: 768px){
header .top{
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
background-color:var(--bleufonce); color:var(--blanc);
}
header .main img.frenchfab{ height:60px;}
header .top ul{ list-style:none; margin:0; padding:0; font-size:0; }
header .top ul li{ display:inline-block; font-size:.9rem; text-transform:uppercase; font-size:0.867rem; }
header .top ul li a{
display:block; padding:0.5rem 1.5rem; color:var(--blanc);
}
header .top ul li.contact a{
background:url(//www.multigraphic.net/wp-content/themes/multigraphic/css/img/env.svg) no-repeat 10px center / 18px; padding-left:40px;
}
header .top ul li a:hover, header .top ul li.contact a:hover{
background-color:var(--gris);
}
header .menu-reseaux-container ul li a{
display:block; width:25px; height:25px; border-radius: 50%; overflow:hidden; text-indent:100%; white-space:nowrap; padding:0; -webkit-transition:all 0.2s ease;transition:all 0.2s ease; background-color: var(--bleu);
background-position:center; background-repeat:no-repeat; background-size:90%;
}
header .menu-reseaux-container ul li a:hover{
background-color: var(--grismed)
}
header .menu-reseaux-container ul li{ display:inline-block; margin-right: 0.5rem; }
header .menu-reseaux-container ul li a:hover{ -webkit-transform:scale(1.1);transform:scale(1.1); }
header .menu-reseaux-container ul li.fbk a{ background-image:url(//www.multigraphic.net/wp-content/themes/multigraphic/css/img/fbk.svg); }
header .menu-reseaux-container ul li.lkd a{ background-image:url(//www.multigraphic.net/wp-content/themes/multigraphic/css/img/lkd.svg); }
header .menu-reseaux-container ul li.twt a{ background-image:url(//www.multigraphic.net/wp-content/themes/multigraphic/css/img/twt.svg); }
header .menu-reseaux-container ul li.ytb a{ background-image:url(//www.multigraphic.net/wp-content/themes/multigraphic/css/img/youtube.svg); }
header .menu-reseaux-container ul li.inst a{ background-image:url(//www.multigraphic.net/wp-content/themes/multigraphic/css/img/instagram.svg); }
}
@media screen and (min-width: 1024px){
header .top{
text-align:right;
}
header .main .devis{ display: block}
}
@media screen and (min-width: 1280px){
header .mn-mobile{ display:none !important; }
header.scroll .top{
height:0;
overflow:hidden;
}
header .main{
width:95%; margin:0 auto;
-webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
header.scroll .main{
padding-top:0; padding-bottom:0;
}
header .main .nav{ display:block; text-align:right; height:100%; }
header .main .nav > div {
display:inline-block;
}
header .main .nav ul {
list-style:none; margin:0; padding:0; 
}
header .main .nav ul li {
font-size:1.2rem; display:inline-block;
vertical-align:middle; padding:1rem 0;
-webkit-transition:all 0.2s ease; transition:all 0.2s ease;
}
header .main .nav ul li:hover{ cursor: pointer; }
header .main .nav ul li a{
display:block; padding:1rem; margin:0 .5rem; color:var(--blanc); background-color: var(--bleu);
text-transform: uppercase;
}
header .main .nav ul li:hover a{ background-color:var(--grismed); }
header .main .nav ul ul.sub-menu{ display:none; position:absolute; left:0; width:100%; top:99.5%; background-color: var(--grisclair); text-align:center; padding-bottom:2rem; z-index:100; }
header .main .nav ul ul.sub-menu > li{ display:inline-block; vertical-align:top; width:12%; margin:0 2rem; padding:0; text-align: left; margin-top:2rem; font-size:1rem;  }
header .main .nav ul ul.sub-menu > li a{border-bottom:1px solid; position:relative; display:block;text-transform:lowercase;}
header .main .nav ul ul.sub-menu > li a.first-cat { font-weight:700; color: var(--bleu); display:flex; align-items:center; gap:0 8px;} header .main .nav ul ul.sub-menu > li a.first-cat span.picto{ width:20% }
header .main .nav ul ul.sub-menu > li a.first-cat span.intit{ width:80%; }
header .main .nav ul ul.sub-menu > li a.first-cat span.picto img{  width:80%; display:block; }
header .main .nav ul ul.sub-menu > li a:hover{ color: var(--fushia); }
header .main .nav ul ul.sub-menu > li a::after{
content:""; display:block; width:25px; height:3px; background-color:var(--bleu); position:absolute; left:0; top:100%; -webkit-transform:translateY(-50%);transform:translateY(-50%);
}
header .main .nav ul ul.sub-menu li a{
padding-top:1rem; padding-bottom:1rem;
}
header .main .nav ul ul.sub-sub-menu li { display:block; font-size:0.8rem; text-transform:none; padding:0; }
header .main .nav ul ul.sub-sub-menu li a { border-color:var( --noir-02);}
header .main .nav ul ul.sub-sub-menu li.souscat{ text-transform:uppercase; font-size:0.8rem;  }
header .main .nav ul ul.sub-sub-menu li.souscat a { font-weight:700; color: var(--gris);}
header .main .nav ul ul.sub-sub-menu li.souscat ul li a { font-weight:300; }
header .main .nav ul ul.sub-sub-menu li a::after{ display:none; border:none;}
header .main .nav ul ul.sub-sub-menu li a:hover{ color: var(--bleu); background-color: var(--noir-01); padding-left:0.25rem; padding-right:0.25rem;}
header .main .nav ul ul.sub-menu > li a{ display:block; background:none; color: var(--gris); padding-left:0; padding-right:0; margin:0;}
header .bt-search{
display:block;
width:56px; height:56px;
border-radius: 50%;
background: var(--grisclair) url(//www.multigraphic.net/wp-content/themes/multigraphic/css/img/loupe.svg) no-repeat center / 32px;
cursor:pointer;
margin: 0 auto;
}
header .bt-search:hover{
background-color: var(--grisclair)
}
header .bloc-recherche{
position:relative;
}
header .recherche{
padding:0.75rem;
background-color: var(--grisclair);
}
header .bloc-recherche .close{
cursor: pointer;
content:"";
display: block;
width:30px; height: 30px;
border-radius:50%;
border:1px solid var(--gris);
position:absolute;
left:10%; top:50%;
transform: translateY(-50%);
background: url(//www.multigraphic.net/wp-content/themes/multigraphic/css/img/close.svg) no-repeat center / contain;
}
header .recherche input[type=search]{
width:70%; max-width:500px;
border:1px solid var(--grismed); padding:1rem 0.75rem; font-size:1rem;
background:url(//www.multigraphic.net/wp-content/themes/multigraphic/css/img/loupe.svg) no-repeat right center / 30px;}
header .recherche .screen-reader-text{display:none;}
header .recherche input[type=submit]{display:none; }
header .menu-reseaux-container{
margin:0 1rem;
}
}
@media screen and (min-width: 1440px){
header .main .nav ul li a{
padding-right: 1.5rem;
padding-left: 1.5rem;
}
}
@media screen and (min-width: 1680px){
header .main .nav ul li a{
margin-right:1rem; margin-left:1rem;
}
header .main .nav ul li a{
padding-right: 2rem;
padding-left: 2rem;
}
}
@media screen and (min-width: 2500px){
header .main{ width:90%;}
}