/* Conjugaison avec contexte - CSS Document */

/* OVERWRITE BOOTSTRAP */
.row {
	--bs-gutter-x: unset !important;
}

.modal-content {
	border: 3px solid #CB573A;
	border-radius: 20px;
}

.modal-footer {
	border-top: 0px;	
	justify-content: center !important;	
	margin-bottom: 20px;
}

.modal-footer > * {
	margin: unset;
}

.modal-header {
	background-color: #CB573A;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	padding: 20px 20px;
}

/*** GENERAL ***/
html, body { 
	/* POUR FOOTER EN BAS SI PAS DE SCROLL (STICKY) */	
	/*	
	VOIR L'EXEMPLE ICI :
	https://getbootstrap.com/docs/4.0/examples/sticky-footer/
	*/	
    height: 100%; 
    margin: 0; 
}

body { 
	background:#FFFFFF !important; 
	background-image: url(../images/bkg.png) !important; 	
	background-repeat: repeat !important;	
	background-size: 100% !important;	
	color:#303030;
	font-family: 'Poppins', sans-serif;		
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 1.5;

	/* Centrer le site mais doit enlever sticky footer... */	
	/*
	justify-content: center;
	min-height: 100vh;
	*/
	/*min-height: calc(100vh - 60px);*/
	  
	/* POUR FOOTER EN BAS SI PAS DE SCROLL */	
	display: flex; 
	flex-direction: column; 
}

[class^="hvr-"] {
	background-color: #619F93;
	border: 0;
	border-radius: 20px;
	color: #FEFEFE;	
	cursor: pointer;	
	font-size: 18px;
	font-weight: 600;	
	height: 56px;
	letter-spacing: 0.05em;
	line-height: 22px;		
	margin: .4em;
	padding: 1em;	
	text-align: center;
	text-decoration: none;
	width: 320px;	
	
	/* Prevent highlight colour when element is tapped */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
  
	/* Smooth fonts */
	-webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;

	/* original avec hvr-...*/
	/*
	background: #e1e1e1;
	color: #666;
	*/
}

a { 
	color: white;		
} 

a:hover {
	color: white;
}

a.hvr-actif:hover, a.hvr-actifSecondaire:hover {
	background-color: #54BCA8;
}

a.hvr-actifSecondaire {
	background-color: #919191;
}

input[type=text] {
	background-color: #FAFFFE;
	border: 3px solid #99E1D3;
	border-radius: 20px;
	box-sizing: border-box;		
	width: 100%;			
}

input:focus {	
	outline: none;
}

.Accueil-consigne, .Accueil-consignePlus {
	color: #231f20;	
	font-weight: 300;
	line-height: 1.5;
	max-width: 600px;
	text-align: center;	
}

.Accueil-consigne {	
	font-size: 17px;		
	margin-bottom: 5px;	
	margin-top: 40px;	
}

.Accueil-consignePlus {
	font-size: 17px;	
}

.Accueil-consignePlus p:last-child {
	margin-bottom: unset;
}


#bAccueil .containerBtn .btnAction:nth-child(2) {
	background-color: orange !important;
	margin-left: 25px;
	margin-right: 25px;
}

#bAccueil .container-fluid.maxWidth.corps {
	background: rgba(255, 255, 255, 0.85) !important;
}

button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}

button:disabled,
button[disabled] {
  border: 1px solid #999999;
  background-color: red;
  color: #666666;
}

.btnAction {
	background-color: #619F93;
	border: 0;
	border-radius: 20px;
	color: #FEFEFE;	
	font-size: 18px;
	font-weight: 600;
	height: 80px;
	letter-spacing: 0.05em;
	line-height: 22px;
	text-align: center;	
}

.btnAction:hover:enabled {
	background-color: #54BCA8;
}

.btnActionAccueil {
	background-color: #619F93;
	border: 0;
	border-radius: 20px;
	color: #FEFEFE;	
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
	height: 80px;
	letter-spacing: 0.05em;
	line-height: 80px;
	margin-bottom: 24px;
	margin-left: 12px;
	margin-right: 12px;
	text-align: center;			
	max-width: 185px;
	min-width: 130px;
	width: 35%;
	-webkit-box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.1);
	box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.1);
}

.btnActionAccueil:hover {
	background-color: #54BCA8;
}

.btnActionAccueil p {
	margin: 0;
}

.btnActionAccueil p:nth-child(2) {
	font-weight: 300;
}

