/***** banner *****/
.banner 								{ position: relative; padding-top: 130px;}
.banner .wrapper 						{ display: grid; grid-template-columns: 1fr 55%; align-items: center;}
.banner .photos   						{ position: relative; z-index: 5;}
.banner .photos picture 				{ position: relative; display: block;}
.banner .photos img  					{ width: 100%; height: auto; object-fit: cover; position: relative; display: block; border-radius: 15px;}
.banner .photos .img_2:last-child 		{ width: auto; height: 100%; position: absolute; left: 100%; top: 0; margin-left: 25px;}

.banner .texte 							{ color: #444; position: relative; padding-right: 80px;}
.banner .texte:before 					{ width: 200vw; height: 120%; position: absolute; left: -50vw; bottom: 40px; background: linear-gradient(to top, #e9f4f6 0%, #fff 100%); z-index: -1; content: "";}

.banner .texte .titre_main 				{ font-size: 55px; line-height: 60px; font-weight: 600; color: #8cc738; margin-bottom: 10px;}
.banner .texte .titre 					{ font-size: 14px; line-height: 22px; font-weight: 400; letter-spacing: 0.6px; color: #42a2cf;}
.banner .texte .chapo 					{ max-width: 510px; margin: 30px 0;}
.banner .texte .devis					{ height: 80px; font-size: 16px; line-height: 78px; padding: 0 100px 0 30px; text-align: left; margin-top: 10px;}
.banner .texte .devis:after 			{ width: 40px; height: 100%; background: url("../images/arrow_link.svg") 50% no-repeat; position: absolute; right: 30px; top: 0; content: "";}
.banner .texte .devis span 				{ display: inline-block; padding-left: 60px; background: url("../images/devis.svg") 0 50% no-repeat;}


@media (min-width:1201px) {
.banner .texte .scroll:hover:after 		{ background-color: #005886;}
.banner .texte                  		{ padding-right: 60px;}
}
/*
@media (max-width:1400px) {
.banner:before 							{ bottom: 80px;}
.banner .wrapper 						{ grid-template-columns: 360px 1fr;}
.banner .photos .img_2:last-child 		{ margin-left: 20px;}
.banner .texte .titre_main 				{ font-size: 50px; line-height: 60px; width: 640px;}
}
*/
@media (max-width:1400px) {
.banner .texte .titre_main 				{ font-size: 40px; line-height: 50px;}
}
@media (max-width:1200px) {
.banner 								{ padding-top: 130px;}
.banner .wrapper 						{ grid-template-columns: 380px 1fr;}
.banner .photos .img_2:last-child 		{ display: none;}
.banner .texte                  		{ padding-right: 50px;}
.banner .texte .titre_main 				{ font-size: 35px; line-height: 45px; }
.banner .texte .titre 					{ margin-bottom: 35px;}
.banner .texte .chapo 					{ display: none;}
.banner .texte .scroll					{ display: none;}
.banner .texte .devis					{ height: 70px; width: 100%; line-height: 68px; padding: 0 80px 0 30px;}

}
@media (max-width:1000px) {
.banner 								{ padding: 120px 0 0 0;}
.banner .wrapper 						{ grid-template-columns: 1fr; grid-gap: 45px;}
.banner .photos img  					{ width: 100%;}
.banner .photos .img_2:last-child 		{ display: none;}
.banner .texte 							{ grid-area: 2; padding: 0;}
.banner .texte:before 					{ bottom: 0;}
.banner .texte .titre_main 				{ font-size: 30px; line-height: 40px; width: 100%; margin-bottom: 15px;}
.banner .texte .titre 					{ margin-bottom: 25px;}
.banner .texte .chapo 					{ font-size: 16px; line-height: 30px; max-width: 500px; margin: 0;}
.banner .texte .link 					{ margin-bottom: 35px; margin-top: 0;}

}
@media (max-width:700px) {
.banner 								{ padding: 70px 0 0 0;}
.banner .wrapper 						{ grid-template-columns: 1fr; grid-gap: 35px;}
.banner .photos img  					{ width: 100vw; height: 80vw; margin: 0 -7.5vw; border-radius: 0;}
.banner .texte            				{ padding: 0; }
.banner .texte .titre      				{ margin-bottom: 25px; }
.banner .texte .titre_main 				{ font-size: 20px; line-height: 28px; margin-bottom: 10px;}
.banner .texte .chapo 					{ font-size: 13px; line-height: 25px;}
.banner .texte .link 					{ margin-bottom: 35px;}
.banner .texte .devis					{ height: 60px; font-size: 14px; line-height: 58px;}
.banner .texte .devis span     			{ padding-left: 40px; background-size: 28px auto;}
}





/***** services *****/
.services                               { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px; margin: 140px 0;}
.services .item                         { position: relative;}
.services .row                         	{ position: relative; height: 100%; padding: 45px; border-radius: 15px; background: #f2f8f9; border: 3px solid #f2f8f9; transition: all 400ms ease-in-out;}
.services .row .sous_titre              { font-size: 20px; line-height: 30px; margin-top: 5px;}
.services .row p                  		{ margin-bottom: 10px;}
.services .row p a                 		{ border-bottom: 1px solid #ddd;}
.services .row .link                   	{ margin: 15px 0 0 0;}
.services .photo                        { grid-row: span 2; padding: 0 40px 0 0; background: none; border: none;}
.services .photo img                    { width: 100%; height: 70%; object-fit: cover; border-radius: 15px;}
.services .quote                        { text-align: center; margin: 40px auto 0 auto; max-width: 280px;}

@media (min-width:1201px) {
.services .item .row:hover 				{ border-color: #8cc738; background: #fff;}
.services .row p a:hover           		{ border-bottom: 1px solid #8cc738; color: #8cc738; }
}
@media (max-width:1600px) {
.services                               { margin: 120px 0;}
}
@media (max-width:1200px) {
.services                               { grid-template-columns: 1fr 1fr; grid-gap: 30px; margin: 80px 0;}
.services .row .sous_titre              { font-size: 18px; line-height: 28px;}
.services .photo                        { grid-column: span 2; padding: 0;}
.services .photo img                    { display: none;}
.services .quote ul li                  { font-size: 20px; line-height: 40px;}
.services .quote                        { text-align: center; margin: -20px auto 0 auto; max-width: 280px;}

}
@media (max-width:1000px) {
.services                               { grid-template-columns: 1fr; grid-gap: 20px; margin: 40px 0 60px;}
.services .photo                        { grid-column: span 1;}

.services .quote                        { margin:0 auto 0; padding: 40px 0 0 0;}
.services .quote ul                     { padding: 40px 0 0 0;}
}
@media (max-width:700px) {
.services                               { grid-gap: 15px; margin: 40px 0;}
.services .row                          { padding: 0 80px 0 0; height: 80px; border-radius: 5px; border: 2px solid #8cc738; background-color: #fff; display: grid; grid-template-columns: 80px 1fr; grid-gap: 0; align-items: center;}
.services .row img                      { height: 35px; margin: 0 auto}
.services .row p                  		{ display: none;}
.services .row .sous_titre              { font-size: 15px; line-height: 25px;}

.services .photo                  		{ padding: 0;}

.services .item .link                   { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: url("../images/arrow_long_black.svg") calc(100% - 30px) 50% no-repeat; font-size: 0; line-height: 0;}

.services .quote                        { padding: 35px 0 15px 0; margin: 0 auto;}
.services .quote ul                     { padding: 30px 0 0 0; background-size: 35px auto;}
.services .quote ul li                  { font-size: 16px; line-height: 32px;}
}








/***** atouts *****/
.atouts 								{ margin: 120px 0; display: grid; grid-template-columns: 1fr 400px; grid-gap: 40px; align-items: start;} 
.atouts .show_hide						{ margin: 0;} 

@media (max-width:1600px) {

}
@media (max-width:1200px) {
.atouts 								{ margin: 100px 0; grid-template-columns: 1fr 320px;} 
}
@media (max-width:1000px) {
.atouts 								{ margin: 80px 0; grid-template-columns: 1fr;} 
}
@media (max-width:700px) {
.atouts 								{ margin: 50px 0;} 
}



/***** about *****/
.about 									{ position: relative; grid-gap: 0; margin-top: 120px;} 
.about .texte							{ padding: 0 60px 0 40px;} 
.about .texte .sous_titre 				{ position: relative; font-size: 28px;} 
.about .texte p b						{ font-size: 18px; font-weight: 400;} 

@media (max-width:1600px) {

}

@media (max-width:1200px) {
.about 									{ margin-top: 100px;} 
.about .texte							{ padding: 0 60px 0 0;} 
.about .texte .sous_titre 				{ font-size: 25px;} 
.about .texte p b						{ font-size: 17px;} 
}
@media (max-width:1000px) {
.about 									{ grid-gap: 50px; margin-top: 80px;} 
.about .texte							{ padding: 0;} 
.about .texte .sous_titre 				{ font-size: 22px;} 
.about .texte p b						{ font-size: 16px;} 
}
@media (max-width:700px) {
.about 									{ grid-gap: 35px; margin-top: 50px;} 

.about .texte .sous_titre 				{ font-size: 18px;} 
.about .texte p b						{ font-size: 15px;} 
}