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


/* ____________________________________________________________________________________________________________________________________________________________________________________________________________________________ */
/* ============================================================================================================================================================================================================================ */
/*  DÉFINITION DES CLASSES GÉNÉRALES  */


.rn_accescomplet {
	font-family: Arial, sans-serif;
	font-weight: bold;
	padding: 3.5em 0;
	text-align: center;
}
.rn_accescomplet:before {
	/* content: "\2192\00a0\00a0\00a0"; */
	content: "\232a\232a\00a0";
}
.rn_accescomplet:after {
	/* content: "\2192\00a0\00a0\00a0"; */
	content: "\00a0\232a\232a";
}
.rn_accescomplet a {
	color: #000;
}
.rn_accescomplet img {
	margin: 0 1px;
	vertical-align: middle;
}


/* Les classes rn_ascenseur et rn_descenseur servent pour les liens de navigation verticale en page d'accueil. */
a.rn_ascenseur, a.rn_descenseur {
	color: #ccc;
	display: inline-block;
		width: 12em;
	font-family: Arial, sans-serif;
	font-size: .6em;
	letter-spacing: normal;
	text-transform: uppercase;
}
a:hover.rn_ascenseur, a:hover.rn_descenseur {
	color: #777;
}
a.rn_ascenseur {
	margin-right: .6em; /* Un peu plus que de l'autre côté car effet visuel tenant à la majuscule de l'intertitre. */
	text-align: right;
}
a.rn_descenseur {
	margin-left: .5em;
	text-align: left;
}


/* La classe .rn_couverture sert pour le fond des blocs lorsqu'il est constitué d'une image.
On gère ici deux images appelées dans les balises : 1) le filtre, 2) le fond à proprement parler. */
.rn_couverture {
	background-position: center center, center center;
	background-repeat: repeat, no-repeat;
		-webkit-background-size: auto, cover; /* pour Chrome et Safari */
		-moz-background-size: auto, cover; /* pour Firefox */
		-o-background-size: auto, cover; /* pour Opera */
	background-size: auto, cover; /* version standardisée */
}


/* La classe .rn_couverture_lien sert pour les liens en forme de bloc vers des articles dont on met le logo en image de fond.
L'appel à l'image de fond est géré dans la balise. L'élément fonctionne avec une balise <a> unique encapsulée. */
.rn_couverture_lien {
	background-position: center center;
	background-repeat: no-repeat;
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
	background-size: cover; /* version standardisée */
	margin: 2px 0;
}
.rn_couverture_lien a {
	background-image: url(images/fond_gris50.png);
	background-position: center center;
	background-repeat: repeat;
	color: #fff;
	display: block;
	padding: 7em 0;
	text-align: center;
	transition: background .5s;
}
.rn_couverture_lien a:hover {
	background-image: url(images/fond_gris25.png);
	color: #fff;
}


/* Les classes .rn_couverture_dossier et rn_couverture_une sont des variantes qui se rajoutent à .rn_couverture_lien pour agrandir la surface de la une et du dossier du moment. */
.rn_couverture_une.rn_couverture_lien a, .rn_couverture_dossier.rn_couverture_lien a {
	padding: 16em 0;
}


/* La classe .rn_couverture_liste sert pour les blocs de rubriques (entre autres), listant les articlesy afférant, dont on met le logo en image de fond.
L'appel à l'image de fond est géré dans la balise. */
.rn_couverture_liste {
	background-position: center center, center center;
	background-repeat: repeat, no-repeat;
		-webkit-background-size: auto, cover; /* pour Chrome et Safari */
		-moz-background-size: auto, cover; /* pour Firefox */
		-o-background-size: auto, cover; /* pour Opera */
	background-size: auto, cover; /* version standardisée */
	color: #fff;
	padding: 1em 0;
}
.rn_couverture_liste a {
	color: #fff;
}
.rn_couverture_liste a:hover {
	color: #bbb;
}
.rn_couverture_liste h3, .rn_couverture_liste ul.rn_liste, .rn_couverture_liste p {
	margin: 0 2em;
}
.rn_couverture_liste h3 {
	font-size: 1em;
	text-align: center;
}
.rn_couverture_liste ul.rn_liste li a {
	padding: .5em 0;
}
.rn_couverture_liste ul.rn_liste li + li a {
	border-top: 1px #fff dotted;
}


