#menu{
width:auto;
top:10px;
left:160px;
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;
transition:all ease 0.5s;

}
#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(--bleu);
font-size:1.1em;
font-weight:400;
margin:0px 20px !important;
padding-bottom:2px;
transition:all ease 0.5s;
padding:8px 0;
border-bottom:4px solid var(--bleu);
height:90px;
align-content:center;
position:relative;
}
#menu li a::after{
content:'';
position:absolute;
right:-22px;
top:0;
width:1px;
height:100%;
background: linear-gradient(to top, #fff 0%, #91af96 50%, #fff 100%);
}

#menu li a:hover{
color:var(--vert);
border-bottom:4px solid var(--vert);
}
#menu .activated a,
#menu .activated a:hover{
color:var(--jaune);
border-bottom:4px solid var(--jaune);
}

#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: 1200px){
#menu li a{
    font-size:1.1em;
    margin:0px 16px !important;
width:auto;
max-width:120px;
text-align:center;
}
#menu li a::after{right:-16px;}
}

@media screen and (max-width: 1080px){
#menu li a{
font-size:1.1em;
margin:0px 14px !important;
width:auto;
max-width:100px;
text-align:center;
}
#menu li a::after{right:-14px;}
}

@media screen and (max-width: 980px){
#menu li a{
font-size:1.1em;
margin:0px 14px !important;
width:auto;
max-width:80px;
text-align:center;
}
}
@media screen and (max-width: 900px){
#menu li a{
font-size:1.1em;
margin:0px 10px !important;
width:auto;
max-width:80px;
text-align:center;
}
#menu li a::after{right:-10px;}
}