@import url('https://fonts.googleapis.com/css2?family=Hind:wght@400;600;700&display=swap');

/* -- ** Initialize ** -- */
* {box-sizing: border-box; margin: 0;}
body {font-family: 'Hind', sans-serif; display: flex; justify-content: space-between; flex-direction: column;; min-height: 100vh}
h1, h2 {font-weight: 900;}
h1 {font-size: 2rem; margin: 0; text-transform: uppercase;}
h2 {margin-bottom: 0; text-transform: uppercase; color: black}
.lead {font-size: 1.125rem; font-weight: 500;}
.bold {font-weight: 900;}
.text-left {text-align: left;}
.text-grey {color: #8A8A8A}
.grey-light {color: #899FAC;}
.bg-blue{background: #00ACEC}
.opacity-0{opacity: 0; pointer-events: none;}
small{line-height: 1.2rem; display: inline-block; margin-bottom: 0.75rem}
.menu-open{overflow: hidden; position: relative; max-height: 100vh}

/* -- ** Spacing ** -- */
.container{width: 95%; max-width: 1400px; margin: auto;}
.ms-2 {margin-left: 0.5rem;}
.me-2 {margin-right: 0.5rem;}
.ms-4 {margin-left: 2.5rem;}
.me-4 {margin-right: 2.5rem;}

/* -- ** Button ** -- */
button, .btn-large {font-family: 'Hind', sans-serif; text-decoration: none; display: flex; align-items: center; justify-content: center; line-height: 1rem; font-weight: 600; width: 220px;height: 70px;color: #1B2634; transition: 350ms ease; border: 0;font-size: 1rem;background: #BFDC54;box-shadow: 0px 7px 14px rgba(0, 0, 0, 0.15);border-radius: 7px;margin: 4px;}
button i, .btn-large i{margin-left: 5px}
button:disabled{opacity: 0.5}
button:not(:disabled, .back):hover, .btn-large:hover{transform: scale(1.025); cursor: pointer; background-color: #B8D353}
button.back, button.redo{background: #FFF; cursor: pointer; color: #899FAC; border: 1px solid #899FAC; box-shadow: none;}
button.back:hover{transform: scale(1.025);}
button.back i{margin-left: 0px; margin-right: 5px}

.steps-buttons{display: flex; justify-content: center;}

/* -- ** Header ** -- */
header, section, h1, p {text-align: center;}
header .container{display: flex; padding-bottom: 1.5rem; justify-content: center; align-items: center;}
header .img-wrapper{width: 200px; background-color: white; padding: 1rem 0 0.5rem; box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25);}
header .img-wrapper img{width: 50%}
header .go-back {display: none;}
header .logo {max-width: 300px;}
header .steps-menu {display: none;}
fieldset{display: flex;justify-content: center;border: none;margin-bottom: 5rem;flex-wrap: wrap;}
legend{color: #4D4D4D;line-height: 150%; margin-bottom: 2rem}
section{position: relative; z-index: 10}

/* -- ** Input radio custom ** -- */
input[type="radio"]{display: none;}
input[type="radio"]+label{font-weight: 700;color: #00ACEC;width: 140px;height: 140px; cursor: pointer; background-color: #F8F8F8; margin:.5rem;transition: 350ms ease;display: flex; flex-direction: column; align-items: center;justify-content: center;padding: .75rem;font-size: .85rem;} 
input[type="radio"]+label:before{content: ""; background-position: center center; background-size: contain; background-repeat: no-repeat;}
input[type="radio"]+label span{line-height: 16px}
input[type="radio"]:not(:checked)+label:hover{box-shadow: 0px 14px 16px -10px rgba(27, 38, 52, 0.4); transform: scale(1.025);}
input[type="radio"]:checked+label{background-color: #00ACEC;color: #FFF; transform: scale(1.025);}

/* Construction */
input[id="Maison individuelle"]+label:before{background-image: url('./img/icon/mi.svg'); width: 48px; height: 48px; margin-bottom: 10px}
input[id="Maison individuelle"]:checked+label:before{background-image: url('./img/icon-white/mi.svg');}
input[id="Collectif d'habitation"]+label:before{background-image: url('./img/icon/collectif.svg'); width: 48px; height: 48px; margin-bottom: 10px}
input[id="Collectif d'habitation"]:checked+label:before{background-image: url('./img/icon-white/collectif.svg');}
input[id="Établissement recevant du public"]+label:before{background-image: url('./img/icon/erp.svg'); width: 48px; height: 48px; margin-bottom: 10px}
input[id="Établissement recevant du public"]:checked+label:before{background-image: url('./img/icon-white/erp.svg');}
input[id="Tertiaire"]+label:before{background-image: url('./img/icon/tertiaire.svg'); width: 48px; height: 48px; margin-bottom: 10px}
input[id="Tertiaire"]:checked+label:before{background-image: url('./img/icon-white/tertiaire.svg');}

/* Nature travaux */
input[id="Rénovation"]+label:before{background-image: url('./img/icon/renovation.svg'); width: 48px; height: 48px; margin-bottom: 10px}
input[id="Rénovation"]:checked+label:before{background-image: url('./img/icon-white/renovation.svg');}
input[id="Neuf"]+label:before{background-image: url('./img/icon/neuf.svg'); width: 48px; height: 48px; margin-bottom: 10px}
input[id="Neuf"]:checked+label:before{background-image: url('./img/icon-white/neuf.svg');}

/* Finition */
input[id="Parements collés"]+label:before{background-image: url('./img/icon/parements-colles.svg'); width: 48px; height: 48px; margin-bottom: 10px}
input[id="Parements collés"]:checked+label:before{background-image: url('./img/icon-white/parements-colles.svg');}
input[id="Enduit"]+label:before{background-image: url('./img/icon/enduit.svg'); width: 48px; height: 48px; margin-bottom: 10px}
input[id="Enduit"]:checked+label:before{background-image: url('./img/icon-white/enduit.svg');}

.steps-wrapper h1,
.steps-wrapper p {color: white}
.steps-wrapper ul.steps:before{content: ""; width: 100%; transform: translateY(100%); position: absolute; bottom: 2px; left: 0; height: 50%; background-color: white;}
.steps-wrapper ul.steps{padding: 2rem 4rem; position: relative; box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.15); background-color: white; list-style: none;display: flex;justify-content: center;margin-top: 2rem;margin-bottom: 2rem;}
.steps-wrapper ul.steps li{font-weight: 900; font-size: 15px; line-height: 19px; color: #848A92;margin-right: 1%;position: relative;width: calc(100% / 6);}
.steps-wrapper ul.steps li:after{content: "";margin-top: 10px; display: block;background-color: #848A92;height: 5px;width: 100%;}
.steps-wrapper ul.steps li span{min-height: 38px; display: flex; align-items: flex-end;}
.steps-wrapper ul.steps li.done, ul.steps li.active{color: #00ACEC; cursor: pointer;}
.steps-wrapper ul.steps li.done:after, ul.steps li.active:after{background-color: #00ACEC;}
.steps-wrapper ul.steps .step-choice, ul.steps .step-choice img {display: none;}

/* -- ** step 6 ** -- */
#step6 fieldset {margin-bottom: 2rem;}

.steps .close-menu {display: none;}

/* -- ** Table style step 5 ** -- */
th, td {padding: 0.75rem 1.25rem; border-collapse: collapse;}
.resume-head {display: flex;}
.resume-head .product-img {width: 100%; height: auto; width: 21.375rem; max-height: 21.375rem; box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.1);}
.resume-head .finition-img {width: 100%; height: auto; max-width: 28px; border: #36647E solid 2px; border-radius: 50%;}

.caracteristiques {margin-bottom: 1rem; width: 100%;}
.caracteristiques tfoot a {color: #BFDC54; font-weight: 900;}

.caracteristiques tbody tr:nth-child(odd), .comparatif tbody tr:nth-child(odd) {background-color: #F4FBFD;}
.caracteristiques tbody th {font-size: 1rem; font-weight: 400; text-align: left;}
.caracteristiques tbody td,
.caracteristiques tbody td a {font-size: 0.813rem; color: #8A8A8A; text-align: left;}

.caracteristiques tfoot th {font-size: 1rem; font-weight: 400;}

/* -- ** Resume steps ** -- */
.resume-head ul {list-style: none; padding: 0; display: flex; align-items: flex-start; justify-content: space-between;}
.resume-head ul li {display: block; text-align: center; max-width: 115px}
.resume-head ul li img:not(.line){width: 48px; height: 48px; object-fit: contain;}
.resume-head ul li .pose {margin-bottom: 1rem; height: 48px; display: flex; justify-content: center; align-items: center;}
.resume-head ul li span {display: block; color: #1B2634; line-height: 100%}
.resume-head ul li .line {position: relative; top: 12px; margin: 0 10px}
.resume-head .subtitle {color: #00ACEC; font-size: 0.875rem; margin-top: 0.5rem; line-height: 15px;}

.result-container{max-width: calc(900px + 2rem); margin: auto; display: flex; margin-bottom: 2rem}
.result-container > div{width: 50%; padding: 0 1rem}

.swiper .swiper-slide img{width: 100%; object-fit: contain;}

.swiper-thumb .swiper-slide{position: relative; cursor: pointer;}
.swiper-thumb .swiper-slide:before{content: ""; display: block; width: 100%; padding-top: 100%}
.swiper-thumb .swiper-slide img{height: 100%; object-fit: cover; border: 1px solid #DCDCDC; position: absolute; top: 0; left: 0}
.swiper-thumb .swiper-slide.swiper-slide-thumb-active img{border: 2px solid #00ACEC;}

.swiper-principal-wrapper{position: relative;  margin-bottom: 1rem; background-color: white; filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.1));}
.swiper-principal-wrapper:before{content: ""; display: block; width: 100%; padding-top: 100%}
.swiper-principal-wrapper .swiper-principal{ position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.swiper-principal img,
.swiper-principal .swiper-wrapper,
.swiper-principal .swiper-slide,
.swiper-principal .glightbox{height: 100%}

/* # Footer # */
footer{color: #A9ABAF; text-align: center; padding: 6rem 0 1.5rem}
footer small{display: block;}
footer .logo-aquapnel{max-width: 150px; margin-bottom: 1rem}

/* # Responsive # */
@media screen and (max-width: 1200px) {
	.steps-wrapper ul.steps{padding: 2rem 2rem}
	.steps-wrapper ul.steps li{font-size: 13px}
}

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

	.bg-blue{background-color: white}

	/* -- ** Spacing ** -- */
	.me-md-0 {margin-right: 0;}
	
	/* -- ** Text Corpus ** -- */
	h2 {font-size: 2rem;}
	.title, p {display: none;}

	/* -- ** Table style step 5 ** -- */
	.resume-head {flex-direction: column;}
	.resume-head .product-img {display: none;}
	.resume-head ul {margin-top: 1rem; margin-right: 0;}
	
	/* -- ** Progress steps ** -- */
	ul.steps li:before {width: 100%;}
	.steps-buttons {background-color: #FFF; box-shadow: 0px 0px 28px 0px rgb(0 0 0 / 5%); padding: 0.75rem 1.5rem; position: fixed; width: 100%; bottom: 0;}
	.steps-buttons img {position: relative; top: 2px;}
	.icon {position: relative; top: -4px;}

	/* -- ** Custom Input ** -- */
	input[name="finition"]+label {margin: 0.75rem 0.75rem 4rem 0.75rem;}

	.table-wrapper{max-width: 100vw; overflow: auto; padding: 2rem 2rem; margin: -2rem -2rem 0;}

	/* -- ** Text Corpus ** -- */
	h2 {margin: 0.5rem 0 0 0; font-size: 24px; padding: 0 1.5rem}

	/* -- ** Container, button ** -- */
	.container {width: 100%; padding:1rem 2rem 0 2rem;}
	#step5 p, #step5 h2 {text-align: center;}
	button, .btn-large{width: 100%;}

	/* -- ** Header ** -- */
	header h1, header p {display: none;}
	header .go-back {display: initial; cursor: pointer; transition: 350ms ease}
	header .img-wrapper{width: auto; box-shadow: none;}
	header .logo {width: 180px;}
	header .container{justify-content: space-between}
	header .steps-menu {display: initial; cursor: pointer; position: relative;}
	header .steps-menu i {position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); color: #00ACEC}
	header .steps-menu svg {width: 44px; height: 44px;}
	header .steps-menu svg .bg {fill: none; stroke-width: 2px; stroke: #E3E3E3;}
	header .steps-menu svg .meter {fill: none; stroke-width: 4px; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 114; stroke-dashoffset: 114; stroke: #00ACEC; transition: 350ms ease;}
	
	header .steps-menu svg.step-circle-1 .meter {stroke-dashoffset: calc((114 / 5) * 4);}
	header .steps-menu svg.step-circle-2 .meter {stroke-dashoffset: calc((114 / 5) * 3);}
	header .steps-menu svg.step-circle-3 .meter {stroke-dashoffset: calc((114 / 5) * 2);}
	header .steps-menu svg.step-circle-4 .meter	{stroke-dashoffset: calc((114 / 5) * 1);}
	header .steps-menu svg.step-circle-5 .meter, header .steps-menu svg.step-circle-6 .meter {stroke-dashoffset: 0;}
	
	header .steps-menu .current-step {display: block; position: absolute; top: 12px; left: 12px; font-weight: 900; font-size: 0.9rem; color: #00ACEC;}

	/* -- ** Progress steps ** -- */
	.steps-wrapper {position: fixed; padding: 0; top: 0; right: -100%; width: 75%; height: calc(100vh); background-color: #FFF; margin: 0; z-index: 9999; display: block; transition: 500ms ease;}
	.steps-wrapper ul.steps{padding: 2.5rem; margin-top: 0; margin-bottom: 0; box-shadow: none; height: 100vh; display: block; overflow: auto;}
	.steps-wrapper ul.steps:before{display: none;}
	.steps-wrapper ul.steps span {margin-bottom: 0.75rem; display: block;}
	.steps-wrapper ul.steps span p {color: #5AB2D8; text-transform: lowercase;}
	.steps-wrapper ul.steps .close-menu {display: block; cursor: pointer; padding-bottom: 1.5rem;}
	.steps-wrapper.open {right:0;}
	.steps-wrapper ul.steps li {display: block; padding: 1rem 0 0.5rem; width: 99%}
	.steps-wrapper ul.steps .step-choice {color: #1B2634; font-size: 0.875rem; font-weight: 900; display: block!important;}
	.steps-wrapper ul.steps .step-choice img {position: relative; top: 6px; display: initial; width: 25px}

	fieldset{margin-bottom: 7rem}

	/* -- ** Table style step 5 ** -- */
	.caracteristiques thead, .caracteristiques th, .caracteristiques td, .caracteristiques tr {display: block; padding: 0.5rem;}
	.caracteristiques td{padding: 0 0.5rem 0.5rem;}
	.caracteristiques th{padding: 0.5rem 0.5rem 0.25rem;}
	.resume-head {margin-top: 1rem;}
	.resume-head .product {display: none;}
	.steps-buttons {display: flex; z-index: 1}
	.steps-buttons .back{width: 70px; display: none;}
	.steps-buttons .back span{display: none;}
	.steps-buttons .back i{margin: 0}

	footer{display: none;}

	/* # Backdrop # */
	.backdrop{position: absolute; top: 0; left: 0; transition: 500ms ease; width: 100vw; height: 100vh; background-color: black; z-index: 11; opacity: 0; pointer-events: none;}
	.backdrop.active{opacity: 0.4; pointer-events: initial;}

	#step6 fieldset,
	#step6 fieldset legend{margin-bottom: 0}
	#step6 .steps-buttons .back{display: block;}

	.resume-head{display: none;}

	.result-container{flex-direction: column; margin-bottom: 7rem}
	.result-container > div{width: 100%; padding: 0 1rem}
	.result-container > div:first-child{ margin-bottom: 2rem }
}