/*
 Styles pour le site CSR-BFC
 -----------------------------
*/
/* Charte des couleurs utilisées
--------------------------------
* Le blanc (white) sert pour les textes sur fond sombre, et accessoirement 
pour le fond de l'écran global.
* Le noir (black) sert pour les textes sur fond clair.
* Vert "FFS" pour le fond 
	background-color: #C1D73F;
* Vert "FFS éclairci" pour le fond  de la zone texte.
	background-color: #d2d7b5
* Blanc cassé pour le fond  de la zone texte.
	background-color: #f8f8f8;
* Orange vif pour les lignes d'encadrement des tableaux.
	border-color: #FF5D00;
* Orange plus sombre pour le fond normal des boutons de menu.
	background-color: #F25800 ou #D84F00;
	
(Ce qui suit est un reliquat de PNC photo...)
* Rouge pour les textes de liens, plus contrasté que l'orange pétant de SPIPr.
	color: #991800;
	
	
* Le même orange mais plus clair pour les liens de la barre de navigation.
	background-color: #ebd0bc;
* Le même orange, clair et désaturé (pâle), pour les lignes paires des tableaux.
	background-color: #f6ece4;
* Le même orange mais encore plus pâle, pour les lignes impaires des tableaux.
	background-color: #f6f2ef;
* Jaune très pâle, pour surligner les lignes de titres repliables.
	background-color: #fcfef0;
* Bleu "acier" pour le fond de la barre de navigation et la barre de séparation
avant le pied-de-page.
Ce bleu est le complémentaire de l'orange clair du bandeau, choisi pour rompre 
la monotonie des tons rouge-orange.
	background-color: #62a1d0;
	background-color: #60a8d0; (essai précédent)
* Bleu "acier" très clair, pour le fond de la ligne d'en-tête des tableaux.
	background-color: #a7d5f6;
* Bleu "acier" foncé, pour le texte du pied de page (sauf les liens) et le 
logo SPIP. Dans la barre de menu, c'est le fond du bouton de la rubrique 
"active" (celle où l'on se trouve).
	background-color: #225072;
* Bleu "acier" foncé (assez pour que le texte clair soit lisible) mais moins 
que le précédent. Couleur de fond pour la rubrique active au survol. 
Utilisé aussi dans les tableaux: fond de la zone titre et couleur des lignes 
d'encadrement.
	background-color: #3071a1;
* Violet pour fonds de "boutons de menu" survolés.
	background-color: #8860d0;
*/

/* Styles génériques
--------------------
*/
/* Liens du texte (rouge).
*/
a {
	color: #991800;
	}
/* Interlignage plus espacé pour une meilleure lisibilité.
*/
p, .p, dl, dd, blockquote, address, pre, table, fieldset, .formulaire_spip fieldset.info {
	margin: 1em 0 0.4em;
	}
li, dl, dt, dd {
	margin-bottom: .15em;
	}
/* Caractères plus gros pour les titrages (et espacement en rapport).
*/
h3, .h3, .h3-like, .secondary h2, .secondary .h2, .secondary .h2-like, legend {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.2em;
	margin-bottom: 0.4em;
	margin-top: 1.5em;
	}

h4, .h4 {
	font-size: 1.3rem;
	font-weight: bold;
	-webkit-text-decoration: underline #FF5D00;
	text-decoration: underline #FF5D00;
	margin-top: 1.5rem;
	}
h3.spip {
	box-sizing: border-box;
	border-radius: 10px;
	border-top: 5px solid #FF5D00;
	border-left: 2px solid #FF5D00;
	border-right: 2px solid #FF5D00;
	border-bottom: 5px solid #FF5D00;
	vertical-align: middle;
	text-align: center;
	position: relative;
	display: block;
	margin: 10px 10% 7px;
	padding: 5px;
	width: 80%;
	min-height: 30px;
	background-color: #C1D73F;
	}
/* Retour à la ligne des titres, après les éléments flottants.
*/
h1, h2, h3, .h3, h4, .h4, div.cs_blocs {
	clear: both;
	}

/* Structure générale
---------------------
*/
/* Le "body" contient
	- une div.page ne contenant elle-même qu'une div.container ;
	- la div#spip-admin contenant les boutons "recalculer", etc. :
	- la div#colorbox qui n'apparaît que si on affiche une image.
	
	Fond général blanc, donc texte noir (en fait ça n'a aucune incidence, 
	sauf si l'image de fond n'est pas chargée).
*/
body {
	background-color: white;
	color: black;
	font-size: 1.1em;
	}