.btnActionAccueil > span {	
	display: inline-block;
	line-height: normal;
	vertical-align: middle;		
}

.btnActionAccueilDeux {
	min-width: 150px;
	max-width: 200px;
	width: 33%;	
}

.btnActionPage {
	width: 320px;
	height: 56px;
}

.btn-navigation {
	display: inline-block;
	width: 100%;
	max-width: 340px;
}

#btn-valider-reponse {
	opacity: 0.3;
}

.cercleBallBonneReponse {
	background-color: #54BCA8;
	border: 1px solid #54BCA8;
}

.cercleBallMauvaiseReponse {
	background-color: #CB573A;
	border: 1px solid #CB573A;
}

.cercleBallCourant {
	background-color: #919191;
	border: 1px solid #919191;
}

.cercleBallVide {
	background-color: #FFFFFF;
	border: 1px solid #919191;
}

.cercleBonneReponse {
	background-color: #54BCA8;
	border: 6px solid #99E1D3;
	border-radius: 50%;    	
	height: 215px;    
	width: 215px;        
}

.clsFocus:focus {
	-webkit-box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.1);
	box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.1);
}

#container-balls {
	display: none;
	margin: 0;
	text-align: center;
}

#container-balls ul {
	padding: 0;
}

#container-container-balls {
	margin-bottom: 40px;
}

.container-fluid.maxWidth { 
	width: 90%;
	max-width: 830px;	
	margin-left: auto; 
	margin-right: auto;			
}

.container-fluid.maxWidth.corps {
	background-color: #FFFFFF;
	border-radius: 20px;	
	-webkit-box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.1);
	box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.1);
}

#container-reponse-usager {
	margin-top: 30px;
}

#container-valider-reponse {
	margin-top: 91px;
}

.containerCercleBonneReponse {	
	left: calc(50% - 108px);
	position: absolute;
	top: calc(50% - 155px);	
}

.containerCorrectionReponse {
	background-color: #FAFFFE;
	background-image: url(../images/bonne_rep.svg); 
	background-position: 5px 8px;
	background-repeat: no-repeat;  	
	background-size: 35px 35px;
	border: 3px solid #99E1D3;
	border-radius: 20px;
	box-sizing: border-box;	
	height: 56px !important;
	line-height: 1.25;	
	max-width: 320px !important;
	padding-left: 45px;	
	/*padding-right: 20px;*/
	text-align: center;							
}

.containerCorrectionReponseCourt {
	padding-right: 45px;
}

.containerCorrectionReponseLong {
	padding-right: 20px;
}

.containerFormQuestionnaire {	
	position: relative;
}

.containerIconeRetroaction {	
	float: left;	
}

.containerImgResultat {
	height: 232px;
	padding: 0;	
	width: 403px;
}

.containerImgResultat img {
	height: 232px;
}

.containerMain {			
	margin: auto;	
}

.containerRetroaction {
	border-radius: 20px;
}

.containerRetroactionBonneReponse {
	color: white;
	font-size: 22px;
	font-weight: 700;	
	margin-top: 28px;
	text-align: center;	
}

.Entete-accueil {
	margin-top: 50px;
}

.Entete-accueil .imgLogoConjuguaison {
	height: 85px;
	margin-right: 20px;
}

.Entete-page {
	line-height: 75px;
	margin-top: 40px;
	margin-bottom: 35px;
}

.Entete-page .imgLogoConjuguaison {
	height: 70px;
	margin-right: 14px;
}

.Entete-page .Page-titre {
	display: none;
}

/* FONT AWESOME */
.fa-arrow-right {
	vertical-align: middle;
}

.fa-home {
	color: #619f93;
	font-size: 1.3em;
	margin-left: 20px;
}
/* END FONT AWESOME */

.footer a, .footer a:hover {
	text-decoration: none;
}

.iconeRetroaction {
	height: 56px;
	background-color: #FAFFFE;
	border: 3px solid #99E1D3;				
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 0;
	border-right: 0;
	border-top-left-radius: 20px;	
	border-top-right-radius: 0;
}

img {
	-webkit-animation: unset !important;
	animation: unset !important;
}

.imgLogoCCDMD {
	height: 60px;
}

.imgDeco {
	display: none;
	height: 35px;
	margin-right: 20px;
}

.imgRetroactionBonneReponse {
	width: 100px;		
}

.inputIconeBonneReponse {
	background-image: url(../images/bonne_rep.svg); 
	background-position: 5px 8px;
	background-repeat: no-repeat;  	
	background-size: 35px 35px;
}

