html{height: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
	scroll-behavior: smooth;}

  
@font-face {font-family: "titre";
src: url('../font/Poppins-Bold.ttf');}
  
  
 @font-face {font-family: "poppins";
 src: url('../font/Poppins-Regular.ttf');}
  
  
 @font-face {font-family: "orpheusPro";
	src: url('../font/Orpheus Pro.ttf');}
	 

@font-face {font-family: "lilita";
src: url('../font/LilitaOne-Regular.ttf');}



body {margin: 0;
	padding: 0;
	color: black;
	background-color:#222224;
	font-size: 16px;
	font-family: 'poppins', verdana;
	min-height: 100%;
	position: relative;
	overflow-x: hidden;}


header {position: fixed;
		z-index: 100;
		top: 0;
		width: 100%;}	

#site-header {
	max-width: 1450px;
	background-image: url('../image/stonebar_old.png');
	background-position: 50%;
	background-repeat: none;
	background-size: 1450px 116px;
	height: 116px;
	margin: auto;}

	
#inside {display: flex;
	max-width: 85%;
	margin: auto;
	justify-content: space-between;}

.containerInside {display: flex;}


#logo {margin-top: 8px;
	width: 160px;
	height: 72px;}

#logo img{width: 100%;}

#nav {text-align: center;}


#menu {list-style: none;
	display: flex;
	margin: 0px;
	padding-left: 0px;
	padding-right: 0px;}

	
.button{
		margin-top: 8px;
		text-align:center;
		cursor: pointer;
		font-family: 'lilita';
		font-size: 1.3em;
		background: black;
		border-radius: 12px;
		padding: 10px 14px 10px 14px;
		max-width: 190px;
		color: white;
		border: none;}

.button:disabled {
		opacity: 0.6;
		cursor: not-allowed;
}

	
.link {margin-right: 22px;
	margin-left: 22px;
	position:relative;}

	
.link::after{position: absolute;
	bottom: 4px;
	left: 0;
	content: "";
	width: 0%;
	height: 4px;
	border-radius: 20%;
	background-color: white;
	transition: width 0.3s ease;}


.link:hover.link::after {width: 100%;}

	
#menu li a{
	text-shadow: 0 2px 4px rgba(0,0,0,.5);
	display:block;
	padding-bottom: 16px;
	padding-top: 16px;
	font-family: 'lilita';
	color: white;
	font-size: 1.3rem;
	text-decoration: none;}


section {
	width: 100%;
	font-family: 'poppins';}
 

.banner {width: 100vw;
	height: 47.8vw;
	z-index:1;
	overflow: hidden;
    position: relative;
	background-color: black;
	display: flex; 
    justify-content: center; 
    align-items: center;}


#artwork {position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index:1;}


.logo_banner {position: absolute;
	width: 400px;
	top: 15%;
	z-index: 2;}


.container-gif{position: absolute;
	display: none;
	z-index:3;
	width: 100px;
	left: 0;
	bottom: 0;
	animation: run 16s linear infinite;}


#GIF{width: 100%;}

@keyframes run {
  0% { left: -100px;}
  50% { left: 110%; }
  100% { left: 120%; }
}


.container-scroll-mouse{position: absolute;
	bottom: 0;
	z-index:2;
	left: 0;
	height: auto;
	width: 100%;}

.scroll-mouse-center{margin: auto;
	width: 1.7%;
	margin-bottom: 1%;
	animation: scroll-mouse 4s ease-in-out infinite;}

.scroll-mouse-center-container{width: 100%;
	display: flex;
	flex-direction: column;
	align-items:center;
	justify-content: center;}

.scroll-mouse-center-container img{width: 100%;}

.mouse{width: 100%;}

.arrow{width: 50%;}



.divider {
	z-index: 2;
	height: 20px;
	background-image: url("../image/divider.png");
	background-repeat: repeat-x;
	background-position: center;}


#mainlogo {width: 80%;
	margin: auto;}
	
	
#mainlogo img {width: 100%}


.auberge{background-image: url("../image/auberge.webp");
	color: white;}

	

.filter {backdrop-filter: blur(8px);
	background-color: rgba(27, 0, 0, 0.6);
	width: 100%;
	z-index: -1; 
	height: 100%;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	position:absolute;}

	
