/*KEYFRAMES*/
/*COLOR:*/
:root {
	--welcomeText: #bf9f3c;
	--mainColor: #3E4044; 
	--importantColor: #bf9f3c; 
	--hoverColor: #021b3d;
	--borderColor: #bf9f3c;
	--mainPolicy: "Trajan";
	--widthEnveloppe: 80vW;
	--heightEnveloppe: calc(var(--widthEnveloppe) / 1.479);
}

@font-face {
  	font-family: "Italianno";
  	src: url("ressources/font/italianno/regular.ttf") format("truetype");
 	font-style:normal;
  	font-weight:400;
}
@font-face {
	font-family: "Trajan";
	src: url("ressources/font/trajan/regular.ttf") format("truetype");
   	font-style:normal;
	font-weight:400;
}
@font-face {
  font-family: "Hebrew";
	src: url("ressources/font/hebrew/regular.ttf") format("truetype");
	font-style:normal;
	font-weight:400;
}
@font-face {
  font-family: "Aphrodite";
	src: url("ressources/font/aphrodite/regular.ttf") format("truetype");
	font-style:normal;
	font-weight:400;
}
@font-face {
  font-family: "Aphrodite";
	src: url("ressources/font/aphrodite/medium.ttf") format("truetype");
	font-style:bold;
	font-weight:600;
}
@keyframes translationBackround {
	0% {transform: translateY(0) scale(1);}
	100% {transform: translateY(-25vH) scale(.8);}
}
@keyframes Front {
	from {transform: perspective(2500px) rotateY(0deg);}
	to {transform: perspective(2500px) rotateY(90deg);}
}
@keyframes Back {
	from {transform: perspective(2500px) rotateY(-90deg);}
	to {position: fixed;	transform: perspective(2500px) rotateY(0deg);}
}
@keyframes LanguetteBasToPosition {
	from {transform: rotateX(0deg);}
	to {transform: rotateX(90deg);}
}
@keyframes LanguetteHautToPosition {
	from {transform: rotateX(90deg);}
	to {transform: rotateX(180deg);}
}
@keyframes SlideBottom {
	from {top:0;} 
	to {top: 150vH;}
}
@keyframes MenuToBottom {
	from {transform: translateY(0);box-shadow: inherit;opacity: 0;} 
	to {transform: translateY(10vH);box-shadow: none;opacity: 1}
}
@keyframes backgroundTransition {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
		background-image: url(ressources/backgrounds/accueil.jpeg);
	}
	100% {
		opacity: 1;
		background-image: url(ressources/backgrounds/houppa.jpeg);
	}
}
@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes fadeOut {
	from {opacity: 1;}
	to {opacity: 0;}
}
@keyframes fadeOutSkipButton {
	from {transform: translateX(0);opacity: 1;}
	to {transform: translateX(47.3543794491px); opacity: 0;}
}
@keyframes minimizeButton {
	from{width: var(--oldValue);}
	to{width: var(--newValue);}
}
@keyframes demiFadeOut {
	from{opacity: 1;}
	to{opacity: 0;}
}
@keyframes demiFadeIn {
	from{opacity: 0;}
	to{opacity: 1;}
}
@keyframes wheelHueColor {
    0% {color: #737373 ;transform: translateY(-40%);} 
    25% {transform: translateY(0);}
    50% {color:  #191970;transform: translateY(-40%);}
   	75% {transform: translateY(0);}
   	100% {color: #737373;transform: translateY(-40%);}
}
body {
	background-image: url(ressources/backgrounds/accueil.jpeg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	min-height: 100vH;
	min-width: 100vW;
	line-height: 1.8;
	margin: 0;
}
/* 
TRNAISTION DE BACKGROUND
body:before {
	content: "";
	position: fixed;
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;  
	opacity: 1; 
	z-index: -1;
	background-image: url(ressources/backgrounds/accueil.jpeg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
body:hover:before {
	animation: backgroundTransition .5s ease-in-out forwards;
	
} */


/* ANIMATION CLASS*/
.frontRotate {
	animation: Front linear 2s;
}
.backRotate {
	animation: Back linear 2s;
}
.languetteBasToPosition {
	animation: LanguetteBasToPosition linear 1s forwards;
}
.languetteHautToPosition {
	animation: LanguetteHautToPosition linear 1s forwards;
}
.slideBottom {
	animation: SlideBottom ease 1s forwards;
}
#languetteHaut.slideBottomLanguette {
	transform: rotateX(180deg);
	animation: SlideBottom ease 1s forwards;
}
.menuToBottom {
	animation: MenuToBottom ease 1s 1 forwards;
}
.fadeIn {
	animation: fadeIn ease 1s 1 forwards;
}
.fadeOut {
	animation: fadeOut ease-in .5s forwards;
}
.fadeOutSkipButton {
	animation: fadeOutSkipButton ease 1s forwards;
}
.minimizeButton {
	animation: minimizeButton ease 1s forwards;
}
.demiFadeOut {
	animation: demiFadeOut ease-in 0.5s forwards;
}
.demiFadeIn {
	animation: demiFadeIn ease-out 0.5s forwards;
}
.translationBackground {
	animation: translationBackround ease 1s 1 forwards;
}
.animateMenu {
	box-shadow: none !important;
	transform: translateY(10vH);
}





/*CSS NORMAL*/
#launchAnimation {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vH;
	width: 100vW;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	/* PRODUIT EN CROIX POUR QUE LE TEXTE PRENNE 80VW */
}
#launchAnimation .buttonContener {
	display: flex;
	flex-direction: row;
	padding: 50px 25px;
	border-radius: 20px;
}
#launchAnimation span {
	font-size: calc((80vW)/11.585/1.8);
}
@keyframes fingerAnimate {
	0% {
		scale: 1;
		rotate: -15deg;
		translate: 200px 200px;
	}
	50% {
		scale: 1.2;
		rotate: -20deg;
		translate: 0 0;
	}
	100% {
		rotate: -15deg;
		translate: 200px 200px;
	}
}
#launchAnimation .buttonContener img {
	position: absolute;
	width: 10vW;
	rotate: -15deg;
	animation: fingerAnimate 1.4s ease-in-out infinite;
	left: 50%;
	margin-left: -5vW;
	margin-top: 35px;
}

