.sous_titre                         { color: var(--black); font: var(--sous-titre-home); margin-bottom: 30px;}

@media (max-width:700px) {
.sous_titre                         { color: var(--black); font: var(--sous-titre-home-mobile);}
}

/***** banner *****/
.banner                             { position: relative; margin-top: 90px; padding: 95px 0;}
.banner .img                        { height: 100%; height: 100%; position: absolute; left: calc(50% - 325px); top: 0; right: 0; max-width: 1600px; border-radius: 10px 0 0 10px; overflow: hidden;}
.banner .swiper                     { height: 100%; width: 100%;}
.banner img                         { width: 100%; height: 100%; object-fit: cover;}
.banner_content                     { max-width: 600px; position: relative; z-index: 1;}
.banner_content::before             { content: ""; display: block; position: absolute; width: 100vw; top: 0; height: 100%; right: 100%; background-color: var(--main-color);}
.banner .texte                      { color: #fff; background: var(--main-color); padding: 85px 60px 80px 0; border-radius: 0 10px 10px 0;}
.banner .titre_main                 { color: var(--main-color-light); line-height: 40px; margin-bottom: 0;}
.banner li                          { font-size: 18px;}


.banner .swiper-pagination          { position: absolute; right: 100px; left: auto; bottom: 40px; line-height: 0; width: auto; display: flex; gap: 15px;}
.banner .swiper-pagination-bullet   { background-color: var(--white); width: 15px; height: 15px; transition: all ease-in-out 400ms;opacity: 0.5; margin: 0 !important;}
.banner .swiper-pagination-bullet-active { opacity: 1;}

@media (min-width:1201px) {
.banner .devis:hover                { background-color: var(--white); color: var(--main-color);}
.banner .devis:hover::before        { filter: none;}
}

@media (max-width:1200px) {
.banner_content                     { max-width: 550px;}
.banner .img                        { left: 35%;}
.banner .texte                      { padding-top: 40px; padding-bottom: 40px;}
}
@media (max-width:1000px) {
.banner                             { padding: 0; background-color: var(--main-color);}
.banner .img                        { border-radius: 0; position: static; height: 500px;}
.banner .wrapper                    { width: 100%; max-width: initial;}
.banner_content                     { max-width: 750px; width: 90vw; margin: 0 auto;} 
.banner .texte                      { padding: 40px 0;}
.banner .swiper-pagination          { display: none;}
}
@media (max-width:700px) {
.banner                             { margin-top: 70px;}
.banner .img                        { height: 240px; background: url(../images/banner_mobile.webp) center top / cover no-repeat; height: 280px;}
.banner .texte                      { padding: 25px 0 30px; width: 85vw;}
.banner .ul_list,
.banner .chapo                      { display: none;}
.banner .titre_main                 { margin-bottom: 15px;}
}


/***** atout *****/
.atout                              { display: grid; grid-template-columns: repeat(4, auto); text-align: center; justify-content: space-between; max-width: 965px; margin: 80px auto;}
.atout .titre                       { margin-bottom: 0;}
.atout img                          { display: block; margin: 0 auto 15px;}

@media (max-width:1000px) {
.atout                              { grid-template-columns: 1fr 1fr; gap: 30px 20px;}
}
@media (max-width:700px) {
.atout                              { margin: 40px 0;}
.atout img                          { height: 40px;}
}



/***** services *****/
.services .wrapper                  { display: grid; grid-template-columns: 29% 1fr; gap: 75px; align-items: start; max-width: 1500px;}
.services .encart                   { border-radius: 10px; overflow: hidden; background-color: var(--main-color); color: var(--white);}
.services .encart .texte            { padding: 20px; min-height: 170px; display: grid; align-items: center; justify-content: center; text-align: center;}
.services .encart p                 { max-width: 280px; font-size: 20px; font-style: italic; line-height: 35px;}
.services .encart img               { width: 100%; height: auto; display: block;}
.services .grid                     { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.services .item                     { background-color: var(--gray); padding: 40px; border-radius: 10px; font-size: 15px; line-height: 30px;}
.services .item img                 { display: block; margin-bottom: 25px; max-width: 60px; max-height: 60px;}
.services .item .titre              { font: 700 20px/26px "DM Sans"; margin-bottom: 15px; color: var(--second-color); transition: all ease-in-out 400ms;}
.services .item .link               { margin-top: 20px;}

@media (min-width:1201px) {
.services .item                     { transition: all ease-in-out 400ms;}
.services .item:hover               { background-color: var(--main-color); color: var(--white);}
.services .item:hover .titre        { color: var(--main-color-light);}
.services .item .link:hover         { background-color: var(--white); color: var(--main-color);}
}
@media (max-width:1200px) {
.services .wrapper                  { gap: 40px;}
.services .item                     { padding: 30px;}
}
@media (max-width:1000px) {
.services .wrapper                  { display: block;}
.services .encart                   { display: grid; grid-template-columns: 30% auto; margin-bottom: 40px;}
.services .encart img               { height: 250px; object-fit: cover;}
.services .encart .texte            { min-height: 0;}
}
@media (max-width:700px) {
.services .encart                   { display: none;}
.services .grid                     { grid-template-columns: 1fr; gap: 10px;}
.services .item                     { padding: 0 90px 0 0; display: grid; grid-template-columns: 80px auto; align-items: center; position: relative; background: url(../images/arrow_right.svg) right 20px center no-repeat var(--main-color); height: 80px;}
.services .item img                 { width: 40px; display: block; margin: 0 auto; object-fit: contain; max-height: 40px;}
.services .item .titre              { color: var(--white); margin-bottom: 0; font-size: 13px; line-height: 26px;}
.services .item p                   { display: none;}
.services .item .link               { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin: 0;}
}



/***** moving galerie *****/
.galerie                            { text-align: center; margin: 80px 0;}
.galerie .sous_titre                { text-align: center; margin-bottom: 30px;}
.moving_galerie 					{ width: auto; left: 50%; transform: translateX(-50%); position: relative; text-align: center; margin-bottom: 30px;}
.moving_galerie .row 				{ width: auto; display: flex;}
.moving_galerie .row .item          { width: auto; display: flex; animation: scroll_gallery 50s linear infinite;}
.moving_galerie .row .item div 		{ padding: 0 10px;} 
.moving_galerie .row .item img 		{ width: auto; height: 385px; display: block; margin: 0 auto; transition: all 300ms ease-in-out; border-radius: 10px;}

@keyframes scroll_gallery {
0%									{ transform: translate(0, 0);}
100% 								{ transform: translate(-100%, 0); }
}
@media (max-width:1000px) {
.moving_galerie .row .item img 		{ height: 380px;}
}
@media (max-width:700px) {
.galerie                            { margin: 60px 0 40px;}
.galerie .sous_titre                { display: none;}
.moving_galerie .row .item div 		{ padding: 0 5px;}
.moving_galerie .row .item img 		{ height: 250px;}
}



/***** apropos *****/
.apropos                                { text-align: center; max-width: 920px; margin: 0 auto; padding-top: 28px; background: url(../images/favicon.svg) top center no-repeat;}
.apropos .sous_titre                    { margin-bottom: 7px;}
.apropos .titre                         { color: var(--second-color); font: 600 19px/28px "DM Sans"; margin-bottom: 20px;}
.apropos .link                          { margin-top: 15px;}

@media (max-width:700px) {
.apropos                                { text-align: left; background: none; padding: 0;}
.apropos .titre                         { font-size: 17px; line-height: 23px;}
.apropos .link                          { width: auto; padding: 0 45px;}
}