/***** banner *****/
.banner 								{ position: relative; padding-top: 100px;}
.banner:before 							{ position: absolute; top: 0; right: 0; left: 0; bottom: 120px; background: #202f35; border-bottom: 10px solid #b8d302; content: "";}
.banner .wrapper 						{ max-width: 1800px; text-align: right; font-size: 0; line-height: 0;}
.banner .photos   						{ position: relative; display: inline-block; width: 1200px;}
.banner .photos .slider					{ width: 100vw; max-height: 820px;}
.banner .photos .slider .img			{ width: 1200px; margin-right: 30px;}
.banner .photos img  					{ width: 100%; height: auto; object-fit: cover; position: relative; display: block;}
.banner .photos .nav_slider           	{ position: absolute; left: 30px; bottom: 30px; z-index: 5;}
.banner .texte 							{ color: #fff; text-align: left; z-index: 10; position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding-bottom: 120px;}
.banner .texte .titre_main 				{ color: #fff; width: 820px; margin-bottom: 5px;}
.banner .texte .sous_titre 				{ margin-bottom: 0;}

@media (max-width:2000px) {
.banner .photos   						{ width: 60vw;}
.banner .photos .slider .img			{ width: 60vw;}
}
@media (max-width:1400px) {
.banner:before 							{ bottom: 80px;}
.banner .texte 							{ padding-bottom: 80px;}
.banner .texte .titre_main 				{ font-size: 40px; line-height: 50px; width: 740px;}
}
@media (max-width:1200px) {
.banner 								{ padding-top: 90px;}
.banner:before 							{ bottom: 60px;}
.banner .photos   						{ width: 65vw;}
.banner .photos .slider .img			{ width: 65vw; margin-right: 20px;}
.banner .photos .nav_slider           	{ left: 20px; bottom: 20px;}
.banner .texte 							{ padding-bottom: 60px;}
.banner .texte .titre_main 				{ width: 600px;}
}
@media (max-width:1000px) {
.banner 								{ padding: 90px 0 60px 0;}
.banner:before 							{ bottom: 0;}
.banner .wrapper 						{ text-align: left;}
.banner .photos   						{ width: 85vw;}
.banner .photos .slider .img			{ width: 85vw;}
.banner .texte 							{ position: relative; top: auto; left: auto; transform: none; padding: 40px 0 0 0;}
.banner .texte .titre_main 				{ font-size: 35px; line-height: 45px;}
}
@media (max-width:600px) {
.banner 								{ padding: 80px 0 40px 0;}
.banner:before 							{ border-width: 5px;}
.banner .photos .slider .img			{ margin-right: 10px;}
.banner .photos .nav_slider           	{ left: 0; bottom: 50%; margin-bottom: -25px; width: 85vw; padding: 0 3px;}
.banner .photos .slick-next           	{ float: right;}
.banner .texte 							{ padding: 25px 0 0 0;}
.banner .texte .titre_main 				{ font-size: 20px; line-height: 30px; width: auto;}
}


/***** intro *****/
.intro 								{ text-align: center; margin: 105px auto 50px; max-width: 1010px;}
.intro .titre_main                  { margin-bottom:0;}
.intro .sous_titre					{ margin: 0 0 20px 0; color: #202f35; font-size: 25px;}

@media (max-width:1000px) {
    .intro 								{ margin: 80px 0;}
}
@media (max-width:600px) {
    .intro                              { margin: 45px 0 40px; text-align: left;}
    .intro .sous_titre					{ font-size: 16px; margin-bottom: 10px;} 
}


/***** produits_slick *****/
.produits                                 { position: relative;}
.produits_slick                           { position: relative;}
.produits_slick:after                     { content: ""; display: block; position: absolute; top: 190px; bottom: 305px; left: -10000px; right: -10000px; background: #202f35; z-index: -1;}
.produits_slick .item                     { text-align: center; position: relative; z-index: 1;}
.produits_slick .link                     { max-width: 300px; margin: 0 auto; height: 70px; line-height: 70px; font-size: 15px;}
.produits_slick .img                      { position: relative; display: inline-block; vertical-align: top;}
.produits_slick .img img                  { display: block; margin-bottom: 40px;}
.produits_slick .img .verso               { position: absolute; left: 0; bottom: 0; opacity: 0;}
.produits_slick .item .link               { display: block;}

@media (min-width:1160px) {
    .produits_slick .slick-list,
    .produits_slick .slick-track              { transform: none !important; width: auto !important; font-size: 0; letter-spacing: 0;}
    .produits_slick .item                     { width: 33.333% !important; float: none !important; display: inline-block; vertical-align: top; margin-bottom: 75px;}
}
@media (min-width:1201px) {
    .produits_slick .img img                  { transition: all ease 400ms;}
    .produits_slick .item:hover .recto        { opacity: 0;}
    .produits_slick .item:hover .verso        { opacity: 1;}
    .produits_slick .item .link:hover         { background-position: 0 0;}
}
@media (max-width:1160px) {
    .produits_slick                         {padding-bottom: 80px;}
    .produits_slick::after                  { top: auto; bottom: 0; height: calc(100% - 200px);}
    .produits .slick-next                   { position: absolute; top: 50%; transform: translateY(-50%); right: -50px;}
    .produits .slick-prev                   { position: absolute; top: 50%; transform: translateY(-50%); left: -50px;}
}
@media (max-width:1000px) {
    .produits_slick                      { margin: 0 -20px 0 0 ;}
    .produits_slick .item                { margin: 0 20px 0 0 ;}  
    .produit_arrow .slick-arrow          { z-index: 200;}                         
}
@media (max-width:760px) {
    .produits_slick                           { margin-top: 50px; padding-bottom: 60px;}
    .produits .slick-next               { right: -25px;}
    .produits .slick-prev               { left: -25px;}
    .produits .slick-dots               { font-size: 0; line-height: 0; text-align: center; background: #ffffff; margin: 0 15px; border-radius: 2.5px; display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 40px;}
    .produits_slick .slick-dots li       { display: inline-block; vertical-align: top;}
    .produits_slick .slick-dots button   { width: 100%; height: 3px; border-radius: 2.5px; border: none; background: #fff; transition: all ease-in-out 400ms; padding: 0; font-size: 0;}
    .produits_slick .slick-dots li.slick-active button  { background: #b8d302;}
    .produits_slick .img img              { max-height: 300px;}
    .produits_slick .slick-dots           { width: 300px; margin: 40px auto 0;}
}
@media (max-width:600px) {
    .produits_slick .link                 { line-height: 50px; height: 50px; font-size: 12px;}
    .produits                             { max-width: 300px; margin: 0 auto;}
    .produits_slick                       { width: 640px;}
    .produits_slick .slick-dots           { margin: 40px 0 0;}
    .produits .slick-next                 { right: -65px;}
    .produits .slick-prev                 { left: -65px;}               
}
@media (max-width:420px) {
    .produits .slick-next                 { right: -10%;}
    .produits .slick-prev                 { left: -10%;}
}


/***** slogan *****/
.slogan                             { text-align: center; font: 700 italic 25px/40px "Barlow"; text-transform: uppercase; margin: 50px 0 105px;}
.slogan a                           { padding-bottom: 5px; border-bottom: 2px solid #b8d302;}
@media (min-width:1201px) {
    .slogan a:hover                     { color: #202f35; border-color: #202f35;}
}

@media (max-width:1000px) {
    .slogan                             { font-size: 16px; line-height: 24px; max-width: 260px; margin: 40px auto 50px;}
}
/***** bloc home *****/
.bloc_home                          { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center;}
.bloc_home>img                      { position: absolute; left: 0; top: -25px; z-index: 3;}
.bloc_home .photo                   { padding-left: 140px;}
.bloc_home .photo img               { display: block; width: 100%; object-fit: cover; }
.bloc_home .texte                   { background: #202f35; color: #ffffff; padding: 55px 75px 75px 80px; position: relative;}
.bloc_home .sous_titre              { font-size: 25px; color: #fff; margin-bottom: 20px;}
.bloc_home .texte p                 { margin-bottom: 30px;}
.bloc_home .macaron                 { width: 150px; height: 150px; text-align: center; background: #fff; display: grid; align-items: center; justify-content: center; border-radius: 50%; position: absolute; right: 50px; bottom: -75px; font: 700 italic 14px/22px "Barlow"; text-transform: uppercase; color: #b8d302;box-shadow: 0 10px 0 0px #b8d302;}
.bloc_home ul                       { margin-bottom: 30px;}
.bloc_home ul li                    { padding: 0 0 0 30px; position: relative; background: url(../images/list.svg) left 10px no-repeat; background-size: 15px;}
@media (max-width:1200px) {
    .bloc_home .texte                   { padding: 40px;}
    .bloc_home .macaron                 { right: 20px;}
}
@media (max-width:1000px) {
    .bloc_home                          { grid-template-columns: 1fr}
    .bloc_home .photo                   { margin-bottom: -50px; z-index: 2;}
    .bloc_home .texte                   { padding:90px 0 65px;}
    .bloc_home .texte::after            { content: ""; background: #202f35; width: 10000px;position: absolute; height: 100%; top: 0; left:-5000px; z-index: -1;}
    .bloc_home .sous_titre              { font-size: 16px; margin-bottom: 15px;}
}
@media (max-width:600px) {
    .bloc_home>img                      { max-width: 220px; top: -15px;}
    .bloc_home .macaron                 {width: 120px; height: 120px; font-size: 12px; line-height: 16px; bottom: -65px; right: 0;}
    .bloc_home .texte p                 {margin-bottom: 20px;}
}

/***** carousel *****/
.realisation                        { margin: 150px 0 55px; text-align: center;}
.realisation .sous_titre            { font-size: 25px; color: #202f35; margin-bottom: 30px;}
.carousel                           { margin: 0 -10px;}
.carousel .item img                 { width: 100%; display: block; padding: 0 10px;}
.carousel .slick-arrow              { position: absolute; top: 0; height: 100%; z-index: 1; width: 80px;}
.carousel .slick-prev               { left: 0;}
.carousel .slick-next               { right: 0;}
@media (min-width:1201px) {
    .carousel .slick-prev:hover           { background-image: url(../images/arrow_prev_green.svg);}
    .carousel .slick-next:hover           { background-image: url(../images/arrow_next_green.svg);}
}
@media (max-width:600px) {
    .realisation                        { margin: 105px 0 30px;}
    .realisation .sous_titre            {font-size: 16px; line-height: 26px; margin-bottom: 20px;}
    .carousel .item img                 { height: 320px; object-fit: cover; padding: 0; margin: 0 5px; width: 75vw; }
    .carousel                           { margin: 0 -5px;} 
}
/*** Portfolio *****/
.portfolio                          { display: block; text-align: center; margin: 55px 0; font-size: 15px; line-height: 80px; height: 80px;}
@media (max-width:600px) {
    .portfolio                          { margin: 30px auto 50px; max-width: 300px; line-height: 50px; font-size: 12px; height: 50px;}
}
/**** Services ****/
.services                           { position: relative; margin: 130px 0 120px; text-align: center;}
.services .sous_titre               { font-size: 25px; color: #202f35; margin-bottom: 20px;}
.services .content                  { max-width: 1000px; margin: 0 auto;}
.atouts                             { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 60px;}
.atouts .sous_titre                   { font-size: 15px; line-height: 22px; color: #202f35; max-width: 185px; margin: 0 auto;}
.services .icone                    { height: 72px; display: grid; justify-items: center;align-items: flex-end; margin-bottom: 20px;}
@media (max-width:600px) {
    .services                           { margin: 50px 0;text-align: left;}
    .atouts                      { display: block; margin: 30px 0;}
    .services .item                     { display: grid; grid-template-columns: 60px 1fr; align-items: center; }
    .services .sous_titre               { line-height: 26px; font-size: 16px; }
    .atouts .sous_titre                 { max-width: none;margin: 0; padding: 10px 0; line-height: 20px; font-size: 12px;}
    .services .icone                    { align-items: center; height: 78px; max-width: 40px; margin: 0; justify-self: center;}
    .services .icone img                { width: 100%; object-fit: cover;}
    .services .item:first-child         { border-top: 1px solid #e8eaea; border-bottom: 1px solid #e8eaea;}
    .services .item:last-child          { border-top: 1px solid #e8eaea;border-bottom: 1px solid #e8eaea;}
}

/**** Popup info ****/
.link-info 							{ width: 30px; height: 30px; background: url("../images/info.svg") center no-repeat #b8d302; display: inline-block; border-radius: 50%; vertical-align: middle; position: absolute; right: 0; top: 20px;}
.popup_info                			{ width: 100%; height: 100vh; position: fixed; right: 0; top: 0; z-index: 999; display: none;}
.popup_info ::-webkit-scrollbar 	{ display: none;}
.popup_info .close_bg      			{ width: 100%; height: 100%; background: #000; position: absolute; left: 0; top: 0; z-index: 700; opacity: .85; cursor: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJDYWxxdWVfMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJDYWxxdWVfMS0yIj48ZyBpZD0iQ2FscXVlXzItMiI+PGcgaWQ9IkNhbHF1ZV8xLTIiPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNCAxLjQ1IDIyLjU1IDAgMTIgMTAuNTUgMS40NSAwIDAgMS40NSAxMC41NSAxMiAwIDIyLjU1IDEuNDUgMjQgMTIgMTMuNDUgMjIuNTUgMjQgMjQgMjIuNTUgMTMuNDUgMTIgMjQgMS40NSIvPjwvZz48L2c+PC9nPjwvc3ZnPg==),auto;}
.popup_info .infos 					{ max-width: 1000px; width: 90vw; background: #fff; position: absolute; left: 50%; top: 20%; transform: translatex(-50%); padding: 60px 80px; text-align: left; overflow-y: scroll; border-radius: 5px; z-index: 800; box-shadow: 0 20px 50px 0 rgb(0 0 0 / 20%); opacity: 0; transition: all 400ms ease-in-out;}
.popup_info .infos.active  			{ top: 25%; opacity: 1;}

.popup_info .infos .grid 			{display: grid; grid-template-columns: 30% auto; align-items: center; grid-gap: 0 60px;}
.popup_info .infos .grid .texte 	{ padding-right: 40px;}
.popup_info .infos .grid .photo img { max-width: 100%; height: auto; max-height: 350px;}
.popup_info .infos .close_pop 		{ cursor: pointer; padding-right: 70px; position: relative;}
.popup_info .infos .close_pop:after { width: 12px; height: 12px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJDYWxxdWVfMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJDYWxxdWVfMS0yIj48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMTIgMS4wOSAxMC45MSAwIDYgNC45MSAxLjA5IDAgMCAxLjA5IDQuOTEgNiAwIDEwLjkxIDEuMDkgMTIgNiA3LjA5IDEwLjkxIDEyIDEyIDEwLjkxIDcuMDkgNiAxMiAxLjA5Ii8+PC9nPjwvc3ZnPg==) no-repeat; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); content: "";}
.popup_info .infos p a    			{ color: #202f35; border-bottom: 1px solid #b8d302; padding-bottom: 2px;}
.popup_info .plus_pop     			{ margin-top: 30px;}
.popup_info .close_pop.link 		{ background-position: 0 0; transform: rotate(-90deg); position: absolute; top: 25px; right: -50px;}
/*.popup_info .close_pop.link::before { content: ""; position: absolute; top: 0; right: 100%; width: 500%; height: 100%; background: #44636f; z-index: -1; right: -10px;}*/

@media (min-width:1201px) {
.popup_info .infos p a:hover      	{ color: #b8d302; border-bottom:1px solid #ffffff;}
.popup_info .close_pop:hover      	{ color: #b8d302;}
.link-info:hover                  	{ background-color: #44636f;}
}
@media (max-width:1600px) {
.popup_info .infos 					{ top: 10%;}
.popup_info .infos.active  			{ top: 15%;}
}
@media (max-width:1200px) {
.popup_info .infos 					{ top: 5%; padding: 40px 60px;}
.popup_info .infos.active  			{ top: 10%;}
}
@media (max-width:800px) {
.popup_info .infos 					{ padding: 20px 60px 60px 60px;}
.popup_info .infos .grid 			{ grid-template-columns: 1fr;}
.popup_info .infos .grid .photo 	{ text-align: center;}
.popup_info .infos .grid .texte 	{ text-align: center; padding-right: inherit;}
}
@media (max-width:600px) {
.popup_info .infos 					{ width: 85vw; padding: 5px 20px 40px 20px; top: 5%;}
.popup_info .infos.active  			{ top: 5%;}
.popup_info .infos .grid .photo img { max-height: 200px;}
.popup_info .infos .sous_titre 		{ margin: 15px 0 10px 0;}
.popup_info .infos .link 			{ margin-top: 20px;}
}