* {
	padding: 0px;
	margin: 0px;
	
	font-size : 16px ;
}

body {
	background-color: #4b2e23;
	min-width: 320px;

	font-size: 1em;
	font-family: 'Oswald', sans-serif;
	line-height: 1.5em;
}







/*
*	*	*	*	*	HEADER	*	*	*	*
*/

header {
	padding-top : 1.4em ;
	height: 510px;
	position: relative;
	
	border-bottom: 5px solid #92c2cf;
	box-sizing : border-box ;
	
	background-image: url("images/bg-dragon-low.jpg");
	background-repeat:no-repeat;
	background-position: center;
	background-size: 		cover;
	
	box-shadow:  0px -450px 300px -150px #92c2cf inset;
		
	color: white;
}

section#titre {
	padding: 0px;
	margin: 0px;
}

h1 {
	display : none;
}

header#infos div#logo {
	width: 40%;
	padding: 10em 2em 0.8em 0;
	
	text-align: right;
}

article#vcard {
	width: 40%;
	padding: 0 2em 0.8em 0;
	position: absolute;
	bottom: 1em;
	
	z-index: 1000;
}

article#vcard p {
	text-align: right;
	font-size: 0.9em;
	line-height: 1.7em;
	font-weight: 300;
	
	color: white;
}
article#vcard p a {
	font-size: 1em;
	color: white;
}
article#vcard p a:hover{
	color: #4b2e23;
}

article#vcard p a.linkedin {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 0.5em 0 0 0.5em;
	
	background-image: url('images/logo_bts.png');
	background-position: 0px 0px;
}
article#vcard p a.linkedin:hover {
	background-position: -119px 0px;
}

article#vcard p a.twitter {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 0.5em 0 0 0.5em;
	
	background-image: url('images/logo_bts.png');
	background-position: -80px 0px;
}

article#vcard p a.twitter:hover {
	background-position: -198px 0px;
}

p#bio {
	padding: 3em 5% 0 45% ;
	position: absolute;
	bottom: 1em;
	
	z-index: 100;
	
	font-family: 'Oswald', sans-serif;
	font-size: 1.5em;
	line-height: 1.5em;
	
	letter-spacing: 0.2px;
	text-align: left;
}






/*
*	*	*	*	*	MENU NAV	*	*	*	*
*/

nav {
	border-bottom: 2px solid white;
	height: 50px ;
	box-sizing : border-box ;
	
	min-width: 320px;
	position : relative ;
	
	background-color : white;
	box-shadow:	0px -100px 20px -75px #e1dbd9 inset,
				0px 20px 20px 0px #331c13;
}

nav ul.wide_menu {
	position: relative;
	margin: 0 auto ;
	max-width: 350px;
	
	list-style-type: none;
}

ul li {
	display : inline-block ;
	margin: 0.3em 0.1em ;
	vertical-align : top ;
	
	transition : all 0.3s ;
}

/* link */
ul.wide_menu > li > a,
ul.wide_menu > li   ul > li > a,
nav > h2 > a {
	display: block;
	padding: 0.3em 0.4em;
	position : relative ;
	
	border-radius: 0.5em;
	border: 2px solid #92c2cf;
	
	text-align: center; 
	letter-spacing: 1px;
	font-weight: 	300;
	font-size: 		1em;
	
	color: #92c2cf;
	text-decoration : none;
	
	transition:			all .3s;
}

ul.wide_menu > li:hover > a,
ul.wide_menu > li ul > li:hover > a,
nav > ul.wide_menu li.sujet_on > a,
nav > h2:hover > a,
nav:hover > h2 > a  {
	background-color: #92c2cf;
	color: White;
	box-shadow:	none ;
}




/*
*	*	*	*	*	SOUS MENU ILLUSTRATION	*	*	*	*
*/
ul.wide_menu li.illustration > a {
	cursor : s-resize ; 
}

