@font-face {
	font-family: 'BouyguesRead-Light';
	src: url('../font/BouyguesRead-Light');
	src: url('../font/BouyguesRead-Light.eot?#iefix') format('embedded-opentype'),
	url('../font/BouyguesRead-Light.woff2') format('woff2'),
	url('../font/BouyguesRead-Light.woff') format('woff'),
	url('../font/BouyguesRead-Light.ttf')  format('truetype'),
	url('../font/BouyguesRead-Light.svg#svgBouyguesReadLight') format('svg');
	mso-generic-font-family: swiss;
	mso-font-alt: "Century Gothic";
}
@font-face {
	font-family: 'BouyguesRead-Bold';
	src: url('../font/BouyguesRead-Bold');
	src: url('../font/BouyguesRead-Bold.eot?#iefix') format('embedded-opentype'),
	url('../font/BouyguesRead-Bold.woff2') format('woff2'),
	url('../font/BouyguesRead-Bold.woff') format('woff'),
	url('../font/BouyguesRead-Bold.ttf')  format('truetype'),
	url('../font/BouyguesRead-Bold.svg#svgBouyguesReadLight') format('svg');
	mso-generic-font-family: swiss;
	mso-font-alt: "Century Gothic";
}
@font-face {
	font-family: 'BouyguesSpeak-Bold';
	src: url('../font/BouyguesSpeak-Bold.eot');
	src: url('../font/BouyguesSpeak-Bold.eot?#iefix') format('embedded-opentype'),
	url('../font/BouyguesSpeak-Bold.woff2') format('woff2'),
	url('../font/BouyguesSpeak-Bold.woff') format('woff'),
	url('../font/BouyguesSpeak-Bold.ttf')  format('truetype'),
	url('../font/BouyguesSpeak-Bold.svg#svgBouyguesSpeak-Bold') format('svg');
	mso-generic-font-family: swiss;
	mso-font-alt: "Century Gothic";
}

/* Style par défaut (pour mobile en approche "mobile-first") */

/*------------------------------------------------
	PAGE
------------------------------------------------*/

.logo-container {
	display: inline-block;
	width: 100%;
}

.logo {
	position: relative;
	width: 45%;
	z-index: 2;
}

.shape {
	position: absolute;
	top: -0.65em; left: -10em; right: -10em;
	height: 2vw;
	padding: 1.15em 1em 1em 1em;
	background: white;
	z-index: 1;
}

.page {
	background:
	url('../img/shape-background-top.png') top center repeat-x;
	background-size: 23%;
	background-color: #0f9db9;
}

.page header {
	margin-top: 5%;
	text-align: center;
	color: white;
	font-family: "BouyguesSpeak-Bold";
	font-size: 24vw;
}

.page header .specialo {
	position: relative;
	top: 0.1em;
	margin-left: -0.16em;
	margin-right: -0.16em;
}

.page header .specialo svg {
	width: 16vw;
}

.page main {
	text-align: center;
}

.page .dates {
	width: 40%;
	height: auto;
}

.page .dates text {
	font-family: "BouyguesRead-Bold";
	font-size: 24px;
	fill: #0f9db9;
}

.page h2 {
	font-family: "BouyguesSpeak-Bold";
	font-size: 5.5vw;
	color: white;
}

.page main input[type=text] {
	margin: 3%;
	padding: 3% 3%;
	border: 1px solid white;
	outline: none;
	border-radius: 3vw;
	width: 80%;
	color: #0f9db9;
	font-family: "BouyguesRead-Light";
	font-size: 5vw;
}

.page main input[type=text]::placeholder {
	color: #0f9db9;
}

.page main input[type=text]:focus {
	border: 1px solid white;
	outline: none;
}

.page .checkbox-container {
	display: inline-block;
	margin-top: 5%;
	width: 85%;
	text-align: left;
}

.page main input[type=checkbox] {
	background-color: white;
	margin: 1% 1% 0% 1%;
	margin-right: 5px;
	cursor: pointer;
	appearance: none;
	width: 1em;
	height: 1em;
	border: 0em solid white;
	transition: 0.2s all linear;
	position: relative;
}

.page main input[type=checkbox]:checked {
	border: 0.5em solid #ef4823;
}

