.banner                                     { margin-top: 100px; background-color: var(--mainColor2); background-image: linear-gradient(0deg, transparent 24%, #373737 25%, #373737 26%, transparent 27%,transparent 74%, #373737 75%, #373737 76%, transparent 77%,transparent), linear-gradient(90deg, transparent 24%, #373737 25%, #373737 26%, transparent 27%,transparent 74%, #373737 75%, #373737 76%, transparent 77%,transparent); background-size: 55px 55px;}
.banner .container                          { display: grid; grid-template-columns: 34vw auto; align-items: center; }
.banner .photo img                          { display: block; width: 100%; height: 100%; }
.banner .content                            { margin-left: 8vw; margin-right: -15vw; z-index: 2}
.banner>*                                   { color: #fff; }
.banner .pills                              { color: #fff; }

@media (max-width:1200px) {
.banner .container                          { grid-template-columns: 30vw auto;}
.banner .content                            { margin-left: 5vw; margin-right: -10vw;}
}
@media (max-width:700px) {
.banner .container                          { grid-template-columns: 1fr; }
.banner .content                            { margin-left: 0; margin-right: 0; grid-area: 2; padding: 30px 5vw; }
.banner .photo                              { grid-area: 1; }
}





.services .item                             { position: relative; }
.services .item .titre_cap                  { font: 500 22px/30px var(--fontTitle); letter-spacing: 1px; color: var(--mainColor2); text-transform: none; }
.services .item .hide_content               { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--mainColor2); width: 100%; height: 100%; color: #fff; display: grid; display: flex; align-items: center; opacity: 0; transition: all 300ms ease-in-out;}
.services .item .hide_content .wrap         { padding: 40px 60px;}
.services .item .hide_content>.wrap>.icon   { filter: brightness(0) invert(1);}

@media (min-width:1201px) {
.services .item:hover .hide_content         { opacity: 1;}
}






.about                                      { padding: 1px 0; margin: var(--marginTB); background-image: linear-gradient(0deg, transparent 24%, #373737 25%, #373737 26%, transparent 27%,transparent 74%, #373737 75%, #373737 76%, transparent 77%,transparent), linear-gradient(90deg, transparent 24%, #373737 25%, #373737 26%, transparent 27%,transparent 74%, #373737 75%, #373737 76%, transparent 77%,transparent); background-size: 55px 55px;}
.about>*                                    { color: #fff; }
.about .pills                               { color: #fff; }


.showroom .bloc_adresse                     { background: #000; border: 1px solid #373737; padding: clamp(15px, 1vw, 25px); border-left-color: var(--mainColor1);}
.showroom .bloc_adresse p                   { font-size: 14px;}
.showroom .bloc_adresse p a                 { font-size: 16px;}




.realisations .grid_gallery                 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; padding: clamp(30px, 3vw, 60px) clamp(40px, 3vw, 70px); border-radius: var(--imgRadius); border: 1px solid var(--mainColor1);}
.realisations .grid_gallery img             { width: 100%; height: 100%; object-fit: cover; border-radius: var(--imgRadius)}
.realisations .grid_gallery .img_main       { grid-column: 1 / 3; grid-row: 1 / 3; }
.realisations .grid_gallery .img_verticale  { grid-column: 3 / 4; grid-row: 1 / 3; }
.realisations .grid_gallery .item_link      { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; color: #fff; background-color: var(--mainColor2); text-align: center; padding: 25px 45px; border-radius: var(--imgRadius); border: 1px solid #fff; }
.realisations .grid_gallery .item_link span { padding-bottom: 40px; background: url("../images/arrow_link_or.svg") 70% 35px no-repeat;}

@media (min-width: 1201px){
.realisations .grid_gallery .item_link:hover { color: var(--mainColor2); background-color: #fff; border: 1px solid var(--mainColor1); }
}


@media (max-width:1200px) {
.realisations .grid_gallery                 { grid-template-columns: 1fr 1fr; }
.realisations .grid_gallery .img_main       { grid-column: inherit; grid-row: inherit; }
.realisations .grid_gallery .img_verticale  { grid-column: inherit; grid-row: inherit; }

}
@media (max-width:700px) {
.realisations .grid_gallery                 { grid-template-columns: 1fr; }

}