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

.left{
	margin-left: 15vw;
}

.retour{
	margin-left: 5vw;
	margin-bottom: 20px;
	font-size: 60px !important;
	font-weight: 200 !important;
	color: var(--color2);
	cursor: pointer;
}
.retour:hover{
	color: var(--color3);
}



section{
	max-width: 70%;
	margin: 50px auto;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
@media screen and (max-width: 430px){
	section{
		max-width: 90%;
	}
	.left{
		margin-left: 5vw;
	}
	.retour{
	top: 110px;
	left: 40px;
	}
}
section::after{
	content: "";
	display: block;
	flex-grow: 10;
}
section .img{
	background-size: cover;
	height: 250px;
	flex-grow: 1;
	cursor: pointer;
}
section .img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}




.slider{
	width: 100%;
	height: 100%;
	display: none;
	flex-direction: column;
	align-items: center;
	z-index: 999999;
	position: fixed;
	background-color: var(--color1);
	top: 0;
}
.slider #slid{
	width: 100%;
	height: 55vh;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 100px auto 50px auto;
}
#precedent, #suivant{
	font-size: 100px;
	font-weight: 100;
	color: var(--color2);
	cursor: pointer;
	text-align: center;
}
#precedent:hover,
#suivant:hover{
	color: var(--color3);
}
.slider #slid #image{
	width: 270px;
}
.slider #descr{
	width: 80%;
	padding-right: 10px;
}
.slider .retour2{
	font-size: 60px;
	font-weight: 200;
	color: var(--color2);
	position: absolute;
	top: 30px;
	right: 30px;
	cursor: pointer;
}
.slider .retour2:hover{
	color: var(--color3);
}
.slider #full{
	font-size: 60px !important;
	font-weight: 200 !important;
	color: var(--color2);
	display: none;
	position: absolute;
	top: 30px;
	left: 30px;
	cursor: pointer;
}
.slider #full:hover{
	color: var(--color3);
}
@media screen and (min-width: 450px) {
	.slider #full{
		display: block;
	}
}
@media screen and (min-width: 450px){
	.slider{
		justify-content: space-around;
	}
	.slider #slid{
		width: 850px;
		height: 60vh;
		margin: 70px auto 0 auto;
	}
	.slider #slid #image{
		height: 100%;
		width: auto;
	}
}
@media (max-height: 700px) and (max-width: 1300px) and (min-width: 420px){
	.slider{
		flex-direction: row;
		justify-content: center;
	}
	.slider #slid{
		height: auto;
		width: 520px;
		margin: 0;
	}
	.slider #slid #image{
		height: auto;
		width: 300px;
		margin: 0 20px;
	}
	.slider #descr{
		width: 200px;
		margin-left: 20px
	}
	.slider #descr h2, 
	.slider #descr p{
		text-align: left;
	}
	.slider #descr .titre2{
		font-size: 35px;
	} 
	.slider #descr .titre3{
		font-size: 18px;
	}
	.slider #descr .titre4{
		font-size: 15px;
	}
}
@media screen and (min-width: 1300px){
	.slider{
		flex-direction: row;
		justify-content: center;
	}
	.slider #slid{
		height: 65vh;
		width: 1000px;
		margin: 0;
	}
	.slider #slid #image{
		height: 100%;
		width: auto;
		margin: 0 20px;
	}
	.slider #descr{
		width: 300px;
		margin-left: 30px
	}
	.slider #descr h2, 
	.slider #descr p{
		text-align: left;
	}
}

.open{
	display: flex;
}
.full #slid{
	width: 100%;
	height: 100%;
	margin: 0;
}
.full #precedent, .full #suivant{
	position: absolute;
	background: rgba(255,254,239,0.60);
}
.sombre .full #precedent, 
.sombre .full #suivant{
	background: rgba(18, 18, 18, 0.60);
}
.full #suivant{
	right: 40px;
}
.full #precedent{
	left: 45px;
}
.full #slid #image{
	width: auto;
	height: 100%;
	margin: 0 auto;
}
.full #descr{
	display: none;
}


/*MOBILE*/
@media (max-width: 420px) {
	.slider{
		overflow-y: scroll;
	}
	.slider #slid{
		width: 100%;
		justify-content: center;
		margin-top: 150px;
	}
	.slider #slid #image{
		width: 80%;
	}
	.slider #slid #precedent,
	.slider #slid #suivant{
		position: absolute;
		color: var(--color1);
	}
	.slider #slid #precedent{
		left: 20px;
	}
	.slider #slid #suivant{
		right: 20px;
	}
}