/*****************************************************************************************************************************/
/* Reset - Redefinitions des balises HTML */
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
*{margin:0; padding:0;}
*, *:after, *::before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

body, div, h1, h2, h3, h4, h5, h6, form, input, select, textarea{font-family:'Oswald', sans-serif; font-size:15px; color:#000; font-weight:400;}

img{border:0}

a, button{text-decoration:none; cursor:pointer; outline:none; transition:all 0.3s ease 0s;}
a:hover{text-decoration:none;}

input:focus, a:focus, textarea:focus, select:focus, button:focus{outline:none;}

textarea{resize:none; overflow:auto;}

img{vertical-align:middle;}

iframe{border:none;}

::-moz-selection{background:#b3d4fc; text-shadow:none;}

::selection{background:#b3d4fc; text-shadow:none;}

*::-webkit-input-placeholder {color:#707070;}
*:-moz-placeholder {color:#707070; opacity: 1;}
*::-moz-placeholder {color:#707070; opacity: 1;}
*:-ms-input-placeholder {color:#707070;}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* CLASS gÊnÊriques */
/*****************************************************************************************************************************/
	strong{font-weight:bold;}

	.img-responsive{max-width:100%; height:auto;}
	.img-cover{width:100%; height:100%; object-fit:cover;}

	.hide-desk{display:none;}
	.hide-mob{display:inline-block;}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Structure generale */
/*****************************************************************************************************************************/
	body {
		text-align: center;
		background: #fff;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}


	#ad {
		position: relative;
		width: 320px;
		height: 480px;
		overflow: hidden;
	}

	#ad.vid-16-9 {
		background: #000;
	}


	/* video */
	.vid {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.vid:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 64%, rgba(255,255,255,1) 82%, rgba(255,255,255,1) 100%);
		display: block;
	}

	.vid-carre .vid:after {
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 48%, rgba(255,255,255,1) 66%, rgba(255,255,255,1) 100%);
	}
	.vid-3-4 .vid:after {
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 64%, rgba(255,255,255,1) 82%, rgba(255,255,255,1) 100%);
	}

	.vid-16-9 .vid {
		height: 243px;
		padding-top: 63px;
		overflow: hidden;
	}

	.vid-16-9 .vid:after {
		display: none;
	}

		.vid .img-cover {
			object-position: top;
		}


	/* contenu */
	.content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-top: 14px;
	}


		/* timeline */
		.timeline {
			width: 302px;
			height: 2px;
			margin: 0 9px 7px;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.vid-16-9 .timeline,
		.timeline.bgwhite {
			background-color: rgba(255, 255, 255, 0.4);
		}

			.timeline .progress {
				height: 2px;
				background-color: #000;
			}

			.vid-16-9 .timeline .progress,
			.timeline.bgwhite .progress {
				background-color: #fff;
			}


		/* annonceur */
		.annonceur {
			display: flex;
			align-items: center;
			margin-left: 10px;
		}

			.annonceur .logo-ann {
				width: 27px;
				margin-right: 8px;
			}

			.annonceur .txt-ann {
				font-size: 10px;
				font-weight: 700;
			}

			.vid-16-9 .annonceur .txt-ann,
			.annonceur.bgwhite .txt-ann {
				color: #fff;
			}


		/* bas encart */
		.bot-half {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
		}


			/* mentions */
			.mentions {
				width: 100%;
				padding: 6px 0 5px;
				background-color: #000;
				font-size: 9px;
				color: #fff;
				line-height: 14px;
			}

			.mentions.bgwhite {
				background-color: #fff;
				color: #000;
			}


			/* cadre */
			.cadre {
				position: relative;
				width: 234px;
				margin: 0 auto 20px;
				padding: 9px 10px 24px;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 10px;
			}

			.cadre.bgwhite {
				background-color: rgba(255, 255, 255, 0.85);
			}

				.cadre .question {
					padding: 0 24px 22px;
					color: #fff;
					line-height: 20px;
				}

				.cadre.bgwhite .question {
					color: #000;
				}

				.cadre .reponse,
				.cadre .quiz {
					position: relative;
					width: 100%;
					height: 36px;
					background-color: #333;
					border-radius: 10px;
					overflow: hidden;
					cursor: pointer;
				}

				.cadre.bgwhite .reponse {
					background-color: #dfdfdf;
				}

				.cadre .reponse + .reponse,
				.cadre .quiz + .quiz {
					margin-top: 6px;
				}

					.cadre .reponse .gauge {
						width: 0;
						height: 100%;
					}

					.cadre .progress-on .gauge {
						-webkit-animation: WidthIn 1.5s ease both;
        						animation: WidthIn 1.5s ease both;
					}

						.cadre .reponse .gauge .progress {
							height: 100%;
							background-color: #fff;
						}

						.cadre.bgwhite .reponse .gauge .progress {
							background-color: #000;
						}

					.cadre .reponse .txt-overlay {
						display: flex;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}

						.cadre .reponse .txt-rep,
						.cadre .quiz .txt-rep {
							display: flex;
							align-items: center;
							padding: 0 0 2px 19px;
							font-size: 13px;
							color: #fff;
						}

						.cadre.bgwhite .reponse .txt-rep {
							color: #000;
						}

						.cadre.bgwhite .progress-on .txt-rep {
							color: #fff;
						}

						.cadre .progress-on .txt-rep,
						.cadre .progress-on .txt-pc,
						.cadre.bgwhite .progress-on .txt-rep,
						.cadre.bgwhite .progress-on .txt-pc {
							mix-blend-mode: difference;
						}

						.cadre .reponse .txt-pc {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							padding: 0 8px 2px 0;
							font-size: 15px;
							color: #fff;
							font-weight: 400;
							opacity: 0;
						}

						.cadre.bgwhite .reponse .txt-pc {
							color: #000;
						}

						.cadre.bgwhite .progress-on .txt-pc {
							color: #fff;
						}

						.cadre .progress-on .txt-pc {
							-webkit-animation: FadeIn 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
        							animation: FadeIn 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) both;
						}


				/* version quiz */
				.cadre .quiz {
					background-color: #fff;
				}

				.cadre.bgwhite .quiz {
					border: 1px solid #000;
				}

				.cadre .good {
					background-color: #01e536;
				}

				.cadre.bgwhite .good {
					border-color: #01e536;
				}

				.cadre .bad-on {
					background-color: #f40000;
				}

				.cadre.bgwhite .bad-on {
					border-color: #f40000;
				}

					.cadre .quiz .txt-rep {
						height: 100%;
						padding-left: 8px;
						color: #000;
					}

					.cadre .good .txt-rep,
					.cadre .bad-on .txt-rep {
						color: #fff;
					}

					.cadre .quiz .txt-rep:before {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						width: 18px;
						height: 18px;
						margin: 2px 15px 0 0;
						padding-bottom: 1px;
						border: 1px solid #000;
						border-radius: 18px;
						font-size: 12px;
						color: #000;
						line-height: 12px;
					}

					.cadre .first .txt-rep:before {
						content: 'A';
					}

					.cadre .second .txt-rep:before {
						content: 'B';
					}

					.cadre .third .txt-rep:before {
						content: 'C';
					}

					.cadre .good .txt-rep:before {
						content: '';
						background: url(../img/tick.png) no-repeat center;
						background-size: 10px auto;
						border-color: #fff;
					}

					.cadre .bad-on .txt-rep:before,
					.cadre .bad-off .txt-rep:before {
						content: '';
						background: url(../img/cross.png) no-repeat center;
						background-size: 9px auto;
					}

					.cadre .bad-on .txt-rep:before {
						background-color: #fff;
						border-color: #fff;
					}

					.cadre .bad-off .txt-rep:before {
						border-color: #f40000;
					}

				.cadre canvas {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					pointer-events: none;
				}



	/* anim */
	@-webkit-keyframes FadeIn {
	  0% {
	    opacity: 0;
	  }
	  100% {
	    opacity: 1;
	  }
	}
	@keyframes FadeIn {
	  0% {
	    opacity: 0;
	  }
	  100% {
	    opacity: 1;
	  }
	}


	@-webkit-keyframes WidthIn {
	  0% {
	    width: 0;
	  }
	  100% {
	    width: 100%;
	  }
	}
	@keyframes WidthIn {
	  0% {
	    width: 0;
	  }
	  100% {
	    width: 100%;
	  }
	}


	.shake {
		-webkit-animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
		      animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	}

	@-webkit-keyframes shake {
	  0%{ transform:rotate(3deg) scale(1) }
      20%{ transform:rotate(-3deg) scale(1.1) }
      40%{ transform:rotate(3deg) scale(1.1) }
      60%{ transform:rotate(-3deg) scale(1.1) }
      80%{ transform:rotate(3deg) scale(1.1) }
      100%{ transform:rotate(0) scale(1) }
	}

	@keyframes shake {
	  0%{ transform:rotate(3deg) scale(1) }
      20%{ transform:rotate(-3deg) scale(1.1) }
      40%{ transform:rotate(3deg) scale(1.1) }
      60%{ transform:rotate(-3deg) scale(1.1) }
      80%{ transform:rotate(3deg) scale(1.1) }
      100%{ transform:rotate(0) scale(1) }
	}