@font-face {
  	font-family: "Italianno";
  	src: url("/ressources/font/italianno/regular.ttf") format("truetype");
 	font-style:normal;
  	font-weight:400;
}
@font-face {
    font-family: 'Darleston';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url('/ressources/font/Darleston.ttf') format('truetype');
}
@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;
}
* {
	transition: .5s;
}
html {
	scroll-behavior: smooth;
}
body, html {
	margin: 0;
	height: 100%;
	border-radius: 0;
}
body {
	/* background: none; */
	line-height: 1.8;
	min-height: 100dvH;
}
/* 
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;
	
} */



@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);}
}

/* OUVERTURE ENVELOPPE (LANGUETTES) */
@keyframes LanguetteBasToPosition {
	from {transform: rotateX(0deg);}
	to {transform: rotateX(90deg);}
}
.languetteBasToPosition {
	filter: drop-shadow(-13px 31px 40px rgba(0,0,0,.25)) !important;
	animation: LanguetteBasToPosition ease-in 2s forwards;
}
@keyframes LanguetteHautToPosition {
	from {transform: rotateX(90deg);}
	to {transform: rotateX(180deg);}
}
.languetteHautToPosition {
	animation: LanguetteHautToPosition ease-out 1.5s forwards;
}
/* OMBRE LANGUETTE */
/* Ombre projetée par la languette sur l'intérieur de l'enveloppe */
@keyframes ombreLanguetteOuverture {
    0%   { opacity: 0.7; transform: scaleY(1); }
    60%  { opacity: 0.3; transform: scaleY(0.4); }
    100% { opacity: 0; transform: scaleY(0); }
}

@keyframes ombreLanguetteFermeture {
    0%   { opacity: 0; }
    100% { opacity: 0.7; }
}



@keyframes SlideBottom {
	from {top:0;} 
	to {top: 150vH;}
}
.slideBottom {
	animation: SlideBottom ease 2s forwards;
}
#languetteHaut.slideBottomLanguette {
	transform: rotateX(180deg);
	animation: SlideBottom ease 2s forwards;
}
@keyframes CarteHouppaInEnveloppe {
	0% {
		position: fixed;
		width: calc(var(--widthEnveloppe) - 30px);
		height: var(--heightEnveloppe);
		overflow: hidden;
		top: 50%;
		left: 50%;
		margin-top: calc(var(--heightEnveloppe) / -2);
		margin-left: calc((var(--widthEnveloppe) - 30px) / -2);
	}
	40% {
		transform: translateY(calc(-1 * var(--heightCarte)));
		margin-top: calc(var(--heightEnveloppe) / -2);
		height: calc(var(--heightEnveloppe) + var(--heightCarte));
	}
	41% {
		z-index: 150
	}
	90% {
		margin-top: 240px;
		transform: translateY(0vH);
		top: 0;
		width: 90Vw;
		margin-left: calc(90vW / -2);
		z-index: 150;
		height: initial;
		margin-top: 240px;
	}
	100% {
		top: 0;
		position: absolute !important;
		transform: translateY(0vH);
		width: 90Vw;
		margin-left: calc(90vW / -2);
		z-index: 150;
		height: initial;
	}
}
@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: var(--main) ;transform: translateY(-5%);} 
    25% {transform: translateY(0);}
    50% {color: var(--important);transform: translateY(-5%);}
   	75% {transform: translateY(0);}
   	100% {transform: translateY(-5%);}
}

/* ANIMATION CLASS*/
.carteHouppaInEnveloppe {
	position: absolute;
    width: 90vw;
	height: initial;
	overflow: initial;
    top: 50%;
    left: 50%;
    margin-top: 240px;
    margin-left: calc(90vW / -2);
	animation: CarteHouppaInEnveloppe ease-in-out 2s forwards;

}
.carteReceptionShowed {
	position: absolute;
    width: 90vw;
	height: initial;
	overflow: initial;
    left: 50%;
    margin-top: 240px;
	margin-bottom: 100px;
	top: 0;
	z-index: 150;
	height: initial;
    margin-left: calc(90vW / -2);
}
.carteReceptionShowing {
	position: fixed;
    width: calc(var(--widthEnveloppe) - 30px);
	height: var(--heightEnveloppe);
	overflow: hidden;
    top: 50%;
    left: 50%;
    margin-top: calc(var(--heightEnveloppe) / -2);
    margin-left: calc((var(--widthEnveloppe) - 30px) / -2);
}

