/* ---------------------------------------------------------
--- Convention de nomage

	m-blockName			
	m-blockName__element
	m-blockName__element--modifier

	Préfixe :	
		l-		=	layout
		c-		=	composant
		m-		=	module
		o-		=	objets (non modifiable)
		u-		=	utilities (non modifiable)
		th-		= 	Thème
		is- 	=  	Etat
		js-		=	Javascript interaction
		hav-	=	contient un element spécifique
	+ class atomic
		w-		=	width
	
*/
/* ---------------------------------------------------------
--- Optimisation */

	*,
	*:before,
	*:after {
	  -webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	          box-sizing: border-box;
	}

	html { -webkit-tap-highlight-color: transparent; }
	
	body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
	
	html * {
		font-family: inherit;
		line-height: inherit;
		color: inherit;
		margin: 0;
	}
	
/*
	* + * {
		margin-top: 1.5em;
	}
*/
	
	body, br, li, dt, dd, th, td, option {
		margin-top: 0;
	}
			
	table { 
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
	}
		
	audio,
	canvas,
	iframe,
	img,
	svg,
	video { vertical-align: middle; }	
		
	img { max-width: 100%; }
	
	::-moz-selection {
	    background: #1A171B;
	    color: #FFF;
	    text-shadow: none;
	}	
	::selection {
	    background: #1A171B;
	    color: #FFF;
	    text-shadow: none;
	}

	body > script { display: none !important; }
	
	
/* form */

	button,
	[role="button"],
	input,
	label,
	select,
	summary,
	textarea {
	  	-ms-touch-action: manipulation;
	      	touch-action: manipulation;
	}
	
	button[disabled],
	html input[disabled] { cursor: default; }

	fieldset,
	legend {
	  	padding: 0;
	  	border: 0;
	}
		
	input,
	button,
	select,
	textarea { border-radius: 0; }
	
	textarea { resize: vertical; }
		
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	textarea,
	select { 
		width: 100%;
		font-size: 16px;
		border: 1px solid currentColor; 
	}

	




/* ---------------------------------------------------------
--- Base */

 	html { 
		font-size: .625em; 
		font-size: calc(1em * .625); 
	}
	
	body { 
		font-family: 'DIN-Light';
		font-size: 1.2em; 
		line-height: 1.16666667em;
	}
	
	.ft-text { 
		font-family: 'DIN-Light';
		font-size: 1.1em; 
		line-height: 1.4;
	}
	
	h1, .ft-title {
		font-family: 'DIN-Bold';
		font-size: 1.5em;
		font-weight: normal;
		font-style: normal;
		line-height: 1.16666667em;
	}
	h2, .ft-subtitle {
		font-family: 'DIN-Bold';
		font-size: 1.16666667em;
		font-weight: normal;
		font-style: normal;
		line-height: 1.16666667em;
	}
	h3, h4, h5, .ft-lead {
		font-family: 'DIN-Light';
		font-size: 1.08333333em;
		font-weight: normal;
		font-style: normal;
		line-height: 1.16666667em;
	}
	
	.ft-light { font-family: 'DIN-Light'; }
	
	.ft-title + .ft-subtitle,
	.ft-title + .ft-lead,
	.ft-subtitle + .ft-lead { margin-top: .2em; }
	
	small, .ft-small {
		font-size: .85714286em; 
	}
	
	strong, b { 
		font-family: 'DIN-Bold';
		font-weight: normal;
		font-style: normal;
	}
	
	[href^="http://"]:after,
	[href^="https://"]:after {
		display: inline-block;
		/* ---------------------------------------------------------

		content: "\f08e";
		--- Layout -- */
		font-family: 'FontAwesome';
		font-size: .75em;
		padding-left: .5em;
	}
	
	body p { margin: 1em 0; }
	

/* ---------------------------------------------------------
--- Layout -- */

	.l-wrapper { 
		max-width: 1024px;
		padding-left: 3vw;
		padding-right: 3vw;
		margin-left: auto;
		margin-right: auto; 
	}
	
	.l-header {
		position: fixed; top: 0; right: 0; left: 0;
		height: 110px;
		background-color: #FFF;	
		z-index: 3;
	}
	
		.l-wrapper--menu { 
			overflow: hidden;
			max-height: 0;
			margin-top: 0px;
			background-color: #FFF;
		}
		.l-wrapper--menu.js-open { 
			height: calc(40vh - 110px);
			max-height: none; 
			padding: 6vw 3vw;
		}
	
	.l-main { 
		padding-top: 200px; 
		padding-bottom: 3rem;
	}
	
		.l-wrapper--submenu {
			overflow: hidden;
			max-height: 0;
		}
		.l-wrapper--submenu.js-open { max-height: none; }
	
