/* --------------------------------------------------------------

   Habillages generaux du site
   Typo
   Couleurs
   Titraille
   Blocs specifiques
   
	--------
	couleurs
	--------
	
	bleu : rgb(0,114,182);
	bleu fonce : rgb(0,34,54);
	bleu intermediaire : rgb(2,76,127);
	orange : rgb(244,159,13);
	vert : rgb(187,204,0);
	aubergine : rgb(71,0,31);
	violet : rgb(107,43,116);
	!!! alpha (rgba(R,G,B,A)) non gere sous ie9 et precedents => suppression des transparences dès qu'il n'y en a pas besoin et sinon gestion dans ie.css
	rose ifac : rgb(172,109,166)
	marron glace rgb(176,162,131)
	marron glace leger rgb(201,190,169)
	marron fonce rgb(79,57,44)

-------------------------------------------------------------- */

/*------------------------------------*\
    $CONTENU
\*------------------------------------*/
/**
 * BLOCS, TITRES, TYPO.......Elements generaux
 * MENUS.....................Navigations et boutons
 * FORMULAIRES...............Elements de formulaires
 * THEME DE BASE.............Couleurs par defaut
 *
 *
 *	Les couleurs non-spécifiées dans la partie THEME DE BASE doivent être laissées telles quel.
 */






/*------------------------------------*\
    $BLOCS, TITRES
\*------------------------------------*/
body {
	font-family: 'robotoregular', helvetica, arial, sans-serif;
	font-size:14px;
	color : rgb(60,60,60);
}

p{margin-bottom:5px;margin-top:5px;}
a{color: rgb(2,76,127);text-decoration:none;}
a:visited {color : rgb(2,76,127);} /* IMPORTANT : le a:visited doit tjs être defini avant le hover */
a:hover{color: rgb(0,114,182);text-decoration:none;}
b, strong, .bold {font-family: 'robotobold', helvetica, arial, sans-serif;font-weight:normal;}
i{font-family: 'robotoitalic', helvetica, arial, sans-serif;font-style:normal;}

.section {}
	.section .nav{
		color: rgb(0,0,0);
		background: none;
		margin:10px 0px;
	}
	.section p {text-align:justify;}





@media print {
	/*  Pour les liens, on les souligne et
	/*  on affiche l'URL cible a la suite des liens sortants (!)
	---------------------------------------------- */
	a {color: rgb(0,0,0); text-decoration: underline; }
	a:visited { color : rgb(0,0,0); text-decoration: underline; }
	a.spip_out:after, a.spip_glossaire:after, a.spip_mail:after { display: inline; content: " [" attr(href) "]"; }
	
	/*gestion des gras et italics à l'impression ???? Remettre les polices standard et des font-weight ??? */
}


.nav a,
.nav li,
.nav a:hover,
.titre,
.nav,
.footer,
.footer a,
.footer a:hover{color: rgb(255,255,255);}
.footer{font-size:0.8em;}
.header {color: rgb(79,57,44); font-family:robotolight;}
#nom_site{font-size:2em;}
#baseline{font-size:1.2em;padding-bottom:5px;}

/* --- Titraille --- */
.titre{font-family: 'robotolight', helvetica, arial, sans-serif ; font-size:1.8em; margin-bottom:5px;}
.section .titre {color:rgb(255,255,255); margin-top:10px; margin-bottom:10px; padding:1em;}
.section .titre .soustitre{font-size: 0.6em;}


@media only screen and (max-width: 479px) {
	.titre {font-size: 1.2em;}
}

.bandeau-presentation{margin-top:-10px;} /*bandeau place après un h1.titre dans .section*/
@media print{.bandeau-presentation{display:none;}}

