/* Configurateur */





/*AJOUT DU SCSS*/





.page-configurateur main {background-color: #102b55;padding: 0 5%;}

.page-configurateur .top-page {height: auto;align-items: center;background-color: #fff;border-radius: 30px;padding: 15px 0;}

.page-configurateur .top-page .col-12 {padding: 0;}

.page-configurateur .top-page .titleStyle small {color: #102b55;}

.page-configurateur .stepIndicator {width: 600px;max-width: 100%;margin: 15px auto;position: relative;margin-bottom: 30px;}



/*.page-configurateur .stepIndicator #progress-bar {

	position: absolute;

	background: #102b55;

	height: 5px;

	width: 0%;

	top: 50%;

	left: 0;

	z-index: 1;

	-webkit-transition: width 0.3s ease-in-out;

	-moz-transition: width 0.3s ease-in-out;

	-o-transition: width 0.3s ease-in-out;

	transition: width 0.3s ease-in-out;

}*/



.page-configurateur .stepIndicator ul {width: 100%;margin: 0;padding: 0;list-style: none;display: flex;justify-content: space-between;}

.page-configurateur .stepIndicator ul:before {content: "";background-color: #e6e5e4;position: absolute;top: 50%;left: 0;height: 5px;width: 100%;z-index: 0;}

.page-configurateur .stepIndicator li {z-index: 1;}

.page-configurateur .stepIndicator li a {display: block;border: 3px solid #e6e5e4;background-color: #fff;color: #e6e5e4;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 50%;}



.page-configurateur .stepIndicator li.active a {background-color: #102b55;color: #fff;border-color: #102b55;}

.page-configurateur .stepIndicator li.completed a {background-color: #e6e5e4;color: #fff;}

.page-configurateur .stepIndicator li:first-child {margin-left: -1px;}

.page-configurateur .stepIndicator li:last-child {margin-right: -1px;}



.page-configurateur .btnContain {display: flex;justify-content: center;}

.page-configurateur .btn {width: 150px;background-color: #102b55;border: none;color: #fff;padding: 7.5px 15px;text-align: center;border-radius: 20px;cursor: pointer;margin: 0 10px;text-transform: uppercase;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}

.page-configurateur .btn:hover {background-color: #97b2c6;}

.page-configurateur .btn:disabled {background-color: #e5e5e5;cursor: not-allowed;}



.page-configurateur .formContain {display: flex;flex-wrap: wrap;}

.page-configurateur .formContain .poolBox {cursor: pointer;width: calc(25% - 30px);}

.page-configurateur .formContain .poolBox input {display: none;}

.page-configurateur .formContain .poolBox input:checked + div:not(.openList) span {color: #102b55;}

.page-configurateur .formContain .poolBox input:checked + div > div .formeShape {background-color:#102b55;}

.page-configurateur .formContain .poolBox > div:not(.openList) span {text-transform: initial;color: #b2b2b2;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}

.page-configurateur .formContain .poolBox > div {width: 100%;}

.page-configurateur .formContain .poolBox > div > div {position: relative;height: 150px;width:100%;display: flex;align-items: flex-end;}

.page-configurateur .formContain .poolBox > div > div .formeShape {width:100%;height:100%;background-color:#e6e5e4;opacity:1;mask-size: contain;mask-position:center;-webkit-mask-position:center;mask-repeat: no-repeat;-webkit-mask-size: contain;-webkit-mask-repeat: no-repeat;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}



.page-configurateur .colors {display: flex;flex-wrap: wrap;margin: 30px auto;}

.page-configurateur .colors h3 {width: 100%;margin-bottom: 20px;text-transform: uppercase;letter-spacing: 4px;}

.page-configurateur .colors > li {display: flex;flex-direction: column;align-items: center;margin-right: 30px;}

.page-configurateur .colors > li > label {cursor: pointer;}

.page-configurateur .colors > li > label div {width: 60px;height: 60px;display: block;border-radius: 50%;border: 2px solid #e6e5e4;-webkit-transition: border-color 0.3s ease-in-out;-moz-transition: border-color 0.3s ease-in-out;-o-transition: border-color 0.3s ease-in-out;transition: border-color 0.3s ease-in-out;}

.page-configurateur .colors > li input {display: none;}

.page-configurateur .colors > li input:checked + div {border-color: #102b55;}

.page-configurateur .colors > li span {display: block;margin-top: 10px;text-transform: uppercase;color: #102b55;}

.page-configurateur .colors > li.blanc > label div {background-color: #fff;}

.page-configurateur .colors > li.vert > label div {background-color: #b3dabf;}

.page-configurateur .colors > li.sable > label div {background-color: #e4e0c6;}

.page-configurateur .colors > li.bleu > label div {background-color: #b0d4e4;}

.page-configurateur .colors > li.gris > label div {background-color: #e6e6e6;}



.configSlide {display:block;overflow:hidden;position: relative;}

.configSlide .container {display:flex;flex-direction:row;align-items:flex-start;transition:all .5s ease-in-out;max-width: 100%;padding: 0;}

.configSlide .container > div {flex:1 0 100%;max-width: 100%;padding:  20px 0;}

.configSlide .container .forme .formContain{width: 1000px;max-width: 100%;margin: 0 auto;}

.configSlide .container .formContain.formuleKit{width: 1000px;max-width: 100%;margin: 0 auto;}

[name="pool_list"], [name="type_de_fond"] {border-radius:30px;margin:5px;max-width:100%;position:relative;text-align:center;background-color:#102b55;cursor:pointer;text-transform:uppercase;line-height:2;appearance:none;-webkit-appearance:none;color:#fff;padding:10px 20px;text-align:center;width:300px;}

[name="pool_list"] option, [name="type_de_fond"] option {border-radius:30px;background-color:#102b55;width:100%;text-transform:uppercase;line-height:2;appearance:none;-webkit-appearance:none;color:#fff;padding:10px 20px;text-align:center;}

.selectWrapper{
	position: relative;
	display: flex;
    flex-direction: column;
    align-items: center;
	margin-top: 20px;
}
.selectWrapper:before{
	color: #102b55;
	position: absolute;
	font-size: 0.8rem;
    top: -15px;
	font-weight: bolder;
}
.selectWrapper:first-child:before{
	content: 'Je choisis mon fond';	
}
.selectWrapper:last-child:before{
	content: 'Je choisis ma piscine';
}
.selectWrapper:after,.selectWrapper:after{
	content: '';    
	border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
    display: block;
    height: 8px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 18px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 8px;
}

.imgContainer {position:relative;overflow:hidden;aspect-ratio:1136/454;width:100%;}

.imgContainer .msgAlerte {position:absolute;width:40px;bottom:30px;left:calc(50% - 20px);cursor:pointer;z-index:2;display:block;}

.imgContainer .msgAlerte.disabled {display:none;}

.imgContainer .msgAlerte:before {content:attr(data-text);position:absolute;top:50%;transform:translateY(-50%);left:100%;margin-left:15px;width:200px;padding:10px;border-radius:10px;background:#102b55;color:#fff;text-align:center;display:none;font-size:.8em;}

.imgContainer .msgAlerte:hover:before {display:block;}

.imgContainer img.piscine, .conclusion img.imgPool {aspect-ratio:1136/454;width:100%;object-fit:cover;display:block;}

.imgContainer img.img-volet {aspect-ratio:1136/454;width:100%;object-fit:cover;position:absolute;z-index:1;top:0;left:0;}

.page-configurateur .colors {flex:1 0 100%;justify-content:center;}



.page-configurateur .stepIndicator ul:before {display:none;}

.page-configurateur .stepIndicator ul {justify-content:center;}

.page-configurateur .stepIndicator ul li {position:relative;width:calc(100%/6);}

.page-configurateur .stepIndicator ul li:before {content:'';background-color:#e6e5e4;position:absolute;top:50%;left:50%;height:5px;width:calc(100% - 2px);z-index:0;}

.page-configurateur .stepIndicator ul li:first-child:before {background-color:#e6e5e4;}

.page-configurateur .stepIndicator ul li:last-child:before {display:none;}

.page-configurateur .stepIndicator ul li.active:before {background-color:#102b55;}

.page-configurateur .stepIndicator ul li a {position:relative;z-index:1;margin: 0 auto;}



.voletPool, .stairPool {display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-items:center;padding:0 20px;margin:0 auto;padding:20px;}

.voletPool label, .stairPool label {display:flex;flex-direction:row;justify-content:center;align-items:center;margin:5px 0;padding:0 10px;text-align:center;cursor:pointer;}

.voletPool label input, .stairPool label input {display:none;}

.voletPool label div, .stairPool label div {background:#e6e5e4;color:#102b55;display:block;text-align:center;padding:10px 20px;border-radius:20px;text-transform:uppercase;}

.voletPool label input:checked + div, .stairPool label input:checked + div {background:#102b55;color:#fff;}

.voletPool label input:disabled + div, .stairPool label input:disabled + div {background:#e6e5e4;color:#fff;cursor:not-allowed;}



.stairPool {position:relative;display:none;}

.stairPool .title-stair {position:absolute;top:-10px;color:#e6e5e4;}





.choice {display:flex;flex-direction:row;justify-content:center;align-items:center;margin:0 auto;padding:0 15px;width: 100%;flex-wrap: wrap;}



.formuleKit {margin-bottom:20px;}

.formuleKit .kitBox{cursor: pointer;}

.formuleKit .kitBox input {margin:0 auto;cursor:pointer;}

.formules .formContain .kitBox [type="radio"]{display: none;}

.formules .formContain .kitBox [type="radio"] + div{position: relative;z-index:1;}

.formules .formContain .kitBox [type="radio"] + div:before{content: '';width: 100%;height: 100%;left:0;top:0;display:block;background-color:#f6f7f8;position: absolute;z-index: 1;}

.formules .formContain .kitBox [type="radio"] + div *{z-index: 2;position: relative;}

.formules .formContain .kitBox [type="radio"] + div:after{content: '';width: calc(100% - 2px);height: calc(100% - 2px);display:block;background-color:#102b55;position: absolute;z-index:0;top: 1px;left: 1px;transition: all .3s ease-in-out;}

.formules .formContain .kitBox [type="radio"]:checked + div:after{left: 5px;top: 5px;}



.equipements .formContain {display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0 20px;margin:0 auto;padding:20px;}





.equipements .formContain label{margin: 10px;width: 180px;}

.equipements .formContain label [type="checkbox"]{display: none;}

.equipements .formContain label [type="checkbox"] + div{position: relative;z-index:1;flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;margin:0 auto;padding:15px;color:#102b55;text-transform:uppercase;}

.equipements .formContain label [type="checkbox"] + div span{position: relative;text-transform: initial;}

.equipements .formContain label [type="checkbox"] + div:before{content: '';width: 100%;height: 100%;left:0;top:0;display:block;background-color:#f6f7f8;position: absolute;z-index: 1;}

.equipements .formContain label [type="checkbox"] + div *{z-index: 2;position: relative;}

.equipements .formContain label [type="checkbox"] + div:after{content: '';width: calc(100% - 2px);height: calc(100% - 2px);display:block;background-color:#102b55;position: absolute;z-index:0;top: 1px;left: 1px;transition: all .3s ease-in-out;}

.equipements .formContain label [type="checkbox"]:checked + div:after{left: 5px;top: 5px;}

.equipements .formContain label img {mix-blend-mode:difference;max-width:100%;width:100px;margin-bottom:15px;object-fit:contain;aspect-ratio:1/1;}



.wpcf7-form label.textarea {width:100%;}

.wpcf7-form textarea {resize:none;}

.wpcf7-form input[type="submit"] {text-transform:uppercase;letter-spacing:2px;padding:10px 50px;}



.conclusion .resume {color:#102b55;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;}

.conclusion .resume .col-12 + div {text-align:center;}

.conclusion .resume .col-12 + div h3 {margin-bottom: 10px;text-align: center;align-items: center;font-weight:bolder;}

.conclusion .resume p {margin-bottom:10px;text-align:center;}

.conclusion .resume p > span:not([class]) {font-weight:bolder;}

.conclusion .wpcf7 {width:1200px;max-width:100%;margin:0 auto 0 auto;padding: 0 15px;}



.merci section > div {position:relative;}

.merci section > div .text-merci {position:absolute;width:100%;height:100%;display:flex;text-align:center;align-content:center;flex-direction:column;justify-content:center;background:#102a5593;}

.merci section > div .text-merci p {margin-bottom:20px;}

.merci section > div .text-merci h1 {font-size:1.5em;text-transform:uppercase;margin-bottom:20px;}



/*MODIFICATIONS FRANCOIS*/



/*.page-configurateur header, .page-configurateur footer{display: none;}*/

.page-configurateur #burgerBtn{position: relative;top: auto;right: auto;}

.page-configurateur header {justify-content: space-between;height: auto;}

.page-configurateur header .logo{position: initial;}

.page-configurateur header .menuLite #quickBtn{display: none;}



.page-configurateur .stepIndicator{margin-bottom: 15px;}

.page-configurateur .titleStyle {margin-bottom: 20px;line-height: 1.2;}

.page-configurateur .titleStyle.lite {font-size: 1.5rem;}

.page-configurateur .titleStyle.lite span{font-size: 60px;}    



.configSlide .container > .forme{padding: 20px 15px;}

.poolBox > div:not(.openList){padding: 0;}

.poolBox > div:not(.openList) img{max-height: 100%;}

.page-configurateur .formContain .poolBox > div:not(.openList) span{margin-top: 10px;}

.page-configurateur .formContain .poolBox input:checked + div > div .formeShape{left: 5px;top: 5px;}



.page-configurateur .btn{margin-top: 15px;}



[name="pool_list"], [name="type_de_fond"]{line-height: 1;}

.page-configurateur .colors{margin: 20px auto 0 auto;}

.page-configurateur .colors > li span{font-size: 0.9rem;margin-top: 5px;}

.page-configurateur .colors > li > label div{height:30px;border-radius: 30px;}



.voletPool, .stairPool{padding: 10px;}

.voletPool label div, .stairPool label div{padding: 5px 10px;}



.page-configurateur .formuleKit .kitBox > div{padding: 10px;height: 100%;}

.formuleKit .kitBox > div .block-text p{margin: 7.5px 0;}

.equipements .formContain label [type="checkbox"], .formules .formContain [type="radio"]{margin: 15px auto 0 auto;}



.conclusion img.imgPool{aspect-ratio: 0;width:1200px;height:588px;max-width:100%;object-position: bottom;}

.conclusion .col-12{margin-top: 30px;}

.conclusion .wpcf7 {width:800px;}





/*RESPONSIVE*/
@media screen and (max-width:1350px){
	.conclusion img.imgPool{
		max-height: 400px;
    	height: auto;
	}	    
}

@media screen and (max-width:1023px){

	.page-configurateur .titleStyle.lite span{font-size: 45px;}

}



@media screen and (max-width:768px){

	.page-configurateur .stepIndicator ul li{width: 70px;}

	.page-configurateur .formContain{justify-content: center;}

	.page-configurateur .formContain .poolBox{width: 130px;}

	.page-configurateur .formContain .poolBox span{letter-spacing: 0px;}



	.page-configurateur .colors > li{margin:5px 7.5px;}

	.page-configurateur .colors > li span {font-size: 0.8rem;text-transform: inherit;}



	.page-configurateur .btnContain{flex-wrap: wrap;}

	.conclusion img.imgPool {
		max-height: 331px;
	}

}

@media screen and (max-width:560px){

	.page-configurateur header{position: fixed;padding: 0;}

	.page-configurateur header #burgerBtn{position: fixed;right: 2.5%;top: 20px;}

	.page-configurateur header .logo{display: none;}

	.page-configurateur main{padding: 0;}

	.page-configurateur .top-page{border-radius: 0;padding-top: 65px;}

	.page-configurateur .titleStyle.lite span{font-size: 38px;}

	.imgContainer .msgAlerte{
		width: 100%;
		left: 0;		
		bottom: 0;
		text-align: center;
	  }
	  .imgContainer .msgAlerte img{
		width: 40px;
	  }
	  .imgContainer .msgAlerte:before{
		top: -60px;
		transform: translateY(0);
		left: 0;
		margin-left: 0;
		width: 100%;
	  }
	.conclusion img.imgPool {
		max-height: 260px;
	}
	.merci section{
		padding: 100px 2.5% 50px 2.5%;
	}
	.merci section > div{
		height: 300px;
	}
	.merci section > div img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		-o-object-fit: cover;
		-o-object-position: center;
		vertical-align: middle;
	}
	.merci section > div .text-merci h1{
		font-size: 1.2rem;
	}

}

@media screen and (max-width:450px){

	.page-configurateur .stepIndicator ul li{width: 50px;}

	.conclusion img.imgPool {
		max-height: 220px;
	}

}

@media screen and (max-width:370px){

	.page-configurateur .titleStyle.lite span{font-size: 32px;}

	.page-configurateur .formContain .poolBox{width: 105px;}
	.volet{min-height: 490px;}

	.conclusion img.imgPool {
		max-height: 180px;
	}

}