/*** CSS adaptées aux téléphones mobiles ***/

/*********************************************/
/*** header / footer *************************/
/*********************************************/
.header {
	width: 100%;
	border-collapse: collapse;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	
	top: 0px;
	height: 60px;
	background-color: #2F5597;
}

.footer {
	width: 100%;
	border-collapse: collapse;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	
	bottom: 0px;
	height: 60px;
	background-color: #2F5597;
}

/*********************************************/
/*** page content ****************************/
/*********************************************/
.page-content {
	position: absolute;
	top: 60px;		/* par rapport au header */
	bottom: 60px;	/* par rapport au footer */
	width: 100%;
	overflow: hidden;
	text-align: left;
}
.page-content-stage { top: 60px;  }
.page-content-index { top: 80px;  }
.page-content-qcm1	{ top: 90px;  }
.page-content-qcm2	{ top: 110px; }
.page-content-qcm3	{ top: 140px; }

/*** slider **********************************/
.slider {
	display: flex;
	height: 100%;
	transition: transform 0.1s ease-in-out;
	touch-action: pan-y;
	will-change: transform;
}

/*********************************************/
/*** page ************************************/
/*********************************************/
.page {
	width: 100vw;
	height: 100%;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	background: #f8f8f8;
}

/*** scroll à l'intérieur des pages **********/
.page-scroll {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* pour un scroll fluide sur iOS */
	padding: 20px 20px 0px 20px;
	box-sizing: border-box;
}

/*********************************************/
/*** barres de navigation des boutons ********/
/*********************************************/
.nav-btn {
	position: fixed;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3px;	/* espacement entre les boutons */
	z-index: 99;
	
	height: 30px;
	background: #ccc;
	border: 0px solid #ccc;
}

.nav-btn1 { top: 60px;  }
.nav-btn2 { top: 90px;  }
.nav-btn3 { top: 120px; }

