/***** banner *****/
.banner 								{ position: relative; padding-top: 140px; margin-top: 0;}
.banner .titre_main                     { font-size: 30px; line-height: 40px;}
.banner .container						{ display: grid; grid-template-columns: 1fr 60%; grid-gap: 80px; align-items: center;}
.banner .img   							{ position: relative; z-index: 5; }
.banner .img:after                      { width: 100%; height: 100%; position: absolute; right: -20px; left:20px; top: 20px; border: 4px solid var(--mainColor4); transition: none;  content: ""; z-index: -20}
.banner .img img      	                { width:100%; height: auto; display: block; object-fit: cover; position: relative; display: block; aspect-ratio:10/7; border-radius: var(--imgRadius);}

.banner .txt 							{ position: relative; padding-bottom: 10px;}
.banner .txt .wrap						{ max-width: 580px}


@media (max-width:1400px) {
.banner .container						{ grid-gap: 40px;}
}

@media (max-width:1200px) {
.banner 								{ padding-top: 120px;}
}

@media (max-width:1000px) {
.banner 								{ padding-top: 100px;}
.banner .container						{ grid-template-columns: 1fr;}
.banner .img   							{ grid-area: 1;}
.banner .img img      	                { width:auto; height: 60vw; aspect-ratio: initial;}
.banner .txt .wrap   					{ text-align: center; max-width: 100%; padding-top: 20px;}
.banner .txt p  						{ max-width: 100%;}
.link.devis                             { margin: 0 auto;}
}

@media (max-width:700px) {
.banner 								{ padding-top: 70px;}
.banner .container						{ grid-gap: 30px;}
}






/***** grid bloc *****/
.grid_bloc	 											{ position: relative; text-align: center;}
.grid_bloc:before										{ width: auto; height: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--bgColorLight); transition: none; z-index: -1; visibility: visible; content: "";}
.grid_bloc .container									{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: clamp(20px, 5vw, 60px); padding-top: clamp(20px, 5vw, 40px);}
.grid_bloc .container img								{ width: 100%; height: auto; object-fit: cover; display: block; border-radius: var(--imgRadius);}

.grid_bloc .item .wrap 						            { border: 4px solid var(--mainColor4); padding: 40px 40px}
.grid_bloc .item .link						            { margin-top: 10px;}

@media (max-width:1000px) {
.grid_bloc .container img								{ width: auto; height: 60vw; }    
}

@media (max-width:700px) {
.grid_bloc .container									{ grid-gap: 10px;}
}


@media (max-width:1000px) {
.grid_bloc .container								    { grid-template-columns: 1fr;}
}





/***** link plan *****/
.link_plan 							{ display: grid; grid-template-columns: 1fr auto; overflow: hidden; color: #fff; margin-top: 30px;}
.link_plan div 						{ margin: 0; padding: 22px 30px 18px 70px; line-height: 23px; background: url("../images/map.svg") 30px 50% no-repeat var(--mainColor2); border-right: 3px solid;}
.link_plan .link					{ height: auto; border-radius: 0; margin: 0; display: flex; align-items: center; height: 100%;}
.bloc_txt_img .container .link_plan .link { margin-top: 0;}

@media (min-width:1201px) {
.link_plan .link:hover:after 		{ filter: invert(1);}
}
@media (max-width:1400px){

}
@media (max-width:1200px){
.link_plan div                      { padding-right: 20px; padding-left: 60px; background: url("../images/big_map.svg") 20px 50% no-repeat var(--mainColor2);}
.link_plan 							{ grid-template-columns: 1fr 160px; align-items: center;}
}
@media (max-width:1200px){
.link_plan 							{ grid-template-columns: 1fr auto;}
}
@media (max-width:500px){
.link_plan 							{ grid-template-columns: 1fr;}
.bloc_txt_img .container .link_plan .link { padding-left: 60px;}
}




/***** Atouts *****/

.atouts_icons 							{ margin: 120px 0 160px 0; z-index: 10}
.atouts_icons .grid						{ display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px; align-items: center; align-items: start; }
.atouts_icons .grid .item				    { position: relative; display: block; text-align: center; }
.atouts_icons .grid .item img			    { position: relative; display: block; margin: 15px auto 20px auto;}
.atouts_icons .grid .img:before	        { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100px; height: 100px; border-bottom: 4px solid var(--mainColor4); transition: none; z-index: -1; content: "";}
.atouts_icons .grid .item p			{ font-size: 20px; font-weight: 800; position: relative; display: block; line-height: 28px; text-align: center; color: var(--mainColor3); margin: 30px auto 20px auto; text-transform: uppercase}
.atouts_icons .grid .item span			{ font-size: 16px; display: block; text-transform: none; font-weight: 400; color: #222}


@media (max-width:1200px) {
.atouts_icons                       { margin: 90px 0 100px; }
}

@media (max-width:1000px) {
.atouts_icons                       { margin: 70px 0 80px; }
.atouts_icons .grid                 { grid-gap: 10px; grid-template-columns: repeat(2, 1fr); }
.atouts_icons .grid .img:before     { width: 90px; height: 90px;}
.atouts_icons .grid .item span      { margin: 0 auto 20px auto; font-size: 16px;}
}

@media (max-width:700px) {
.atouts_icons                       { margin: 40px 0 60px; }
.atouts_icons .grid                 { grid-template-columns: repeat(2, 1fr);}
}