/***** banner *****/
.banner                             { position: relative;}
.banner .wrapper                    { height: 871px; max-width: 1420px; display: grid; align-items: center;}
.banner .shape                      { position: absolute; top: -272px; left: 110px; width: 1600px; height: 1600px; border: 7px solid #000; transform: rotate(-45deg); overflow: hidden; transform-origin: left top; box-shadow: 6px 0 0 6px #e00814;}
.banner .titre_main                 { font-size: 60px; line-height: 70px; margin-bottom: 15px;}
.banner .shape::before              { content: ""; position: absolute; top: 472px; left: -719px; width: 122%; height: 100%; background: url(../images/banner.webp) center bottom / cover no-repeat; background-size: contain; transform: rotate(45deg) translate(-41px, 45px);}
.banner .content                    { width: 50%; max-width: 594px; padding-top: 75px;}
.banner .link                       { margin-top: 30px; background-image: linear-gradient(to top, #000 0%, #000 50%, #e00814 50%, #e00814 100%);}


@media (max-width:1440px) {
.banner .shape                      { top: -292px; left: -70px;}
}
@media (max-width:1200px) {

.banner .shape                      { top: -422px; left: -210px;}
.banner .shape:before               { top: 472px; transform: rotate(45deg) translate(-141px, 65px);}

}
@media (max-width:1000px) {
.banner                             { margin-top: 100px;}
.banner .wrapper                    { height: auto; display: block; width: 100%;}
.banner .content                    { width: auto; max-width: initial; padding: 0; text-align: center;}
.banner .titre_main                 { position: absolute; top: 50px; text-align: center; left: 0; right: 0;}
.banner .content .chapo				{ display:none;}
.banner .link                       { margin-top: -30px;}
.banner .shape                      { height: 540px; position: static; border: none; box-shadow: none; width: 100%; transform: none; background: url(../images/banner_m.webp) center center / cover no-repeat;}
.banner .shape:before               { display: none;}
}
@media (max-width:800px) {
.banner .titre_main                 { font-size: 50px; line-height: 60px;}
}
@media (max-width:600px) {
.banner                             { margin-top: 90px;}
.banner .shape                      { height: 95vw; background-position: center top;}
.banner .content                    { position: absolute; width: 100%; top: 0;}
.banner .titre_main                 { font-size: 25px; line-height: 30px; color: #000; top: 25px;}
.banner .titre_main span            { color: #000;}
.banner .link                       { background: #e00814; width: 100%; max-width: 85vw; margin: -30px auto 0; top: 95vw;}
}



/***** intro *****/
.intro                              { margin: 50px 75px 0;}
.intro img                          { display: block; margin-bottom: 20px;}
.link-moins,.link-plus              { cursor:pointer;}
.textMore                           { display: none; margin-top: 40px;}
.textMore p:not(:first-of-type)     { margin-top: 15px;}
.textMore strong                    { font-size: 18px;}
@media (max-width:1000px) {
.intro                              { margin: 240px 0 40px 0;}
}
@media (max-width:800px) {
.intro                              { margin: 180px 0 40px 0;}
}
@media (max-width:600px) {
.intro                              { margin: 80px 0 30px 0; position: relative;}
.intro p                            { display: none;}
.intro img                          { width: 40px; margin: 0; position: absolute; left: 0; top: -8px;}
.intro .titre_main                  { padding-left: 52px;}
}


/***** services *****/
.services                           { width: 100vw; margin: 30px 0 95px; position: relative;}
.services::before                   { content:"";display:block;position:absolute;width:1715px;height:1715px;background:#e00814;transform:rotate(-45deg) translate(-601px,-266px);right:96%;top:0;transform-origin:left top;}
.services h3                        { position: relative; z-index: 1;}
.services .item                     { position: relative; width: 380px; margin-right: 30px;}
.services .item img                 { width: 100%; height: auto; display: block;}
.services .hide                     { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.7); color: #fff; height: 100%; padding: 70px 40px 0; opacity: 0; transition: all ease 400ms;}
.services .link                     { position: absolute; left: 40px; right: 40px; bottom: 40px; background: #fff; color: #000;}

.arrowcustom                        { margin-top: 50px;}


@media (min-width:1201px) {
.services .item:hover .hide         { opacity: 1;}
.services .link:hover               { color: #e00814;}
}
@media (max-width:1000px) {
.services::before                   { display: none;}
}
@media (max-width:600px) {
.arrowservices                      { display: none;}
.services                      		{ width: 92.5vw; display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 10px; overflow-x: scroll; padding: 0 7.5vw 30px 0; margin: 30px 0 30px 0;}
.services::-webkit-scrollbar 		{ height: 4px;}
.services .hide                     { display: none;}
.services .item                     { width: 240px; margin: 0;}
.services .item img                 { height: 260px; object-fit: cover;}
.services .link                     { position: static; display: block; color: #fff; background: #000;}

.wrap_home_services               	{ position: relative;}
.wrap_home_services:after           { width: 7.5vw; height: 4px; background: #fff; position: absolute; right: -7.5vw; bottom: 0; z-index: 20; content: "";}
}


/***** bandeau *****/
.bandeau                            { display: grid; align-items: center; justify-content: center; position: relative; text-align: center; color: #fff; background-image: linear-gradient(to top, #000 0%, #000 0% 50%, #e00814 50%, #e00814 100%); line-height: 25px; height: 105px;}
.bandeau strong                     { color: #e00814; transition: all ease 400ms;}
.bandeau::after                     { content: url(../images/arrow_right.svg); line-height: 0; display: block; position: absolute; right: 30px; top: 50%; transform: translateY(-50%);}
.bandeau em                         { display: none;}
@media (min-width:1201px) {
.bandeau:hover:hover strong         { color: #fff;}
}
@media (max-width:600px) {
.bandeau                            { background: #e00814; height: 60px; line-height: 60px;}
.bandeau::after,
.bandeau span                       { display: none;}
.bandeau em                         { display: block; font-style: normal;}
}

/***** electricite *****/
.electricite                        { display: grid; grid-template-columns: 1fr 1fr; gap: 155px; margin: 100px 0; align-items: start;}
.electricite .photo                 { position: relative; padding-bottom: 190px;}
.electricite .photo img             { width: 100%; height: auto; display: block; box-shadow: 5px 5px 0 #000;}
.electricite .photo img:last-of-type{ position: absolute; bottom: 0; right: -75px; width: 60%; z-index: 1;}
.electricite .texte img             { display: block; margin-bottom: 20px;}
.electricite .texte ul              { margin-top: 40px; position: relative;}
.electricite .texte ul::before      { content: ""; display: block; position: absolute; width: 1715px; height: 1715px; background: #000; transform: rotate(-45deg); left: 67%; top: 196px; transform-origin: left top;}
.electricite .link                  { display: block; text-align: left; border: 1px solid #000;background-image: linear-gradient(to top, #fff 0%, #fff 0% 50%, #000 50%, #000 100%); color: #000; margin-top: 10px; line-height: 70px; height: 70px;}
.electricite .link::after           { content: url(../images/arrow_red.svg); line-height: 0; display: block; position: absolute; right: 30px; top: 50%; transform: translateY(-50%);}

@media (min-width:1201px) {
.electricite .link:hover            { color: #fff;}
}
@media (max-width:1200px) {
.electricite                        { gap: 80px;}
.electricite .photo img:last-of-type{right: -35px;}
}
@media (max-width:1000px) {
.electricite                        { grid-template-columns: 1fr; gap: 80px;}
.electricite .photo                 { padding-bottom: 0;}
.electricite .photo img             { width:100%; height:75vh; object-fit:cover; display:block; box-shadow: 5px 5px 0 #000;}
.electricite .texte ul::before,
.electricite .photo img:last-of-type{ display: none;}
}
@media (max-width:600px) {
.electricite                        { margin: 50px 0 30px; position: relative;}
.electricite .photo                 { display: none;}

.electricite .texte img             { width: 40px; margin: 0; position: absolute; left: 0; top: -6px;}
.electricite .texte .titre_main     { padding-left: 52px;}
.electricite .texte>p     			{ display: none;}
.electricite .texte ul              { margin-top: 30px;}


.electricite .link                  { line-height: 60px; height: 60px; padding: 0 15px;}
.electricite .link::after           { right: 15px; transform: translateY(-50%) scale(0.8);}
}

/***** À propos *****/
.apropos                            { position: relative; padding: 100px 75px; background: url(../images/favicon.svg) right center no-repeat;}

@media (max-width:1000px) { 
.apropos                            { padding: 100px 0;}
}
@media (max-width:600px) {
.apropos                            { padding: 0; background: none; margin: 40px 0 15px;}
}

/***** atout *****/
.atout                              { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px;}
.atout .item                        { background: #eee; padding: 40px 40px 50px;}
.atout .sous_titre                  { color: #000; padding-left: 60px; background: url(../images/check.svg) left 5px no-repeat; font-size: 22px; line-height: 32px;}

@media (max-width:1000px) { 
.atout                              { grid-template-columns: 1fr;}
}
@media (max-width:600px) {
.atout                              { gap: 5px;}
.atout .item                        { background: none; padding: 0;}
.atout .item p,
.atout .item br                     { display: none;}
.atout .sous_titre                  { padding-left: 40px; font-size: 15px; line-height: 34px; font-weight: 400; background-size: 25px; margin-bottom: 0;}
}



/***** moving galerie *****/
@media (max-width:600px) {
.moving_galerie 							{ margin: 30px 0;}
}



/***** avis *****/
.avis                               { margin: 90px 0 100px;}
.avis .content                      { margin-bottom: 30px; position: relative;}
.avis .arrowavis                    { position: absolute; right: -12px;}
.avis .content *                    { display: inline-block; vertical-align: middle; font-family: "Barlow Condensed"; font-weight: 700;}
.avis .content strong               { font-size: 30px;}
.avis .content img                  { margin: 0 20px 0 15px;}
.avis .content span                 { font-size: 20px;}
.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 .slider                       { width: 100vw;}
.avis .item                         { background: #eee; padding: 40px 40px 30px; margin-right: 30px; width: 380px;}
.avis .item .lire-plus              { border-color: transparent; color: #e00814;}
.avis .author                       { text-align: right; margin-top: 15px; min-height: 50px;}
.avis .author span                  { display: block; font-size: 12px; line-height: 20px;}

@media (max-width:600px) {
.avis                               { margin: 50px 0;}
.arrowavis                          { display: none !important;}
.avis .content               		{ margin-bottom: 25px;}
.avis .content strong               { font-size: 20px;}
.avis .content span                 { font-size: 16px;}
.avis .content img                  { margin: 0 10px; width: 140px;}
.avis .item                         { padding: 30px 30px 10px 30px; margin-right: 10px; width: 85vw;}
.avis .slider                       { width: 100%; display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 10px; overflow-x: scroll; padding-bottom: 30px;}
.avis .slider::-webkit-scrollbar 	{ height: 4px;}
}