body {
	margin: 0;
	padding: 0;
  }

  :root{
	--font-size: calc(0.6rem + 0.8vw);
	/* font-size: calc(var(--font-size) * 2); */
  }
  
  .background {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgb(71, 71, 71);
  }

  .boutonTele{
	display: none;
	position: absolute;
	width: 40%;
	padding-bottom:20%;
	left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
	z-index: 4;
	background-color: rgb(255, 255, 255);
	border: 5px solid rgb(255, 0, 0);
	overflow: hidden;
}

  
  .boutonTele p {
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	color: rgb(0, 0, 0);
	font-family: 'Arial', sans-serif;
	font-size: calc(var(--font-size));
	font-weight: bold;
	text-align: center;
  }

  .oui{
	display: flex;
	position: absolute;
	width: 20%;
	padding-bottom:10%;
	left: 30%;
  	top: 70%;
  	transform: translate(-50%, -50%);
	z-index: 4;
	background-color: rgb(0, 110, 255);
	overflow: hidden;
	cursor: url('./../../assets/curseurs/lunettes.png'), auto;
} 

.oui p{
	text-align: center;
	top: 50%;
	font-size: calc(var(--font-size));
	transform: translate(-50%, -50%);
}

.non{
	display: flex;
	position: absolute;
	width: 20%;
	padding-bottom:10%;
	left: 70%;
	top: 70%;
  	transform: translate(-50%, -50%);
	z-index: 4;
	background-color: rgb(0, 110, 255);
	overflow: hidden;
	cursor: url('./../../assets/curseurs/lunettes.png'), auto;
}

.non p{
	text-align: center;
	top: 50%;
	font-size: calc(var(--font-size));
	transform: translate(-50%, -50%);
}


.croix{
	position: absolute;
	width: 10%;
	padding-bottom:0%;
	right: 2%;
	bottom: 2%;
	z-index: 2;
	  
}

.croix img{
	width: 100%;
	height: 100%;
	object-fit:cover; 
}

  .parent {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(8, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
  }
  
	
	.div1 { 
		grid-area: 1 / 1 / 3 / 3;
		overflow: scroll;
		scrollbar-color: red orange;
		scrollbar-width: thin;
	 }

	
	 .div1 img {
		width: 100%;
		height: auto; 
	}
	  

	.div2 { 
		grid-area: 3 / 1 / 5 / 3;
		background-color: rgb(255, 255, 255);
		z-index: 2;
		overflow: scroll;
		scrollbar-color: red orange;
		scrollbar-width: thin;
	 }

	 .div2 img {
		width: 100%;
		height: auto; 
	}

	

	.div3 { 
		grid-area: 5 / 1 / 9 / 3;
		/* background-color: rgb(255, 255, 255); */
		z-index: 2;
		overflow: scroll;
		scrollbar-color: red orange;
		scrollbar-width: thin;
	 }

	 .div3 img {
		width: 100%;
		height: auto; 
	}



	.div4 { 
		grid-area: 4 / 3 / 9 / 5;
		/* background-color: rgb(255, 255, 255); */
		z-index: 2;
		overflow: scroll;
		scrollbar-color: red orange;
		scrollbar-width: thin;
	 }

	 .div4 img {
		width: 100%;
		height: auto; 
	}

	

	.div5 { 
		grid-area: 4 / 5 / 6 / 7;
		/* background-color: rgb(255, 255, 255); */
		z-index: 2;
		overflow: scroll;
		scrollbar-color: red orange;
		scrollbar-width: thin;
	 }

	 .div5 img {
		width: 100%;
		height: auto; 
	}


	.div6 { 
		grid-area: 6 / 5 / 9 / 7;
		/* background-color: rgb(255, 255, 255); */
		z-index: 2;
		overflow: scroll;
		scrollbar-color: red orange;
		scrollbar-width: thin;
	 }

	 .div6 img {
		width: 100%;
		height: auto; 
	}



	.div7 { 
		grid-area: 4 / 7 / 9 / 9;
		/* background-color: rgb(255, 255, 255); */
		z-index: 2;
		overflow: scroll;
		scrollbar-color: red orange;
		scrollbar-width: thin;
	 }

	 .div7 img {
		width: 100%;
		height: auto; 
	}


	.div8 { 
		grid-area: 1 / 7 / 4 / 9;
		/* background-color: rgb(255, 255, 255); */
		z-index: 2;
		overflow: scroll;
		scrollbar-color: red orange;
		scrollbar-width: thin;
	 }

	 .div8
	  img {
		width: 100%;
		height: auto; 
	}

	.div9 { 
		grid-area: 1 / 3 / 4 / 7;
		background-color: rgb(255, 255, 255);
		z-index: 2;
		overflow: scroll;
		scrollbar-color: red orange;
		scrollbar-width: thin;
	 }

	 .div9 img {
		width: 100%;
		height: auto; 
	}

	.containerResponsive {
		display: none;
	}
	
	.sectionResponsive {
		display: none; 
	}