/**
 * http://meyerweb.com/eric/tools/css/reset/ 
 *    v2.0 | 20110126
 *    License: none (public domain)
 *
 * @format
 */

html,
body,
.clc div,
.clc span,
.clc applet,
.clc object,
.clc iframe,
.clc h1,
.clc h2,
.clc h3,
.clc h4,
.clc h5,
.clc h6,
.clc p,
.clc blockquote,
.clc pre,
.clc a,
.clc abbr,
.clc acronym,
.clc address,
.clc big,
.clc cite,
.clc code,
.clc del,
.clc dfn,
.clc em,
.clc img,
.clc ins,
.clc kbd,
.clc q,
.clc s,
.clc samp,
.clc small,
.clc strike,
.clc strong,
.clc sub,
.clc sup,
.clc tt,
.clc var,
.clc b,
.clc u,
.clc i,
.clc center,
.clc dl,
.clc dt,
.clc dd,
.clc ol,
.clc ul,
.clc li,
.clc fieldset,
.clc form,
.clc label,
.clc legend,
.clc table,
.clc caption,
.clc tbody,
.clc tfoot,
.clc thead,
.clc tr,
.clc th,
.clc td,
.clc article,
.clc aside,
.clc canvas,
.clc details,
.clc embed,
.clc figure,
.clc figcaption,
.clc footer,
.clc header,
.clc hgroup,
.clc menu,
.clc nav,
.clc output,
.clc ruby,
.clc section,
.clc summary,
.clc time,
.clc mark,
.clc audio,
.clc video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
.clc article,
.clc aside,
.clc details,
.clc figcaption,
.clc figure,
.clc footer,
.clc header,
.clc hgroup,
.clc menu,
.clc nav,
.clc section {
	display: block;
}
.clc body {
	line-height: 1;
	font-family: "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial,
		sans-serif;
}
.clc ol,
.clc ul {
	list-style: none;
}
.clc blockquote,
.clc q {
	quotes: none;
}
.clc blockquote:before,
.clc blockquote:after,
.clc q:before,
.clc q:after {
	content: "";
	content: none;
}
.clc table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* fin reset */

.clc {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial,
		sans-serif;
	color: #000;
}

.nettoyeur {
	float: none;
	font-size: 1px;
}

.clc.base-container {
	position: relative;
	width: 735px;
	min-height: 450px;
	border: 1px solid #ccc;
	border-radius: 5pt;
	/* overflow:hidden; */
	text-align: left;
}

.clc .page {
	position: relative;
	width: 735px;
	height: 450px;
	margin: auto;
	overflow: hidden;
	background-image: url(images/noisepattern-6.png);
	background-repeat: repeat;
	border-radius: 5pt;
}

