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

body
{
	width: 100%;
	height: 100%;
	position: relative;
	
	color: #ffffff;
	font-size: 32px;
	font-family: "FranceTV Brown", sans-serif;
	text-align: center;
	
	background-color: #3503B4;
}

img
{  
	margin: 0;
	padding: 0;
	border: none;
	display: block;
}

p
{
	margin: 20px auto;
	font-size: 40px;
	text-align: left;
}

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

div
{
	visibility: visible;

	outline: 0px solid #ffffff;
	outline-offset: 0px;
}
body:not(.using-mouse) div:focus,
body:not(.using-mouse) button:focus
{
	outline: 10px solid #ffffff;
	outline-offset: 10px;
	border: 0 !important;
}

i, em
{
	font-style: italic;
}
b, strong
{
	font-weight: 700;
}
.light
{
	font-weight: 300;
}
sup
{
    font-size: smaller;
    position: relative;
    top: -18px;
}

button
{
	all: unset;
	cursor: pointer;
}

h1
{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top: 30px;
	line-height: 110px;

	font-size: 68px;
	text-transform: uppercase;
	font-family: "Sigmar", sans-serif;

	opacity: 1;
	transform: scale(1);

	transition: all 1000ms ease-in-out;
}
h2, h3
{
	width: fit-content;
	height: 110px;
	padding: 0 60px;
	position: relative;

	font-size: 50px;
	font-family: "Sigmar", sans-serif;
	text-transform: uppercase;

	display: inline-flex;
	justify-content: center;
	align-items: center;

	border-radius: 60px;
	background-color: #001E5A;
}

