/*
*	NAV
*	Le menu est maintenant un vrai menu WordPress (Apparence > Menus). Le
*	positionnement de chaque lien se fait donc par ORDRE (nav-pos-1, nav-pos-2...)
*	plutôt que par identifiant fixe, et l'icône appliquée est devinée à partir de
*	l'URL de destination (voir prophezine_menu_icon_class() dans functions.php) --
*	ainsi renommer ou réordonner les liens depuis l'admin ne casse pas le visuel.
*	Un lien qui ne correspond à aucune des pages d'origine (icon-generic) reçoit
*	un style neutre, faute de dessin dédié pour lui dans la maquette d'origine.
*/

#nav {
	position: relative;
	margin-left: 1em;
}

#disque-base {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	padding: 0;
	margin: 0;
}

#nav div.index {
	background: transparent url("../images/menu/disques.gif") no-repeat 0 0;
}

#nav div.dernier {
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -100px;
}

#nav div.anciens {
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -200px;
}

#nav div.carnet {
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -300px;
}

#nav div.archives {
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -400px;
}

#nav div.grimoire {
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -500px;
}

#nav div.equipe {
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -600px;
}

#nav div.liens {
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -700px;
}

#nav div.lexique {
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -800px;
}

#nav div.livredor {
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -900px;
}

#nav div.forum {
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -1100px;
}

#nav ul {
	position: absolute;
	top: 0;
	left: 100px;
	width: 640px;
	height: 100px;
	padding: 0;
	margin: 0;
	background: transparent url("../images/menu/barre.gif") no-repeat 0 0;
}

#nav li {
	display: inline;
	position: absolute;
	top: 5px;
	list-style: none;
}

#nav a {
	display: block;
	width: 59px;
	height: 57px;
}

#nav a:hover span.disque, #nav a:focus span.disque {
	display: block;
	position: absolute;
	top: -5px;
	width: 100px;
	height: 100px;
}

#nav span {
	display: none;
}

/*
*	POSITION DE CHAQUE LIEN, PAR ORDRE (et non plus par identifiant fixe)
*	Incrément de 60px, comme dans la maquette d'origine. Quelques positions
*	supplémentaires sont prévues au-delà du menu par défaut (11 liens), au cas
*	où d'autres liens seraient ajoutés depuis Apparence > Menus.
*/

#nav ul li.nav-pos-1 	{ left: 10px; }
#nav ul li.nav-pos-2 	{ left: 70px; }
#nav ul li.nav-pos-3 	{ left: 130px; }
#nav ul li.nav-pos-4 	{ left: 190px; }
#nav ul li.nav-pos-5 	{ left: 250px; }
#nav ul li.nav-pos-6 	{ left: 310px; }
#nav ul li.nav-pos-7 	{ left: 370px; }
#nav ul li.nav-pos-8 	{ left: 430px; }
#nav ul li.nav-pos-9 	{ left: 490px; }
#nav ul li.nav-pos-10 	{ left: 540px; }
#nav ul li.nav-pos-11 	{ left: 600px; }
#nav ul li.nav-pos-12 	{ left: 660px; }
#nav ul li.nav-pos-13 	{ left: 720px; }
#nav ul li.nav-pos-14 	{ left: 780px; }

/*
*	ICÔNE DE CHAQUE LIEN, PAR CORRESPONDANCE D'URL (icon-index, icon-dernier...)
*/

/* ACCUEIL */
#nav ul li.icon-index a:link, #nav ul li.icon-index a:visited {
	background: transparent url("../images/menu/index.gif") no-repeat -59px 0;
}
#nav ul li.icon-index a:hover, #nav ul li.icon-index a:focus {
	background: transparent url("../images/menu/index.gif") no-repeat -118px 0;
}
#nav ul li.icon-index a:active, #nav ul li.icon-index a.on {
	background: transparent url("../images/menu/index.gif") no-repeat 0 0;
}
#nav ul li.icon-index a:hover span.disque, #nav ul li.icon-index a:focus span.disque {
	left: -110px;
	background: transparent url("../images/menu/disques.gif") no-repeat 0 0;
}

