main{
	margin-bottom: 50px;
	margin-top: 150px;
}



@media (any-hover: hover){
	.slider{
		display: none;
	}
	.realisations{
		display: grid !important;
	}
}



.slider{
	width: 90vw;
	height: 120vw;
	max-height: 70vh;
	margin: 50px auto;
	position: relative;
	z-index: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.slider.back{
    z-index: -1;
}
#precedent, #suivant{
	position: absolute;
	cursor: pointer;
}
#precedent{
	left: 10px;
	transform: rotate(-90deg);
}
#suivant{
	right: 10px;	
	transform: rotate(90deg);
}
.arrow{
	height: 18px;
	width: 36px;
	display: flex;
}
.arrow .ligne{
	width: 25px;
	height: 3px;
	border-radius: 1px;
	background: var(--color1);
	transition: 0s;
}
.arrow .l1{
	transform-origin: right;
	transform: rotate(-45deg);
}
.arrow .l2{
	transform-origin: left;
	transform: rotate(45deg);
}
.slider #img{
	width: 90vw;
	height: 120vw;
	background: url("/les_realisations/Versailles/image1.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}
.slider #img #descr{
	display: none;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition-duration: 0.3s;
}
.slider #img #descr.clicked{
	background: rgba(0,0,0,0.60);
	display: flex !important;
}
.sombre .slider #img #descr.clicked{
	background: rgba(255, 254, 239, 0.6);
}
.slider #img #descr h3{
	display: block;
	width: 80%;
	margin-bottom: 10px;
	font-family: var(--font2);
	font-size: 20px;
	font-weight: 300;
	color: #fff;
	text-align: center;
}
.slider #img #descr p{
	display: block;
	width: 70%;
	margin-bottom: 10px;
	font-family: var(--font1);
	font-size: 16px;
	font-weight: 200;
	text-align: center;
	color: #fff;
}
.slider #img .closeBox{
	width: 50px;
	height: 50px;
	border-radius: 25px;
	position: absolute;
	top: 20px;
	right: 20px;
	display: none;
	justify-content: center;
	align-items: center;
}
.slider #img .close{
	font-size: 35px;
	color: var(--texteColor3);
	display: none;
}
.slider #img .closeBox.clicked{
	display: flex;
}
.slider #img .closeBox.clicked .close{
	display: inline;
}




.container_rea{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.realisations{
	/*display: none;*/
	gap: 10px;
	margin: 50px auto;
}
.realisations .realisation{
	width: 320px;
	height: 320px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}


.selecteur{
	width: 320px;
	height: 320px;
	/*position: fixed;*/
	z-index: -1;
	display: grid;
	align-items: center;
	justify-content: center;
	grid-template: 
		"c1 . c2" 30%
		". croix ." 40%
		"c3 . c4" 30% / 30% 40% 30%;
	transition: transform .6s cubic-bezier(.23,1,.32,1);
	opacity: 0;
	grid-column: 1;
	grid-row: 1;
}
.selecteur .c1{
	grid-area: c1;
	border-top: 3px solid;
	border-left: 3px solid;
}
.selecteur .c2{
	grid-area: c2;
	border-top: 3px solid;
	border-right: 3px solid;
}
.selecteur .c3{
	grid-area: c3;
	border-bottom: 3px solid;
	border-left: 3px solid;
}
.selecteur .c4{
	grid-area: c4;
	border-bottom: 3px solid;
	border-right: 3px solid;
}
.selecteur .coin{
	width: 100%;
	height: 100%;
	border-color: var(--color2);
}
.croix{
	grid-area: croix;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.croix .x{
	width: 100px;
	height: 3px;
	background: var(--color2);
	position: absolute;
	transition: 0s;
}
.croix .x2{
	transform: rotate(90deg);
}



.descr{
	width: 100%;
	height: 110px;
	position: fixed;
	z-index: 10000;
	bottom: -100px;
	background: rgba(255, 254, 239, 0.6);
	display: flex;
	transition: .3s cubic-bezier(.23,1,.32,1);
}
.sombre .descr{
	background: rgba(18, 18, 18, 0.6);
}
.descr .gauche{
	margin-left: 10px;
}
.descr .droite{
	margin-left: auto;
	margin-right: 10px;
	margin-top: 18.8px;
	text-align: right;
}
.descr h2{
	font-family: var(--font2);
	font-size: 25px;
}
.descr p{
	font-family: var(--font1);
	font-size: 12px;
}