/***** banner *****/
.banner                             { position: relative; z-index: 1; padding-top: 120px;}
.banner .wrapper                    { display: grid; grid-template-columns: 530px auto; gap: 80px;}
.banner .wrapper::after             { content: ""; display: block; position: absolute; top: 50%; bottom: 0; left: 100%; width: 50vw; background: var(--main-color);}
.banner .chapo                      { margin: 0;}
.banner .texte                      { padding: 130px 0; order: 1;}
.banner .slider                     { width: 100%; order: 2;}
.banner .slider img                 { width: 100%; height: 100%; object-fit: cover; display: block;}
.banner .swiper-slide               { width: 910px;}
.wrapnav                            { display: grid; grid-template-columns: 60px 60px; position: absolute; bottom: 0; left: 490px; border-top: none;}
.wrapnav .arrownav                  { width: 60px; height: 60px; background-position: center; background-color: var(--second-color); background-repeat: no-repeat; cursor: pointer; transition: all ease-in-out 400ms;}
.wrapnav .arrownav_prev             { background-image: url(../images/arrow_prev.svg); }
.wrapnav .arrownav_next             { background-image: url(../images/arrow_next.svg);}

@media (min-width:1201px) {
.wrapnav .arrownav:hover            { background-color: var(--third-color);}
.banner .devis:hover                { color: var(--second-color);}
.banner .devis:hover span           { color:var(--main-color);}
}
@media (max-width:1280px) {
.banner .wrapper                    { grid-template-columns: 400px auto; gap: 40px;}
.banner .texte                      { padding: 50px 0 130px;}
.wrapnav                            { left: 320px;}
}
@media (max-width:1200px) {
.banner                             { padding-top: 100px;}
.banner .texte                      { padding-top: 40px;}
}

@media (max-width:1000px) {
.banner                             { margin-bottom: 80px;}
.banner .wrapper                    { max-width: initial; grid-template-columns: 1fr; gap: 30px; max-width: initial; width: 100%;}
.banner .wrapper::after,
.wrapnav                            { display: none;}
.banner .swiper-slide               { width: 100%; height: auto;}
.banner .slider                     { order: 1;}
.banner .texte                      { padding: 0; order: 2; max-width: 750px; width: 90vw; margin: 0 auto; text-align: center;}
.banner .slider img                 { height: 60vh; }
}
@media (max-width:700px) {
.banner                             { gap: 20px; margin-bottom: 50px;}
.banner .slider                     { height: 320px; background: url(../images/banner_mobile.webp) center top / cover no-repeat;}
/* .banner .swiper-wrapper             { display: none;} */
.banner .titre_main                 { max-width: 300px; margin: 0 auto 10px;}
.banner .devis                      { background: var(--second-color); padding: 0 30px; color: var(--white); text-transform: uppercase; font-size: 0; font-weight: 700; width: 100%;}
.banner .devis span                 { font-size: 12px; color: var(--white);}
}


