/***** banner *****/
.banner                             { position: relative; font-size: 0; line-height: 0;}
.banner .wrapper_header             { padding-top: 130px;}
.banner .wrapper_header:before      { position: absolute; top: 0; right: calc(100% - 430px); bottom: 0; height: 100%; width: 100%; background: #20252b; content: ""; z-index: -1;}
.banner_content                     { border-radius: 20px; overflow: hidden;display: grid; grid-template-columns: 60% 40%; align-items: stretch; box-shadow: 0 0 30px 0 rgba(32,37,43,0.18); background: #fff;}
.banner .texte                      { padding: 0 60px; position: relative; display: flex; align-items: center;}
.banner .titre_main                 { font-size: 32px; line-height: 44px; letter-spacing: 0.5px; color: #20252b; text-transform: uppercase;}
.banner .texte .chapo               { margin-bottom: 35px;}
.banner .photo                      { position: relative;}
.banner .photo img                  { height: 620px; width: 100%; object-fit: cover; position: relative; z-index: 1;}
.banner .agree                      { padding: 45px 0 45px 80px;}
.banner .agree *                    { display: inline-block; vertical-align: middle;}
.banner .agree span                 { font: 500 18px/24px "Barlow"; color: #fff;}
.banner .agree img                  { filter: brightness(0) invert(1); width: 140px; margin-left: 20px;}

@media (min-width:1201px)           {
.banner .texte a.link-devis:hover   { background:#20252b; color: #fff; }
}

@media (max-width:1366px) {
.banner                             { grid-template-columns: 55% 45%;}
.banner .wrapper_header:before      { right: calc(100% - 335px);}
.banner .agree                      { padding-left: 40px;}
}

@media (max-width:1200px) {
.banner_content                     { grid-template-columns:1fr; padding-bottom: 0;}
.banner .wrapper_header             { padding-top: 100px;}
.banner .wrapper_header:before      { left:-50vw; bottom: 0; height: 36%; width:200vw;}
.banner .agree                      { padding: 40px 0 0; margin: 0 auto; max-width: 210px;}
.banner .agree span                 { color: #20252b;}
.banner .agree img                  { filter: none;}
.banner .photo img                  { border-bottom: none; height: 55vw; }
.banner .texte                      { background: none; padding: 40px; display: block;}
.banner .texte div                  { text-align: center;}
.banner .texte .titre br            { display: none;}
}


@media (max-width:600px) {
.banner                             { margin-bottom: 50px;}
.banner .wrapper_header             { width: 100%;}
.banner .photo img                  { height: 370px;}
.banner_content                     { border-radius: 0; box-shadow: none;}
.banner .texte                      { padding-left: 0; padding-right: 0;}
.banner .texte .chapo               { display: none;}
.banner .texte div                  { text-align: left; width: 90vw; margin: 0 auto;}   
.banner .texte .titre_main          { font-size: 22px; line-height: 30px; margin-bottom: 25px; max-width: 310px;}
.banner .agree                      { margin: 0 auto; width: 90vw; padding: 0;}
}



/***** services *****/
.services                               { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 110px 0 100px; }
.services::before                       { content: ""; position: absolute; left: -5000px; top: 190px; width: 10000px; height: calc(100% - 190px*2); background: #20252b; z-index: -1;}
.services .item                         { position: relative; padding: 60px 60px 40px; border-radius: 20px;  box-shadow:0 0 30px 0 rgba(32,37,43,0.18); background: #fff}
.services .item .icone                  { width: 100px; height: 100px; display: grid; align-items: center; justify-content: center; border-radius: 50%; background-color: #ffb910;}
.services p                             { letter-spacing: 0.4px;}
.services .item p a                     { color: #20252b; border-bottom: 1px solid #20252b; }
.services .titre_icone                  { display: grid; grid-template-columns: min-content auto; gap: 20px; align-items: center; margin-bottom: 15px;}
.link_arrow                             { display: grid; align-items: center; height: 50px; width: 100%;}
.link_arrow img                         { transition: all ease 400ms; position: relative;}
.services .sous_titre                   { font-size: 20px;}
@media (min-width:1201px) {
.link_arrow:hover img                   { transform: translateX(20px);}
.services .item p a:hover               { color: #ffb910; border-bottom: 1px solid #ffb910;  }
}
@media (max-width:1200px) {
.services .sous_titre                   { font-size: 18px;}
}
@media (max-width:1000px) {
.services                               { grid-template-columns: 1fr; margin: 50px 0 ;}
.services .sous_titre                   { font-size: 16px;}
}
@media (max-width:600px) {
.services                               { gap: 10px; padding-bottom: 0; margin: 0; padding: 50px 0;}
.services::before                       { top: 0; bottom: 0; left: -100px; right: -100px; height: auto;}
.services .item .icone                  { width: 75px; height: 80px; background: none;}
.services .titre_icone img              { transform: scale(0.68); transform-origin: center;}
.services .titre_icone                  { gap: 0; margin: 0; grid-template-columns: 75px auto;}
.services .sous_titre                   { font-size: 16px; margin-bottom: 0;}
.services .stitre                       { display: none;}
.services .item                         { padding: 0 15px; border-radius: 8px; z-index: 2; box-shadow: none;}
.services .item p                       { display: none;}
.link_arrow                             { position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; background: url(../images/arrow_right_s.svg) right 30px center no-repeat;}
.link_arrow img                         { display: none;}
}



/***** bandeau *****/
.bandeau                                { display: grid; align-items: center; justify-content: center; height: 110px; background: #20252b; font-size: 20px; line-height: 30px; color: #fff; border-radius: 10px;}
.bandeau span                           { padding-left: 80px; position: relative;}
.bandeau a                              { color: #ffb910; border-bottom: 1px solid transparent;}
.bandeau span img                       { position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
@media (min-width:1201px) {
.bandeau a:hover                        { border-color: #ffb910;}
}
@media (max-width:600px) {
.bandeau                                { font-size: 16px; display: block; border-radius: 5px; padding: 25px 10px; text-align: center; margin: 50px 0;height: auto;}
.bandeau span                           { padding: 0;}
.bandeau span img                       { position: static; display: block; margin: 0 auto 5px; width: 45px; transform: none;}
}



/***** experience *****/
.experience                             { margin: 145px 0 100px;}
.experience .couronne                   { position: absolute; top: -65px; right: -75px; width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ffb910; z-index: 11;}
.experience .couronne img               { width: auto; border-radius: 0; top: 3px;}
@media (max-width:1200px) {
.experience .couronne                   { right: -45px;}
}
@media (max-width:600px) {
.experience                             { margin: 115px 0 40px;}
.experience .couronne                   { right: 30px; width: 110px; height: 110px; top: -55px;}
.experience .couronne img               { width: 85px;}
}




/***** galerie *****/
.galerie                                { margin: 100px 0; text-align: right;}
.galerie .grid                          { margin: 0 -15px;}
.galerie .item                          { margin: 0 15px;}
.galerie .sous_titre                    { text-align: left; margin-bottom: 25px;}
.galerie .grid                          { margin-bottom: 30px;}
.galerie img                            { width: 100%; height: auto; border-radius: 10px;}
@media (max-width:1000px) {
.galerie .grid                          { width: 120%; margin: 0;}
.galerie .item                          { margin: 0 15px 0 0; width: 200px;}
.galerie .slick-dots                    { background: #e8e8e8; display: grid; margin: 20px 0 30px; border-radius: 3px;}
.galerie .slick-dots button             { width: 100%; border: none; height: 4px; border-radius: 3px;}
.galerie .slick-dots button:before      { display: none;}
.galerie .slick-dots li                 { display: block; margin: 0;}
.galerie .slick-dots li.slick-active button{ background-color: #ffb910;}
}
@media (max-width:600px) {
.galerie                                { margin: 0 0 30px; text-align: left;}
}