/* DERNIER NUMERO */
#nav ul li.icon-dernier a:link, #nav ul li.icon-dernier a:visited {
	background: transparent url("../images/menu/dernier.gif") no-repeat -59px 0;
}
#nav ul li.icon-dernier a:hover, #nav ul li.icon-dernier a:focus {
	background: transparent url("../images/menu/dernier.gif") no-repeat -118px 0;
}
#nav ul li.icon-dernier a:active, #nav ul li.icon-dernier a.on {
	background: transparent url("../images/menu/dernier.gif") no-repeat 0 0;
}
#nav ul li.icon-dernier a:hover span.disque, #nav ul li.icon-dernier a:focus span.disque {
	left: -170px;
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -100px;
}

/* ANCIENS NUMEROS */
#nav ul li.icon-anciens a:link, #nav ul li.icon-anciens a:visited {
	background: transparent url("../images/menu/anciens.gif") no-repeat -59px 0;
}
#nav ul li.icon-anciens a:hover, #nav ul li.icon-anciens a:focus {
	background: transparent url("../images/menu/anciens.gif") no-repeat -118px 0;
}
#nav ul li.icon-anciens a:active, #nav ul li.icon-anciens a.on {
	background: transparent url("../images/menu/anciens.gif") no-repeat 0 0;
}
#nav ul li.icon-anciens a:hover span.disque, #nav ul li.icon-anciens a:focus span.disque {
	left: -230px;
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -200px;
}

/* CARNET DE ROUTE */
#nav ul li.icon-carnet a:link, #nav ul li.icon-carnet a:visited {
	background: transparent url("../images/menu/carnet.gif") no-repeat -59px 0;
}
#nav ul li.icon-carnet a:hover, #nav ul li.icon-carnet a:focus {
	background: transparent url("../images/menu/carnet.gif") no-repeat -118px 0;
}
#nav ul li.icon-carnet a:active, #nav ul li.icon-carnet a.on {
	background: transparent url("../images/menu/carnet.gif") no-repeat 0 0;
}
#nav ul li.icon-carnet a:hover span.disque, #nav ul li.icon-carnet a:focus span.disque {
	left: -290px;
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -300px;
}

/* ARCHIVES D'OZYR */
#nav ul li.icon-archives a:link, #nav ul li.icon-archives a:visited {
	background: transparent url("../images/menu/archives.gif") no-repeat -59px 0;
}
#nav ul li.icon-archives a:hover, #nav ul li.icon-archives a:focus {
	background: transparent url("../images/menu/archives.gif") no-repeat -118px 0;
}
#nav ul li.icon-archives a:active, #nav ul li.icon-archives a.on {
	background: transparent url("../images/menu/archives.gif") no-repeat 0 0;
}
#nav ul li.icon-archives a:hover span.disque, #nav ul li.icon-archives a:focus span.disque {
	left: -350px;
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -400px;
}

/* GRIMOIRE DE NENYA */
#nav ul li.icon-grimoire a:link, #nav ul li.icon-grimoire a:visited {
	background: transparent url("../images/menu/grimoire.gif") no-repeat -59px 0;
}
#nav ul li.icon-grimoire a:hover, #nav ul li.icon-grimoire a:focus {
	background: transparent url("../images/menu/grimoire.gif") no-repeat -118px 0;
}
#nav ul li.icon-grimoire a:active, #nav ul li.icon-grimoire a.on {
	background: transparent url("../images/menu/grimoire.gif") no-repeat 0 0;
}
#nav ul li.icon-grimoire a:hover span.disque, #nav ul li.icon-grimoire a:focus span.disque {
	left: -410px;
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -500px;
}