.frontRotate {
	animation: Front linear 2s;
}
.backRotate {
	animation: Back linear 2s;
}
.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);
}


/* SCREEN LOADER */
.checkmark{
	width:70px;
	height:70px;
}
.checkmark svg{
	width:100%;
	height:100%;
}
.checkmark circle{
	stroke:#4CAF50;
	stroke-width:3;
	stroke-dasharray:166;
	stroke-dashoffset:166;
	animation:circleAnim 0.6s ease forwards;
}
.checkmark path{
	stroke:#4CAF50;
	stroke-width:4;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-dasharray:48;
	stroke-dashoffset:48;
	animation:checkAnim 0.4s 0.6s ease forwards;
}
@keyframes circleAnim{
	to{
		stroke-dashoffset:0;
	}
}
@keyframes checkAnim{
	to{
		stroke-dashoffset:0;
	}
}
#loaderScreen{
	border-radius: 0;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	animation: none;
	transition: none;
	display:flex;
	justify-content:center;
	align-items:center;

	background: rgba(0, 0, 0, 0.8);
	z-index:999;
}
.loaderContent{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap: 40px;
}
/* spinner moderne */
.spinner{
	width:70px;
	height:70px;
	border-radius:50%;
	border:4px solid rgba(255,255,255,0.15);
	border-top:4px solid white;
	animation:spin 0.9s linear infinite;
}
@keyframes spin{
	from{transform:rotate(0deg);}
	to{transform:rotate(360deg);}
}
#loaderText{
	color:white;
	font-size:18px;
	letter-spacing:1px;
	opacity:0.85;
	text-align:center;
	max-width:70vw;
}











/* SOUND CONTROL */

#soundControl {
	position: fixed;
	bottom: 20px;
	left:20px;
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0;
	z-index: 9999;
}
#soundControl, #soundControl * {
	border-radius: 40%;
}
#soundControl button {
	padding: 0;
	border: none;
	margin: 0;
	background: #fff;
}
#soundControl button svg {
	height: 20px;
	box-sizing: content-box;
}
#soundControl button svg path {
	fill: var(--importantColor) !important;
}







/* MENUS TOP BAR */











/*CSS NORMAL*/


/* LAUNCH BOUTTONS */
#launchAnimation {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vH;
	width: 100vW;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	opacity: 0;
	cursor: pointer;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	-webkit-tap-highlight-color: transparent;
	/* PRODUIT EN CROIX POUR QUE LE TEXTE PRENNE 80VW */
}
#launchAnimation .buttonContener {
	display: flex;
	flex-direction: row;
	padding: 15px 5px;
	border-radius: 15px;
}
#launchAnimation span {
	font-size: calc((80vW)/11.585/1.8);
}
#launchAnimation .buttonContener img {
	position: absolute;
	width: 10vW;
	rotate: -15deg;
	animation: fingerAnimate 1.1s cubic-bezier(0.4, 0, 0.0, 1.0) infinite;
	left: 50%;
	margin-left: -5vW;
	margin-top: 35px;
}

.notDisplay {
	display: none !important;
}






/* ENVELOPPE */
/* BACKGROUND */
#accueilContener {
	width: 100vW;
	height: 100vH;
	position: relative;
	transition: 1s ease-in-out;
}
#bgImage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: url("/ressources/backgrounds/accueil.png");
	background-size: cover;
	background-position: center;
	opacity: 0;
	/* transforme le gris */
	/* filter: sepia(0%) saturate(0%) brightness(2); */
}
#bgFilter {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: rgba(154, 90, 58, 0.78);
	opacity: 0;
	/* transforme le gris */
	/* filter: sepia(0%) saturate(0%) brightness(2); */
}
.showBg #bgImage, .showBg #bgFilter {
	opacity: 1;
}
#accueilContener.SRAccueilToTop {
	transition: all 1s ease-in-out;
	height: 60vH;
	/* margin-top: var(--menu-height); */
}	
/* CONTENU DE L'ENVELOPPE */
#enveloppeContent {
	display: flex;
    justify-content: center; /* horizontal */
    align-items: center;     /* vertical */
    text-align: center;
}
#enveloppeLogoImg {
	width: 80%;
	height: 80%;
}
g#enveloppeLogoImgGrp, #accueilContener::before, #bgImage, #bgFilter {
	transition: .5s ease-in;
}


