/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face {
  font-family: Poppins-Regular;
  src: url('../../../Composer/fonts/poppins/Poppins-Regular.ttf'); 
}

@font-face {
  font-family: Poppins-Medium;
  src: url('../../../Composer/fonts/poppins/Poppins-Medium.ttf'); 
}

@font-face {
  font-family: Poppins-Bold;
  src: url('../../../Composer/fonts/poppins/Poppins-Bold.ttf'); 
}

@font-face {
  font-family: Poppins-SemiBold;
  src: url('../../../Composer/fonts/poppins/Poppins-SemiBold.ttf'); 
}

* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

body, html {
	height: 100%;
	font-family: Poppins-Regular, sans-serif;
}

a {
	font-family: Poppins-Regular, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
	margin: 0px;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
}

.BtS{
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
}

	a:focus {
		outline: none !important;
	}

	a:hover {
		text-decoration: none;
	}

h1, h2, h3, h4, h5, h6 {
	margin: 0px;
}

p {
	font-family: Poppins-Regular, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
	margin: 0px;
}

ul, li {
	margin: 0px;
	list-style-type: none;
}
input {
	outline: none;
	border: none;
}
	input:focus {
		border-color: transparent !important;
	}
		input:focus::-webkit-input-placeholder {
			color: transparent;
		}

		input:focus:-moz-placeholder {
			color: transparent;
		}

		input:focus::-moz-placeholder {
			color: transparent;
		}

		input:focus:-ms-input-placeholder {
			color: transparent;
		}

	input::-webkit-input-placeholder {
		color: #adadad;
	}

	input:-moz-placeholder {
		color: #adadad;
	}

	input::-moz-placeholder {
		color: #adadad;
	}

	input:-ms-input-placeholder {
		color: #adadad;
	}

button {
	outline: none !important;
	border: none;
	background: transparent;
}

	button:hover {
		cursor: pointer;
	}


	.container {
		max-width: 1200px;
	}
		.NonJoue{
			width: 25%;
			min-height: 390px;
			
			display: flex;
			flex-direction: column;
			align-content: space-between;
			border-right: 2px solid #d9d9d9;
			margin: 0px;
			padding: 10px;
			padding-top: 0px;

			
		}
		
			.NonJoue h1{
				font-size: 1.3em;
				color: #ee812c;
				margin: 0px;
				border-bottom: 1px solid #6699cc;
			}