.page main label {
	cursor: pointer;
	font-family: "BouyguesRead-Light";
	color: white;
	font-size: 5vw;
}

.page .h-captcha {
	margin-top: 5%;
}

.page main label a {
	color: white;
}

.page main p {
	color: white;
	font-family: "BouyguesRead-Light";
	font-size: 5vw;
}

.page main i {
	color: white;
	font-family: "BouyguesRead-Light";
	font-size: 4.5vw;
}

.page main b {
	color: white;
	font-family: "BouyguesRead-Bold";
	font-size: 5vw;
}

.page .img-accueil {
	width: 96%;
	margin-bottom: 4%;
}
	
.page .img-fin {
	width: 96%;
}

.page main .btn {
	margin-top: 1%;
	margin-bottom: 4%;
	padding: 5% 8%;
	cursor: pointer;
	border-radius: 5vw;
	border-style: none;
	background-color: #ef4823;
	color: white;
	font-family: "BouyguesRead-Bold";
	font-size: 6vw;
}

.page .exp {
	font-size: 0.6em;
	position: relative;
	bottom: 0.4em;
}

.page footer {
	margin-top: 10%;
	text-align: justify;
	color: white;
	font-family: "BouyguesRead-Light";
	font-size: 3vw;
}

/*------------------------------------------------
	VIDEO OVERLAY
------------------------------------------------*/

.container {
	position: relative;
}

.content {
	width: 100%;
	height: 100%;
}

.video-overlay {
	position: absolute;
	top: -2vh;
	left: 0;
	width: 100%;
	height: 116vh;
	background: black;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	transition: opacity 0.6s ease;
}

.video-overlay video {
	object-fit: cover;
}

.video-overlay.hide {
	opacity: 0;
	pointer-events: none;
}

.skip-btn {
	position: absolute;
	top: 2%;
	right: 2%;
	padding: 2% 5%;
	background: rgba(255,255,255,0.8);
	border: none;
	border-radius: 6vw;
	cursor: pointer;
	font-weight: bold;
	transition: background 0.3s;
	font-family: "BouyguesRead-Light";
	font-size: 4vw;
}

.page main .loader {
	width: 14vw;
	height: 14vw;
	border: 3vw solid #fff;
	border-top-color: #ef4823;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	display: none;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.skip-btn:hover {
	background: white;
}