.page { background-color:#EDEAED; }

/* Boutons admin (en haut de page)
	Le positionnement 10% à droite a dû être mis pour améliorer la lisibilité 
	sur smartphone (de mémoire).
*/
.spip-admin-bloc, .spip-admin-float {
	right: 10%;
	}

/* La div.container (contenue dans la div.page) reçoit tout le contenu 
	standard de la page, réparti en 4 zones successives :
	- la div #header est celle du bandeau ;
	- la div #nav est la barre de menu :
	- une div .row contient les zones de texte propres à la page ;
	- la div #footer est le pied de page
	
	Elle est limitée en largeur par SPIPr, qui ajoute du padding pour écarter 
	le contenu du bord. L'inconvénient est que ça crée 2 bandes blanches sur 
	les côtés du bandeau de tête. Il faut donc forcer le padding à zéro.
	
	Les couleurs sont celles de la zone texte principale : texte noir sur 
	fond blanc cassé.
*/
div.container {
	background-color: #f8f8f8;
	color: black;
	padding: 0;
	}
/* Les bords de la div.row contenant le texte doivent être recalés sur le 
	container, du fait qu'on a forcé son padding à zéro.
*/
div.container > .row {
	margin: 10px 0;
/*	display: flex;*/
	}
/* Padding introduit initialement pour espacer le texte à gauche.
	Remplacé par le margin nul ci-dessus.
*/
/*div.content {
	padding-left: 25px;
	}
/* Bandeau latéral, positionné à droite.
	On garde un espace de séparation avec le texte principal.
*/
div#aside {
	margin-left: 5%;
	}

/* Bandeau de tête
------------------
	La hauteur mini permet d'afficher tout le contenu.
	Le padding-top SPIPr est inhibé car sans intérêt.
	Texte orange clair.
*/
#header {
	vertical-align: top;
	position:relative;
	display: inline-block;
	width:100%;
	padding: 10px;
	background:none; }
/*#header {
	min-height: 200px;
	padding-top: 0;
	background-repeat: repeat-x;
	background-color: black;
	background-position-y: top;
	background-position-x: left;
	color: #d09162;
	background-image: url('https://www.csr-bfc.fr/squelettes/css/ciel_etoile_200.png');
/*	font-size: 1em;
	}*/
div.row { margin: 0 }
header.accueil {
	width: 100%;
	max-width: 100%;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	background-color: #FFFFFF;
	min-height: 130px;
	box-sizing: border-box;
	border-radius: 10px;
	border: 3px solid #C1D73F;
	vertical-align: top;
	position: relative;
	display: inline-block;
	}
	
/* Les liens du bandeau ont la même couleur que les textes simples.
*/
#header a {
	color: #d09162;
	}
/* La partie du bandeau contenant le logo, le titre et le slogan.
	Le padding-top réserve la place pour les boutons d'admin (mis au pif, donc 
	susceptible d'être amélioré).
	La largeur est forcée à 100% pour que le formulaire de recherche se cale 
	à droite du bandeau
*/
/*header.accueil, header.span9{
	min-height:100px;
	padding-top: 30px;
	width:100%;
	}
/* Logo (photo de la lune) et titre principal
	On supprime le margin-bottom de spipr-dist sous la lune (pas besoin).
	Taille de police plus grosse que celle de SPIPr (2rem) et couleur orange 
	claire.
*/
/*#logo_site_spip {
	font-size: 3.3rem;
/*	margin-bottom: 10px;
*/
	}
/* Le logo est juste écarté du texte qui le suit.
*/
.header .spip_logo {
	margin: 0 1rem 0 0;
	}
/* Titre principal sans sérif, petites majuscules 24pts */
h1 { font-size: 24pt; font-variant: small-caps; font-family: Verdana, Geneva, sans-serif; color: #000000; text-align: center; }
/* Le slogan s'affiche plus petit que le titre.
	Le padding ajoute un bon interligne pour le détacher du titre.
	La couleur (la même que pour le titre) doit être forcée pour inhiber 
	le gris bleuté imposé par SPIPr.
*/
#slogan_site_spip {
	color: #d09162;
	font-size: .4em;
	padding-top: .5em;
	}
header.cartouche {
	margin-top: .5em;
	}

/* Formulaire de recherche en bas du bandeau d'en-tête.
	La largeur du contenant est forcée à 100% pour que le formulaire se cale 
	à droite du bandeau.
*/
#header > .row .form-search {
	width: 100%;
/*	position: relative;
/*	margin-left: 30px;/**/
	}
/* Calé à droite */
#formulaire_recherche {
	float: right;
	padding-right: 15px;
	max-width: 220px;
	}