.filter2 {
	background-image: url('../image/sky-stars.png');
	mask-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));
	width: 100%;
	z-index: -1; 
	height: 100%;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	position:absolute;}


.filter3 {backdrop-filter: brightness(1) contrast(1);
	background-color: rgba(0, 0, 0, 0.6);
	width: 100%;
	z-index: -1; 
	height: 100%;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	position:absolute;}

.item {padding-left: 32px;
		padding-right: 32px;
		text-align: center;}
	
.item img {width: 45%;}
	
#arcadia1 {max-width: 1440px; 
	margin: auto;
	overflow: hidden;
	padding-left: 60px; 
	padding-top: 90px;
	padding-bottom: 90px;
    padding-right: 60px;}

#arcadia15 {width: 50%; 
	text-align: center;}


.text-arcadia-animated { 
	text-align: center;}

.text-arcadia-animated p {font-family: 'eczar';
	font-size: 22px;
	font-weight: 500;}

.cards-welcome {display: flex;
	align-items: flex-start;
	padding-top: 90px;
	justify-content: space-evenly;
	align-content: space-evenly;
	gap: 30px;
	flex-wrap:wrap;}

.card-welcome {width:385px;
	height: 432px;
	aspect-ratio: 1.12;
	background-image: url("../image/paper5.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
	transition: all 0.2s ease;}

.card-welcome:hover {transform: scale(1.05);}



.title-welcome {color:rgb(112, 53, 25);
	text-transform: uppercase;
	padding-top: 48px;
	text-align: center;
	font-size: 3em;
	font-family: 'Bree Serif', serif;}

.text-welcome{color:rgb(112, 53, 25);
	font-size: 1.2em;
	text-align: center;
	font-family: 'eczar';
	font-weight: 500;
	padding-left: 32px;
	padding-right: 32px;}

.reveal {
	opacity: 0;
	transform: translateY(70px);
	transition: all 1s ease;
}

.revealPop {
	opacity: 0;
}

.revealPop.active {
	animation: bounce 1s ease forwards;
}

@keyframes bounce {
    0% { transform: scale(0.3);	opacity: 0;}
    20% { transform: scale(1.1); }
    40% { transform: scale(0.9); }
    60% { transform: scale(1.03); opacity: 1;}
	80% { transform: scale(0.96); }
	100% { transform: scale(1); opacity: 1;}
}

@keyframes scroll-mouse {
    0%  { transform: translateY(0);}
    10% { transform: translateY(-22px);}
    13% { transform: translateY(0);}
    16% { transform: translateY(-16px);}
	19% { transform: translateY(0px);}
	21% { transform: translateY(-10px);}
	25% { transform: translateY(0px);}
}

.reveal.active {
	opacity: 1;
	transform: translateY(0px);}

.reveal-lateral {
	opacity: 0;
	transform: translateX(-200px);

	transition: all 2s ease;}

.reveal-lateral.active{
	opacity: 1;
	transform: translateX(0px);
	}

.reveal-lateral-inverse {
		opacity: 0;
		transform: translateX(200px);
		transition: all 2s ease;}
	
.reveal-lateral-inverse.active{
		opacity: 1;
		transform: translateX(0px);
		}
	
	
.nftcontainer {	background-image: url("../image/bois2.webp");
	background-size: cover;	
	background-repeat: no-repeat;
	z-index: 1;
	background-position: center;
	position: relative;
	width: 100%;}
	
.inside-container-block {max-width: 1440px; 
	background-image: url('../image/paper.jpg');
	position: relative;
	margin-left:auto;
	margin-right: auto;
	background-repeat: repeat;
	background-color: #ffeede;
	background-blend-mode: multiply;
	padding-top: 90px;
	padding-bottom: 90px;
	padding-left: 60px; 
	padding-right: 60px;}

.inside-container-block::before, .inside-container-block::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 75px; 
	background-repeat: repeat-y;}

.inside-container-block::before {
	left: -74px;
	background-image: url('../image/paper-border1.png');}

.inside-container-block::after {
	right: -74px;
	background-image: url('../image/paper-border2.png');}