.footer .titre {margin-top:10px;}
hr {background-color: #CCC;	border: #CCC; }


.section h2, .section h2.spip {
	margin-top: 2em;
	margin-bottom: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
	color: #FFF;
	font-size: 1.2em;
	line-height:2em;
	display:inline-block;
	padding: 5px;
	margin-left:-20px; /* cale sur le padding du .texte */
	padding-left:20px;
	padding-right:20px;
}
@media only screen and (max-width: 479px) {
	.section h2, .section h2.spip {font-size: 1em;}
}

.section h3, .section h3.spip {
	text-align: left;
	/*padding-top: 5px;*/
	margin-top: 1em;
	margin-bottom: 0.5em;
	font-size: 1.2em;
}
/*h2 + h3, h2.spip + h3,
h2 + h3.spip, h2.spip + h3.spip {
	margin-top: 0px;
}*/


.section h3 a,
.section h3.spip a,
.section h3 a.spip_out,
.section h3.spipa.spip_out,
.section h2 a,
.section h2.spip a,
.section h2 a.spip_out,
.section h2.spipa.spip_out {
	color: rgb(2,76,127);
}


@media print {
	.section h3 a,
	.section h3.spip a,
	.section h3 a.spip_out,
	.section h3.spipa.spip_out,
	.section h2 a,
	.section h2.spip a,
	.section h2 a.spip_out,
	.section h2.spipa.spip_out {
		color: rgb(0,0,0);
		text-decoration: underline;
	}
}

/* couleur par cible */
.titre.formation {color:rgb(244,159,13);}
.titre.animation {color: rgb(187,204,0);}
.titre.documentation {color:rgb(71,0,31);}

.cta.formation, .onglet.formation {background:rgb(244,159,13);}
.cta.animation, .onglet.animation {background: rgb(187,204,0);}
.cta.documentation, .onglet.documentation {background:rgb(71,0,31);}


.chapo {
	font-size:1.2em;
	margin-top: 20px;
	margin-bottom: 20px;
}


/* --- Blocs actus et listes d'articles --- */
.actu_liste .actu_image,
.liste_articles .article-image{float:left;margin-right:15px;}

.actu_liste .actu_detail,
.liste_articles .article-detail{margin-bottom:30px;clear:both;}

.actu_liste .actu_detail p,
.liste_articles .article-detail p{margin-left:165px;}
@media only screen and (max-width: 479px) {
	.actu_liste .actu_detail p,
	.liste_articles .article-detail p{margin-left:0px;}
}

/* Ne pas mettre les couleur suivantes dans les themes */
.actu_liste a.titre_actu,
.liste_articles a.article-titre{font-family: 'robotomedium', helvetica, arial, sans-serif; display:block;margin-top:10px;margin-bottom:10p;font-size:1.2em;color: rgb(0,114,182);}
.actu_liste .site_referent a,
.actu_detail:hover a.titre_actu, .liste_articles a.article-titre{
	color: rgb(0,114,182);
}
/* --- */

@media print {
	.actu_liste .site_referent a{color:rgb(0,0,0); text-decoration:underline;}
}


/* --- Blocs ---*/
.section .bloc{
	margin-top: 40px;
	padding: 10px;
	padding-top: 20px;
	border: solid 1px rgb(0,114,183);
	-moz-border-radius:5px; /* Firefox 3.6 and earlier */
	-webkit-border-radius:5px; /* Safari and Chrome */
	-o-border-radius:5px; /* Opera */
	-khtml-border-radius:5px; /* Safari and Konqueror */
	border-radius:5px;
}
.section .bloc .titre {
	float: left;
	background: none; /* Annule le gradiant des .section .titre */
	font-size: 1em;
	margin-top: -35px;
	margin-left: 5px;
	margin-right: 50px; /* pour laiser la place au picto */
	/*text-align: center;*/
	color : #fff;
	border: 2px solid rgb(255,255,255);
	padding: 4px;
}
.section .bloc .inter_titre{
	margin-top: 10px;
	color : #fff;
	border: 2px solid rgb(255,255,255);
	padding: 4px;
}
.section .bloc .picto{
	height:50px;
	width:50px;
	float: right;
	margin-top: -55px;
	margin-left: 50px;
	background: no-repeat 50% 50%;
}

@media print {
	.section .bloc{
		border: none;
		/* Eviter les saut de page a l'interieur de l'element */
		/*page-break-inside: avoid;*/
	}
	.section .bloc .titre {}
	.section .bloc .inter_titre{}
	.section .bloc .picto{display:none;}
}

/* --- Bloc doc joint --- */
/* ---- Enleve pour l'instant pour rester au CSS "bloc" ---- */

.documents_joints {margin: 0px -20px; padding:5px;}
/*#documents_joints .titre{margin-left:10px;border:1px solid #FFF; padding:2px;background:#666;width:150px;margin-top:-10px;font-size:1em;text-align: center;}*/
	.documents_joints .div-titre{
		border-top :	1px solid rgb(220,220,220);
		padding :		5px;
	}
.documents_joints #conteneur_documents {
	display:inline-block;
	width:100%;
	text-align:center;
}
.documents_joints .document {
	margin-top: 20px;
	display: inline-block;
	width: 120px;
	font-size: 0.8em;
	margin: 5px;
	text-align:center;
	vertical-align:top;
}
.documents_joints .document .titre_document{
	display: inline-block;
}

#portfolio {
	display:inline-block;
	width:100%;
}

#portfolio .document {
	margin-top: 20px;
	display: inline-block;
	font-size: 0.8em;
	margin: 3px;
}

/* --- bloc une --- */
.bloc_une .conteneur_une .conteneur_texte{
	background-color:rgba(0,0,0,0.5);
}
.bloc_une .conteneur_une .titre_une {background-color:rgb(0,0,0);}

