/* --------------------------------------------------- */
/*	Bouton mode test
/* --------------------------------------------------- */					
/* le check caché ? */
.check{
	position: relative;
	display:inline-table;
	width: 165px;
	height: 35px;
	left:2px;
	top:1px;
	border:1px solid #D8D8D8;
	text-align:center;
	align-content:center;

}

.lib, .layer{
	position: absolute;
	right: 0;
	height:34px;
	bottom: 0;
	left: 0;
	clear:both;
}

/* le texte affiché / masqué */
.lib{
	z-index: 2;
	left:7px;
	padding-left:7px;
	top:5px;
}

/* le background */
.layer{
	width: 100%;
	//border:1px solid #D8D8D8;
	//background-color:transparent;
	z-index: 1;
	background: linear-gradient(to right, transparent 50%, transparent 50%);
	transition: background-color 1s ease;
}

.check.r, .check.r .layer{
	border-radius: 100px;
}

.checkbox{
	position: relative;
	width: 100%;
	//height: 80%;
	padding-top: 0px;
	margin: 1px;
	opacity: 0;
	cursor: pointer;
	z-index: 3;
}

/* --------------------------------------------------- */
/*	ModeTest Afficher Oui / Non
/* --------------------------------------------------- */
#checkModeTest-1 .lib::before{
	content: '\00a0  \00a0 \00a0  Mode test';
	position: absolute;
	width: 12px;
	height: 3px;
	color: #0b4c5f;
	color:black;
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	line-height: 0.2;
	padding: 8.5px 4px;
	background-color: lightgrey;
	top:2px;
	left:5px;
	white-space:nowrap;
	border-radius: 50%;
	margin:0px;
}

#checkModeTest-1 .checkbox:checked + .lib::before{
	content: '\00a0  \00a0 \00a0  Mode réel';
	background-color: #01DFA5;
	text-align: left;
	left:45px;
	color: #0b4c5f;
	margin:0px;
}

#checkModeTest-1 .checkbox:checked ~ .layer{
	//background-color: white;
	background: linear-gradient(to right, transparent 0%, white 100%);
}

#checkModeTest-1 .lib, #checkModeTest-1 .lib::before, #checkModeTest-1 .layer{
   transition: 0.3s ease all;
}