#welcometext p {font-family: 'eczar';
	font-size: 22px;
	line-height: 34px;
	font-weight: 400;}


.corners-box {
	position: relative;
	width: 100%;
	text-align:center;
	margin-bottom: 90px;
	}

.corners {position: absolute;
	width: 80px;
	height: 80px;}

.tl {left:0;
	transform: rotate(90deg);
	top:0;}

.tr {right:0;
	transform: rotate(-180deg);
	top:0;}

.br {left: 0;
	transform: rotate(0deg);
	bottom:0;}

.bl {right:0;
	transform: rotate(-90deg);
	bottom:0;}



#white {display: flex;
	gap: 24px;
	justify-content: flex-start;}

#white a {text-decoration: none;}

.bouton {color:#fb8842;
		display: inline-block;
		position: relative;
		font-weight: 700;
		font-family: poppins;
		padding-left: 2rem;
		padding-top: 0.7rem;
		padding-bottom: 0.7rem;
		padding-right: 2rem;
		border-radius: 10px;
		border: 1px solid #fb8842;;}


.bouton:hover {color:white;
	background-color: #fb8842;}


#welcometext {max-width: 800px;
	margin: auto;
	padding-bottom: 32px;
	text-align:center;}


.video-box{
		max-width: 900px;
		margin: auto;
		border: 20px solid#fff6ed;
		border-radius: 0px;
		overflow :hidden;
		aspect-ratio: 16 / 9; 
		box-shadow: 0 30px 20px -20px rgba(37,13,4,.18);}

	.video-box iframe {
		width: 100%;
		height: 100%;
		border: 0;
	}
	

#welcomeimage img {width: 80%;}


.number {background: #fb8842;
	font-family: lilita;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1.3em;
	color:white;
	line-height: 40px;
	border-radius: 20px;}


#cards {display: flex;
	width: 80%;
	align-items: center;
	justify-content: space-around;}

#diaporama {display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	align-items: flex-start;
	align-content: space-around;}


#diaporama .capture{padding-left: 10px; padding-right: 10px;
	max-width: 50%;
	margin-bottom: 40px;
	box-sizing: border-box;}


.hidden{overflow: hidden;}

.capture-img{width: 100%;
	transition: all 0.2s ease;}
	

.capture:hover .capture-img{transform: scale(1.05);}

	

.capture-container{background-color: #fff6ed;
	box-shadow: 0 30px 20px -20px rgba(37,13,4,.18);
	max-width: 100%;
	padding: 16px;}


.capture-container-text {padding:20px;
	font-family: 'eczar';
	font-size: 1.2em;}

.capture-container-text h3{font-size: 2em;
	text-align: left;
	margin-top: 0;
	margin-bottom: 12px;
	font-family: 'Bree Serif', serif;
	color: rgb(112, 53, 25);}


.small-divider{width: 100%;
	text-align: center;}

.small-divider img{width: 50%;}


.float:hover .img1 {
		transform: rotate(6deg) scale(1.1); /* Exemple: pas de rotation et un peu plus grande */}

.float:hover .img2 {
		transform: rotate(-12deg) scale(1.1); /* Exemple: pas de rotation et un peu plus grande */}

.float:hover .img3 {
		transform: rotate(0deg) scale(1.1); /* Exemple: pas de rotation et un peu plus grande */}



.card {width: 100%;
	height:100%;
	position: absolute;
	left:0;
	border-radius: 10px;
	bottom:0;
	transition: all 0.2s ease;}


.img1{
	z-index: 1;
	transform: rotateZ(2deg);}

.img2{
	z-index: 2;
	transform: rotateZ(-2deg);}

.img3{
	z-index: 3;
	transform: rotateZ(0deg);}

		
.wood {background-image: url("../image/bois2.webp");}

