/***** banner *****/
.banner 							{ position: relative; border-radius: 30px; height: 600px; margin: 140px auto 0; width: 90vw; max-width: 1600px;}
.banner img                         { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; z-index: 2; filter: brightness(0.8);}
.banner .shape                      { left: -825px; top: 310px; z-index: -1;}
.banner .titre_main                 { position: absolute; left: 50%; top: 250px; color: #fff; z-index: 2; font-size: 20px; font-weight: 700; transform:translateX(-50%);line-height:40px; background:rgba(0, 0, 0, 0.5); max-width: max-content; width: 100%; text-align: center; padding: 30px 40px; margin: 0; border-radius: 10px;}

@media (min-width:1201px) {
.banner .rs a:hover                 { background-color: #242424;}
}

@media (max-width:1380px) {
.banner .rs                         { right: 40px;}
}

@media (max-width:1200px) {
.banner 							{ margin-top:110px;}
.rs                                 { top: calc(50% - 50px); }
.banner .titre_main                 { max-width: 600px; padding: 15px 30px; line-height: 30px;}
}
@media (max-width:1024px) {
.banner                             { width: 100%; border-radius: 0; margin-top: 90px; height: auto;}
.rs                                 { top: calc(50% - 170px); }
.banner img                         { position: relative; border-radius: 0; height: 400px; display: block; }
.banner .titre_main                 { position: relative; font-size: 15px; line-height: 25px; color: #fff; width: 100%; background: #242424; border-radius: 0; top: auto; left: auto; transform: translate(0); margin: 0; max-width: 100%;}
}

@media (max-width:600px) {
.banner                             { height: auto;}
.banner img                       { height: 280px; position: static;}
.banner .rs                         { display: none;}

.banner .shape                      { display: none;}
}
/***** intro *****/
.bloc_texte                          { max-width: 890px; margin: 90px auto;}
@media (max-width:1024px) {
.bloc_texte                          { margin: 40px 0;}
}
@media (max-width:600px) {
.chapo                                  { margin: 20px 0;}
}

.textMore                            { margin: 80px 0; display: none;}
.link-moins,
.link-plus                           { cursor: pointer;}
@media (max-width:600px) {
.textMore                            { margin: 50px 0;}
}


/***** services *****/
.services 							    { position: relative; margin: 90px 0;}
.services-grid                          { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 80px; align-items: start; justify-content: center;}
.services .shape                        { top: 40px; left: calc(50% + 320px); z-index: -1;}
.video-grid                             { position: relative; padding-bottom: 85px;}
.video-grid video                       { width: 280px; height: 500px; border-radius: 20px;}
.prd-img                                    { position: absolute; bottom: 0; left: 230px;} 
.services .item img                 	{ top: 0; left: 0; width: 100%; object-fit: cover; transition: filter 400ms ease-in-out;}
.services .item .text                   { padding:20px 30px; }
.services .sous_titre                   { margin-bottom: 15px;}
.services .arrow_link                   { display: grid;align-items: center; width: 100%; position: relative; color: #ffffff; background: url(../images/arrow_link_light.svg) right 30px center no-repeat #97c900;  font: 500 16px/24px "Comfortaa"; height: 60px; padding: 0 105px 0 30px;border-radius: 5px;  letter-spacing: 0; margin-top:20px}
.services .item:first-of-type .arrow_link{ margin-top: 0;}
.services .link_block               	{ display: block; width: 100px; height: 45px;margin: 0 auto; background: url(../images/arrow_red.svg) center no-repeat; }

@media (min-width:1200px) {
.services .item:hover .arrow_link:before{ transform: translateX(20px);}
.services .arrow_link:hover         { background-color: #242424;}
}
@media (max-width:1200px) {
.services-grid                          { grid-template-columns: 45% 1fr; grid-gap: 60px;}
.prd-img                                { transform: scale(0.8); left: auto; right: -15px;  transform-origin: bottom;}
}
@media (max-width:1000px) {
.services-grid 					    { grid-gap: 30px; grid-template-columns: 1fr;}
.prd-img                               { left: 190px; }
.video-grid                             { padding-bottom: 40px;}
.video-grid video                   { height: auto;}
.services                                   { margin: 50px 0 30px;}
}
@media (max-width:600px) {
.services                                   { margin: 20px  0 35px;}
.video-grid video                     {width: 180px; height: 320px; border-radius: 10px;}
.prd-img                                    { transform: none; left: 120px;}
.prd-img img                             {height: 300px; width: auto;}
.services .item .text                      { display: none;}
.services .arrow_link                    { font-size: 13px; margin-top: 10px;} 
}
@media (max-width:340px) {
    .prd-img img                        { height: 210px;}
}

.black                                  { background: #242424; color: #fff;}
.materiaux                          { position: relative; padding: 90px 0;}
.materiaux .sous_titre          { color: #97c900;}
.materiaux .bloc_texte          { margin-top: 0;}
.materiaux-grid                     { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; position: relative; z-index: 20;}
.materiaux-grid .content::after          { content: ""; background: #eeeeee; width: 10000px; height: calc(100% + 90px); position: absolute; top: 0; z-index: -1; left: -5000px;}
.materiaux-grid .item img       { width: 100%; height: auto; display: block; border-radius: 20px 20px 0 0;}
.materiaux-grid .content        { background: #fff; color: #000; padding: 30px 40px; border-radius: 0 0 20px 20px; box-shadow: 0 0 40px 0 rgb(94 76 41 / 10%); position: relative;}
.link_green                             { display: block; height: 50px; width: 100%; background: url(../images/arrow_link.svg) no-repeat left center;}
@media (min-width:1201px) {
.link_green:hover                          { background-position: center left 20px;}
}
@media (max-width: 1024px) {
.materiaux                                 { padding: 50px 0;}
.materiaux-grid .content::after            { display: none;}
.materiaux-grid                            { grid-template-columns:  1fr 1fr; }

.materiaux-grid .item:nth-child(3)             { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr;}
.materiaux-grid .item:nth-child(3) img         { border-radius: 20px 0 0 20px;}
.materiaux-grid .item:nth-child(3) .content    { border-radius: 0 20px 20px 0;}

}
@media (max-width:800px) {
.materiaux-grid                                 { grid-template-columns: 1fr;}
.materiaux-grid .item:nth-child(3)              { grid-column: span 1; display: block; }
.materiaux-grid .item:nth-child(3) img          { border-radius: 20px 20px 0 0;}
.materiaux-grid .item:nth-child(3) .content     { border-radius: 0 0 20px 20px;}
}
@media (max-width:600px) {
.materiaux                                   { padding: 40px 0;}
.materiaux-grid                             { gap: 20px;}
.materiaux-grid  .bloc_texte                          { margin: 0 0 30px;}
.materiaux-grid .content p              { display: none;}
.materiaux-grid .content                 { position: absolute; bottom: 0; width: 100%;background: linear-gradient(0deg, rgba(2,0,36,0.6) 0%, rgba(0,0,0,0.25) 44%, rgba(0,0,0,0) 100%); border-radius: 0 0 10px 10px; padding: 20px 20px;}
.materiaux-grid .sous_titre             { margin: 0; color: #fff;}
.materiaux-grid .item                       {position: relative;}
.materiaux-grid .item img                         { border-radius: 10px;}
.materiaux-grid .item:nth-child(3) img          { border-radius: 10px;}
.link_green                                      {position: absolute; height: 100%; top: 0; left: 0; background-position: center right 20px; background-image: url(../images/arrow_link_light.svg);}
}

/***** infos *****/
.infos                                  { display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; background-color: #242424; margin: 95px 0;}
.infos .map                             { position: relative; height: 100%; overflow: hidden; border-radius: 0 20px 20px 0;}
.infos .map a                           { position: relative; display: block; width: 100%; height: 100%;}
.infos .map img                         { position: absolute; top: 0; object-fit: cover; object-position: center bottom; width: 100%; height: 100%;} 
.infos img.marker                       {bottom: 107px;left: 0;right: 0;margin: auto;width: auto;filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px -1px 0 white); height: auto; top: auto;}
.infos .content                         { color: #fff; padding: 90px 80px 100px;}
.infos .content a                       { display: inline-block; vertical-align: top; color: #fff; padding-left: 30px;}
.infos .tel		                        { background: url("../images/tel.svg") 0 50% no-repeat; margin-top: 10px;}
.infos .email		                    { background: url("../images/email.svg") 0 50% no-repeat; margin-top: 10px;}
.infos .adresse	                        { background: url("../images/marker.svg") 0 2px no-repeat; margin-top: 25px;}
.horaire                                { position: relative; margin-top: 35px;}
.horaire .current                       { background-color: #fff; position: relative; color: #000; display: block; border-radius: 5px; padding: 15px 30px; cursor: pointer;}
.horaire .current span                  { font-weight: 600; font-size: 16px;}
.horaire .current.active:after          { transform: rotate(180deg) translateY(-50%);}
.horaire .current:after                 { content: url(../images/arrow_down.svg); display: block; line-height: 0; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); transform-origin: top;}
.horaire ul                             { position: absolute; top: 70px; left: 0; width: 100%; background: #fff; padding: 30px; color: #000; border-radius: 5px; display: none; z-index: 2; box-shadow: 0 0 40px 0 rgb(94 76 41 / 10%);}
.horaire li:not(:last-child)            { margin-bottom: 15px;}
@media (max-width:1200px) {
.infos .content                         { padding: 40px;}
}
@media (max-width:1024px) {
.infos                                  { grid-template-columns: 1fr; margin: 50px 0;}
.infos .map                             { height: 380px; border-radius: 0 0 20px 20px;}
}
@media (max-width:600px) {
.infos                                  { border-radius: 0; overflow: initial; margin: 40px -7.5vw 0;}
.infos .content                         { order: 1; padding-bottom: 50px;}
.infos .map                             { border-radius: 0;}
.horaire .current                       { padding-left: 20px; padding-right: 20px;}
.horaire .current:after                 { right: 20px;}
.infos img.marker                       { bottom: 85px;}
}


/***** référence ****/
.reference                              { background: #eeeeee; padding: 120px 0; ;}
.reference .titre_main                  { color: #fff; margin-bottom: 33px;}
.reference .slider                      { margin: 0 -15px;}
.reference .slick-slide                 { margin: 0 15px; background-color: #fff; border-radius: 5px;}
.reference .slider img                  { width: 100%;}
@media (max-width:1200px) {
.reference                              { background-attachment: initial;}
}

@media (max-width:1024px) {
.reference                              { padding: 50px 0;}
}
@media (max-width:600px) {
.reference                              { padding: 50px 0; margin: 0;}
.reference .slider                      { margin: 0 -7px;}
.reference .slick-slide                 { margin: 0 7px;}
.reference .slick-next                  { right:-10px}
.reference .slick-prev                  { right:45px}
}


/* catalogue */
.catalogue                              { display: grid; align-items: center; grid-template-columns: 1fr 1fr; gap: 80px; margin: 90px 0 120px;}
.catalogue .item                        { display: grid; grid-template-columns:200px auto; align-items: center;}
.catalogue .item .link                  { margin-top: 20px;}

@media (max-width:1024px) {
.catalogue                              { grid-template-columns: 1fr; gap: 40px; margin: 50px 0;}
}
@media (max-width:600px) {
.catalogue .item                        { grid-template-columns: 1fr;}
.catalogue .item img                    { width: 130px; margin-bottom: 20px;}
.catalogue .link                        { display: block; text-align: center;}
}


.qualite                                    { padding: 90px 0; position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr ; text-align: center;}
.qualite .item                            { padding: 0 40px;}
.qualite .icone                          {  width: 100px; height: 100px; background: #97c900; border-radius: 50%;display: grid; align-items: center;  justify-content: center; margin: 0 auto 10px;}

@media (max-width:1200px) {
.qualite .item                              { padding: 0 20px;}
}
@media (max-width:1024px) {
.qualite                                    { grid-template-columns: 1fr 1fr  1fr; padding: 50px 0;}
}
@media (max-width:600px) {
.qualite                                    { grid-template-columns: 1fr ; gap: 20px;}
.qualite .item                           { display: grid; grid-template-columns: 100px 1fr; padding:0; text-align: left; max-width: 250px; line-height: 23px; align-items: center;} 
.qualite .icone                         { height: 80px; width: 80px; margin: 0;}
.qualite .icone img                 { transform: scale(0.8); transform-origin: center;     }
}

.produits                                     {position: relative; max-width: 900px; margin: 120px auto; }
.produits-img                              { position: absolute; top: -50px; left: 50px; z-index: 10;}
.produits-img img                       { height: 305px; width: auto;}
.produits .content                          { background: #eeeeee; padding: 30px 80px 30px 215px; border-radius: 20px 20px 0 0;}
.produits .link                             { display: block; border-radius: 0 0 20px 20px; padding: 0 30px 0 215px;}
.produits .link span                    { display: inline-block; padding-right: 70px; background: url(../images/arrow_link_light.svg) no-repeat center right;  }                             

@media (max-width:1024px) {
.produits                                    { margin:80px 0;}
.produits .content                       {  padding: 20px 40px 20px 215px;}
}
@media (max-width:600px) {
.produits                                       { margin: 50px 0;}
.produits-img img                       {height: 195px; display: block;}
.produits .content                          { display: grid; grid-template-columns: 115px 1fr; padding: 30px; align-items: center; border-radius: 10px 10px 0 0;}
.produits-img                               { position: relative; top: auto; left: auto; }
.produits .link                             { display: block; border-radius: 0 0 10px 10px; padding: 0 20px;}
.produits .link span                     { display: block;}
}
@media (max-width:400px) {
.produits .link                         {  padding: 10px 20px; line-height: 23px; height: auto;}
.produits .content                      { padding: 20px;}
}