/* Le titrage du formulaire a aussi la même couleur que le texte.
	(Surcharge de SPIPr).
*/
#formulaire_recherche .text-muted {
	color: #d09162 !important;
}
/**/

/* Barre du menu principal
--------------------------
/*	Fond de la barre coloré en vert (occupe toute la largeur de la 
	div.container). En fait c'est du vert sombre, qui n'apparaît que
	si la barre est réduite (menu "hamburger" sur smartphone).
*/
div#nav {
	box-sizing: border-box;
	vertical-align: middle;
	border-radius: 10px;
	position: relative;
	display: inline-block;
	width: 100%;
	background-color: #728025 !important;/*
	background: linear-gradient(to bottom, #C1D73F, #FFFFFF);/**/
	border: 3px solid #FF5D00;
	margin-top: 5pt;
	}
/* C'est ici qu'est défini le fond de la barre de menu std. */
.navbar-collapse, .nav-collapse-main {
	box-sizing: border-box;
	border-radius: 10px;
	background-color: #C1D73F;
	padding: 2pt !important;
	}

/* Boutons de menu
	Coins arrondis et fond gris très sombre.
	Margin et padding permettent de garder un peu d'espace autour.
*/
ul.navbar-nav { width: 100%; }
ul.navbar-nav li.nav-item {
	border-radius: 9px;
	display: inline-block;
	min-width: 11%;
	min-height: 12pt;
	margin: 1pt !important;
	padding: 3pt !important;
	text-align: center;
	background-color: #D84F00;
	font-size: 10pt;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
	vertical-align: middle;
	line-height: normal;
	}
