/***** banner *****/
.banner                             { position: relative; z-index: 1; padding-top: 120px; color: #fff;}
.banner .img                        { height: 85vh; max-height: 880px; min-height: 500px; position: relative; z-index: 1; overflow: hidden; background: url(../images/banner.webp) center / cover no-repeat;}
.banner::after                      { content: ""; display: block; position: absolute; left: 0; top: 0; height: calc(100% - 100px); width: 100%; background: #000;}
.banner .wrapper                    { padding-left: 480px;}
.banner .content                    { position: absolute; left: 0; top: 220px; z-index: 2;}
.banner .content .titre_main        { margin-bottom: 10px; color: #fff; font-size: 45px; line-height: 60px;}
.banner .content .sous_titre        { color: #fff; margin-bottom: 30px;}

@media (max-width:1400px) {
.banner .img                        { max-height: 880px; min-height: 600px;}
.banner .content                    { top: 150px; }
}
@media (max-width:1360px) {
.banner .wrapper                    { padding-left: 400px;}
}
@media (max-width:1200px) {
.banner                             { padding-top: 100px;}
.banner .wrapper                    { padding-left: 360px;}
.banner .content                    { top: 130px;}
.banner .img                        { max-height: 780px; min-height: 480px;}
.banner .content                    { top: 100px; }
.banner .content .titre_main        { line-height: 45px; font-size: 35px; margin-bottom: 15px;}
}
@media (max-width:1000px) {
.banner                             { background: #000; text-align: center;}
.banner .wrapper                    { width: 100%; max-width: initial;}
.banner .img                        { position: static; height: 65vw; min-height: 0; border-radius: 0;}
.banner::after                      { display: none;}
.banner .wrapper                    { padding: 0;}
.banner .content                    { position: static; width: 90vw; max-width: 750px; margin: 0 auto; padding: 40px 0;}
}
@media (max-width:700px) {
.banner                             { padding-top: 90px;}
.banner .img                        { height: 85vw; background-image: url(../images/banner_mobile.webp);}
.banner .content .titre_main        { line-height: 35px; font-size: 25px; margin-bottom: 15px;}
.banner .content .sous_titre        { margin-bottom: 20px;}
.banner p                           { font-size: 16px; line-height: 28px;}
.banner .content                    { padding: 40px 0 55px;}
}



/***** pop-info *****/
.popup_info     				        { position: fixed; bottom: 4vw; right: 4vw; background: #fff; padding: 20px 50px 40px; text-align: center; display: none; z-index: 99999; box-shadow: 0 20px 40px rgba(0,0,0,0.5); }

.popup_info .logo img                   { display: inline-block; vertical-align: middle; margin: 0 10px; max-width: 120px;}
.popup_info .logo .logo_new             { max-width: 135px;}

.popup_info .sous_titre                 { color: #000; font-size: 18px; margin-bottom: 25px;}
.popup_info p                           { margin-bottom: 0;}
.popup_info_close 			            { position: absolute; right: 5px; top: -20px; width: 40px; height: 40px; cursor: pointer; transition: all 400ms ease-in-out; background: url(../images/close.svg) center no-repeat;}

@media (min-width:1201px) {
.popup_info_close:hover                 { opacity: 0.5;}
}
@media (max-width:1000px) {
.popup_info                             { display: none !important;}
}




/***** intro *****/
.intro                              { padding: 110px 490px 100px 0; position: relative;}
.intro::after                       { content: ""; display: block; position: absolute; bottom: -225px; left: calc(50% + 220px); top: -100px; background: #ff8400; width: 100%;}

@media (max-width:1200px) {
.intro                              { padding-right: 0;}
.intro::after                       { display: none;}
}
@media (max-width:1000px) {
.intro                              { gap: 40px; padding: 0; margin: 70px 0;}
}
@media (max-width:700px) {
.intro                              { margin: 45px 0 20px;}
}



/***** services *****/

.services                           { padding: 0 40px; } 
.services .item                     { position: relative; background: #000;}
.services .icone_titre              { position: absolute; left: 0; right: 0; text-align: center; top: 50%; transform: translateY(-50%); padding: 0 20px;}
.services .titre                    { color: #fff; margin-bottom: 0; font-size: 20px;}
.services .item>img                 { width: 100%; height: 450px; object-fit: cover; display: block; opacity: 0.5;}
.services .hide                     { opacity: 0; position: absolute; inset: 0; color: #fff; display: grid; align-items: center; justify-content: center; background: #000; z-index: 1; padding: 40px; text-align: center;}
.services .item .link               { position: absolute; height: 100%; width: 100%; top: 0; bottom: 0; left: 0; opacity: 0; padding: 0; z-index: 1;}
.arrowservices                      { display: grid; grid-template-columns: 50px 50px; position: absolute; right: -20px; bottom: 30px; z-index: 1;}
.arrownav                           { width: 50px; height: 50px; background-position: center; background-repeat: no-repeat; cursor: pointer;}
.arrownav_prev                      { background-image: url(../images/arrow_prev.svg);}
.arrownav_next                      { background-image: url(../images/arrow_next.svg);}
@media (min-width:1201px) {
.services .hide                     { transition: all ease-in-out 400ms;}
.services .item:hover .hide         { opacity: 1;}
}
@media (max-width:1200px) {
.services .texte                    { padding: 0;}
.arrowservices,
.services .hide                     { display: none;}
}
@media (max-width:1000px) {
.services                           { padding: 0; width: 90vw; margin: 0 auto; max-width: 750px;}
.services .item>img                 { height: 300px;}
}
@media (max-width:700px) {
.services .item>img                 { filter: brightness(0); height: 200px;}
.services .icone_titre img          { height: 40px;}
.services .titre                    { font-size: 14px; line-height: 22px;}
.services .swiper-wrapper           { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.services .item                     { width: 100% !important; margin: 0 !important;}
}

/***** apropos *****/
.panneau                            { display: grid; grid-template-columns: 1fr 1fr; gap: 40px;}
.panneau .texte                     { background: #000; color: #fff; padding: 90px 80px 80px; margin-top: 90px; z-index: 100;}
.panneau .titre_main span           { color: #fff;}
.panneau .link                      { margin-top: 30px;}
.panneau .photo                     { margin-right: -260px;}
.panneau .photo img                 { width: 100%; height: calc(100% - 90px); object-fit: cover; display: block;}

@media (max-width:1200px) {
.panneau .photo                     { margin-right: -160px;}
.panneau .texte                     { padding: 40px;}
}
@media (max-width:1000px) {
.panneau                            { grid-template-columns: 1fr;}
.panneau .photo                     { margin: 0; position: relative; z-index: 1;}
.panneau .photo img                 { height: auto;}
.panneau .texte                     { margin: 0; position: relative; z-index: 1;}
}
@media (max-width:700px) {
.panneau                            { position: relative; padding: 40px 0 50px; gap: 35px;}
.panneau::before                    { content: ""; display: block; position: absolute; inset: 0 -100px; background: #000;}
.panneau .texte                     { padding: 0;}
}




/***** atout *****/
.atout                              { display: grid; grid-template-columns: 440px auto; gap: 80px; margin: 145px 0 100px; align-items: start;}
.atout .stat                        { height: 440px; position: relative;}
.atout .stat span                   { display: block;}
.atout .stat::after                 { content: "" ; display: block; position: absolute; top: 80px; background: #ff8400; right: calc(100% - 140px); width: 100vw; height: 100%; z-index: -10;}
.atout .table_plus                  { margin: 0;}

@media (max-width:1200px) {
.atout                              { margin: 100px 0;}
.atout .stat::after                 { display: none;}
}
@media (max-width:1000px) {
.atout                              { grid-template-columns: 1fr; gap: 40px; margin: 80px 0;}
}
@media (max-width:700px) {
.atout                              { margin: 35px 0 60px; gap: 15px;}
.atout .stat                        { height: auto; display: block; padding: 0; background: none;}
.atout .stat .titre                 { color: #000;}
}



/***** avis *****/
.avis                               { margin: 150px 40px; position: relative;}
.avis .stat                         { background: #ff8400; width: calc(25% - 40px); position: absolute; top: 0; left: 0; height: auto; min-height: 380px;}
.avis .wrapslide                    { position: relative; margin-left: 25%;}
.avis .wrapslide::after             { content: "" ; display: block; position: absolute; top: 50%; background: #ff8400; left: 50%; width: 100vw; height: 100%; z-index: -1;}
.avis .content                      { margin-bottom: 30px; position: relative; display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center;}
.avis .content *                    { display: inline-block; vertical-align: middle; font: 500 20px/26px "Poppins";}
.avis .content img                  { margin: 0 20px 0 0;}
.avis .note   						{ line-height: 0; letter-spacing: 0; font-size: 0; margin-bottom: 20px;}
.avis .note img 					{ display: inline-block; height: auto; margin-right: 10px;}
.avis .note img:last-child 			{ margin-right: 0;}
.avis .swiper-wrapper               { align-items: start;}
.avis .item                         { padding: 60px 60px 105px; background: #000; color: #fff; margin-right: 30px; min-height: 380px; position: relative;}
.avis .item .lire-plus              { border-color: transparent; color: #e00814;}
.avis .author                       { position: absolute; left: 60px; bottom: 55px;}

@media (max-width:1450px) {
.avis .stat                         { width: calc(33.333% - 40px);}
.avis .wrapslide                    { margin-left: 33.333%;}
.avis .wrapslide::after             { left: 76%;}
}
@media (max-width:1200px) {
.avis                               { margin: 100px auto; width: 90vw;}
.avis .wrapslide::after             { display: none;}
}
@media (max-width:1000px) {
.avis .stat                         { display: none;}
.avis .wrapslide                    { margin: 0;}
}
@media (max-width:700px) {
.avis                               { margin: auto; padding: 0 0 50px; width: 85vw;}
.avis .content               		{ margin-bottom: 25px;}
.avis .content strong,
.avis .content span                 { font-size: 16px; color: #fff;}
.avis .content img                  { margin: 0 10px; width: 140px;}
.avis .item                         { padding: 40px 30px 75px; width: 85%; min-height: 0;}
.avis .swiper                       { width: 100vw;}
.avis .swiper-wrapper               { align-items: stretch;}
.avis .author                       { position: absolute; left: 30px; bottom: 40px;}
}