/* ----- */
/* STYLE */
/* ----- */

@font-face {
	font-family: 'FranceTVBrownTT';
	src: url("font/FranceTVBrownTT-Regular.ttf");
	font-display: swap;
}
@font-face {
	font-family: 'FranceTVBrownTT';
	src: url("font/FranceTVBrownTT-Bold.ttf");
	font-display: swap;
	font-weight: 700;
}
@font-face {
	font-family: 'FranceTVBrownTT';
	src: url("font/FranceTVBrownTT-Black.ttf");
	font-display: swap;
	font-weight: 900;
}

body
{
	width: 100%;
	height: 100%;
	position: absolute;
	
	color: #000000;
	font-size: 32px;
	font-family: "FranceTVBrownTT", sans-serif;
	text-align: center;
	
	background-color: #000000;

	user-select: none;
	-webkit-touch-callout: none;
	text-size-adjust: none;
	touch-action: none;
}

img, .image
{
	display: block;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	left: 0;
	right: 0;

	border: none;
	background-repeat: no-repeat;
	background-position: center;
}

h1, h2, .titre
{
	display: block;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 240px;

	color: #ffffff;
	font-size: 60px;
	font-weight: 700;
}

p
{
	display: block;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;

	color: #ffffff;
	font-size: 32px;
	text-align: center;
}

a, a:hover
{
	color: #ffffff;
	text-decoration: none;
}
a:hover
{
	color: #ffffff;
}

i, em
{
	font-style: italic;
}
b, strong
{
	font-weight: 700;
}

a:focus,
div:focus
{
	outline: #000000 solid 5px;
}

body.using-mouse a:focus,
body.using-mouse div:focus
{
	outline: none;
}

body a:focus,
body div:focus
{
	outline: 2px solid #fff;
}


/* ---- */
/* SITE */
/* ---- */

