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




.slider{
	width: 90vw;
	height: 120vw;
	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("images/realisations/0.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 .r0{
	background: url("images/realisations/0.jpg");
	grid-area: a;
}
.realisations .r1{
	background: url("images/realisations/1.jpg");
	grid-area: b;
}
.realisations .r2{
	background: url("images/realisations/2.jpg");
	grid-area: c;
}
.realisations .r3{
	background: url("images/realisations/3.jpg");
	grid-area: d;
}
.realisations .r4{
	background: url("images/realisations/4.jpg");
	grid-area: e;
}
.realisations .r5{
	background: url("images/realisations/5.jpg");
	grid-area: f;
}
.realisations .r6{
	background: url("images/realisations/6.jpg");
	grid-area: g;
}
.realisations .r7{
	background: url("images/realisations/7.jpg");
	grid-area: h;
}
.realisations .r8{
	background: url("images/realisations/8.jpg");
	grid-area: i;
}
.realisations .r9{
	background: url("images/realisations/9.jpg");
	grid-area: j;
}
.realisations .realisation{
	width: 320px;
	height: 320px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}


@media screen and (min-width: 420px) {
	.titre{
		width: 320px;
		margin: 0 auto;
	}
	.left{
		margin-left: 0 !important;
	}
	.slider{
		display: none;
	}
	.realisations{
		display: grid;
		grid-template-columns: 320px;
		grid-template-areas: 
			"a"
			"b"
			"c"
			"d"
			"e"
			"f"
			"g"
			"h"
			"i"
			"j";
	}
	.arrow .ligne{
		background: var(--color2);
	}
}


@media screen and (min-width: 750px){
	.titre{
		width: 650px;
		margin: 0 auto;
	}
	.realisations{
		grid-template-columns: repeat(2, 320px);
		grid-template-areas: 
			"a b"
			"c d"
			"e f"
			"g h"
			"i j";
	}
}
@media screen and (min-width: 1080px){
	.titre{
		width: 980px;
		margin: 0 auto;
	}
	.realisations{
		grid-template-columns: repeat(3, 320px);
		grid-template-areas: 
			"a b c"
			"d e f"
			"g h i"
			"j x x";
	}
}

@media screen and (min-width: 1410px){
	.titre{
		width: 1310px;
		margin: 0 auto;
	}
	.realisations{
		grid-template-columns: repeat(4, 320px);
		grid-template-areas: 
			"a b c d"
			"e f g h"
			"i j x x";
	}
}


.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;
}