/***** banner *****/
.banner 							{ width: 100%; height: 90vh; max-height: 1100px; position: relative; padding: 90px 0 0 0; background: #111111; overflow: hidden;}
.banner .img 						{ animation: anim_banner 1s ease-out; width: 65%; height: 100%; left: 35%; position: relative; background: url(../images/banner.jpg) top right / cover no-repeat #000; opacity: 0.5; overflow: hidden; }
.banner .texte 						{ color: #fff; height: 100%; display: grid; align-items: center; position: relative; padding: 80px 0 100px;}
.banner .content                    { position: absolute; left: 12%; right: 0; top:45%; /* margin-top: 0px; */ font-size: 0; padding: 0 0 0 5vw; text-align: left; color: #fff; max-width: 700px;}
.banner .content .titre             { font: 600 50px/70px "Barlow"; margin-bottom: 5px; letter-spacing: 2px; text-transform: uppercase;}
.banner .pbanner                    { font: 400 20px/40px "Barlow"; margin-bottom: 5px; letter-spacing: 2px; color:#ffc53b; }
.banner .link 						{ border-radius:5px; font: 600 13px/60px "Barlow"; letter-spacing: 1px; text-transform: uppercase; height: 60px; border: none; display: inline-block; vertical-align: middle; color: #111111; padding: 0 30px; background: linear-gradient(to top, #ffc53b 0%, #ffc53b 50%, #fff 50%, #fff 100%); background-size: 100% 200%; background-position: 0 100%; cursor: pointer; margin-top:20px;}
.banner .link:after { content: url(../images/arrow-bottom.svg); line-height: 0; display: inline-block; vertical-align: middle; position: relative;  top: -1px;  margin-left: 14px; }



@keyframes anim_banner {
0%									{ opacity: 0; transform: scale(1.05);}
10%									{ opacity: 0; transform: scale(1.05);}
90%									{ opacity: 0.5;}
100%								{ opacity: 0.5; transform: scale(1);}
}


@media (min-width:1201px) {
.banner .link:hover 				{ background-position: 0 0;}
}

@media (max-width:1200px) {
.banner 							{ height: 700px;}
.banner .texte 						{ grid-area: 3; grid-column: 2 span; padding: 0;}
.banner .content                    { margin:0;}
    .banner .pbanner, .banner .link     { display:none;}
}
@media (max-width:1000px) {
.banner 							{ height: 550px; max-height: auto; min-height: auto;}
.banner .img 						{ width: 100%; left: 0; }
.banner .content                    { padding:0 5vw; text-align:center; left:0px; margin:0px auto; top:50%;}
.banner .content .titre             { font-size: 30px;line-height: 40px}
}

@media (max-width:600px) {
.banner 							{ height: 400px; padding: 80px 0 0 0; margin-bottom: 50px;}
.banner .content .titre             { font-size: 20px;line-height: 30px;}
.banner .scrollservices             { display:none;}
.banner .content                    { top:55%; }
}



/***** intro *****/
.intro .chapo						{ border-left: 8px solid #ffc53b;padding-left: 40px;text-align: left;padding-right: 320px}

@media (max-width: 1000px)          {
.intro .chapo                       { padding-right: 0px;  }
}
@media (max-width:600px) {
.intro .chapo   					{ text-align: center;padding: 0;border: none; font-size: 15px;  line-height: 30px;}
}


/*************BG page*****/
.bg_page                            { padding :115px 0px 1px 0px;position:relative;background: url(../images/shape_a.svg) left bottom no-repeat;}
.bg_page:before                     { content: "";background: url(../images/shape.svg) no-repeat;width: 440px;height: 790px;top: -170px;right: -85px;position: absolute;z-index: 1;}



@media (max-width: 1200px){
.bg_page                            { background:none;}
.page_content                       { background:none;}
}
@media (max-width:1000px){
.bg_page                            { padding :80px 0px 1px 0px;}
.bg_page:after                      { display:none }
.bg_page:before                     { display:none;}
}
@media (max-width:600px){
.bg_page                            { padding-top: 0}
}


/***** services *****/
.services 							{ margin: 120px 0 150px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px;}
.services .item                     { z-index: 12; align-items: center;justify-content: center;text-align: center;background:#ffffff;padding:110px 0 ;border-radius:5px;position: relative}
.services .item img 				{ display: block; margin:0 auto 35px;}
.services .sous_titre				{ font :700 16px/26px "Barlow";letter-spacing: 1.5px;text-transform: uppercase;color:#1d1d1b;position:relative;font-style: normal!important}
.services .sous_titre:after         { content: '';position: absolute;left: 0;right: 0;width: 30px;height: 5px;margin: 0 auto;background-color: #ffc53b;bottom: -20px;}
.services .link_plus				{ margin-top: 25px;}
.services .item .hide               { border-radius:5px; position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 0 40px;display: grid;align-items: center;opacity: 0;transition: all 400ms ease-in-out;}
.services .item .hide p             { color: #ffffff;margin-bottom: 20px;}
.services .hide p a                 { color:#ffc53b;border-bottom: 1px solid transparent}
.services .hide a.link              { background: linear-gradient(to top, #ffc53b 0%, #ffc53b 50%, #ffffff 50%, #ffffff 100%);background-size: 100% 200%;background-position: 0 100%; }

@media (min-width:1201px){
.services .item:hover .hide         { opacity: 1;visibility: visible;background: #111111}
.services .hide p a:hover           { border-bottom: 1px solid }
.services .hide a.link:hover        { background-position: 0 0;color:#111111}
}
@media (max-width:1200px) {
.services 							{ grid-gap: 40px;margin: 80px 0}
.services .hide a.link              { position:absolute;width:100%;height:100%;top: 0;left:0;opacity:0;z-index: 90}
}
@media (max-width:1000px) {
.services 							{ background: #eee; margin: 80px -7.5vw 60px; padding: 0 7.5vw; grid-gap: 10px;grid-template-columns: 1fr}
.services .item   					{ text-align: left;gap:5px;background:url(../images/arrow_m.svg) right 30px center no-repeat, #fff; position: relative; padding:20px 50px 20px 30px;display:grid;grid-template-columns: 80px 1fr}
.services .item .hide               { padding:0}
.services .item img 				{ width: 70%;margin: 0;object-fit: cover;}
.services .sous_titre               { margin:0;font-size: 15px;}
.services .sous_titre:after         { display:none}
.services .item p   				{ display: none;}
}
@media (max-width:600px)            {
.services                           { margin-top: 55px}
.services .sous_titre				{ letter-spacing: 0.5px;}
}
@media (max-width:480px){
.services .sous_titre               { font-size: 12px}
}


/*********Borne*********/
.borne                              { text-align: center;padding : 80px 0 115px;background:#111111;margin-bottom: 130px}
.borne img                          { margin-bottom: 25px}
.borne span                         { text-transform: uppercase}
.borne p                            {margin :0 auto 20px;font :400 22px/20px "Barlow";letter-spacing: 0.3px;font-style: italic;color:#fff;}
.bloc_grid .photo img               { border-radius:5px;}
.bloc_grid .sous_titre              { position: relative;margin-bottom: 20px;font:400 25px/35px "Barlow";letter-spacing: 0.4px;}
.bloc_grid .sous_titre:after        { display: block;content: "";width: 50px;height: 5px;background: #ffc53b;margin-top: 20px;}
.borne a.link                       {margin-top: 20px; background: linear-gradient(to top, #ffc53b 0%, #ffc53b 50%, #ffffff 50%, #ffffff 100%);background-size: 100% 200%; background-position: 0 100%}
@media (min-width:1201px){
.borne a.link:hover                 { background-position: 0 0;color:#111111}
}
@media (max-width: 1200px){
.borne                              { margin-bottom: 80px;padding-bottom: 80px}
}
@media (max-width:1000px){
.borne p                            { font-size: 18px;line-height: 28px}
}
@media (max-width:600px){
.borne                              { padding:60px 0 70px;margin-bottom: 60px}
.borne img                          { margin-bottom: 20px}
.borne a.link                       { margin-top: 15px}
.bloc_grid                          { text-align: center;}
.bloc_grid .sous_titre              { font-size: 20px;line-height: 32px;     margin-bottom: 10px;}
.bloc_grid .sous_titre:after        { margin: 15px auto 0}
.borne p                            { font-size: 15px;line-height: 28px}
}
/*********Devis*********/
.bg_devis                           { position:relative}
.bg_devis:after                     { content: "";background: url(../images/shape_last.svg) no-repeat;width: 580px;height: 790px;top: -250px;right: -190px;;position: absolute;z-index: -1;}
.devis                              { display:grid;grid-template-columns: 1fr 1fr 1fr;margin: 130px 0;gap:30px}
.devis .item                        { border-radius: 5px; padding:50px; background:#fff; display:grid;grid-template-columns: 75px 1fr ;align-items: center;position:relative}
.devis .item a                      { position:absolute;width:100%;height:100%;top: 0;left:0;z-index: 9;background:url(../images/arrow.svg) right 50px center no-repeat}
.devis .sous_titre                  { margin-bottom: 0;font :700 20px/28px "Barlow";letter-spacing: 1px;text-transform: uppercase;font-style: normal!important;}
.devis .sous_titre span             { display:block;text-transform: none;font :400 20px/30px "Barlow";letter-spacing: 0.5px}
@media (min-width:1201px){
.devis .item:hover a                { background-position: right 40px center }
}
@media (max-width:1000px){
.devis                              { grid-template-columns: 1fr}
}
@media (max-width: 1200px){
.devis                             { margin: 80px 0;}
.devis .item a                     { background-position: right 20px center}
.devis .sous_titre                 { font-size: 18px;line-height: 28px }
.devis .sous_titre span            { font-size: 16px;line-height: 26px }
.bg_devis:after                     { display:none}
}
@media (max-width:1000px){
.devis .item                       { padding:10px}
.devis .item a                     { background:none}
.devis .sous_titre,
.devis .sous_titre span            { font-size: 16px;line-height: 26px }
.devis                             { margin: 60px 0;gap:10px}
.devis .item                       { padding: 20px 50px 20px 30px;min-height:100px}
.devis .item img                   { width:44px}
.devis .item a                     { background:url(../images/list_devis.svg) right 30px center no-repeat }
.devis .sous_titre span            { display:inline-block; font-weight: 700;text-transform: uppercase; }
}
@media (max-width:600px){

}

@media (max-width:480px){
.devis .sous_titre,
.devis .sous_titre span            { font-size: 12px; }
}