/* --- tableaux --- */
table {
	width: 		100%;
	text-align: left;
	border:		none;
	clear: 		both;  /* correction des tables flottantes sous firefox ?! => correction de la table dans le header */
}
table tr.odd{}
table tr.even{background-color: rgba(201, 190, 169, 0.2);}
table tr.odd:hover, table tr.even:hover {background-color: rgba(201, 190, 169, 0.5);}

th {
	text-align:			center;
	padding:			7px 5px;
    border:				1px solid #999;
    color:				rgb(79, 57, 44);
    background-color:	rgb(201, 190, 169);
}
td{
	vertical-align:	middle;
	padding:		10px;
	border:			1px solid #999;
}
table a {color : rgb(60,60,60);}
table a:visited {color : rgb(60,60,60);} /* IMPORTANT : le a:visited doit tjs etre defini avant le hover */
table a:hover {color: rgb(60,60,60);}

@media print {
	td {border:none;} 
	th {border:none;}
}


blockquote, blockquote.spip {
	font-family: 'robotoitalic', helvetica, arial, sans-serif;
	padding-left : 10px;
	margin-left : 10px;
	border-left: 1px solid #CCC;
}



/* Couleur des tableaux */
/* Attention à l'ordre des univers: les CSS se parasitent */
.univers_4 aside table {background-color: rgba(250,250,250,1); font-size: 13px;}
.univers_4 tbody td li a.session{background-color: rgba(0,114,183,0.3);}
.univers_4 tbody td li a.session.alterne{background-color: rgba(0,114,183,0.1);}
.univers_4 tbody td li a:hover.session{background-color: rgba(0,114,183,1);}
.univers_4 tbody tr.session_on{background-color: rgba(0,114,183,1);}
.univers_4 tbody tr.session_out{background-color: rgba(0,114,183,0);}
.univers_4 tbody tr.alterner, tbody tr.session_out .alterner{background-color: rgba(0,114,183,0.3);}

.univers_8 aside table {background-color: rgba(250,250,250,1); font-size: 13px;}
.univers_8 table td {vertical-align:middle;}
.univers_8 tbody td li a.session{background-color: rgba(244,159,13,0.3);}
.univers_8 tbody td li a.session.alterne{background-color: rgba(244,159,13,0.1);}
.univers_8 tbody td li a:hover.session{background-color: rgba(244,159,13,1);}
.univers_8 tbody tr.session_on{background-color: rgba(244,159,13,1);}
.univers_8 tbody tr.session_out{background-color: rgba(244,159,13,0);}
.univers_8 tbody tr.alterner, tbody tr.session_out .alterner{background-color: rgba(244,159,13,0.3);}

.univers_63 aside table {background-color: rgba(250,250,250,1); font-size: 13px;}
.univers_63 tbody td li a.session{background-color: rgba(187,204,0,0.3);}
.univers_63 tbody td li a.session.alterne{background-color: rgba(187,204,0,0.1);}
.univers_63 tbody td li a:hover.session{background-color: rgba(187,204,0,1);}
.univers_63 tbody tr.session_on{background-color: rgba(187,204,0,1);}
.univers_63 tbody tr.session_out{background-color: rgba(187,204,0,0);}
.univers_63 tbody tr.alterner, tbody tr.session_out .alterner{background-color: rgba(187,204,0,0.3);}

@media only screen and (max-width: 479px) {
	table {font-size: 1em;}/* reduction de la taille de la police dans les tableaux listant les sessions */
}

.pagination  {
	padding :			5px;
	background-color :	rgb(240,240,240);
}

/* Listes a  puce */
.section ul {
	padding: 0px;
	margin:0px;
}
.section ul li {
	list-style-type: disc;
	margin-left: 1em;
}

.section ul.spip, .section ol.spip {
	margin-bottom: 10px;
	margin-left: 1em;
	margin-top:5px;
}

/* Listes imbriquees */
.section ul.spip li ul.spip{
	/*margin-left: 40px;*/
	margin-top:0px;
}

/* Correctif menu SACI */
.section ul.secondary-nav {margin-top:2em;}


.taxonomie{
	margin :			30px -20px 0px -20px;
	padding :			5px;
	/*border-top :	1px solid rgb(220,220,220);*/
	background-color :	rgb(240,240,240);
}
	.taxonomie ul{}
	.taxonomie ul.vocabulaires{}
		.taxonomie ul.vocabulaires li{}
		.taxonomie ul.vocabulaires li.vocabulaire-titre{display:inline-block; margin:10px 0px;}
	.taxonomie ul.termes{display:inline;}
	.taxonomie ul.termes li{
		display:inline-block;
		margin:2px;
		padding:2px;
		/*border:1px solid rgb(220,220,220);*/
		border : 1px solid rgb(120,120,120);
	}



