/*@icon-url-base: "http://www.entypo.com/images/";
@icon-url-settings: "@{icon-url-base}/tools.svg";*/

:root {
	--menu-width-desktop: 25%;
	--menu-width-tablet: 90px;
	--menu-width-smartphone: 230px;	
}

main{
	position:relative;
	height:100%;
	margin-left : var(--menu-width-desktop);
}

.menu{
	background:white;
	height:100%;
	width: var(--menu-width-desktop);
	position:relative;
	top:0;
	left:0;
	z-index:5;
	outline:none;
	float : left;
	padding-right : 5px;
}

.sidebarTitre{
		background:#640064;		
		text-align:center;
		color : white;
}

.sidebarTitre	img{
			width:100px;
			border-radius:50%;
			overflow:hidden;
			border:4px solid @color-1st;
			box-shadow:0 0 0 4px rgba(255,255,255,0.2);
		}
		
.sidebarTitre	h2{
	font-size : 1.2em;
	font-weight:normal;
	margin-bottom:0;
	margin-top : 0px;
		}



@media screen and (max-width:900px) and (min-width:400px){
	main{
		margin-left:var(--menu-width-tablet);
	}
	
	.sidebarTitre	h2{
		font-size : 0.6em;
	}
	
	.menu{
		width:var(--menu-width-tablet);
		
		.avatar{
			padding:0.5em;
			position:relative;
			img{
				width:var(--menu-width-tablet) - 30px;
			}
			
			h2{
				opacity:0;
				position:absolute;
				top:50%;
				left:var(--menu-width-tablet) + 10px;
				margin:0;
				min-width:200px;
				border-radius:4px;
				background:rgba(0,0,0,0.4);
				transform:translate3d(-20px,-50%,0);
				transition:all 0.15s ease-in-out;
			}
			
			&:hover{
				h2{
					opacity:1;
					transform:translate3d(0px,-50%,0);
				}
			}
		}
		
		ul{
			li{
				height:var(--menu-width-tablet)/1.5;
				background-position:center center;
				background-size:30px auto;
				position:relative;

				span{
					//display:none;
					opacity:0;
					position:absolute;
					background:rgba(0,0,0,0.5);
					padding:0.2em 0.5em;
					border-radius:4px;
					top:50%;
					left:var(--menu-width-tablet) - 10px;
					transform:translate3d(-15px,-50%, 0);
					transition:all 0.15s ease-in-out;
					
					&:before{
						content:'';
						width:0;
						height:0;
						position:absolute;
						top:50%;
						left:-5px;
						border-top:5px solid transparent;
						border-bottom:5px solid transparent;
						border-right:5px solid rgba(0,0,0,0.5);
						transform:translateY(-50%);
					}
				}
				
				&:hover{
					span{
						opacity:1;
						transform:translate3d(0px,-50%, 0);
					}
				}
			}
		}
	}
}

@media screen and (max-width:400px){
	main{
		margin-left:0;
	}
	
	.menu{
		width:var(--menu-width-smartphone);
		box-shadow:0 0 0 100em rgba(0,0,0,0);
		transform:translate3d(-var(--menu-width-smartphone),0,0);
		transition:all 0.3s ease-in-out;
		
		.smartphone-menu-trigger{
			width:40px;
			height:40px;
			position:absolute;
			left:100%;
			background:@color-2nd;
			
			&:before, &:after{
				content:'';
				width:50%;
				height:2px;
				background:#fff;
				border-radius:10px;
				position:absolute;
				top:45%;
				left:50%;
				transform:translate3d(-50%, -50%, 0);
			}
			
			&:after{
				top:55%;
				transform:translate3d(-50%, -50%, 0);
			}
		}
		
		ul{
			
			li{
				padding:1em 1em 1em 3em;
				font-size:1.2em;
			}
		}
		
		&:focus{
			transform:translate3d(0,0,0);
			box-shadow:0 0 0 100em rgba(0,0,0,0.6);
			
			.smartphone-menu-trigger{
				pointer-events:none;
			}
		}
	}
}