/* La taille standard d'un paragraphe est 16px si rien n'est précisé (d'ailleurs em= police de 16 px de haut, donc 0.5em 8 px) 
polices à telecharger sur fontsquirrel */

	
@font-face {
    font-family: 'quicksand';
    src: url('fonts/Quicksand-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'quicksandlight';
    src: url('fonts/Quicksand-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'riesling';
    src: url('fonts/riesling.ttf') format('truetype');
	src: url('fonts/riesling.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



html{
	
height: 100%;
width: 100%;


}

body{
		margin-top: 0px;
		top: 0px;
		background-color: black;
		margin-left: 0px;
		
	}





	.liens {

	
	font-size: 1.1em;
 	color: blue;
	font-family: quicksand;
	text-shadow: 1px 1px 3px black;
	position: relative;
	width: 95%;
	/* width: 100%;  Cette connerie m'amenait une page plus large que l'écran, surement à cause d'un autre bloc qui se rajoutait. */ 
    height: 10%;  /* j'avais mis 100% comme un con, du coup, si le z-index des liens était supérieur à celui des liens (photo ou video par ex),
	il devenait impossible de cliquer dessus. J'ai mis 60 px puis, plus malin, auto : juste la taille qu'il faut. */
  
	top: 0px;
    left: 20px;
  	list-style-type: none;
	z-index: 20;  /* Ca fait passer les liens video et contact devant la gallery sur photo.html et les liens ne marchent plus */
	opacity: 0.8;
	/* font-weight: bold;  ne sert à rien */
display: flex;

    flex-direction: row;   /* c'est ca par defaut mais je le met quand meme pour le debut ... */

	flex-wrap: nowrap;
	
justify-content: space-between;
	}



	
	
a:link {

color : white;
text-decoration: none;
/* position: absolute;*/ 

/* Ca c'est la marge entre chaque "mot" */
Margin-left : 10px;

z-index: 2000;


}



/* J'ai trouvé pqoi il était toujours derriere : sans position absolute c'est derriere image set grille, avec c'est au dessus
la raison est la suivante : z-index ne marche que sur les éléments dont on a défini la position : absolute, relative ou fixed.
Le slideshow est en z-index 0

 */
	

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




nav a {
	top: 15px;
	position: relative;
	display: inline-block;
	
	outline: none;
	color: #fff;
	text-decoration: none;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.35em;
	
	
}



nav a:hover,
nav a:focus {
	outline: none;
}

/* Effect 1: Brackets */

.liens a::before,	
.liens a::after {
	display: in	line-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.liens a::before {
	margin-right: 0px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.liens a::after {
	margin-left: 0px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.liens a:hover::before,
.liens a:hover::after,
.liens a:focus::before,
.liens a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}