/* La classe rn_date permet de mettre en forme les dates en propres, et insérées dans un élément inline (par un span) en vue de les suffixer avec un point. */
.rn_date {
	font-family: Arial, sans-serif;
	font-size: .75em;
	/* font-variant: small-caps; */
	font-weight: bold;
	text-transform: uppercase;
}
span.rn_date:after {
	content: ". ";
}



/* L'encart en haut à droite pour les bandeaux des vidéos et des régions. */
/* Le position: relative vise à permettre le positionnement des blocs de classe .encarthautdroit. */
#corps_videos .rn_marges, #corps_regions .rn_marges {
	position: relative;
}
/* La classe .encarthautdroit s'applique aux petits encarts en haut à droite des traversants, pour les liens vers les réseaux sociaux. */
.rn_encarthautdroit {
	color: #fff;
	/* display: inline; */
	font-family: Arial, sans-serif;
	padding: 3em 0;
	text-align: center;
	/* position: absolute;
		right: 0;
		top: 0; */
}
.rn_encarthautdroit img {
	margin: 0 1px;
	vertical-align: middle; /* Pour aligner correctement les images au milieu de la ligne de texte. */
}


/* La classe rn_etiquette sert à toutes les étiquettes encadrées (pour les mots-clefs et rubriques principalement, et certains sous-titres). */
.rn_etiquette {
	border-style: solid;
	border-width: 1px;
	display: inline-block;
	font-family: Arial, sans-serif;
	font-weight: bold;
	letter-spacing: .1em;
	margin: 1px 3px;
	padding: .5em;
	text-transform: uppercase;
}


/* La classe rn_flottant sert à passer certains éléments en flottants (ou position: absolute) au-delà de certaines résolutions.
Par défaut, le float est à none et la position à static. */
.rn_flottant {
	float: none;
	position: static;
}


/* La classe .formulaire_spip, native, permet de placer les règles générales de présentation des formulaires. */
.formulaire_spip fieldset {
	border: 1px #000 dotted;
}
.formulaire_spip legend {
	font-family: Arial, sans-serif;
	font-weight: bold;
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
}
.formulaire_spip textarea, .formulaire_spip input {
	font-family: Arial, sans-serif;
}
.formulaire_spip ul {
	list-style: none;
	padding: 0;
}
.formulaire_spip label[for="nom_inscription"], .formulaire_spip label[for="mail_inscription"] {
	display: block;
}
.formulaire_spip p.boutons {
	padding-top: .5em;
}
.formulaire_spip p.boutons input[type="submit"] {
	font-weight: bold;
	text-transform: uppercase;
}


/* La classe .rn_frise permet de mettre en forme des traversants dont les blocs se succèdent latéralement. */
.rn_frise {
	width: 100%;
}
.rn_frise .rn_couverture_lien a {
	padding: 12em 0;
}


/* Les intertitres. */
h2.rn_intertitre {
	font-family: Georgia, serif;
	font-variant: small-caps;
	padding: 2em 0;
	letter-spacing: .2em;
	text-align: center;
	text-transform: none;
}
h2.rn_intertitre:before {
	content: '';
}
h2.rn_intertitre:after {
	content: '';
}


