/***** fonts et reset *****/
@font-face {
	font-family: 'museo';
	src: url('../fonts/museosans-900.eot?#iefix') format('embedded-opentype'),
	url('../fonts/museosans-900.woff') format('woff'),
	url('../fonts/museosans-900.ttf')  format('truetype'),
	url('../fonts/museosans-900.svg#museosans-900') format('svg');
	font-weight: 900;
	font-style: normal;
}
@font-face {
	font-family: 'museo';
	src: url('../fonts/museosans-500.eot?#iefix') format('embedded-opentype'),
	url('../fonts/museosans-500.woff') format('woff'),
	url('../fonts/museosans-500.ttf')  format('truetype'),
	url('../fonts/museosans-500.svg#museosans-500') format('svg');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'museo';
	src: url('../fonts/museosans-300.eot?#iefix') format('embedded-opentype'),
	url('../fonts/museosans-300.woff') format('woff'),
	url('../fonts/museosans-300.ttf')  format('truetype'),
	url('../fonts/museosans-300.svg#museosans-300') format('svg');
	font-weight: 300;
	font-style: normal;
}



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: 700;}
ul											{ list-style-type: none;}
body										{ font: 300 15px/30px "museo"; letter-spacing: 0.4px; color: #000; background: #fff; position: relative;}
body.active_overflow						{ height: 100vh; overflow: hidden;}
a											{ text-decoration: none; color: #06205c; 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: 14px; line-height: 26px;}
}


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


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


/***** class *****/
.wrapper 									{ width: 90vw; max-width: 1200px; margin: 0 auto; position: relative;}
.wrapper.lg                         		{ max-width: 1800px;}
.clear										{ clear: both; display: block;}
.anchor 									{ position: absolute; left: 0; top: -120px;}
.titre                              		{ font: 900 15px/25px "museo"; text-transform: uppercase; color: #a8353a; letter-spacing: 2px; margin-bottom: 0;}
.titre_main                         		{ font: 500 30px/40px "museo";letter-spacing: 0.4px; color:#06205c; margin-bottom: 20px}
.sous_titre                         		{ font:300 25px/35px "museo"; letter-spacing: 0.4px; color:#a8353a;text-transform: none; margin-bottom: 15px}
.chapo		 								{ font: 300 15px/30px "museo";}
.link 										{ font: 900 13px/62px "museo"; letter-spacing: 1.8px; text-transform: uppercase; height: 60px; border: none; display: inline-block; color: #fff; padding: 0 30px; background: linear-gradient(to top, #a8353a 0%, #a8353a 50%, #06205c 50%, #06205c 100%); background-size: 100% 200%; background-position: 0 100%; cursor: pointer; text-align: center;}
.tel                                		{ background: url(../images/tel.svg) left center no-repeat; padding-left: 30px; font: 900 18px/50px "museo"; text-transform: uppercase;}
.email                              		{ background: url(../images/mail.svg) left center no-repeat; padding-left: 30px; font: 900 18px/50px "museo"; text-transform: uppercase;}
.ul_list									{ margin: 20px 0;}
.ul_list li									{ padding: 5px 0 5px 40px; position: relative; background: url(../images/list.svg) left 2px no-repeat;}

@media (min-width:1201px) {
.link:hover 								{ background-position: 0 0;}
.tel:hover,
.email:hover                        		{ color: #a8353a;}
}
@media (max-width:1000px) {
.wrapper.lg,
.wrapper 									{ max-width: 750px;}
}
@media (max-width:700px) {
.wrapper 									{ width: 88vw;}
.anchor 									{ top: -100px;}
.titre                              		{ font-size: 12px;}
.titre_main	 								{ font-size: 20px; line-height: 28px; margin-bottom: 10px}
.sous_titre									{ font-size: 20px; line-height: 28px; margin-bottom: 10px}
.chapo		 								{ font-size: 14px; line-height: 26px;}
.link                               		{ line-height: 56px; height: 54px; display: block; text-align: center; width: 100%;}
.ul_list									{ margin: 15px 0;}
.ul_list li									{ padding: 5px 0 5px 34px; background-size: 24px auto;}
}


/***** header et menu *****/
.header 									{ width: 100%; background: linear-gradient(to bottom, #a8353a 0%, #a8353a 50%, transparent 50%, transparent 100%); background-size: 100% 200%; background-position: 0 100%; font-size: 0; line-height: 0; text-align: right; position: fixed; left: 0; top: 0; z-index: 100; transition: all 400ms ease-in-out;}
.header .logo								{ position: absolute; left: 0; top: -35px; z-index: 90; transform-origin: left;}
.header .logo img							{ width: 100%; height: auto;}
.header_right 								{ display: block; position: relative; z-index: 89;background: #fff;}
.header_right .tel                  		{ font-size: 15px; display: inline-block;}

.header_nav									{ display:block; z-index: 50;padding-right: 0}
.header_nav .menu							{ position: relative;}	
.header_nav .menu li						{ display: inline-block; vertical-align: middle; position: relative; margin-left: 30px;}	
.header_nav .menu li a						{ font: 900 13px/90px "museo"; text-transform: uppercase; letter-spacing: 1.8px; height: 90px; display: block; transition-property: all; color: #fff;}
.header_nav .menu>li>a:after        		{ content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: #fff; transition: all ease 400ms;}
.header_nav .menu>li.active>a:after 		{ width: 100%;}

@media (min-width:1201px) {
.menu_mobile 								{ display: none;}
.header_nav .menu>li>a:hover:after 			{ width: 100%;}

.sticky .header                     		{ top: -50px; z-index: 120; background-position: 0 0; }
.sticky .header .logo               		{ top: -8px; transform: scale(0.65); filter: brightness(0) invert(1);}
}
@media (max-width:1200px) {
.menu_mobile								{ width: 60px; height: 100px; display: inline-block; vertical-align: middle; cursor: pointer; position: relative; z-index: 105; margin: 0 -10px;}
.menu_mobile div							{ width: 40px; height: 2px; background: #a8353a; position: absolute; right: 50%; top: 50%; margin: -1px -20px 0 0;}
.menu_mobile div:before						{ width: 100%; height: 2px; background: #a8353a; position: absolute; right: 0; top: 8px; content: "";}
.menu_mobile div:after						{ width: 100%; height: 2px; background: #a8353a; position: absolute; right: 0; top: -8px; content: "";}
.menu_mobile.active div						{ width: 30px; height: 0; margin-right: -15px;}
.menu_mobile.active div:before				{ top: 0; transform: rotate(45deg);}
.menu_mobile.active div:after				{ top: 0; transform: rotate(-45deg);}

.header 									{ background: #fff;}
.header .wrapper							{ position: static;}
.header .logo								{ top: 15px; left: 5vw; width: 130px; z-index: 200;}
.header_right 								{ margin: 0; padding: 0; position: static;}
.header_right .tel                  		{ display: inline-block; vertical-align: middle; margin-right: 5vw; position: relative; z-index: 105;}

.header_nav 	  							{ width: 100%; height: 0; padding: 0; position: fixed; right: 0; top: 0; overflow: hidden; display: grid; align-items: center; z-index: 100; border-top: 100px solid #fff; background: #a8353a; transition: height 300ms ease-in-out 400ms;}
.header_nav::-webkit-scrollbar				{ display: none;}
.header_nav .menu  							{ width: 100%; text-align: center; position: relative; z-index: 100; padding-bottom: 40px; opacity: 0; transform: translateY(40px); transition: all 400ms ease-in-out 0ms;}
.header_nav .menu li 						{ width: 100%; display: block; margin: 0;}
.header_nav .menu li a						{ font-size: 24px; line-height: 50px; height: 50px; letter-spacing: 2px;}

.header_nav.active							{ height: 100vh; transition-delay: 0ms;}
.header_nav.active .menu					{ opacity: 1; transform: translateY(0); transition-delay: 400ms;}
}
@media (max-width:700px) {
.menu_mobile								{ height: 80px;}
.header .logo								{ width: 100px; top: 12px; left: 6vw;}
.header_right .tel							{ padding: 0; width: 50px; height: 50px; font-size: 0; background: url("../images/tel.svg") 50% no-repeat; margin-right: 15px; margin-left: 0;}
.header_nav 	  							{ border-width: 80px;}
.header_nav .menu>li>a						{ font-size: 18px;}
}


/***** banner *****/
.banner                             		{ width: 90vw; max-width: 1800px; margin: 140px auto 0; position: relative;}
.banner img                         		{ width: 100%; height: auto; display: block; position: relative; z-index: 10;}
.shape_red 									{ position: absolute; top: -140px; right: 0; width: 50vw; height: auto; z-index: 5;}

@media (max-width:1700px) {
.shape_red 									{ top: -20vw; width: 60vw;}
}
@media (max-width:1700px) {
.shape_red 									{ top: -20vw; width: 60vw;}
}
@media (max-width:1500px) {
.shape_red 									{ width: 70vw;}
}
@media (max-width:1200px) {
.banner                             		{ margin-top: 100px; width: 100vw;}
.shape_red 									{ display: none;}
}
@media (max-width:700px) {
.banner                             		{ margin-top: 80px;}
}


/***** section intro *****/
.intro                              		{ display: grid; grid-template-columns: 1fr 440px; grid-gap: 80px; align-items: end; position: relative; z-index: 20; margin-top: -80px;}
.intro .chapo                       		{ margin: 0;}
.intro .devis                       		{ background: url("../images/star_gray.svg") right 10px bottom 15px no-repeat #fff; padding: 65px 70px; box-shadow: 0 0 40px rgba(0,0,0,0.1);}
.intro .devis .titre_main           		{ text-transform: uppercase; font: 900 40px/50px "museo"; color: #a8353a; margin-bottom: 15px;}

@media (max-width:1200px) {
.intro                              		{ grid-template-columns: 1fr; grid-gap: 30px; margin-top: 80px;}
.intro .chapo                       		{ margin-bottom: 0;}
.intro .devis                       		{ margin: 0; padding: 0; box-shadow: none; background: none; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
.intro .devis .titre_main           		{ display: none;}
.intro .devis a           					{ font: 900 13px/62px "museo"; letter-spacing: 1.8px; text-transform: uppercase; height: 60px; display: block; color: #fff; padding: 0 30px; background: #a8353a; cursor: pointer; text-align: center;}
}
@media (max-width:700px) {
.intro                              		{ margin-top: 40px; grid-gap: 25px;}
.intro .devis                       		{ grid-template-columns: 1fr;}
.intro .devis a           					{ line-height: 56px; height: 54px;}
}



/***** section transports *****/ 
.transports                       			{ margin: 100px 0; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 80px; align-items: start; position: relative; z-index: 50;}
.transports .photos               			{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; text-align: center; position: relative;}
.transports .photos :nth-child(1) 			{ grid-column: 1 / span 2;}
.transports .photos :nth-child(3) 			{ height: 300px;}
.transports .photos img           			{ width: 100%; height: auto; display: block; object-fit: cover;}
.transports .photos span          			{ color: #fff; position: relative; background: url("../images/star_blue.svg") center / contain no-repeat #06205c; display: grid; justify-content: center; align-items: center; font: 900 18px/28px "museo"; text-transform: uppercase;}
.transports .texte                      	{ position: relative;}
.transports .texte .row                   	{ max-width: 560px; padding-top: 40px; display: inline-block;}
.transports .texte p                     	{ margin: 20px 0;}
.transports .texte .link 					{ margin-top: 10px;}

.transports.reverse .photos       			{ grid-area: 1 / 2;}
.transports.reverse .photos :nth-child(2) 	{ order: 3;}
.transports.reverse .texte        			{ grid-area: 1 / 1; text-align: right;}
.transports.reverse .texte .row    			{ text-align: left;}

@media (max-width:1500px) {
.transports:before                       	{ width: 200vw; height: 100%; position: absolute; left: -50vw; top: 0; background: #fff; content: "";}
}
@media (max-width:1200px) {
.transports                       			{ margin: 80px 0; grid-gap: 60px;}
.transports .photos               			{ grid-gap: 10px;}
.transports .photos :nth-child(3) 			{ height: 200px;}
.transports .photos span          			{ font-size: 16px; line-height: 26px;}
.transports .texte .row                   	{ padding: 0;}
}
@media (max-width:1000px) {
.transports	                        		{ grid-template-columns: 1fr; grid-gap: 35px; margin: 80px 0;}
.transports .photos :nth-child(3) 			{ height: 250px;}
.transports .texte .row                  	{ max-width: none;}
.transports .texte .link                   	{ width: 100%; text-align: center;}
.transports.reverse .photos        			{ grid-area: 1;}
.transports.reverse .texte           		{ grid-area: 2;}
}
@media (max-width:700px) {
.transports                               	{ grid-gap: 25px; margin: 60px 0;}
.transports .photos                       	{ display: block;}
.transports .photos :nth-child(2), 
.transports .photos :nth-child(3) 			{ display: none;}
.transports .texte p                     	{ margin: 15px 0;}
.transports .texte .link 					{ margin-top: 20px;}
}


/***** section logistique  *****/ 
.logistique                      			{ position: relative;}
.logistique .titre_main               		{ margin-bottom: 35px;}
.logistique .grid                   		{ position: relative; z-index: 5; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px;}
.logistique .grid .item                		{ padding: 50px 40px 100px 40px; background: #fff; box-shadow: 0 0 30px rgba(0,0,0,0.1); position: relative;}
.logistique .grid .item img            		{ margin-bottom: 10px;}
.logistique .grid .item .sous_titre    		{ margin-bottom: 10px;}
.logistique .grid .item p              		{ margin-bottom: 25px;}
.logistique .grid .item .link          		{ position: absolute; left: 40px; bottom: 40px;}

@media (max-width:1200px) {
.logistique                      			{ padding: 60px 0 80px 0;}
.logistique:before                      	{ width: 200vw; height: 100%; position: absolute; left: -50vw; top: 0; background: #06205c; z-index: -1; content: "";}
.logistique:after                      		{ width: 5vw; height: 5px; position: absolute; right: -5vw; bottom: 80px; background: #06205c; z-index: 5; content: "";}
.logistique ::-webkit-scrollbar 			{ height: 5px;}
.logistique ::-webkit-scrollbar-thumb		{ background-color: #a8353a;}
.logistique .titre, 
.logistique .titre_main               		{ color: #fff;}
.logistique .grid                   		{ width: 95vw; grid-gap: 20px; padding: 0 5vw 50px 0; overflow-x: scroll;}
.logistique .grid .item                		{ padding: 50px 40px 100px 40px; background: #fff; box-shadow: none; width: 400px;}
}
@media (max-width:1000px) {
}
@media (max-width:700px) {
.logistique                      			{ padding: 45px 0 60px 0;}
.logistique:after                      		{ width: 6vw; right: -6vw; bottom: 60px;}
.logistique ::-webkit-scrollbar 			{ height: 4px;}
.logistique .titre_main               		{ margin-bottom: 25px;}
.logistique .grid                   		{ grid-gap: 10px; padding: 0 6vw 30px 0;}
.logistique .grid .item p              		{ margin-bottom: 15px;}
.logistique .grid .item                		{ padding: 30px 25px 90px 25px; width: 88vw; max-width: 400px;}
.logistique .grid .item .link          		{ width: auto; left: 25px; bottom: 25px; right: 25px;}
}


/***** section map *****/
.map                                        { position: relative; margin: 100px 0; line-height: 0;}
.map .img                                   { width: 100%; height: 500px; object-fit: cover; position: relative; z-index: 1;}
.map .shape_blue                            { position: absolute; bottom: 0; right: 60%; width: 50vw; height: auto; display: block; z-index: -1;}
.map iframe                                 { width: 100%; height: 45vh; min-height: 450px; display: block; filter: grayscale(100%); position: relative; border: none;}

@media (max-width:1200px) {
.map                                        { display: none;}
}


/***** section a propos *****/
.apropos                                    { display: grid; grid-template-columns: 420px auto; align-items: start; grid-gap: 80px; margin: 120px 0;}
.apropos .photo img                         { width: 100%; height: auto;}

@media (max-width:1200px) {
.apropos                                    { margin: 100px 0; grid-gap: 60px;}
}
@media (max-width:1000px) {
.apropos                                    { grid-template-columns: 1fr; margin: 80px 0;}
.apropos .photo                             { display: none;}
}
@media (max-width:700px) {
.apropos                                    { display: block; margin: 45px 0 60px;}
}


/* table plus */
.table_plus 								{ position: relative; margin-top: 30px;} 
.table_plus .titre_plus 					{ position: relative; cursor: pointer; padding: 20px 80px 20px 30px; background: #a8353a; color: #fff; font-size: 16px; font-weight: 300; margin-top: 10px; transition: all 400ms ease-in-out;}
.table_plus .titre_plus:before				{ content: ""; display: block; position: absolute; width: 20px; height: 2px; top: 50%; margin-top: -1px; background: #fff; right: 30px;}
.table_plus .titre_plus:after				{ content: ""; display: block; position: absolute; width: 2px; height: 20px; top: 50%; margin-top: -10px; background: #fff; right: 39px;}
.table_plus .titre_plus.active:after 		{ display: none;}
.table_plus .hide 							{ padding: 20px 50px 40px 50px; display: none;}
.table_plus .hide p 						{ margin-top: 10px;}

@media (max-width:1200px) {
.table_plus .titre_plus 					{ padding: 15px 80px 15px 30px;}
.table_plus .hide 							{ padding: 15px 30px 35px 30px;}
}
@media (max-width:700px) {
.table_plus 								{ margin-top: 20px;} 
.table_plus .titre_plus 					{ font-size: 14px; line-height: 24px; padding: 15px 75px 15px 25px;}
.table_plus .titre_plus:before				{ right: 25px;}
.table_plus .titre_plus:after				{ right: 34px;}
.table_plus .hide 							{ padding: 15px 10px 20px 10px;}
}


/***** section contact *****/
.contact                            		{ background: url(../images/shape_footer.svg) center bottom no-repeat #051d54; padding: 120px 0 100px 0; position: relative;}
.contact .scroll					        { background: url(../images/scrolltop.svg) 50% 48% no-repeat #fff; margin: 0;  width: 60px; height: 60px; display: inline-block; vertical-align: top; border-radius: 50%; position: absolute; right: 0; top: 0;}
.contact .content_form              		{ max-width: 780px; margin: 0 auto;}
.contact .formulaire .titre         		{ color: #fff; text-align: center;}
.contact .formulaire .titre_main    		{ color: #fff; text-align: center; font-weight: 300; margin-bottom: 45px;}

@media (min-width:1201px) {
.contact .scroll:hover		                { background: url(../images/scrolltop_white.svg) 50% 48% no-repeat #a8353a;}
}
@media (max-width:1200px) {
.contact                            		{ background: #06205c; padding: 80px 0 60px 0;}
.contact .scroll                            { display: none;}
.contact .formulaire .titre_main    		{ margin-bottom: 40px;}
}
@media (max-width:1000px) {
.contact                            		 { padding-top: 80px;}
}
@media (max-width:700px) {
.contact                            		{ padding: 45px 0 50px;}
.contact .formulaire .titre                 { text-align: left;}
.contact .formulaire .titre_main            { text-align: left; margin-bottom: 25px;}
}



/***** footer *****/
.footer										{ width: 100%; position: relative; padding-top: 60px; background: #051d54; color: #fff; font-size: 0; text-align: center;}
.footer .bloc_footer .titre_main 			{ font-size: 30px; line-height: 30px; font-weight: 900; text-transform: uppercase; color: #a8353a;}
.footer .bloc_footer p						{ font-size: 18px; font-weight: 500; margin-top: 10px;}
.footer .bloc_footer p a					{ color: #fff;}

.footer_bottom   							{ padding: 20px 0; line-height: 0; margin-top: 35px;}
.footer_bottom li 							{ display: inline-block; font-size: 12px; line-height: 20px; margin-right: 25px; letter-spacing: 0.2px; position: relative;}
.footer_bottom li a 						{ color: #fff;}
.footer_bottom li:after						{ width: 1px; height: 9px; content: ""; position: absolute; right: -13px; top: 5px; background: #a8353a;}
.footer_bottom li:last-child  				{ margin: 0;}
.footer_bottom li:last-child:after 			{ display: none;}

.toponweb									{ display: block; z-index: 85; position: fixed; right: 0; bottom: -65px; transition: bottom 400ms ease-in-out;}
.toponweb span								{ width: auto; height: 60px; display: block; padding: 20px; background: #fff;}
.toponweb img								{ width: 74px; height: auto; display: block; margin: 0 auto; filter: invert(1); transition: opacity 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: #a8353a;}
.toponweb:hover img							{ opacity: 0.5;}
}
@media (max-width:1200px) {
.footer										{ background: #041640;}
.footer .bloc_footer p						{ font-size: 16px; line-height: 26px;}
.toponweb                           		{ position: absolute;}
}
@media (max-width:700px) {
.footer										{ padding-top: 50px; text-align: center;}
.footer .bloc_footer .titre_main 			{ color: #fff; font-size: 20px; line-height: 30px; margin-bottom: 10px;}
.footer .bloc_footer 						{ margin: 0;}
.footer .bloc_footer p              		{ font-size: 16px; line-height: 24px;}
.footer_bottom 	 							{ text-align: center; padding: 0 0 100px 0;}
.footer_bottom li 							{ display: block; margin: 2px 0; line-height: 28px;}
.footer_bottom li:after						{ display: none;}
.toponweb									{ width: 100%;}
.toponweb img								{ width: 68px;}
}