/* §2019: */
/* §rajout02-19 */

@font-face {
    font-family: 'FiraSansRegular';
    src: url('../../masterpage/fonts/fira-sans-v11-latin-regular.woff2');
}


/*
** COMMUNS
*/



/* §2019: */
.image-quizz {
    display: block;
    margin-left: auto;
    margin-right: auto;
  
}


.article-quizz {
  font-family: "FiraSansRegular";
  font-weight: 400;
  font-size: 14px;
  /* padding: 15px 45px; site-rece */
}

/* restauré  */
	ul.liste-choix-unique li:after {
  content: " ";
  display: block;
  clear: both;
}

.groupe-consigne-quizz {
	padding-top: 10px; /* 02-22 */
  padding-bottom: 5px;
  
  text-align: center;
}

.consigne-quizz {
  font-size: 18px;
  /* color: #060409; */
  
  color: #444a4d;  /* 02-22 ??? */
  font-family: "FiraSansRegular";
  font-weight: 400;
  
  /* §2019:  padding-bottom: 45px; */
  /* §2019:  border-bottom: 1px solid #D7DAE0; */
}

.complement-consigne-quizz {
  font-size: 18px;
  line-height: 1.4em;
  color: #F47E84;
  
}

.exemple-quizz {
  color: #8A8A8A;
  margin-left: 30px;
}

.commentaire-quizz {
  display: none;
}

.phrase-qcm {
  
  letter-spacing: -0.11px;
   font-size: 18px;
   /*color: #8A8A8A;*/
  /* §2019: */
  color: #566bb3; /* #060409; */
  font-family: "FiraSansRegular";
  font-weight: 400;
  text-align: center; /* 2019 */
}


/* old : par défaut */
.mise-en-valeur {
  font-weight: bold;
  color: #F47E84;
}



/*
** QCU
*/

.liste-choix-unique {
  list-style-type: none;
  letter-spacing: -0.11px;
  color: #8A8A8A;
  padding-left: 0px;
}

.liste-options {
 margin-left: -40px;  /*§2019  */
  /*  text-align-last: center;  §2019 */
   text-align: center;
   list-style-type: none; 
}

.item-options {

	min-width: 150px;    /* §2019: ajout 150??? */
  	cursor: pointer;
  	
  	display: block;
  	position: relative; /* §2019: ??? */
  	
  	 margin: 15px 5px;
 	/*  padding: 2px 2px 0px 0px;    	§2019:  OLD 6px 3px 6px 0px;   3px 0px 0px 0px; */
 	 padding: 6px 10px 0px 0px;
 	 text-align: left;            	/* §2019:center ???  OLD left */
 	 /*  supprimer avec  hml test11.html */
 	
 	 border: 2px solid #e5e5e5;        /*   §2019: #A4B2D2;  */
  	 border-radius: 10px;          	/*   §2019: 80px; OLD 2px */
 	 background-color: #FFFFFF;
  	 color: #444a4d;                   /* §2019:  #8A8A8A; old */
  	 letter-spacing: -0.11px;
}

.item-options.active {
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
  border: 2px solid  #566bb3;   /* old : #5258B8; */
  background-color:   #566bb3;  /* #566bb3; old :  #5258B8; */
  color: #FFFFFF;
}
.item-options:nth-child(odd) {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 30px);
}
.item-options:nth-child(even) {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 30px);
}
.item-options:nth-child(even)::after {
  content: "";
  display: block;
  clear: both;
}
.item-options:nth-child(odd)::after {
  content: "";
  display: block;
  clear: both;
}

.reponse-vraie-qcu {
  color: #FFFFFF !important;
  border: 2px solid #4cc4a9 !important;   			/* §2019 OLD  3px 56AF7E  */
  background-color: #4cc4a9 !important;  			/* §2019 OLD  56AF7E  */
}


.reponse-fausse-qcu {
  color: #FFFFFF !important;
  border: 2px solid #ff4b54 !important;  /* §2019 OLD   3px  E65344  */
  background-color: #ff4b54 !important;  /*§2019  OLD   E65344  */
}

 
.radiobutton {
	vertical-align: middle;
}



.radiobutton-label {
	line-height: 1.4em; /* §2019 OLD 1.4em; */
  	padding: 4px 0px 8px 0px;  /* §2019 !!!!!!!!!!!!!!!!!!!!! */
}
/* padding: 4px 6px 4px 0px; */







/*
**  Custom radio input
*/

/* Hide default case */
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}

/* Create checkbox */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  content: '';
  /*
  position: absolute;
  left: 12px; top: 6px;
  */
  position: absolute;
  left: 12px; 
  
  width: 25px; height: 25px;
  border: 1px solid #b1b1b2;
  background-color: #FFFFFF; /*#FFFFFF;*/
  border-radius: 100px;
}