.lore {background: linear-gradient(to bottom, #1a0f2b, #1d3354), url('../image/sky-stars.png');}


.wide-container-block {
	z-index: 1;
	background-size: cover;	
	background-repeat: no-repeat;
	position: relative;
	background-position: center;
	width: 100%;}

.tall {
	background-image: url("../image/bois2.webp");
	background-size: 100% auto; 
    background-repeat: repeat-y; 
}
	

.wide-container-block h2 {
	font-size: 4em;
	font-family: 'Bree Serif', serif;
	margin-top: 90px;
	margin-bottom: 90px;
	text-align: center;}

.white-h2{color: white;
	text-shadow: 0px 5px 6px rgba(0, 0, 0, 0.5);}
	
.brown-h2{color: rgb(112, 53, 25);
	text-shadow: 0px 3px 5px rgba(78, 78, 78, 0.4);}
	

#containerWays{
	margin: auto;
	color: rgb(4, 5, 71);
	padding: 90px 60px 90px 60px;
	max-width: 1440px;}

.list-ways{display: flex;
	align-items: flex-start;
	width: 100%;
	justify-content:space-between;}

.card-way {height: 560px;
	visibility: hidden;
	border-radius: 16px;
	width: 380px;
	padding: 20px;
	border-radius: 16px;
	-webkit-box-shadow: 0 30px 20px -20px rgba(37,13,4,.18);
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 30px 20px -20px rgba(37,13,4,.18);
	border: 4px solid white;}


.social-icons {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 64px;}
  
.social-icons a img {
	width: 80px; /* Ajustez la taille des icônes */
	height: 80px;
	transition: transform 0.2s;}
  
.social-icons a img:hover {
	transform: scale(1.1);}

.pixel_building{width: 100%;}

.pixel_building img{width: 100%;}

.card-way-img {width: 100%;}

.card-way-img img{width: 100%;}



.faq-container {
	max-width: 1000px;
	margin: 0 auto;
}

  
.faq-item {
	margin: 1rem 0;
	box-shadow: 0 30px 20px -20px rgba(37,13,4,.18);
}
  
.faq-question {
	width: 100%;
	padding: 1rem;
	text-align: left;
	background-color: #fff6ed;
	border: none;
	font-family: 'Bree Serif', serif;
	font-size: 1.5rem;
	line-height: 3rem;
	font-weight: bold;
	cursor: pointer;
	outline: none;
	color: rgb(112, 53, 25);
}
  
.faq-answer {
	background-color: #fff6ed;
	padding-left: 1rem;
	padding-right: 1rem;
	max-height: 0;
	overflow: hidden;
	font-family: 'eczar';
	color : black;
  	font-size: 1.2em;
	line-height: 1.5;
	border : 0px;
	transition: all 0.3s;
}
  
  .faq-item.active .faq-answer {
	/* On définit un max-height suffisamment grand pour contenir la réponse */
	max-height: 300px;
  }

.member{display: flex;
	width: 100%;
	justify-content: space-between;}

.card-hero {width: 400px;
	height: 600px;
	flex-shrink: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0px 4px 10px rgba(26, 26, 26, 0.2);
	transition: all 0.3s ease;}


.card-hero:hover{transform: scale(1.05);}

.image-hero{width: 100%;
	height: 400px;
	overflow: hidden;}

.image-hero img{width: 100%;}

.bio-hero{background: white;
	display: flex;
	align-items: flex-start;
	height: 200px;}

.social{width: 60px;
	height: 60px;
	background-color: black;}

.social img {width: 100%;
	height: 100%;}

.bio-hero-infos {height: 80px;
	padding: 16px;
	width: 308px;}

.bio-hero-name {font-family: 'lilita';
font-size: 1.6em;}

.bio-hero-job {font-family: 'poppins';
	padding: 16px 0px;
	font-size: 1em;
	color: #666;}


#link {text-align: left;}
	

.profil {width: 20%;
	background: white;
	text-align: center;
	padding: 20px;
	color: white;
	border-radius: 8px;}
	
	
.photo img {width: 80%;
	border-radius: 5%;}

.totop {width: 58px;
	height: 58px;
	display: none;
	z-index: 500;
	position: fixed;
	bottom: 20px;
	right: 30px;}
	
	
.totop img {width: 60px;
	height: 60px;}


footer {
	font-size: 1em;
	background: #000000;
	color :white;
	width: 100%;}
	

#footer {max-width: 1440px;
	font-family: 'poppins';
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 20px;
	padding-top: 130px;
	padding-bottom : 120px;
	padding-left: 60px;
	padding-right: 60px;
	margin: auto;
}

.colonne {max-width: 30%;}

.logo_colonne {max-width: 400px;
	width: 100%;}

.unity {max-width: 200px;}

.unity img{width: 100%;
		margin-top: 20px;
	margin-bottom: 20px;}


.mvx .working-us{color:rgb(191, 191, 191);}

.mvx a {text-decoration: none;
	color: white;}


#footer h3{font-family: 'Bree Serif', serif;
		margin-top: 0;
		font-size: 22px;}

	