.paused {
	animation-play-state: paused !important;
}
.notDisplay {
	display: none !important;
}
#accueil {
    position: fixed;
    height: var(--heightEnveloppe);
    width: var(--widthEnveloppe);
    top: 50%;
    left: 50%;
    margin-top: calc(var(--heightEnveloppe) / -2);
    margin-left: calc(var(--widthEnveloppe) / -2);
}
.enveloppeImg, #backCarteClosed {
	width: var(--widthEnveloppe);
	height: var(--heightEnveloppe);
}
#accueil div {
	position: absolute;
	width: var(--widthEnveloppe);
	height: var(--heightEnveloppe);
	margin-left: calc(var(--widthEnveloppe) / -2);
	left: 50%;
}
#enveloppeLogoContener img {
	position: absolute;
	width: 100%;
}
#languetteHaut {
	transform-origin: top;
	transform: rotateX(90deg);
}
#languetteHaut img, #languetteBas img {
	height: calc(var(--heightEnveloppe)/1.7978);
}
#languetteBas {
	transform: rotateX(0deg);
	transform-origin: top;
}
/* backCarteClosedToMask sert à être identifié par le script js */
#backCarteClosed {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#backCarteClosed .enveloppeImg {
	position: absolute;
	z-index: -1;
}
#welcomeText {
	text-align: center;
	font-size: calc((72vW / 12) / 2);
	font-family: var(--mainPolicy);
	text-decoration: none;
	color: var(--welcomeText);
	/* font-weight: 00; */
	margin-top: 5%;
}
#clickButton {
	font-size: calc((72vW / 12) / 3.5);
    animation: wheelHueColor 2s infinite ease;
}
.frontCarteClosedShow {
	transform: rotateY(180deg);
}