.titre
{
	width: fit-content;
	height: 110px;
	margin: auto;
	position: absolute;
	top: -230px;
	left: 0;
	right: 0;

	transition: all 1000ms ease-in-out;
}
.titre .picto
{
	width: 125px;
	height: 110px;
	position: absolute;
	left: -119px;

	background-image: url(../img/fond-titre.png);
	background-position: center left;
	background-repeat: no-repeat;
	background-size: cover;
}
.titre .picto span
{
	content: "";
	width: 110px;
	height: 110px;
	position: absolute;
	left: 0;
	top: 0;

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


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

#site
{
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	left: 0;
	top: 0;

	background-color: #3503B4;

	transform-origin: left top;
	overflow: hidden;
}

#rotation
{
	width: 0;
	height: 0;
	margin: auto;
	position: fixed;
	left: 0;
	top: 0;

	background-color: #3503B4;
	z-index: 9999;

	display: none;
    align-items: flex-end;
    justify-content: center;

    opacity: 0;
	visibility: hidden;
}
#rotation.show
{
	width: 100%;
	height: 100%;
	opacity: 1 !important;
	display: flex !important;
	visibility: visible !important;
}
#rotation canvas
{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
}
#rotation p
{
	padding: 10px 30px;
	line-height: 30px;

	font-size: 20px;
	font-style: italic;
	text-align: center;
}

.screen
{
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	left: 0;
	top: 0;

	background-color: #3503B4;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	z-index: 1;

	opacity: 0;
	display: none;
}


#chargement
{
	display: flex;
	opacity: 1;

	background-repeat: no-repeat;
	background-position: center;
	justify-content: center;
    align-items: center;
    flex-direction: column;
}
#chargement .info
{
	position: absolute;
	right: 20px;
	bottom: 20px;
}
#chargement .info p
{
	color: #ffffff;
	font-size: 14px;
	text-align: right;
	margin: 0;
}


/* ------ */
/* HEADER */
/* ------ */

#header
{
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;

	z-index: 100;

	-webkit-transition: top 500ms ease-in-out;
	transition: top 500ms ease-in-out;
}
#header.hide
{
	top: -200px;
}
#header .menu
{
	width: 100%;
	position: absolute;
	left: 0px;
	top: 30px;
}

.bouton
{
	width: 110px;
	height: 110px;
	position: absolute;

	background-position: center;
	background-repeat: no-repeat;

	border-radius: 110px;
	overflow: hidden;
    cursor: pointer;

	display: flex;
	align-items: center;
    justify-content: center;

    -webkit-transition: left 500ms ease-in-out;
	transition: left 500ms ease-in-out;
}
.bouton.accueil
{
	left: 30px;
	background-image: url(../img/bouton-accueil.png);
}
.bouton.audio
{
	left: 170px;
	background-image: url(../img/bouton-audio.png);
}
.bouton.audio.mute
{
	background-image: url(../img/bouton-audio-mute.png);
}
.bouton.albums
{
	width: 125px;
	right: 30px;
	border-radius: 20px;
	background-image: url(../img/bouton-albums.png);
}
.bouton.information
{
	right: 180px;
	border-radius: 20px;
	background-image: url(../img/bouton-information.png);
}
.bouton.off
{
	opacity: 0.3;
}

#header .intro
{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top: 140px;

	text-align: center;

	opacity: 1;
	transition: all 1000ms ease-in-out;
}
#header.periode h1,
#header.periode .intro
{
	opacity: 0;
}
#header.periode .titre
{
	top: 30px;
}


/* ------- */
/* ACCUEIL */
/* ------- */

#accueil
{
	background-image: url(../img/timeline.png);
	background-position: left 0 bottom 170px;
	background-repeat: no-repeat;
	background-size: auto;
}
#accueil .logo
{
	display: block;
	margin: 65px auto;
}

#accueil .menu
{
	width: 100%;
	position: absolute;
	top: 258px;
	left: 0;
}
#accueil .menu div
{
	position: absolute;
	top: 0;

	color: #ffffff;
	font-size: 35px;
	font-family: "Sigmar", sans-serif;

	cursor: pointer;
	user-select: none;
	border-radius: 20px;

	display: flex;
	justify-content: center;
	flex-direction: column;
    align-items: center;

    opacity: 0;

    transition: transform 200ms ease-in-out;
}
#accueil .menu div.show
{
	animation: fadeIn 0.8s ease forwards;
}
@keyframes fadeIn
{
    from {
        opacity: 0;
        margin-top: -20px;
    }
    to {
        opacity: 1;
       	margin-top: 0;
    }
}
#accueil .menu div:hover,
#chapitre .programme div:hover
{
	transform: scale(1.1);
}
#accueil .menu div[data-item="antiquite"]
{
	width: 235px;
	left: 41px;
	top: 28px;

	animation-delay: 0s;
}
#accueil .menu div[data-item="moyen-age"]
{
	width: 251px;
	left: 326px;
	top: 107px;

	animation-delay: 0.5s;
}
#accueil .menu div[data-item="temps-modernes"]
{
	width: 244px;
	left: 616px;

	animation-delay: 1s;
}
#accueil .menu div[data-item="epoque-contemporaine"]
{
	width: 282px;
	left: 920px;
	top: 56px;

	animation-delay: 1.5s;
}
#accueil .menu div[data-item="multi-periodes"]
{
	width: 308px;
	left: 1370px;
	top: 170px;

	animation-delay: 2s;
}
#accueil .menu img
{
	margin-bottom: 25px;
}
#accueil .menu .periode
{
	margin: 0;
	text-align: center;
}

#accueil .lien
{
	width: fit-content;
	padding: 10px;
	position: absolute;
	bottom: 40px;
	right: 120px;

	color: #FFFFFF;
	font-weight: 400;
	font-size: 32px;
	text-decoration: underline;
	text-underline-offset: 5px;

	border-radius: 10px;
	cursor: pointer;
}
#accueil .lien.reset
{
	left: 0;
	right: 0;
	margin: auto;
	padding-left: 50px;

	background-image: url(../img/picto-reinit.png);
	background-position: left center;
	background-repeat: no-repeat;
}

/* ----- */
/* POPIN */
/* ----- */

.popin
{
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;

	background-color: rgba(53, 3, 180, 0.8);
	backdrop-filter: blur(5px);
	z-index: 101;
	
	opacity: 0;
}
.popin .content
{
	width: 1240px;
	height: 590px;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.popin.accueil .content
{
	height: 340px;
}
.popin .content video
{
	width: 100%;
	height: 100%;
	background-color: #000;
}
.popin .fermer,
.popin .retour
{
	width: 86px;
	height: 86px;
	margin: auto;
	position: absolute;
	bottom: 50px;
	left: 0;
	right: 0;

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

	background-image: url(../img/bouton-fermer.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	border-radius: 86px;
    cursor: pointer;
    z-index: 1;
}
.popin .retour
{
	background-image: url(../img/bouton-retour.png);
}
.popin .fermer:hover,
.popin .retour:hover
{
	background-color: #0053F9;
}
.popin h2.simple
{
	margin-bottom: 80px;
	text-transform: none;
	background-color: transparent;
}
.popin p
{
	font-size: 38px;
	text-align: center;
}

.cta
{
	width: 300px;
	height: 110px;
	margin: 80px 25px 80px;
	padding: 0 60px;

	font-size: 38px;
	font-weight: 700;
	color: #34D5D8;

	display: inline-flex;
	justify-content: center;
	align-items: center;

	border-radius: 60px;
	background-color: #001E5A;
}
.cta:last-child
{
	color: #001E5A;
	background-color: #34D5D8;
}
.cta:hover
{
	color: #ffffff !important;
	background-color: #0053F9 !important;
}

.popin.carte-quiz h2.simple,
.popin.deck-quiz h2.simple
{
	margin: 20px auto 10px;
}
.popin.carte-quiz .carte
{
	margin: auto;

    transform: scale(0.8);
    transform-origin: top center;
}
.popin.deck-quiz .carte
{
	position: absolute;
    transform-origin: center;
}
.popin.deck-quiz .carte:hover
{
	transform: scale(0.7) rotate(0deg) !important;
	z-index: 10;
}
.popin.deck-quiz .carte-1
{
	left: -20px;
	top: 212px;
	transform: scale(0.6) rotate(-6deg) !important;
	z-index: 3;
}
.popin.deck-quiz .carte-2
{
	left: 300px;
	top: 125px;
	transform: scale(0.6) rotate(7deg) !important;
}
.popin.deck-quiz .carte-3
{
	left: 610px;
	top: 24px;
	transform: scale(0.6) rotate(-8deg) !important;
}
.popin.deck-quiz .carte-4
{
	left: 920px;
	top: 106px;
	transform: scale(0.6) rotate(8deg) !important;
	z-index: 3;
}
.popin.deck-quiz .carte-5
{
	left: 1230px;
	top: 230px;
	transform: scale(0.6) rotate(20deg) !important;
}

.popin.carte-quiz .cta
{
	position: relative;
	top: -175px;
}
.popin.deck-quiz .cta
{
	width: fit-content;
	margin: auto;
	position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
}

.popin.carte-info .fermer
{
	position: absolute;
	top: 42px;
	bottom: auto;
	left: auto;
	right: 120px;
}
.popin.carte-info .carte
{
	position: absolute;
	top: 109px;
	left: 100px;
}
.popin.carte-info .infos
{
	width: 860px;
	height: 600px;
	padding: 50px;
	position: absolute;
	top: 185px;
	left: 712px;

	display: flex;
    flex-direction: column;

	background-color: #3503B4;
	border-radius: 45px;

}
.popin.carte-info h2
{
	height: auto;
	margin: 0 0 40px 0;
	padding: 0;
	position: relative;

	font-size: 45px;
	text-transform: uppercase;

	text-align: left;
	justify-content: flex-start;
}
.popin.carte-info .slider
{
	width: 860px;
	position: relative;

	display: flex;
	gap: 150px;
}
.popin.carte-info .info
{
	width: 860px;
	min-width: 860px;
	margin: 0;

	position: relative;
	left: 0;

	text-align: left;
	line-height: 45px;

	transition: all 500ms ease-in-out;
}
.popin.carte-info .nav
{
	position: absolute;
	bottom: 50px;
	left: 50px;

	display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.popin.carte-info .nav .arrow
{
	width: 110px;
    height: 110px;

    background-image: url(../img/bouton-nav-droite.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 110px;

    overflow: hidden;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}
.popin.carte-info .nav .arrow.prev
{
    background-image: url(../img/bouton-nav-gauche.png);
}
.popin.carte-info .nav .arrow.off,
.popin.carte-info .nav .arrow.off:hover
{
	opacity: 0.3;
}
.popin.carte-info .nav .point
{
    width: 25px;
    height: 25px;
    background-color: #FE7B21;
    border-radius: 30px;

    cursor: pointer;
    transition: all 200ms ease-in-out;
}
.popin.carte-info .nav .point.on
{
    background-color: #34D5D8;
}
.popin.carte-info .carte .annee
{
    display: none;
}


/* ------ */
/* ALBUMS */
/* ------ */

.popin.albums .fermer,
.popin.albums .retour
{
	position: absolute;
	top: 42px;
	bottom: auto;
	left: auto;
	right: 120px;
}
.popin.albums .retour
{
	left: 120px;
	right: auto;
}
.popin.albums .titre.show
{
	top: 30px;
}
.popin.albums .titre .picto span
{
	background-image: url(../img/picto-albums.png);
	transition: all 500ms ease-in-out;
}
.popin.albums .menu-album
{
	margin-top: 270px;

	display: flex;
	justify-content: center;
    align-items: center;
    gap: 36px;
}
.popin.albums .menu-album div
{
	position: relative;
	border-radius: 20px;
	cursor: pointer;
	top: 0;

	transition: top 200ms ease-in-out;
}
.popin.albums .menu-album div:hover
{
	top: -20px;
}
.popin.albums .menu-album div.exit
{
	top: -800px;
}
.popin.albums .menu-album .periode
{
	width: 336px;
	height: 113px;
	margin: 0;
	position: absolute;
	left: 0;
	top: 240px;

	font-size: 38px;
	font-family: "Sigmar", sans-serif;

	display: flex;
	justify-content: center;
    align-items: center;
}
.popin.albums .menu-album .compteur
{
	display: block;
	width: 336px;
	margin: 0;
	position: absolute;
	left: 0;
	bottom: 20px;

	font-size: 35px;
	font-weight: 700;
	color: #000000;
}

.popin.albums .collection
{
	width: 1500px;
	height: 780px;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 170px;

	overflow: hidden;
	opacity: 0;

	display: flex;
}
.popin.albums .collection .page
{
	width: 100%;
	min-width: 100%;
	height: 100%;
	position: relative;

	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    transition: all 500ms ease;

    background-image: url(../img/frise-album.png), url(../img/frise-album.png);
    background-position: center top 304px, center bottom -4px;
    background-repeat: no-repeat;
    background-size: contain;
}
.popin.albums .collection .page .page-wrap
{
	width: 100%;
	height: 720px;
	position: relative;

	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 58px;
}
.popin.albums .collection .page .carte-wrap
{
	/*width: 300px;
	height: 390px;*/

	width: 208px;
	height: 295px;

	display: flex;
	justify-content: center;
	align-items: center;
}
.popin.albums .collection .page .carte-wrap .carte
{
	transform: scale(0.38);
	transform-origin: center;
	overflow: visible;
}
.popin.albums .collection .page .carte-wrap .carte.off
{
	position: relative;

	background-image: none;
    background-color: transparent;
	border-width: 15px;
    border-style: dashed;

	display: flex;
	justify-content: center;
    align-items: center;
    overflow: visible;
}
.popin.albums .collection .page .carte-wrap .carte .annee
{
	display: block;
	margin: auto;
	position: absolute;
	bottom: -200px;	
    left: 0;
    right: 0;

	font-size: 80px;
	font-weight: bold;
}
.popin.albums .collection .page .carte-wrap .carte .num
{
	font-size: 120px;
	font-weight: bold;
}
.popin.albums .collection .page .carte-wrap .carte:not(.off):hover
{
	border: 10px solid #ffffff;
	cursor: pointer;
}

.popin.albums .arrow
{
	width: 110px;
    height: 110px;
    position: absolute;
    top: 510px;
    right: 90px;

    background-image: url(../img/bouton-nav-album-droite.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 110px;

    overflow: hidden;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.popin.albums .arrow.prev
{
	left: 90px;
    background-image: url(../img/bouton-nav-album-gauche.png);
}
.popin.albums .arrow.off,
.popin.albums .arrow.off:hover
{
	opacity: 0.3;
}

/* -------- */
/* PERIODES */
/* -------- */

/* ANTIQUITE */

.antiquite.titre .picto span
{
	background-image: url(../img/icon-antiquite.png) !important;
}
.antiquite .intitule,
.antiquite.carte,
.antiquite .place:after,
.antiquite .place .date:before
{
	background-color: #4AD956;
}
.antiquite .timeline .place
{
	border-color: #4AD956 !important;
}
.antiquite .carte-wrap .carte.off
{
	border-color: #4AD956;
}
.antiquite .carte-wrap .carte .num
{
	color: #4AD956;
}

/* MOYEN AGE */

.moyen-age.titre .picto span
{
	background-image: url(../img/icon-moyen-age.png) !important;
}
.moyen-age .intitule,
.moyen-age.carte,
.moyen-age .place:after,
.moyen-age .place .date:before
{
	background-color: #FF7B61;
}
.moyen-age .timeline .place
{
	border-color: #FF7B61 !important;
}
/*.moyen-age .timeline .place .date
{
	color: #ffffff !important;
}*/
.moyen-age .carte-wrap .carte .num
{
	color: #FF7B61;
}
.moyen-age .carte-wrap .carte.off
{
	border-color: #FF7B61;
}

/* TEMPS MODERNES */

.temps-modernes.titre .picto span
{
	background-image: url(../img/icon-temps-modernes.png) !important;
}
.temps-modernes .intitule,
.temps-modernes.carte,
.temps-modernes .place:after,
.temps-modernes .place .date:before
{
	background-color: #FE83ED;
}
.temps-modernes .timeline .place
{
	border-color: #FE83ED !important;
}
.temps-modernes .carte-wrap .carte.off
{
	border-color: #FE83ED;
}
.temps-modernes .carte-wrap .carte .num
{
	color: #FE83ED;
}

/* EPOQUE CONTEMPORAINE */

.epoque-contemporaine.titre .picto span
{
	background-image: url(../img/icon-epoque-contemporaine.png) !important;
}
.epoque-contemporaine .intitule,
.epoque-contemporaine.carte,
.epoque-contemporaine .place:after,
.epoque-contemporaine .place .date:before
{
	background-color: #FFF200;
}
.epoque-contemporaine .timeline .place
{
	border-color: #FFF200 !important;
}
.epoque-contemporaine .carte-wrap .carte.off
{
	border-color: #FFF200;
}
.epoque-contemporaine .carte-wrap .carte .num
{
	color: #FFF200;
}

/* MULTI PERIODES */

.multi-periodes.titre .picto span
{
	background-image: url(../img/icon-multi-periodes.png) !important;
}
.multi-periodes .intitule
{
	color: #ffffff !important;
	background-color: #001E5A;
}
.multi-periodes .place:after,
.multi-periodes .place .date:before
{
	background-color: #ffffff;
}
#frise.multi-periodes .timeline .place .date
{
	color: #ffffff;
}
.multi-periodes .intitule p
{
	color: #ffffff;
}


/* ----- */
/* CARTE */
/* ----- */

.carte
{
	width: 528px;
	min-width: 528px;
	max-width: 528px;
	height: 756px;
	min-height: 756px;
	max-height: 756px;
	position: relative;
	left: 0;
	top: 0;

	border: 10px solid #34D5D8;
	border-radius: 45px;

	background-image: url(../img/motif-carte.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 2;

	transition: all 0.5s cubic-bezier(.22,.61,.36,1);
	transform-origin: top left;
	will-change: transform;
	overflow: hidden;
	user-select: none;
}
body:not(.using-mouse) .carte:focus
{
	border: 10px solid #34D5D8 !important;

	outline: 30px solid #ffffff;
    outline-offset: 20px;
}
.carte p.periode
{
	width: 100%;
	margin: 20px auto;

	font-size: 38px;
	font-family: "Sigmar", sans-serif;
	text-transform: uppercase;
	text-align: center;
}
.carte img.periode
{
	width: 100%;
	height: 60px;
	margin: 6px auto;

	display: block;
	object-fit: none;
	object-position: center;
}
.carte .illustration
{
	width: 468px;
	height: 400px;
	margin: auto;

	display: block;
	object-fit: cover;
	object-position: top center;
	border-radius: 20px;
}
.carte .nom
{
	width: calc(100% - 60px);
	height: 60px;
	margin: 20px auto;
	padding: 0 30px;

	font-size: 30px;
	color: #3503B4;
	font-family: "Sigmar", sans-serif;
	text-transform: uppercase;
	text-align: center;

	opacity: 0;
	transform: scale(2.0);
	transition: all 500ms ease-in-out;

	display: flex;
    align-items: center;
    justify-content: center;
}
.carte .nom.show
{
	opacity: 1;
	transform: scale(1.0);
}
.carte .nom sup
{
	top: -12px;
}
.carte .niveaux
{
	width: 468px;
	margin: auto;
	position: absolute;
    left: 0;
    right: 0;
    bottom: -180px;

    transition: bottom 1000ms ease-in-out;
}
.carte .niveaux.show
{
	bottom: 10px;
}
.carte .niveaux li
{
	padding: 18px 0 10px;

	color: #3503B4;
	font-size: 30px;
	font-weight: bold;
	text-align: left;

	border-bottom: 2px solid #3503B4;

	background-position: center right;
	background-repeat: no-repeat;
}
.antiquite.carte .niveaux li
{
	background-image: url(../img/icon-progression-antiquite.png);
}
.antiquite.carte .niveaux li.ok
{
	background-image: url(../img/icon-progression-antiquite-ok.png);
}
.moyen-age.carte .niveaux li
{
	background-image: url(../img/icon-progression-moyen-age.png);
}
.moyen-age.carte .niveaux li.ok
{
	background-image: url(../img/icon-progression-moyen-age-ok.png);
}
.temps-modernes.carte .niveaux li
{
	background-image: url(../img/icon-progression-temps-modernes.png);
}
.temps-modernes.carte .niveaux li.ok
{
	background-image: url(../img/icon-progression-temps-modernes-ok.png);
}
.epoque-contemporaine.carte .niveaux li
{
	background-image: url(../img/icon-progression-epoque-contemporaine.png);
}
.epoque-contemporaine.carte .niveaux li.ok
{
	background-image: url(../img/icon-progression-epoque-contemporaine-ok.png);
}
.carte .niveaux .g
{
	border-bottom: none;
}


/* ---- */
/* QUIZ */
/* ---- */

#quiz .question
{
	opacity: 0;
}

#quiz .question .carte
{
	position: absolute;
	top: 190px;
	left: 100px;
}

#quiz .question .indice
{
	width: 475px;
	height: 180px;
	position: absolute;
	top: 755px;
	left: 141px;

	z-index: 3;
}
#quiz .question .indice .bouton
{
	content: "";
	display: block;
	width: 110px;
	height: 110px;
	margin: auto;
	position: absolute;
	top: -60px;
	left: 0;
	right: 0;

	background-image: url(../img/bouton-indice.png);
	background-position: center;
	background-repeat: no-repeat;

	border-radius: 110px;
    cursor: pointer;
    z-index: 1;
}
#quiz .question .indice .texte
{
	height: calc(100% - 60px);
	padding: 30px 25px;
	position: relative;
	top: 300px;

	font-size: 30px;
	text-align: left;
	line-height: 38px;

	border-radius: 30px;
	background-color: #3503B4;
	overflow: visible;

	display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    transition: top 500ms ease-in-out;
}
#quiz .question .indice .texte sup
{
	top: -12px;
}
#quiz .question .indice .texte p
{
	margin: 0;
	font-size: 30px;
	line-height: 38px;
}
#quiz .question .carte[data-id='37'] + .indice .texte p
{
	font-size: 29px;
}
#quiz .question .indice.long .texte p
{
	font-size: 25px;
	line-height: 30px;
}
#quiz .question .indice .texte.show
{
	top: 0;
}
#quiz .question .indice span
{
	margin-bottom: 4px;
	font-size: 30px;
    line-height: 36px;
	color: #FFF200;
	font-weight: bold;
	text-transform: uppercase;
}

#quiz .question .intitule
{
	width: 890px;
	height: 150px;
	padding: 0 20px;
	position: absolute;
	top: 190px;
	right: 120px;

	color: #001E5A;
	font-family: "Sigmar", sans-serif;
	text-transform: none;
	font-size: 38px;
	line-height: 46px;
	border-radius: 30px;

	display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}
#quiz .question .intitule p
{
	margin: 0;
	text-align: center;
	font-size: 38px;
}
#quiz .question .reponses
{
	width: 930px;
	position: absolute;
	top: 364px;
	right: 120px;

	display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}
#quiz .question .reponses button
{
	width: calc(100% - 40px);
	height: 100px;
	padding: 0 20px;

	color: #0000DF;
	font-size: 36px;
	font-weight: 700;
	line-height: 40px;

	border-radius: 60px;
	background-color: #ffffff;
}
#quiz .question .reponses button:not(.off):not(.erreur):hover
{
	color: #001E5A;
	background-color: #E1FFBD;
}
#quiz .question .reponses button.off
{
	cursor: default;
}
#quiz .question .reponses button.correct
{
	color: #001E5A;
	background-color: #E1FFBD;

	animation: goodFlash 0.4s ease, goodScale 0.4s ease;
}
@keyframes goodFlash
{
    0%   { background: #E1FFBD; }
    50%  { background: #82D800; }
    100% { background: #E1FFBD; }
}
@keyframes goodScale
{
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
#quiz .question .reponses button.erreur
{
	color: #ffffff;
	background-color: #B10000;
	cursor: default;

	animation: shake 0.4s ease;
}
@keyframes shake
{
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-6px); }
    40%  { transform: translateX(6px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}
#quiz .question .reponses button.reset
{
	transition: all 500ms ease-in-out;
	animation: shake 0.4s ease;
}

#quiz .deck
{
	width: 930px;
	height: 213px;
	position: absolute;
	bottom: 30px;
	right: 120px;

	display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
#quiz .deck .place
{
	width: 139px;
	height: 205px;
	position: relative;
	left: -2000px;

	border: 10px solid #001E5A;
	border-radius: 13px;
	background-color: #2A0290;
}
#quiz .deck.show .place
{
	animation: fadeInPlace 0.8s ease forwards;
}
@keyframes fadeInPlace
{
    from {
        left: -2000px;
    }
    to {
        left: 0;
    }
}

#quiz .deck.show .place-1
{
	animation-delay: 2s;
}
#quiz .deck.show .place-2
{
	animation-delay: 1.5s;
}
#quiz .deck.show .place-3
{
	animation-delay: 1s;
}
#quiz .deck.show .place-4
{
	animation-delay: 0.5s;
}
#quiz .deck.show .place-5
{
	animation-delay: 0s;
}

#quiz .deck .place .carte
{
	cursor: pointer;
}
#quiz .deck .place .carte:hover
{
	border: 10px solid #ffffff;
	cursor: pointer;
}

/* ----- */
/* FRISE */
/* ----- */

#frise .instruction
{
	margin: 0 auto;
	position: absolute;
	top: 160px;
    left: 0;
    right: 0;

    text-align: center;
}

#frise .carte
{
	position: absolute;
	/*transform: scale(0.4) translateX(-50%) !important;*/
	left: 20%;
	top: 240px;

	touch-action: none;
	cursor: grab;
}
#frise .carte:nth-child(even)
{
	top: 280px;
}
#frise .carte.dragging
{
	transition: none;
	cursor: grabbing;
	z-index: 1000;
}
#frise .carte.correct
{
	box-shadow: 0 0 0 20px #82D800;
}
#frise .carte.erreur
{
	box-shadow: 0 0 0 20px #B10000;
}
#frise .carte.placed
{
	touch-action: auto;
	cursor: pointer;
}
#frise .carte.placed:hover
{
	border: 10px solid #ffffff;
}
#frise .carte.selected
{
	box-shadow: 0 0 100px 20px #fff;
}
body:not(.using-mouse) #frise .carte:focus
{
	outline: 25px solid #ffffff;
    outline-offset: 25px;
}
#frise .carte .nom
{
	height: 210px;
	font-size: 48px;
	line-height: 52px;
}
#frise .carte .niveaux
{
	display: none;
}

#frise .timeline
{
	display: flex;
	justify-content: space-evenly;

	width: 100%;
	height: 330px;
	position: absolute;
	left: 0;
	bottom: 0;

	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: auto;
}
#frise .timeline .place
{
	width: 147px;
	height: 211px;
	position: relative;

	border-radius: 12px;
	border-width: 6px;
    border-style: dashed;
}
#frise .timeline .place:after
{
	content: "";
	display: block;
	width: 25px;
	height: 25px;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -15px;

	border-radius: 25px;
	z-index: 2000;
}
body:not(.using-mouse) .timeline .place:focus
{
	border-radius: 12px !important;
	border-width: 6px !important;
    border-style: dashed !important;	
}
#frise .place.erreur
{
	border-color: #B10000;
	animation: shake 0.4s ease;
}
#frise .timeline .place .date
{
    width: 100%;
    margin: 0;
    position: absolute;
    bottom: -100px;

    color: #001E5A;
    font-weight: bold;
    text-align: center;
}
#frise .timeline .place .date:before
{
	content: "";
	display: block;
	width: 6px;
	height: 28px;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: -50px;
}
#frise .timeline .place .alert
{
    width: 310px;
    margin: 0;
    padding: 15px 0;
    position: absolute;
    left: -75px;
    top: 120px;
    
    line-height: 30px;
    color: #001E5A;
    font-size: 26px;
    text-align: center;
    font-family: "Sigmar", sans-serif;
    text-transform: uppercase;
    
    border-radius: 3px;
    z-index: 20000;
    opacity: 1;

    animation: feedbackPop 2.5s ease-out forwards;
}
@keyframes feedbackPop
{
	0% {
		opacity: 0;
		transform: scale(0.6);
	}
	15% {
		opacity: 1;
		transform: scale(1.3);
	}
	25% {
		opacity: 1;
		transform: scale(1);
	}
	85% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(0.6);
	}
}
#frise .timeline .place.correct .alert
{
    color: #001E5A;
    background-color: #82D800;
}
#frise .timeline .place.erreur .alert
{
    color: #FFFFFF;
    font-size: 22px;
    background-color: #B10000;
}
#frise .fin-frise
{
	margin-top: 222px;
	opacity: 0;

	display: flex;
    flex-direction: column;
    align-items: center;
}
#frise h2
{
	line-height: 62px;
	background-color: transparent;
    text-transform: none;
}
#frise .cta
{
	width: fit-content;
}


/* ---------- */
/* GEOGRAPHIE */
/* ---------- */

#geo .zone
{
	width: 1020px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;

	background-color: #00A8DB;
	overflow: hidden;

	display: flex;
}
#geo .zone .cartographie
{
	width: 100%;
	min-width: 100%;
	height: 100%;
	position: relative;
	left: 100%;

	background-repeat: no-repeat;
	background-position: center;

	transition: left 1000ms ease-in-out;
}
#geo .zone .cartographie .place
{
	width: 147px;
	height: 209px;
	position: absolute;

	background-color: rgba(53, 3, 180, 0.6);
	border-radius: 12px;
    outline: 6px dashed #001E5A;
    cursor: pointer;
}
#geo .zone .cartographie .place:hover
{
	outline: 6px dashed #ffffff;
}
#geo .zone .cartographie .place.correct
{
	cursor: auto;
	outline: 6px solid #001E5A !important;
}
#geo .zone .cartographie .place.erreur
{
	/*cursor: auto;
	opacity: 0.2;
	outline: 6px dashed #001E5A !important;*/

	animation: shake 0.4s ease;
}
#geo .zone .cartographie .place:before
{
	content: "";
	display: block;
	width: 100px;
	height: 6px;
	position: absolute;
	left: 0;
	top: 0;

	border-top: 6px dashed #001E5A;
	transform-origin: top left;
}
#geo .zone .cartographie .place.haut:before
{
	top: calc(100% + 6px);
	left: calc(50% + 6px);
	transform: rotate(90deg);
}
#geo .zone .cartographie .place.bas:before
{
	top: -106px;
	left: calc(50% + 6px);
	transform: rotate(90deg);
}
#geo .zone .cartographie .place.gauche:before
{
	top: 50%;
	left: calc(100% + 6px);
}
#geo .zone .cartographie .place.droite:before
{
	top: 50%;
	left: -106px;
}
#geo .zone .cartographie .place:after
{
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	position: absolute;
	left: 0;
	top: 0;

	border: 5px solid #001E5A;
	border-radius: 25px;
}
#geo .zone .cartographie .place.haut:after
{
	top: calc(100% + 93px);
	left: calc(50% - 10px);
}
#geo .zone .cartographie .place.bas:after
{
	top: -117px;
	left: calc(50% - 10px);
}
#geo .zone .cartographie .place.gauche:after
{
	top: calc(50% - 10px);
	left: calc(100% + 92px);
}
#geo .zone .cartographie .place.droite:after
{
	top: calc(50% - 10px);
	left: -117px;
}
#geo .zone .overlay
{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;

	display: flex;
	align-items: center;
    justify-content: center;

    opacity: 0;
    z-index: 88888888;
}
#geo .zone .overlay.erreur
{
	background-color: rgba(255, 0, 0, 0.6);
}
#geo .zone .overlay.correct
{
	background-color: rgba(130, 216, 0, 0.30);
}
#geo .zone .overlay p
{
	padding: 20px;
	font-size: 50px;
	text-transform: uppercase;
	font-family: "Sigmar", sans-serif;

	background-color: #ffffff;
	transform: scale(2.0) rotate(-6deg);
	opacity: 0;

	transition: all 500ms ease-in-out;
	z-index: 2000;
}
#geo .zone .overlay p.show
{
	transform: scale(1.0) rotate(-6deg);
	opacity: 1;
}
#geo .zone .overlay.erreur p
{
	color: #B10000;
}
#geo .zone .overlay.correct p
{
	color: #001E5A;
	background-color: #96FA00;
}
#geo .zone .carte-reponse
{
	position: absolute;
	left: 125%;
	top: 38%;
}

#geo .deck
{
	width: 750px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;

	background-color: #3503B4;
}
#geo .deck .instruction
{
	width: 500px;
	margin: 0 auto;
	position: absolute;
	top: 870px;
    left: 56px;

    text-align: center;
}
#geo .deck .carte
{
	position: absolute;
	left: 610px;
	top: 192px;

	opacity: 0.3;
}
#geo .deck .carte.active
{
	opacity: 1;
}
#geo .carte.active:hover
{
	border: 10px solid #ffffff;
	cursor: pointer;
}
#geo .deck .carte .nom,
#geo .zone .carte .nom
{
	height: 210px;
	font-size: 48px;
	line-height: 52px;
}
#geo .deck .carte .niveaux,
#geo .zone .carte .niveaux
{
	display: none;
}

#geo .deck .carte.carte-question
{
	top: -700px;
	left: 90px;
	transform: scale(0.8);
	opacity: 1;
}
#geo .deck .carte.carte-question .nom
{
	height: 110px;
	font-size: 30px;
	line-height: 38px;
}
#geo .deck .carte.carte-question .localisation
{
	width: calc(100% - 100px);
	height: 110px;
	padding: 0 25px;
	margin: auto;
	position: absolute;
	bottom: -300px;
	left: 0;
	right: 0;

	font-size: 25px;
	text-align: left;
	line-height: 30px;

	border-radius: 30px;
	background-color: #3503B4;
	overflow: visible;

	display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    transition: bottom 500ms ease-in-out;
}
#geo .deck .carte.carte-question .localisation.show
{
	bottom: 25px;
}
#geo .deck .carte.carte-question .localisation span
{
	font-size: 30px;
    line-height: 36px;
	color: #FFF200;
	font-weight: bold;
	text-transform: uppercase;
}

#geo .fin-geo
{
	height: 100%;
	opacity: 0;
}
#geo h2
{
	margin-top: 250px;
	line-height: 62px;
	background-color: transparent;
    text-transform: none;
}
#geo .cta
{
	width: 460px;
	margin: 20px auto;
	position: relative;
	top: 140px;
}
#geo .cta.suivant
{
	color: #001E5A;
	background-color: #FE83ED;
}


#geo .deck .carte.carte-question.hide
{
	animation: fadeOutCarte 0.5s ease forwards;
}
@keyframes fadeOutCarte
{
    from {
        top: 192px;
    }
    to {
        top: 1092px;
    }
}

#geo .deck .carte-question.carte-1
{
	animation-delay: 0.4s !important;
}
#geo .deck .carte-question.carte-2
{
	animation-delay: 0.3s !important;
}
#geo .deck .carte-question.carte-3
{
	animation-delay: 0.2s !important;
}
#geo .deck .carte-question.carte-4
{
	animation-delay: 0.1s !important;
}
#geo .deck .carte-question.carte-5
{
	animation-delay: 0s !important;
}

#geo .zone .arrow
{
	width: 110px;
    height: 110px;
    position: absolute;
    top: 510px;
    right: 30px;

    background-image: url(../img/bouton-nav-album-droite.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 110px;

    overflow: hidden;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
#geo .zone .arrow.prev
{
	left: 30px;
    background-image: url(../img/bouton-nav-album-gauche.png);
}
#geo .zone .arrow.off,
#geo .zone .arrow.off:hover
{
	opacity: 0.3;
}