/* le menu ne bouge pas : il grandit */
ul.wide_menu li.illustration ul {
	overflow : hidden ;
	position : absolute ;
	z-index : 100 ;
	height : 0 ;
	
	width : 100% ;
	box-sizing : border-box ;
	padding : 0 ;
	
	transition : all 0.3s ;
	opacity : 0;
	box-shadow:	none ;
}

/* éléments hors zone visible */
ul.wide_menu li.illustration ul li {
	padding : 0 ;
	display : block ;
	width : 200px;
	margin-right : 1.5em ;
	
	position : relative ;
	top: -82px ;
	
	border-radius: 0.5em;
	box-shadow:	0px -100px 20px -75px #e1dbd9 inset ;
	background-color : white ;
	transition : all 0.3s ;
}

/* menu visible */
ul.wide_menu li.illustration:hover ul,
ul.wide_menu li.illustration.active ul {
	padding : 8px 0 ;
	height : auto ;
	
	opacity : 1;
}

/* éléments descendent en zone visible */
ul.wide_menu li.illustration ul:hover li,
ul.wide_menu li.illustration:hover ul li {
	top: 0px ;
}





/*
*	*	*	*	*	MOBILE MENU	*	*	*	*
*/
nav h2 {
	display : none ;
	margin: 0.3em auto ;
	padding : 0 1.5em ;
	
	vertical-align : top ;
	width : 100% ;
	float : right ;
	
	position : relative ;
	box-sizing : border-box ;
}
nav h2 a {
	cursor : s-resize ; 
}

@media screen and (max-width : 400px) {
	
	/* nav est le trigger pour le menu */
	nav h2 {
		display : block ;
	}
	
	/* cacher le bouton de section du menu */
	/*ul.wide_menu > li.sujet_on {
		display : none ;
	}*/
	
	/* menu caché (0 height) */
	nav ul.wide_menu {
			position : absolute ;
			top: 40px ;
			left : auto ; 
			right : auto ; 
			
			width : 100% ;
			max-width : 100% ;
			height : 0 ;
			padding : 0 1.5em ;
			margin : 0 auto ;
			
			overflow : hidden ;
			z-index : 100 ;
			box-sizing : border-box ;
			
			box-shadow:	none ;
			opacity : 0;
			transition : all 0.3s ;
	}
	nav ul.wide_menu li {
			position : relative ;
			top: -267px ;
			
			display : block ;
			width : 100%;
			padding : 0 ;
			
			border-radius : 0.5em;
			background-color : white ;
	}
	nav ul.wide_menu li a {
		box-shadow:	0px -100px 20px -75px #e1dbd9 inset ;
		background-color : white ;
	}
	ul.wide_menu li.illustration  {
		background-color : transparent ;
	}
	
	/* menus apparaissent en hover */
	nav:hover ul.wide_menu {
			display : block ;
			height : auto ;
			padding : 8px 1.5em ;
			
			opacity : 1;
	}
	nav:hover ul.wide_menu li.illustration ul {
			display : block ;
			height : auto ;
			padding : 0 1.5em ;
			position : relative ;
			
			opacity : 1;
	}
	nav:hover ul.wide_menu li {
		top: 0px ;
	}
	/* menu illustration visible en tout temps */
	ul.wide_menu li.illustration ul  {
		padding : 8px 1.5em ;
		height : auto ;
	
		opacity : 1;
	}
	/* éléments descendent en zone visible */
	ul.wide_menu li.illustration ul li {
		top: 0 ;
		position : relative ;
		margin-left : auto ;
		margin-right : auto ;
	}
	ul.wide_menu li.illustration ul li:last-child {
		margin-bottom: 0 ;
	}
	
	
}


/*
*	*	*	*	*	SECTION BLOGUE	*	*	*	*
*/


section {
	padding: 1em;
	margin: auto;
	max-width: 800px;
}

section article {
	padding: 2em;
	position: relative;
	margin-bottom: 1.2em;
	
	background-color: white;
	box-shadow:  5px 5px 10px 0px #331c13;
	border-radius: 0.5em;
}


