@font-face {
  font-family: 'Gilroy-Regular';
  src: url('fonts/Gilroy-Regular.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}
:root{
	--taille-grande : 1.2em;
	--taille-moyenne : 1em;
	--taille-normale : 0.9em;
	--taille-info : 0.8em;
	--taille-petite : 0.7em;
	--taille-mini : 0.5em;
}
/********************************************************************************* Général */
body {
	width:100%;
	height:90%;
	margin:auto;
	vertical-align:middle;
	background-color:#FFFFFF;
	font-family: 'Gilroy-Regular';
	font-style: normal;
    font-weight: normal;
    font-size: var(--taille-normale);
    line-height: 1.5;
}
h2 {
	font-family: 'Gilroy-Regular';
	vertical-align: middle;
	text-align: left;
}
p {
	margin:0px;
}
small {
	color : #0E5BA5;
}
iframe {
	width:95%;
	height:95%;
	border:0;
}
blockquote {
	margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 10px;
    margin-inline-end: 10px;
	direction: rtl;
}

a {
	text-decoration:none;
	font-size:var(--taille-normale);
	color:#0E5BA5;
}
	
/****************************************************************************************************** Gestion des utilisateurs */ 
.userDetail {
	font-size:var(--taille-petite);
	color:#000000;
	background-color: #ffffff;
}
.userDetailPair {
	font-size:var(--taille-petite);
	color:#000000;
	background-color: #e0e0e0;
}

/*************************************************************************************************************  support */
.editeurTexte{
	
	font-size:var(--taille-normale);
	width:100%;
	height:200px;
}
.leTitre {
	font-size:var(--taille-moyenne);
	color:#334AFF;
	width:100%;
}
.leContenu {
	font-size:var(--taille-normale);
	width:100%;
}
.partCentre {
	font-size:var(--taille-normale);
}
.partGauche {
	font-size:var(--taille-normale);
}
.partDroite {
	font-size:var(--taille-normale);
}

.cmdButton {
	font-family: 'Gilroy-Regular';
	font-size:var(--taille-normale);
	background-color: #0E5BA5;
	color:#ffffff;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left:10px;
	padding-right:10px;
}
.btnCnx {
	vertical-align:middle;
	width:15px;
	height:15px;
}
.btnGestAdmin {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left:10px;
	padding-right:10px;
	vertical-align:center;
	font-size:var(--taille-normale);
	color:#ffffff;
	background:#0F0F0F;
}
.btnZoneInfo {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left:20px;
	padding-right:10px;
	vertical-align:center;
	font-size:var(--taille-petite);
	border: 2px solid #0e5ba5;
	border-radius: 5px;
	border-color:;
	color:#000000;
	background:#fffff;
	background-image: url("../gfx/info.svg");
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: top 2px left 2px
}
.btnForm {
	border: 0;
    line-height: 1.5;
    padding: 0 15px;
    font-size:var(--taille-normale);
    text-align: center;
    color: #fff;
    border-radius: 5px;
    background-color: #0E5BA5;
	box-shadow: inset 2px 2px 3px rgba(#0E, #5B, #A5, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
	cursor: pointer;
}
.btnForm input{
	display: none;
}

.choixListe1 {
	font-family: 'Gilroy-Regular';
	font-size:var(--taille-normale);
	background-color: #334AFF;
	color:#ffffff;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left:10px;
	padding-right:10px;
	width:100%;
}
.choixListe2 {
	font-family: 'Gilroy-Regular';
	font-size:var(--taille-normale);
	background-color: #ffffff;
	color:#334AFF;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left:10px;
	padding-right:10px;
	width:100%;
}
.choixListe1 a {
	text-decoration:: none;
	color:#ffffff;
}
.choixListe2 a {
	text-decoration:: none;
	color:#334AFF;
}

/********************************************************************************* entête */
.header {
		display:block;
		position:absolute;
		top: 0;
		height:175px;
		width:95%;
		padding:5px;
		margin:auto;
}
.logoheader {
	width:200px;
}
.bandeauheader {
	font-family: 'Gilroy-Regular';
	font-size:var(--taille-grande);
	font-weight: bold;
	background: linear-gradient(to right, #0E5BA5,#FFFFFF);
	color:#ffffff;
	padding:5px;
	display:flex;
}

.bandeautitre {
	vertical-align: middle;
	float: left;
	width:50%;
}
.bandeauuser {
	display:block;
	vertical-align: middle;
	text-align: right;
	float: right;
	width:50%;
	padding:5px;
	font-size:var(--taille-petite);
	color:#000000;
}
.userinfo {
	vertical-align: center;
	font-size:var(--taille-petite);
	color:#000000;
}
.bandeauguide {
	vertical-align: middle;
	float: left;
	padding:5px;
	margin:5px;
	font-size:var(--taille-info);
	width:50%;
}
.erreurMsg {
	color : red;
	border: 2px solid red;
	border-radius: 5px;
	border-color:;
	margin-top: 2em;
	padding-left : 2em;
	font-size:var(--taille-info);
}
.infoMsg {
	color : #0E5BA5;
	border: 2px solid #0E5BA5;
	border-radius: 5px;
	border-color:;
	margin-top: 2em;
	padding-left : 2em;
	font-size:var(--taille-info);
}

/************************************************************************** contenu */
.contenu {
	width:99%;
	height: 90%;
	margin:auto;
	margin-top:180px;
	padding-top:0.5em;
	padding-bottom:22px;
}
.central {
	display: block;
	align-items: center;
	justify-content: space-between;
	vertical-align: bottom;
	margin:auto;
}
.tuile {
	display: inline-block;
	text-align:center;
	margin: 10px;
	padding: 10px;
	height: 250px;
	width: 220px;
}

.raccourcis {
	display:block;
	width:100%;
	padding:10px;
}
.support {
	display:flex;
	width:99%;
	height: 90%;
	margin:auto;
}
.articles {
	width:50%; 
	vertical-align:top;
	float:left;
	padding:10px;
}
.leContenu{
	height:93%;
	overflow-y:scroll;
}
.leContenu img {
	max-width:100%;
}
.leParagraphe {
	max-width:100%;
	overflow-y: hidden;
}
.parGauche img {
	max-width:100%;
	overflow-y: hidden;
}
.parDroite img {
	max-width:100%;
	overflow-y: hidden;
}
.candidats {
	width:50%;
	vertical-align:top;
	float:right;
	padding:10px;
	height:93%;
	overflow-y:scroll;
}
.imgTitre {
	width: 25px;
}
/*************************************************************************** popup */
.popup_fond {
	top:0;
	left:0;
	width:100%;
	height:100%;
	position:fixed;
	background-color:#EBF5FB;
}

.popup_contenu {
	width:80%;
	height:80%;
	margin:auto;
}
/*************************************************************************** footer */
div.footer {
	font-family: 'Gilroy-Regular';
	font-size:var(--taille-mini);
	position: fixed;
	bottom:0;
	padding:0px;
	margin:3px;
	width:100%;
	text-align: center;
}

/****************************************************QCM ************/
.texteQuestion {
	width : 90%;
	padding : 10px;
	margin : 5 px;
	font-size:var(--taille-normale);
	color:#000000;
	background-color: #e0e0e0;
}
.under {
	font-size:var(--taille-normale);
}
.guide {
	margin:10px;
	padding:10px;
	font-size:0.9em;
	font-style : italic;
	color:#000000;
	background-color: #e0e0e0;
}
.getNote {
	text-align:right;
}
.TitreSection{
	margin-top:5px;
	margin-bottom:5px;
	font-size:var(--taille-grande);
	font-weight: bold;
}
.stats div {
	padding-bottom:var(--taille-grande);
	margin-bottom:2em;
}
.stats table {
	border:1px solid;
}
.stats th {
	font-weight:bold;
	font-size:var(--taille-petite);
}
.stats td {
   clear:left;
   margin:0px;
   padding:0px;
   height:100%;
   font-size:var(--taille-petite);
   text-align: center;
 }
 .stats td.intitule {
	text-align: left; 
 }
 .stats td.attention {
	 background-color: #ff6080;
 }
 .stats td.ok {
	 background-color: #60e060;
 }
 .stats tr {
 }
 .stats tr.pair {
	 background-color: #e0e0e0;
 }
 .stats tr.attention {
	 background-color: #ff6080;
 }
 .stats tr.totaux {
	 font-weight: bold;
 }
 .stats tr.ok {
	 background-color: #60e060;
 }
.statsR table {
	
}
.statsR th {
	font-weight:bold;
	font-size:var(--taille-petite);
	border:1px solid;
	width:50px;
}
.statsR td {
   clear:left;
   margin:0px;
   padding:0px;
   height:100%;
   font-size:var(--taille-petite);
   text-align: center;
   border:1px solid;
   width:50px;
 }
 .qcm div {
	padding-bottom:1em;
	margin-bottom:2em;
	font-size:var(--taille-normale);
 }
 .qcm table {
	 width: 100%;
 }
 .qcm tr {
	border:1px dotted;
	vertical-align: top;	 
 }
 .qcm th {
 }
 .qcm td {
 }
 .qcm div.explications {
	width:90%;
	padding-bottom:0;
	margin-bottom:0;
	background-color: #e0e0e0; 
 }