.clc .page.chargement .bloc-message {
	width: 100%;
	margin: 100px 0 50px 0;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

.clc .page.chargement .bloc-spinner {
	width: 64px;
	height: 64px;
	margin: auto;
	background-image: url(images/spinner.gif);
}

.clc .page.titre {
	user-select: none;
}

.clc .page.titre .bloc-titre {
	width: 600px;
	margin: 20px auto 10px auto;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
}

.clc .page.titre .bloc-consigne-generale {
	width: 600px;
	margin: 10px auto 10px auto;
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
}

.clc .page.titre .bloc-illustration {
	width: 735px;
	height: 350px;
	text-align: left;
	margin: 20px 0 10px 0;
	overflow: hidden;
}

.clc .page.titre .bloc-impossible {
	position: absolute;
	left: 21px;
	top: 429px;
}

.clc .page.titre .bloc-illustration .image-sprite {
	margin: auto;
}
.clc .page.titre .bloc-illustration .video-sprite {
	display: block;
	margin: auto;
}

.clc .image-sprite > img {
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}
.clc .video-sprite {
	margin: auto;
	max-width: 100%;
	max-height: 100%;
}

.clc .page.question {
	display: none;
}

.clc .page.question .bloc-animation {
	position: relative;
	height: 450px;
	width: 735px;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
}

.clc .page.question .bloc-score {
	display: none;
	position: absolute;
	width: 160px;
	padding: 10px;
	left: 10px;
	top: 410px;
	font-size: 16px;
	font-weight: bold;
}

.clc .page.question .bloc-info {
	display: none;
	position: absolute;
	width: 160px;
	left: 565px;
	top: 320px;
	min-height: 16px;
	color: #fff;
	font-size: 16px;
	line-height: 16px;
	font-weight: bold;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 5pt;
}

.clc .page.question .bloc-info .contenu {
	margin: 10px;
	text-shadow: 0 -1px 0 hsla(214, 100%, 0%, 0.5);
}

.clc .page.question .bloc-info .toolbar {
	margin: 10px;
}

.clc .page.question .bloc-info.bravo {
	background-color: #8cc63f;
	background-repeat: repeat-x;
	background-image: url(images/bloc-info-vert.png);
	background-position: bottom;
}

.clc .page.question .bloc-info.erreur {
	background-repeat: repeat-x;
	background-color: #ff0000;
	background-image: url(images/bloc-info-rouge.png);
	background-position: bottom;
}

.clc .page.question .bloc-info.rien {
	background-color: #308dcc;
	background-position: bottom;
	background-repeat: repeat-x;
	background-image: url(images/bloc-info-bleu.png);
}

.clc .text-field {
	border: 1px solid #ccc;
}

.clc .text-field.actif {
	border: 3px solid #00c6ff;
}

.clc .bloc-chrono {
	position: absolute;
	top: 5px;
	left: 17.5px;
}

.clc .page.resultat {
	display: none;
}

.clc .page.resultat .bloc-titre-resultat {
	width: 100%;
	margin-top: 20px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
}

.clc .page.resultat .table-resultat {
	position: static;
	margin: 40px auto;
	width: 450px;
	font-size: 18px;
	font-weight: bold;
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.clc .page.resultat .table-resultat td {
	width: 50%;
	padding: 10px;
}

.clc .page.resultat .table-resultat .label {
	text-align: right;
}

.clc .page.parametre {
	display: none;
	/* Ajout mars 2025
	Permet d'ajouter plus d'options qu'il n'y a initialement de place à l'écran avec mise en place d'un scroll */
	height: 450px;
	overflow-y: auto;
}

.clc .page.resultat .table-resultat .etoile {
	text-align: center;
}
.clc .page.resultat .table-resultat .etoile img {
	width: 166px;
	background-image: url(images/fond-jaune.png);
	background-repeat: no-repeat;
}

.clc .page.parametre .bloc-titre-parametre {
	width: 100%;
	margin-top: 20px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
}

.clc .page.parametre .bloc-parametre {
	width: 80%;
	margin: 20px auto auto auto;
}

.clc .page.parametre .clc-opt-control {
	/* width:100%;*/
	margin: 20px auto 20px auto;
	line-height: 20px;
}

.clc .page.parametre .clc-opt-conteneur .clc-opt-control {
	float: left;
	margin: 10px 20px 10px 0px;
}

.clc .page.parametre .clc-opt-label {
	display: inline-block;
	margin-right: 10px;
	font-size: 14px;
	font-weight: bold;
}
.clc .page.parametre .clc-opt-label.vertical {
	display: block;
}

.clc .page.parametre .clc-input-container {
	display: inline-block;
}

.clc .page.parametre .clc-checkbox-label,
.clc .page.parametre .clc-radio-label {
	display: inline-block;
	font-size: 14px;
	margin-right: 10px;
}
.clc .page.parametre .clc-radio-label.vertical,
.clc .page.parametre .clc-checkbox-label.vertical {
	display: block;
}

.clc .page.parametre .clc-opt-input {
	border: 1px solid #ccc;
	font-size: 16px;
	padding: 2px;
	text-align: center;
}

.clc .bouton {
	position: absolute;
	min-width: 110px;
	/*height:27px;*/
	font-size: 16px;
	padding: 5px;
	border: 1px solid #aaa;
	border-radius: 5px;
	/*color:#333;*/
	background-color: #fff;
	/*background-image:url(images/bouton.png)*/
	cursor: pointer;
}

.clc .bouton:hover {
	background-image: url(images/bouton-hover.png);
}

.clc .bouton:focus {
	outline: none;
}

.clc button::-moz-focus-inner {
	border: 0;
}

.clc .bouton.commencer {
	left: 312px;
	top: 391px;
}

.clc .bouton.parametrer {
	left: 434px;
	top: 392px;
	min-width: 26px;
	width: 26px;
	height: 27px;
	background-color: #fff;
	background-image: url(images/options.png);
	background-repeat: no-repeat;
	border: none;
}

.clc .bouton.valider {
	left: 515px;
	top: 391px;
}

.bouton.suite {
	position: static;
}

.clc .bouton.recommencer,
.clc .bouton.exercice-suivant {
	left: 312.5px;
	top: 370px;
}

.clc .bouton.tester-parametre {
	left: 312px;
	top: 391px;
}

.clc .snd-sprite {
	position: absolute;
	width: 40px;
	height: 40px;
	left: 675px;
	top: 20px;
	background-image: url(images/play.png);
	border: 1px solid #ccc;
	border-radius: 5pt;
	cursor: pointer;
}

.clc .snd-sprite.play {
	background-image: url(images/play.png);
}

.clc .snd-sprite.pause {
	background-image: url(images/pause.png);
}
/************
Claviers
*************/
/**
Ce qui est commun
**/
.clc .keyboard_large .key,
.clc .keyboard .key {
	float: left;
	width: 45px;
	height: 45px;
	line-height: 45px;
	margin: 2px;
	font-size: 20px;
	text-align: center;
	vertical-align: middle;
	position: relative;
	color: white;
	cursor: pointer;
}
.clc .keyboard .key.disabled,
.clc .keyboard_large .key.disabled {
	color: #ccc;
}
.clc .keyboard .key::before,
.clc .keyboard_large .key::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 45px;
	height: 45px;
	transform-origin: center;
	transform: translate(-50%, -50%);
	border: 1px solid white;
	border-radius: 50%;
}
.clc .keyboard .key.disabled::before,
.clc .keyboard_large .key.disabled::before {
	border: 1px solid #c1c1c1;
}
/**Les flèches**/
.clc .keyboard .key.arrow::before,
.clc .keyboard_large .key.arrow::before {
	background-image: url(images/fleche-droite.png);
	background-repeat: no-repeat;
}
.clc .keyboard .key.arrow.disabled::before,
.clc .keyboard_large .key.arrow.disabled::before {
	background-image: url(images/fleche-droite-disabled.png);
}
.clc .keyboard .key.arrow.idle::before,
.clc .keyboard_large .key.arrow.idle::before {
	content: "●";
	background-image: none;
}
.clc .keyboard .key.arrow.left::before,
.clc .keyboard_large .key.arrow.left::before {
	transform: translate(-50%, -50%) rotate(180deg);
}
.clc .keyboard .key.arrow.right::before,
.clc .keyboard_large .key.arrow.right::before {
	transform: translate(-50%, -50%);
}
.clc .keyboard .key.arrow.up::before,
.clc .keyboard_large .key.arrow.up::before {
	transform: translate(-50%, -50%) rotate(270deg);
}
.clc .keyboard .key.arrow.down::before,
.clc .keyboard_large .key.arrow.down::before {
	transform: translate(-50%, -50%) rotate(90deg);
}
.clc .keyboard .key.arrow.upleft::before,
.clc .keyboard_large .key.arrow.upleft::before {
	transform: translate(-50%, -50%) rotate(225deg);
}
.clc .keyboard .key.arrow.upright::before,
.clc .keyboard_large .key.arrow.upright::before {
	transform: translate(-50%, -50%) rotate(315deg);
}
.clc .keyboard .key.arrow.downleft::before,
.clc .keyboard_large .key.arrow.downleft::before {
	transform: translate(-50%, -50%) rotate(135deg);
}
.clc .keyboard .key.arrow.downright::before,
.clc .keyboard_large .key.arrow.downright::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
/**Fin flèches**/
/**Les touches suppr et valider**/
.clc .keyboard .key-large,
.clc .keyboard_large .key-large {
	float: left;
	width: 143px;
	height: 45px;
	line-height: 45px;
	margin: 2px;
	font-size: 20px;
	text-align: center;
	vertical-align: middle;
	position: relative;
	color: white;
}
.clc .keyboard .key-large.disabled,
.clc .keyboard_large .key-large.disabled {
	color: #c1c1c1;
}
.clc .keyboard .key-large::before,
.clc .keyboard_large .key-large::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 143px;
	height: 45px;
	transform-origin: center;
	transform: translate(-50%, -50%);
	border: 1px solid white;
	border-radius: 10px;
}
.clc .keyboard .key-large.disabled::before,
.clc .keyboard_large .key-large.disabled::before {
	border: 1px solid #ccc;
}
/**Fin touche suppr et valider**/
/**Boutons A et Z**/
.clc .keyboard .conteneurBoutonsAZ,
.clc .keyboard_large .conteneurBoutonsAZ {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
}
.clc .keyboard .boutonAZ,
.clc .keyboard_large .boutonAZ {
	position: relative;
	width: 45px;
	height: 45px;
	line-height: 45px;
	margin: 2px;
	font-size: 20px;
	text-align: center;
	vertical-align: middle;
	color: black;
	border-radius: 50%;
}
.clc .keyboard .boutonAZ.disabled,
.clc .keyboard_large .boutonAZ.disabled {
	color: #999;
	background: radial-gradient(#fcfcfc, #b3b3b3);
}
.clc .keyboard .boutonAZ::before,
.clc .keyboard_large .boutonAZ::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 45px;
	height: 45px;
	transform-origin: center;
	transform: translate(-50%, -50%);
	border: 1px solid white;
	border-radius: 50%;
}
.clc .keyboard .boutonA,
.clc .keyboard_large .boutonA {
	background: radial-gradient(#9e9df7, #2802ff);
}
.clc .keyboard .boutonZ,
.clc .keyboard_large .boutonZ {
	background: radial-gradient(#fca9a9, #ff0202);
}
/**Fin Boutons A et Z**/
/***
Eléments dédiés au clavier en largeur 
***/
.clc .keyboard_large.base-container {
	position: absolute;
	left: -150px;
	top: 300px;
	width: 1035px;
	height: 148px;
	z-index: 0;
}

.clc .keyboard_large .zone-clavier-1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 147px;
	height: 147px;
	background-color: #a6a6a6;
	padding: 2px;
	border-radius: 5pt;
}
.clc .keyboard_large .zone-clavier-2 {
	position: absolute;
	right: 0;
	top: 49px;
	width: 147px;
	height: 98px;
	border-radius: 5pt;
	background-color: #a6a6a6;
	padding: 2px;
}

.clc .keyboard_large .zone-clavier-3 {
	position: absolute;
	right: 0;
	top: -147px;
	width: 147px;
	height: 294px;
	overflow: hidden;
	background-color: #a6a6a6;
	padding: 2px;
	border-radius: 5pt;
}
/***
Eléments dédiés au clavier en dessous 
***/
.clc .keyboard.base-container {
	position: relative;
	padding-left: 10px;
	padding-right: 10px;
	width: 715px;
	height: 151px;
	background-color: #a6a6a6;
	border-radius: 5pt;
}

.clc .keyboard .zone-clavier-1 {
	position: relative;
	float: left;
	width: 147px;
	height: 147px;
	padding: 2px;
}

.clc .keyboard .zone-clavier-2 {
	position: relative;
	float: left;
	width: 364px;
	height: 147px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.clc .keyboard .zone-clavier-3 {
	position: relative;
	float: left;
	width: 196px;
	height: 147px;
	overflow: hidden;
	padding: 2px;
}
/**
Eléments dédiés au joystick
**/
.clc .joystick {
	border: 2px solid white;
	background-image: radial-gradient(white, pink);
	border-radius: 50%;
	touch-action: none;
}
.clc .joystick .point {
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: grey;
	transform: translate(-50%, -50%);
	user-select: none;
}
.clc .joystick.active {
	background-image: radial-gradient(white, lightgreen);
}
.clc .joystick.disabled {
	background-image: radial-gradient(white, #999);
}
.clc .page.question {
	z-index: 1;
}