#homepage                        { background: url("../images/bg.svg") 0px 350px no-repeat; }

/***** banner *****/
.banner 							{ display: grid; grid-template-columns: 1fr 660px; align-items: center; grid-gap: 80px; position: relative; margin: 160px auto 100px;}
.banner .img          				{ position: relative; line-height: 0; border-radius: none;}
.banner .img img         			{ width: 100%; height: 100%;}
.banner .img:after                       { content: ""; background: #eeeeee; height: 100%; width: 1000%; top: 0; left: 0px; position: absolute; z-index: -1; border-top-left-radius: 300px; border-bottom-left-radius: 300px; }
.banner .content                    { position: relative;left: 0;text-align: left; z-index: 1;}
.banner .content .titre_main        { font: 500 45px/55px "Barlow";letter-spacing: 0.8px; color:#f57f20;margin: 0 auto 20px;}
.banner .content p                  { font: 400 18px/32px "Barlow";color: #08233d; margin-bottom: 30px; }
.banner .content .link              { margin-top: 30px; line-height: 60px; height: 60px; padding: 0 30px 0 30px; font: 400 15px/58px "Barlow"; text-transform: none; color:#fff; text-align: center; background:#f57f20;}
.banner .ul_list							{ margin: 20px 0 30px;}
.banner .ul_list li							{ padding: 0 0 0 35px;line-height: 30px;  position: relative; font: 500 18px/40px "Barlow";}
.banner .ul_list li:before					{ content: ""; position: absolute; left: 0; top: 8px; width: 25px; height: 25px; background-color: #f57f20;   background: url("../images/icon-ulist.svg") 50% 50% no-repeat;  }
#nobanner .banner 							{ grid-template-columns: 1fr !important; margin: 220px auto 0px !important;} 

@media (min-width:1201px) {
.banner .content .link:hover              {background:#2d3e51;}
}

@media (max-width:1200px) {
#homepage                           { background: none; }
.banner .img:after                  { display:none; }
    
.banner .content			{ grid-area: 2;}
.banner .cont_img        	{ grid-area: 1;}
    
.banner .cont_img                   { background: #eeeeee; margin: 0 -5vw; padding:60px 7.5vw; }    
.banner 							{ display: grid; grid-template-columns: 1fr; align-items: center; grid-gap: 0px; position: relative; margin: 80px auto 0px;}
.banner .content                    { position: relative; top: 0px; left: 0; width: 100%; margin: 80px 0; padding: 0;  }
.banner .content .titre_main        { font: 500 30px/40px "Barlow";}
.banner .content p                  { font: 400 15px/30px "Barlow"; }
.banner .content .link              { height: 60px; padding: 0 30px 0 30px; font: 400 16px/58px "Barlow"; text-transform: none; color: #fff; text-align: center; background: #f57f20; display: block; border-radius: 5px; }
.banner .img          				{ max-width: 660px; width: 100%; height: auto; margin:0 auto;}
.banner .img img      				{ width: 100%; height: auto;}    
.banner .cont_img:before            { display: none; }
    

}
@media (max-width:1000px) {
.banner 							{ max-width: 1000px;}
}
@media (max-width:768px) {

}
@media (max-width:600px) {
.banner .content                    { margin: 60px 0; }
.banner .cont_img                   { margin: 0 -7.5vw;}  
.banner .content .titre_main        { font: 500 20px/30px "Barlow";}
}

/***** presentation *****/
.presentation                    { background: url("../images/quote.svg") top left no-repeat;  padding:100px 420px 0 0; position: relative; margin:30px 0 130px 0; }
.presentation:before			 { content: ""; position: absolute; right: 0; bottom: -260px; width: 335px; height: 507px; background-color: #a7253b;  }
.presentation .sous_titre        { font: 500 35px/45px "Abril Fatface";letter-spacing: 0.4px; color:#2d3e51;margin-bottom:20px;}
.presentation .sous_titre span   { color:#a7253b;}
.presentation a                  { color:#a7253b; border-bottom: 1px solid transparent;padding-bottom: 1px; }
.presentation h2                 {  font: 400 15px/30px "Barlow"; color: #323232; letter-spacing: 0.2px; }

@media (min-width:1201px) {
.presentation a:hover             { border-bottom: 1px solid #a7253b }
}

@media (max-width:1000px) {
.presentation                    { background: none;  padding:0; position: relative; margin:80px 0 80px 0; }
.presentation:before			 { display: none;}
.presentation .sous_titre        { font: 500 20px/30px "Abril Fatface";letter-spacing: 0.4px; color:#2d3e51;margin-bottom:10px;}
}

@media (max-width:600px) {
.presentation                    { margin:40px 0 40px 0; }
.presentation h2                 { font: 400 13px/28px "Barlow"; }
}

/***** services *****/
.cont_services                              { background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 300px, #08233d 300px, #08233d 94%, #ffffff 94%, #ffffff 100%); }
.intro_services                             { padding: 0 50px 0 40px; position: relative;  }
.intro_services .titre_main                 { line-height: 55px; font-size: 35px;  margin-bottom: 20px; color: #f57f20; }
.intro_services p                           { font-size: 16px; }
.services .item                             { position: relative; padding: 150px 70px 80px; background: #ffffff; border-radius: 10px; box-shadow: 0 0 30px 0 rgb(0 0 0 / 10%);}
.services .item p                           { font: 400 15px/30px "Barlow";  color: #08233d;}
.services .item1 p a                        { border-bottom: 1px solid #000; padding-bottom: 2px;}
.services .item2 p a,
.item3 p a,
.item4 p a                                  { color: #fff; border-bottom: 1px solid #fff; padding-bottom: 2px; transition: all 400ms ease-in-out;}
.services .item .content_titre              { margin-bottom: 10px; }
.services .item .icone                      { display: grid; align-items: center; justify-content: flex-start; margin-bottom: 5px; position: absolute; margin-top:-220px;}
.services .item .sous_titre                 { font: 500 25px/50px "Barlow"; color: #f57f20; margin-bottom: 15px; display: block;}
.services .link                             { height: 50px; display: inline-block; vertical-align: middle; color: #fff; width: 83px; background: url("../images/bg_btn.svg") top right no-repeat; cursor: pointer; border: none; position: absolute; margin: -65px 70px 0 0 !important; right: 0px; padding:0; }
.services 	                                { display: grid; grid-template-columns: 1fr 1fr; align-items: flex-start; padding-left: 0; margin: 0; grid-gap: 120px 40px;}
.item1                                      {  }  
.item2                                      { margin-top: -240px; }  
.item3                                      {  }
.item4                                      { margin-top: 240px;  } 
.item5                                      {  }  
.item6                                      {     margin-top: -240px; }
.services .item7                            { background: #f57f20;     padding: 170px 70px 35px;}
.services .item7 .sous_titre                { color:#fff; text-align: center; margin-bottom: 0px;}
.services .item7 .icone                     { display: block; position: relative; left: 50%; margin-left: -68px; }
.services .item7 .link                      { height: 50px; display: inline-block; vertical-align: middle; color: #fff; width: 62px; background: none;  cursor: pointer; border: none; position: absolute; margin:0 0 0 -31px !important;  padding:0; right:auto; left:50%;  }


@media (min-width: 1201px) {
.services .link:hover                             { width: 63px; }
}
@media (max-width:1200px) {
/*.services .item                             { padding: 65px 5vw 80px;}
.services                                   { grid-gap: 20px; }*/
.cont_services                              { background: #08233d; padding:80px 0 ; }
.no_intro                                   { display: none; }
.services 	                                            { grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px; align-items:end; }
.services .item                             { position: relative; padding:20px 0px 0px; border-radius: 10px; overflow: hidden;}
.item1, .item2, .item3, .item4, .item5, .item6         { margin:0px;}    
.services .item1 .icone,
.services .item2 .icone,
.services .item3 .icone,
.services .item4 .icone,
.services .item5 .icone,
.services .item6 .icone { display: grid; align-items: center; justify-content: flex-start; margin-bottom: 5px; position: relative; width:150px; height: 200px; margin: 0px 0px 30px -75px; left: 50%;}
.services .item1 .icone img,
.services .item2 .icone img,
.services .item3 .icone img,
.services .item4 .icone img,
.services .item5 .icone img,
.services .item6 .icone img,
.services .item7 .icone img{ width:100%; height: auto; }
.services .item p                           { display:none;}
.item1 .link, .item2 .link, .item3 .link, .item4 .link, .item5 .link, .item6 .link       { width: 100%; position: absolute; height: 100%; margin: 0px !important; border-radius: 0px; top: 0px; opacity: 0; }
.services .item .sous_titre                 { font: 500 16px/60px "Barlow"; color: #ffffff; background: #f57f20; text-align: center; margin-bottom: 0px; display: block;}
.services .item .content_titre              { margin-bottom: 0px; }
.services .item7                            { background: #f57f20; height: 60%; align-items: end; bottom: 0px; display: unset; position: relative !important; padding: 0px !important; overflow: inherit !important;}
.services .item7 .icone                     { width:150px; height: 100px; margin: -60px 0px 10px -75px; left: 50%;  }
.services .item7 .sous_titre                { font: 500 16px/28px "Barlow"; padding:0 30px;}
}
@media (max-width:1000px) {
/*.intro_services                             { padding: 35px 0 0; }
.services                                   { grid-template-columns: 1fr; grid-template-areas: inherit; }
.services .item                             { box-shadow: 0 0 20px #00000010; background: #141414; color: #fff;}
.services .item.item1                       { grid-area: 2;}
.item5                                      { padding: 0;}  
.item3                                      { margin-top: 0;}
.item1,.item2,.item3,                                     
.item4,.item5                               { grid-area: inherit; top: inherit; }  */
}
@media (max-width:800px) {
.services 	                                            { grid-template-columns: 1fr 1fr; grid-gap: 30px; }
.services .item1 .icone,
.services .item2 .icone,
.services .item3 .icone,
.services .item4 .icone,
.services .item5 .icone,
.services .item6 .icone { display: grid; align-items: center; justify-content: flex-start; margin-bottom: 5px; position: relative; width:100px; height: 150px; margin: 0px 0px 20px -50px; left: 50%;}
.services .item7 .icone { width:100px; height: 50px; margin: -30px 0px 30px -50px; left: 50%;}
.services .item7                            { height: 70%; }
}

@media (max-width:600px) {
.services 	                                { grid-template-columns: 1fr 1fr; grid-gap: 10px; }
.services .item .sous_titre                 { font: 500 14px/60px "Barlow"; }
.services .item7 .sous_titre                { font: 500 14px/28px "Barlow"; padding:0 10px; }
.cont_services                              { background: #08233d; padding:60px 0 ; }
}




.atouts .photo:after             { content: ""; background: #eeeeee; height: 650px; width: 1000%; top: -100px; right: -100px; position: absolute; z-index: -1; border-top-right-radius: 325px; border-bottom-right-radius: 325px; }
.atouts                          { display: grid; grid-template-columns: 451px 1fr; align-items: center; grid-gap: 200px; position: relative; margin: 150px 0; }
.atouts .titre_main              { line-height: 55px; font-size: 35px; margin-bottom: 20px; color: #f57f20; }
.atouts .ul_list                            { position: relative; margin: 20px 0;}
.atouts .ul_list li                         { padding:7px 0 7px 40px; background: url(../images/ul_list.svg) no-repeat left center; font-size: 15px; line-height: 30px; color: #08233d;}
@media (max-width:1200px) {
.atouts                          { display: grid; grid-template-columns: 451px 1fr; align-items: center; grid-gap: 100px; position: relative; margin: 120px 0; }
.atouts .photo:after             { content: ""; background: #eeeeee; height: 550px; width: 1000%; top: -50px; right: -50px; position: absolute; z-index: -1; border-top-right-radius: 325px; border-bottom-right-radius: 325px; }
.atouts .titre_main              { line-height: 40px; font-size: 30px; color: #f57f20; }
}

@media (max-width:1000px) {
.atouts                          { grid-template-columns: 1fr;grid-gap: 0px; margin: 80px 0 0 0; }
.atouts .photo                   { display:none;}
.atouts .photo:after             { display:none;}
.atouts .link                    { margin-top: 0px; height: 60px; padding: 0 30px 0 30px; font: 400 16px/58px "Barlow"; text-transform: none; color: #fff; text-align: center; background: #f57f20; display: block; border-radius: 5px; }
}

@media (max-width:600px) {
.atouts .titre_main              { line-height: 30px; font-size: 20px; color: #f57f20; }
.atouts                          { margin: 60px 0 0 0; }
}









.devis_link                         { width: 100%; margin: 120px auto; display: block; text-align: center; font-size: 18px; padding: 15px 40px; height: auto; border-radius: 45px;}
.devis_link strong                  { text-transform: uppercase; font-weight: 700;}
.devis_link span                    { display: block; background: url(../images/arrowW.svg) no-repeat center right; padding-right: 50px;}
@media (max-width:1000px) {
.devis.default                      { margin: 0 0 60px; }
.devis_link                         { margin: 10px auto 80px; height: 60px; padding: 0 30px 0 30px; font: 400 16px/58px "Barlow"; text-transform: none; color: #fff; text-align: center; background: #f57f20; display: block; border-radius: 5px; }
.devis_link span                    { background: none; padding-right: 0px;}
}

@media (max-width:600px) {
.devis_link                         { margin: 10px auto 80px; }
}