/* titres h2 */
section article h2,
section article h2 a {
	margin: 0.5em 0;
	
	color: #b5a38d;
	color : #92c2cf;
	
	font-size: 1.8em;
	line-height: 1em;
	font-weight: 400;
	text-transform : uppercase ;
}

section article h2 aside {
	position: absolute;
	top: 1em;
}

section article h2 span {
	display: none;
}

section article h2 a:hover {
	color: #ffa825;
}


/* les links réguliers */
section article p a:not(.big_link) {
	color: #b5a38d;
	transition : all 0.2s ;
	position : relative ;
	display : inline-block ;
	margin : 0 -0.3em ;
	padding : 0 0.3em ;
	background-color: transparent;
	border-radius : 0.2em ;
}
section article p a:not(.big_link):hover {
	background-color: #ffa825;
	color : white ;
	text-decoration : none ;
}


/* les paragraphes */
section article p {
	clear: both;
	
	color: #b5a38d;
	font-size: 1em;
	font-weight: 300;
}


/* les images */
section article img {
	width: 100%;
}

section article img {
	margin-bottom: 1em;
}
/* pour images sans .big_link en deux colonnes */
section article img.half {
	width: calc(50% - 1em/2);
	float: left;
}
section article img.half:first-child {
	margin-right: 1em;
}


/* big _link englobant une image et dévoilant les infos sur hover */
section article a.big_link  {
	display : block ;
	/* width : 100% ; */
	position : relative ;
	margin-bottom: 1em;
	
	background-color : transparent ; 
	transition : all 0.3s ;
}

section article a.big_link:after  {
	display : table;
	content : "";
	clear : both ;
}

section article p a.big_link img  {
	margin-bottom: 0; /* la marge est prise en charge par le big-link */
}

section article a.big_link > span  {
	position : absolute ;
	top : 0 ;
	left : 0 ;
	
	width : 100% ;
	height : calc(100% - 4px) ;
	
	opacity : 0 ;
	background-color : rgba(146,194,207, 0.8) ; 
	transition : all 0.3s ;
}

section article a.big_link span span {
	position : absolute ; 
	top : calc(50% - 1em/2);
	width : 100% ;
	
	font-size: 1.8em ;
	line-height : 1em ;
	font-weight: 400 ;
	
	text-align : center ;
	text-transform : lowercase ;
	color : white ;
}

section article a.big_link:hover > span {
	opacity : 1 ;
}

/* big_link en 2 colonnes */
section article a.big_link.half {
	width: calc(50% - 1em/2);
	float: left;
}
section article a.big_link.half:first-child {
	margin-right: 1em;
}







@media all and (max-width : 800px) {
	/* réduire taille typo des hover big link 2 colonnes */
	section article a.big_link.half span span {
		font-size : 20px ;
	}
}

@media all and (max-width : 500px) {
	/* empêcher les 2 colonnes */
	section article a.big_link.half,
	section article p img.half {
		width: 100%;	
		clear : both ;
	}
	
	/* réduire taille typo des hover big link 1 colonne */
	section article a.big_link span span {
		font-size : 20px ;
	}
}




/*
*	*	*	*	*	NAVIGATION DU BLOG, ANCIENS ET NOUVEAUX PROJETS	*	*	*	*
*/

div.navigation {
	margin: 1em auto 0 auto;
	min-width: 270px;
}

div.navigation p a {
	padding: 0.5em 1em;
	display: block;
	width: 75px;
	
	background-color: #754837;
	background-color: #92c2cf;
	border-radius: 0.5em;
	
	color: #4b2e23;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	
	transition:			background-color .3s;
}

div.navigation p a.ancien {
	float: left;
}

div.navigation p a.nouveau {
	float: right;
}

div.navigation p a:hover {
	background-color: #92c2cf;
	background-color: #ffa825;
	color: White;
}



/*
*	*	*	*	*	FOOTER	*	*	*	*
*/

footer {
	clear: both;
	padding: 2em 10%;
	
	text-align: center;
	font-size: 0.7em;
	color: #754837;
}