/***** banner *****/
.banner 							{ width: 100%; height: 90vh; max-height: 1000px; position: relative; max-width: 2200px; padding-top: 0; margin: 0 auto 75px auto;}
.banner:before 						{ width: 200vw; height: 90%; position: absolute; left: -50vw; top: -100px; background: rgba(9,39,114,1); z-index: -1; content: "";}
.banner::after                      { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:  rgba(9,39,114,0.23);}

.banner .wrapper                    { position: absolute; left: 0; right: 0; bottom: 60px; z-index: 50;}

.banner video 						{ width: 100%; height: 100%; object-fit: cover; object-position: center; position: relative; display: block;}

.banner .parallax                   { position: absolute; left: -160px; top: 0;}

@media (max-width:2000px) {
.banner:before 						{ height: 100%; top: 0;}
}
@media (max-width:1200px) {
.banner 							{ max-height: none; height: auto;}
.banner video 						{ height: auto;}
}
@media (max-width:1000px) {
.banner 							{ margin-bottom: 0;}
.banner video  						{ min-height: 65vw; height: auto; max-height: none;}
}
@media (max-width:600px) {
.banner 							{ padding-top: 70px;}
.banner:before 						{ display: none;}
.banner video 						{ min-height: 75vw;}
}



.slogan.big                         { margin: 80px 0 0 0 ;}
.slogan.big .titre_main             { text-align: center; margin-bottom: 0; font-size: 65px; line-height: 80px;}
@media (max-width:1200px) {
.slogan.big .titre_main             { font-size: 55px; line-height: 65px;}
.slogan.big                         { margin: 60px 0 0 0 ;}
}
@media (max-width:1000px) {
.slogan.big .titre_main             { font-size: 40px; line-height: 50px;}
}
@media (max-width:600px) {
.slogan.big .titre_main             { font-size: 35px; line-height: 65px;}
.slogan.big                         { margin: -15px 0 0 0 ;}
}

/***** intro *****/
.intro                              { position: relative; margin-bottom: 100px; max-width: 560px; margin-left: auto;}
.intro .titre_main                  { color: #ef6f18;}
.atout                              { margin-bottom: 145px; padding-left: 85px; position: relative;}
.atout .parallax                    { position: absolute; top: calc(100% - 150px); right: -100px;}
.atout li                           { display: grid; grid-template-columns: 110px auto; align-items: center; margin-bottom: 40px; font: 400 28px/30px "Dancing Script"; color: #07306f;}
.atout li:last-child                { margin-bottom: 0;}
@media (max-width:1200px) {
.atout                              { margin-bottom: 100px; padding-left: 0;}
.atout li                           { margin-bottom: 30px;}
.intro                              { margin-bottom: 40px;}
.atout .parallax                    { display: none;}
}
@media (max-width:1000px) {
.atout                              { margin-bottom: 0;}
.intro                              { margin: 0; max-width: 100%; margin-top: 35px;}
}
@media (max-width:600px) {
.intro                              { display: none;}
.atout li                           { font-size: 20px; line-height: 30px; grid-template-columns: 90px auto;}
.atout li img                       { width: 50px;}
.atout li:last-child img            { width: 60px;}
}



/***** services *****/
.services                           { max-width: 1800px; margin: 90px auto 75px; gap: 80px; display: grid !important; grid-template-columns: 1fr 1fr;}
.services .item                     { position: relative; transition: all 400ms ease-in-out; margin-bottom: 70px;}
.services .texte                    { padding: 30px 50px 40px;}
.services .item p                   { margin-bottom: 25px;}
.services .item img                 { width: 100%; height: auto; display: block;}
.services .item .titre_main         { color: #ef6f18;}
.slogan                             { text-align: center; margin: 250px 0 0; position: relative;}
.slogan .deco                       { position: absolute; top: calc(100% + 120px); left: 0; right: 0; margin: auto;}
.slogan .parallax.light_top         { position: absolute; top: -250px; right: -100px;}
.slogan .deco .inner.second         { position: absolute; top: 100px; right: -50px; }
@media (min-width:1201px) {
.services .item:hover               { transform: translateY(-20px); box-shadow: 0 0 30px 0 rgb(0 0 0 / 10%);}
}
@media (max-width:1200px) {
.services                           { gap: 40px;}
.services .item                     { margin-bottom: 0;}
.slogan .deco                       { top: 130%;}
}
@media (max-width:1000px) {
.services                           { max-width: 750px; width: 90vw; margin: 0 auto; padding: 0; grid-template-columns: 1fr;}
.services .texte                    { padding: 20px 0 0;}
.slogan                             { margin: 10px 0 40px; padding-top: 40px; background: url(../images/favicon_blue.svg) top center / 75px no-repeat;}
.slogan .deco                       { display: none;}
}
@media (max-width:600px) {
.services .texte                    { text-align: center; position: relative;}
.services .item p                   { display: none;}
.services .item .titre_main         { margin-bottom: 0;}
.services .texte .link              { position: absolute; top: 0; left: 0; width: 100%; display: block; height: 100%; opacity: 0;}
.services .item img                 { height: 280px; object-fit: cover;}
}




/***** texte more *****/
.textMore                           { margin: 30px 0; display: none;}
.link-moins,
.link-plus                          { cursor: pointer; color: #ef6f18;}
@media (max-width:600px) {
.textMore                           { margin: 50px 0;}
}

/***** apropos *****/
.apropos                            {text-align: center; background: #e9f2ff; padding: 90px 0 100px;}
.apropos p                          { margin-bottom: 25px;}
.apropos .link                      { margin: 0 2px;}
@media (max-width:600px) {
.apropos                            { padding: 55px 0;}
}

/***** moving galerie *****/
.moving_galerie 				    { background: linear-gradient(to bottom, #e9f2ff 50%, #fff 50%); margin: 0 0 120px; }
