/**** Banner ****/
.banner 								{ width: 100%; position: relative; z-index: 10;}
.banner:after                           { content: ""; display: block; background: #000; height: 150px; position: absolute; left: 0; bottom: 0; right: 0; width: 100%; border-top: 10px solid #b21718;}
.banner .wrapper						{ padding: 150px 0 0; text-align: left; display: grid; grid-template-columns: 500px calc(100% - 440px);}
.banner .content                        { order: 1;}
.banner .titre_main                     { font-size: 48px; line-height: 36px; text-transform: uppercase; width: 730px; letter-spacing: 0.4px; z-index: 55; margin-bottom: 10px;}
.banner h1 span                         { text-transform: uppercase; color: #b21718; font: 800 20px/30px "Barlow"; letter-spacing: 0.8px; display: block;}
.banner .ul_list                        { margin: 25px 0 0; max-width: 470px;}
.banner .ul_list li                     { font: 600 18px/25px "Barlow"; text-transform: none; color: #3d3d3d; background-position: left 5px; padding-bottom: 15px;}

.banner .media                          { position: relative; z-index: 2; order: 2;}
.banner .slider                         { width: 1860px; max-height: 800px;}
.banner .item                           { width: 900px; margin-right: 30px;}
.banner .item img						{ width: 100%; height: 640px; object-fit: cover; display: block;}
.banner .content                        { padding-top: 100px;}
.banner .nav_slider                     { position: absolute; bottom: 20px; z-index: 50; left: 20px;}

@media (max-width:1200px) {
.banner:after                           { height: 90px; border-top: 8px solid #b21718;}
.banner .wrapper						{ padding: 110px 0 0; grid-template-columns: 430px calc(100% - 140px);}
.banner .titre_main                     { font-size: 40px; line-height: 40px; width: 100%; }
.banner .ul_list                        { margin: 20px 0 0; max-width: 100%;}
.banner .ul_list li                     { font-size: 16px; }
.banner .content                        { padding-top: 60px;}
.banner .item img						{ height: 500px;}
}

@media (max-width:1000px) {
.banner .wrapper                        { display: block; padding-top: 80px;}
.banner .content                        { order: 2; padding: 70px 0;}
.banner .titre_main                     { width: auto;}
.banner .media                          { order: 1;}
.banner .item                           { width: 90vw !important; max-width: 750px !important;}
.banner .item img                       { height: 530px;}
.banner:after                           { display: none;}
}

@media (max-width:600px) {
.banner .content                        { padding: 25px 0 40px;}
.banner div                               { font: 18px; line-height: 30px;}
.banner .ul_list                        { margin-top: 20px;}
.banner li                              { font-size: 16px;}
.banner .item                           { margin-right: 5px;}
.banner .item img                       { height: 255px; padding-right: 5px;}
.banner .titre_main 					{ margin-bottom: 5px; font-size: 24px; line-height: 30px}
}




/***** intro *****/
.intro                                  { background: #000; padding: 130px 0 50px;}
.intro .titre_main                      { color: #fff;}
.intro .chapo                           { color: #fff;}

@media (max-width:1000px) {
.intro                                  { padding-top: 70px; border-top: 5px solid #b21718;}
}
@media (max-width:1000px) {
.intro                                  { padding: 40px 0 30px;}
}



/***** services *****/
.services                               { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; position: relative;}
.services::before                       { content: ""; display: block; position: absolute; top: 0; left: -10000px; right: -10000px; height: 50%; background: #000;}
.services .item                         { border: 3px solid #000; padding: 40px 45px 50px; position: relative; z-index: 1; background: #fff;}
.services .icon                         { display: grid; align-items: end; height: 75px; margin-bottom: 20px;}
.services .item p                       { margin-bottom: 25px;}

@media (max-width:1200px) {
.services                               { gap: 20px; }
.services .item                         { padding: 30px 35px 50px;}
}
@media (max-width:1000px) {
.services                               { grid-template-columns: auto;}
.services::before                       { height: 50px;}
.services .item                         { padding: 0; display: grid; grid-template-columns: 95px auto; align-items: center; gap: 30px; background: url(../images/arrow_dark.svg) right 30px center no-repeat #fff;}
.services .titre                        { margin-bottom: 0;}
.services .item p                       { display: none;}
.services .icon                         { width: 95px; height: 85px; align-items: center; justify-content: center; margin: 0;}
.services .icon img                     { transform: scale(0.7);}
.services .link                         { position: absolute; height: 100%; width: 100%; top: 0; left: 0; opacity: 0;}
}
@media (max-width:700px) {
.services                               { gap: 10px;}
.services::before                       { height: 40px;}
.services .item                         { gap: 0; grid-template-columns: 85px auto; padding: 0 60px 0 0;}
.services .item .titre                  { line-height: 22px; }
.services .icon                         { width: 80px; height: 65px;} 
.services .icon img                     { transform: scale(0.6);}
}




/***** electricite *****/
.amenagement                        { display: grid; grid-template-columns: 1fr 1fr; gap: 160px; margin: 100px 0; align-items: start;}
.amenagement .photo                 { position: relative; padding-bottom: 150px;}
.amenagement .photo img             { width: 100%; height: auto; display: block;}
.amenagement .photo img:last-of-type{ position: absolute; bottom: 0; right: -75px; width: 70%; z-index: 1; border: 8px solid #fff;}
.amenagement .texte                 { padding-top: 70px;}
.amenagement .texte img             { display: block; margin-bottom: 20px;}
.amenagement .texte ul              { margin-top: 40px; position: relative;}
.amenagement .link                  { display: block; text-align: left; margin-top: 15px; font: 600 18px/70px "Barlow"; height: 70px;}
.amenagement .link::after           { content: ""; line-height: 0; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 70px; background: url(../images/chevron_light.svg) center no-repeat #000;}
@media (min-width:1201px) {
.amenagement .link:hover            { color: #fff;}
}
@media (max-width:1200px) {
.amenagement                        { gap: 80px;}
.amenagement .photo img:last-of-type{right: -35px; width: 60%;}
}
@media (max-width:1000px) {
.amenagement                        { grid-template-columns: 1fr; gap: 80px;}
.amenagement .texte                 { padding-top: 0;}
.amenagement .photo                 { padding-bottom: 80px; margin: 0 5vw;}
.amenagement .photo img:first-of-type{ width: 80%;}
.amenagement .photo img:last-of-type{right: 0;}
}
@media (max-width:700px) {
.amenagement                        { margin: 60px 0 30px; gap: 25px;}
.amenagement .photo                 { margin: 0 auto; padding-right: 40px; max-width: 310px;}
.amenagement .photo img:first-of-type{width: 100%;}
.amenagement .photo img:last-of-type{ border-width: 4px; width: 63%;}
.amenagement .texte                 { font-size: 14px; line-height: 28px;}
.amenagement .texte ul              { margin-top: 25px;}
.amenagement .link                  { font-size: 16px; margin-top: 10px; padding: 0 60px 0 7.5vw; line-height: 24px; display: grid; align-items: center;}
}


/***** certification *****/
.certification                      { display: grid; align-items: center; grid-template-columns: 1fr 1fr; margin: 100px 0;}
.certification .texte               { border: 3px solid #000; padding: 55px 55px 60px; border-right: 0;}
.certification .texte p             { font-size: 15px; line-height: 30px;}
.certification .titre_main          { color: #fff;}
.atout                              { background: #000; color: #fff; padding: 60px 90px 65px; position: relative;}
.atout li                           { display: grid; grid-template-columns: 50px auto; align-items: center; gap: 35px; letter-spacing: 0.7px; text-transform: uppercase; font-weight: 700; margin-bottom: 20px; position: relative; z-index: 1;}
.atout li:last-child                { margin-bottom: 0;}
@media (max-width:1200px) {
.certification                      { margin: 80px 0;}
.certification .texte               { padding: 45px 45px 50px;}    
.atout                              { padding: 80px 60px 85px; }
.atout li                           { gap: 25px;}
}
@media (max-width:1000px) {
.certification                      { grid-template-columns: 1fr;}
.certification .texte               { border-right: 3px solid #000; border-bottom: 0; padding: 40px;}
.atout                              { padding: 40px 0;}
.atout::before                      { content: ""; display: block; position: absolute; top: 0; left: -200px; right: -200px; height: 100%; background: #000;}
}
@media (max-width:700px) {
.certification                      { margin: 60px 0 50px;}
.certification .texte               { padding: 45px 25px 40px;}
.certification .texte p             { font-size: 14px; line-height: 28px;}
.atout                              { padding: 40px 30px;}
.atout li                           { font-size: 14px; gap: 20px; margin-bottom: 20px;}
}


/***** apropos *****/
.apropos                            { padding: 120px 0 100px; background: url(../images/favicon.svg) right bottom 40px no-repeat;}
.apropos .titre_main                { color: #b21718;}
.apropos p                          { margin-bottom: 20px;}
@media (max-width:700px) {
.apropos                            { margin: 50px auto; padding: 0 0; background: none;}
}