:root{--primary-color:#007bff;--light-primary-color:#e6f2ff;--text-color:#333;--background-color:#f4f7fc;--card-background:#ffffff;--card-shadow:0 10px 30px rgba(0, 0, 0, 0.07);--border-color:#dee2e6;--progress-bar-background:#e9ecef}

/*HOMEPAGE*/
.home main::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);z-index:1}
main .hero {z-index: 2}
main .intro {max-width: 1000px;margin: 40px auto;color: white;font-size: 16px;font-family: 'Montserrat'}
.hero .search-bar {padding: 5rem auto}
main .hero p {max-width: 1000px;margin: 40px auto;color: white;font-size: 16px}
.textseo {margin-bottom: 70px}
.textseo div p {text-align: left}
.estimation .flex span {font-weight: bold;font-size: 20px;margin-bottom: 1rem}
.estimation .flex > div h3 {margin-top: 0;margin-bottom: 3rem;font-weight: 200;font-family: "Montserrat"}

.estimation .flex{display:flex;flex-wrap:wrap;gap:40px;position:relative}
.estimation .flex::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2px;height:60%;background:#c19a5f}
.estimation .flex > div{min-width:450px;width:auto;position:relative;flex:1}



/*GENERALES*/
/*section*/
body.landing-page section {padding: 0 1rem}
/*titres h2*/
#simulateur h2, .howitworks h2, .pourquoi h2, .testimonials h2, .contact h2, .conciergerie h2 {text-align: center;margin:0 0 3rem;text-transform: uppercase;font-size: 26px;color: black;font-weight: 600;padding: 0 1rem}
body.landing-page h2::after {content: '';display: block; width: 200px;height: 2px;background-color: #c19a5f;margin: 20px auto 0}
/*titres h3*/
section.testimonials h3, section.team h3 {text-transform:capitalize;color:black;font-size: 18px}
/*p*/
body.landing-page p {color: black}

/*SECTION TOP HEADER*/
body.landing-page header i {color: #c19a5f;margin-right: 1rem}
body.landing-page .hamburger {display: none}
body.landing-page header .menu-icons {display: flex!important;flex-wrap: wrap;justify-content: center}
body.landing-page header .menu-icons a {margin: 1rem}
body.landing-page header .menu-icons a:hover {text-decoration: underline}
body.landing-page .top-menu {height: auto;max-height: none;position: sticky}
body.landing-page .top-menu .logo {margin: 1rem}
body.landing-page .top-menu .container {flex-wrap: wrap;margin: 0 1rem;padding: 0;justify-content: space-between}

/*SECTION 1 : hero */
body.landing-page .hero-banner {background: url("https://media.apimo.pro/cache/00cf0635513878720b39c77ab1d2bee8_86558c3a7f_1920-original.jpg");background-position: center 56%;background-size: cover}
body.landing-page .hero-banner {height: 550px;padding: 0;justify-content: center;text-align: center;margin-top: 0}
body.landing-page .hero-banner::before {background: rgba(255, 255, 255, 0.6)}
body.landing-page .separator {margin: auto}
body.landing-page .hero-content {max-width: 90%;width: 90%;transform: none!important;margin-top: -5rem}
body.landing-page .hero-content span {margin: 1rem;padding: .5rem 1rem;text-align: center;border: 1px solid #c19a5f;border-radius: 5px;position: relative;background: rgba(193, 154, 95, .5);box-shadow: 0 0 20px rgba(193, 154, 95, .5);display: inline-block}
body.landing-page .hero-content h1 {font-weight: 700;font-size: 2rem;color: black}
body.landing-page .hero-content p {color: black;font-size: 1.25rem}

/*SECTION 2 : simulateur */
body.landing-page .section-header {display: flex;flex-direction: column;justify-content: center;align-items: center;margin: -10rem auto 6rem;position: relative;z-index: 2}
.progress-container,.simulator-container{width:100%;overflow:hidden;border-radius:20px}
body.landing-page p.step-subtitle {font-weight: 700;color: #c19a5f} 
body.landing-page p.step-subtitle em {font-style: normal;display: inline-block;margin-top: 2rem}
.choice-box.selected,.choice-box:hover{border-color:#c19a5f;transform:translateY(-5px)}
.simulator-container{background:var(--card-background);box-shadow:10px 10px 30px rgba(0, 0, 0, 0.3);padding:30px 40px;max-width:800px;text-align:center}
.simulator-container ul {padding-left: 0;list-style-type: none;margin-bottom: 25px;display: flex;justify-content: space-around;flex-wrap: wrap}
.simulator-container ul li {margin: 1rem}
.progress-container{background-color:var(--progress-bar-background);margin-bottom:30px;height:10px}
.progress-bar{width:0%;height:100%;background-color:#c19a5f;border-radius:20px;transition:width .4s ease-in-out}
.choice-box,.nav-button{cursor:pointer;transition:.3s}
.step{display:none;animation:.5s ease-in-out fadeIn}
.step.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.step-title{font-size:2em;font-weight:700;margin-bottom:8px}
.step-subtitle{font-size:1.1em;color:#6c757d;margin-bottom:35px!important}.question-label{font-size:1.2em;font-weight:600;margin-bottom:20px;display:block}.input-field{width:100%;padding:15px;border:1px solid var(--border-color);border-radius:10px;font-size:1em;font-family:Poppins,sans-serif;box-sizing:border-box}
.input-field:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--light-primary-color)}
.nav-button{background:var(--primary-color);color:#fff;font-size:1.1em;font-weight:600;padding:15px 40px;border:none;border-radius:50px}
.choices-container{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin: 3rem 0}
.choice-box{border:2px solid var(--border-color);border-radius:12px;padding:15px;text-align:center;flex:1;min-width:150px;align-content: center}
.choice-box svg{width:40px;height:40px;color:var(--primary-color);margin-bottom:10px}
.choice-box.selected{background-color:#c19a5f}
.choice-box span{font-size:.95em}
.loader-container{padding:40px 0}
.loader{border:4px solid var(--progress-bar-background);border-top:4px solid var(--primary-color);border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}#loader-text{font-size:1.1em;color:#6c757d;font-weight:500;transition:opacity .5s}

@keyframes gentleShake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-2px); }
  20% { transform: translateX(2px); }
  30% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  50% { transform: translateX(-1px); }
  60% { transform: translateX(1px); }
  70% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
  90% { transform: translateX(0); }
}

.shake-animation {animation: gentleShake 0.8s ease-in-out}

/*SECTION assurance*/
section.assurance {margin-bottom: 6rem}
.assurance ul {list-style-type: none;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;padding-left: 0}
.assurance ul li {width: 200px!important;height: 150px;display: flex;flex-direction: column;justify-content: space-around;align-items: center}
.assurance ul li i {color: #c19a5f}
.assurance ul li h3 {font-weight: 500;font-size: 16px!important;margin: 0;padding: 0}

/*SECTION 3 : avis */
section.testimonials{margin:5rem auto;max-width: 1400px}
section.testimonials h2{grid-column:span 12}
section.testimonials .cards{display:flex;justify-content: center;align-items: center;flex-wrap: wrap}
section.testimonials .cards .card{cursor:pointer;padding:2em;border-radius:1rem;align-items:center;transition:.3s;position:relative;border:.094rem solid transparent;display: flex;flex-direction: column;justify-content: center;align-items: center;min-width: 150px;text-align: center}
section.testimonials .cards .card img{display:block;width:3.35rem;height:3.35rem;border-radius:50%;filter:grayscale(1);transition:.5s}
section.testimonials .cards .card>div p{text-transform:capitalize;color:#767676;font-size:.9rem}
section.testimonials .cards .card.active{background:#fff;border:.094rem solid #0f172a14}
section.testimonials .cards .card.active .gradient{background-image:linear-gradient(to right,#FFF,#c19a5f,#c19a5f,#FFF);width:50%;height:.094rem;position:absolute;content:"";bottom:-.063rem;left:50%;transform:translateX(-50%);box-shadow:0 .125rem .75rem #4343c84d}section.testimonials .cards .card.active img{filter:grayscale(0)}
section.testimonials .content{grid-column:span 12;position:relative;width:70%;overflow:inherit;margin:2rem auto 0}
section.testimonials .content .contentBox {position:relative;width:100%;height:100%;display:none}
section.testimonials .content .contentBox.active {display: flex}
section.testimonials .content .contentBox .text{padding-bottom:2rem}
section.testimonials .content .contentBox h4{transition:.5s;opacity:0}
section.testimonials .content .contentBox p{transition:.5s;opacity:0;margin-top:1.25rem}
section.testimonials .content .contentBox span{display:inline-block;transition:.5s;opacity:0;margin-top:.625rem}
section.testimonials .content .contentBox span svg{width:1.25rem;color:#eca633}
section.testimonials .content .contentBox.active h4{opacity:1;transition-delay:0.5s}
section.testimonials .content .contentBox.active span{opacity:1;transition-delay:0.7s}
section.testimonials .content .contentBox.active p{opacity:1;transition-delay:0.9s}


/*SECTION 4 : how it works*/
.howitworks {max-width: 1400px;margin: 0 auto 5rem}
.howitworks .row {display: flex;flex-wrap: wrap;justify-content: center}
.howitworks .row > div.col-lg-4 {width: 360px;margin: 1rem 3rem}
.howitworks .row .work-process {display: flex;flex-direction: column;justify-content: center;align-items: center}
.howitworks .step-desc {text-align: center}
.howitworks .step-desc h4 {text-transform: uppercase;color: #c19a5f}
.howitworks .step-desc p {margin-bottom: 0}
/*codepen*/
.step-num {height:50px;width:50px;top:0}
.step-icon,.step-num{background:#fff;text-align:center}
.step-num,.step-num-box{display:inline-block}
.pos-r,.step-icon span,.work-process{position:relative}
.section-title p{font-size:16px}
.title-effect{position:absolute;left:0;opacity:.5;animation:12.8s steps(1) infinite rotation}
.text-center .title-effect{left:50%;margin-left:-25px}
.text-center .section-title h6{padding:15px 0}
.title-effect .bar-top{width:100%;height:7px;position:absolute;top:0;left:0;transform-origin:left top;transform:scale(0,1);animation:3.2s linear infinite bar-top}.title-effect .bar-right{width:7px;height:100%;position:absolute;top:0;right:0;transform-origin:left top;transform:scale(1,0);animation:3.2s linear infinite bar-right}.title-effect .bar-bottom{width:100%;height:7px;position:absolute;right:0;bottom:0;transform-origin:right top;transform:scale(0,1);animation:3.2s linear infinite bar-bottom}.title-effect .bar-left{width:7px;height:100%;position:absolute;left:0;bottom:0;transform-origin:left bottom;transform:scale(1,0);animation:3.2s linear infinite bar-left}.title{position:relative}.section-title h2{margin-bottom:15px}.step-num{border-radius:50%;box-shadow:0 12px 20px 0 rgba(117,178,240,.4);color:#c19a5f;font-size:18px;font-weight:600;right:0;line-height:55px;position:absolute}.theme-bg .work-process h4,.theme-bg .work-process p{color:#fff}.step-icon{width:140px;height:140px;position:relative;border:3px solid #fafaff;border-radius:50%;line-height:140px;font-size:40px;color:#c19a5f}.step-icon span::after,.step-icon span::before{border-radius:50%;content:"";height:40px;position:absolute;width:40px;z-index:-1}.step-icon span::after{background:#cdf3f6;height:25px;left:-10px;top:5px;width:25px}.step-icon span::before{background:#d4f8e6;bottom:0;right:-10px}.dark-bg .step-icon{color:rgba(255,255,255,.9);background:0 0;border-color:rgba(255,255,255,.1)}.dark-bg .step-desc h4{color:#2575fc}.dark-bg .step-desc p{color:rgba(255,255,255,.7)}.step-num-box{position:relative;margin-bottom:20px}#svg-container{position:absolute;left:52%;z-index:-1;transform:translateX(-50%);width:75%}#svgC{margin:0 auto;width:100%}@keyframes rotation{0%{transform:rotate(0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}@keyframes bar-top{0%,100%{transform:scale(0,1)}12.5%,87.5%{transform:scale(1,1)}}@keyframes bar-right{0%,100%,12.5%,87.5%{transform:scale(1,0)}25%,75%{transform:scale(1,1)}}@keyframes bar-bottom{0%,100%,25%,75%{transform:scale(0,1)}37.5%,62.5%{transform:scale(1,1)}}@keyframes bar-left{0%,100%,37.5%,62.5%{transform:scale(1,0)}50%{transform:scale(1,1)}}@keyframes opacitychange{0%,100%{opacity:0}60%{opacity:1}}@media (max-width:1200px){#svg-container{width:85%}}@media (max-width:992px){.md-mt-5{margin-top:50px!important}.work-process .box-loader{display:none}#svg-container{width:100%;transform:rotate(90deg);left:0;top:50%}}


/*SECTION BG*/
section.img-1 {background: url("/img/ile-maurice-plage.jpg")}
section.img-2 {background: url("/img/ile-maurice-plage-2.jpg")}
section.background {height: 400px;background-position: center;background-size: cover;background-repeat: no-repeat}



/*SECTION 5 : pourquoi*/
section.pourquoi {text-align: center}
section.pourquoi h2, section.conciergerie h2 {margin-bottom: 3rem}
section.pourquoi a#alone {margin-bottom: 5rem}
section.pourquoi h3 {text-transform: uppercase}
section.pourquoi p {text-align: left}
section.pourquoi .take-care p {text-align: center}
section.pourquoi .flex {display: flex;flex-wrap: wrap;max-width: 1600px;margin: 0 auto 5rem;justify-content: space-around}
section.pourquoi .flex .court {margin: 0}
section.pourquoi .flex .court.gauche {margin-right: 3rem}
section.pourquoi .flex .court.droite {margin-left: 3rem}
section.pourquoi .flex img {max-width: 700px;border-radius: 5px;box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25)}
section.pourquoi .flex .long {display: flex;flex-direction: column;justify-content: center;align-items: center;padding-top: 2rem}
section.pourquoi ul {list-style-type: none;padding-left: 0}
section.pourquoi ul li {margin-bottom: 1rem;position: relative}
section.pourquoi ul li::before {content: '\f00c';font-family: "FontAwesome";margin-right: 1rem;color:#c19a5f}
/*vert*/
section.pourquoi .flex.cards .card ul li.vert {opacity: 1}
section.pourquoi .flex.cards .card ul li.vert::before {content: '\f00c';color: #008000}
/*rouge*/
section.pourquoi .flex.cards .card ul li.rouge {opacity: .5}
section.pourquoi .flex.cards .card ul li.rouge::before {content: '\f00d';color: #FF0000}


/*SECTION CONCIERGERIE*/
section.conciergerie {margin: 5rem auto}
section.conciergerie .flex.cards {max-width: 1400px;margin: auto;display: flex;flex-wrap: wrap;justify-content: center}
section.conciergerie .flex.cards .card, .assurance ul li {margin: 1rem;padding:1rem;text-align: center;border: 1px solid #c19a5f;border-radius: 5px;position: relative;background: rgba(193, 154, 95,.5);box-shadow: 0 0 20px rgba(193, 154, 95,.5);width: 400px }
section.conciergerie .flex.cards .card em, .assurance ul li i {font-size: 2rem;font-style: normal;display: block}
section.conciergerie .flex.cards .card h3, .assurance ul li h3 {text-transform: uppercase;font-size: 22px}


/*SECTION : TEAM*/
section.team .team-img, .team-member {box-shadow:0 4px 10px rgba(0,0,0,.1)}
section.team {display:flex;flex-direction:column;align-items:center;text-align:center;margin-top: 5rem}
section.team .team-wrapper {display:flex;justify-content:center;align-items:flex-start;max-width:1000px;width:100%;margin:0 auto;gap:100px}
section.team .team-member-container {display:flex;flex-direction:column;align-items:center;max-width:400px;width:100%}
section.team .team-member {text-align:center;background:#fff;padding:20px;border-radius:5px;width:100%}
section.team .team-member h3 {margin-top:50px}
section.team .team-member h4 {color:#c19a5f;margin-bottom:20px}
section.team .team-member p {font-size:.9rem;color:black;text-align:center}
section.team .team-img {width:200px;height:200px;border-radius:50%;margin-bottom:-50px;z-index:50;object-fit:cover}

/*SECTION 6 : CONTACT*/
body.landing-page section.contact {margin: 5rem auto 0;padding: 0}
section.contact .grid {max-width: 1600px;margin: 0 auto 5rem;text-align: center}
section.contact .grid ul {list-style-type: none;padding-left: 0;margin: 5rem auto;display: flex;justify-content: center}
section.contact .grid ul li {margin: 0 2rem}
section.contact .grid ul li i {color: #c19a5f;margin-right: 1rem}
section.contact .grid ul li i::before {font-size: 25px;font-weight: bold}
section.contact .grid ul li a {color:black; font-weight:600}
section.contact .grid .estimation-form {margin: auto}
section.contact iframe {display: block}
section.contact .last-cta {margin-bottom: 5rem;display: flex;flex-direction: column;justify-content: center;align-items: center}

/*FOOTER*/
footer.landing-page .footer-bottom-container {margin-top: -.25rem}
footer.landing-page {background: none;padding: 0}
footer.landing-page .footer-bottom {padding: 0px 0 10px;margin-top: 20px}
footer.landing-page .footer-bottom p {color: white}

@media screen and (max-width: 1024px) {
	.estimation .flex::before {display: none}
	body.landing-page .hero-content h1 {font-size: 2rem}
	#simulateur h2, .howitworks h2, .pourquoi h2, .testimonials h2, .contact h2, .conciergerie h2 {font-size: 20px}
	section.testimonials .cards {margin-bottom: 0}
	section.testimonials .content {margin-top: 2rem}
	section.pourquoi .flex {flex-direction: column}
	section.pourquoi .flex {margin-bottom: 2rem}
	section.pourquoi .flex .court {order: 1}
	section.pourquoi .flex .long {order: 2}
	section.pourquoi .flex .court, section.pourquoi .flex .long {margin: auto!important;text-align: center!important;align-items:center}
}

@media screen and (max-width: 767px) {
	body.landing-page .top-menu .container {flex-direction: column}
	body.landing-page .top-menu .logo {margin: 0}
	.menu-icons .icon a {font-size: 15px;margin: .5rem}
	body.landing-page .hero-banner {height: auto}
	body.landing-page .hero-content {margin: 0 auto;padding: 1rem}
	body.landing-page .section-header {margin-top: 0}
	section.testimonials .content {width: 100%;text-align: center}
	body.landing-page .howitworks .row > div.col-lg-4 {width: 90%;margin: 1rem auto}
	section.pourquoi .flex img {width: 300px}
	section.team .team-wrapper, section.contact .grid ul {flex-direction: column;align-items: center}
	section.contact .grid ul li {margin: 1rem 2rem}
}