/* Tjs pour éviter les interférences avec SPIPr */
.active.menu-items__lien { background-color: #D84F00; }

ul.navbar-nav li.nav-item a, li.breadcrumb-item span {
	vertical-align: middle;
	display: inline;
	text-decoration: none;
	margin-top: 5pt;
	text-align: center;
	background-color: transparent !important;
	color: #FFFF80 !important;
	padding: 0 !important;
	}
ul.navbar-nav li.nav-item span, li.nav-item.on a{ color: #FFFFFF !important; }
/*.navbar .nav > li {
	font-weight: bold;
	margin: 2pt 5pt;
	padding-right: 5pt;
	background-color: #343a40;
	border-radius: 3pt;
	}
/*	Les textes ont la couleur orange du titre, mais en plus clair pour plus 
	de lisibilité sur le fond gris sombre.
*/
/*.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .menu-items__lien {
	color: #ffffff;
	}
/* Les liens dans les boutons ne doivent pas en perturber l'aspect.
	Ils ont la couleur (orange clair) des textes standards.
*//*
.navbar .nav > li a, .navbar .nav > li.on a, 
.navbar-dark .navbar-nav .active > .nav-link {
	background-color: transparent !important;
	color: #ebd0bc;
	}
/* Bouton de la rubrique active : même couleur de texte mais fond bleu sombre.
*//*
.navbar .nav > li.on {
	color: #ebd0bc;
	background-color: #225072;
	}
/* Boutons au survol : texte blanc sur fond violet.
	Sauf la rubrique active qui reste bleue, juste un peu plus claire.
*/
.navbar .nav > li:hover {
	background-color: #8860d0;
	color: white;
	}
.navbar .nav > li.on:hover {
	background-color: #3071a1;
	color: white;
	}
.active.menu-items__lien:hover { background-color: #3071a1; }

/* Pas de sous-rubriques, mais c'est déjà le cas par défaut. 
	Peut servir si on remplace le menu "secteurs" par un menu arborescent, ou 
	on peut aussi laisser tomber et faire un menu déroulant complet...
*//*
#nav .menu-liste > .menu-liste { display: none; }

/* Rubriques réservées, à ne pas afficher au menu.
	Il s'agit des rubriques "Usage interne" et "Techniques".
	Pour le moment, ces rubriques ne contiennent pas d'article publié, donc 
	n'apparaissent pas mais ça pourrait changer.
*/
/*
.nav > li.rub1  > a, .nav > li.rub5  > a {
	display: none;
/*	background-image: none;
/*	background-color: #c6421e;
	}

/* Contenu principal de la page
-------------------------------
	
*/
/*
#content > section, #content > article, #footer > p.colophon {
	padding-left: 8px;
	}

/* Le chapeau est séparé du reste du texte par un espacement avec un 
	trait de séparation horizontal (gris clair).
*/
div.chapo {
	border-bottom: 1px solid lightgrey;
	padding-bottom: 1em;
	margin-bottom: 1.5em;
	}
/* Cadres pour les actualités et les nouveautés, page d'accueil.
*/
div.cadre_actus, div.cadre_new {
	box-sizing: border-box;
	vertical-align: top;
	border-radius: 15px;
	position: relative;
	display: inline-block;
	margin: 5px;
	width: 100%;
	padding: 8px;
	background-color: #dde7c0;
	border-top: 7px solid #FF5D00;
	border-left: 1px solid #FF5D00;
	border-right: 1px solid #FF5D00;
	border-bottom: 7px solid #FF5D00;
	text-align: center;
}
div.cadre_actus h2, div.cadre_new h2 {
	display: inline-block;
	font-weight: bolder;
	font-size: 1.8rem;
	background-image: url('https://www.csr-bfc.fr/squelettes/css/logo_chv-souris.png');
	background-size: 32px;
	background-repeat: no-repeat;
	padding-left: 38px;
	min-height: 32px;
}
div.actu {
	display: inline-block;
}
div.actu h3.spip {
	width: 90%;
	margin: auto;
	margin-top: 15px;
}
/* Tableaux dans les articles
	Ils sont encadrés par des traits fins bleu sombre.
	On force le texte en noir pour remplacer le gris sombre de SPIPr.
*/
.table, table.spip {
	border-color: #3071a1;
	color: black;
	}
table.spip th, table.spip td, table.spip caption {
	border-width: 1px;
	border-style: solid;
/*	border-color: #ddd;*/
	border-color: #3071a1;
	}
/* Ligne-titre du tableau.
	Fond bleu foncé (moyen), texte blanc gras centré.
	On force la position en haut car SPIPr la positionne en bas du tableau.
*/
table.spip caption {
	background-color: #3071a1;
	color: white;
	font-weight: bold;
	caption-side: top;
	text-align: center;
	}
/* Ligne d'en-tête (légende des colonnes)
	Fond bleu clair. On doit forcer le bleu des cadres pour surcharger SPIPr.
*/
table.spip tr.row_first, table.spip thead th {
	background-color: #a7d5f6 !important;
/*	background-color: #3071a1 !important; */
	border-color: #3071a1 !important;
	}
/* Lignes impaires, fond orange très pâle */
table.spip tr.row_odd {
	background-color: #f6f2ef !important;
	}
/* Lignes paires, fond orange pâle */
table.spip tr.row_even {
	background-color: #f6ece4 !important;
	}

/* TROMBINOSCOPE */
/* Bloc "une personne", englobant les 3 suivants (photo, nom et statut)
*/
div.bloc_trombi {
	display: inline-block;
	border: solid 1px;
	}
/* Photo dans le trombino
*/
div.photo_trombi {
	text-align: center;
	vertical-align: middle;
	min-width: 130px;
	min-height: 160px;
	padding: 3px;
	}
/* Nom dans le trombino
*/
div.nom_trombi {
	text-align: center;
	vertical-align: middle;
	min-width: 130px;
	min-height: 25px;
	}
/* Statut dans le trombino
*/
div.texte_trombi {
	text-align: center;
	vertical-align: middle;
	min-width: 130px;
	min-height: 30px;
	color: #808080;
	font-weight: bold;
	}

/* Blocs repliables
	Les titres s'affichent sur un fond de ligne jaune très pâle.
*/
.blocs_replie, .blocs_titre {
	background-color: #fcfef0;
	}
/* Carte des clubs FFS (Iframe dans une div)
*/
#carte_clubs {
	width: 90%;
	text-align: center;
}
#iframe_clubs {	vertical-align: top;
	position: relative;
	display: inline-block;
	width: 500px;
	min-height: 480px;
	background: none;
}

/* Bandeau latéral (colonne de droite)
--------------------------------------
/* À compléter...
	Les menus de navigation intra-rubrique sont à revoir (squelettes) et leurs 
	CSS par la même occasion. Projets :
	- Ajouter un menu pour accéder rapidement au contenu des autres rubriques ?
	- Un menu "mots-clés" ?
	- Carrousel de photos ? ou juste dans le sommaire ?
*/
/* Liste des articles de la même rubrique.
	Si l'on est sur la page d'un article, il apparaît aussi dans la liste 
	mais ce n'est pas un lien. On lui donne la même couleur mais on le démarque 
	des autres par un texte gras (et un '>' ajouté par le squelette).
*/
#aside span.art-actuel {
	color: #991800;
	font-weight: bold;
	}

/* Pied de page
---------------
*/
#footer {
	padding-top: .5em;
	padding-bottom: 1rem;
	margin-top: 2rem;
	color: #225072;
	}
/* Couleur du logo SPIP */
.footer .generator a {
	color: #225072;
	}
/**/