@media only screen and (min-width: 60em) {
	
	.l-header { 
		position: relative; top: auto; right: auto; left: auto; 
		height: auto;
	}
	
	.l-wrapper--menu { 
		max-height: none;
		padding: 0;
		margin-top: 3em;
		margin-right: 0;
		margin-bottom: 3em;
		margin-left: -2em;
		overflow: hidden;
	}
	
		.l-wrapper--menu > * { 
			display: block;
			float: left;
		}
			.l-wrapper--menu > * > * {
				display: inline-block;
			}
			
	.l-main { padding-top: 0; }
	
		.l-wrapper--submenu {
			max-height: none;
		}
}

		
		.l-mansory {
			margin-left: -1em;
			margin-right: -1em;
		}
			.l-mansory__item { 
				display: inline-block; /* avec column */
				width: 100%;
				padding: 0 1em;
			}
			
@media only screen and (min-width: 22.5em) {
	
	.l-mansory { 
		-moz-column-count: 2;
		-moz-columns: 2;
		-webkit-columns: 2;
		columns: 2;
	}
}			
@media only screen and (min-width: 48em) {
	
	.l-mansory { 
		-moz-column-count: 3;
		-moz-columns: 3;
		-webkit-columns: 3;
		columns: 3;
	}
}
@media only screen and (min-width: 64em) {
	
	.l-mansory { 
		-moz-column-count: 4;
		-moz-columns: 4;
		-webkit-columns: 4;
		columns: 4;
	}
}		
					
	

/* ---------------------------------------------------------
--- Composants -- */

	.c-toggleMenu { 
		position: absolute; top: 80px; right: 0; left: 0;
		display: block;
		height: 30px;
		z-index: 2;
		font-size: 1.6rem;
		line-height: 30px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
	}

	.c-toggleSubmenu { 
		position: fixed; top: 110px; right: 0; left: 0;
		display: block;
		height: 30px;
		z-index: 2;
		font-size: 1.6rem;
		line-height: 30px;
		text-align: center;
		text-decoration: none;
		background-color: #FFF;
	}
	.c-toggleSubmenu span:after {
		display: inline-block;
		content: '\276F';
		margin-left: .5em;
		transform: rotate(90deg);
		color: #6B6B6B;
	}
	.c-toggleSubmenu.is-active span:after { 
		transform: rotate(-90deg)  translateY(3px); 
	}

	.c-sep { 
		display: inline-block;
		width: 1px;
		height: 26px;
		border-right: 1px solid currentColor;
		transform: skewX(-18deg);
	}

@media only screen and (max-width: 59.99em) {
	
	.m-menu .c-sep { display: none; } 
	
	.m-logo .c-sep { height: 20px; }
}

/* ---------------------------------------------------------
--- modules */