/* Pour les tablettes (entre 769px et plus) */
@media (min-width: 769px) {
	
	/*------------------------------------------------
		PAGE
	------------------------------------------------*/

	.logo-container {
		display: inline-block;
		width: 100%;
	}

	.logo {
		position: relative;
		width: 25%;
		z-index: 2;
	}

	.shape {
		position: absolute;
		top: -0.65em; left: -10em; right: -10em;
		height: 1.6vw;
		padding: 0.8em 0.1em 1.5em 0.1em;
		background: white;
		border-radius: 0.2em;
		z-index: 1;
	}

	.page {
		background:
		url('../img/shape-background-top.png') top center repeat-x;
		background-size: 9%;
		background-color: #0f9db9;
	}

	.page header {
		margin-top: 1%;
		text-align: center;
		color: white;
		font-family: "BouyguesSpeak-Bold";
		font-size: 12vw;
	}

	.page header .specialo {
		position: relative;
		top: 0.08em;
		margin-left: -0.15em;
		margin-right: -0.15em;
	}

	.page header .specialo svg {
		width: 7.6vw;
	}

	.page main {
		text-align: center;
	}

	.page .dates {
		width: 25%;
		height: auto;
	}

	.page .dates text {
		font-family: "BouyguesRead-Bold";
		font-size: 20px;
		fill: #0f9db9;
	}

	.page h2 {
		font-family: "BouyguesSpeak-Bold";
		font-size: 3vw;
		color: white;
	}

	.page main input[type=text] {
		margin: 1%;
		padding: 1.5% 1.5%;
		border: 1px solid white;
		border-radius: 2vw;
		transition: 0.1s all linear;
		width: 60%;
		font-family: "BouyguesRead-Light";
		font-size: 3vw;
	}
	
	.page main input[type=text]::placeholder {
		color: #0f9db9;
	}

	.page main input[type=text]:focus {
		border: 1px solid white;
		outline: none;
	}

	.page .checkbox-container {
		display: inline-block;
		width: 60%;
		margin-top: 2%;
		text-align: left;
	}

	.page main input[type=checkbox] {
		margin: 1% 1% 0% 1%;
		margin-right: 5px;
		cursor: pointer;
		appearance: none;
		width: 1.5em;
		height: 1.5em;
		border-radius: 0.2vw;
		border: 0em solid white;
		transition: 0.1s all linear;
		position: relative;
		align-content: left;
	}
	
	.page .checkbox-container label {
		text-align: left;
		align-content: right;
	}

	.page main input[type=checkbox]:checked {
		border: 0.75em solid #ef4823;
	}

	.page main label {
		cursor: pointer;
		font-family: "BouyguesRead-Light";
		font-size: 2.5vw;
	}

	.page main label a {
		color: #313E75;
	}
	
	.page .h-captcha {
		margin-top: 2%;
	}
	
	.page main p {
		color: white;
		font-family: "BouyguesRead-Light";
		font-size: 2.5vw;
	}

	.page main i {
		color: white;
		font-family: "BouyguesRead-Light";
		font-size: 2vw;
	}
	
	.page main b {
		color: white;
		font-family: "BouyguesRead-Bold";
		font-size: 2.5vw;
	}
	
	.page .img-accueil {
		width: 50%;
		margin-bottom: 2%;
	}
	
	.page .img-fin {
		width: 70%;
	}
	
	.page main .btn {
		margin-top: 1%;
		margin-bottom: 2%;
		padding: 2% 3%;
		cursor: pointer;
		border-radius: 1.5vw;
		border-style: none;
		background-color: #ef4823;
		color: white;
		font-family: "BouyguesRead-Bold";
		font-size: 3vw;
	}

	.page main .loader {
		width: 5vw;
		height: 5vw;
		border: 1.5vw solid #fff;
		border-top-color: #ef4823;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		display: none;
	}

	@keyframes spin {
		to { transform: rotate(360deg); }
	}

	.page .exp {
	  font-size: 0.6em;
	  position: relative;
	  bottom: 0.4em;
	}

	.page footer {
		margin-top: 2%;
		text-align: justify;
		color: white;
		font-family: "BouyguesRead-Light";
		font-size: 2vw;
	}

	@keyframes spin {
		to { transform: rotate(360deg); }
	}
	
	/*------------------------------------------------
		 VIDEO OVERLAY
	------------------------------------------------*/

	.container {
		position: relative;
	}

	.content {
		width: 100%;
		height: 100%;
	}

	.video-overlay {
		position: absolute;
		top: -1vh;
		left: -1vh;
		width: 104%;
		height: 116vh;
		background: black;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		transition: opacity 0.6s ease;
	}

	.video-overlay video {
		object-fit: cover;
	}

	.video-overlay.hide {
		opacity: 0;
		pointer-events: none;
	}

	.skip-btn {
		position: absolute;
		top: 2%;
		right: 3%;
		padding: 1.5% 3%;
		background: rgba(255,255,255,0.8);
		border: none;
		border-radius: 3vw;
		cursor: pointer;
		font-weight: bold;
		transition: background 0.3s;
		font-family: "BouyguesRead-Light";
		font-size: 3vw;
	}

	.skip-btn:hover {
		background: white;
	}
	
}