.inputIconeMauvaiseReponse {
	background-image: url(../images/mauvaise_rep.svg); 
	background-position: 5px 8px;
	background-repeat: no-repeat;  	
	background-size: 35px 35px;
}

.inputTextMauvaiseReponse {
	border: 3px solid #CB573A !important;
	background-color: #FFFCFC !important;
}

.inputStyleActif {	
	-webkit-box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.1);
	box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.1);
}

.inputTextReponse {		
	height: 56px !important;
	padding-left: 45px;
	padding-right: 45px;		
	text-align: center;
	width: 320px !important;
}

#main-menu {		
	overflow: hidden;
	/*padding-top: 100px !important;*/
	padding-top: 45px !important; /*à 50px, on peut mettre dans view-page.php : {top:-200, ease:Bounce.easeOut}, 0.02) */
	width: 100%;
}

#main-menu li {
	border-radius: 50px;		
	height: 10px;
	margin-right: 2px;
	position: relative;
	text-align: center;
	vertical-align: text-top;	
	width: 10px;
}

#main-menu li, #main-menu a {
	display: inline-block;	
}

#main-menu li a{
	visibility: hidden;
}

.modalBodyContenu {	
	font-size: 18px;
	font-weight: 400;
	text-align: center;
}

.modalBodyTitre {	
	font-size: 24px;
	font-weight: 400;
	margin-top: 20px;
	text-align: center;
}

.modalBouton {
	display: block;
	width: 240px;
}

.modalBoutonGauche {
	float: right;
}

/*** STYLISATION LORSQUE SPACING BOOTSTRAP MARCHE PAS (?) (ex: mt-x) ***/
/*** margin: top, bottom, left right  ***/
.mbC10 { margin-bottom: 10px !important; }
.mbC15 { margin-bottom: 15px !important; }
.mbC20 { margin-bottom: 20px !important; }
.mbC25 { margin-bottom: 25px !important; }
.mbC30 { margin-bottom: 30px !important; }
.mbC35 { margin-bottom: 35px !important; }
.mbC40 { margin-bottom: 40px !important; }
.mbC45 { margin-bottom: 45px !important; }
.mbC50 { margin-bottom: 50px !important; }
.mbC55 { margin-bottom: 55px !important; }
.mbC60 { margin-bottom: 60px !important; }
.mbC65 { margin-bottom: 65px !important; }
.mbC70 { margin-bottom: 70px !important; }
.mbC75 { margin-bottom: 75px !important; }
.mbC100 { margin-bottom: 100px !important; }

.mlC5 { margin-left: 5px !important; }
.mlC10 { margin-left: 10px !important; }
.mlC15 { margin-left: 15px !important; }
.mlC20 { margin-left: 20px !important; }
.mlC25 { margin-left: 25px !important; }

.mrC5 { margin-right: 5px !important; }
.mrC10 { margin-right: 10px !important; }
.mrC15 { margin-right: 15px !important; }
.mrC20 { margin-right: 20px !important; }
.mrC25 { margin-right: 25px !important; }
.mrC50 { margin-right: 50px !important; }
.mrC75 { margin-right: 75px !important; }

.mtC1 { margin-top: 1px !important; }
.mtC2 { margin-top: 2px !important; }
.mtC3 { margin-top: 3px !important; }
.mtC4 { margin-top: 4px !important; }
.mtC5 { margin-top: 5px !important; }
.mtC10 { margin-top: 10px !important; }
.mtC15 { margin-top: 15px !important; }
.mtC20 { margin-top: 20px !important; }
.mtC25 { margin-top: 25px !important; }
.mtC30 { margin-top: 30px !important; }
.mtC35 { margin-top: 35px !important; }
.mtC40 { margin-top: 40px !important; }
.mtC45 { margin-top: 45px !important; }
.mtC50 { margin-top: 50px !important; }
.mtC55 { margin-top: 55px !important; }
.mtC60 { margin-top: 60px !important; }
.mtC65 { margin-top: 65px !important; }
.mtC70 { margin-top: 70px !important; }
.mtC75 { margin-top: 75px !important; }
.mtC80 { margin-top: 80px !important; }
.mtC85 { margin-top: 85px !important; }
.mtC90 { margin-top: 90px !important; }
.mtC95 { margin-top: 95px !important; }
.mtC100 { margin-top: 100px !important; }

.plC5 { padding-left: 5px !important; }
.plC10 { padding-left: 10px !important; }
.plC15 { padding-left: 15px !important; }
.plC20 { padding-left: 20px !important; } 
.plC25 { padding-left: 25px !important; }

