/***** banner *****/
.banner                             { position: relative; z-index: 1; padding-top: 130px; color: #fff; background: linear-gradient(to bottom, #242424 calc(100% - 80px), #fff 100px);}
.banner .titre_main                 { color: #fff; font: 400 40px/50px "Poppins";}
.banner .wrapper                    { display: grid; grid-template-columns: 530px auto; gap: 80px;}
.banner .texte                      { padding-top: 75px;}
.banner .slider                     { width: 1820px;}
.banner .slider img                 { width: 100%; height: auto; display: block;}
.banner .swiper-slide               { width: 910px;}
.banner .devis                      { margin-top: 20px;}
.wrapnav                            { display: grid; grid-template-columns: 80px 80px; border: 2px solid #f6ba33; position: absolute; bottom: 0; left: 448px; border-top: none;}
.wrapnav .arrownav                  { width: 80px; height: 78px; background-position: center; background-color: transparent; background-repeat: no-repeat; cursor: pointer; transition: all ease-in-out 400ms;}
.wrapnav .arrownav_prev             { border-right: 2px solid #f6ba33; background-image: url(../images/arrow_prev.svg); }
.wrapnav .arrownav_next             { background-image: url(../images/arrow_next.svg);}

@media (min-width:1201px) {
.wrapnav .arrownav:hover           { background-color: #f6ba33;}
}
@media (max-width:1600px) {
.banner .slider                     { width: 1420px;}
.banner .swiper-slide               { width: 700px; height: 600px;}
.banner .swiper-slide img           { height: 100%; }
}
@media (max-width:1200px) {
/*.banner                             { padding-top: 100px;}
.banner .wrapper                    { gap: 50px; grid-template-columns: 450px auto;} 
.banner .slider                     { width: 1020px;}
.banner .titre_main                 { font-size: 32px;}
.banner .swiper-slide               { width: 500px; height: 600px;}
.wrapnav                            { left: 337px;}
.banner .slider                     { grid-area: 1;}*/
}

@media (max-width:1000px) {

.banner .slider                     { grid-area: 1;}

.banner                             { background: #242424; padding-bottom: 60px ;}
.banner .wrapper                    { max-width: initial; grid-template-columns: 1fr; gap: 30px; max-width: 750px;}
.wrapnav                            { display: none;}
.banner .swiper-slide               { width: 100%; height: auto;}
.banner .slider                     { width: 100%;}
.banner .texte                      { padding: 0;}
.banner .titre_main                 { font-size: 28px; line-height: 35px;}
}
@media (max-width:600px) {
.banner                             { text-align: center; padding-bottom: 50px; gap: 20px;}
.banner .titre_main                 { line-height: 30px; font-size: 20px; }
.banner .chapo                      { display: none;}
.banner .content                    { padding: 30px 0 60px;}
}

.intro_grid                         { display: grid; grid-template-columns: 1fr 1fr; margin: 145px 0 100px;}
.intro_grid .photo img              { display: block; width: 100%; object-fit: cover;}
.intro_grid .photo                  { position: relative; padding-right: 80px; padding-bottom: 70px;}
.intro_grid .texte                  { padding-left: 80px;}
.intro_grid .know                   { position: absolute; right: 0; bottom: 0; background-color: #242424; max-width: 320px; color: #fff; font-size: 16px; text-align: center; padding: 50px 40px;}
.intro_grid .know .title            { font-size: 25px; line-height: 30px; color: #f6ba33; margin-bottom: 5px;}
.intro_grid .image                   { position: relative;}
.intro_grid .image::before           { content: ""; background-color: #f6ba33; width: 100%; height: 100%; position: absolute; z-index: -1; left: -5px; top: -5px;}
.intro_grid .link                   { margin-top: 20px;}
.icone img                          { display: block; margin-bottom: 20px;}

@media (max-width:1200px) {
.intro_grid                         { margin: 100px 0 80px;}
.intro_grid .photo                  { padding-right: 50px; padding-bottom: 50px;}
.intro_grid .texte                  { padding-left: 50px;}
}

@media (max-width:1000px) {
.intro_grid                         {grid-template-columns: 1fr; gap: 40px; margin: 60px 0;}
.intro_grid .know                   { position: relative; left: 0; bottom: 0; max-width: 100% ;}
.intro_grid .photo                  { padding: 0;}
.intro_grid .texte                  { padding: 0;}
.intro_grid .image img              { max-height: 500px;}
.intro_grid .image::before          { display: none;}
}
@media (max-width:600px) {
.intro_grid                         { gap: 30px; margin: 50px 0;}
.icone                              { display: none;}
.intro_grid .know .title            { font-size: 20px; }
.intro_grid .know                   { padding: 25px 50px 30px; font-size: 13px;}
.intro_grid .image img              { max-height: 420px;}
}

.services                           { position: relative; background-color: #242424; padding: 100px 0 0; margin-bottom: 100px; color: #fff;}
.services .titre_main               { color: #fff;}
.services_texte                     { position: relative; margin-bottom: 60px; padding-right: 130px;}
.services .item img                 { display: block; width: 100%;}
.services_slick                     { width: 1550px;}
.servicesnav                        { position: absolute; right: 30px; bottom: -50px;}
.servicesnav .arrownav              { width:40px; height: 40px; cursor: pointer;}
.servicesnav .arrownav_prev         { background: url(../images/arrow_prev_yellow.svg) no-repeat center; display: inline-block;}
.servicesnav .arrownav_next         { background: url(../images/arrow_next_yellow.svg) no-repeat center; display: inline-block;}
.services_content                   { position: relative;}
.services_content::after            { content: ""; background-color: #fff; width: 10000px; height: calc(50% + 130px); bottom: -100px; left: -4000px; position: absolute;}

@media (min-width:1200px) {
.servicesnav .arrownav:hover        { opacity: 0.5;}
}
@media (max-width:1000px) {
.servicesnav                        { display: none;}
.swiper_scrollbar                   { background: #242424; width: 100%; margin: 30px auto 0; overflow: hidden; position: relative; z-index: 50;}
.swiper-scrollbar-drag              { background: #f6ba33; height: 4px; border-radius: 0;}
.services_slick                     { width: 1000px;}   
.services                           { padding: 60px 0 0; margin-bottom: 60px;}
.services .link                     { width: 100%;}
.services_texte                     { padding-right: 0; margin-bottom: 30px;}
}
@media (max-width:600px) {
.services                           { margin-bottom: 50px; padding-top: 40px;}
.services_slick                     { width: 750px;}
}


.cta_devis                          { position: relative; font: 600 18px/60px "poppins"; letter-spacing: 0.8px; color: #ffff; text-align: center; background-color: #242424; border-bottom: 5px solid #f6ba33; padding: 20px 50px; display: block;}
.cta_devis span                     { display: inline-block; padding-left: 60px; background: url(../images/icone_devis.svg) no-repeat center left;}
.cta_devis em                       {  text-transform: uppercase; transition: all ease-in-out 400ms; font-style: normal;}

@media (min-width:1200px) {
.cta_devis em:hover                 { color: #fff;}
}

@media (max-width:1000px) {
.cta_devis                          { font-size: 14px;}
}
@media (max-width:600px) {
.cta_devis                          { height: 50px; line-height: 50px; font-size: 13px; color: #000; background-color: #f6ba33; padding: 0 30px;}
.cta_devis span                     { padding: 0; background:none;}
.cta_devis em                       { color: #000;}
.devis_gratuit                      { padding: 50px 0; background-color: #242424; }
}

.jardin                             { margin: 110px 0;}
.jardin .link:not(:first-of-type)   { margin-top: 0;}
@media (max-width:1200px) {
.jardin                             { margin: 80px 0;}
}
@media (max-width:1000px) {
.jardin                             { margin: 60px 0;}
.jardin .link                       { margin: 10px 0 0; width: 100%;}
.jardin .link:not(:first-of-type)   { margin-top: 10px;}
}

@media (max-width:600px) {
.jardin                             { margin: 50px 0 40px;}
}

.about                              { display: grid; grid-template-columns: auto auto; gap: 80px; align-items: center; margin: 120px 0;}
.about p:not(:last-child)           { margin-bottom: 20px;}
.about .avantage                    { position: relative; background-color: #242424; color: #fff; text-align: center; padding: 85px 85px 75px;}
.about .title                       { font: 400 40px/50px "poppins"; margin-bottom: 35px; }
.about .title span                  { color: #f6ba33;}
.about .child_title                 { position: relative; font-size: 16px; padding-bottom: 20px; margin-bottom: 20px;}
.about .child_title::after          { content: ""; background-color: #f6ba33; width: 50px; height: 2px; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}

@media (max-width:1200px) {
.about                              { margin: 80px 0;}
}

@media (max-width:1000px) {
.about                              { display: none;}
}

.table_plus { margin: 100px 0;}

@media (max-width:1200px) { 
.table_plus							{ margin: 60px auto;}
}
@media (max-width:1000px) { 
.table_plus							{ margin: 50px auto;}
}
@media (max-width:600px) { 
.table_plus							{ margin: 30px 0;}
}


/***** moving galerie *****/
.moving_galerie 				    { width: auto; position: relative; text-align: center; margin: 100px 0; overflow: hidden;}
.moving_galerie .row 			    { width: auto; display: flex; align-items: center; gap: 30px;}
.moving_galerie .row .item 		    { width: auto; display: flex; align-items: center; animation: scroll_gallery 80s linear infinite; gap: 30px;}
.moving_galerie .row .item img 	    { width: auto; height: 440px; display: block; margin: 0 auto; transition: all 300ms ease-in-out;}

@keyframes scroll_gallery {
0%								    { transform: translate(0, 0);}
100% 							    { transform: translate(-100%, 0); }
}
@media (max-width:1000px) {
.moving_galerie                     { margin: 60px 0;}
}
@media (max-width:600px) {
.moving_galerie 				    { margin: 50px 0;}
.moving_galerie .row                { gap: 10px;}
.moving_galerie .row .item          { gap: 10px;}
.moving_galerie .row .item img      { width: 240px; object-fit: cover; height: 300px;}
}