#bg
{
	display: block;
	
	width: 100%;
	height: 100%;
	position: relative;

	background-color: #ffffff;
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: cover;

	opacity: 1;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

@media (min-aspect-ratio: 780/1688)
{
	#bg
	{
		opacity: 0;
	}
}

#site
{
	display: none;
	
	width: 780px;
	height: 1688px;
	position: absolute;
	left: 0px;
	top: 0px;

	background-color: #000000;
	overflow: hidden;
	transform-origin: left top;
}

.ecran
{
	display: none;
	opacity: 0;

	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;

	background-color: #000000;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.show
{
	opacity: 1 !important;
}

.bouton
{
	width: 320px;
	padding: 38px 0 32px;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;

	color: #ffffff;
	font-size: 36px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 44px;

	border: 4px solid #ffffff;
	border-radius: 100px;
	cursor: pointer;
}
.bouton.petit
{
	width: fit-content;
	padding: 0;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;

	font-size: 18px;
	line-height: 30px;
	letter-spacing: 2px;

	border: none;
	border-bottom: 2px solid #ffffff;
	border-radius: 0px;
}
.bouton.retour
{
	width: fit-content;
	padding: 0 0 0 60px;
	top: 1546px;

	font-size: 24px;

	border: none;
	background-image: url(../img/picto-fleche-retour.png);
	background-position: left center;
	background-repeat: no-repeat;
	cursor: pointer;
}


/* HEADER */

.header
{
	width: 100%;
	height: 160px;
	position: absolute;

	background-color: #000000;
	border-bottom: 2px solid #D7C277;
	z-index: 100;
}
.header .version
{
	position: absolute;
	top: 10px;
	left: 10px;

	color: #ffffff;
	font-size: 12px;

	display: none;
}
.header .paris-2024
{
	width: 348px;
	height: 94px;
	top: 40px;

	background-image: url(../img/logo-ftv-paris-2024.png);
	background-size: cover;
	cursor: pointer;
}
.header .mute
{
	width: 60px;
	height: 60px;
	position: absolute;
	left: auto;
	right: 20px;
	top: 50px;

	background-image: url(../img/picto-son-volume.png);
	background-size: 54px;
	cursor: pointer;
}
.header .mute.on
{
	background-image: url(../img/picto-son-mute.png);
}

/* CHARGEMENT */

#chargement
{
	display: block;
	z-index: 200;
}
#chargement .titre
{
	top: 700px;
}
#chargement p
{
	top: 820px;
}
#chargement .ftv-presente
{
	width: 340px;
	height: 90px;
	top: 124px;

	background-image: url(../img/logo-ftv-presente.png);
}
#chargement .splash-screen
{
	width: 780px;
	height: 1250px;
	top: 240px;

	background-image: url(../img/splash-screen.png);
	opacity: 0;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#chargement .paris-2024,
#accueil .paris-2024
{
	width: 628px;
	height: 174px;
	top: 1434px;

	background-image: url(../img/logo-ftv-paris-2024.png);
}


/* ACCUEIL */

#accueil
{
	z-index: 1;
}
#accueil .titre
{
	top: 240px;
}
#accueil .introduction
{
	max-width: 680px;
	top: 352px;
}
#accueil .bouton.commencer
{
	top: 906px;

	color: #000000;
	background-color: #88F4B7;
	border: none;
	border-radius: 100px;
}
#accueil .bouton.effacer
{
	display: none;
	top: 1050px;
}
#accueil .bouton.dotations,
#accueil .bouton.reglement
{
	width: fit-content;
	margin: auto;
	padding-bottom: 1px;
	position: absolute;
	left: 0;
	right: 0;

	color: #ffffff;
	font-size: 36px;
	font-weight: 700;
	line-height: 30px;
	text-transform: uppercase;

	border: none;
	border-radius: 0;
	border-bottom: 2px solid #ffffff;

	cursor: pointer;
}
#accueil .dotations
{
	width: 202px;
	top: 1150px;
}
#accueil .reglement
{
	width: 210px;
	top: 1254px;
}


/* DOTATIONS & REGLEMENT */

#dotations .introduction
{
	top: 342px;
}
#dotations .contenu
{
	width: 500%;
	height: 830px;
	position: absolute;
	top: 574px;
	left: 0;

	display: flex;
	flex-wrap: nowrap;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#dotations .contenu .niveau
{
	top: 0px;

	font-size: 28px;
	font-weight: 700;
	text-transform: uppercase;
}
#dotations .contenu .lot
{
	width: 100%;
	height: 100%;
	position: relative;
}
#dotations .contenu .lot .image
{
	width: 520px;
	height: 520px;
	top: 54px;
}
#dotations .contenu #lot-1 .image
{
	background-image: url(../img/dotations-lieu-1.png);
}
#dotations .contenu #lot-2 .image
{
	background-image: url(../img/dotations-lieu-2.png);
}
#dotations .contenu #lot-3 .image
{
	background-image: url(../img/dotations-lieu-3.png);
}
#dotations .contenu #lot-4 .image
{
	background-image: url(../img/dotations-lieu-4.png);
}
#dotations .contenu #lot-5 .image
{
	background-image: url(../img/dotations-lieu-5.png);
}
#dotations .contenu .lot .lieu
{
	top: 604px;

	font-size: 40px;
	font-weight: 700;
	line-height: 48px;
}
#dotations .contenu .lot .lieu span
{
	color: #D7C277;
}
#dotations .contenu .lot .detail
{
	top: 720px;
}
#dotations .contenu .lot .detail span
{
	color: #D7C277;
}
#dotations .nav
{
	width: 20px;
	height: 33px;
	position: absolute;
	top: 896px;
	left: 46px;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}
#dotations .nav.off
{
	display: none;
}
#dotations .nav.prev
{
	background-image: url(../img/picto-nav-prev.png);
}
#dotations .nav.next
{
	left: auto;
	right: 46px;
	background-image: url(../img/picto-nav-next.png);
}
#reglement .contenu
{
	width: 680px;
	height: 1024px;
	margin: auto;
	padding: 0 26px;
	position: absolute;
	top: 342px;
	left: 0;
	right: 0;

	color: #ffffff;

	overflow-y: scroll;
}
#reglement .contenu::-webkit-scrollbar
{
	width:20px;
}
#reglement .contenu::-webkit-scrollbar-track
{
	background: #2D2D2D;
	border-radius: 20px;
}
#reglement .contenu::-webkit-scrollbar-thumb
{
	background: #8D8D8D;
	border-radius: 20px;
}
#reglement .contenu p
{
	margin: 20px auto;
	position: relative;

	text-align: left;
	font-size: 20px;
}
#reglement .contenu p.t1,
#reglement .contenu p.t2
{
	font-weight: bold;
}
#reglement .pdf
{
	position: absolute;
	top: 1430px;

	font-size: 24px;
	line-height: 34px;
}
#reglement .pdf a
{
	text-decoration: underline;
}

/* AVATAR */

#avatar .introduction
{
	top: 424px;
}
#avatar .nav
{
	width: 20px;
	height: 33px;
	position: absolute;
	top: 896px;
	left: 46px;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}
#avatar .nav.off
{
	display: none;
}
#avatar .nav.prev
{
	background-image: url(../img/picto-nav-prev.png);
}
#avatar .nav.next
{
	left: auto;
	right: 46px;
	background-image: url(../img/picto-nav-next.png);
}
#avatar .contenu
{
	width: calc(560px*5);
	height: 648px;
	position: absolute;
	top: 522px;
	left: 110px;

	display: flex;
	flex-wrap: nowrap;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#avatar .contenu .avatar
{
	width: 560px;
	height: 100%;
	position: relative;

	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
#avatar .contenu #avatar-1
{
	background-image: url(../img/avatar-1-stagiaire.png);
}
#avatar .contenu #avatar-2
{
	background-image: url(../img/avatar-2-stagiaire.png);
}
#avatar .contenu #avatar-3
{
	background-image: url(../img/avatar-3-stagiaire.png);
}
#avatar .contenu #avatar-4
{
	background-image: url(../img/avatar-4-stagiaire.png);
}
#avatar .contenu #avatar-5
{
	background-image: url(../img/avatar-5-stagiaire.png);
}
#avatar .numero
{
	top: 1200px;
}
#avatar .bouton.choisir
{
	top: 1310px;
}


/* POSTE */

#poste .avatar
{
	width: 560px;
	height: 648px;
	margin: auto;
	position: absolute;
	top: 330px;
	left: 0;
	right: 0;

	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
#poste .statut
{
	width: fit-content;
	padding: 4px 0 0 76px;
	top: 1046px;

	color: #88F4B7;
	font-size: 48px;
	font-weight: 700;

	background-image: url(../img/picto-check.png);
	background-position: left top;
	background-repeat: no-repeat;
}
#poste .introduction
{
	top: 1154px;
}
#poste .introduction.fini
{
	top: 1228px;
}
#poste .bouton.parti
{
	top: 1300px;
}
#poste .bouton.inscription
{
	top: 1275px;
}
#poste .bouton.changer
{
	top: 1450px;
}
#poste .bouton.revoir
{
	top: 1430px;
}
#poste .evolution
{
	width: 580px;
	height: 52px;
	margin: auto;
	position: absolute;
	top: 1554px;
	left: 0;
	right: 0;

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* LIEU */

#lieu .lieu
{
	width: 646px;
	height: 250px;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border-radius: 60px;
	cursor: pointer;
}
#lieu .lieu:after
{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;

	background-color: rgba(0,0,0,0);
	background-image: url(../img/picto-verouille.png);
	background-repeat: no-repeat;
	background-position: center 300px;
	border-radius: 60px;

	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
#lieu .lieu.off:after
{
	background-color: rgba(0,0,0,0.7);
	background-position: center;
}
#lieu .lieu.off:active
{
	animation: shake 0.5s;
}
@keyframes shake
{
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}
#lieu p
{
	padding: 0 120px;

	font-size: 40px;
	font-weight: 700;
	text-align: left;
}
#lieu .lieu.off + p
{
	color: #505050;
}
#lieu #lieu-1
{
	top: 240px;
	background-image: url(../img/lieu-1.png);
}
#lieu #lieu-1 + p
{
	top: 510px;
}
#lieu #lieu-2
{
	top: 590px;
	background-image: url(../img/lieu-2.png);
}
#lieu #lieu-2 + p
{
	top: 860px;
}
#lieu #lieu-3
{
	top: 940px;
	background-image: url(../img/lieu-3.png);
}
#lieu #lieu-3 + p
{
	top: 1210px;
}
#lieu #lieu-4
{
	top: 1290px;
	background-image: url(../img/lieu-4.png);
}
#lieu #lieu-4 + p
{
	top: 1560px;
}

/* MISSION */

#mission
{
	overflow-y: scroll;
}
#mission::-webkit-scrollbar
{
	width: 0px;
}
#mission::-webkit-scrollbar-track
{
	background: #2D2D2D;
	border-radius: 20px;
}
#mission::-webkit-scrollbar-thumb
{
	background: #8D8D8D;
	border-radius: 20px;
}
#mission p
{
	width: fit-content;
	margin: 0;
	left: 100px;
	text-align: left;
}
#mission .objectif
{
	width: fit-content;
	margin: 0;
	padding: 4px 100px 0 74px;
	top: 322px;

	color: #FF9D00;
	font-size: 48px;
	font-weight: 700;

	background-image: url(../img/picto-objectif.png);
	background-position: left top;
	background-repeat: no-repeat;
}
#mission .objectif.ok
{
	color: #1CD84E;
	background-image: url(../img/picto-ok.png);
	background-size: 52px;
}
#mission .titre.lieu
{
	top: 424px;
}
#mission .lieu
{
	top: 508px;
}
#mission .contenu
{
	width: 100%;
	height: 320px;
	position: absolute;
	top: 626px;
	left: 0;

	overflow: hidden;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#mission .contenu.on
{
	height: 772px;
}
#mission .contenu .image
{
	width: 100%;
	height: 320px;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;

	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
#mission .contenu .plus
{
	width: 112px;
	height: 112px;
	position: absolute;
	left: 628px;
	top: 104px;

	background-color: #ffffff;
	background-image: url(../img/picto-plus.png);
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 112px;
	cursor: pointer;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#mission .contenu.on .plus
{
	background-image: url(../img/picto-moins.png);
	transform: rotate(360deg);
}
#mission .contenu .info
{
	width: 100%;
	height: 452px;
	position: absolute;
	top: 320px;
	left: 0;

	background-color: #ffffff;
}
#mission .contenu .info p
{
	color: #000000;
}
#mission .contenu .info .lieu
{
	top: 50px;
	font-size: 40px;
	font-weight: 700;
}
#mission .contenu .info .subtitle
{
	color: #2C98C8;
	font-size: 28px;
	font-weight: 900;
	text-transform: uppercase;
}
#mission .contenu .info .subtitle.capacite
{
	top: 148px;
}
#mission .contenu .info .capacite
{
	top: 188px;
}
#mission .contenu .info .subtitle.epreuves
{
	top: 252px;
}
#mission .contenu .info .epreuves
{
	top: 292px;
}
#mission .lieu
{
	top: 508px;
}
#mission .subcontenu
{
	width: 100%;
	height: 700px;
	position: absolute;
	top: 946px;
	left: 0;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#mission .subcontenu.on
{
	top: 1398px;
}
#mission .subcontenu .titre.mission
{
	top: 44px;
}
#mission .subcontenu .mission
{
	top: 128px;
}
#mission .subcontenu .bouton.route
{
	top: 364px;

	color: #000000;
	background-color: #88F4B7;
	border: none;
	border-radius: 100px;
}
#mission .subcontenu .bouton.retour
{
	top: 590px;
}


/* FORMULAIRE */

#formulaire
{
	/*display: block !important;
	opacity: 1 !important;
	z-index: 999999;*/
}
#formulaire .introduction
{
	top: 342px;
}
#formulaire input,
#formulaire select
{
	width: 560px;
	height: 104px;
	margin: 0 auto;
	padding: 0 28px;
	position: absolute;
	left: 0;
	right: 0;
	top: 648px;

	color: #000000;
	font-size: 32px;

	border: 8px solid #ffffff;
	border-radius: 12px;
	box-sizing: border-box;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#formulaire input:focus,
#formulaire select:focus
{
	outline: none;
}
#formulaire input::placeholder
{
	font-style: italic;
	color: #A1A1A1;
}
#formulaire input.erreur
{
	border: 8px solid #FF0006;
}
#formulaire .select-dotation
{
	width: 560px;
	max-height: 104px;
	margin: 0 auto;
	padding: 0 28px;
	position: absolute;
	left: 0;
	right: 0;
	top: 780px;

	text-align: left;

	background-color: #ffffff;
	border: 8px solid #ffffff;
	border-radius: 12px;
	box-sizing: border-box;
	overflow: hidden;

	z-index: 2;
	cursor: pointer;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#formulaire .select-dotation.erreur
{
	border: 8px solid #FF0006;
}
#formulaire .select-dotation:after
{
	content: "";
	display: block;
	width: 33px;
	height: 20px;
	position: absolute;
	right: 40px;
	top: 35px;

	background-image: url(../img/picto-select-option.png);
	background-repeat: no-repeat;
	background-position: center;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#formulaire .select-dotation.on
{
	max-height: 358px;
}
#formulaire .select-dotation.on:after
{
	transform: rotate(180deg);
}
#formulaire .select-dotation span
{
	line-height: 94px;
}
#formulaire .select-dotation span.off
{
	font-style: italic;
	color: #A1A1A1;
}
#formulaire .select-dotation .option
{
	margin: 20px 0;
	font-weight: bold;
}
#formulaire input.erreur
{
	border: 8px solid #FF0006;
}
#formulaire select
{
	top: 780px;
}
#formulaire select option
{
	font-size: 24px;
}
#formulaire .contenu
{
	width: 576px;
	height: 360px;
	margin: auto;
	padding: 0 56px;
	position: absolute;
	top: 952px;
	left: 0;
	right: 0;

	text-align: left;
	color: #ffffff;
	font-size: 24px;
	line-height: 32px;

	overflow-y: scroll;
}
#formulaire .contenu::-webkit-scrollbar
{
	width:20px;
}
#formulaire .contenu::-webkit-scrollbar-track
{
	background: #2D2D2D;
	border-radius: 20px;
}
#formulaire .contenu::-webkit-scrollbar-thumb
{
	background: #8D8D8D;
	border-radius: 20px;
}
#formulaire .checkbox.accepter
{
	width: fit-content;
	margin: 0;
	padding: 20px 20px 20px 136px;
	position: absolute;
	left: 100px;
	top: 1370px;

	color: #666666;
	font-size: 28px;
	font-weight: 700;
	text-transform: uppercase;

	background-image: url(../img/picto-checkbox-off.png);
	background-position: left center;
	background-repeat: no-repeat;
	cursor: pointer;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#formulaire .checkbox.accepter:before
{
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	position: absolute;
	left: 8px;
	top: 14px;

	background-color: #ffffff;
	border-radius: 44px;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#formulaire .checkbox.accepter.on
{
	color: #ffffff;
	background-image: url(../img/picto-checkbox-on.png);
}
#formulaire .checkbox.accepter.on:before
{
	left: 62px;
	background-color: #88F4B7;
}
#formulaire .bouton.participer
{
	width: 420px;
	top: 1490px;

	color: #000000;
	background-color: #858585;
	border: none;
	border-radius: 100px;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#formulaire .bouton.participer.on
{
	background-color: #88F4B7;
}
#formulaire .message
{
	top: 1630px;

	font-size: 24px;
}


/* CARTE */

#carte
{
	/*display: block !important;
	opacity: 1 !important;
	z-index: 999999;*/

	height: calc(100% - 160px);
	top: 160px;

	overflow: hidden;
}
#carte .carte
{
	width: 4320px;
	height: 4320px;
	position: absolute;

	background-position: left top;
	background-repeat: no-repeat;
	background-size: auto;
	cursor: move;
}
#carte .carte .perso
{
	width: 156px;
	height: 250px;
	position: absolute;
	left: 0px;
	top: 0px;

	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	cursor: move;
}
#carte .carte .point
{
	width: 75px;
	height: 75px;
	position: absolute;

	background-image: url(../img/picto-info.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;

	border-radius: 60px;
	cursor: pointer;
}
#carte .carte .point.ok
{
	background-image: url(../img/picto-ok.png);
	cursor: move;
}
#carte .carte .point.ko
{
	background-image: url(../img/picto-ko.png);
	cursor: move;
}
#carte .carte .trouve
{
	position: absolute;

	border: 10px solid transparent;
	border-radius: 30px;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#carte .carte .trouve:hover
{
	border: 10px solid #ffffff;
}
#carte .carte .trouve.off
{
	border: 10px solid #1CD84E;
}
#carte .carte .anim
{
	position: absolute;

	background-position: center;
	background-repeat: no-repeat;
}
#carte .carte .anim-gif
{
	position: absolute;
	left: 2210px;
	top: 2241px;
}
#carte .popin
{
	width: 540px;
	margin: auto;
	padding: 50px 40px 80px;
	position: absolute;
	left: 0;
	right: 0;
	top: 120px;

	color: #000000;

	background-color: #ffffff;
	box-shadow: 0 0 0 20px rgba(255,255,255,0.3);
	border-radius: 60px;

	opacity: 0;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#carte .popin .titre
{
	position: relative;
	top: 0;

	color: #000000;
}
#carte .popin .question
{
	margin: 30px auto 0px;
	position: relative;
	top: 0;

	color: #000000;
}
#carte .popin .info
{
	width: 60px;
	height: 60px;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -32px;

	background-image: url(../img/picto-info.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;

	border-radius: 60px;
}
#carte .popin .info.ok
{
	bottom: -40px;
	border: 8px solid #ffffff;
	background-image: url(../img/picto-ok.png);
}
#carte .popin .bouton.continuer
{
	margin-top: 50px;
	position: relative;
	top: 0px;

	color: #000000;
	border-color: #000000;
}
#carte .missions
{
	width: 280px;
	padding: 12px 0 8px;
	position: absolute;
	top: 1438px;
	right: 30px;

	color: #ffffff;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;

	line-height: 36px;
	background-color: #000000;
	border-radius: 30px;

	opacity: 0;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#carte .missions.ok
{
	color: #1CD84E;
}
#carte .missions span
{
	margin-left: 2px;
	font-size: 36px;
}
#carte .bouton.retour
{
	width: 120px;
	margin: 0;
	padding: 15px 16px 8px 60px;
	top: 1438px;
	left: 30px;

	line-height: 36px;
	background-color: #000000;
	background-position: left 8px center;

	opacity: 0;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

/* QUIZ */

#quiz
{
	/*display: block !important;
	opacity: 1 !important;
	z-index: 9999999;*/

	height: calc(100% - 160px);
	top: 160px;

	background-color: transparent;
}
.quiz
{
	width: 540px;
	height: fit-content;
	margin: auto;
	padding: 50px 40px 80px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: -120px;

	color: #000000;

	background-color: #ffffff;
	box-shadow: 0 0 0 20px rgba(255,255,255,0.3);
	border-radius: 60px;
}
.quiz .titre
{
	position: relative;
	top: 0;

	color: #000000;
}
.quiz .question
{
	margin: 30px auto 80px;
	position: relative;
	top: 0;

	color: #000000;
}
.quiz .question.info
{
	margin: 30px auto 60px;
	font-size: 28px;

	animation: descend 0.5s;
}
@keyframes descend
{
	0% { top: -50px; opacity: 0 }
	100% { top: 0px; opacity: 1 }
}
.quiz .reponse
{
	width: 320px;
	height: 120px;
	margin: 30px auto;
	padding: 6px 50px 0;
	position: relative;
	top: 0;

	color: #000000;
	font-size: 24px;
	font-weight: 700;

	border: 4px solid #000000;
	border-radius: 100px;
	cursor: pointer;

	display: flex;
	justify-content: center;
    align-items: center;
}
.quiz .reponse.on
{
	border: 4px solid #1CD84E;
	background-color: #1CD84E;
}
.quiz .reponse.off
{
	width: 312px;
	height: 112px;
	border: 8px solid #FF0006;
}
#quiz .bouton.suivant
{
	width: 120px;
	height: 120px;
	padding: 0;
	position: absolute;
	top: auto;
	bottom: -68px;

	background-color: #000000;
	background-image: url(../img/picto-fleche-suivant.png);
	background-position: center;
	background-repeat: no-repeat;
	border: 8px solid #ffffff;
	border-radius: 120px;

	display: none;
	opacity: 0;
}
#quiz .bouton.suivant:after
{
	content: "Suivant";
	width: 280px;
	position: absolute;
	left: -80px;
	bottom: -60px;

	color: #000000;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* SWIPE */

#swipe
{
	/*display: block !important;
	opacity: 1 !important;
	z-index: 9999999;*/

	height: calc(100% - 160px);
	top: 160px;

	background-color: transparent;
}
.swipe,
.justification
{
	width: 540px;
	height: 1090px;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 200px;

	color: #000000;

	background-color: #ffffff;
	box-shadow: 0 0 0 20px rgba(255,255,255,0.3);
	border-radius: 60px;
	z-index: 2;

	opacity: 1;
	cursor: pointer;
	transform-origin: bottom center;
	/*-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;*/
}
.justification
{
	display: none;
	opacity: 0;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.swipe .titre,
.justification .titre
{
	top: 50px;
	color: #000000;
}
.swipe .question
{
	max-width: 450px;
	margin: auto;
	top: 152px;
	color: #000000;
}
.justification .information
{
	max-width: 450px;
	margin: auto;
	top: 362px;
	color: #000000;
}
.swipe .image.illustration
{
	height: 270px;
	top: 430px;
	
	/*background-image: url(../img/swipe/swipe-1-2.jpg);
	background-size: cover;*/
	border-radius: 30px;
}
.swipe .copyright
{
	top: 712px;
	color: #000000;
	font-size: 20px;

}
.justification .image.correction
{
	width: 120px;
	height: 120px;
	top: 190px;
}
.justification .image.correction.ok
{
	background-image: url(../img/picto-correction-ok.png);
}
.justification .image.correction.ko
{
	background-image: url(../img/picto-correction-ko.png);
}
.swipe .image.instruction
{
	width: 304px;
	height: 114px;
	top: 894px;
	
	background-image: url(../img/swipe-instruction.png);
}
.swipe.vrai
{
	left: 200px !important;
	opacity: 0;
	transform: rotate(30deg) !important;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.swipe.faux
{
	left: -200px !important;
	opacity: 0;
	transform: rotate(-30deg) !important;

	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.socle
{
	width: 1046px;
	height: 1046px;
	position: absolute;
	left: -133px;
	top: 1094px;
	
	background-color: #000000;
	border-radius: 1046px;
	z-index: 1;
}
.socle p
{
	top: 304px;

	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 2px;
}
#swipe .bouton.suivant
{
	width: 120px;
	height: 120px;
	padding: 0;
	position: absolute;
	top: 1028px;

	background-color: #ffffff;
	background-image: url(../img/picto-fleche-suivant-noir.png);
	background-position: center;
	background-repeat: no-repeat;
	border: 8px solid #000000;
	border-radius: 120px;
}
#swipe .bouton.suivant:after
{
	content: "Suivant";
	width: 280px;
	position: absolute;
	left: -80px;
	bottom: -60px;

	color: #ffffff;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* CHERCHE ET TROUVE */

#cherche,
#trouve
{
	/*display: block !important;
	opacity: 1 !important;
	z-index: 9999999;*/

	height: calc(100% - 160px);
	top: 160px;

	background-color: transparent;
}
#cherche .cherche,
#trouve .trouve
{
	width: 460px;
	height: fit-content;
	margin: auto;
	padding: 50px 40px 120px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: -120px;

	color: #000000;

	background-color: #ffffff;
	box-shadow: 0 0 0 20px rgba(255,255,255,0.3);
	border-radius: 60px;
}
#cherche .trouve
{
	display: none;
}
#cherche .cherche .titre,
#trouve .trouve .titre
{
	position: relative;
	top: 0;

	color: #000000;
}
#cherche .cherche .question,
#trouve .trouve .question
{
	margin: 30px auto 80px;
	position: relative;
	top: 0;

	color: #000000;
}
#cherche .cherche .image,
#trouve .trouve .image
{
	width: 300px;
	height: 300px;
	position: relative;
	
	background-size: cover;

	transform: rotate(5deg);
	border: 20px solid #EBEBEB;
    border-bottom: 100px solid #EBEBEB;
}
#cherche .bouton.suivant,
#trouve .bouton.suivant
{
	width: 120px;
	height: 120px;
	padding: 0;
	position: absolute;
	top: auto;
	bottom: -68px;

	background-color: #000000;
	background-image: url(../img/picto-fleche-suivant.png);
	background-position: center;
	background-repeat: no-repeat;
	border: 8px solid #ffffff;
	border-radius: 120px;
}
#cherche .bouton.suivant:after,
#trouve .bouton.suivant:after
{
	content: "Chercher";
	width: 280px;
	position: absolute;
	left: -80px;
	bottom: -60px;

	color: #000000;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 2px;
}
#cherche .trouve .bouton.suivant:after,
#trouve .trouve .bouton.suivant:after
{
	content: "Suivant";
}