/* Les listes d'éléments avec lien. */
ul.rn_liste, ul.rn_fil_liste {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.rn_liste li a {
	display: block;
	line-height: 1.5em;
}
ul.rn_liste li+li a {
	border-top-style: dotted;
	border-top-width: 1px;
	border-top: 1px #000 dotted;
}


/* Les listes d'éléments à afficher sous forme de nuage (séparés par un bullet-point). */
ul.rn_liste_nuage {
	list-style: none;
	margin: 0;
	padding: .5em 0;
}
ul.rn_liste_nuage li {
	display: inline;
	line-height: 1.5em;
}
ul.rn_liste_nuage li+li:before {
	content: "•\A0"; /* Le bullet-point, équiv. en HTML du &bull;. */
}


/* Les classes .rn_meta_... sont destinées principalement aux bannières d'articles. */
.rn_meta_date, .rn_meta_auteurs, .rn_meta_motsclefs, .rn_meta_compteur {
	line-height: 1.5em;
	margin-right: 1em;
	padding-left: 1.5em;
}
.rn_meta_date {
	background: url(images/meta_date_fond.png) no-repeat left center;
}
.rn_meta_auteurs {
	background: url(images/meta_auteurs_fond.png) no-repeat left center;
}
.rn_meta_motsclefs {
	background: url(images/meta_motsclefs_fond.png) no-repeat left center;
}
.rn_meta_compteur {
	background: url(images/meta_compteur_fond.png) no-repeat left center;
}


/* Adaptation de la taille des métas lorsque appelés dans un contexte de .rn_pseudotitre. */
.rn_pseudotitre .rn_meta_date, .rn_pseudotitre .rn_meta_auteurs, .rn_pseudotitre .rn_meta_motsclefs, .rn_pseudotitre .rn_meta_compteur {
	font-size: .66em; /* Les pseudotitres étant à 1.5em, on repasse à 1em. */
}


/* Les classes .rn_structure, .rn_colonnes & .rn_bloc combinées permettent d'obtenir une disposition en colonnes de même hauteur
pour n'importe-quels éléments : http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ */
.rn_structure {
	display: table;
}
.rn_colonnes {
	display: table-row;
}
.rn_bloc {
	display: table-cell;
}


/* Les classes suivantes permettent d'étirer des bandeaux sur toute la largeur de la page, ou au contraire de les contenir dans leurs marges.
La classe .rn_antimarges vise à faire le complément de .rn_marges, p. ex. pour les liens de type block de la classe .rn_couverture_lien. */
.rn_traversant {
	width: 100%;
}
.rn_marges {
	margin: 0 auto;
	width: 96%;
		max-width: 1000px;
}
.rn_antimarges {
	padding: 0 2%; /* 2% à droite + 2% à gauche = 4%, soit le complément aux 96% définis dans .rn_marges. */
}


/* Cette classe sert pour les titres d'article dans le contexte de .rn_couverture_lien. Appliqué à un span. */
.rn_pseudotitre {
	display: block;
	font-size: 1.5em;
	padding: .5em 0;
}


/* La classe .rn_saut_acces permet de créer des ancres ajustées au menu flottant (haut de 65px). */
.rn_saut_acces {
	padding-top: 3.5em; /* 3.5em = le line-height de l'en-tête. */
	position: relative;
	top: -3.5em;
	margin-bottom: -3.5em;
	z-index: -99;
}


/* La classe .rn_surcouche sert pour les outils de la barre d'en-tête, qui s'affichent sur toute la page comme un calque de niveau supérieur.
Par défaut, le display est réglé sur none et c'est javascript qui va agir via slideToggle (cf. inclure/communs/head.html). */
.rn_surcouche {
	background: url(images/fond_gris85.png);
	color: #fff;
	display: none;
	height: 100%;
	position: fixed;
		top: 0;
	width: 100%;
	z-index: 89; /* 99 étant réservé à la barre d'en-tête. */
}
.rn_surcouche a {
	color: #fff;
}
.rn_surcouche a:hover {
	color: #bbb;
}


/* Pour annuler un réglage de SPIP. */
.spip_logos {
	float: none;
	margin: 0;
}


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


/* En-dessous de 700px de largeur, les frises créent des blocs trop étroits, on les étage donc les uns en-dessous des autres. */
@media (max-width: 700px) {
	.rn_frise .rn_bloc {
		display: block;
		width: auto;
	}
	.rn_frise .rn_bloc .rn_couverture_lien a {
		padding: 3em 0;
	}
}
@media (max-width: 600px) {
	a.rn_ascenseur, a.rn_descenseur {
		display: block;
		width: auto;
	}
	a.rn_ascenseur {
		margin: 0 0 0 .5em;
		text-align: left;
	}
	a.rn_descenseur {
		margin: 0 .5em 0 0;
		text-align: right;
	}
}