/*Background*/
#backgroundImg {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: calc(var(--heightEnveloppe) / -2);
	margin-left: calc(var(--widthEnveloppe) / -2);
	height: var(--heightEnveloppe);
	width: var(--widthEnveloppe);;
}
#backgroundImg img {
	width: var(--widthEnveloppe);
	height: calc(var(--widthEnveloppe) / 1.618);
	border-radius: 47px;
}
.enveloppeBackground {
	z-index: -1;
}
/* BUTTONS */
.buttonContener {
	background: white;
	z-index: 1;
	padding: 0px;
	border: 2px solid var(--borderColor);
	margin: 30px;
	box-shadow: 0 5px 15px rgba(169, 169, 169, 0.9);
	width: max-content;
	transition: 0.2s ease-in-out;
}
.buttonContener:hover{
	color: var(--hoverColor);
	border-color: var(--hoverColor);
}
.buttonContener * {
	font-weight: 400;
	padding: 11px;
	display: block;
	font-size: 30px;
	color: var(--importantColor);
	text-decoration: none;
	font-family: var(--mainPolicy);
	transition: 0.2s ease-in-out;
}
.buttonContener *:hover {
	color: var(--hoverColor);
}
/*MENUS */
#menus {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
	translate: -50% -50%;
}
.contenerTextMenu {
	padding: 0px;
	border: 2px solid var(--borderColor);
	margin: 22px;
	box-shadow: 0 5px 15px rgba(169, 169, 169, 0.9);
}
.menuText {
	margin: 11px;
}
#menus a {
	text-decoration: none;
	font-size: 60px;
}
#menus a {
	text-decoration: none;
}
#menus .buttonContener {
	width: 100%;
	margin: 15px;
	border-radius: 20px;
}



/*FOOTER*/
footer {
	color: #656565;
	position:fixed;
	bottom:0;
	right: 0; 
	font-family: initial;
	font-size: 1.337vH;
	margin:3px;
	font-family: helvetica neue,helvetica !important;
	background: white;
	padding: 5px;
	border-radius: 5px;
}
footer a {
	text-decoration: none;
	color: rgb(43, 146, 206);
	font-size: 1.337vH;
	font-family: helvetica neue,helvetica !important;
}
footer a:hover {
	color: #3e416d;
}

/*RESPONSIVE QUERIES*/
@media screen and (min-aspect-ratio: 8/5) {
	:root {
		--heightEnveloppe: 80vH;
		--widthEnveloppe: calc(var(--heightEnveloppe) * 1.479);
	}
	@keyframes SlideBottomLanguette {
		from {} 
		to {top: calc(200% - 44.5vH);}
	}
	@keyframes translationBackround {
		0% {transform: scale(1);top: 50%;}
		/*translateY(23.9848);*/
		100% {transform:scale(0.3);top: 4vH}
	}
	#welcomeText {
		font-size: calc(((70vH * 1.479) / 12) / 2);
	}
	#backgroundImg img {
		width: calc(80vH * 1.479);
		height: 80vH;
	}
	#clickButton {
		font-size: calc(((70vH * 1.479) / 12) / 3.5);
	}
	
	
}
@media screen and (min-aspect-ratio: 2/3) {
	#menus .menuText span{
		font-size: calc((80vH/7)/3);
	}
}