.prC5 { padding-right: 5px !important; }
.prC10 { padding-right: 10px !important; }
.prC15 { padding-right: 15px !important; }
.prC20 { padding-right: 20px !important; } 
.prC25 { padding-right: 25px !important; }

.Page-accueil-containerBtn {	
	margin-bottom: 40px;
	max-width: 767px;		
}

.Page-accueil-containerInfoPlus {	
	border: 2px solid #99E1D3;
	border-radius: 5px;
	font-size: 17px;
	font-weight: 600;
	min-width:125px;	
}

.Page-accueil-containerInfoPlus:hover {
	cursor: pointer;
}

.Page-accueil-ligneSectionInfoPlus {
	border-top: 2px solid #99E1D3;
	margin-top: 17px;	
	max-width: 600px;
	width: 100%; 
}

.Page-accueil-sectionInfoPlus {
	height: 35px; 	
	max-width: 600px;
}

.Page-consigne {
	color: #231f20;
	line-height: 1.5;
	font-size: 16px;	
	font-weight: 300;	
	margin-top: 5px;
	text-align: center;
}

.Page-contexte {
	color: #231f20;
	font-size: 20px;
	font-weight: 600;		
	margin-top: 60px;	
	max-width: 700px;
	text-align: center;
}

.Page-verbeContexte {
	background-color: #D6F3ED;
}

.Page-resultats-titre, .Page-titre {
	color: #231f20;
	font-size: 22px;
	text-align: center;
}

.Page-resultat-containerBtn {
	margin-top: 50px;
	margin-bottom: 75px;
}

.Page-resultats-containerGaucheBtn {
	text-align: right;
}

.Page-resultats-containerDroitBtn {
	text-align: left;
}

.Page-resultats-message {
	font-size: 20px;
	font-weight: 300;
	max-width: 600px;
	text-align: center;
}

.Page-resultats-motifDeco {
	width: 100px;
	border-top: 3px solid #99E1D3;
}

.Page-resultats-resultat {
	color: #231f20;
	font-size: 30px;
	font-weight: 600;		
	text-align: center;
}

.Piedpage-container {
	background-color: #619f93;	
	color: #fefefe;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
}

.Piedpage-containerContenu {
	padding-left: 35px;
	padding-right: 35px;
	height: 90px;	
}

.Piedpage-deco {
	background-color: #99E1D3;
	height: 5px;	
}

.Piedpage-containerDroit {
	justify-content: flex-end;
}

.Piedpage-seperationItems {
	color: #99E1D3;
	margin-left: 15px;
	margin-right: 15px;
}

.rowAccueilBtn {
	padding-left: 40px;
	padding-right: 40px;
}

.separateurReponse {
	color: #99E1D3;
}

.vertical-center-custom-a {
	/* Nécessaire ? */
	/*min-height: 100%;*/  /* Fallback for browsers do NOT support vh unit */
	/*min-height: 100vh;*/ /* These two lines are counted as one :-)       */
	display: flex;
	align-items: center;
}

/* ANIMATIONS */
.animFadeOut1000 {	
	opacity: 1;	
	transition-property: opacity;
	transition-duration: 5s;
}

.animFadeOut1000.hide {	
	opacity: 0;
}

/* MEDIA QUERIES */
@media (max-width: 400px) { 
	#main-menu li {		
		height: 9px;
		margin-right: 1px;		
		width: 9px;
	}

	.Page-accueil-containerBtn .btnActionAccueil {
		margin-left: 6px;
		margin-right: 6px;
	}
	
	.Page-resultats-containerGaucheBtn a, .Page-resultats-containerDroitBtn a {
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 414px) { 	
	.containerCercleBonneReponse {		
		top: calc(50% - 100px);	
	}
}

@media (max-width: 450px) {	
	.Accueil-consigne {
		font-size: 14px;
	}

	.Accueil-consignePlus {
		font-size: 14px;
	}

	.containerImgResultat {
		width: unset;
		height: unset;
	}

	.containerImgResultat img {
		height: 50vw;
	}	
		
	.Entete-accueil .imgLogoConjuguaison {
		height: 70px;
	}			
}

@media (min-width: 451px) and (max-width: 650px) {
	.Accueil-consigne {
		font-size: 16px;
	}

	.Accueil-consignePlus {
		font-size: 14px;
	}

	.Entete-accueil .imgLogoConjuguaison {
		height: 80px;
	}
}

