/***** banner *****/
.banner                         { position: relative; padding-top: 140px;}
.banner .img                    { height: 660px; position: relative; background: url(../images/banner.webp) left top / cover no-repeat;}
.banner .content                { position: relative; z-index: 1; padding: 100px 0 0 95px;}
.banner .titre_main             { color: #fff; font-size: 50px; line-height: 60px; margin-bottom: 30px;}

@media (max-width:1200px) {
.banner                         { padding-top: 100px;}
}
@media (max-width:1000px) {
.banner .wrapper                { width: 100%; max-width: initial;}
.banner .content                { padding-left: 0; padding-top: 85px; width: 90vw; max-width: 750px; margin: 0 auto; text-align: center;}
}
@media (max-width:700px) {
.banner .img                        { height: 420px; background-image: url(../images/banner.webp) ;}
.banner .titre_main                 { font-size: 25px; line-height: 35px;}
}

/***** atout *****/ 
.intro                              { margin: -95px 0 120px; position: relative; z-index: 1; overflow: hidden;}
.intro .wrapper                     { display: grid; grid-template-columns: 460px auto; gap: 80px; align-items: start;}
.intro .wrapper::after              { content: url(../images/favicon.svg); position: absolute; line-height: 0; top: 170px; right: -200px;}
.intro .atout                       { background: #242d39; color: #fff; padding: 50px 60px 45px; box-shadow: -10px 10px 0 #399be8;}
.intro .atout .titre_main           { color: #fff; font-size: 25px; line-height: 35px;}
.intro .atout li                    { font-size: 20px; line-height: 30px;}
.intro .texte                       { margin-top: 140px; position: relative; z-index: 1;}

@media (max-width:1000px) {
.intro                              { margin: 0 0 70px;}
.intro .atout                       { box-shadow: none; position: relative; padding: 40px 0;}
.intro .atout::after                { content: ""; display: block; position: absolute; inset: 0 -200px; background: #242d39; z-index: -1;}
.intro .wrapper                     { grid-template-columns: 1fr; gap: 40px;}
.intro .wrapper::after              { display: none;}
.intro .texte                       { margin: 0;}
}
@media (max-width:700px) {
.intro                              { margin-bottom: 40px;}
.intro .atout                       { padding: 30px 0 15px;}
.intro .atout .titre_main           { font-size: 20px; margin-bottom: 5px;}
.intro .atout li                    { font-size: 16px;}
}



/***** services *****/
.services                               { position: relative; background: #242d39; padding: 100px 0; overflow: hidden;}
.services .grid                         { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;}
.services .item                         { background: #fff; padding: 30px 40px 60px; position: relative;}
.services .item .titre_main             { font-size: 25px; line-height: 35px; color: #23272d; margin-bottom: 20px;}
.services .item .titre_main::after      { content: ""; display: block; width: 50px; height: 5px; background: #399be8; margin-top: 20px;}
.services .item p                       { margin-bottom: 10px;}
.services .icone                        { position: absolute; right: 30px; bottom: 30px;}
.services .arrow_link                   { height: 50px; background: url(../images/arrow_link.svg) left center no-repeat; display: block; font-size: 0; line-height: 0;}
.services .cta                          { text-align: center; height: 100%; background: #399be8; display: grid; align-items: center; justify-content: center; padding: 20px 55px; position: relative;}
.services .cta .titre_main              { color: #fff; font-size: 25px; line-height: 35px; margin-bottom: 25px;}
.services .cta .link                    { margin-top: 10px; background-image: linear-gradient(to top, #fff 0% 50%, #242d39 50% 100%); color: #242d39;}
.services .cta span                     { text-transform: uppercase;}

@media (min-width:1201px) {
.services .arrow_link:hover             { background-position: 35px center;}
.services .cta .link:hover              { color: #fff;}
}
@media (max-width:1366px) {
.services .grid                         { grid-template-columns: repeat(3, 1fr);}
}
@media (max-width:1200px) {
.services .grid                         { gap: 20px;}
.services .item                         { padding: 30px 30px 60px;}
}
@media (max-width:1000px) {
.services                               { padding: 80px 0;}
.services .grid                         { grid-template-columns: 1fr; gap: 10px;} 
.services .item                         { padding: 0 30px;}
.services .icone,.services .item .titre_main::after, 
.services .item p                       { display: none;}
.services .arrow_link                   { position: absolute; height: auto; inset: 0; background-position: right 30px center;}
.services .item .titre_main             { margin: 0; line-height: 70px;}
.services .cta                          { padding: 40px 30px 50px; display: block;}
.services .cta>div                      { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.services .cta .titre_main              { grid-column: 1 / -1;}
.services .cta .link                    { padding: 0 10px;}
}
@media (max-width:700px) {
.services                               { background: none; padding: 0;}
.services .item                         { background: #242d39;}
.services .item .titre_main             { font-size: 16px; font-weight: 500; color: #fff;}
.services .arrow_link                   { background-size: 25px; background-position: right 20px center;}
.services .cta .titre_main              { font-size: 20px; line-height: 30px; margin-bottom: 5px;}
}

@media (max-width:600px) {
    .services .cta                     { padding-left: 0; padding-right: 0;}
    .services .cta:before              { content: ''; width: 200vw; left: -50vw; height: 100%; position: absolute; z-index: -1; background: #399be8; top: 0; }
}

/***** atout *****/
.gridfaq                                { display: grid; grid-template-columns: 420px auto; align-items: start; gap: 80px; margin: 100px 0;}
.gridfaq .photo                         { line-height: 0;}
.gridfaq .photo img                     { width: 100%; height: auto; box-shadow: -10px 10px 0 #399be8;}
.gridfa .texte                          { padding-top: 50px;}
.gridfaq .table_plus                    { margin: 30px 0 0;}
@media (max-width:1000px) {
.gridfaq                                { margin: 80px 0; grid-template-columns: 1fr; gap: 30px;}
.gridfaq .texte                         { padding-top: 0;}
.gridfaq .photo img                     { height: 400px; object-fit: cover;}
}
@media (max-width:700px) {
.gridfaq                                { margin: 45px 0 30px; gap: 20px;}
.gridfaq .photo img                     { box-shadow: none; height: 320px;}
.gridfaq .table_plus                    { margin: 20px 0 0;}
}