@charset "UTF-8";
@import url("font-awesome.css");
/* CSS Document */

/* -------------------------------------------------------------------------------
	
	0. Typographie
    1. Général
    2. Nav
    3. Footer
    4. etc
	5. etc
	6. etc
    
------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------*/
/* COULEURS

vert gris 3454740
/* ------------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------------- */
/*  0. Typographie
/* ------------------------------------------------------------------------------- */


@font-face {
    font-family: 'bebas';
    src: url('../polices/BebasNeue-webfont.eot');
    src: url('../polices/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../polices/BebasNeue-webfont.woff') format('woff'),
         url('../polices/BebasNeue-webfont.ttf') format('truetype'),
         url('../polices/BebasNeue-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;}



/* ------------------------------------------------------------------------------- */
/*  1. Général
/* ------------------------------------------------------------------------------- */

body {
	
	font-size:100%;
	text-align:left;
	max-width:100%;
	width:100%;
	/*overflow-x:hidden;*/
}

i {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}



/* ------------------------------------------------------------------------------- */
/*  2. FOND
/* ------------------------------------------------------------------------------- */

div.fond {
	width:100%;
	height:100%;
	position:absolute;
	z-index:0;
	top:0;
	left:0;
	overflow:hidden;
	text-align:center;
}

	div.fond img {
		width:100%;
		height:auto;
	}
	
	div.fond img{position:absolute;z-index:1}
	div.fond img.active{z-index:3}
	
/* ------------------------------------------------------------------------------- */
/*  3. HEADER & TOP
/* ------------------------------------------------------------------------------- */

div.top nav ul {  }

div.top nav ul li {
	display:inline;
	float:left;
	font-family:bebas, 'Arial Narrow', Arial, sans-serif;
	font-size:16px;
	line-height:18px;
	letter-spacing:0.08em;
	position:relative;
	top:0;
	vertical-align:top;
}

	div.top nav ul li.logo { width:150px; }
	div.top nav ul li.un { width:260px;padding:30px 0 0 0; }
	div.top nav ul li.deux { width:115px; padding:30px 0 0 0; }
	div.top nav ul li.trois { width:170px; padding:30px 0 0 0;}
	div.top nav ul li.quatre { width:150px; padding:30px 0 0 0; }

	div.top nav ul li i { float:left; font-size:24px; color:#666; margin:0 6px 20px 0; position:relative; top:3px; }
	div.top nav ul li a { color:#fff; text-decoration:none; }


header.home {
	/*height:394px;*/
	border-bottom:1px solid #454740;
	position:relative;
	z-index:2;	
}

	header.home div.bande {
		height:54px;
		background-color:#454740;
		margin:0 0 163px 0;
		text-align:center;
		padding:16px 0 0 0;
		font-size:16px;
		color:#bbb9a7;
		font-family:bebas, 'Arial Narrow', Arial, sans-serif;
		letter-spacing:0.1em;
	}
	
	header.home div.bordure-pointillee {
		border-top:2px dotted #454740;
		border-bottom:1px solid #454740;
		height:2px;
	}
	
	header.home div.logo {
		position:absolute;
		left:50%;
		top:45px;
		margin:0 0 0 -140px;
		z-index:2;
	}
	
	header.home nav { background-color:rgba(251,248,221,0.75); }
	
	header.home nav ul {
		text-align:center;
		font-family:bebas, 'Arial Narrow', Arial, sans-serif;
	}
	
	header.home nav ul li {
		display:inline-block;
		width:200px;
		vertical-align:middle;
		border-right:1px solid #454740;
		/*background-color:rgba(255,255,255,0.8);*/
	}
		header.home nav ul li.premier { height:130px; padding:20px 0 10px 0; }
		header.home nav ul li.deuxieme { height:80px; padding:40px 0; }
		header.home nav ul li.troisieme { height:80px; padding:40px 0; }
		header.home nav ul li.quatrieme { height:80px; padding:40px 0; border-right:none; }
	
	header.home nav ul li span {
		display:block;
	}
	
	header.home nav ul li a {
		color:#454640;
		text-decoration:none;
	}
	
	
	
		header.home nav li span.lignes { display:block; background-image:url(../images/boite-lignes.png); background-position:center center; background-repeat:no-repeat;}
		header.home nav li span.blanc { color:#fff; padding:4px 25px; display:inline-block; background-image:url(../images/boite-menu.png); background-size:100% 100%; letter-spacing:0.1em; }
		header.home nav li span.un { font-size:36px; line-height:34px; }
		header.home nav li span.deux { font-size:28px; line-height:24px; }
		header.home nav li span.trois { font-size:22px; line-height:20px; }
		header.home nav li span.trois { font-size:18px; line-height:16px; }


/* ------------------------------------------------------------------------------- */
/*  3. FOOTER
/* ------------------------------------------------------------------------------- */

footer, footer#home {
	font-family:bebas, 'Arial Narrow', Helvetica, sans-serif;
	font-size:14px;
	letter-spacing:0.1em;
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	padding:0 0;
	text-align:center;
	color:#fff;
	/*z-index:2;*/
	z-index:10000 !important;
}

	footer#interieur {
		font-family:bebas, 'Arial Narrow', Helvetica, sans-serif;
		font-size:14px;
		letter-spacing:0.1em;
		position:relative;
		width:100%;
		padding:0 0;
		text-align:center;
		color:#fff;
	}

	footer ul {
		text-align:center;
	}
	
	footer ul li {
		display:inline;
	}
	
	footer ul li a {
		display:inline-block;
		color:#fff;
		text-decoration:none;
		margin:0 6px;
	}
	
	footer ul li a:hover { color:#979b8e; }
	
	footer#home div#logos {
		background-image:url(../images/bande-footer-home.png);
		background-position:center center;
		height:200px;
		padding:10px 0;
		text-align:center;
	}
	
	footer div#bande-noire,
	footer#home div#bande-noire {
		background-color:#000;
		padding:20px 0;
	}
	
	div.back-footer {
		position:fixed;
		left:50%;
		bottom:0;
		z-index:2;
		padding:8px;
		background-color:#000;
		text-align:center;
		font-size:16px;
		color:#bbb9a7;
		font-family:bebas, 'Arial Narrow', Arial, sans-serif;
		letter-spacing:0.1em;
		width:100px;
		margin:0 0 0 -58px;
	}
	
	span.scroll-to-top {
		position:fixed;
		bottom:0;
		height:36px;
		right:50%;
		margin:0 -492px 0 0;
		padding:20px 10px 0 10px;
		background-color:#7997AB;
		color:white;
		font-size:16px;
		/* jquery css */
		display:none;
	}
	
		span.scroll-to-top i {
			margin:0 8px 0 0;
		}
	
/* ----------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */
/*  ÉLÉMENTS COMMUNS
/* ----------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */

.space40 {
		height:40px;
}
div.top {
	height:90px;
	background-color:#000;
	border-bottom:2px solid #333333;
	position:relative;
	z-index:1;
}

div.inner {
	width:920px;
	margin:0 auto;
}

div.ariane {
	font-family:Arial, Helvetica, sans-serif;
	font-size:90%;
	color:#fff;
	margin:0 0 40px 0;
}

	div.ariane a { color:#fff; text-decoration:none; }
	div.ariane a:hover { color:#7998ac; }
	
	h1, h2, h3 {
		font-family:bebas, 'Arial Narrow', Arial, sans-serif;
		color:#fff;
		line-height:100%;
		font-weight:normal;
		letter-spacing:0.025em;
	}
	
	h1 { font-size:300%; color:#fff; }
	h1.blue { color:#7997ab; }
	h2 { font-size:230%; color:#7997ab; margin:0 0 0 0; padding:20px 0 0 20px; position:relative; }
		h2 span { display:block; color:#fff; font-size:80%; }
	h3 { font-size:120%; font-family:Arial, Helvetica, sans-serif; color:#000; margin:0 0 20px 0; text-transform:uppercase; padding:20px 0 0 20px; }
	
	h3.generique { color:#7997ab; padding:10px 0 0 0; }
	
	body.production h2, body.batisseurs h2, body.origine h2 { padding:0 0 0 0; margin:0 0 20px 0;  }

	
div.bloc-h1 {
	margin:0 0 20px 0;
	height:140px;
}

	div.bloc-h1 h1 {
		width:370px;
		padding:0 30px 0 0;
		float:left;
		font-weight:normal;
		letter-spacing:0.025em;
	}
	
		div.h1-origine h1 { font-size:250%; }
	
	div.bloc-h1 aside {
		float:right;
		width:510px;
		font-family:Arial, Helvetica, sans-serif;
		color:#fff;
		font-size:90%;
		line-height:140%;
	}
	
	.souligne {
		border-bottom:1px solid #fff;
		padding:0 0 2px 0;
		font-style:italic;
	}
	
	



/* ----------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */
/*  PAGES PRODUCTION
/* ----------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */

body {
	backgound-color:#000;
	color:#fff;
	background-position:center top;
	background-repeat:no-repeat;
	background-attachment:fixed;
}

	body.production { background-image:url(../images/production-fond.jpg); }
	body.origine { background-image:url(../images/origine-fond.jpg); }
	body.batisseurs { background-image:url(../images/batisseurs-fond.jpg); }


header.production {
	background-color:#000;
	height:260px;
	position:relative;
	z-index:100;
	padding:20px 0 0 0;
}

	
div#wrapper {
	width:920px;
	padding:40px 40px 60px 40px;
	background-color:#000;
	margin:0 auto;
	position:relative;
}


nav.menu-section-production ul li {
	display:inline-block;
	font-family:bebas, 'Arial Narrow', Arial, sans-serif;
	width:350px;
	position:relative;
	z-index:100;
	margin:0 30px 0 0;
}


	nav.menu-section-production ul li span,
	nav.menu-section-origine ul li span {
		border-radius:4px;
		border:1px solid #627e95;
		padding:5px 9px;
		font-size:130%;
		letter-spacing:0.025em;
		background: rgba(100,128,145,1);
		background: -moz-linear-gradient(top, rgba(100,128,145,1) 0%, rgba(170,196,212,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(100,128,145,1)), color-stop(100%, rgba(170,196,212,1)));
		background: -webkit-linear-gradient(top, rgba(100,128,145,1) 0%, rgba(170,196,212,1) 100%);
		background: -o-linear-gradient(top, rgba(100,128,145,1) 0%, rgba(170,196,212,1) 100%);
		background: -ms-linear-gradient(top, rgba(100,128,145,1) 0%, rgba(170,196,212,1) 100%);
		background: linear-gradient(to bottom, rgba(100,128,145,1) 0%, rgba(170,196,212,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#648091', endColorstr='#aac4d4', GradientType=0 );
		display:inline-block;
		width:350px;
		position:relative;
		z-index:100;
	}
	
	

/*  **************************************************  */
/*    AJOUTÉ LE 2014/08/05 POUR CORRIGER LES MENUS     */
/*  **************************************************  */

	nav.menu-section-production ul li span:hover, 
	nav.menu-section-origine ul li span:hover {
		background:none;
		background-color:#666;
		color:#000;
		border:1px solid #666;

	}
	
	/* 19/08/2014 */
	nav.menu-section-production ul li div p a span, 
	nav.menu-section-origine ul li div p a span {
		background: rgba(255,255,255,0) !important;
		filter: -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
		border:0px solid #666 !important;

	}
	
	nav.menu-section-production ul li div p a span:hover, 
	nav.menu-section-origine ul li div p a span:hover {
		background:none !important;
		color:#a29e9e;
		border:0px solid #666 !important;

	}	
	
	
/*  **************************************************  */

	
	
	
	
		nav.menu-section-production ul li span i,
		nav.menu-section-origine ul li span i {
			margin:0 0 0 5px;
			color:#fff;
		}
		
		nav.menu-section-production ul li div,
		nav.menu-section-origine ul li div {
			position:absolute;
			top:30px;
			left:0;
			background-color:#565759;
			z-index:99;
			width:370px;
			padding:20px 0 20px 0;
			letter-spacing:0.1em;
			font-size:110%;
			/* css jquery */
			display:none;
		}
		
			
		
			nav.menu-section-production ul li div span,
			nav.menu-section-origine ul li div span {
				border-radius:0;
				border:none;
				padding:0 3px;
				font-size:95%;
				letter-spacing:0;
				background: none;
				display:inline;
			}
				
				
			
				nav.menu-section-production ul li div a,
				nav.menu-section-origine ul li div a {
					color:#fff;
					text-decoration:none;
					display:block;
					padding:4px 10px;
				}
				
				nav.menu-section-production ul li div a:hover, 
				nav.menu-section-origine ul li div a:hover {
					background-color:#444546;
					color:#a29e9e;
				}
				
				
				nav.menu-section-origine ul li {
					display:inline-block;
					font-family:bebas, 'Arial Narrow', Arial, sans-serif;
					width:270px !important;
					position:relative;
					z-index:100;
					margin:0 30px 0 0;
					vertical-align:top;
				}
				
					/*nav.menu-section-origine ul li.marine, nav.menu-section-origine ul li.sorel {  position:relative; top:-45px; }*/
					nav.menu-section-origine ul li.chantiers div { top:50px; }
				
				
				
				nav.menu-section-origine ul li div span { width:270px !important; }
				nav.menu-section-origine ul li span { width:270px !important; }
				nav.menu-section-origine ul li div { width:290px !important; }
				
				nav.menu-section-origine p { position:relative; padding:0 0 0 0; }
				nav.menu-section-origine p a { position:relative; padding:4px 0 4px 20px !important; }
				nav.menu-section-origine p a span { position:absolute; left:5px !important; }
				
		
		
		
		/* Preview loop */

		preview {
				width:290px;height:200px;display:block;
				background-size:cover;
				background-repeat:no-repeat;
		}
		/*		preview:hover, preview p:hover{
				cursor:pointer;
		}
			*/			
				
		section img{ height:auto; }

		
				
				
		/* images loop */
		
		section.production {
			overflow:visible;
		}


		
		section.production article {
			float:left;
			width:290px;
			height:200px;
			margin:0 16px 16px 0;
			position:relative;
			font-family:bebas, 'Arial Narrow', Arial, sans-serif;
			overflow:hidden !important;
		}
		
			section.production article div {
				position:absolute;
				top:0;
				left:0;
				width:290px;
				height:200px;
				background-color:rgba(0,0,0,0.55);
				color:#fff;
			}
			
			section.production article div p  {
				text-align:center;
				padding:90px 0 0 0;
				font-size:24px;
				text-transform:uppercase;
			}
			
			section.production article div span {
				position:absolute;
				right:0;
				top:0;
				width:34px;
				height:30px;
				font-size:16px;
				text-align:center;
				background-color:#000;
				color:#fff;
			}
			
			section.production article div i {
				position:absolute;
				right:0;
				top:30px;
				width:34px;
				font-size:16px;
				text-align:center;
				background-color:#000;
				padding:8px 0 8px 0;
			}
			
			section.production article div a {
				color:#fff;
				text-decoration:none;
			}
			
			/* TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST */
			
			section.production article.hover span,
			section.production article.hover2 span {
				position:absolute;
				right:0;
				top:0;
				width:34px;
				height:30px;
				font-size:16px;
				text-align:center;
				background-color:#000;
				z-index:10;
				/* z-index:1000; */
			}
			
			section.production article.hover i,
			section.production article.hover2 i {
				position:absolute;
				right:0;
				top:30px;
				width:34px;
				font-size:16px;
				text-align:center;
				background-color:#000;
				padding:8px 0 8px 0;
				z-index:10;
				/* z-index:1000; */
		}
			
				section.production article.hover p {
					display:none;
					position:absolute;
					text-align:center;
					top:90px;
					left:0;
					width:100%;
					font-size:24px;
					text-transform:uppercase;
					z-index:900;
					z-index:9;
			}
				
				section.production article.hover2 p {
					position:absolute;
					text-align:center;
					top:90px;
					left:0;
					width:100%;
					font-size:24px;
					text-transform:uppercase;
					z-index:900;
					z-index:9;
					display:block !important;
				}
				
					section.production article.hover2 p mark { 
						background-color:rgba(0,0,0,0.5);
						padding:0 !important;
						color:#fff !important;
					}
				
					section.production article.hover a,
					section.production article.hover2 a {
						position:absolute;
						top:0;
						left:0;
						width:290px;
						height:200px;
						z-index:10;
						/* z-index:1000; */
					}
				
			
			
			
			/* caption */
			
			/*span.lb-caption, span.lb-number {
				font-family:Arial, Helvetica, sans-serif;
				font-size:90%;
			}
			
			 span.lb-number { font-style:italic; }
			 */
			 
			 
div.pointille { border-top:1px dotted #fff; padding:20px 0;  height:1px; }


/* FOTORAMA */

	iframe { overflow:hidden; }


div.arriere-plan {
	width:100%;
	height:2000px;
	position:fixed;
	z-index:0;
	background-image:url(../../images/production-fond.jpg);
	background-size:cover !important;
	background-attachment:fixed;
	background-position:center top;
	overflow:hidden;

	
	
}


div.conteneur-overlay {
	width:100%;
	height:200%;
	position:fixed;
	z-index:10000;
	background-color:rgba(0,0,0,0.85);
	left:0;
	top:0;
	/* JQUERY CSS */
	display:none; /* none*/
	color:#fff;
}

div#fotorama{ min-height:1200px !important; }

div.fotorama {
	position:absolute;
	z-index:-1; /* -1 */
	left:50%;
	top:50%;
	margin:-300px 0 0 -454px;  /* top de -400px */
	
	/* FONTS */
	font-family:Arial, Helvetica, sans-serif;
	opacity:0; /* 0 */
	/* JQUERY CSS */
	
	height:700px !important;
	max-height:700px !important;
	overflow:hidden;
	
	display:block;
	
}

	div.fotorama__stage__shaft { width:806px !important; margin:0 auto !important; }

	#articlecontent{
		cursor:pointer;	
	}

	div.conteneur-contenu {
		width:806px;
		height:auto;
		float:left;
		position:relative;
		text-align:center;
	}

		div.conteneur-contenu img, div.conteneur-contenu video, div.conteneur-contenu iframe {
			border:3px white solid;
			border-radius:3px;
		}
		
		div.conteneur-contenu figcaption {
			position:relative;
			color:#fff;
			font-size:90%;
			line-height:140%;
			padding:10px 50px 0 0;
			text-align:left;
			z-index:12000;
		}

			div.conteneur-contenu figcaption p sup {
				font-size:85%;
			}
					
			div.conteneur-contenu figcaption p {
				margin:0 0 10px 0;
				font-size:90%;
			}
			
			div.conteneur-contenu figcaption p a {
				color:#999;
				text-decoration:none;
			}
			div.conteneur-contenu figcaption p a:hover {
				color:#fff;
				text-decoration:underline;
			}			
		
			aside.droite figure a{
				font-family:Arial, Helvetica, sans-serif;
				font-size:12px;
				padding-left:10px;
				color:#999;
				text-decoration:none;
			}
		
			aside.droite figure a:hover {
				color:#000;
				text-decoration:underline;
			}		
	
			aside.droite figcaption{
				font-style:italic;
			}		
	
	
		
/* FLECHES */

div.fotorama__arr--next, div.fotorama__arr--prev {
	top:250px !important;
}

	div.fotorama__arr--next { right:0 !important; }
	div.fotorama__arr--prev { left:0 !important; }

/* FERMER */

div.fermer2 {
	position:absolute;
	top:3px;
	right:0;
	padding:4px;
	/*background-color:#000;*/
	color:#fff;
	font-size:20px;
	width:24px;
	cursor:pointer;
	z-index:20000;
}

div.fermer {
	position:absolute;
	top:5px;
	left:50%;
	padding:4px;
	margin:0 0 0 430px;
	/*background-color:#000;*/
	color:#fff;
	font-size:20px;
	width:24px;
	cursor:pointer;
	z-index:20000;
	font-family:Arial, Helvetica, sans-serif;
	display:none;
	font-weight:normal;
	}

/* icone PDF */

	#ICONEPDF, #ICONEPDF2{
		position:relative;
		width:50px;
		height:42px;
		background-position:center center;
		background-repeat:no-repeat;
		background-size:40px 35px;
		border:0;
		background-image:url(../images/icone_PDF_1.png);
	}
	#ICONEPDF:hover{
		background-image:url(../images/icone_PDF_3.png);
		cursor:pointer;
		transition: background-image .1s ease-in-out;

	}	
#ICONEPDF2:hover{
		background-image:url(../images/icone_PDF_2.png);
		cursor:pointer;
		transition: background-image .1s ease-in-out;

	}	

			 

/* ----------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */
/*  PAGES CEREMONIES
/* ----------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */


body.ceremonie {
	background-color:#000;
	background-image:url(../images/ceremonie-fond.jpg);
	color:#fff;
	background-position:center top;
	background-repeat:no-repeat;
	overflow-x:hidden;
	max-width:100%;
}



header.ceremonie {
	background-color:#000;
	height:220px;
	position:relative;
	z-index:100;
	padding:20px 0 0 0;
}

body.ceremonie div#wrapper {
	width:1000px;
	background-color:#000;
	margin:0 auto;
	position:relative;
	padding:0 0 0 0;
}

	
div.ligne-de-temps {
	position:relative;	
	top:0;
	left:0;
	background-color:#dbdac6;  /*e7e6d2*/
	min-width:5500px;
	height:11000px;
min-height:11000px; /* a ajuster */
}

div.masque {
	position:fixed;
	background-color:rgba(0,0,0,0.6);
	width:1000px;
	top:0;
	left:50%;
	margin:0 0 0 -1500px; /* -1508px */
	z-index:1;
	height:100%;
	/*display:none;*/
}

div.masqueD {
	position:fixed;
	background-color:rgba(0,0,0,0.6);
	width:1000px;
	top:0; /* 30px */
	left:50%;
	margin:0 0 0 500px; /* modifie de 500 */
	margin:0 0 0 499px \9;
	z-index:1;
	height:100%;
	display:none;
}
	

	/* BOUTONS */
	i.fa-chevron-right, i.fa-chevron-left {
		position:absolute;
		bottom:0;
		height:50px;
		width:50px;
		text-align:center;
		color:#fff;
		font-size:36px;
		z-index:10000;
	}
	
		i.fa-chevron-right { right:20px; }
		i.fa-chevron-left { left:0; display:none;  }

	div.ligne-de-temps section { float:left; position:relative; }
	div.ligne-de-temps section.debut-1937 { width:750px; }
	div.ligne-de-temps section.deuxieme-guerre { width:1000px; }
	div.ligne-de-temps section.apres-guerre { width:1000px; }
	div.ligne-de-temps section.1965-1991 { display:inline-block; /*width:1000px;*/ }
	
		div.ligne-de-temps section p.titre {
			font-family:bebas, 'Arial Narrow', Arial, sans-serif;
			color:#fff;
			font-size:140%;
			/*background-color:#666;*/
			background-color:#000;
			border-bottom:6px solid #000;
			border-right:2px solid #e4e4e4;
			width:98%;
			overflow:hidden;
			height:20px;
			padding:0 0 0 2%;
		}
		
			div.ligne-de-temps section p.titre span { /*background-color:#000;*/ color:#555; padding:0 6px 0 6px; font-size:100%; word-break:break-all; }
		

	div.ligne-de-temps article {
		width:248px;
		float:left;
		height:11000px;
		min-height:11000px; /* a juster */
		overflow:hidden;
		border-right:2px dotted #333;
	}
	
	div.ligne-de-temps article header {
		/*border-right:2px dotted #e4e4e4;*/
		padding:10px;
		text-align:left;
		font-family:bebas, 'Arial Narrow', Arial, sans-serif;
		color:#fff;
		font-size:130%;
		background-color:#000;
		position:relative
	}
	
		div.ligne-de-temps article header i { margin:0 3px; color:#CCC; }
			div.ligne-de-temps article header i.fa-arrow-circle-left { position:absolute; right:10px; top:10px; display:none; }
	
	div.ligne-de-temps article div {
		position:relative;
		width:228px;
	}
	
		/* gauche */
		
		div.ligne-de-temps article div aside.gauche {
			position:relative;
			width:248px;
		}
		
			div.ligne-de-temps article div aside.gauche div {
				padding:10px;
				margin:0 0 5px 0;
				/*width:228px;*/
			}
			
				/* classe pour clic */
				.active { background-color:#accee5; }
		
		
		
		div.ligne-de-temps article div aside.gauche i.fa-plus,
		div.ligne-de-temps article div aside.gauche i.fa-arrows {
			position:absolute;
			top:0;
			left:0;
			padding:6px;
			background-color:#000;
			color:#fff;
			font-size:16px;
		}
		
			/*div.ligne-de-temps article div aside.gauche i.item1 { display:none; }*/
					
			div.ligne-de-temps article div aside.gauche i.fa-video-camera { margin:0 0 0 5px; }
	
		div.ligne-de-temps article div aside.gauche img {
			width:228px;
			max-width:228px;
			height:86px;
			margin:0 0 5px 0;
			border-bottom:10px solid #7998ac;
		}
		
		div.ligne-de-temps article div aside.gauche p.date {
			font-family:bebas, 'Arial Narrow', Arial, sans-serif;
			color:#7998ac;
			font-size:120%;
		}
		
		div.ligne-de-temps article div aside.gauche p.texte {
			font-family:'Arial Narrow', Arial, Helvetica, sans-serif;
			color:#000;
			font-size:80%;
			line-height:110%;
			text-transform:uppercase;
			margin:0 10px 0 0;
		}
	
		div.ligne-de-temps article div aside.gauche p.texte{
			top: -0.3em;
			font-size: 82%;
		}
		
		/*  droite */
	
		div.ligne-de-temps article div aside.droite {
			position:absolute;
			top:0;
			left:250px;
			width:748px;
			background-color:#e7e6d2;
			color:#000;
			height:11000px;
min-height:11000px;
		}
		
		div.ligne-de-temps article div aside.droite div.activites {
			width:748px;
			padding:0;
			margin:0;
			display:none;
		}
		
			div.ligne-de-temps article div aside.droite div.activite1 { display:block; }
		
		div.ligne-de-temps article div aside.droite div.activites p {
			padding:10px;
			background-color:#000;
			color:#fff;
			font-size:80%;
			line-height:140%;
			font-family:Arial, Helvetica, sans-serif;
		}

		div.ligne-de-temps article div aside.droite div.activites p sup {
			font-size:89%;
			top:-5px;
		}
		
		div.ligne-de-temps article div aside.droite figure {
			margin:0 0 40px 0;
		}
		
		div.ligne-de-temps article div aside.droite img {
			width:748px;
			max-width:748px;
			margin:0 0 5px 0;
			border-bottom:none;
		}
		
		div.ligne-de-temps article div aside.droite figure figcaption {
			font-size:70%;
			line-height:140%;
			font-family:Arial, Helvetica, sans-serif;
			padding:0 10px 0 10px;
		}
		
		
/*   SCROLL TO TOP */


a.scrollToTop {
	position:fixed;
	bottom:0;
	right:50%;
	margin:	0 -500px 0 0;
	z-index:50;
	background-color:#000;
	font-size:34px;
	padding:8px;
	color:#888; 
	text-decoration:none;
	display:block;
}
	
	a.scrollToTop:hover { color:#fff; }
			
			
	
		


/* ------------------------------------------------------------------------------- */
/* X.RESPONSIVE DESIGN
/* ------------------------------------------------------------------------------- */ 
@media only screen and (max-width : 480px) { /* pour les écrans sous 480px */

/* --------------------------------------------- */

/* l'idée ici est de modifier les paramètres des éléments
/* en fonction de la largeur d'un téléphone mobile
/* souvent les css doivent être annulées ou modifiées */

/* --------------------------------------------- */

/* MOBILE RESET */
body, section, aside, article, div, nav, footer, ul, li, p { margin:0; padding:0; }
img { max-width:100%; /* au maximum 100% de la largeur de l'élément qui la contient */ height:auto; /* hauteur automatique */ }
h1 { font-size:42px; }
h2 { font-size:30px; }
h3 { font-size:24px; }
h4 { font-size:18px; }
h5 { font-size:14px; }
h6 { font-size:12px; }
p { font-size:small; }
/* MOBILE RESET */

/* PLACER VOS CSS MOBILES SOUS LA LIGNE SUIVANTE*/ 

}


@media only screen and (max-width : 1024px) { /* pour les écrans sous 1024px */

/* --------------------------------------------- */

/* l'idée ici est de modifier les paramètres des éléments
/* en fonction de la largeur d'un téléphone mobile
/* souvent les css doivent être annulées ou modifiées */

/* --------------------------------------------- */

/* MOBILE RESET */
body, section, aside, article, div, nav, footer, ul, li, p { margin:0; padding:0; }
img { max-width:100%; /* au maximum 100% de la largeur de l'élément qui la contient */ height:auto; /* hauteur automatique */ }
h1 { font-size:42px; }
h2 { font-size:30px; }
h3 { font-size:24px; }
h4 { font-size:18px; }
h5 { font-size:14px; }
h6 { font-size:12px; }
p { font-size:small; }
/* MOBILE RESET */

/* PLACER VOS CSS MOBILES SOUS LA LIGNE SUIVANTE*/ 


html, body {
	height:100%;
	min-height:100%;
	font-size:100%;
	text-align:left;
	max-width:100%;
	width:100%;
	overflow-x:hidden;
}



footer {
	padding:10px 0;
}



}