*, *:before,*:after {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

html{background-color: #FFF; font: 300 18px/24px 'Poppins', sans-serif;}
body{color: #2A2A2A; margin: 0; padding: 0; text-align: left;}

a, i, header #top nav .item span:hover, span.action, footer .footer-nav .item span:hover{-webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; transition: .5s;}

a:link, a:visited{color:#000; text-decoration:none;}
a:focus{outline: 0;}

a{color: #F0771D; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; transition: .5s;}
a img{border: none;}
a.noTransition{-moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none;}

p, ul, li, hr, h1, h2, h3, h4, h5, h6, form{margin: 0; padding: 0;}

h1{color: #F0771D; font-size: clamp(3rem, 2vw + 1rem, 4rem); font-family: "Montserrat", sans-serif; font-weight: 800; line-height: 1.1; text-transform: uppercase;}
h1 span{color: #D46D22;}
h2{font-family: "Montserrat", sans-serif; font-size: clamp(1.3rem, 1.7vw + .6rem, 1.91rem); font-weight: 600; line-height: 1.1; margin-bottom: clamp(1.5rem, 2.5vh + .5rem, 3rem);}
h3{font-size: 1.75rem; font-weight: 400; line-height: 1.1; margin-bottom: 1.5rem;}
h3 span{color: #F0771D; display: block; font-size: 1.4rem; margin-top: .2rem}
h4{font-size: 1.4rem; font-weight: 400; line-height: 1.1; margin-bottom: 1.5rem;}
h4 span{color: #F0771D; display: inline-block;}

input, select, textarea{background-color:#FBFBFB; border:1px solid #999; font-size:1rem; padding:1px;}

.action{background-color: #F0771D; border: none; border-radius: 1.1rem; color: #FFF!important; cursor: pointer; display: inline-block; font-size: 1rem; font-weight: 400; padding: 1rem 2rem; position:relative; text-transform: uppercase; text-align: center; text-decoration: none!important;}
a:hover.action, span:hover.action{background-color: #000}

input[type="text"], input[type="password"], input[type="email"], textarea{background-color: #EDF2F4; border: none; color: #25303b; font: 300 1rem 'Poppins', sans-serif; outline: 0; padding: 1rem 1.5rem; width: 100%;}
input::placeholder, textarea::placeholder{color: #000; opacity: 1}

strong{font-weight: 400}

p{font-size: 1.1rem; line-height: 1.3; margin-bottom: 1rem}

.anim{opacity: .1}
.translate{opacity: 0; transform: translateX(-20em);}
.translate.animate{opacity: 1; transform: translateX(0)!important; -webkit-transition:1s; -moz-transition:1s; -o-transition:1s; -ms-transition:1s; transition:1s;}
.scale{opacity: 0; transform: scale(0); transform-origin: left; -webkit-transition:1.2s; -moz-transition:1.2s; -o-transition:1.2s; -ms-transition:1.2s; transition:1.2s;}
.scale.animate{opacity: 1; transform: scale(1);}

.cache{display:none;}

.maincontent{margin: 0 auto; width: 75%}


section{margin-bottom: 5rem}


header #top{background-color: #0A0E12; color: #FFF; padding: 1.1rem 0}
header #top .maincontent{align-items: center;  display: flex; flex-wrap: wrap; justify-content: space-between;}
header #top #tel a{color: #FFF; font-size: 1.5rem; font-weight: 500; letter-spacing: .1rem;}
header #top #tel a::before{content: '\f095'; color: #F0771D; font-family: "Font Awesome 6 Free"; margin-right: 1rem}
header #top nav ul{display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0;}
header #top nav .item span{cursor: pointer; transition: opacity .2s;}
header #top nav .item span:hover{color: #F0771D;}
header #top #icon_menu{color: #FFF; cursor: pointer; display: none; font-size: 2rem;}


.clair{background: linear-gradient(to bottom, #FAF8F5 0%, #FFFFFF 100%); padding: 3rem 0 1rem 0}

.orange{background-color: #D46D22; color: #121212; font-size: 1.1rem; font-weight: 300; padding: 2rem 0}
.orange h3 span{color: #FFF;}


#hero{display: flex; margin-bottom: 0!important; min-height: 40vh;}
#hero .hero-left{flex: 1; padding: 3rem 1rem 3rem 12.5%; position: relative; z-index: 2;}
#hero .hero-left .header{align-items: center; display: flex; flex-wrap: wrap; gap: 3rem; justify-content: flex-start; margin-bottom: clamp(1.5rem, 2.5vh + .5rem, 3rem)}
#hero .hero-left .header #logo img{height: auto; width: 150px}
#hero .hero-left .header #titre{text-align: left}
#hero .hero-left #slogan{color: #444; font-family: "Kalam", sans-serif; font-size: clamp(1.3rem, 1vw + 1rem, 1.89rem); line-height: 1.2; margin-bottom: clamp(1.5rem, 2.5vh + .5rem, 3rem)}
#hero .hero-left .cta{display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1rem}
#hero .hero-left .cta span{cursor: pointer; display: inline-block; font-size: 1.25rem}
#hero .hero-left .cta span:last-child{background-color: #FFF; border: 1px solid #000; color: #000!important}
#hero .hero-left .cta span:last-child:hover{border-color: #D46D22; color: #D46D22!important}
#hero .hero-right{flex: 1; background-image: url('../images/maison-jardin.jpg'); background-size: cover; background-position: center; position: relative;}
#hero .hero-right::before{background: linear-gradient(to right, white 0%, rgba(255,255,255,0) 100%); content: ""; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 40%;}


#ce-que-vous-gagnez .points-grid{display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); margin-top: 2.5rem;}
#ce-que-vous-gagnez .points-grid .point{align-items: center; background-color: #FFF; border: 1px solid #EEE; border-radius: 2.5rem; display: flex; flex-direction: column; padding: 2rem; text-align: center; transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;}
#ce-que-vous-gagnez .points-grid .point:hover{background-color: #FFF8F0; box-shadow: 0 12px 28px rgba(0,0,0,.08); transform: translateY(-6px);}
#ce-que-vous-gagnez .points-grid .point i{color: #D46D22; font-size: 3.5rem;}
#ce-que-vous-gagnez .points-grid .point h4{color: #1E1E1E; font-size: 1.3rem; font-weight: 500; line-height: 1.2; margin: 1rem 0; min-height: 2.5rem}
#ce-que-vous-gagnez .points-grid .point h4 span{color: #D46D22;}
#ce-que-vous-gagnez .points-grid .point p{color: #555; font-size: .95rem; line-height: 1.4; margin: 0; text-align: center}


#etapes-parcours{background: linear-gradient(180deg, #1F2A38 0%, #273347 100%); padding: 2.5rem 0 4rem 0}
#etapes-parcours h3{color: #F5F5F5}
#etapes-parcours p{color: #AAB3BF;}
#etapes-parcours .timeline{border-left: 2px solid rgba(224,224,224,.5); margin-top: 2rem; padding-left: 4.5rem; position: relative;}
#etapes-parcours .timeline-step{margin-bottom: 3rem; position: relative;}
#etapes-parcours .timeline-step:last-child{margin-bottom: 0;}
#etapes-parcours .timeline-step .bubble{align-items: center; background-color: #D46D22; border-radius: 50%; color: #FFF; display: flex; font-size: 1.3rem; font-weight: 600; height: 60px; justify-content: center; left: -6.2rem; position: absolute; top: 0; transition: all .3s ease; width: 60px;}
#etapes-parcours .timeline-step .bubble:hover{box-shadow: 0 8px 20px rgba(0,0,0,.25); transform: scale(1.1);}
#etapes-parcours .timeline-step .content h4{color: #F5F5F5; font-size: 1.3rem; font-weight: 500; margin-bottom: .5rem;}
#etapes-parcours .timeline-step .content p{font-size: 1.1rem; line-height: 1.4; margin-bottom: 0;}


#accompagnement{margin: 2rem 0 4rem 0;}
#accompagnement #acc_acheteurs{--couleurBloc: #C64937; --couleurCercleIcone: #962b1c;}
#accompagnement #acc_vendeurs{--couleurBloc: #C99A43; --couleurCercleIcone: #916b25;}
#accompagnement #acc_renovation{--couleurBloc: #274C94; --couleurCercleIcone: #142d5f;}
#accompagnement .bloc{background-color: #FFF; border-radius: 3rem; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 2rem; overflow: hidden;}
#accompagnement .bloc:last-child{margin-bottom: 0;}
#accompagnement .bloc .num{background-color: var(--couleurBloc); position: relative; width: 20%}
#accompagnement .bloc .num .numero{align-items: center; color: #FFF; display: flex; font-family: "Montserrat Alternates", sans-serif; font-size: clamp(110px, 5.2vw + 50px, 320px); font-weight: 700; height: 100%; justify-content: center; opacity: .5; width: 100%;}
#accompagnement .bloc .num .iconwrap{align-items: center; background-color: #fff; display: flex; border: 16px solid var(--couleurCercleIcone); border-radius: 50%; height: 120px; justify-content: center; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); width: 120px; z-index: 10;}
#accompagnement .bloc .num .iconwrap i{color: var(--couleurBloc); font-size: 1.8rem;}
#accompagnement .bloc .content{padding: 2rem 2rem 2rem 6rem; width: 80%}
#accompagnement .bloc .content h4{color: var(--couleurBloc);}
#accompagnement .bloc .content .pointforts div{margin-bottom: .3rem;}
#accompagnement .bloc .content .pointforts i{color: var(--couleurBloc); font-size: .4rem; margin-right: .5rem; vertical-align: middle;}


#pourquoi-nous-choisir .points-grid{display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); margin-top: 2.5rem;}
#pourquoi-nous-choisir .points-grid .point{align-items: center; background-color: #F8F8F8; border: 1px solid #EEE; border-radius: 3rem; display: flex; flex-direction: column; padding: 2rem; text-align: center; transition: transform .3s ease, box-shadow .3s ease;}
#pourquoi-nous-choisir .points-grid .point:hover{box-shadow: 0 10px 25px rgba(0,0,0,.07); transform: translateY(-6px);}
#pourquoi-nous-choisir .points-grid .point i{color: #D46D22; font-size: 3.5rem;}
#pourquoi-nous-choisir .points-grid .point h4{color: #1E1E1E; font-size: 1.3rem; font-weight: 500; line-height: 1.2; margin: 1rem 0; min-height: 2.5rem}
#pourquoi-nous-choisir .points-grid .point h4 span{color: #D46D22;}
#pourquoi-nous-choisir .points-grid .point p{color: #555; font-size: .95rem; line-height: 1.4; margin: 0; text-align: center}


#honoraires .honoraires-table{border-collapse: collapse; border-spacing: 0; margin-top: 2rem; width: 100%;}
#honoraires .honoraires-table thead tr{background-color: #273347;}
#honoraires .honoraires-table thead th{color: #FFF; font-size: 1.1rem; font-weight: 500; line-height: 1.2; padding: 1rem; text-align: left;}
#honoraires .honoraires-table tbody tr{border-bottom: 1px solid #E0E0E0;}
#honoraires .honoraires-table tbody td{color: #1E1E1E; font-size: 1rem; line-height: 1.4; padding: 1rem;}
#honoraires .honoraires-table tbody tr:last-child{border-bottom: none;}


#contact{margin-bottom: 0!important;}
#contact .telemail{display: flex; gap: 2rem; margin: 2rem 0;}
#contact .telemail div{flex: 1;}
#contact .telemail a{align-items: center; background-color: #1F2A38; border-radius: 3rem; color: #fff; display: flex; font-size: 1.5rem; font-weight: 600; justify-content: center; padding: 1.5rem 0; transition: background-color .3s ease; width: 100%;}
#contact .telemail a:hover{background-color: #000;}


footer{background-color: #0A0E12; color: #EEE; font-size: .9rem; padding: 3rem 0; position: relative;}
footer a{color: #F0771D!important; transition: .3s;}
footer .maincontent{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem;}
footer .maincontent h4{font-size: 1.3rem; margin-bottom: 2rem;}
footer .footer-left{align-items: flex-start; display: flex; flex: 1; flex-direction: column; gap: 2rem}
footer .footer-left .logo-footer img{height: auto; width: 160px;}
footer .footer-left .concept{font-size: .95rem; line-height: 1.4;}
footer .footer-left .concept span{color: #F0771D; font-weight: 500;}
footer .footer-nav{flex: 1}
footer .footer-nav ul{list-style: none;}
footer .footer-nav li{font-size: 1.15rem; margin-bottom: 2rem;}
footer .footer-nav li:last-child{margin-bottom: 0}
footer .footer-nav .item span{cursor: pointer; transition: opacity .2s;}
footer .footer-nav .item span:hover{color: #F0771D;}
footer .footer-right{display: flex; flex: 1; flex-direction: column; justify-content: space-between;}
footer .footer-right p{color: #DDD;}
footer .footer-right p.info{color: #BBB; font-size: .95rem; font-style: italic}
footer .footer-right p:last-child{margin-bottom: 0}



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

	.maincontent{width: 80%}

	#hero .hero-left{padding-left: 10%}

	#accompagnement .bloc .num{width: 25%}
	#accompagnement .bloc .content{width: 75%}

}

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

	header #top #icon_menu{display: block;}
	header #top #tel a{font-size: 1.2rem;}
	header #top nav{background-color: rgba(10, 10, 10, .99); display: none; left: 0; padding: 4rem 5%; position: absolute; top: 76px; width: 100%; z-index: 99}
	header #top nav ul{display: initial;}
	header #top nav ul li{font-size: 1.2rem; margin-bottom: 2rem;}
	header #top nav ul li:last-child{margin-bottom: 0;}

	#hero .hero-left .cta{align-items: flex-start; flex-direction: column; gap: .8rem;}
	#hero .hero-left .cta .action{display: block; width: 100%}

}

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

	.maincontent{width: 90%}

	#hero .hero-left{padding-left: 5%}

}

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

	#accompagnement .bloc .num{width: 30%}
	#accompagnement .bloc .content{width: 70%}

}

@media (max-width: 1200px){

    #hero{flex-direction: column; min-height: auto;}
	#hero .hero-right{height: 50vh; min-height: 380px; order: 1; width: 100%;}
    #hero .hero-right::before{background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.15) 35%, rgba(255,255,255,.35) 60%, rgba(255,255,255,.6) 80%, white 100%); bottom: 0; height: 40%; top: auto !important; width: 100%;}
    #hero .hero-left{order: 2; width: 100%;}
    #hero .hero-left .header{gap: 1.5rem;}

    #pourquoi-nous-choisir .points-grid, #ce-que-vous-gagnez .points-grid{grid-template-columns: repeat(2, 1fr);}

}


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

	#accompagnement .bloc .num{margin-bottom: 2rem; min-height: 220px; width: 100%;}
	#accompagnement .bloc .num .iconwrap{border-width: 12px; height: 100px; left: 50%; top: 100%; transform: translate(-50%, -50%); width: 100px;}
	#accompagnement .bloc .num .iconwrap i{font-size: 1.6rem;}
	#accompagnement .bloc .content{padding: 2rem 1.5rem; width: 100%;}
	#accompagnement .bloc .content .pointforts div{font-size: .9rem;}

}

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

	h1{font-size: 2.4rem}

	section{margin-bottom: 3rem;}

	#hero .hero-left .header {align-items: flex-start; flex-direction: column; gap: 1.5rem;}
    #hero .hero-left .header #titre{width: 100%;}

    #etapes-parcours .timeline{border-left: none; margin-top: 1.5rem; padding-left: 0; position: relative;}
    #etapes-parcours .timeline-step{margin-bottom: 2rem; padding-left: 0; position: relative;}
    #etapes-parcours .timeline-step:last-child{margin-bottom: 0;}
	#etapes-parcours .timeline-step .bubble{font-size: 1.1rem; height: 50px; left: 0; margin-bottom: 1rem; position: relative; top: auto; transform: translateX(0); transition: all .3s ease; width: 50px;}
    #etapes-parcours .timeline-step .content h4{font-size: 1.15rem;}
    #etapes-parcours .timeline-step .content p{font-size: .9rem;}

    #pourquoi-nous-choisir .points-grid, #ce-que-vous-gagnez .points-grid{grid-template-columns: repeat(1, 1fr);}

    #honoraires .honoraires-table thead{display: none;}
    #honoraires .honoraires-table tbody tr{display: block; margin-bottom: 1rem; border-bottom: 1px solid #E0E0E0;}
    #honoraires .honoraires-table tbody td{display: block; padding: .5rem 0; position: relative;}
	#honoraires .honoraires-table tbody td:last-child{padding-bottom: 2rem}
    #honoraires .honoraires-table tbody td:first-child::before{content: "Service"; color: #273347; display: block; font-size: 1.1rem; font-weight: 500; margin-bottom: .5rem;}
    #honoraires .honoraires-table tbody td:last-child::before{content: "Tarification"; color: #273347; display: block; font-size: 1.1rem; font-weight: 500; margin-bottom: .5rem;}
    #honoraires .honoraires-table tbody tr:last-child td:last-child{padding-bottom: 0}

    #contact .telemail{align-items: flex-start; flex-direction: column; gap: .8rem;}
    #contact .telemail div{width: 100%}

    footer .maincontent{flex-direction: column; gap: 1.5rem;}
    footer .footer-left .logo-footer img{max-width: 350px; width: 60%;}

}

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

	h1{font-size: 2rem}
	h3{font-size: 1.6rem}
	h3 span{font-size: 1.3rem}

	#hero .hero-left .cta .action{font-size: 1.15rem;}

	#accompagnement .bloc .num{min-height: 200px;}
	#accompagnement .bloc .num .iconwrap{border-width: 10px; height: 80px; left: 50%; width: 80px;}
	#accompagnement .bloc .num .iconwrap i{color: var(--couleurBloc); font-size: 1.4rem;}

	#contact .telemail a{font-size: 1.2rem;}

}