.tree-mocker{
	.icon{
		display:none;
	}
	position:sticky;
	top:var(--header-height);
	flex-shrink:0;
	max-width: var(--max-width);
	width:var(--width);
	height:1px;
	.tree-wrapper{
		position:sticky;
		box-sizing: border-box;
		z-index:2;
		left:var(--position-left);
		top:var(--position-top);
		background-color:var(--bg-color-tree);
		max-width: var(--max-width);
		width:var(--width);
		max-height:calc(100vh - var(--position-top));
		margin:0;
		padding:var(--padding-wrapper);
		overflow-x:hidden;
		overflow-y:auto;
		overscroll-behavior:contain;
		transition:width linear 100ms;

		
	
		ul.tree{ /*arbre complet*/ 
			width:100%;
			margin:0;
			padding:var(--padding-lvl0);
			white-space: nowrap;
			overflow:hidden;
			ul{
				padding:0;
			}
			li{	
				list-style: none;
			}
			label{
				box-sizing: border-box;
				display:block;
				cursor:pointer;
				width:100%;
				padding:var(--padding-label);
				line-height:var(--line-height);
			}
			img.ex_icon{
				height:var(--height-ex-icon);
				vertical-align:middle;
				margin-left:1em;
			}
			>li{
				.disabled{
					pointer-events:none;
					color:var(--disabled-font-color);
					>a{
						color:var(--disabled-font-color);
					}
				}	
				>label{ /*lvl1 : Classes*/	
					background: linear-gradient(to left, var(--bg-color-lvl1) 34%, var(--bg-color-lvl1-hover) 65%) right;
					background-size: 300% 100%;	
					transition:background-position linear 300ms;
				}
				>label:hover{ /*lvl1 : Classes*/
					background-position: left;
					transition:background-position linear 300ms;
					
				}
				>ul>li>label{ /*lvl2 : Chapitres */
					background: linear-gradient(to left, var(--bg-color-lvl2) 34%, var(--bg-color-lvl2-hover) 65%) right;
					background-size: 300% 100%;	
					transition:background-position linear 300ms;
					padding:var(--padding-lvl2);
				}
				>ul>li>label:hover{ /*lvl2 : Chapitres */
					background-position: left;
					transition:background-position linear 300ms;
				}
				
			}
			li.file, li.ex{
				position:relative;
				background: linear-gradient(to left, #fff 34%, var(--bg-color-lvl3-hover) 65%) right;
				background-size: 300% 100%;	
				transition:background-position linear 300ms, max-height cubic-bezier(0,1,0,.94) 200ms,visibility 0s;
				& .checkmark{
					position:absolute;
					top:var(--position-checkmark-top);
					left:var(--position-checkmark-left);
					font-size:var(--font-size-checkmark);
				}
			}
			li.file:hover,li.ex:hover{
				background-position:left;
				transition:background-position linear 300ms;
			}
			li.file a,li.ex a{ /*lvl3 : Items */
				display: block;
				line-height:var(--line-height);
				padding:var(--padding-lvl3);
				background:url("icone_gauche.58bb433aee8c.svg");
				background-repeat:no-repeat;
				background-position:1em;
				background-size:auto 100%;
				border-bottom:solid 1px var(--border-color);
				&.selected{
					background:url("icone_gauche_selected.2c4bd1cef36c.svg");
					background-repeat:no-repeat;
					background-position:1em;
					background-size:auto 100%;
					font-weight:bold;
				}
			}
	
			li input
			{
				display:none;
			}
			li input:not(:checked)+ul>li input:checked + ul > li {
				visibility:hidden;
				max-height:0;
				transition:max-height cubic-bezier(0,1,0,.94) 200ms,visibility 0s;
			}
	
			li input + ul > li { 
				visibility:hidden;
				max-height:0;
				transition:max-height cubic-bezier(0,1,0,.94) 200ms,visibility 0s;
			}
			li input:checked + ul > li { 
				visibility:visible;
				max-height:100vh;
				transition:max-height ease-in 500ms,visibility 0s  ;
			}
			label:hover, a:hover{
				font-size:var(--font-size-hovered);
			}
	
	
	
		}
	}
}
.hide_menu_button{
	width:30px;
	&:hover{
		cursor:pointer;
	}
	p{
		position:sticky;
		top:50%;
		img{
			width:100%;
		}
	}
}



@media (max-width:768px){
	.tree-wrapper{
		position:absolute;
		width:100%;
		margin-left:50px;
		margin-top:-30px;
		z-index:2;
		left:unset;
		top:unset;
		max-width: unset;
		overflow:hidden;
		padding: 0 30px 0 0 ;
		opacity:1;
		transition:all 200ms linear;
		height:calc(100vh - 100px);
		overflow-y: scroll;

		
		ul.tree{
			font-size:1.2em;
			line-height:40px;
			margin-top:0;
			li.file a,li.ex a {
				background: url("document.b233dbc966fb.png") 0 50% no-repeat;
				padding-left: 30px;
			}
			li.ex a { background:url("pdf.7756e7b00ea7.png") 0 50% no-repeat; }
			li input{
				height: 40px;
				&+ul{
					background: url("toggle-small-expand.a21c3a7268a8.png") 40px 10px no-repeat;
					margin: -2em 0 0 -44px; /* 15px */
					height: 40px;
					&>li { 
						display: none; 
						margin-left: -14px !important; 
						padding-left: 1px; 
					}
				}
				&:checked+ul{
					background: url("toggle-small.98f5e4d15228.png") 40px 10px no-repeat;
					margin: -2em 0 0 -44px; /* 20px */
					padding: 1.563em 0 0 80px;
					height: auto;
					&>li{
						display: block; 
						margin: 0.3em 0 0.3em;  /* 2px */
						&:last-child { 
							margin: 0 0 0.063em; /* 1px */ 
						}
					}
				}		
			}
			li label{
				background: url("folder.c3be4846cc1c.png") 15px 50% no-repeat;
				padding-left: 37px;
			}
		}
	}
}