/* --- CARTE --- */
.carto .legende {
	border: 1px solid #B0C4DE;
	border-top:none;
	padding: 5px;
	padding-top: 10px;
}


@media print {

}
/* 	-----------------
	fil d'ariane
	-----------------*/
.fil_ariane {}
.actu_detail .fil_ariane{margin-bottom:5px;margin-top:-8px;}

/* 	-----------------
		pub openX
	-----------------*/
.bloc_pub{}
.bloc_pub .titre{
	background: rgb(220,220,220);
	color:#FFF;
	font-size:0.8em;
	font-style: italic;
	margin-bottom:5px;
}

.alerte{
	clear: both;
	display: block;
	margin: 3px;
	padding: 5px;
	color : #FF0000;
	border: 1px solid #FF0000;
	background-color:#FFF;
}
.alerte a {
	color : rgb(71,0,31);
}
.alerte a:hover {
	color: rgb(107,43,116);
}

/* ------------------
    BOUTON SOCIAUX
------------------- */
.boutons_sociaux {
    display: inline-block;
    text-align:center;
    width: 100%;
}

.boutons_sociaux .bouton_social{
    display:inline-block;
    width:110px;
    margin:10px 10px;
    /*height: 235px;  Pour flyout (boite de commentaires) facebook - Bouton J'aime */
}


.fb-like{
    /* On cache la pop-up de commentaires j'aime */
    height: 20px;
    overflow: hidden;
}

.footer .bouton_social {
    margin : 5px 0;
}

@media only screen and (max-width: 479px) {
    .boutons_sociaux {
        display: inline-block;
        width: 100%;
        text-align: left;
    }

    .boutons_sociaux .bouton_social{
        display: block;
        margin:10px auto;
        /*height: auto; Sur mobile facebook redirige automatiquement vers son site mobile/son appli */
    }    
}

.tags {
	font-size: 0.8em;
	color:rgb(120,120,120);
	margin-top: 5px;
}

.exposant {
	position: relative;
	bottom: 1px;
	font-size: .8em;
	line-height: .8em;
	vertical-align:super;
	text-decoration:none;
}

/* ****************
	COULEURS
**************** */


/*------------------------------------*\
    $MENUS, BOUTONS
\*------------------------------------*/

/* Menu principal */
.nav {text-align:center;}
	.nav .titre{display:inline-block;}
	.nav a{display:inline-block;vertical-align:middle;max-width:140px;}

.nav.main{font-family:robotoregular;}

	.nav-button { display: none; } /* hide the navigation button by default */
/* Version mobile */
@media only screen and (min-width: 0px) and (max-width: 475px) {
	.nav.main, .nav.main .wrapper{height:0px;}
	.nav a{max-width:none;}
	
	.nav-button {
		display: block;
		position: absolute;
		top: 7px;
		right: 7px;
		width: 50px;
		height: 35px;
		background: url('../img/menu-mobile/menu-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/menu-mobile/menu-icon-large.png'),    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/menu-mobile/menu-icon-large.png'),     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/menu-mobile/menu-icon-large.png'),      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 21px, 100%;
		cursor: pointer;
		border: 0 none;
		border-bottom: 1px solid rgba(255,255,255,.1);
		box-shadow: 0 0 4px rgba(0,0,0,.7) inset;
		border-radius: 5px;
		z-index: 999;
		text-indent: -9999px;
	}
	.nav-button:hover { 
		background-color: rgba(0,0,0,.1); 
	}
	.nav-button.open {
		background: url('../img/menu-mobile/close-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/menu-mobile/close-icon-large.png'),    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/menu-mobile/close-icon-large.png'),     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/menu-mobile/close-icon-large.png'),      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 21px, 100%;
	}
}


