/* Formatage formulaires                                          */
/* -------------------------------------------------------------- */
/* contact */
#formcontact {
	position: relative;
	width  : 600px;
	height : 400px;
	margin : 0 auto;
	background : #C7EFF3; /* bleu clair */
}
#emailcontact {
}
#messagecontact {
}
.labelcontact {
	font-weight: bold; 
	text-decoration : underline;
	background : #C7EFF3; /* bleu clair */
}
.inputcontact, .textareacontact {
	border  : none;
	padding : 0 10px;
	margin  : 0;
	width   : 100%;
	background : #CEF6E3; /* vert clair */
}
.inputcontact:focus, .textareacontact:focus {
  background   : rgba(0,0,0,.1); /* gris */
  border-radius: 5px;
  outline      : none; /* supprimer le focus par défaut de quelques navigateurs */
}
.boutoncontact {
	margin : 0 45%; /* centré horizontalement */
}
/* benevolat */
.wrapperbenevolat {
/* Orienté smartphone : passe la zone principale à 100% */
    clear: none;
    float: left;
    overflow: hidden;
    width: 100%;
	padding: 1%;
	background-color: var(--blanc);
	font-size: 100%;
}
#formbenevolat {
	position: relative;
	width  : 350px;
	/* height : 900px; */
	margin : 0 auto;
	background : #C7EFF3; /* bleu clair */
}
.erreur { 
	background: #fbe3e4; 
	color: #8a1f11; 
	border-color: #fbc2c4; 
}
.labelbenevolat {
	font-weight: bold; 
	text-decoration : underline;
	background : #C7EFF3; /* bleu clair */
}
.inputbenevolat, .textareabenevolat {
	border  : none;
	padding : 0 10px;
	margin  : 0;
	width   : 100%;
	background : #CEF6E3; /* vert clair */
}
.inputbenevolat:focus, .textareabenevolat:focus {
  background   : rgba(0,0,0,.1); /* gris */
  border-radius: 5px;
  outline      : none; /* supprimer le focus par défaut de quelques navigateurs */
}
.boutonbenevolat {
	margin : 0 45%; /* centré horizontalement */
}
.formulaire_spip #formbenevolat .choixbenevolat {display:inline;}
.formulaire_spip #formbenevolat .choixbenevolat label {display:inline;}

/* efv */
.formulaire_erreur {
	background: #ce0f0f; 
	color: #f4e671; 
	border-color: #201f1f;
}

.wrapperefv {
/* Orienté smartphone : passe la zone principale à 100% */
    clear: none;
    float: left;
    overflow: hidden;
    width: 100%;
	padding: 1%;
	background-color: var(--blanc);
	font-size: 100%;
}
#formefv {
	position: relative;
	width  : 350px;
	height : 900px;
	margin : 0 auto;
	background-color : #C7EFF3; /* bleu clair */
}
.erreurefv { 
	background: #fbe3e4; 
	color: #8a1f11; 
	border-color: #fbc2c4; 
}
.labelefv {
	font-weight: bold; 
	text-decoration : underline;
	background : #C7EFF3; /* bleu clair */
}
.inputefv, .textareaefv {
	border  : none;
	padding : 0 10px;
	margin  : 0;
	width   : 100%;
	background : #CEF6E3; /* vert clair */
}
.inputefv:focus, .textareaefv:focus {
  background   : #CEF6E3; /* vert clair */
  border-radius: 5px;
  outline      : none; /* supprimer le focus par défaut de quelques navigateurs */
}
.boutonefv {
	margin : 0 45%; /* centré horizontalement */
}
.formulaire_spip #formefv .choixefv {display:inline;}
.formulaire_spip #formefv .choixefv label {display:inline;}
/* ============================================================== */
/* Formatage alerteinfo par mot-clé                               */
/* -------------------------------------------------------------- */
.alerteinfo {
    width: 100%;
    padding: 0px;
    Margin: 0px;
}
.alerte {
    padding: 2px 0px 2px 0px; /* !important */
    background: #B03838;
	color: #fff;
	text-align: center;
}
.alerte a {
	color:white;
	text-decoration:underline;
}
/* PERSO                                                          */
/* Création : 25 février 2014 / ... / 01 janvier 2019             */
/* Cette feuille contient les styles spécifiques au site.         */
/* Ces styles ne sont pas indispensables mais..                   */
/* ils définissent les spécificités de la charte graphique.       */
/* ============================================================== */
/* Formatage colonnes                                             */
/* -------------------------------------------------------------- */
/* Formatage des balises html                                     */
/* -------------------------------------------------------------- */
a { 
	color: #0B610B; 
	text-decoration: none; 
	font-size: 100%;
}
a:focus,
a:hover,
a:active { 
	background-color: #0B610B; 
	color: #FFF; 
	text-decoration: none; 
}
/* -------------------------------------------------------------- */
/* formatage des citations */
blockquote {
	padding: 0px 0px;
	font-style: normal;
}
cite {
	margin-left: 5px; 
	font-style: italic
}
/* -------------------------------------------------------------- */
/* formatage des balises titres */
h1,.h1 { font-size: 1.5em; font-weight: bold; line-height: 3em; margin-bottom: .75em; }
h2,.h2 { font-size: 1.3em; font-weight: bold; line-height: 2em; margin-bottom: 1em; }
h3,.h3 { font-size: 1.15em; font-weight: bold; line-height: 1em; margin-bottom: 1.25em; }
h4,.h4 { font-size: 1em; font-weight: bold; line-height: 1em; margin-bottom: 1.365em; }
h5,.h5 { font-size: 0.9em; font-weight: bold; line-height: 1em; margin-bottom: 1.5em; }
h6,.h6 { font-size: 0.8em; font-weight: bold;  line-height: 1em;}
/* -------------------------------------------------------------- */
img.photo { 
	display: block; 
	margin-left: auto; 
	margin-right: auto;  
}
	
