body {
	margin: 0;
	font-family: sans-serif;
	background-color: #000;
}
div {
	box-sizing: border-box;
	border: solid 0px lightgrey;
}

nav {
	position: fixed;
	bottom: 1.5rem;left: 1.5rem;
	background-color: lightgrey;
	padding: 10px;
	border-radius:  7px;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	z-index: 100000;
	display: none;
}

#click, #noClick, #click_chambre {
	position: fixed;
	width: 100vw;height: 100vh;
	top: 0;left: 0;
	border: solid 0px orange;
	cursor: pointer;
}
#click, #click_chambre { z-index: 5000;display:none; }
#noClick { z-index:10000;background-color:transparent;display: none; }
#click_chambre { border:solid 0px blue; }





#titre {
	position: fixed;
	top: 0;left: 0;width: 100vw;height: 100vh;
	display: flex;justify-content: center;align-items: center;
	font-size: 120px;
	cursor: pointer;
	background-color: #000;
	z-index: 10000;
	color: #000;
}
#titre img { width: 100%;max-width:830px;max-height:90%; }

#chambre, #chambre2 {
	position: absolute;
	top: 0;left: 0;width: 100vw;height: 100vh;

	text-align: center;
	z-index: 2000;
	display: none;
}
#chambre img { width:100%; }
#chambre {
	background-position: 50% 0%;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url(imgs/Scene1/scene1_fond1.png);
	transition:  all 3s ease-in;
}

#chambre2 {
	background-position: 50% 0%;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url(imgs/Scene3/scene3_fond.png);
	transition:  all 3s ease-in;
}





.scene { display:none; }


.ecran {
	position: fixed;
	width: 100vw;height: 100vh;
	top: 0;
	border: solid 0px orange;
	z-index: 3000;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
}

.ecran img {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border: solid 1px tomato;
}
.ecran img.medium {
	position: absolute;
	width: 500px;
	height: 500px;
	
	object-fit: contain;
	border: solid 4px tomato;
	background-color: white;
}
.ecran img.hecate {
	position: absolute;
	top: 0%;left: 0%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: solid 0px tomato;
	background-color: black;
}

#images_animations { display:none; }

#animCarousel1 { display:none;top:0;left:0; }


#scene1 .ecran {
	background-image: url('imgs/Scene1/decorrecadrer.png');
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}
#scene2 .ecran video, 
#scene3 .ecran video { width:100%; }

#scene3-zoom1 {
	transition: all 1s ease-in;
}
#scene3-zoom1, #scene3-zoom2 {
	 transform-origin: 50% 50%;
}
#scene3-zoom2 {
	transform:  scale(3);
}