/***** 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                           { background: url(../images/bg_services.svg) calc(50% + 800px) -55px no-repeat var(--main-color); padding: 210px 0 140px; margin-top: -60px;}
.services .big_title                { font: 600 120px/100px var(--font-main); color: var(--third-color); text-transform: uppercase;}
.services .grid                     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px; align-items: start; text-align: center; margin-top: -20px; padding-top: 295px;}
.services .last                     { margin-top: -215px;}
.services .item                     { background: var(--white); text-align: center; padding: 75px 45px;}

.services .item img                 { display: block; margin: 0 auto 15px;}
.services .item .sous_titre         { font-size: 20px; line-height: 30px;}
.services .plus                     { width: 60px; height: 60px; display: inline-block; vertical-align: top; background: url(../images/plus.svg) center no-repeat var(--second-color); margin-top: 25px;}
.services .cta                      { color: var(--white); font: 400 25px/40px var(--font-main); width: 33.333%; margin: -230px auto 0; text-align: center;}
.services .cta img                  { display: block; margin: 0 auto 20px;}
.services .link                     { margin-top: 20px;}

@media (min-width:1201px) {
.services .link:hover               { background-color: var(--white); color: var(--main-color);}
.services .plus:hover               { background-color: var(--main-color);}
}
@media (min-width:1000px) {
.services .grid .item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 2; } 
.services .grid .item:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; margin-top: -295px;} 
.services .grid .item:nth-child(3) { grid-column: 3 / 4; grid-row: 1 / 2; } 
.services .grid .item:nth-child(4) { grid-column: 1 / 2; grid-row: 2 / 3;}
.services .grid .item:nth-child(5) { grid-column: 2 / 3; grid-row: 2 / 3;margin-top: -295px;} 
.services .grid .item:nth-child(6) { grid-column: 3 / 4; grid-row: 2 / 3;}
}
@media (max-width:1280px) {
.services .grid                     { gap: 40px;}
.services .last                     { margin-top: -255px;}
.services .item                     { padding: 50px 30px;}
}
@media (max-width:1200px) {
.services                           { padding-top: 135px;}
}
@media (max-width:1000px) {
.services                           { margin: 0; padding: 80px 0; background-position: center top; background-size: 100%;}
.services .big_title                { display: none;}
.services .grid                     { margin: 0; align-items: stretch; padding-top: 0; gap: 20px;}
.services .item                     { margin-top: 0; position: relative;}
.services .item::after              { content: url(../images/plus_bleu.svg);line-height: 0; display: block;}
.services .item  p                  { display: none;}
.services .plus                     { width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; margin: 0;}
.services .item .sous_titre         { font-size: 15px;}
.services .cta                      { margin-top: 50px; width: 100%;}
}
@media (max-width:700px) {
.services                           { padding: 60px 0 50px; background-size: 660px;}
.services .grid                     { gap: 10px; grid-template-columns: 1fr 1fr;}
.services .item                     { padding: 40px 5px;}
.services .item img                 { height: 60px; margin-bottom: 0;}
.services .cta                      { font-size: 20px; line-height: 30px;}
}



/***** apropos *****/
.apropos::after                         { content: url(../images/bg_services.svg); display: block; position: absolute; top: 25px; right: calc(50% + 90px);}
.apropos .photo                         { display: grid; grid-template-columns: auto 54%; align-items: start; gap: 20px; z-index: 1;}
.apropos .photo :first-child            { grid-column: 1 / -1;}
.apropos .photo .sous_titre             { color: var(--white); background: var(--main-color); text-align: center; display: grid; align-items: center; justify-content: center; padding: 0 30px; margin-bottom: 0; aspect-ratio: 1;}
.apropos .photo .sous_titre strong      { color: var(--second-color); text-transform: uppercase;}
.apropos .texte .titre_main             { font-size: 30px; line-height: 30px;}
.apropos .texte .link                   { margin-right: 5px;}
.agree                                  { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 30px; margin-top: 40px;}

@media (max-width: 1200px) {

}
@media (max-width:1000px) {
.apropos::after                         { display: none;}
}
@media (max-width: 700px) {
.apropos                                { margin: 50px 0 30px; gap: 30px;}
.apropos .photo                         { grid-template-columns: auto 1fr; }
.apropos .photo .sous_titre             { font-size: 15px; line-height: 20px;}
.apropos .texte .titre_main             { font-size: 20px;}
.apropos .texte .titre_main::after      { display: none;}
.gridlink                               { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; gap: 10px;}
.apropos .texte .link                   { margin: 0;}
.agree                                  { grid-template-columns: 55px auto; gap: 20px; margin-top: 30px; font-size: 13px; line-height: 20px;}
.agree img                              { width: 100%; height: auto;}
}


/***** faq *****/
.table_plus p a {border-bottom: 1px solid transparent;    padding-bottom: 2px;}

@media (min-width:1201px) {
.table_plus p a:hover					{ border-color: var(--main-color); color: var(--main-color);}
}