/*_____________________FIN DESIGN NO JOUE_______________________*/
		.container-contact100 {
			  width: 100%;  
			  min-height: 80vh;
			  display: -webkit-box;
			  display: -webkit-flex;
			  display: -moz-box;
			  display: -ms-flexbox;
			  display: flex;
			  flex-wrap: wrap;
			  justify-content: center;
			  align-items: center;
			  flex-direction: column;
			  padding: 15px;
			  background: #a64bf4;
			  background: -webkit-linear-gradient(45deg, #6699cc, #ee812c);
			  background: -o-linear-gradient(45deg, #, #ee812c);
			  background: -moz-linear-gradient(45deg, #6699cc, #ee812c);
			  background: linear-gradient(45deg, #6699cc, #ee812c);
			
			
		}
		
		.Mobongisi{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			width: 80%;
			max-height: 650px;
			border-radius: 0px 0px 10px 10px;
			
			overflow: hidden;
			background: #fff;
		}
			.wrap-contact100 {
				display: flex;
				flex-direction: row;
				height: 100vh;
				width: 100%;
				padding: 5px;
			  
			}
			
			.Question{
				width: 60%;
				display: flex;
				flex-direction: column;
				padding: 5px;
				padding-top: 0px;
				
			}
		.GrpEs{
			display: flex;
			width: 40%;
				
			flex-flow: column;
		}
			.GrpResult {
				display: flex;
				flex-flow: column;
				height: 100vh;
				width: 100%;
			}
			.GrpScore {
				display: flex;
				flex-flow: row;
				height: 100vh;
			}
				.contact100-form {
					display: flex;
					flex-direction: column;
					width: 100%;
					height: 100%;
					justify-content: start;
				}
					.Mobongisi-1{
						display: flex;
						flex-direction: inherit;
						height: 100%;
						justify-content: space-between;
					}

				.contact100-form-title {
				  display: block;
				  font-family: Poppins-Bold;
				  font-size: 1.9em;
				  color: #333333;
				  line-height: 1.2;
				  text-align: left;
				  padding-bottom: 10px;
				}
					.Assertion{
						
					}
					
				/*	[ Restyle Radio ]*/
				.wrap-contact3-form-radio {
				  display: -webkit-box;
				  display: -webkit-flex;
				  display: -moz-box;
				  display: -ms-flexbox;
				  display: flex;
				  flex-direction: column;
				  flex-wrap: wrap;
				  padding-bottom: 0px;
				  padding-top: 5px;
				}
				
				.contact3-form-radio{
					padding-bottom: 5px;
					margin-left: 10px;
				}

				.input-radio3 {
				  display: none;
				}

				.label-radio3 {
				  display: block;
				  position: relative;
				  padding-left: 28px;
				  cursor: pointer;
				  font-family: Poppins-Medium;
				  font-size: 18px;
				  color: #333333;
				  line-height: 1.2;
				}

				.label-radio3::before {
				  content: "";
				  display: block;
				  position: absolute;
				  width: 20px;
				  height: 20px;
				  border-radius: 50%;
				  border: 2px solid #d9d9d9;
				  background: #fff;
				  left: 0;
				  top: 50%;
				  -webkit-transform: translateY(-50%);
				  -moz-transform: translateY(-50%);
				  -ms-transform: translateY(-50%);
				  -o-transform: translateY(-50%);
				  transform: translateY(-50%);
				}

				.label-radio3::after {
				  content: "";
				  display: block;
				  position: absolute;
				  width: 12px;
				  height: 12px;
				  border-radius: 50%;
				  border: 6px solid transparent;
				  background: #d9d9d9;
				  -moz-background-clip: padding;     
				  -webkit-background-clip: padding;  
				  background-clip: padding-box; 
				  left: 0;
				  top: 50%;
				  -webkit-transform: translateY(-50%);
				  -moz-transform: translateY(-50%);
				  -ms-transform: translateY(-50%);
				  -o-transform: translateY(-50%);
				  transform: translateY(-50%);
				  display: none;

				}

				.input-radio3:checked + .label-radio3::after {
				  display: block;
				}
					.wrap-input100 {
					  
					  position: relative;
					  /*border-bottom: 2px solid #d9d9d9;*/
					  padding-bottom: 13px;
					  margin-left: 15px;
					  overflow: auto;
					}
					
					.contact3-form-title {
					  display: block;
					  font-family: Poppins-Bold;
					  font-size: 1.3em;
					  color: #000;
					  line-height: 1.2;
					  text-align: left;
					  /*padding-bottom: 70px;*/
					}

					.label-input100 {
					  font-family: Poppins-Regular;
					  font-size: 13px;
					  color: #666666;
					  line-height: 1.5;
					  padding-left: 5px;
					}

					.input100 {
					  display: block;
					  width: 100%;
					  background: transparent;
					  font-family: Poppins-Medium;
					  font-size: 18px;
					  color: #333333;
					  line-height: 1.2;
					  padding: 0 5px;
					}

					.focus-input100 {
					  position: absolute;
					  display: block;
					  width: 100%;
					  height: 100%;
					  top: 0;
					  left: 0;
					  pointer-events: none;
					}

					.focus-input100::before {
					  content: "";
					  display: block;
					  position: absolute;
					  bottom: -2px;
					  left: 0;
					  width: 0;
					  height: 2px;

					  -webkit-transition: all 0.4s;
					  -o-transition: all 0.4s;
					  -moz-transition: all 0.4s;
					  transition: all 0.4s;

					  background: #7f7f7f;
					}
					
					/*------------------------------------------------------------------
					[ Button ]*/
					.BoutonGroup{
						display: flex;
						flex-direction: row;
						width: 100%;
						min-height: 65px;
						justify-content: space-between;
						
						border-top: 2px solid #d9d9d9;
						border-bottom: 2px solid #d9d9d9;
					}
					.container-contact100-form-btn {
					  display: -webkit-box;
					  display: -webkit-flex;
					  display: -moz-box;
					  display: -ms-flexbox;
					  display: flex;
					  flex-wrap: wrap;
					  justify-content: center;
					  padding: 5px;
					  
					  
					}
					.wrap-contact100-form-btn {
					  width: 100%;
					  display: block;
					  position: relative;
					  z-index: 1;
					  border-radius: 5px;
					  overflow: hidden;
					  margin: 0 auto;
					}
					
					.Abd{
						background: #ed1c24;
						width: 500%;
						left: -100%;
					  background: -webkit-linear-gradient(left, #ed1c24, #433b3b, #ed1c24, #433b3b);
					  background: -o-linear-gradient(left, #ed1c24, #433b3b, #ed1c24, #433b3b);
					  background: -moz-linear-gradient(left, #ed1c24, #433b3b, #ed1c24, #433b3b);
					  background: linear-gradient(left, #ed1c24, #433b3b, #ed1c24, #433b3b);
					}
					
					.Svt{
						width: 300%;
						background: #a64bf4;
						left: -100%;
					  background: -webkit-linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
					  background: -o-linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
					  background: -moz-linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
					  background: linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
					}
					
					.contact100-form-bgbtn {
					  position: absolute;
					  z-index: -1;
					 /* width: 300%;*/
					  height: 100%;
					 /* background: #a64bf4;
					  background: -webkit-linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
					  background: -o-linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
					  background: -moz-linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);
					  background: linear-gradient(left, #00dbde, #fc00ff, #00dbde, #fc00ff);*/
					  top: 0;
					  /*left: -100%;*/

					  -webkit-transition: all 0.4s;
					  -o-transition: all 0.4s;
					  -moz-transition: all 0.4s;
					  transition: all 0.4s;
					}

					.contact100-form-btn {
					  display: -webkit-box;
					  display: -webkit-flex;
					  display: -moz-box;
					  display: -ms-flexbox;
					  display: flex;
					  justify-content: center;
					  align-items: center;
					  padding: 0 20px;
					  width: 100%;
					  height: 50px;

					  font-family: Poppins-Medium;
					  font-size: 16px;
					  color: #fff;
					  line-height: 1.2;
					}
					
					.Svt:hover{
						left: 0;
					}
					.Abd:hover{
						left: 0;
					}
					
					.wrap-contact100-form-btn:hover .contact100-form-bgbtn {
					  left: 0;
					}

					.contact100-form-btn i {
					  -webkit-transition: all 0.4s;
					  -o-transition: all 0.4s;
					  -moz-transition: all 0.4s;
					  transition: all 0.4s;
					}
					
					.Svt:hover i {
						 -webkit-transform: translateX(10px);
					  -moz-transform: translateX(10px);
					  -ms-transform: translateX(10px);
					  -o-transform: translateX(10px);
					  transform: translateX(10px);
					}
					.Abd:hover i{
						-webkit-transform: translateX(10px);
					  -moz-transform: translateX(10px);
					  -ms-transform: translateX(10px);
					  -o-transform: translateX(10px);
					  transform: translateX(10px);
					}
					
					.contact100-form-btn:hover i {
					  -webkit-transform: translateX(10px);
					  -moz-transform: translateX(10px);
					  -ms-transform: translateX(10px);
					  -o-transform: translateX(10px);
					  transform: translateX(10px);
					}
					
					/*------------------------------------------------------------------
					[ Minuteur ]*/
					.TempsCompt{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: flex-end;
						margin: 0px;
					}
						.Temps span{
							font-size: 3.0em;
							font-weight: bold;
						}
						
						
						.Compt{
							font-size: 3.0em;
							font-weight: bold;
							
						}
					
					
					/*------------------------------------------------------------------
					[ Responsive ]*/
					/*Sur PC fenetre reduit ou Ecran de petite taille*/
					@media (max-width: 800px) {
						.container-contact100 {
							padding: 0px;
						}
						
							.Mobongisi{
								width: 100%;
								max-height: 1800px;
							}
							
								.contact3-form-title {
									font-size: 1.0em;
								}
						
					}
					

					@media (max-width: 576px) {
						.container-contact100 {
							max-height: 1800px;
							overflow: auto;
						}
						.Mobongisi{
							border-radius: 0px 0px 0px 0px;
							max-height: 1800px;
							height: 100vh;
						}
						
					  .wrap-contact100 {
						flex-direction: column;
						padding: 8px 10px 8px 10px;
					  }
						.contact3-form-title {
							font-size: 1.0em;
						}
						.contact100-form-title {
							padding-bottom: 0px;
						}
						.wrap-input100 {
							padding-bottom: 5px;
							margin-left: 5px;
						}
						.wrap-contact3-form-radio {
							padding-bottom: 0px;
							padding-top: 10px;
						}
							.label-radio3 {
								position: relative;
								font-size: 0.9em;
								line-height: 1.0;
							}
							.contact3-form-radio {
								padding-bottom: 5px;
								margin-left: 15px;
							}
						.Gagner{
							width: 100%;
						}
						.Perdu {
							width: 100%;
						}
						.Question {
							width: 100%;
						}
						.GrpResult {
							width: 100%;
						}
						.Par {
							font-size: 0.9em;
							font-weight: bold;
						}
						
							.GrpEs{
								width: 100%;
							}

						.Vs {
							font-size: 0.9em;
							font-weight: bolder;
							color: #ee812c;
						}
					}
					
					@media (max-width: 490px){
						.Surnom{
							display: none;
						}
					}
					
					@media (max-width: 390px){
						.contact3-form-title {
							font-size: 0.9em;
						}
						.wrap-input100 {
							padding-bottom: 5px;
							margin-left: 5px;
						}
						.wrap-contact3-form-radio {
							padding-bottom: 0px;
							padding-top: 10px;
						}
						.label-radio3 {
							position: relative;
							font-size: 13px;
							line-height: 1.0;
						}
						.contact3-form-radio {
							padding-bottom: 5px;
							margin-left: 5px;
						}
						.input100 {
							font-size: 10px;
						}
						.wrap-contact100 {
							width: 100%;
						}
						.enr{
							display: none;
						}
						.Par{
							font-size: 0.8em;
							font-weight: bold;
						}
						.Vs {
							font-size: 0.8em;
							font-weight: bolder;
							color: #ee812c;
						}
					}

					@media (max-width: 992px) {
					  .alert-validate::before {
						visibility: visible;
						opacity: 1;
					  }
					}

/*------------------------------------------------------------------
[ Gagner ]*/


.Result {
	padding: 0px;
	width: 50%;
}
.B-Result{
	padding: 5px;
}

.Conclut {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	padding: 5px;
}
.Gagner{
	border-radius: 0px 0px 5px 5px;
	/*background-color: #11a300;*/
	border: 1px solid #11a300;
	padding: 0px;
	width: 100%;
	margin: 2px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
}

/*------------------------------------------------------------------
[ Perdu ]*/
.Perdu {
	border-radius: 0px 0px 5px 5px;
	/*background-color: #c81c1c;*/
	border: 1px solid #c81c1c;
	padding: 0px;
	width: 100%;
	margin: 2px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
}

.Vert, .Fel{
	
	background-color: #11a300;
	margin: 0px;
	padding: 0px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	font-weight: bold;
}

.Rouge, .Mal{
	
	background-color: #c81c1c;
	margin: 0px;
	padding: 0px;
	display: flex;
	justify-content: center;
	align-items: end;
	color: #fff;
	font-weight: bold;
}

.Ex-Det{
	background: inherit;
	margin: 0px;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #000;
	font-weight: bold;
	
	height: auto;
	min-height: 35px;
	width: 100%;
	border-bottom: 1px dashed #ee812c;
}

.Ex-Det-Perdu{
	background: #c81c1c;
	margin: 0px;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #000;
	font-weight: bold;
	
	height: auto;
	min-height: 35px;
	width: 100%;
	border-bottom: 1px dashed #ee812c;
}

.Ex-Det-Reussi{
	background: #11a300;
	margin: 0px;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #000;
	font-weight: bold;
	
	height: auto;
	min-height: 35px;
	width: 100%;
	border-bottom: 1px dashed #ee812c;
}
	

.L_BtnQ{
	background-color: #ee812c;
	margin: 0px;
	padding: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	
	height: auto;
	min-height: 30px;
	width: 100%;
	transition: all 0.5s ease;
	
}
.MResult{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50%;
}
	.Vs-MResult, .Vs-Result{
		font-weight: bold;
		font-size: 1.3em;
		color: #ee812c;
	}
	
	.L_BtnQ:hover{
		background-color : #c81c1c;
	}
	.BtnQ{
		
		
	}

.Fel, .Mal{
	border-radius: 0px 0px 5px 5px;
	padding: 5px;
}

	.Mal span, .Fel span{
		text-align: center;
	}