/***** banner *****/
.banner 							{ width: 100%; position: relative; z-index: 10; padding: 150px 0 0 0;}
.banner .img						{ position: relative; min-height: 550px; max-height: 900px; height: 90vh; width: 100%; background: url("../images/banner_01.webp") 50% / cover no-repeat; border-radius: 60px 0 60px 60px; overflow: hidden;}
.banner .img:before                 { width: 100%; height: 100%; content: ""; background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); display: block; position: absolute; z-index: 10; bottom: 0; right: 0; left: 0; opacity: 0.5;}
.banner .img img				    { width: 100%; height: auto; display: block; position: relative; object-fit: cover; }
.banner::after                      { width: 10000%; height: calc(55% + 140px); content: ""; background: #1b1b1b; display: block; position: absolute; z-index: -5; top: -140px; left: -5000%;}
.banner .content					{ position: absolute; bottom: 50%; transform: translateY(50%); left: 100px; z-index: 40;}
.banner .titre_main					{ color: #fff; font: 500 45px/50px "pinot"; position: relative; margin-bottom: 15px; text-transform: uppercase;}
.banner .titre_main:after   		{ background-color: #fff; height: 4px; }
.banner .link                       { margin-top: 45px;}

@media (max-width:1600px) {
.banner .wrapper_large              { width: 100vw;}
.banner .img						{ border-radius: 0; }
}
@media (max-width:1200px) {
.banner                             { padding: 100px 0 0;}
.banner .img						{ min-height: inherit; max-height: inherit; height: 70vw; }
.banner .titre_main					{ font-size: 40px; line-height: 50px; }
}
@media (max-width:1000px) {
.banner .img						{ height: 65vw; }
.banner::after                      { height: 100%; }
.banner .content                    { left: 5vw;}
.banner .link                       { margin-top: 25px;}
.banner .titre_main					{ font-size: 30px; line-height: 40px; }
}

@media (max-width:600px) {
.banner                             { background: #1b1b1b;}
.banner .wrapper_large              { width: 85vw;}
.banner .img						{ height: 65vw; border-radius: 35px 0 35px 35px; }

.banner .titre_main                 { font: 500 20px/30px "pinot"; color: #009741;}

.banner .img:before                 { display: none;}
.banner .content					{ position: relative; bottom: inherit; left: inherit; transform: none; padding: 30px 7.5vw 45px; text-align: center;}
.banner .link                       { margin-top: 15px;}
}




/***** intro *****/
.intro 								{ text-align: center; margin: 120px auto 110px; max-width: 780px;}
.intro p    						{ font: 400 25px/40px "poppins"; color: #009741;}

@media (max-width:1000px) {
.intro 								{ max-width: 600px; margin: 80px auto 70px;}
.intro p                            { font-size:20px; line-height: 35px;}
}

@media (max-width:600px) {
.intro 								{ margin: 40px auto 30px; max-width: 365px;}
.intro p                            { font-size:16px; line-height: 26px;}
}




.services                               { margin: 100px auto 70px; position: relative;}
.services .slider                       { width: 100vw; margin: 20px 0 0 0;}
.services .slick-list                   { overflow: visible;}
.services .slider .item                 { margin: 20px 0 0 30px; padding: 40px 40px 50px 40px; box-shadow: 0px 5px 30px 0 rgb(4 99 47 / 10%); background-color: #fff; border-radius: 20px; position: relative; z-index: 50; width: 380px; min-height: 435px; }
.services .slider .item img             { max-width: 80px; height: 80px }
.services .slider .item .sous_titre     { margin-top: 20px; margin-bottom: 10px; color: #000; font-size: 18px; font-weight: 500; }

.services .nav_slider                   { display: flex; gap: 10px; position: absolute; top: 0; right: 0; align-items: center; justify-content: center; }
.services .nav_slider .slick-arrow      { width: 50px; height: 50px; border-radius: 8px; background-color: #009741; }
.services .nav_slider .slick-next       { background-image: url("../images/small_arrow_next_white.svg")}
.services .nav_slider .slick-prev       { background-image: url("../images/small_arrow_prev_white.svg") }

@media (min-width:1201px) {
.services .slider .item:hover .sous_titre     { background-position: calc(100% - 40px) 50%;}
}
@media (max-width:1200px) {
.services                               { margin: 80px auto;}
.services .slider                       { width: 100%; margin: 0 -15px 0;}
.services .slider .item                 { margin: 50px 0 0 20px; padding: 40px 40px; border-radius: 15px; width: auto; min-height: inherit; }
}
@media (max-width:1000px) {
.services                               { margin: 70px auto;}
}
@media (max-width:700px) {
.services                               { margin: 40px auto;}
.services .slider                       { margin: 20px 0 0 0;}
.services .slider .item                 { position: relative; margin: 0 0 10px 0; padding: 0 7.5vw; height: 70px; background-color: #fff; border-radius: 5px; display: grid; grid-template-columns: 50px 1fr; grid-gap: 15px; align-items: center; border-bottom: 1px solid #eee;}
.services .slider .item img             { max-width: 50px; max-height: 50px; margin: 0;}
.services .slider .item p               { display: none;}
.services .slider .item .sous_titre     { margin: 0 60px 0 0; font-size: 14px; line-height: 24px; }
.services .slider .item .link_more      { margin: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border-radius: 0; background: url("../images/arrow_green.svg") calc(100% - 30px) 50% no-repeat transparent; font-size: 0; line-height: 0;}
.services .nav_slider                   { display: none; }
}





/* realisation */
.realisation                        { max-width: 1500px; margin: 100px auto 190px; position: relative; padding:0 40px;}
.realisation .slick                 { margin: 30px -10px 0;}
.realisation .item                  { margin: 0 10px;}
.realisation .item img              { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}
.arrow_slider                       { position: absolute; top: -20px; right:-22px;}
.realisation .link                  { position: absolute; bottom: -90px; right: 40px; background-image: linear-gradient(to top, #009741 0%, #009741 50%, #1b1b1b 50%, #1b1b1b 100%);}
@media (max-width:1000px) {
.realisation                        { margin: 80px 0 160px;}
}
@media (max-width:600px) {
.realisation                        { margin: 50px auto 160px; max-width: 85vw; padding: 0;}
.realisation .item                  { border-radius: 20px;}
.realisation .item::after           { box-shadow:-100px -150px 90px -100px rgb(0 0 0) inset; position: absolute; bottom: 0; width: 100%; height: 100%; content: ""; border-radius: 20px;}
.realisation .item img              { z-index: -1;position: relative;}
.arrow_slider                       { top: auto; bottom: 20px; right: auto; left: 50%; transform: translateX(-50%); z-index: 100;}
.realisation .slick                 { margin: 20px -10px 0;}
.realisation .wrapper               { position: static;}
.arrow_slider .slick-arrow          { filter: brightness(0) invert(1);}
.realisation .link                  { bottom: -100px; right: auto; left: 50%; transform: translateX(-50%);}
}


.marquage                           { font: 400 14px/32px "poppins"; color: #fff; border-radius: 50px 50px 50px 0; display: inline-block; background: #1b1b1b; padding: 14px 35px; position: absolute; top: -30px; right: 30px;}

@media (max-width:600px) {
.marquage                           { font-size: 11px; padding: 9px 30px;}
}



/****  ABOUT ***/
.about                              { background: #1b1b1b; color: #fff;}
.about .content                     { display: grid; grid-template-columns: 1fr 1fr; background: url(../images/logo_after.svg) no-repeat right bottom;  padding: 130px 0 110px}
.about .content p a                 { color: #009741; border-bottom: 1px solid transparent;}
.about .texte_1                     { padding-right: 95px;}
.about .texte_2                     { margin-top: 0; text-align: center;}
.about .texte_2 span                { display: block; font: 500 22px/32px "pinot"; color: #fff; text-transform: uppercase; text-align: center; position: relative;}
.about .texte_2 span:not(:last-child){ margin-bottom: 20px;}      
.about .texte_2 span:not(:last-child):after{ content: ""; background: #009741; width: 50px; height: 2px; display: block; margin-left: 50%; margin-top: 18px; transform: translateX(-50%);}
.about .marquage                    { background: #fff; color: #1b1b1b; position: relative; margin-bottom: 40px; left: 100px; top: inherit;}      
.about .link                        { margin-top: 30px;}
@media (min-width: 1201px){
.about .content p a:hover           { border-color: #009741;}
}
@media (max-width:1000px) {
.about .content                     { grid-template-columns: auto; gap: 40px; background: none; padding: 50px 0;}
.about .texte_1                     { padding-right: 0;}
.about .texte_2                     { margin: 0; text-align: left;}
.about .texte_2 span                { text-align: left; font-size: 16px; line-height: 30px;}
.about .texte_2 span:not(:last-child){ margin-bottom: 15px;}
.about .texte_2 span:not(:last-child):after{  margin-left: 0; transform: none;margin-top: 10px;}
.about .marquage                    { display: none;}
}




.temoignage                         { background: #fff; position: relative; padding: 80px 0 60px;}
.temoignage .sous_titre             { color: #1b1b1b;}
.temoignage .slider                 { margin: 0 -20px;}
.realisation .slick-next,
.temoignage .slick-next             { background-image: url(../images/arrow_next_green.svg);}
.realisation .slick-prev,
.temoignage .slick-prev             { background-image: url(../images/arrow_prev_green.svg);}
.temoignage .slick-list             { padding: 60px 0;}
.temoignage .item                   { background: #fff; margin: 0 20px; padding: 60px 40px; border-radius: 20px; box-shadow:  1px 9px 30px -11px rgba(0,0,0,0.22);}
.temoignage .item:before            { content: url(../images/quote.svg); position: absolute; top: -30px; z-index: 50;}
.temoignage .item span              { margin-top: 10px; display: block;}
.temoignage .slick-arrow            { border-radius: 50%;}
.temoignage .slick-prev             { right: 70px;}
.temoignage .arrows                 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: absolute; top: -5px; right:-20px;}
@media (min-width:1200px) {
.realisation .slick-next:hover,
.temoignage .slick-next:hover       { background-image: url(../images/arrow_next_black.svg);}
.realisation .slick-prev:hover,
.temoignage .slick-prev:hover       { background-image: url(../images/arrow_prev_black.svg);}   
}
@media (max-width:1000px) {
.temoignage                         { padding: 40px 0 35px;}
.temoignage .slick-list             { padding: 30px 0;}
.temoignage .item                   { padding: 40px 30px;}
.temoignage .item:before            { display: none;}
}




/***** table plus *****/
.sous_titre                         { font: 400 20px/30px "poppins"; color: #009741; margin-bottom: 20px;}
.table_plus 						{ position: relative; margin: 30px 0 110px;}
.table_plus p a                     { color:#009741}
.table_plus>.sized					{ margin-bottom: 30px;}
.table_plus .item 					{ margin-bottom: 20px;}
.table_plus .hide 					{ padding: 40px 50px 30px; display: none;}
.table_plus .hide ul 				{ padding-left: 20px;}
.titre_plus 						{ font: 400 14px/26px "poppins"; position: relative; letter-spacing: 0.5px; color: #1b1b1b; cursor: pointer; padding: 17px 80px 17px 30px; background: #fff; border-radius: 30px; box-shadow: 0px 5px 20px 0 rgb(4 99 47 / 10%);}
.titre_plus:before					{ width: 30px; height: 30px; background: url("../images/plus.svg") 50% no-repeat ; border-radius: 50%; position: absolute; right: 30px; top: 50%; margin-top: -15px; transition: all 400ms ease-in-out; content: "";}
.titre_plus.active:before 			{ transform: rotate(45deg);}

@media (max-width:1000px) {
.table_plus .hide 					{ padding: 40px 0;}
}
@media (max-width:600px) {
.table_plus 						{ margin: 0 -10vw 40px; } 
.table_plus .sized					{ margin-bottom: 20px;} 
.table_plus .hide 					{ padding: 30px 10vw;}
.titre_plus 						{ font-size: 12px; line-height: 22px; padding: 19px calc(10vw + 60px) 19px 10vw; border-radius: 0;}
.titre_plus:before					{ right: 10vw; top: 20px; margin: 0;}
}