/*page realisation*/




/*comparaison avant apres*/

.conteneur_comparaison{
	display:flex;
	flex-direction: column;
	width: 30em;
	height: 30em;
	margin-left:0;
	margin-right:0;
	padding: 1em;
	overflow:hidden;
	position: relative;
}

.slider{
	position: relative;
	height: 0px;
	padding-bottom: 133.333333333%;
	
}

.slider_apres{
	position: absolute;
	top: 0px;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-image: url('apres.jpeg');
	background-size: cover;
	pointer-events: none;
	
}

.slider_avant{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:2;
	width: 50%;
	height: 100%;
	background-image: url('avant.jpeg');
	background-size: cover;
	pointer-events: none;
	overflow:hidden;
	
}

.slider_avant:before{
	content: 'AVANT';
	position: absolute;
	left:8px;
	top:50%;
	color: white;
  transform:translateY(-50%);
  padding:8px 16px;
  margin-left:8px;
  margin-right:8px;
}

.slider_apres:before{
	content: 'APRES';
	position: absolute;
	right: 8px;
	top:50%;
	color:white;
  transform:translateY(-50%);
  padding:8px 16px;
  margin-left:8px;
  margin-right:8px;
}

.slider_separateur{
	position: absolute;
	left: 50%;
	width: 2px;
	top: 0px;
	bottom: 0px;
	background: rgba(255,255,255, 0.7);
	box-shadow: 0 5px 10px 0px rgba(0,0,0,0.5);
	cursor:ew-resize;
	z-index:3;
	transform:translateX(-50%);
}

.slider_separateur{
	content:'';
  width:32px;
  height:32px;
  border-radius:50%;
  border:solid 2px white;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}


.slider_range {
  position:absolute;
  width:100%;
  bottom:0px;
  z-index: 3;
  appearance: none;
  background:rgba(255,255,255,0.3);
  outline:none;
  margin:0px;
  display:none;
}

.slider_range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:12px;
  height:16px;
  background:white;
}

.slider_range::-moz-slider-thumb {
  -moz-appearance: none;
  width:12px;
  height:16px;
  background:white;
}








.slider_trois .slider_avant{
	background-image: url('./photos/avantCinq.jpeg');
}

.slider_trois .slider_apres{
	background-image: url('./photos/apresCinq.jpeg');
}


.slider_quatre .slider_avant{
	background-image: url('./photos/avantQuatre2.jpg');
}


.slider_quatre .slider_apres{
	background-image: url('./photos/apresQuatre2.jpg');
}



.slider_deux{
	padding-bottom: 177.304964539%;
}

.slider_deux .slider_separateur{
	top: 38%;
}

.slider_deux .slider_avant{
	background-image:url('./photos/avantDeux.jpeg');
}

.slider_deux .slider_apres{
	background-image:url('./photos/apresDeux.jpeg');
}



.slider_deux .slider_avant:before{
	content: 'AVANT';
	position: absolute;
	left:8px;
	top:38%;
	color: white;
  transform:translateY(-50%);
  padding:8px 16px;
  margin-left:8px;
  margin-right:8px;
}

.slider_deux .slider_apres:before{
	content: 'APRES';
	position: absolute;
	right: 8px;
	top:38%;
	color:white;
  transform:translateY(-50%);
  padding:8px 16px;
  margin-left:8px;
  margin-right:8px;
}




.slider_cinq .slider_separateur{
	top: 25%;
}

.slider_cinq .slider_avant{
	background-image:url('./photos/avantTroisRecadre.jpg');
}

.slider_cinq .slider_apres{
	background-image:url('./photos/apresTroisRecadre.jpg');
}


.slider_cinq .slider_avant:before{
	content: 'AVANT';
	position: absolute;
	left:8px;
	top:25%;
	color: white;
  transform:translateY(-50%);
  padding:8px 16px;
  margin-left:8px;
  margin-right:8px;
}

