#volet {
	width: 250px;
	padding: 10px;
	background: #CCC; color: #000;
	border:1px dashed #999;	
	font-size:10px;
}

#volet a.ouvrir,
#volet a.fermer {
	padding: 10px 25px;
	background: #555;
	color: #fff;
	text-decoration: none;
}

#volet {
	position: absolute;
	left: -270px;  /* test fixed + scroll, on retire la position top */
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	transition: all .5s ease-in;
}
#volet a.ouvrir,
#volet a.fermer {
	position: absolute;
	right: -57px;
	top: 30px;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-moz-radius: 0 0 8px 8px;
	border-radius: 0 0 8px 8px;
}
#volet a.fermer {
	display: none;
}
#volet:target {
	left: 10px;
}

/* code pour la fermeture */

#volet:target a.fermer {
	display: block;
}
#volet:target a.ouvrir {
	display: none;
}
#volet_clos:target #volet {
	left: -270px;
}

 /* test fixed + scroll */
#volet_clos {
	position: fixed; 
	top: 55px; left: 0;
}


/*

	<div id="volet_clos">
		<div id="volet">
			<p>Lorem Elsass ipsum réchime amet sed bissame so libero. DNA, leo Richard Schirmeck tellus</p>
			<p>Wurscht elementum semper tellus s'guelt Pfourtz !</p>
			
			<a href="#volet" class="ouvrir" aria-hidden="true">Astuce</a>
			<a href="#volet_clos" class="fermer" aria-hidden="true">Fermer</a>
		</div>
	</div>

*/