/***** banner *****/
.banner                             { position: relative; font-size: 0; line-height: 0; margin-bottom: 210px; padding-top: 120px;}
.banner:before                      { content: ""; position: absolute; top: 0; left: calc(50% + 280px); width: 100%; height: calc(100% + 120px); background: #000; z-index: -1;}
.banner_content                     { background: #000;}
.banner .img                        { position: relative; background: url(../images/banner.webp) center / cover no-repeat; height: 660px;}
.banner_content .video video        { border-bottom: 10px solid #ee4c14; display: block; width: 100%; object-fit: cover; height: 90vh; max-height: 850px;}
.banner .texte                      { position: absolute; bottom: 0; left: 120px;}
.banner .ul_list                    { margin-bottom: 30px;}
.banner .texte                      { padding-top: 0; padding-bottom: 0;}
.banner .titre_main                 { font: 700 48px/65px "Verdana"; line-height: 65px; letter-spacing: .4px; color: #fff; margin-bottom: 70px;}
.banner .titre_main span            { background-color: #fff; color: #ee4c14; padding: 0 5px; line-height: 60px; margin-right: 5px; display: inline-block; border-radius: 5px;}

.banner_content                     { padding-right: 20vw;}

@media (min-width:1201px) {
.banner .texte a.link-devis:hover   { background:#20252b; color: #ffffff;}
}
@media (max-width:1300px) {
.banner::before                     { left: calc(50% + 230px);}
.banner .titre_main                 { font-size: 48px; line-height: 55px;}
}

@media (max-width:1200px) {
.banner                             { padding-top: 110px;}
.banner_content                     { padding-right: 0;}
.banner .texte                      { left: 40px;}
.banner .titre_main                 { font-size: 40px; max-width: 620px;}
.banner:before                      { height: calc(100% + 90px);}
.banner_content .video video        { height: 550px;}
.banner                             { margin-bottom: 180px;}
}

@media (max-width:1000px) { 
.banner                             { margin-bottom: 50px; padding-top: 110px;}
.banner::before                     { left: auto; right: 0; width: 30%; height: 100%; }
.banner::after                      { content: ""; left: 0; top: 110px; width: 100%; height: calc(100% - 110px); background-color: #000; position: absolute; z-index: -1;}
.banner .texte                      { position: relative; left: 0; padding: 40px 0;}
.banner_content                     { padding-right: 0; margin-left: -5vw;}
.banner .titre_main                 { font-size: 35px; margin-bottom: 0; max-width: 100%;}
.banner .titre_main span            { background-color: transparent; margin: 0; display: initial; padding: 0;}
}

@media (max-width:700px) {
.banner                             { margin-bottom: 0; padding-top: 75px;}
.banner::before                     { left: auto; right: 0; width: 200px; }
.banner .titre_main                 { font-size: 20px; line-height: 30px; max-width: 400px;}
.banner_content .video  video       { border-bottom: 5px solid #ee4c14; height: 305px;}
.banner .texte                      { padding: 30px 0; }
.banner .titre_main span            { line-height: 30px;}
}
@media (max-width:400px) {
.banner::before                     { width: 150px;}
}



/***** intro *****/
.intro                              { position: relative; margin: 100px auto ;}

.link-moins,.link-plus              { cursor:pointer; color: #ee4c14;}
.textMore                           { display: none; margin-top: 40px;}
.textMore p:not(:first-of-type)     { margin-top: 15px;}
@media (min-width:1201px) {
.link-moins:hover,.link-plus:hover  { color: #ee4c14;}
}
@media (max-width:1200px) {
.intro                              { margin: 80px 0;}
}
@media (max-width:1000px) {
.intro                              { margin: 50px 0;}
}
@media (max-width:700px) {
.intro                              { margin: 30px 0;}
.intro .chapo                        { display: none;}
}

.arrownavwrap                       { position: absolute; right: 0; top: 110px;}
.arrownav_prev                      { width: 40px; height: 40px; display: inline-block; background: url(../images/arrow_prev.svg) no-repeat center; cursor: pointer; transition: all ease-in-out 400ms;}
.arrownav_next                      { width: 40px; height: 40px; display: inline-block; background: url(../images/arrow_next.svg) no-repeat center; cursor: pointer;transition: all ease-in-out 400ms;}
.services                           { position: relative; padding: 110px 0 60px;}
.services .item .image              { position: relative;}
.services .item .image img          { display: block; width: 100%; height: auto; object-fit: cover;}
.services .swiper                   { width: 1650px;}
.services .titre_main               { margin-bottom: 50px; color: #fff;}
.services .real                     { position: absolute; background-color: #ee4c14; font: 500 15px/30px "Verdana"; padding: 5px 17px; color: #fff; bottom: 0;}
.services .real::before             { content: ""; position: absolute; background: #ee4c14; width:20px; height: 20px; bottom: -12px; left: 50%; transform: rotate(45deg) translateX(-50%); z-index: -1;}
.services::after                    { content: ""; position: absolute; width: 4000px; height: 470px; background-color: #000; top: 0; right: 285px; z-index: -1; border-bottom: 10px solid #ee4c14;}
.link_arrow                         { font: 500 22px/30px "Verdana"; padding-right:100px; background: url(../images/link_arrow.svg) no-repeat center right; margin-bottom: 20px; display: block;}
.link_arrow span                    { color: #ee4c14;}
.services .item .content            { padding: 25px 30px;}

@media (min-width:1200px) {
.arrownav_next:hover,
.arrownav_prev:hover                { opacity: 0.5;}     
.link_arrow:hover                   { color: #ee4c14; background-image: url(../images/link_arrow_black.svg);}         
}
@media (max-width:1200px) {
.services                           { padding: 80px 0;}
.arrownavwrap                       { top: 90px;}
.services::after                    { left: -1000px; width: 4000px; height: 400px;}
}
@media (max-width:1000px) {
.services                           { padding: 60px 0; }
.arrownavwrap                       { top: 70px;}
}
@media (max-width:700px) {
.services .swiper                   { width: 100%;}
.services_grid                      { display: block;}
.services .item a                   { border-top: 1px solid #000; margin: 0; padding: 21px 60px 21px 0;}
.link_arrow                         { font-size: 17px; line-height: 27px;}
.services .item:last-child a        { border-bottom: 1px solid #000;}
.services .item .content            { padding: 0;}
.services .item .image              { display: none; padding-bottom: 70px;}
.services .item:first-child .image  { display: block;}
.arrownavwrap                       { display: none;}
.services .item p                   { display: none;}
.services                           { padding: 40px 0;}
.services .titre_main               { margin-bottom: 20px;}
.services .real                     { bottom: -1px; z-index: 20; font-size: 13px;}
}

@media (max-width:700px) {
.services::after                    { height: 260px;}
.services .item .image img          { max-height: 280px;}
}



.tech                               { max-width: 960px; margin: 100px auto;}
.tech_grid                          { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 15px; margin: 80px 0 0;}
.tech_grid .item                    { background: #eeeeee; display: grid; justify-items: center; align-items: center; padding: 40px 0 30px; text-align: center; border-radius: 5px; gap: 10px; transition: all ease-in-out 400ms; cursor: pointer;}
.tech_grid .titre                   { font: 500 15px/30px "Verdana"; transition: all ease-in-out 400ms; display: block;}
.tech_grid .item img                { transition: all ease-in-out 400ms;}

@media (min-width:1200px) {
.tech_grid .item:hover              { background-color: #ee4c14; }
.tech_grid .item:hover .titre       { color: #fff; }
.tech_grid .item:hover img          { filter: brightness(0) invert(1); }
}

@media (max-width:1000px) {
.tech_grid                          { grid-template-columns: 1fr 1fr 1fr; margin-top: 40px;}
.tech                               { margin: 50px 0;}
}
@media (max-width:700px) {
.tech_grid                          { grid-template-columns: 1fr; gap: 10px;}
.tech_grid .item                    { grid-template-columns: 40px 1fr; justify-content: start; text-align: left; justify-items: left; background: url(../images/link_arrow.svg) no-repeat center right 20px #eeeeee;}
.tech_grid .item img                { display: block; width: 100%; height: auto; object-fit: cover;}
.tech_grid .titre                   { font-size:15px;}
.tech_grid .item                    { padding: 15px 20px; gap: 20px;}
}


.activite                           { position: relative; }
.activite_img                       { position: relative; padding: 105px 0 0;}
.activite_img:after                 { content: ""; position: absolute; width: 100%; height: 560px; left: 0; top: 0; background: url(../images/bureauts_accueil_08.webp) 50%/cover no-repeat; background-size: cover; z-index: -1; }
.activite_content                   { background: #fff; padding:70px 60px; width: 50%;}
.activite .sous_titre               { font-size: 25px; color: #000;}
.activite .link                     { margin-top: 5px;}
.experience                         { position: relative; padding: 90px 0 130px; text-align: center;}
.experience::after                  { content: ""; position: absolute; width: 100%; height: 650px; left: 0; bottom: 0; background: url(../images/bureauts_accueil_09.webp) 50%/cover no-repeat; z-index: -2; opacity: 0.3; }
.experience::before                 { content: ""; position: absolute; width: 100%; height: 660px; left: 0; bottom: 0;  background-color: #000; z-index: -2; border-top: 10px solid #ee4c14;}
.experience .titre_main             { margin: 0; color: #fff;}
.experience_img                     { display: none;}

@media (max-width:1400px) {
.activite_content                   { margin-left: 40px;}
}
@media (max-width:1200px) {
.activite_content                   { padding: 40px 40px 50px;}
.activite_img                       { padding-top: 100px;}
.activite                           { display: grid; gap: 50px;}
.activite_img:after                 { display: none;}
.activite_content                   { width: 100%; margin: 0; padding: 0;}
.experience                         { grid-area: 1; margin: 0; padding: 40px 0 0; text-align: left;}
.experience .titre_main             { margin: 0 0 30px; }
.experience:after                   { display: none; }
.experience::before                 { height: 400px; bottom: auto; top: 0; border-top: none; border-bottom: 5px solid #ee4c14;}
.activite_img                       { padding: 0;}
.experience_img                     { display: block;}
.experience_img img                 { display: block; width: 100%; object-fit: cover; height: 500px; object-position: right center;}
}
@media (max-width:700px) {
.experience_img img                 { height: 280px;}  
.experience::before                 { height: 240px;}    
.activite                           { gap: 40px;}    
.activite .sous_titre               { font-size: 20px;} 
}



.personnel                          { position: relative; margin: 110px 0 100px; display: grid; grid-template-columns: 200px auto; gap: 50px; align-items: center; }
.personnel_img                      { display: block; border-right: 10px solid #ee4c14; }
.personnel_img img                  { display: block; width: 100%; height: auto; object-fit: cover; filter: grayscale(1); }
.personnel_detail .nom              { font: 500 25px/30px "Verdana"; margin-bottom: 5px;}
.personnel_detail .poste            { font-style: italic; margin-bottom: 10px;}

@media (max-width:1200px) {
.personnel                          { margin: 80px 0 ;}
}
@media (max-width:768px) {
.personnel                          { grid-template-columns: 1fr; margin: 50px 0; gap: 30px;}
.personnel_img                      { border-right: 5px solid #ee4c14; max-width: 240px;}
}
@media (max-width:700px) {
.personnel                          { margin: 40px 0;}
.personnel_img                      { max-width: 190px;}
.personnel_detail .nom              { font-size: 20px; line-height: 30px; margin-bottom: 0;}
.personnel_detail .poste            { font-size: 14px; line-height: 20px;}
}