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



	.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: auto;  /* 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 */
	

	}



	
	
a:link {
text-shadow: 1px 1px 3px black;
color : white;
text-decoration: none;
/* position: absolute;*/ 

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

z-index: 2000;
display: inline;

}



/* 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;
	margin: 0px 0px;
	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 {
	text-shadow: 1px 1px 3px black;
	display: inline-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);
}