/* PHOTOS */
/* @keyframes photoToMix {
	0% {
		left: calc(var(--signe) * (50vW + calc(var(--widthImg) / 2)));
		animation-timing-function: cubic-bezier(.23,1,.32,1);
	}
	50% {
		left: calc(var(--widthImg)/2*var(--signe));
		scale: 1;
	}
	80% {
		scale:1;
		left: calc(var(--widthImg)/2*var(--signe));
		animation-timing-function: cubic-bezier(.6,-0.28,.74,.05);
	}
	100% {
		left: 0;
		scale: 0;
	}
} */
@keyframes timbreToFullScreen {
	0% {
		scale: 0;
		top: calc( (var(--heightEnveloppe)) /2 - 50vH);
		left: calc( (var(--widthEnveloppe)) /2 - 75.15vH);
		height: 100vH;
		width: 150.3vH;
	}
	30% {
		top: calc( (-100vH + var(--heightEnveloppe)) /2);
		left: calc( (-100vW + var(--widthEnveloppe)) /2);
		scale: 1;
		height: 100vH;
		width: 100vW;
	}
	80% {
		scale: 1;
		top: calc( (-100vH + var(--heightEnveloppe)) /2);
		left: calc( (-100vW + var(--widthEnveloppe)) /2);
		height: 100vH;
		width: 100vW;
	}
	100% {
		/* Les valeurs sont exprimés par rapport au logiciel Inkscape en prenant comme valeur 100 la taille de l'enveloppe et en conservant les ratios
		Valeur X/Y/l/L = taille carte web * valeur x/Y/l/L inkscape divisé par taille carte enveloppe*/
		top: calc(var(--widthEnveloppe)*4.649/100);
		left: calc(var(--widthEnveloppe)*83.429/100);
		height: calc(var(--widthEnveloppe)*12/100);
		width: calc(var(--widthEnveloppe)*12/100);
		scale: 1;
		border-radius: 2px;
	}
}
/* TIMBRE */
/* calc( (-100vH + var(--heightEnveloppe)) /2) */
/* calc( (-100vW + var(--widthEnveloppe)) /2) */
#backCarteClosed #timbreImg {
	scale: 0;
	position: absolute;
	object-fit: cover;
	top: calc( (-100vH + var(--heightEnveloppe)) /2);
	left: calc( (-100vW + var(--widthEnveloppe)) /2);
	height: 100vH;
	width: 100vW;
	margin: 0;
	background-color: #021b3d;
}
.timbreToFullScreen {
	animation: 5s ease-out forwards timbreToFullScreen ;
}
/* FOLDER CENTERED INTRO */
/* #photosToAnimate {
	position: absolute;
	top:0;
	left:0;
	width: 100vW;
	height: 100vH;
	--heightImg: 33vH;
	--widthImg: 24.75vH;
} */
/* PHOTO MIXING 2 photos START */
/* Apparition des 6 images */
/* @keyframes popUp {
	ON part du microscopique centré
	0% {top:0; left:0}

	A l'emplacement scale 1
	100% {scale: 1; top:var(--top); left:var(--left)}
} */

/* #photoToMix, #photoToPopUp {
	position: absolute;
	top: 50%;
	left: 50%;
	height: var(--heightImg);
	width: var(--widthImg);
	margin-left: calc(var(--widthImg) / -2);
	margin-top: calc(var(--heightImg) / -2);
} */
/* #photoToPopUp {
	--heightImg: calc(100 / 3 *1vH);
	--widthImg: 50vW;
} */
/* Valeur par défaut */
/* #photoToMix img {
	position: absolute;
	top: 0;
	transform-origin: center;
	height: var(--heightImg);
	width: var(--widthImg);
	opacity: 1;
	animation: 3s linear forwards photoToMix;
} */
/* Valeur par défaut POPUP*/
/* #photoToPopUp img{ */
	/* position: absolute;
	scale: 0;
	height: var(--heightImg);
	width: var(--widthImg);
	object-fit: cover; */

	/* 4s + .2s de délai pour chaque image  */
	/* animation: 1s calc(4s + var(--order)*.2s) cubic-bezier(.2,.16,.4,.03) popUp forwards; */
/* } */