html {font-size:95%;}
ul { margin: 0; }
/* p {margin-bottom: 1em; font-size: 95%;} */
/* ============================================================== */
/* les couleurs 												  */
/* zone à vérifier <= trop de bidouillages ont laissé des traces  */
/* -------------------------------------------------------------- */
/* 
Ces couleurs ne sont pas systématiquement appelées mais utilisées fréquemment directement dans les classes ci-dessous.
Elles constituent surtout une référence. 
On va tenter d'utiliser la pseudo classe :root et les variables css :
définition --variable: xxx et appel var(--variable)
*/

/* :root =>pseudo classe vers <html> rien de moins ! */
:root {
	--bleuclair: #C7EFF3;
	--bleumoyen: #b0ecfc;
	--bleufonce: #173cdb;
	--vertclair: #CEF6E3;
	--vertfonce: #37921b;
	--blanc: #FFFFFF;
	--noir: #000000;
	--colorfdpieddepage: #F5ECCE;
	--colorfdliensext: #D5CC6F;
}
/* faudrait voir à faire disparaître cette classe */
.fondbleuclair {
	background-color: var(--bleuclair); 
}
/* 
une page comprend de 3 à 5 parties :
- toujours : le bandeau = le haut de page
- toujours : la partie principale au centre
- toujours : le pied de page 
- option : la colonne de gauche
	pour les éléments internes au site : citation, brèves, mots clés, catégories...
- option la colonne de droite
	pour les éléments externes au site : réseaux sociaux, liens externes=sites...
Pour les rubriques spécifiques "séparées" ou isolées  du reste du site, 
les classes spécifiques sont suivies du n° de la rubrique 	
*/
/* -------------------------------------------------------------- */
/* bandeau */
/* .............................................................. */
/* principale */
a:visited {
    color: #735c65;
}
a.cs_glossaire, a.cs_glossaire:hover, #glossOverDiv {
	color: currentcolor;
}
a:focus, 
a:hover, 
a:active { background-color:#2b6006; color:#fff; text-decoration:none; }

.arbo { 
	clear: both; 
	font-size: .9em; 
	color: var(--blanc); 
}
.main {padding: .5em 0;} 

.textecentre { 
	font-size: 95%; 
	font-style: normal;
}
.nav li a {
	background: var(--bleumoyen);
	color: var(--bleufonce);
}
.nav li.on a {
    background: var(--bleufonce);
    color: var(--blanc);
}
.nav li a:focus, .nav li a:hover, .nav li a:active {
    background: var(--vertfonce);
    color: var(--blanc);
}
.nav li {color: var(--bleufonce);}

	
/* .............................................................. */
/* pied */
.footer { clear: both; background-color: #F5ECCE; }
/* .............................................................. */
/* colgauche */
/* Pour davantage de logique, ce serait mieus de la baptiser .colgauche */
/* .............................................................. */
/* rubriques spécifiques "séparées" */

/* redéfinition des classes des plugins */
/* plugin menuder */
.menuder,
.menuder ul { 
	background-color: var(--vertclair); 
	font-size: 1em;
	border-style: none;
}
.menuder li:hover,
.menuder li.hover { background-color: var(--colorfdpieddepage); } 
/* .............................................................. */
.comment {
	font-size: 75%; 
	font-style: italic;
}
.entete { 
	background-color: var(--bleuclair); 
    border-bottom: 1px solid;
    padding-bottom: 0;
    text-align: center;
}
.chapo { font-weight: bold; font-size: 90%; background-color: var(--blanc); }
.main {padding: .5em 0;} 
.page {
	width: 90%; 
	margin: 0 auto; 
	padding: 0px 0em; 
}
.RBcentrerImage { text-align: center; } /* probablement à supprimer = inutilisée? */
.RBentete { background-color: #F5ECCE; } /* probablement à supprimer = inutilisée? */

.RBimages,  a.spip_logos { 
	margin-left:auto; 
	margin-right:auto; 
	text-align: center; 
} 
.suppblog { font-size:0.9em; font-style:normal; }
.texte { font-size: 100%; }
.texteblog { font-size: 100%; font-style:italic; }
.titreaside {
	font-weight: bold; 
	text-decoration : underline;
	margin-left:auto; 
	margin-right:auto; 
	text-align:center;
	font-style: normal;
}
.titreblog { font-size: 1em; font-weight: bold; }
.titrecentre {
	font-size: 120%; 
	font-weight: bold; 
	text-decoration : underline;
	margin-left:auto; 
	margin-right:auto; 
	text-align:center;
	margin-bottom: 1em;
 	font-style: normal;
}
.titrecolonnegauche, 
.soustitrecentre, 
.titrecolonnedroite {	
	font-size: 110%;
 	font-weight: bold; 
	text-decoration : underline;
	margin-left:auto; 
	margin-right:auto; 
	text-align:center;
	font-style: normal;
}

.lienstop {
	min-height: 40px;
	position: relative;
	top: 0;
	width: 100%;
	margin: 0px;
	text-align:center;
	display:inline-block;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 11px;
	font-weight: normal;
	text-transform: uppercase;
	color:#fff;
	text-decoration-line: none;
	padding:0;
	line-height:40px;
	background:var(--colorfdliensext);
}
.liensinternes {
	position: relative;
	top: 0;
	width: 100%;
	margin: 0px;
	text-align:center;
	display:inline-block;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 13px;
	font-weight: bold;
	color:#db1762;
	text-decoration-line: none;
	padding:0;
	line-height:40px;
	background:var(--colorfdliensext);
}

.sousrubliena {
	display: inline-block;
padding: 0.25em 0.5em;
margin: 0.5em 0.25em 0.5em 0;
border-radius: 0.25em;
text-decoration: none;
background: #f0f0f0;
color: #db1762;
}
/* reformatage des classes Spip */
.content {
	min-height: auto;
}
.wrapper {
    clear: none;
    float: left;
    overflow: hidden;
    width: 70%;
	padding: 1%;
	background-color: var(--blanc);
	font-size: 100%;
}
.wrapperrub {
    clear: none;
    float: left;
    overflow: hidden;
    width: 100%;
	padding: 1%;
	background-color: var(--blanc);
	font-size: 100%;
}

/* Formatage des balises spip */
/* Positionner le formulaire de recherche (=> supprimer la position absolute) */
#formulaire_recherche { position: relative; top: 0; right: 0; border: 0; }

/* Gabarit d'impression
------------------------------------------ */
/* styles d'impression */
@media screen and (max-device-width:500px) {
	@page {
		margin-left: 0cm;
		margin-right: 0cm;
	
	}
@media print {
	@page {
		width: 16cm;
		margin-left: 3cm;
		margin-right: 2cm;
	
	}
	/* fond de page / police / taille de la police  */
	body { 
		background-color :#fff;
		font-family :Serif;
		font-size :12pt;
		width: 100%;
	}
	/* pas de bordure / marges à0 */
	.page { 
		margin :0;
		border :none;
		width: 100%;
	}
	.wrapper {width: 100%; }

	/* titres et liens en noir */
	h2, h3, #contenu h3, #contenu a, a { 
		color :#000;
		width: 100%;
	}
	/* Ne pas afficher : en-tête, colonne droite, colonne de gauche, pied de page  */
	.pasdimpression,
 	.aside,
	.footer,
	.asideleft,
	.entete { display: none; }


}

/* perso.css */
/* typo.css */
.agendavoir {
	font-size: 80%;
}

/* plugin varicelle */
.btn {
	position: relative;
	display: inline-block;
	width: auto;
	padding: .3em 1em;
	overflow: visible;
	/*white-space: nowrap;*/
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;

	background: #DDD url(img/sprite/varicelle.png) left top repeat-x;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.5);
	box-shadow: 0 1px 3px rgba(0,0,0,.5);

	/*border: 0;*/
	border: 1px solid #DDD;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;

	text-align: center;
	font-size: 80%;
	line-height: 1;

	/*font-weight: bold;*/
	text-shadow: 0 -1px rgba(0,0,0,.20);
}