.slider_cinq .slider_apres:before{
	content: 'APRES';
	position: absolute;
	right: 8px;
	top:25%;
	color:white;
	transform:translateY(-50%);
	padding:8px 16px;
	margin-left:8px;
	margin-right:8px;
}
	

.conteneur_comparaison_cinq{
	display:flex;
	flex-direction: column;
	width: 60em;
	height: 30em;
	margin-left:auto;
	margin-right:auto;
	padding:1em;
	overflow:hidden;
	position: relative;
}




.conteneurRealisations{
	display: flex;
	flex-direction:column;
	align-items: center;
	justify-content:center;
	margin: 0;
    box-sizing: border-box;
    margin-top: 2em;
    width:100%;
}

.realisation{
	box-sizing: border-box;
	position: relative;
	margin-bottom: 1em;
	
}

.realisation_cinq{
	box-sizing: border-box;
	position: relative;
	margin-bottom: 1em;
	width:100%;

}

	
.realisationLigne{
	display:flex;
	flex-wrap: wrap;
	margin-left: 0%;
	gap:0em;
	align-items:center;
	justify-content:center;
	width:100%;
	
}

.accrocheRealisation{
	display: flex;
	flex-direction:column;
	margin-bottom: 1em;
	margin-left: 10%;
	margin-right: 10%;
}

.phraseAccroche{
	font-size: 1.7em;
	margin-bottom: 0.5%;
    padding: 20px;
    
}



.phraseAccrocheGras{
	font-family: 'auromiya';
	font-size: 1.8em;
	text-align:center;
	color:black;
	margin-top: 2%;
	margin-bottom:0;
}

@media(min-width:719px){
	.phraseAccrocheGrasPetit{
		display:none;
	}
	.phraseAccrocheGras{
		display:block;
	}
}

@media(max-width:718px){
	.phraseAccrocheGrasPetit{
		font-family: 'auromiya';
		font-size: 1.8em;
		text-align:center;
		color:black;
		margin-top: 2%;
		margin-bottom:0;
		display:block;
	}
	.phraseAccrocheGras{
		display:none;
	}
}

@media(min-width:633px){
	.phraseAccrochePetit{
		display:none;
	}
	.phraseAccroche{
		display:block;
	}
}

@media(max-width:632px){
	.phraseAccrochePetit{
			font-size: 1.7em;
			margin-bottom: 0.5%;
			padding: 20px;
			display:block;
	}
	.phraseAccroche{
		display:none;
	}
}
		

@media(max-width:550px){
	.phraseAccrochePetit{
		font-size:1.2em;
		padding:0.3em;
	}
	.phraseAccrocheGrasPetit{
		font-size:1.3em;
	}
}
@media(max-width:400px){
	.phraseAccrochePetit{
		font-size:0.9em;
	}
	.phraseAccrocheGrasPetit{
		font-size:1em;
	}
}

@media(max-width:959px){
	.conteneur_comparaison_cinq{
		width: 80%;
	}
}

@media(max-width:884px){
	.conteneur_comparaison_cinq{
		padding:0;
	}
	.conteneur_comparaison{
		padding:0;
		
	}
	
}



@media(max-width:600px){
	.conteneur_comparaison_cinq{
		width:80%;
		height: 20em;
	}
	.realisation{
		width:100%;
	}
	
	.conteneur_comparaison{
		width:80%;
		height: 20em;
		margin:0 auto;
	}
	
	
	.slider_cinq .slider_separateur{
		top: 50%;
	}
}

@media(max-width:400px){
	.conteneur_comparaison_cinq{
		width:80%;
		height: 15em;
		margin: 0 auto;
	}
	
	.realisation{
		width:100%;
	}
	
	.conteneur_comparaison{
		width:80%;
		height: 15em;
	}
}


.titreNoirPetit{
 	color:black;
	text-align:center;
	margin-top: 2%;
	font-size: 1.8em;
	display:none;
}

@media(max-width: 600px){
    .titreNoir{
        display:none;
    }
    .titreNoirPetit{
        display:block;
    }
}