/**
 * 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;
}

/*
 * Lecteur vocal commun
 * --------------------
 * Ces règles sont statiques (et non injectées par JavaScript) afin de rester
 * compatibles avec une Content-Security-Policy stricte. Tous les anciens
 * paramètres x/y des exercices sont normalisés par le composant partagé : le
 * disque occupe toujours le coin supérieur droit et le retrait du conteneur
 * garantit que le texte courant ne passe jamais sous le bouton.
 */
.clc .avec-lecteur-consigne {
	box-sizing: border-box !important;
	min-height: 64px !important;
	padding-right: 68px !important;
}

/* La consigne générale n'est pas positionnée par les exercices. Les consignes
 * de question le sont presque toujours en absolute : conserver cette position
 * évite de les expédier sous le canvas lorsque le lecteur vocal est ajouté. */
.clc .bloc-consigne-generale.avec-lecteur-consigne {
	position: relative !important;
}

.clc .lecteur-consigne__button {
	-webkit-appearance: none !important;
	align-items: center !important;
	appearance: none !important;
	background: linear-gradient(145deg, #3d83f6 0%, #1753bd 100%) !important;
	border: 2px solid rgba(255, 255, 255, 0.96) !important;
	border-radius: 50% !important;
	bottom: auto !important;
	box-shadow:
		0 7px 17px rgba(18, 64, 145, 0.34),
		inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
	box-sizing: border-box !important;
	color: #fff !important;
	cursor: pointer;
	display: inline-flex !important;
	height: 48px !important;
	justify-content: center !important;
	left: auto !important;
	margin: 0 !important;
	max-height: 48px !important;
	max-width: 48px !important;
	min-height: 48px !important;
	min-width: 48px !important;
	overflow: visible;
	padding: 0 !important;
	position: absolute !important;
	right: 8px !important;
	top: 8px !important;
	touch-action: manipulation;
	transform: none !important;
	transition:
		background 180ms ease,
		box-shadow 180ms ease,
		filter 180ms ease,
		opacity 180ms ease;
	user-select: none;
	width: 48px !important;
	z-index: 100 !important;
}

.clc .lecteur-consigne__button::before {
	border: 3px solid rgba(52, 132, 255, 0.5);
	border-radius: 50%;
	box-sizing: border-box;
	content: "";
	inset: -6px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

.clc .lecteur-consigne__button:hover:not(:disabled) {
	background: linear-gradient(145deg, #4f91ff 0%, #1648a3 100%) !important;
	box-shadow:
		0 9px 20px rgba(18, 64, 145, 0.4),
		inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
	filter: brightness(1.05);
}

.clc .lecteur-consigne__button:focus-visible {
	outline: 4px solid #ffbf47 !important;
	outline-offset: 3px !important;
}

.clc .lecteur-consigne__button:disabled,
.clc .lecteur-consigne__button.is-unavailable {
	cursor: not-allowed;
	filter: grayscale(0.68);
	opacity: 0.58;
}

.clc .lecteur-consigne__button.is-loading .lecteur-consigne__icone {
	animation: lecteur-consigne-chargement 1.1s ease-in-out infinite alternate;
}

.clc .lecteur-consigne__button.is-reading {
	background: linear-gradient(145deg, #1a75ff 0%, #083f9c 100%) !important;
	box-shadow:
		0 0 0 4px rgba(59, 130, 246, 0.2),
		0 8px 22px rgba(18, 64, 145, 0.5),
		inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}

.clc .lecteur-consigne__button.is-reading::before {
	animation: lecteur-consigne-onde 1.25s ease-out infinite;
}

.clc .lecteur-consigne__button.is-reading .lecteur-consigne__icone {
	animation: lecteur-consigne-parle 0.72s ease-in-out infinite alternate;
}

.clc .lecteur-consigne__button.is-paused {
	background: linear-gradient(145deg, #366bc5 0%, #1e4285 100%) !important;
	box-shadow:
		0 0 0 4px rgba(255, 191, 71, 0.5),
		0 7px 17px rgba(18, 64, 145, 0.3),
		inset 0 1px 1px rgba(255, 255, 255, 0.42) !important;
	filter: saturate(0.72);
}

.clc .lecteur-consigne__button.is-paused .lecteur-consigne__icone {
	opacity: 0.72;
}

.clc .lecteur-consigne__icone {
	display: inline-flex;
	flex: 0 0 auto;
	height: 24px;
	pointer-events: none;
	width: 24px;
}

.clc .lecteur-consigne__icone svg {
	display: block;
	height: 24px;
	width: 24px;
}

@keyframes lecteur-consigne-onde {
	0% {
		opacity: 0.75;
		transform: scale(0.82);
	}
	100% {
		opacity: 0;
		transform: scale(1.24);
	}
}

@keyframes lecteur-consigne-parle {
	from {
		opacity: 0.84;
		transform: scale(0.94);
	}
	to {
		opacity: 1;
		transform: scale(1.08);
	}
}

@keyframes lecteur-consigne-chargement {
	from {
		opacity: 0.42;
	}
	to {
		opacity: 0.84;
	}
}

@media (prefers-reduced-motion: reduce) {
	.clc .lecteur-consigne__button,
	.clc .lecteur-consigne__button::before,
	.clc .lecteur-consigne__icone {
		animation: none !important;
		transition: none !important;
	}
}

.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 {
	background: #fff;
	border: 2px solid #9db8ee !important;
	border-radius: 8px !important;
	box-shadow:
		0 3px 9px rgba(31, 62, 126, 0.14),
		inset 0 1px 2px rgba(31, 62, 126, 0.08);
	box-sizing: border-box;
	color: #17264d;
	min-height: 38px;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.clc .text-field.actif {
	border-color: #1769d2 !important;
	box-shadow: 0 0 0 4px rgba(255, 190, 35, 0.62);
}

.clc input.text-field:focus {
	border-color: #1769d2 !important;
	box-shadow: 0 0 0 4px rgba(255, 190, 35, 0.62);
	outline: none;
}

.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;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.15;
	padding: 8px 16px;
	border: 1px solid #17499f;
	border-radius: 10px;
	color: #fff;
	background: linear-gradient(145deg, #397de3, #1d55b5);
	box-shadow: 0 5px 12px rgba(25, 67, 142, 0.24);
	cursor: pointer;
	transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.clc .bouton:hover {
	background: linear-gradient(145deg, #4b8cf0, #194ba4);
	box-shadow: 0 7px 16px rgba(25, 67, 142, 0.31);
	filter: brightness(1.04);
	transform: translateY(-1px);
}

.clc .bouton:focus-visible {
	outline: 4px solid #ffbf2f;
	outline-offset: 2px;
}

.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);
}

/* Les propositions historiques du Fil rouge sont de vrais boutons de choix :
 * la zone entière est cliquable et le petit rond natif n'est plus affiché. */
.clc .formulaire-propositions {
	display: grid;
	gap: 4px;
	width: 300px;
}

.clc .formulaire-propositions br {
	display: none;
}

.clc .formulaire-propositions label {
	align-items: center;
	background: #f7faff;
	border: 2px solid #a9bde4;
	border-radius: 8px;
	box-sizing: border-box;
	color: #173b7a;
	cursor: pointer;
	display: flex;
	font-weight: 700;
	justify-content: center;
	min-height: 27px;
	padding: 2px 8px;
	position: relative;
	transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}

.clc .formulaire-propositions label:hover {
	background: #eaf2ff;
	border-color: #3d78dc;
}

.clc .formulaire-propositions label:has(input:checked) {
	background: #2e6cdb;
	border-color: #164aa9;
	color: #fff;
}

.clc .formulaire-propositions input[type="radio"] {
	appearance: none;
	height: 100%;
	inset: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 100%;
}

.clc .formulaire-propositions label:focus-within {
	box-shadow: 0 0 0 4px rgba(255, 190, 35, 0.62);
}
/************
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;
}