/***** fonts et reset *****/
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Poppins:wght@300;400;500;600;700&display=swap');

body, ul, li, ol, form, h1, h2, h3, h4, h5, h6, div, span, p { padding:0; margin:0; border:0; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none;}
article, aside, dialog ,figcaption, figure, footer, header, hgroup, main, nav, section { display: block;}  
input, textarea						{ -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-appearance: none; -o-appearance: none; border-radius: 0;}
*          							{ outline: none;}
strong, b							{ font-weight: 500; font-size: 17px;}
ul									{ list-style-type: none;}
body								{ font: 400 15px/30px "Poppins"; letter-spacing: 0.4px; color: #888; background: #fff; position: relative;}
body.active_overflow				{ height: 100vh; overflow: hidden;}
a									{ text-decoration: none; color: #333; position: relative;}
img									{ border: none;}
main 								{ position: relative; z-index: 10;}
#wrapper 							{ min-width: 320px; overflow: hidden; position: relative;}
#wrapper *							{ box-sizing: border-box;}
#footer 							{ position: relative; z-index: 15;}

@media (max-width:700px) {
body								{ font-size: 13px; line-height: 26px;}
strong, b							{ font-size: 15px;}
}


/***** scollbar *****/
::-webkit-scrollbar 				{ width: 6px; height: 6px; background-color: #fff;}
::-webkit-scrollbar-thumb			{ background-color: #4f7b4b;}


/***** transition *****/
@media (min-width:1201px) {
.link, .slick-arrow, :before, :after, a, a span, .logo, .header, .sub { transition: all 300ms ease-in-out;}
}


/***** class *****/
.wrapper 							{ width: 90vw; max-width: 1200px; margin: 0 auto; position: relative;}
.wrapper_large						{ max-width: 1500px;}
.clear								{ clear: both; display: block;}
.anchor								{ position: absolute; left: 0; top: -140px;}
.titre_main	 						{ font: 600 60px/70px "Poppins"; position: relative; color: #2d3745; margin-bottom: 15px;}
.titre_serif		 				{ font: 400 50px/60px "DM Serif Display"; color: #2b3747; margin-bottom: 15px;}
.sous_titre 						{ font: 500 22px/32px "Poppins"; position: relative; color: #4f7b4b; margin-bottom: 15px;}
.chapo		 						{ font: 400 30px/40px "DM Serif Display"; color: #2b3747; margin-bottom: 15px;}
.chapo span	 						{ display: block; margin-top: 15px;}
.link 								{ font: 600 12px/60px "Poppins"; text-transform: uppercase; letter-spacing: 1.4px; height: 60px; display: inline-block; color: #fff; padding: 0 35px; border-radius: 8px; background: linear-gradient(to top, #4f7b4b 0% 50%, #2d3745 50% 100%); background-size: 100% 200%; background-position: 0 100%;}

.links_icons   						{ display: grid; grid-template-columns: auto auto auto auto 1fr; grid-gap: 20px;}
.links_icons a 						{ border-radius: 0; width: 180px; height: auto; text-align: center; padding: 35px 20px 30px 20px;}
.links_icons a img					{ display: block; margin: 0 auto 20px auto; width: auto; height: 50px; object-fit: none; object-position: center bottom;}
.links_icons a span					{ display: grid; align-items: center; height: auto; line-height: 20px; padding: 0 0 25px 0; background: url("../images/arrow.svg") 50% 100% no-repeat;}
.links_icons a.contact 				{ background-image: linear-gradient(to top, #2d3745 0% 50%, #4f7b4b 50% 100%);}

@media (min-width:1201px) {
.link:hover 						{ background-position: 0 0; color: #fff;}
}
@media (max-width:1400px) {
.titre_main	 						{ font-size: 50px; line-height: 60px;}
.titre_serif		 				{ font-size: 40px; line-height: 50px;}
.links_icons   						{ grid-gap: 15px;}
.links_icons a 						{ width: 170px; padding: 30px 20px;}
}
@media (max-width:1200px) {
.wrapper 							{ min-width: inherit;}
.anchor								{ top: -120px;}
.titre_main	 						{ font-size: 40px; line-height: 50px;}
.titre_serif		 				{ font-size: 35px; line-height: 40px;}
.sous_titre 						{ font-size: 20px; line-height: 30px;}
.chapo		 						{ font-size: 24px; line-height: 34px;}
.links_icons   						{ grid-gap: 10px;}
.links_icons a 						{ width: 180px; padding: 25px 10px;}
}
@media (max-width:1000px) {
.wrapper 							{ max-width: 750px;}
.titre_main	 						{ font-size: 26px; line-height: 36px;}
.titre_serif		 				{ font-size: 30px; line-height: 35px;}
.links_icons   						{ grid-template-columns: 1fr 1fr 1fr 1fr;}
.links_icons a 						{ width: 100%;}
}
@media (max-width:700px) {
.wrapper 							{ width: 86vw;}
.anchor								{ top: -100px;}
.titre_cap							{ font-size: 10px; line-height: 18px; margin-bottom: 5px;}
.titre_main	 						{ font-size: 20px; line-height: 28px; margin-bottom: 10px;}
.titre_serif		 				{ font-size: 26px; line-height: 32px; margin-bottom: 10px;}
.sous_titre 						{ font-size: 16px; line-height: 24px; margin-bottom: 10px;}
.chapo		 						{ font-size: 18px; line-height: 28px; margin-bottom: 10px;}
.link 								{ line-height: 54px; height: 54px; padding: 0 25px; border-radius: 5px;}

.links_icons   						{ grid-template-columns: 1fr;}
.links_icons a 						{ display: grid; grid-template-columns: 40px 1fr; grid-gap: 18px; align-items: center; min-height: 70px; padding: 0 30px 0 18px; text-align: left; border-radius: 5px;}
.links_icons a img					{ margin: 0 auto; height: auto; transform: scale(0.75); transform-origin: center center;}
.links_icons a span					{ padding: 0 60px 0 0; background-position: 100% 50%;}
}



/***** header et menu *****/
.header 							{ width: 100%; font-size: 0; line-height: 0; letter-spacing: 0; position: fixed; left: 0; top: 0; padding: 50px 0 0 0; z-index: 100; text-align: right; transition: all 400ms ease-in-out;}
.header .wrapper					{ background: #fff; border-radius: 10px; transition: all 400ms ease-in-out;}
.header .logo						{ width: 270px; position: absolute; left: 40px; top: 50%; transform: translateY(-50%); z-index: 140; transition: all 400ms ease-in-out;}
.header .logo img					{ width: 100%; height: auto; display: block; transition: opacity 300ms ease-in-out;}
.header .logo img:last-child		{ position: absolute; left: 0; top: 0; opacity: 0;}

.header .header_nav 				{ display: inline-block; vertical-align: middle; position: relative;}
.header .menu>li					{ position: relative; display: inline-block; vertical-align: middle; margin-left: 40px;}
.header .menu>li a					{ font: 500 14px/90px "Poppins"; height: 90px; display: block; color: #2b3747; letter-spacing: 0.4px;}
.header .menu>li.active>a			{ color: #4f7b4b;}

.header .sub						{ width: 280px; margin-left: -140px; text-align: center; position: absolute; top: 80px; left: 50%; display: block; visibility: hidden; opacity: 0; padding: 20px 0; background: #4f7b4b; border-radius: 8px;}
.header .sub li						{ width: 100%; margin: 0;}
.header .sub li a					{ width: 100%; font-size: 14px; letter-spacing: 0.6px; line-height: 38px; height: 40px; font-weight: 400; color: #fff;}
.header .sub li.active a			{ opacity: 0.5;}

.header .menu>li.cta 				{ margin: 0 20px 0 50px;}
.header .menu>li.cta .link 			{ font-size: 12px; font-weight: 600; color: #fff; height: 50px; line-height: 50px; padding: 0; width: 150px; text-align: center; letter-spacing: 1.4px;}

@media (min-width:1201px) {
.menu_mobile 						{ display: none;}
.header .sub:after 					{ width: 10px; height: 10px; position: absolute; left: 50%; top: -4px; margin: 0 0 0 -5px; transform: rotate(45deg); background: #4f7b4b; content: "";}

.header .menu>li:hover .sub			{ opacity: 1; visibility: visible; z-index: 999;}
.header .menu>li:hover>a 			{ color: #4f7b4b;}		
.header .menu>li:hover>a.link		{ color: #fff; background-position: 0 0;}		
.header .sub li a:hover 			{ opacity: 0.5;}

.sticky .header						{ padding: 0 0 0 0;}
.sticky .header .wrapper 			{ box-shadow: 0 0 40px 0 rgba(0,0,0,10%); border-radius: 0 0 10px 10px; /*max-width: 1240px; padding: 0 20px;*/}
}
@media (max-width:1200px) {
.menu_mobile						{ width: 60px; height: 90px; display: inline-block; vertical-align: middle; cursor: pointer; position: relative; z-index: 250; margin: 0 -10px; transition: height 300ms ease-in-out;}
.menu_mobile div					{ width: 40px; height: 2px; background: #2b3747; position: absolute; right: 50%; top: 50%; margin: -1px -20px 0 0; transition: all 0ms ease-in-out 950ms;}
.menu_mobile div:before				{ width: 100%; height: 2px; background: #2b3747; position: absolute; right: 0; top: 8px; transition: all 0ms ease-in-out 950ms; content: "";}
.menu_mobile div:after				{ width: 100%; height: 2px; background: #2b3747; position: absolute; right: 0; top: -8px;  transition: all 0ms ease-in-out 950ms; content: "";}
.menu_mobile.active div				{ background: #fff; width: 34px; height: 0; margin-right: -17px; transition-delay: 0ms;}
.menu_mobile.active div:before		{ background: #fff; top: 0; transform: rotate(45deg); transition-delay: 0ms;}
.menu_mobile.active div:after		{ background: #fff; top: 0; transform: rotate(-45deg); transition-delay: 0ms;}

.header 							{ padding: 10px 0 0 0; background: linear-gradient(to bottom, #fff 0%, #fff 50%, transparent 50%, transparent 100%); background-size: 100% 200%; background-position: 0 100%;}
.header ::-webkit-scrollbar			{ display: none;}
.header .wrapper					{ width: 100%; border-radius: 0; padding-right: 5vw; background: none;}
.header .logo						{ width: 100px; height: 50px; overflow: hidden; left: 5vw; z-index: 300;}
.header .logo img					{ width: auto; height: 100%; transition: opacity 150ms ease-in-out 550ms;}

.header .header_nav 				{ width: 100%; height: 100vh; position: fixed; right: -100%; top: 0; overflow-y: scroll; display: grid; align-items: center; z-index: 200; background: #2b3747; transition: all 400ms ease-in-out 600ms;}
.header .menu  						{ display: block; width: 100%; text-align: center; padding: 0 0 20px 0; position: static; z-index: 100;}
.header .menu>li 					{ width: 100%; display: block; margin: 0; opacity: 0; transform: translateY(40px); transition: all 400ms ease-in-out 200ms;}
.header .menu>li>a					{ font-size: 36px; line-height: 60px; height: 60px; font-weight: 500; letter-spacing: 2px; transition: none; color: #fff;}
.header .menu>li.cta 				{ margin: 25px 0 0 0; width: auto; display: inline-block;}
.header .menu>li.cta .link 			{ font-size: 14px; letter-spacing: 2px; width: 180px; height: 60px; line-height: 60px;}
.header .sub 						{ display: none;}

.header.active .logo img			{ opacity: 0; transition-delay: 500ms;}
.header.active .logo img:last-child	{ opacity: 1; transition-delay: 500ms;}
.header.active .header_nav 			{ right: 0; transition-delay: 200ms;}
.header.active .menu>li				{ opacity: 1; transform: translateY(0); transition-delay: 600ms;}

.sticky .header   					{ padding: 0; background-position: 0 0;}
}
@media (max-width:1000px) {
.header .wrapper					{ max-width: none;}
.header .menu  						{ padding: 0 0 80px 0;}
}
@media (max-width:700px) {
.menu_mobile						{ height: 80px;}
.menu_mobile div,
.menu_mobile div:before,
.menu_mobile div:after				{ background: #2b3747;}
.menu_mobile.active div:before,		
.menu_mobile.active div:after		{ background: #fff;}

.header 							{ padding: 0;}
.header .wrapper					{ width: 100%; border-radius: 0; padding-right: 7vw; background: none;}
.header .logo						{ width: 70px; height: 36px; overflow: hidden; left: 7vw;}
.header .logo img					{ width: auto; height: 100%;}

.header .header_nav 				{ display: grid; align-items: center;}
.header .menu  						{ text-align: center; padding: 0 0 80px 0;}
.header .menu>li>a					{ font-size: 22px; line-height: 50px; height: 50px; font-weight: 600; text-transform: uppercase; letter-spacing: 3px;}
.header .menu>li.cta .link 			{ font-size: 12px; width: 160px; height: 56px; line-height: 56px; border-radius: 8px;}

.sticky .header .menu 				{ padding-top: 0;}
}



@media (max-width:1200px) {
/** custom header page mobile **/
.header_page 								{ background: #2d3745;}
.header_page .menu_mobile div				{ background: #fff;}
.header_page .menu_mobile div:before		{ background: #fff;}
.header_page .menu_mobile div:after			{ background: #fff;}

.header_page .logo img						{ opacity: 0;}
.header_page .logo img:last-child			{ opacity: 1;}
}



/***** footer *****/
.footer								{ position: relative; background: #2d3745; color: #fff; font-size: 0; padding-top: 110px;}
.footer .wrapper:before 			{ width: 500px; height: 100%; position: absolute; right: -10%; bottom: 0; background: url("../images/shape_mp.svg") 50% 100% / contain no-repeat; opacity: 0.1; content: "";}
.footer .bloc_footer 				{ display: inline-block; vertical-align: top; position: relative;}
.footer .bloc_footer img 			{ border-bottom: 1px solid #424b58; padding-bottom: 40px; width: auto; height: auto; display: block; margin-bottom: 35px;}
.footer .bloc_footer p				{ font-size: 16px; line-height: 30px; margin-top: 15px;}
.footer .bloc_footer p a			{ color: #fff; padding-left: 30px; letter-spacing: 0.6px;}
.footer .bloc_footer p a.tel		{ background: url("../images/tel.svg") 0 60% no-repeat;}
.footer .bloc_footer p a.email		{ background: url("../images/email.svg") 0 60% no-repeat;}

.footer ul.bloc_footer     			{ margin: 20px 0 0 120px;}
.footer ul.bloc_footer li   		{ margin-bottom: 5px;}
.footer ul.bloc_footer li a 		{ font-size: 16px; line-height: 34px; padding: 5px 0 5px 20px; background: url("../images/list.svg") 0 52% no-repeat; color: #fff; letter-spacing: 0.6px;}

.footer .support 					{ position: absolute; right: 210px; top: 2px;}
.footer .support .link				{ height: 50px; line-height: 50px; padding: 0 25px; background-image: linear-gradient(to top, #4f7b4b 0% 50%, #424b58 50% 100%);}

.footer	.rs							{ position: absolute; right: 0; top: 0; font-size: 0; line-height: 0; letter-spacing: 0;}
.footer	.rs a						{ width: 54px; height: 54px; border-radius: 50%; display: inline-block; vertical-align: top; margin-right: 10px;}
.footer	.rs .facebook				{ background: url("../images/rs_facebook_blue.svg") 50% no-repeat #fff;}
.footer	.rs .instagram				{ background: url("../images/rs_instagram_blue.svg") 50% no-repeat #fff;}
.footer	.rs .scroll 				{ background: url("../images/scrolltop.svg") 50% no-repeat #424b58; margin: 0;}

.footer_bottom   					{ padding: 20px 0; line-height: 0; margin-top: 80px;}
.footer_bottom li 					{ display: inline-block; font-size: 11px; line-height: 20px; margin-right: 30px; letter-spacing: 0.8px; position: relative;}
.footer_bottom li:after				{ width: 1px; height: 8px; content: ""; position: absolute; right: -16px; top: 6px; background: #4f7b4b;}
.footer_bottom li:last-child:after 	{ display: none;}
.footer_bottom li a 				{ color: #fff;}

.toponweb							{ display: block; z-index: 85; position: absolute; right: 0; bottom: 0; transition: bottom 300ms ease-in-out;}
.toponweb span						{ width: auto; height: 60px; display: block; padding: 20px; background: linear-gradient(to left, #4f7b4b 0% 50%, #424b58 50% 100%); background-size: 200% 100%; background-position: 100% 0;}
.toponweb img						{ width: 76px; height: auto; display: block; margin: 0 auto; transition: all 300ms ease-in-out;}
.toponweb.show						{ bottom: 0;}

@media (min-width:1201px) {
.footer .bloc_footer p a:hover,
.footer .bloc_footer li a:hover,
.footer_bottom li a:hover 	 		{ color: #4f7b4b;}
.footer	.rs a:hover  				{ background-color: #f2f2f2;}
.footer	.rs a.scroll:hover 			{ background-color: #4f7b4b;}
.toponweb:hover span				{ background-position: 0 0;}
}
@media (max-width:1600px) {
.footer .wrapper:before 			{ width: 500px; right: 0;}
}
@media (max-width:1400px) {
.footer								{ padding-top: 100px;}
}
@media (max-width:1200px) {
.footer								{ padding-top: 80px;}
.footer .wrapper:before 			{ display: none;}
.footer .bloc_footer img 			{ width: 300px; border: none; padding: 0; margin-bottom: 40px;}
.footer ul.bloc_footer,
.footer .support 		     		{ display: none;}
.footer	.rs a						{ width: 50px; height: 50px;}
}
@media (max-width:1000px) {
.footer_bottom   					{ margin-top: 60px;}
}
@media (max-width:700px) {
.footer								{ padding-top: 45px;}
.footer .bloc_footer 				{ width: 100%; padding: 0; text-align: center;}
.footer .bloc_footer img 			{ width: 160px; margin: 0 auto 20px auto;}
.footer .bloc_footer p				{ font-size: 0; line-height: 0; margin-top: 0; display: inline-block;}
.footer .bloc_footer p a			{ padding: 0; width: 50px; height: 50px; border-radius: 50%; display: inline-block;}
.footer .bloc_footer p a.tel		{ background: url("../images/tel_blue.svg") 50% no-repeat #fff; margin-right: 10px;}
.footer .bloc_footer p a.email		{ background: url("../images/email_blue.svg") 50% no-repeat #fff; margin-right: 110px;}

.footer	.rs							{ position: static;}
.footer	.rs a						{ width: 50px; height: 50px; position: absolute; left: calc(50% + 10px); top: 140px;}
.footer	.rs .instagram 				{ margin-left: 60px; margin-right: 0;}
.footer	.rs .scroll 				{ position: absolute; left: auto; right: 0; top: 0;}

.footer_bottom 	 					{ margin-top: 30px; padding: 0 0 80px 0; text-align: center;}
.footer_bottom li 					{ display: block; margin: 0; font-size: 10px; line-height: 28px;}
.footer_bottom li:after				{ display: none;}

.toponweb							{ width: 100%;}
.toponweb span						{ height: auto; padding: 18px 20px 16px 20px; background: #fff;}
.toponweb img						{ width: 70px; filter: invert(1);}
}