/* Pour les ordinateurs (1025px et plus) */
@media (min-width: 1025px) {
	
	/*------------------------------------------------
		PAGE
	------------------------------------------------*/

	.logo-container {
		display: inline-block;
		width: 100%;
	}

	.logo {
		position: relative;
		width: 10%;
		z-index: 2;
	}

	.shape {
		position: absolute;
		top: -0.8em; left: -10em; right: -10em;
		padding: 0.8em 0.1em 1.2em 0.1em;
		background: white;
		border-radius: 0.2em;
		z-index: 1;
	}

	.page {
		background:
		url('../img/shape-background-top.png') top center repeat-x;
		background-size: 6.5%;
		background-color: #0f9db9;
	}

	.page header {
		margin-top: 1%;
		text-align: center;
		color: white;
		font-family: "BouyguesSpeak-Bold";
		font-size: 6vw;
	}

	.page header .specialo {
		position: relative;
		top: 0.1em;
		margin-left: -0.15em;
		margin-right: -0.15em;
	}

	.page header .specialo svg {
		width: 4vw;
	}

	.page main {
		text-align: center;
	}

	.page .dates {
		width: 12%;
		height: auto;
	}

	.page .dates text {
		font-family: "BouyguesRead-Bold";
		font-size: 20px;
		fill: #0f9db9;
	}

	.page h2 {
		font-family: "BouyguesSpeak-Bold";
		font-size: 1.4vw;
		color: white;
	}

	.page main input[type=text] {
		margin: 1%;
		padding: 1% 1%;
		border: 1px solid white;
		border-radius: 1vw;
		transition: 0.1s all linear;
		width: 40%;
		font-family: "BouyguesRead-Light";
		font-size: 1.2vw;
	}
	
	.page main input[type=text]::placeholder {
		color: #0f9db9;
	}

	.page main input[type=text]:focus {
		border: 1px solid white;
		outline: none;
	}

	.page .checkbox-container {
		display: inline-block;
		width: 40%;
		margin-top: 1%;
		text-align: left;
	}

	.page main input[type=checkbox] {
		margin: 1% 1% 0% 1%;
		margin-right: 5px;
		cursor: pointer;
		appearance: none;
		width: 1.5em;
		height: 1.5em;
		border-radius: 0.2vw;
		border: 0em solid white;
		transition: 0.1s all linear;
		position: relative;
		align-content: left;
	}
	
	.page .checkbox-container label {
		text-align: left;
		align-content: right;
	}

	.page main input[type=checkbox]:checked {
		border: 0.75em solid #ef4823;
	}

	.page main label {
		cursor: pointer;
		font-family: "BouyguesRead-Light";
		font-size: 1.2vw;
	}

	.page main label a {
		color: #313E75;
	}
	
	.page .h-captcha {
		margin-top: 2%;
	}
	
	.page main p {
		color: white;
		font-family: "BouyguesRead-Light";
		font-size: 1.2vw;
	}

	.page main i {
		color: white;
		font-family: "BouyguesRead-Light";
		font-size: 1vw;
	}
	
	.page main b {
		color: white;
		font-family: "BouyguesRead-Bold";
		font-size: 1.2vw;
	}

	.page .img-accueil {
		width: 30%;
	}
	
	.page .img-fin {
		width: 50%;
	}
	
	.page main .btn {
		margin-top: 1%;
		margin-bottom: 2%;
		padding: 1% 3%;
		cursor: pointer;
		border-radius: 1vw;
		border-style: none;
		background-color: #ef4823;
		color: white;
		font-family: "BouyguesRead-Bold";
		font-size: 1.6vw;
		display: inline-block;
	}

	.page main .loader {
		width: 3.5vw;
		height: 3.5vw;
		border: 0.8vw solid #fff;
		border-top-color: #ef4823;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		display: none;
	}

	@keyframes spin {
		to { transform: rotate(360deg); }
	}

	.page .exp {
		font-size: 0.6em;
		position: relative;
		bottom: 0.4em;
	}

	.page footer {
		margin-top: 2%;
		text-align: justify;
		color: white;
		font-family: "BouyguesRead-Light";
		font-size: 1vw;
	}
	
	/*------------------------------------------------
		 VIDEO OVERLAY
	------------------------------------------------*/

	.container {
		position: relative;
	}

	.content {
		width: 100%;
		height: 100%;
	}

	.video-overlay {
		position: absolute;
		top: -1vh;
		left: -1vh;
		width: 102%;
		height: 104vh;
		background: black;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		transition: opacity 0.6s ease;
	}

	.video-overlay video {
		object-fit: cover;
	}

	.video-overlay.hide {
		opacity: 0;
		pointer-events: none;
	}

	.skip-btn {
		position: absolute;
		top: 2%;
		right: 2%;
		padding: 1% 2.5%;
		background: rgba(255,255,255,0.8);
		border: none;
		border-radius: 1vw;
		cursor: pointer;
		font-weight: bold;
		transition: background 0.3s;
		font-family: "BouyguesRead-Light";
		font-size: 2vw;
	}

	.skip-btn:hover {
		background: white;
	}
	
}