:root{
	--M1CL:#769;
	--M1CD:#434;
	--M2CL:#7AC;
	--M2CD:#344;
	--M3CL:#CE7;
	--M3CD:#674;
	--M4CL:#FD5;
	--M4CD:#A74;
	--FCL:#FFF;
	--FCD:#000;
}	

html,body{margin:0;min-height: 100vh; font-family: Arial;font-size: 14px;letter-spacing: 0.06em;}	

.side {
	  width:10px;
	  min-height:100vh;
    background-image: url("BandeBleue.png");
    background-color: #00c;
    margin:0px 16px;
    box-sizing: border-box;
}

.bottom{height:128px;width:100%;}

#MainPage
{
	  max-width:1000px;
	  min-height:100vh;
    background-color: #fff;
    box-sizing: border-box;padding:4px;
}	

#MainMenu, #MainMenu ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#MainMenu li{
display:inline-block;
position:relative;
max-width:240px;
width:24%;
max-width:300px;
border-radius:8px 8px 0 0;
margin: 0 4px 0 0;
border-bottom: 1px solid black;
}

#MainMenu li img{margin:4px 10px; height:32px; width:auto; }

#MainMenu .sub{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
transition: .3s all .1s;
}
#MainMenu li:hover .sub{
max-height:25em;
}

#MainMenu img{margin:4px 10px; height:32px; width:auto; }

/* background des liens menus */
#MainMenu li:first-child{
background-color: var(--M1CL);
background-image:linear-gradient(to bottom, var(--M1CL) 0%, var(--M1CD) 100%);
}
#MainMenu li:nth-child(2){
background-color: var(--M2CL);
background-image:linear-gradient(to bottom, var(--M2CL) 0%, var(--M2CD) 100%);
}
#MainMenu li:nth-child(3){
background-color: var(--M3CL);
background-image:linear-gradient(to bottom, var(--M3CL) 0%, var(--M3CD) 100%);
}
#MainMenu li:last-child{
background-color: var(--M4CL);
background-image:linear-gradient(to bottom, var(--M4CL) 0%, var(--M4CD) 100%);
}
/* background des liens sous menus */
#MainMenu li:first-child .sub{
background:var(--M1CD);
border-top: 1px solid white;
}
#MainMenu li:nth-child(2) .sub{
background:var(--M2CD);
border-top: 1px solid white;
}
#MainMenu li:nth-child(3) .sub{
background:var(--M3CD);
border-top: 1px solid white;
}
#MainMenu li:last-child .sub{
background:var(--M4CD);
border-top: 1px solid white;
}
/* background des liens menus et sous menus au survol */
#MainMenu li:first-child .menu_item:hover{
background:var(--M1CL);
border-radius:8px 8px 0 0;
}
#MainMenu li:nth-child(2):hover{
background:var(--M2CL);
border-radius:8px 8px 0 0;
border-bottom: 1px solid red;
}
#MainMenu li:nth-child(2) .sub .menu_item:hover {
	background:var(--M2CL);
  border-radius:0;
}
#MainMenu li:nth-child(3):hover{
background:var(--M3CL);
border-radius:8px 8px 0 0;
border-bottom: 1px solid red;
}
#MainMenu li:nth-child(3) .sub .menu_item:hover{
background:var(--M3CL);
  border-radius:0;
}
#MainMenu li:last-child:hover{
background:var(--M4CL);
border-radius:8px 8px 0 0;
border-bottom: 1px solid red;
}
#MainMenu li:last-child .sub .menu_item:hover{
background:var(--M4CL);
  border-radius:0;
}

/* les a href */
#MainMenu a{
text-decoration:none;
color:var(--FCL);
font-family:arial;
text-align:left;
}

#MainMenu li:hover .sub a{
color:var(--FCL);
text-transform:inherit;
}

#MainMenu li:hover a, #MainMenu li .sub a:hover {color:var(--FCD);}

#MainMenu div.menu_item{padding:4px 8px;height:40px;display:flex;align-items: center}