#menu{
width:auto;
top:26px;
right:200px;
display:inline-block;
position:absolute;
box-sizing:border-box;
text-align:center;
margin-bottom:2px;
transition:all ease 0.5s;
}
#menu li{
font-size:1em;
padding:0 !important;
margin:0!important;
list-style-type:none;
display:inline;
position:relative;
float:left;
}
#menu li:first-child,
#menu li:first-child a{
}
#menu li:last-child,
#menu li:last-child a{
}

#menu li a{
float:left;
cursor:pointer;
text-decoration:none;
text-transform:uppercase;
color:var(--gris);
font-size:1.2em;
font-weight:700;
margin:0px 20px !important;
padding-bottom:2px;
transition:all ease 0.2s;
padding:8px 0;
}

#menu li a:hover{
color:var(--orange);
text-decoration:underline;
}
#menu .activated a,
#menu .activated a:hover{
color:var(--orange);
text-decoration:none;
}

#espaceClient{
position:fixed;
right:0;
background:var(--orange);
height:calc(100% - 30px);  
cursor:pointer;
padding:0 20px;
box-sizing:border-box;
transition:all ease 0.5s;
}
#espaceClient::before{
content:' ';
position:absolute;
left:-40px;
height:100%;
width:45px;
background-image:url(/images/triangle-espaceclient.svg);   
background-repeat:no-repeat;
}
#espaceClient:hover{
padding:0 60px 0 20px;
}
#espaceClient p{
font-size:1.2em;
font-weight:700;
color:white;
text-transform:uppercase;
position:relative;
top:50%;
transform:translateY(-50%); 
}

#social {
position:absolute;
display:block; 
margin-bottom:20px;
z-index:999;
right:30px;
top:28px;
}
#social a{
display:inline-block;
margin-right:10px;    
}
#social svg{
height:35px;
width:35px; 
transition:all ease 0.3s;
}
#social a svg .fill2{
fill:var(--rouge)!important;
}
#social a:hover svg .fill2{
fill:var(--text)!important;
}
#social a svg .fill,
#social a #facebook path{
fill:var(--moutarde)!important;
}
#social a:hover svg .fill,
#social a:hover #facebook path{
fill:var(--rouge)!important;
}
@media screen and (max-width: 980px){
#menu li a{font-size:1.1em;margin:0px 6px !important;}
}