/* Header */

	nav ul {
		padding-left: 0;
		list-style: none;
	}
	
	nav a,
	.m-logo a { 
		text-decoration: none; 
	}
	
	nav a.is-active,
	.m-logo a.is-active { 
		font-family: 'DIN-Medium';
		color: #005578; 
	}
	
	
	.m-logo {
		position: absolute; top: 0; right: 0; left: 0;
		padding: 1em 1em .5em;
		text-align: center;
	}
	
		
		.m-logo__title {
			display: inline-block;
			border-bottom: 1px solid currentcolor;
			font-family: 'DIN-Bold';
		}
		
		.m-logo__lead { 
			display: block;
			padding-top: .5em; 
			font-family: 'DIN-Light'; 
		}
		
			.m-logo__lead > * { display: inline-block; }
		
			.m-logo__col:first-child {
				text-align: right; 
				padding-right: .5em;
			}
			.m-logo__col:last-child { 
				text-align: left;
				text-indent: .25em; 
			}
			
				.m-logo__col:nth-child(1) > a > span {
					display: block; 
					margin-right: -.5em;
				}
			
		.m-logo__link {
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			z-index: 1;
		}
		
	.m-menu {
/*
		overflow: hidden;
		max-height: 0;
*/
	}
	
	.m-menu [lang|="en"],
	.m-logo [lang|="en"] { color: #878787; }
	
@media only screen and (max-width: 59.99em) {
	
	
	.m-logo__lead { font-size: 1.1rem; }
	
	.m-menu__item { 
		font-size: 1.6rem;
		line-height: 5rem;
		text-align: center;
	}
	.m-menu__item a { 
		display: inline-block; 
		line-height: 1;
	}
}	
	
@media only screen and (min-width: 60em) {
	
	nav a,
	.m-logo a { 
		font-size: 1.4rem; 
	}
	
	.m-logo { 
		position: relative; top: auto; right: auto; left: auto;
		width: 48%;
		padding: .5em 0;
	}
	
		.m-logo__title {
			font-family: 'DIN-Light'; 
			font-size: 4.3rem;
		}
		
		.m-logo__lead { 
			display: inline-block; 
			padding-top: 2.2em;
			margin-left: 0em;
		}
		
		
	.m-menu { 
		 
		padding-top: 2em;
	}
	.m-menu--primary { 
		text-align: right; 
	}
	
		.m-menu--primary .c-sep { 
			height: 50px; 
			margin-left: 1em;
		}
		.m-menu--secondary .c-sep { height: 46px; }
		
		.m-menu__item { line-height: 1.3;}
	
		.m-menu--primary .m-menu__item:nth-child(1) { margin-right: -1em; }
		.m-menu--primary .m-menu__item:nth-child(2) { margin-right: -.5em; }
		
		.m-menu--secondary .m-menu__item:nth-child(1) { padding-left: 1em; }
		.m-menu--secondary .m-menu__item:nth-child(2) { padding-left: .5em; }
		
}
		
		
/* Page */

	.m-page,
	.m-page__article { 
		overflow: hidden;
 	}
 	
 		.m-page__row { 
	 		overflow: hidden; 
	 		margin-left: -3rem;
	 		margin-right: -3rem;
	 	}
 	
 		.m-page__col { 
	 		float: left;
	 		padding: 0 3rem; 
	 	}
	 	
	 	.m-page__menu { position: relative; }
 	
		.m-page__list {
			padding-top: 30px;
			padding-left: 0;
			list-style: none;
		}
 			
			.m-page__list a { text-decoration: none; }
			
			.m-page__list a:hover,
			.m-page__list a.is-active { color: #005578; }
			
			.m-page__list a.is-active h2 { font-family: 'DIN-Medium'; }
		
 			
		.m-page__article {
			padding: .5em 0; 
			border-top: 3px solid #1D1D1D;
		}
		.m-page__article--list {
			padding-top: 0; 
			border-top: none;
		}
			.m-page__article h1 { margin-top: .6em; }
			.m-page__article p { margin: 1em 0; }
			.m-page__article p:first-child { margin-top: 0; }
			
			
		.m-card {
			padding: .5em 0; 
			border-top: 3px solid #1D1D1D;
		}
		.m-card--list { border-top: 3px solid #9D9D9D; }
		.m-page__menu .m-card:nth-child(2) { border-top: 3px solid transparent }
		
		.m-card,
		.m-card__body { overflow: hidden; }
		
			.m-card__media {
				float: left;
				padding-right: 2em;
			}
			
				.m-page__article--list .m-card__header {
					padding-right: 2em;
				}
		
			.m-card__legend { 
				padding-top: .3em; 
				font-size: .8em;
			}
			
			
@media only screen and (max-width: 59.99em) {
	
	.m-page__menu.is-active + .m-page__article { max-height: 0; }
}	 			
@media only screen and (min-width: 60em) {
	
 		.m-page__menu {
	 		float: left;
	 		width: 47.333333%;
 		}
 			.m-page__list { 
	 			padding-top: 0;
	 			padding-right: 2em;
	 		}
	 		.m-page__menu .m-page__list { max-width: 455px; }
	 		.m-page__article--list .m-page__list,
	 		.m-page__col .m-page__list { padding-right: 0; }
	 		
	 		.m-page__list--2col {
		 		display: -webkit-box;
		 		display: -ms-flexbox;
		 		display: flex;
		 		-ms-flex-wrap: wrap;
		 		    flex-wrap: wrap;
		 		-webkit-box-pack: justify;
		 		    -ms-flex-pack: justify;
		 		        justify-content: space-between;
	 		}
	 		.m-page__list--2col > * { -webkit-box-flex: 0; -ms-flex: 0 1 48%; flex: 0 1 48%; }
} 		

	.m-fields { 
		position: relative;
		padding-left: 0;
		margin-top: 1em;
		list-style: none;
	}

/* ---------------------------------------------------------
--- Interactions -- */

	.js-accordion:not(.is-active):hover { background-color: #eee;}
	.js-accordion.no-toggle:hover { background-color: transparent; }

	.js-accordion__bt { 
		position: relative;
		cursor: pointer; 
	}
	.js-accordion__bt:not(.no-toggle):after {
		position: absolute; top: 0; right: .3em;
		display: block;
		font-size: 1.6em;
		z-index: 1;
		content: '\002B';
	}
	.js-accordion__bt.is-active:after {
		right: .15em;
		content: '\2212';
	}
	.js-accordion__bt.no-toggle { cursor: default; }
	
	.js-accordion__content { 
		 overflow: hidden;
		 max-height: 0;
	}
	
	.js-accordion__bt.no-toggle + .js-accordion__content,
	.js-accordion__bt.is-active + .js-accordion__content {
		max-height: none;
		padding-top: 1em;
		padding-bottom: 2em;
	}
		

	
/* ---------------------------------------------------------
--- 3rd Party
	Slider \ galerie \ Tooltip... 
	Ajout de la class .hav-3rdpEl sur le parent. */
	


	
	


/* ---------------------------------------------------------
--- Class Atomic -- */
	
	.w-25 { width: 25% }
	.w-50 { width: 50% }
	
@media only screen and (min-width: 48em) {
	
	.w-25--lg { width: 25% }
	.w-50--lg { width: 50% }
	
	.without-aside { padding-left: 33.333333%; }

}


/* ---------------------------------------------------------
--- Classes utilitaires -- */

/* texte */   
   	
   .u-textCenter 	{ text-align: center; }
   .u-textLeft		{ text-align: left; }
   .u-textRight		{ text-align: right; }
   .u-textUppercase { text-transform: uppercase; }
   
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode */
   .u-verticalLR	{ writing-mode: vertical-lr; }
   

/* flux */ 

	.u-fl { float: left; }
	.u-fr { float: right; }	
	
	.u-clearfix:before,
	.u-clearfix:after {
	    content: " "; 
	    display: table; 
	}
	.u-clearfix:after { clear: both; }
	
	.u-pt-1 { padding-top: 1em; }
	.u-pr-1 { padding-bottom: 1em; }
	.u-pl-1 { padding-left: 1em; }
	

/* visibilité */

	.u-visible--lg { display: none; }
	
@media only screen and (min-width: 60em) {
	
	.u-only--sm { display: none; }
	
	.u-visible--lg { display: block; }
}


	/* Hide visually and from screen readers */
	.u-hidden,
	.js-hidden { display: none !important; }
	
	/* Hide visually and from screen readers, but maintain layout */
	.u-invisible { visibility: hidden; }
	
	/* Hide only visually, but have it available for screen readers: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
	.u-visuallyhidden {
	    border: 0;
	    clip: rect(0 0 0 0);
	    height: 1px;
	    margin: -1px;
	    overflow: hidden;
	    padding: 0;
	    position: absolute;
	    width: 1px;
	}
	
	/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: https://www.drupal.org/node/897638 */
	.u-visuallyhidden.focusable:active,
	.u-visuallyhidden.focusable:focus {
	    clip: auto;
	    height: auto;
	    margin: 0;
	    overflow: visible;
	    position: static;
	    width: auto;
	}


/* ---------------------------------------------------------
--- Objets : */

	/* https://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html */
	.o-bfc { overflow: hidden; }
	
	
	.o-media, 
	.o-media__content { overflow: hidden; }
	
	.o-media__img { float: left; }
	
	.o-media--inv .o-media__img { float: right; }
		
		
	/* flag object http://csswizardry.com/2013/05/the-flag-object/ */
	
	.o-flag {
		display: table;
		width: 100%; 
	}
	
		.o-flag__image, 
		.o-flag__body {
			display: table-cell;
			vertical-align: middle; 
		}
		
		.o-flag__body { width: 100%; }
		
		.o-flag--top 	.o-flag__image, 
		.o-flag--top 	.o-flag__body		{ vertical-align: top; }
		.o-flag--bottom	.o-flag__image, 
		.o-flag--bottom	.o-flag__body 		{ vertical-align: bottom; }
		
			

	.o-embed {
		display: block;
		overflow: hidden;
		position: relative;
		width: 100%;
		height: 0;
	}
	.o-embed--third 	{ padding-bottom : 33.33333%; }
	.o-embed--half 		{ padding-bottom : 50%; }
	.o-embed--16ninth	{ padding-bottom : 56.25%; } /* 9:16 = 0.5625 > 56.25% */
	.o-embed--4thirds 	{ padding-bottom : 75%; }
	.o-embed--equal		{ padding-bottom : 100%; }		
	
		.o-embed iframe {
		    position: absolute;
		    top:0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		}


/* ---------------------------------------------------------
---  Viewport */
	
	/* corrige un bug windows 8  quand le Sanp Mode est inférieur à 400px; */
	/* rempalce la balise viewport dans le futur */

	@-webkit-viewport {
		width: device-width;
		zoom: 1.0;
	}
	@-moz-viewport {
		width: device-width;
		zoom: 1.0;
	}
	@-ms-viewport {
		width: device-width;
		zoom: 1.0;
	}
	@-o-viewport {
		width: device-width;
		zoom: 1.0;
	}
	@viewport {
		width: device-width;
		zoom: 1.0;
	}


/* ---------------------------------------------------------
---  Print  */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; 
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited { text-decoration: underline; }

    a[href]:after { content: " (" attr(href) ")"; }

    abbr[title]:after { content: " (" attr(title) ")"; }

    a[href^="#"]:after,
    a[href^="javascript:"]:after { content: ""; }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead { display: table-header-group; }

    tr,
    img { page-break-inside: avoid; }

    img { max-width: 100% !important; }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 { page-break-after: avoid; }
}