/* EQUIPE */
#nav ul li.icon-equipe a:link, #nav ul li.icon-equipe a:visited {
	background: transparent url("../images/menu/equipe.gif") no-repeat -59px 0;
}
#nav ul li.icon-equipe a:hover, #nav ul li.icon-equipe a:focus {
	background: transparent url("../images/menu/equipe.gif") no-repeat -118px 0;
}
#nav ul li.icon-equipe a:active, #nav ul li.icon-equipe a.on {
	background: transparent url("../images/menu/equipe.gif") no-repeat 0 0;
}
#nav ul li.icon-equipe a:hover span.disque, #nav ul li.icon-equipe a:focus span.disque {
	left: -470px;
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -600px;
}

/* LIENS */
#nav ul li.icon-liens a:link, #nav ul li.icon-liens a:visited {
	background: transparent url("../images/menu/liens.gif") no-repeat -59px 0;
}
#nav ul li.icon-liens a:hover, #nav ul li.icon-liens a:focus {
	background: transparent url("../images/menu/liens.gif") no-repeat -118px 0;
}
#nav ul li.icon-liens a:active, #nav ul li.icon-liens a.on {
	background: transparent url("../images/menu/liens.gif") no-repeat 0 0;
}
#nav ul li.icon-liens a:hover span.disque, #nav ul li.icon-liens a:focus span.disque {
	left: -530px;
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -700px;
}

/* LEXIQUE */
#nav ul li.icon-lexique a:link, #nav ul li.icon-lexique a:visited {
	background: transparent url("../images/menu/lexique.gif") no-repeat -59px 0;
}
#nav ul li.icon-lexique a:hover, #nav ul li.icon-lexique a:focus {
	background: transparent url("../images/menu/lexique.gif") no-repeat -118px 0;
}
#nav ul li.icon-lexique a:active, #nav ul li.icon-lexique a.on {
	background: transparent url("../images/menu/lexique.gif") no-repeat 0 0;
}
#nav ul li.icon-lexique a:hover span.disque, #nav ul li.icon-lexique a:focus span.disque {
	left: -590px;
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -800px;
}

/* FORUM */
#nav ul li.icon-forum a:link, #nav ul li.icon-forum a:visited {
	background: transparent url("../images/menu/forum.gif") no-repeat -59px 0;
}
#nav ul li.icon-forum a:hover, #nav ul li.icon-forum a:focus {
	background: transparent url("../images/menu/forum.gif") no-repeat -118px 0;
}
#nav ul li.icon-forum a:active, #nav ul li.icon-forum a.on {
	background: transparent url("../images/menu/forum.gif") no-repeat 0 0;
}
#nav ul li.icon-forum a:hover span.disque, #nav ul li.icon-forum a:focus span.disque {
	left: -640px;
	background: transparent url("../images/menu/disques.gif") no-repeat 0 -1100px;
}

/*
*	LIENS SANS ICÔNE DÉDIÉE (ex. Livre d'or, ou tout nouveau lien ajouté
*	depuis Apparence > Menus) : pas de dessin d'origine pour eux, donc un
*	style neutre -- pastille sombre avec le texte du lien affiché dedans.
*/

#nav ul li.icon-generic a {
	background: rgba(40, 20, 10, 0.75);
	border-radius: 50%;
	box-sizing: border-box;
}

#nav ul li.icon-generic a:hover, #nav ul li.icon-generic a:focus, #nav ul li.icon-generic a.on {
	background: rgba(80, 40, 10, 0.9);
}

#nav ul li.icon-generic a span:not(.disque) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 4px;
	color: #fff;
	font-size: 0.62em;
	line-height: 1.05em;
	text-align: center;
	box-sizing: border-box;
}

#nav ul li.icon-generic a:hover span.disque, #nav ul li.icon-generic a:focus span.disque {
	display: none; /* pas de décor dédié dans la maquette d'origine */
}