/*********************************************/
/*** bouton d'accès direct aux pages *********/
/*********************************************/
.button {
	width: 31px;  /*20px;*/
	height: 22px; /*20px;*/
	font-weight: bold;
	border-radius: 4px;
	cursor: pointer;
}
.button-off			{ background: #ffffff; color: #2F5597; border: 1px solid #2F5597; }
.button-on			{ background: #2F5597; color: #ffffff; border: 1px solid #2F5597; }
.button-off-light	{ background: #ffffff; color: #2F5597; border: 2px solid red; }
.button-on-light	{ background: #2F5597; color: #ffffff; border: 2px solid red; }

/*********************************************/
/*** indicateurs de page (points blancs) *****/
/*********************************************/
.indicators {
	position: absolute;
	bottom: 60px;
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 10px;
	left: 0;
	right: 0;
	background: #f8f8f8; /* #ccc */
	padding: 5px;
}

.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	/*background: rgba(100, 100, 100, 0.5);*/
	background: rgba(150, 150, 150, 0.5);
	transition: background 0.3s;
}

.dot.active { background: #555; } /* #555 */

/*********************************************/
/*** flèches des boutons de navigation *******/
/*********************************************/
.arrow {
	/*pointer-events: auto;*/
	border-radius: 50%;
	border: none;
	cursor: pointer;
	
	/*margin: 0 10px;*/
	height: 40px;
	width: 40px;
	font-size: 2rem;
	color: white;
	background: rgba(0, 0, 0, 0.4);
}

.arrow-off {
	/*pointer-events: auto;*/
	border-radius: 50%;
	border: none;
	cursor: none;
	
	/*margin: 0 10px;*/
	height: 40px;
	width: 40px;
	font-size: 16px;
	color: #2F5597;
	background: none;
}
/********************************************************************/

/** onglets des sessions planifiées et terminées sur la page d'accueil **/
.cselect { background-color: #f8f8f8; /*border-bottom: 2px solid #1B62B6;*/ }
/*.cselect	{
	border-collapse: none;
	border-bottom: 1px solid #1B62B6;
	border-top: 1px solid #1B62B6;
	border-right: 1px solid #1B62B6;
}*/
/* bleu 1B62B6  */
/* rouge EC1C24 */

/*********************************************/
/*** boutons d'affichage des sessions ********/
/*********************************************/
.mbox {
	border: 0px solid #ccc;
	justify-content: center;
	align-items: center;
	text-align: center;
	vertical-align: middle;
	width: 100%;
}

.mbtn-session {
	cursor: pointer;
	padding: 10px 20px; /* espacement intérieur du bouton */
	font-size: 16px;
	font-weight: bold;
	
	width: 100%;
	min-height: 100px;
	
	text-align: left;
	vertical-align: middle;
	
	border-radius: 12px;
	box-shadow: 4px 4px 14px #aaaaaa;
}
.mbtn-session-off			{ background-color: #dddddd; border: 1px solid #666666; color: #666666;}
.mbtn-session-on			{ background-color: #8BC24A; border: 1px solid #8BC24A; color: #FFFFFF; }
.mbutton_session_on:active	{ background-color: #dddddd; color: #666666; transform: translateX(2px) translateY(2px); }

.mbtn-text {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	padding-left: 10px;
	line-height: 1.4;
	width: 100%;
}

/*********************************************/
/*** boutons d'affichage des questions *******/
/*********************************************/
.mbtn-qcm {
	cursor: pointer;
	padding: 10px 20px; /* espacement intérieur du bouton */
	font-size: 24px;
	font-weight: bold;
	
	width: 70%;
	min-height: 90px;
	
	text-align: center;
	vertical-align: middle;
	
	border-radius: 12px;
	box-shadow: 4px 4px 14px #aaaaaa;
}
.mbtn-qcm-off			{ background-color: #dddddd; border: 1px solid #666666; color: #666666;}
.mbtn-qcm-on			{ background-color: #8BC24A; border: 1px solid #8BC24A; color: #FFFFFF; }
.mbtn-qcm-on:active		{ background-color: #dddddd; color: #666666; transform: translateX(2px) translateY(2px); }
.mbtn-qcm-off:active	{ background-color: #dddddd; color: #666666; transform: translateX(2px) translateY(2px); }

/*********************************************/
/*** boutons d'affichage des questions *******/
/*********************************************/
.mbtn-reponse {
	cursor: pointer;
	padding: 10px 20px; /* espacement intérieur du bouton */
	font-size: 16px;
	font-weight: bold;
	
	width: 100%;
	min-height: 80px;
	
	text-align: left;
	vertical-align: middle;
	
	border-radius: 12px;
	box-shadow: 4px 4px 14px #aaaaaa;
}
.mbtn-reponse-off			{ background-color: #dddddd; border: 1px solid #666666; color: #666666;}
.mbtn-reponse-on			{ background-color: #8BC24A; border: 1px solid #8BC24A; color: #FFFFFF; }
.mbtn-reponse-on:active		{ background-color: #dddddd; color: #666666; transform: translateX(2px) translateY(2px); }
.mbtn-reponse-off:active	{ background-color: #dddddd; color: #666666; transform: translateX(2px) translateY(2px); }

/*********************************************/
/*** bouton fermer popin barème **************/
/*********************************************/
.mbtn-close {
	cursor: pointer;
	padding: 10px 10px; /* espacement intérieur du bouton */
	font-size: 16px;
	font-weight: bold;

	width: 40%;
	min-height: 30px;

	text-align: center;
	vertical-align: middle;
	background-color: grey;
	border: 1px solid #666666;
	color: #ffffff;
	
	border-radius: 12px;
	box-shadow: 4px 4px 14px #aaaaaa;
}

.mbtn-close-mini {
	cursor: pointer;
	padding: 10px 10px; /* espacement intérieur du bouton */
	font-size: 16px;
	font-weight: bold;

	min-width: 40%;
	min-height: 30px;

	text-align: center;
	vertical-align: middle;
	background-color: grey;
	border: 1px solid #666666;
	color: #ffffff;
	
	border-radius: 12px;
	box-shadow: 4px 4px 14px #aaaaaa;
}

.mbtn-logout-mini {
	cursor: pointer;
	padding: 10px 10px; /* espacement intérieur du bouton */
	font-size: 16px;
	font-weight: bold;

	min-width: 40%;
	min-height: 30px;

	text-align: center;
	vertical-align: middle;
	background-color: red;
	border: 1px solid #ff0000;
	color: #ffffff;
	
	border-radius: 12px;
	box-shadow: 4px 4px 14px #aaaaaa;
}