#social {margin-left: auto;}

#socialfooter {margin-top: 18px;}
			
#socialfooter img{height: 40px;
	padding: 10px;
	color: white;
	margin-right: 1rem;}


#socialfooter a {text-decoration: none;}


#button_menu_open {display: none;
	align-items: center; 
	height: 65px;
	justify-content: center;
	background: none;
	padding: 0;
	border: none;
	outline :none;
}

#button_menu_open img {	
	width: 27px;
	cursor: pointer;
	height: 21px;}


#mobile_menu {display: none;
	position: fixed;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10000;
	background: #f4efe9;}

	
#mobile_menu.open {
	display: flex;}
						
#button_menu_close {position: absolute;
	top: 20px;
	right: 20px;
	padding: 0px;
	width: 36px;
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
	height: 36px;}


#menudroite {padding: 0;
	margin: 0;
	list-style-type: none;
	text-align: center;}

#menudroite li {
	line-height: 60px;}

#menudroite li a {text-decoration: none;
	font-family: lilita;
	font-size: 2em;
	color: black;
	transition: all 0.2s;}




@media (max-width: 1720px) {
	.banner {
		width: 100%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	#artwork {
		position: static;
		width: 1720px;
		height: 100%;
	}

	.logo_banner {position: absolute;
		width: 300px;
		top: 200px;
		z-index: 2;}
}


@media(max-width: 1100px)
{
	#nav {display: none;}
	.right-connect {display: none;}
	#right {display: none;}
	#button_menu_open {display: flex;}
	.container-scroll-mouse {display: none;}

	#diaporama .capture{padding: 0px;
		max-width: 100%;
		margin-bottom: 40px;
		box-sizing: border-box;
		}

	.small-divider img{width: 70%;}
}


@media(max-width: 720px)
{
	.inside-container-block {padding: 12px 12px 24px 12px;}

	#containerWays{padding: 12px 12px 24px 12px;}

	.pixel_building{margin-top: 70px;}

	#arcadia h2 {font-size: 3.75em;}

	.box {height: 20px;}

	.box2 {height: 20px;}

	#collection{margin-top: 60px;}

	#inside {max-width: 96%;}

	#logo img {width: 100%;}

	#arcadia1 {padding: 12px 12px 90px 12px;
		flex-direction: column;}
		
	#arcadia15 {display: none;}

	#arcadia2 {width: 100%;
		text-align:center;}

	#white {justify-content: center;
		flex-direction: column;}

	.nftcontainer {padding-top: 60px;
		padding-bottom: 12px;}

	#welcometext {flex-basis: 100%;
		text-align: center;}

	#look {
		padding-top: 90px;
		padding-bottom: 90px;
		background: #f4efe9;}

	.wide-container-block h2{margin-top: 90px;
		font-size: 3em;}

	#cards {flex-direction: column;
		gap: 24px;}

	.nft {gap: 10px;}

	.float img {width: 80%;}

	.stone img {width: 40%;}

	.number {margin-bottom: 16px;}

	#footer {text-align: center;
		gap: 60px;
		padding: 60px 30px 60px 30px;}	

	.colonne {max-width: 80%;}

	.small-divider img{width: 70%;}
}

@media(max-width: 400px)
{
	.video-box{border: 4px solid#fff6ed;}
	
	#logo {margin-top: 0px;
		width: 120px;
		display: flex;
		align-items: center;
		height: 65px;}

	#inside {max-width: 100%;
		padding-left: 16px;
		padding-right: 16px;}

	.card-welcome {width: 302px;
		height: 338px;}

	.item img {width: 40%;}
	
	.title-welcome {
		padding-top: 16px;
		font-size: 2.4em;}

	.text-welcome{padding-left: 16px;
		padding-right: 16px;}
}