/* Custom if checked */
.item-options [type="radio"]:checked + label:after  {
  content: '✔';
  color: #5258B8;
  font-size: 15px;
  
  opacity: 1;
  transform: scale(1);
  position: absolute;
  left: 18px; top: 8px; /* §2019  old: left: 20px; 8 px */
  transition: all .2s;
}

/* Custom if not checked */
[type="radio"]:not(:checked) + label:after {

  opacity: 0;
  transform: scale(0);
  position: absolute;
  left: 12px; top: 6px;
  /* §2019 ???
  width: 25px; height: 25px;
  border-radius: 100px;
  transition: all .2s;*/
}

/* Custom label */
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  display: block;
  height: 150%;
  position: relative;
  padding-left: 48px;
  padding-right: 10px;
  cursor: pointer;
}


/*******************************************************/
/* correction for: bad check assignement at correction*/

/* erase content of .item-options class */
/*  => function correction_qcu */
.item-optionsb [type="radio"]:checked + label:after  {
  content: '';
  color: #5258B8;
  font-size: 15px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  left: 18px; top: 8px;
  transition: all .2s;
}
/* add correct content to .item-options class   */
/*  => function correction_qcu */
#correct label:after {
  content: '✔';
  color: #5258B8;
  font-size: 15px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  left: 18px; top: 8px; /* §2019  old: 8 px */
  transition: all .2s;
}
/********************** end correction ************************************/
/*************************************************************************/


/*   => function validation_qcu() */
.reponse-vraie-qcu [type="radio"]:checked + label:after{
  content: '✔'!important;
  color: #108b00;
  color: #5258B8;
  font-size: 15px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  /* left: 18px; top: 10px; §2019  old: 8 px */
 /*  left: 20px; top: 12px; */
 left: 18px; top: 8px;
}


.reponse-fausse-qcu [type="radio"]:checked + label:after {
  content: '�' !important;
  color: #e80c01 !important;
  font-size: 12px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  /* §2019  old: 8 px */
  left: 18px; top: 8px;
}

.radiobutton [class = "reponse-vraie-qcu"]:checked + label:after {
  content: '✔'!important;
  color: #108b00;
  font-size: 15px;
  opacity: 1;
  transform: scale(1);
  position: absolute;
  left: 18px; top: 10px; /* §2019  old: 8 px */

}


/* ===============================================================================================================
** Validations buttons
   =============================================================================================================== */


.boutons-interactivite {

	position: relative;
  overflow: hidden;
  clear: both;
 	
   /*padding-left: 80px;
   padding-right: 40px; */
   /* padding-left: -40px; §2019  ??? */
   /* §2019  new: */
   margin-left:auto;
   margin-right:auto;
   text-align:center;
  
 
}

.boutons {

 
  cursor: pointer;
  text-align: center;
  font-family:   "FiraSansRegular"; /* §2019 old "Montserrat"; */
  font-weight: normal;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: 1px;
  text-transform: uppercase;
  max-width: 180px;
  min-width: 140px; /*   §2019 ajout pour bootstrap */
   
  /*width: 49%; */
  width: 30%;
  height: 50px;
  margin-top: 10px; /* §2019 old 50px; */
  margin-bottom: 10px; /* §2019 old 50px; */
}

.boutons-lien {
   
  cursor: pointer;
  text-align: center;
  font-family:   "FiraSansRegular"; /* §2019 old "Montserrat"; */
  font-weight: normal;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: 1px;
  text-transform: none !important; /* §rajout02-19 */
   
  /* max-width: 180px; §2019 ajout pour bootstrap */
  min-width: 150px; /*   §2019 ajout pour bootstrap */
   
 /*  width: 49%; */
  height: 50px;
  
  margin-top: 10px; /* §2019 old 50px; */
  margin-bottom: 10px; /* §2019 old 50px; */
  
   /*
  background: #474C5A;#474C5A; 
  border-radius: 2px;
  */
 
}

.effacer {
}

.suivant {
}

.btn.btn-success.btn-sm.boutons.correction {
  background: #4cc4a9 !important; /* OLD #81C59F;  */
  border-color: #4cc4a9 !important; 
  border-radius: 30px;
  font-size: medium; /* §rajout02-19 */
  outline: none; /* §rajout02-19 */
}

.btn.btn-primary.btn-sm.boutons.valider {
  		background: #4cc4a9 !important; 
 	 	border-color: #4cc4a9 !important; 
 		border-radius: 30px;          
		font-size: medium;  /* §rajout02-19 */
		outline: none; /* §rajout02-19 */
}

.btn.btn-link.btn-sm.boutons-lien {
     display:none!important;
 	 color: #4cc4a9 !important; 
 	 font-size: medium; /* §rajout02-19 */
 	 padding-top: 15px; /* §rajout02-19 */
 	     
}