/*	--------------------------------------------------
	
	FEUILLE DE STYLE : commun_entete.css
	(c) Le Rouge & le Noir. - Tous droits réservés.
	
	--------------------------------------------------	*/


/* ____________________________________________________________________________________________________________________________________________________________________________________________________________________________ */
/* ============================================================================================================================================================================================================================ */
/*  STRUCTURATION DE LA MISE EN PAGE  */


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* L'EN-TÊTE */


#page_entete {
	background-color: #fff;
	background-image: url(images/entete_fond.png);
	background-position: center center;
	background-repeat: no-repeat;
	border-bottom: 1px #ddd solid;
	position: fixed;
		top: 0;
	z-index: 99;
}
#page_entete a {
	color: #000;
	font-family: sans-serif;
	text-transform: uppercase;
}


/* Les deux listes à puce de l'en-tête. */
ul#entete_rubriques, ul#entete_outils {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul#entete_outils {
	position: absolute;
		right: 0;
		top: 0;
}
ul#entete_rubriques li, ul#entete_outils li {
	display: inline-block;
}
ul#entete_rubriques li a, ul#entete_outils li a {
	display: block;
	line-height: 3.5em;
	padding: 0 0.5em;
}
ul#entete_rubriques li a#rubriques_accueil {
	background-image: url(images/rubriques_accueil_fond.png);
	background-position: center center;
	background-repeat: no-repeat;
	width: 2.5em;
}
ul#entete_outils li a {
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
	width: 2.5em;
}
ul#entete_outils li a:hover {
	cursor: pointer;
}
ul#entete_outils li a#outils_menu {
	background-image: url(images/outils_menu_fond.png);
}
ul#entete_outils li a#outils_infolettre {
	background-image: url(images/outils_infolettre_fond.png);
}
ul#entete_outils li a#outils_twitter {
	background-image: url(images/outils_twitter_fond.png);
}
ul#entete_outils li a#outils_facebook {
	background-image: url(images/outils_facebook_fond.png);
}
ul#entete_outils li a#outils_recherche {
	background-image: url(images/outils_recherche_fond.png);
}
ul#entete_rubriques li a, ul#entete_outils li a {
	transition: background-color .5s;
}
ul#entete_rubriques li a:hover, ul#entete_outils li a:hover {
	background-color: #ddd;
}



/* Les surcouches. */
#page_menu .rn_structure, #page_infolettre .rn_structure, #page_twitter .rn_structure, #page_facebook .rn_structure, #page_recherche .rn_structure {
	height: 100%;
	width: 100%;
}
#page_menu .rn_bloc, #page_infolettre .rn_bloc, #page_twitter .rn_bloc, #page_facebook .rn_bloc, #page_recherche .rn_bloc {
	height: 100%;
	width: 100%;
	padding-top: 3.5em;
		max-height: 100%;
	text-align: center;
	vertical-align: middle;
}


/* La surcouche du menu. */
#page_menu .rn_bloc {
	text-align: right;
	width: 50%;
}
#page_menu .rn_bloc h2{
	font-size: 1em;
	margin: 0;
	padding: 1em;
}
#page_menu .rn_bloc ul{
	list-style: none;
	margin: 0;
	padding: 0 1em;
}
#page_menu .rn_bloc + .rn_bloc {
	text-align: left;
}


/* La surcouche de Twitter. */
#page_twitter .rn_bloc .rn_encarttwitter {
	margin: 5px; /* Pour les petites largeurs, évite que la boîte Twitter colle aux bords latéraux. */
}


/* La surcouche de Facebook. */
#page_facebook .rn_bloc .rn_encartfacebook {
	margin: 5px; /* Pour les petites largeurs, évite que la boîte Twitter colle aux bords latéraux. */
}
#page_facebook .rn_bloc .rn_encartfacebook .fb-like-box.fb_iframe_widget {
	background: #fff;
}
#page_facebook .rn_bloc .rn_encartfacebook .fb-like-box, #page_facebook .rn_bloc .rn_encartfacebook .fb-like-box span, #page_facebook .rn_bloc .rn_encartfacebook .fb-like-box span iframe[style] {
	width: 98% !important;
		max-width: 600px !important;
}


/* La surcouche du moteur de recherche. */
#page_recherche #formulaire_recherche label[for="recherche"] {
	display: none;
}
#page_recherche #formulaire_recherche input[type="text"], #page_recherche #formulaire_recherche input[type="submit"] {
	background: #ddd;
	border: 0;
	font-family: Arial, sans-serif;
	font-size: 2em;
	padding: .5em;
}
#page_recherche #formulaire_recherche input[type="text"] {
	width: 25%;
}
#page_recherche #formulaire_recherche input[type="submit"] {
	background: #ddd url(images/formulaire_recherche_fond.png) no-repeat center center;
	color: transparent;
}



/* ____________________________________________________________________________________________________________________________________________________________________________________________________________________________ */
/* ============================================================================================================================================================================================================================ */
/*  GESTION DES LARGEURS & RÉSOLUTIONS  */

/* En-dessous de 1050px de largeur, on supprime le logo central de la barre d'en-tête (chevauchée par les rubriques) pour le placer à l'endroit du bouton d'accueil. */
@media (max-width: 1050px) {
	#page_entete {
		background-image: none;
	}
	ul#entete_rubriques li a#rubriques_accueil {
		background-image: url(images/entete_fond.png);
		background-size: 65%;
	}
}


/* En-dessous de 800px de largeur, on resserre les boutons sur la droite. */
@media (max-width: 800px) {
	ul#entete_outils li a {
		width: 1.5em;
	}
}

/* En-dessous de 700px de largeur, on masque les rubriques, qui autrement chevauchent les boutons d'outils à droite. */
@media (max-width: 700px) {
	ul#entete_rubriques li + li {
		display: none;
	}
	/* On élargit aussi la barre de recherche, qui devient un peu étroite. */
		#page_recherche #formulaire_recherche input[type="text"] {
		width: 50%;
	}
}


/* Les mobiles ne supportent apparemment pas le fond blanc de la box Facebook. On passe donc toute la surcouche en blanc en lieu & place. */
@media handheld, (max-width: 700px) {
	#page_facebook.rn_surcouche {
		background: #fff;
	}
}