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

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

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

p
{
	color: #ffffff;
	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;
}

button
{
	all: unset;
	cursor: pointer;
}

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

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

	opacity: 1;
	transform: scale(1);

	transition: all 1000ms ease-in-out;
}
h2
{
	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;

	background-image: url(../img/tourne-ecran.gif);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
#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.off
{
	opacity: 0.3;
}

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

	font-size: 38px;
	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 .fermer
{
	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;

	border-radius: 86px;
    cursor: pointer;
    z-index: 1;
}
.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;
	background-color: #0053F9;
}

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

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


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

.popin.albums .fermer
{
	position: absolute;
	top: 42px;
	bottom: auto;
	left: auto;
	right: 120px;
}
.popin.albums .titre
{
	top: 30px !important;
}
.popin.albums .titre .picto span
{
	background-image: url(../img/picto-albums.png);
}
.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 .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;
}


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

.antiquite
{
	
}
.antiquite.titre .picto span
{
	background-image: url(../img/icon-antiquite.png);
}
.antiquite .intitule,
.antiquite .carte
{
	background-color: #4AD956;
}

.moyen-age
{
	
}
.moyen-age.titre .picto span
{
	background-image: url(../img/icon-moyen-age.png);
}
.moyen-age .intitule,
.moyen-age .carte
{
	background-color: #DB2500;
}

.temps-modernes
{

}
.temps-modernes.titre .picto span
{
	background-image: url(../img/icon-temps-modernes.png);
}
.temps-modernes .intitule,
.temps-modernes .carte
{
	background-color: #FE83ED;
}

.epoque-contemporaine
{

}
.epoque-contemporaine.titre .picto span
{
	background-image: url(../img/icon-epoque-contemporaine.png);
}
.epoque-contemporaine .intitule,
.epoque-contemporaine .carte
{
	background-color: #FFF200;
}

.multi-periodes
{

}
.multi-periodes.titre .picto span
{
	background-image: url(../img/icon-multi-periodes.png);
}


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

.carte
{
	width: 528px;
	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;
}
.carte .periode
{
	width: 100%;
	margin: 20px auto;

	font-size: 38px;
	font-family: "Sigmar", sans-serif;
	text-transform: uppercase;
	text-align: 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);
	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;
}
.carte .nom.show
{
	opacity: 1;
	transform: scale(1.0);
}


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

#quiz .question
{
	opacity: 0;
}

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

#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: 40px;

	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.show
{
	top: 0;
}
#quiz .question .indice span
{
	color: #FFF200;
	font-weight: bold;
	text-transform: uppercase;
}

#quiz .question .intitule
{
	width: 930px;
	height: 110px;
	position: absolute;
	top: 190px;
	right: 120px;

	color: #001E5A;
	font-family: "Sigmar", sans-serif;
	font-size: 38px;

	border-radius: 60px;

	display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}
#quiz .question .reponses
{
	width: 930px;
	position: absolute;
	top: 342px;
	right: 120px;

	display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}
#quiz .question .reponses button
{
	width: 930px;
	height: 110px;

	color: #0000DF;
	font-size: 38px;
	font-weight: 700;

	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: #DB2500;
	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 .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;
}