@media (max-width: 575px) { 	
	[class^="hvr-"] {
		font-size: 17px;
	}

	body {
		background-size: 250% !important;
		margin-top: unset !important;
	}

	.btnActionAccueil {
		font-size: 17px;
	}

	.Accueil-consigne {		
		margin-bottom: 5px;	
		margin-top: 30px;		
	}

	#container-container-balls {
		margin-bottom: 20px;
	}

	.container-fluid.maxWidth.corps {
		width: 100%;
		border-radius: unset;
	}

	#container-reponse-usager {
		margin-top: 20px;
	}

	.containerFormQuestionnaire {
		margin-top: 10px;
	}

	.Entete-accueil {
		margin-top: 30px;
	}	

	.Entete-page {		
		line-height: 35px;	
		margin-top: 25px;
		margin-bottom: 5px;	
	}

	.Entete-page .fa-home {
		margin-left: 0px;
	}

	.Entete-page .imgDeco {		
		display: inline;
		margin-right: 0px;
	}

	.Entete-page .imgLogoConjuguaison {
		display: none;
		height: 65px;		
	}

	.Entete-page .Page-titre {
		display: block;
	}

	.footer {
		margin-top: unset !important;
	}

	.imgLogoCCDMD {
		height: 50px;
	}

	.modalContainerBtnGauche,
	.modalContainerBtnDroit {
		display: flex;
		justify-content: center;
	}
	
	.Page-accueil-containerBtn {	
		margin-bottom: 10px;		
	}

	.Page-consigne {
		font-size: 14px;
	}

	.Page-contexte {		
		font-size: 17px;		
		margin-top: 30px;			
	}

	.Page-resultat-containerBtn {
		margin-top: 25px;
		margin-bottom: 40px;
	}

	.Page-resultats-resultat {
		font-size: 25px;
		margin-top: 10px;		
	}

	.Page-resultats-message {
		font-size: 17px;
	}

	.Page-resultats-titre {
		display: none;
	}
		
	.Page-titre {
		display: none;
	}
	
	.Piedpage-container {
		font-size: 11px;
	}

	.Piedpage-container .mrC25 {
		margin-right: unset;
	}

	.Piedpage-container .mrC50 {
		margin-right: unset;
	}

	.Piedpage-containerContenu {
		height: unset;
		padding-left: 25px;
		padding-right: 25px;
	}

    .Piedpage-containerDroit {
		border-top: 1px solid #99E1D3;		
		justify-content: center;
		padding-bottom: 15px;
		padding-top: 15px;
	}	

	.Piedpage-containerGauche {
		margin-top: 15px;
		margin-bottom: 15px;
	}					    	
}

@media (max-width: 767px) {         
    .btn-navigation {
		text-align: center;
	}

	.Page-resultats-containerGaucheBtn, .Page-resultats-containerDroitBtn {
		text-align: center;
	}
}

@media (min-width: 768px) and (max-width: 992px) {    
	.btn-navigation {
		max-width: 320px;
	}
}

@media (min-width: 576px) and (max-width: 674px) {
	.Piedpage-container {
		font-size: 11px;
	}
}

@media (min-width: 576px) and (max-width: 600px) {
	.Piedpage-seperationItems {
		margin-left: 12px;
		margin-right: 12px;
	}
}

/* ENLEVER SI ON REMET ACCESSIBILITÉ ET CONDITIONS */
@media (min-width: 576px) and (max-width: 720px) {			
	.Piedpage-container {
		font-size: 12px;
	}
}

/* REMETTRE SI ON REMET ACCESSIBILITÉ ET CONDITIONS */
/*
@media (min-width: 675px) and (max-width: 991px) {
	.Piedpage-container {
		font-size: 12px;
	}
}
*/

@media (min-width: 576px) and (max-width: 1024px) {	
	body {
		background-size: 175% !important;
	}
}

@media (min-width: 576px) {
	.modal-dialog {
		max-width: 576px !important;
	}

	.modal-dialog-centered {
		min-height: calc(100% - 13rem) !important;
	}
}

@media (max-height: 768px) { 	
	/*
	#bPage .container-fluid.maxWidth.corps {		
		margin-top: 10px;
	}		
	*/
}

@media (max-height: 1080px) { 		
	body {
		margin-top: 10px;
	}
	/*
	#bAccueil, #bPageResultats {
		margin-top: 10px;
	}
	*/

	.footer {
		margin-top: 10px;
	}
}