body {
	background: #ffffff;
}

h1 {
	color: #000000;
	font: 30px Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-shadow: 0px 1px black;
	text-align: center;
	margin-bottom: 50px;
}
div {
	text-align:center;
}

.barre {
	text-decoration: line-through;
}

/* Cachons la case à cocher */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
	position: absolute;
	left: -9999px;
}

/* on prépare le label */
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
	position: relative; /* permet de positionner les pseudo-éléments */
	padding-top: 5px;
	padding-left: 25px; /* fait un peu d'espace pour notre case à venir */
	cursor: pointer;    /* affiche un curseur adapté */
}

/* Aspect des checkboxes */
/* :before sert à créer la case à cocher */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
	content: '';
	position: absolute;
	left:0; top: 0px;
	width: 25px; height: 25px; /* dim. de la case */
	border: 1px solid #aaa;
	background: #f8f8f8;
	border-radius: 3px; /* angles arrondis */
	box-shadow: inset 0 1px 3px rgba(0,0,0,.3) /* légère ombre interne */
}

/* Aspect général de la coche */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 100;
	content: '';
	position: absolute;
	width: 20px;
	height: 10px;
	background: transparent;
	top: 4px;
	left: 4px;
	border: 5px solid #333;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	transition: all .2s; /* on prévoit une animation */
}
/* Aspect si "pas cochée" */
[type="checkbox"]:not(:checked) + label:after {
	opacity: 0; /* coche invisible */
/*	transform: scale(0); /* mise à l'échelle à 0 */

*/
}
/* Aspect si "cochée" */
[type="checkbox"]:checked + label:after {
	opacity: 1; /* coche opaque */
}

/* aspect désactivée */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
	box-shadow: none;
	border-color: #bbb;
	background-color: #ddd;
}
/* styles de la coche (si cochée/désactivée) */
[type="checkbox"]:disabled:checked + label:after {
	color: #999;
}
/* on style aussi le label quand désactivé */
[type="checkbox"]:disabled + label {
	color: #aaa;
}

/* aspect au focus de l'élément */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
	border: 1px dotted blue;
}