#accueil {
	filter: drop-shadow(0px 11px 24px rgba(0,0,0,0.20));
}

#accueil,#enveloppeOverlayPage, #enveloppeContent {
    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%;
}
#enveloppeHiddenByPage img, #enveloppeOverlayPage img {
	position: absolute;
	width: 100%;
}
#enveloppeOverlay {
	filter: drop-shadow(0px -7px 25px rgba(0,0,0,0.1))
}
#languetteHaut {
	transform-origin: top;
	transform: rotateX(90deg);
}
#languetteBas {
	filter: drop-shadow(-13px 31px 40px rgba(0,0,0,.1));
	transition: 1s;
	transform: rotateX(0deg);
	transform-origin: top;
	position: relative;
	height: 100%;
	width: 100%;
}
#languetteBas div {
	position: absolute;
	width: 72%;
	height: 13%;
	left: 14%;
	text-align: center;
	font-size: calc(var(--widthEnveloppe) * 0.044);
	top: 6.3%;
}
#touchToOpen {
	font-size: calc(var(--widthEnveloppe) * 0.054);
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
	color: var(--main);
	animation: wheelHueColor 2s infinite ease;
}
#ombreLanguette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Couvre environ le tiers supérieur — zone impactée par la languette */
    height: 40%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.15) 60%,
        transparent 100%
    );
    pointer-events: none;
    transform-origin: top;
    opacity: 0.7;
    z-index: 10; /* entre le fond et l'overlay devant */
}

.ombreOuvertureAnimation {
    animation: ombreLanguetteOuverture linear 1s forwards;
}

/* Ombre ambiante sur le bord bas de l'overlay (profondeur de l'enveloppe) */
/* #enveloppeOverlayPage::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.3) 0%,
        transparent 100%
    );
    pointer-events: none;
} */


/* 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);
}
#insideEnveloppeBg {
	z-index: -1;
}




/* CARTE INCLUSE */
#cardContent, #accueilContener {
	scroll-margin-top: calc(var(--menu-height) + 10px);
}
#cardContent {
	transition: transform 1s ease-in-out;
	transform: translateY(100%);
}
#cardContent.card-hidden {
	transform: translateY(0);
}
#cardContent.card-visible {
	transform: translateY(0);
}





/* BUTTONS */
.buttonContener {
	background: white;
	z-index: 1;
	padding: 0px;
	border: 2px solid var(--borderColor);
	margin: 10px;
	box-shadow: 0 0px 15px rgba(245, 237, 217, .2);
	width: max-content;
	transition: 0.2s ease-in-out;
}
.buttonContener:hover{
	border-color: var(--hoverColor);
}
.buttonContener:hover *, .buttonContener *:hover {
	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;
}



/*MENUS */
/* TO DO */



/*FOOTER*/
footer {
	z-index: 9999;
	color: #656565;
	position:fixed;
	bottom:0;
	right: 0; 
	font-family: initial;
	font-size: 1.337vH;
	margin: 3px;
	font-family: helvetica neue,helvetica !important;
	background: rgba(255, 255, 255, 0.8);
	padding: 3px 13px;
	border-radius: 50px;
}
footer a {
	text-decoration: none;
	color: var(--importantColor);
	font-weight: 600;
	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 translationBackround {
		0% {transform: scale(1);top: 50%;}
		/*translateY(23.9848);*/
		100% {transform:scale(0.3);top: 4vH}
	}
	#launchAnimation .buttonContener {
		display: flex;
		flex-direction: row;
		padding: 50px 25px;
		border-radius: 20px;
	}
	#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);
	}
}
@keyframes timbreToFullScreen {
	0% {
		scale: 0;
		top: calc( (var(--heightEnveloppe)) /2 - 50vH);
		left: calc( (var(--widthEnveloppe)) /2 - 50vW);
		height: 100vH;
		width: 100vW;
	}
	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: linear-gradient(
		to bottom,
		#B8B6BA 0%,
		#B8B6BA 50%,
		#5F6E42 50%,
		#5F6E42 100%
	);
}
.timbreToFullScreen {
	animation: 5s ease-out forwards timbreToFullScreen ;
}