/*	$primary-nav	*/
.primary-nav {
	display:  -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display:     -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display:  -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex;	/* NEW - Chrome */
	display: 		 flex;	
	align-items: stretch;
}
	.primary-nav li {		
		flex-direction: column;
	}
		.primary-nav li a {
			margin: auto;
			padding:10px;
			text-align:center;
			background-color:inherit;
		}
		
		.primary-nav .menu-items{display:none;}
		.primary-nav li:hover .menu-items{
			display:flex;
			flex-direction: column;
			position: absolute;
			z-index: 9999;
			box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
		}
		.primary-nav li li {
			display:  -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
			display:     -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
			display:  -ms-flexbox; /* TWEENER - IE 10 */
			display: -webkit-flex;	/* NEW - Chrome */
			display: 		 flex;
		}
		.primary-nav li.menu-entree .items{}
		.primary-nav li:hover .menu-items .item{}
		.primary-nav li ul a{text-align:left;margin:0;background:#FFF;}
		
		
@media only screen and (min-width: 0px) and (max-width: 475px) {
	.primary-nav li:hover .menu-items{position : relative;}

	.primary-nav {
		display:  -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
		display:     -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
		display:  -ms-flexbox; /* TWEENER - IE 10 */
		display: -webkit-flex;	/* NEW - Chrome */
		display: 		 flex;
		flex-direction: column;
		width: 100%;
		background-color: rgb(0,34,54); /* change the menu color */
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-image:    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-image:     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-image:      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		box-shadow: 0 1px 2px rgba(0,0,0,.6);
		position: absolute;
		top: 0px;
		left: 0px;
	}
	.primary-nav li {
		display: none;
	}
	.primary-nav li a {
		width: 100%; /* pour garder une zone de scroll ?? */
		font-weight: bold;
		color: white;
		text-decoration: none;
		border-bottom: 1px solid rgba(0,0,0,.2);
		border-top: 1px solid rgba(255,255,255,.1); 
	}
	.primary-nav li a:hover {
		background-color: rgba(0,0,0,.5);
		border-top-color: transparent;
	}
	.primary-nav > li:first-child {
		border-top: 1px solid rgba(0,0,0,.2);
	}

	/* Toggle the navigation bar open  */
	.primary-nav.open { 
		height: auto; 
		padding-top: 50px;
		z-index:99; /* Pour passer par-dessus le slideshow */
	}
	.primary-nav.open li { 
		display: flex; 
	}
	.primary-nav li ul a {
		border: 0 none;
		font-size: 12px;
		font-weight: normal;
	}

}

/* $secondary-nav	*/
.secondary-nav {text-align: center;}
	.secondary-nav li {display: inline-block;vertical-align: middle;}
	@media only screen and (min-width: 0px) and (max-width: 475px) {
		.secondary-nav li {margin-bottom:4px;}
	}
		.secondary-nav li a {
			color: #FFF;
			width: 120px;
			height: 40px;
			display: table-cell;
			vertical-align: middle;
			/* TEST */
			color : #FFF; 
			background-color: rgba(0,0,0,0.7);
		}
		.secondary-nav li a:hover {boder: 1px solid #FFF;}

		.secondary-nav li ul {
			display: none;
			position: absolute; 
			z-index:9999; /* Avant 10, mais la carte gmap dans la page "Nous contacter" passait au-dessus */
			box-shadow: -1px 1px 3px rgba(0,0,0,0.3);
		}
		.secondary-nav li:hover ul {display: block;}
			.secondary-nav li ul a {padding: 5px;}
			.secondary-nav li li{
				display: block;
				text-align: left;
				margin: 0px;
			}
			.secondary-nav li ul a{background-color: rgb(255,255,255);}

@media print{
	.secondary-nav li a{border:1px solid grey; color: rgb(0,0,0.7); text-decoration:none;}
}

/* $acces_directs */
.acces_directs {}
	.acces_directs a {color: #000;}
	.acces_directs a:hover {color: rgb(0,114,182);} /* Ne pas mettre dans les thèmes */
		.acces_directs a.bouton {color: rgb(255,255,255);}

	.acces_directs .bloc{
		width:100%;
		margin-top:10px;
		/*height:110px;*/
		display:table;
		border:1px solid rgb(240,240,240);
		background: rgb(250,250,250);
	}
		.acces_directs .bloc:hover .texte, .acces_directs .bloc.courant .texte{}
		.acces_directs .bloc:hover .onglet, .acces_directs .bloc.courant .onglet{
			width:10%;
			/*Transition */
			-webkit-transition:width .5s ease-in-out;
			   -moz-transition:width .5s ease-in-out;
			     -o-transition:width .5s ease-in-out;
				-ms-transition:width .5s ease-in-out;
			     	transition:width .5s ease-in-out;
		}
		.acces_directs .bloc:hover, .acces_directs .bloc.courant{background-color:rgb(240,240,240);}
		
	.acces_directs .texte{
		display:table-cell;
		/*width:95%;*/
		float:left;
		/*Transition */
		-webkit-transition:width .5s ease-in-out;
		-moz-transition:width .5s ease-in-out;
		-o-transition:width .5s ease-in-out;
		-ms-transition:width .5s ease-in-out;
		transition:width .5s ease-in-out;
	}
	.acces_directs .onglet{ /* .onglet = ancien .cta */
		display:table-cell;
		width:5%;
		height:100%;
		position:relative;
		vertical-align:middle;
		text-align:center;
		/*Transition */
		-webkit-transition:width .5s ease-in-out;
		-moz-transition:width .5s ease-in-out;
		-o-transition:width .5s ease-in-out;
		-ms-transition:width .5s ease-in-out;
		transition:width .5s ease-in-out;
	}
	/* Ajout pour plugins menu */
	.acces_directs li .lien{
		font-size:14px;
		/*width:85%;*/
		color : #000;
		margin: 5px 0px;
	}
	.acces_directs .nav {background-color:transparent;}

.menu_permanent a {color: #FFF;margin: 10px;}

/*	$menu_onglets	*/
.menu_onglets, .menu_modele{
	overflow:hidden;
	font-size: 0.9em;
}
	.menu_onglets.titre_h1, .menu_modele.titreh1{
		margin-bottom:-10px; /*pour etre colle au dessus du H1 */
	}
	.menu_onglets ul, .menu_modele ul {
		float: left;
		margin: 16px 0px 0px 0px;
		padding: 0px;
		list-style: none outside none;
	}
	.menu_onglets li, .menu_modele li{
		float: left;
		margin-right: 3px;
		display : block;
		padding: 6px 10px 6px 10px;
		background-color : rgb(240,240,240);
	}
		.menu_onglets li:hover a, .menu_modele li:hover a{color:rgb(255,255,255);}
		.menu_onglets li.actif, .menu_modele li.actif{ box-shadow: none;}
		.menu_onglets a, .menu_modele a {width:100%; display:block;}
		.menu_onglets li.actif a, .menu_modele li.actif a{color: rgb(255,255,255);}

#actualite .menu_onglets {
	/* On colle le menu sur le titre */
	margin-bottom: -25px;
}

@media only screen and (min-width: 0px) and (max-width: 475px) {
	.menu_onglets, .menu_modele{
		border: none;
	}
	.menu_onglets ul, .menu_modele ul {
		float: none;
		width:100%;
	}
	.menu_onglets li, .menu_modele li {
		float: none;
		box-shadow: none;
	}
}

/* Sprites pour nos pages de réseaux sociaux */
.pages_sociales{margin:10px}
.pages_sociales a {
	display: inline-block;
	height: 16px;
	width: 16px;
	background: url("../img/SPRITE-2014.png") 0 0 no-repeat;
}
.pages_sociales a.facebook{}
.pages_sociales a.facebook:hover{background-position : 0 -18px;}
.pages_sociales a.twitter{background-position : -18px 0;}
.pages_sociales a.twitter:hover{background-position : -18px -18px;}
.pages_sociales a.googleplus{background-position : -36px 0;}
.pages_sociales a.googleplus:hover{background-position : -36px -18px;}
.pages_sociales a.linkedin{background-position : -54px 0;}
.pages_sociales a.linkedin:hover{background-position : -54px -18px;}


/* BOUTONS */

/*Désactivation de safari qui force l'apparence de ces submits */
input[type=submit]{
	-webkit-appearance: none;
	border-radius: 0;
}

a.bouton, input.bouton {
	padding: 5px 8px;
	display: inline-block;
	text-align: center;
	border: 1px solid #CCC/*rgb(2,76,127)*/;
	border-radius: 2px 2px 2px 2px;
	-moz-border-radius : 2px 2px 2px 2px; /* Firefox et Chrome */
	-webkit-border-radius : 2px 2px 2px 2px; /* Safari */
	-ms-border-radius : 2px 2px 2px 2px;
	-o-border-radius : 2px 2px 2px 2px;
	max-width : 150px;
}
a.bouton{margin: 2px 0.5px;}
	a.bouton.soft, input.bouton.soft{background-color : rgb(230,230,230);}
	a.bouton:hover, input.bouton:hover{
		box-shadow: inset 0px -1em 0.5em -0.5em rgba(0, 0, 0, 0.2);
		text-shadow: 0px 1px rgba(0,0,0, 0.2);
	}
	a.bouton:active,  input.bouton:active{
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset;
	}
	
	a.bouton.large{max-width : none;}
		.nav.small a.bouton{
			font-size:0.85em;
		}
		.nav.medium a.bouton {
			font-size: 1.1em;
			font-weight: bold;
			padding: 10px;
			min-width: 46px;
			margin: 10px;
		}
		.nav.big a.bouton, .nav.big input.bouton {
			font-size: 1.1em;
			font-family: robotobold;
			padding: 10px;
			max-width : none;
			width: 80%;
			margin: 20px;
		}
		li.menu-entree .nav .bouton.large{width:230px;}
@media print {
	a.bouton, input.bouton,
	a.bouton.soft, input.bouton.soft{color:rgb(0,0,0); text-decoration : underline; border:none;}
}

 

/*------------------------------------*\
    $FORMULAIRES
\*------------------------------------*/
/* http://purecss.io/forms/ */


form{background-color: rgb(240,240,240);padding:5px;margin-top:10px;}

fieldset, .section fieldset {
	text-align:left;
	border: 1px solid #DDD;
	padding: 10px;
}
	fieldset ul, .section fieldset ul, .formulaire_spip ul {}
		fieldset ul li, .section fieldset ul li, .formulaire_spip ul li {
			clear: both;
			margin: 10px 0;
			list-style-type: none;
			Padding:5px;
		}
			fieldset ul li a, .section fieldset ul li a, .formulaire_spip ul li a {color: orange;}
			fieldset .notice ul li, .section fieldset .notice ul li, .formulaire_spip .notice ul li {
				list-style-type: disc;
			}

legend {
	padding: 5px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-top: 5px;
	 font-family: 'robotobold', helvetica, arial, sans-serif;
}

label{
	display: inline-block;
	text-align: right;
	width: 180px;
	vertical-align: top;
	margin: 5px;
}
.align_input_box {display: inline-block; width: 360px;}
@media only screen and (max-width: 767px) {
	label{text-align: left;}
	label, .align_input_box {display:block; width:100%; margin:0px;}
}

.explication {
	padding: 0.1em;
	font-size: 0.9em;
	font-style: italic;
	margin:0px;
	width:100%;
}
	.explication ul {}
		.explication ul li {padding: 0px;}


input, select,textarea {width:98%;}

input, select, .choix {
	margin: 0px;
	border-radius: 3px;
	background-color: rgb(255,255,255);
	padding:0.2em;
	border: 1px solid  rgb(200,200,200);
	box-shadow: 0px 1px 3px rgb(221, 221, 221) inset;
}
input:focus {border: 1px solid rgb(0,114,182);}
input[hidden="hidden"] {display:none;}
input[readonly="readonly"] {background-color: rgb(238,238,238);}
input[type="checkbox"], input[type="radio"] {width: auto; margin-top:-0.25em;}



textarea, .conteneur_checkbox {
	vertical-align: top;
	display:inline-block;
	margin-top:2px;
}

.choix{
	display: inline-block;
	margin-bottom:0.25em;
}
.choix label {width:auto;}
.choix:hover{background:#DDD;}


.etapes {text-align:center;margin-bottom:5px}
.etapes span, .etapes input{display:inline-block; color:#fff; padding:3px;}
.etapes input{padding: 0px; width:auto; cursor: pointer; box-shadow:none; margin-top:0.5em;}
.etapes span.active, .etapes input.active {color:#FFF;}


/* Messages de retours */
.erreur_message, .reponse_formulaire_erreur{
	clear: both;
	display: block;
	margin: 3px;
	margin-bottom: 5px; /* Sinon empière sur les input */
	padding: 5px;
	color : #FF0000;
	font-family: 'robotobold', helvetica, arial, sans-serif;
	border: 1px solid #FF0000;
	background-color:#FFF;
}
	.erreur_message a {color : rgb(71,0,31);}
	.erreur_message a:hover {color: rgb(107,43,116);}

.reponse_formulaire_ok {
	clear: both;
	display: block;
	margin: 3px;
	padding: 5px;
	border: 1px solid #090;
	font-family: 'robotobold', helvetica, arial, sans-serif;
	color:  #090;
	background-color:#FFF;
}

li.erreur input[type="number"], li.erreur input[type="email"] {
	background-color: #FBE3E4;
	border-color: #FBC2C4;
}
/* Cas particulier pour safari ou les flèches des input[type="number"] coupent le champs
http://stackoverflow.com/questions/3975769/disable-webkits-spin-buttons-on-input-type-number
*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Formulaires : variantes et cas particuliers */
/* ----------------------------------------------- */
/* Avatar des profils */
.formulaire_editer_logo_auteur {text-align: left;}
.formulaire_spip { margin-bottom: 1.5em; }
.aside .formulaire_spip {}

/* Selection des langues */
.formulaire_menu_lang { margin: 0; padding: 0; background: none; }

/* Formulaires de recherche (site / petitions) */
.formulaire_recherche form {display: block;}
.formulaire_recherche input.text { width: 10em;  }
.formulaire_recherche input.submit {padding: 2px; 0px; width: auto;}

/* Choix des mots-clefs */
ul.choix_mots { display: block; margin: 0; padding: 0; list-style: none; }
ul.choix_mots li { clear: none; float: left; display: block; width: 30%; padding: 1%; }
ul.choix_mots li label { display: inline; font-weight: normal; }

.formulaire_spip .bugajaxie { display: none; } /*IE/Win*/

/* Formulaire de login dans une page */
.formulaire_login ul li { clear: left; }
.formulaire_login .editer_password .details { display: block; }
.formulaire_login #spip_logo_auteur { float: right; }

/* Fomulaire de contact */
.formulaire_ecrire_auteur {}
.formulaire_ecrire_auteur .saisie_sujet_message_auteur input.text { width: 100%; }

input, textarea, select, button { font-family: inherit; font-size: 1em; font-weight: inherit; line-height: inherit; }
textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

@media only screen and (max-width: 479px) {
	/* taille de police faire sortir les champs de l'ecran sinon */
	input,textarea,select,button {font-size: 0.75em;}
}

a.autre_option {
	margin-top: 5px;
	float: left;
	border-bottom: 3px double black;
	font-size:12px;
}

option.disabled {
	background-color: rgb(0, 34, 54);
	color : rgb(14à,140,140);
}


.ie fieldset { padding-top: 0; }
.ie6 legend,
.ie7 legend { margin-left: -7px; } /* Preciser la couleur des legend et du fond pour IE/Win */
.ie button,
.ie input.submit,
.ie input.button { position: relative; }

button { width: auto; overflow: visible; } /* Make buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */

/* Success, info, notice and error/alert boxes (from BluePrint) */

.reponse,
.error,
.alert, 
.notice,
.success, 
.info     { padding: .8em; margin-bottom: 1.5em; border: 1px solid #ddd; }

.error,
.alert      { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice     { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success    { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info     { background: #d5edf8; color: #205791; border-color: #92cae4; }

.error a,
.alert a      { color: #8a1f11; }
.notice a   { color: #514721; }
.success a    { color: #264409; }
.info a     { color: #205791; }

.info .titre {
	float: left;
	margin-left: 0.5em;
	margin-right: 3em;
	margin-top: -2em;
	border: 1px solid rgb(255, 255, 255);
	background-color: rgb(100, 100, 100);
	padding: 0.3em;
	font-size: 1em;
	color: rgb(255, 255, 255);
}


.info .ul{}
.info ul li {padding:0px;}

.notice ul, .notice ul.spip {list-style-type: disc;}
/* Print */
@media print {
  form { display: none; }
}


.obligatoire label::after{
	content : " *";
	color: rgb(255,0,0);
}
.obligatoire label.souslabel::after, .obligatoire .choix label::after{
	content : "";
}



/*------------------------------------*\
    $THEME DE BASE
\*------------------------------------*/
/* **************************************
 *		DÉFINITIONS DES COULEURS		*
 *
 *	couleur principale : bleu - rgb(0,114,182);
 *  couleur principale foncee : bleu fonce - rgb(0,34,54);
 *	couleur principale intermediaire : bleu moyen : rgb(2,76,127);
 *  
 *	couleur secondaire : marron glace : rgb(176,162,131)
 *	couleur secondaire foncee : marron fonce rgb(79,57,44)
 *	couleur secondaire legère : marron glace leger rgb(201,190,169)
 *
 ************************************** */
/*	===	COULEUR PRINCIPALE	===	*/
/* Fond */
.section .titre,
.section h2, .section h2.spip,
.menu_onglets li:hover, .menu_modele li:hover,
.menu_onglets li.actif, .menu_modele li.actif,
.nav, .nav .wrapper,
a.bouton, input.bouton,
.cta, .onglet{
	background-color : rgb(244,159,13);
}

/* Texte */
.titre,
.section h3, .section h3.spip,
.section .bloc .titre,
.section .bloc .inter_titre,
.primary-nav li ul a,
.secondary-nav li ul a {
	color: rgb(0,114,182);
}
/* Bordures */
.primary-nav li li{border-bottom: 1px solid rgb(0,114,182);}
.acces_directs .bloc:hover,
.acces_directs .bloc.courant{border:1px solid rgb(0,114,182);}
@media only screen and (min-width: 0px) and (max-width: 475px) {
	.menu_onglets li, .menu_modele li {border-top : 1px solid rgb(0,114,182);}
}
/* boutons */
a.bouton, input.bouton {color:rgb(255,255,255);}

/*	===	COULEUR PRINCIPALE FONCEE	===	*/
/* Fond */
.primary-nav li ul,
.etapes span.active, .etapes input.active {
	background-color :rgb(79,57,44);
}
/* Texte */
/* Bordures */


/*	===	COULEUR PRINCIPALE INTERMEDIAIRE	===	*/
/* Fond */
.primary-nav li a:hover,
.primary-nav li ul li:hover a,
.secondary-nav li a:hover,
.secondary-nav li ul a:hover,
.etapes span, .etapes input,
.nav .actif{
	background-color: rgb(176, 162, 131);
}
/* Texte */
a.bouton.soft, input.bouton.soft,
a.bouton.soft:hover, input.bouton.soft:hover,
a.bouton.soft:active,  input.bouton.soft:active,
label {
	color: rgb(2,76,127);
}
/* Bordures */
.etapes span, .etapes input{border: 1px solid rgb(176, 162, 131);}