@font-face {
    font-family: 'gatsbyflfbold_italic';
    src: url('gatsbyflf-bolditalic-webfont.eot');
    src: url('gatsbyflf-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('gatsbyflf-bolditalic-webfont.woff2') format('woff2'),
         url('gatsbyflf-bolditalic-webfont.woff') format('woff'),
         url('gatsbyflf-bolditalic-webfont.ttf') format('truetype'),
         url('gatsbyflf-bolditalic-webfont.svg#gatsbyflfbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gatsbyflfmedium_italic';
    src: url('gatsbyflf-italic-webfont.eot');
    src: url('gatsbyflf-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('gatsbyflf-italic-webfont.woff2') format('woff2'),
         url('gatsbyflf-italic-webfont.woff') format('woff'),
         url('gatsbyflf-italic-webfont.ttf') format('truetype'),
         url('gatsbyflf-italic-webfont.svg#gatsbyflfmedium_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gatsbyflfbold';
    src: url('gatsbyflf-bold-webfont.eot');
    src: url('gatsbyflf-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('gatsbyflf-bold-webfont.woff2') format('woff2'),
         url('gatsbyflf-bold-webfont.woff') format('woff'),
         url('gatsbyflf-bold-webfont.ttf') format('truetype'),
         url('gatsbyflf-bold-webfont.svg#gatsbyflfbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gatsbyflfregular';
    src: url('gatsbyflf-webfont.eot');
    src: url('gatsbyflf-webfont.eot?#iefix') format('embedded-opentype'),
         url('gatsbyflf-webfont.woff2') format('woff2'),
         url('gatsbyflf-webfont.woff') format('woff'),
         url('gatsbyflf-webfont.ttf') format('truetype'),
         url('gatsbyflf-webfont.svg#gatsbyflfregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


html {
  height: 101%;
}

body {
  margin: 0;
  padding: 0;
}

* {
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, .contentheading, .componentheading {
  padding: 3px 0;
  margin: 0;
  line-height: 1.2;
  font-weight: bold;
}

h1, .componentheading {
     color: #3063c5;
	text-align: center;
	letter-spacing: 1px;
	font-size: 3em;
	 
	font-style: bold;
}

h2, .contentheading {
  font-size: 1.2em;
}

h2, .contentheading {
  font-size: 1.2em;
}

h4 {
  font-size: 1em;
}

ul, ol {
  padding: .75em 0 .75em 0;
  margin: 0 0 0 35px;
}

ul.menu {
    margin: 0;
}

ul.menu li {
    list-style: none;
}

p {
  padding: 5px 0;
}

address {
  margin: .75em 0;
  font-style: normal;
}

a:focus {
    outline: none;
}

img {
  border: none;
}

em {
  font-style: italic;
}
strong {
  font-weight: bold;
}

form, fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
input, button, select {
  vertical-align: middle;
}

.clr {
	clear : both;
}

.clearfix:after {
    content: " "; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
	font-size: 0;
}

.clearfix {
	zoom: 1;
}

body {
	
	color: #2b2b2b;
	text-align: left;
	line-height: 20px;
	font-size: 14px;
	font-family: Segoe UI, sans-serif;
	background:  url(../images/fond10.jpg) repeat center;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
}

a, a:visited {
	color: #000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: #3063c5; 
}

h1, div.componentheading {
	color: #3063c5;
	text-align: center;
	letter-spacing: 1px;
	font-size: 3em;
	font-family: 'gatsbyflfbold', Segoe UI, sans-serif;;
	font-style: bold;
}

h2, div.contentheading {
	color: #3063c5;
	
	font-size: 2em;
	font-family: 'gatsbyflfbold', Segoe UI, sans-serif;
	font-style: bold;
	
}


h2 a {
    text-decoration: none;
}

h2 a:hover, div.contentheading a:hover {
	color: #036c9e;
}

.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, 
.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, 
.nav-pills > .active > a, .nav-pills > .active > a:hover,
.btn-primary {
    color: 036c9e;
}

img {
/* 100% - responsive : pour que les images ne sortent pas de l'écran sur tablette/smartphone, etc.*/
	max-width: 100%;
/* auto : respect du ratio*/
	height: auto;
}





.wrapper {
/* largeur maximal du site : 1000px */
	max-width: 1920px;
/*marge gauche et droite "auto" pour centrer les conteneurs */
	margin: 0 auto;
	
	
}

/*Menu horizontal*/
#nav {
    
    width: 100%;
    background: #fff;
   
    
   
}

#nav ul.menu {
    margin: 0;
    padding: 0;
	zoom: 1; /* ajout du hasLayout sur l'élément pour la compatibilité IE - pour la prise en compte du style ":after"*/
	text-align: center;
}

#nav ul.menu:after {
/*=after --> ajout d'un élément de type block invisible à la fin du menu auquel on applique un "clear:both ;". Ça permet de stopper la flottaison des éléments <li> du menu et s'affranchir des problèmes que ça peut poser*/
    content: " "; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
	font-size: 0;
}

#nav ul.menu > li {
	
	
	list-style: none; /* pas de puce sur les éléments du menu*/
    display: inline-block;
    width: auto;
	
	padding-left: 1%;
	padding-right: 1%;
	margin-top: 10px;
}
/*ajout de la couleur, marges, taille du texte, etc. sur les liens :*/
#nav ul.menu > li > a, #nav ul.menu > li > span.separator {
    display: block;
	color: #000000;
	margin: 0px;

	font-size: 14px;
    text-decoration: none;
  	
}


#nav ul.menu > li:hover > a {
	color: lightgrey;
}

#nav ul.menu > li.active > a {
    font-weight: bold;
}
/*2eme niveau et suivant*/
#nav ul.menu li li a, #nav ul.menu li li span.separator {
    display:block;
	margin: 10px;
	
	padding-right: 10px;
	padding-left: 10px;
    text-decoration: none;
}

#nav ul.menu li li:hover > a {
	background: #036c9e;
	background-image: url("nav-gradient.svg");
	background-image: -o-linear-gradient(center top,#036c9e, #024e73 100%);
	background-image: -webkit-gradient(linear, left top, left bottom,from(#036c9e), color-stop(100%, #024e73));
	background-image: -moz-linear-gradient(center top,#036c9e, #024e73 100%);
	background-image: linear-gradient(center top,#036c9e, #024e73 100%);
	-pie-background: linear-gradient(center top,#036c9e, #024e73 100%);
    color: #fff;
}

#nav ul.menu li li.active > a {
	text-align: left;
    color: grey;
}


#nav ul.menu li ul, #nav ul.menu li:hover ul ul, #nav ul.menu li:hover ul ul ul {
	position: absolute;
	left: -999em;
	z-index: 999;
    margin: 0;
    padding: 0;
	background: #ffffff;
	background-image: url("white-gradient.svg");
	background-image: -o-linear-gradient(center top,#ffffff,#ffffff 40%, #e1e1e1 100%);
	background-image: -webkit-gradient(linear, left top, left bottom,from(#ffffff),color-stop(40%,#ffffff), color-stop(100%, #e1e1e1));
	background-image: -moz-linear-gradient(center top,#ffffff,#ffffff 40%, #e1e1e1 100%);
	background-image: linear-gradient(center top,#ffffff,#ffffff 40%, #e1e1e1 100%);
	-pie-background: linear-gradient(center top,#ffffff,#ffffff 40%, #e1e1e1 100%);
	border: #ffffff 1px solid;
    box-shadow: #545454 0px 1px 1px 0px;
	-moz-box-shadow: #545454 0px 1px 1px 0px;
	-webkit-box-shadow: #545454 0px 1px 1px 0px;
    border: #ccc 1px solid;
	width: 180px;
	/*Pour ce conteneur de sous-menu : "position:absolute" pour le sortir du flux et le positionner hors de l'écran à "left :-999em". Le "z-index:999" permet de s'assurer que le sous menu sera toujours au dessus des autres éléments. + Largeur fixe de 180px.*/
}


#nav ul.menu li:hover ul ul, #nav ul.menu li:hover li:hover ul ul, #nav ul.menu li:hover li:hover li:hover ul ul {
	left: -999em;
}

#nav ul.menu li:hover > ul, #nav ul.menu li:hover ul li:hover > ul, #nav ul.menu li:hover ul li:hover ul li:hover > ul, #nav ul.menu li:hover ul li:hover ul li:hover ul li:hover > ul {
	left: auto;
	/*affichage du sous-menu ( celui envoyé à -999em tout à l'heure)
lorsque la souris survole l'élément parent : li:hover > ul. A ce moment là on lui remet une position "left" à "auto" pour qu'il vienne se placer sous son parent.*/
}

/*à partir du 3eme niveau, on ne le place pas sous son élément parent (contrairement au niveau2), mais à droite !*/
#nav ul.menu li:hover ul li:hover ul {
	margin-top: -45px;
	margin-left: 170px;
}

#nav ul.menu li li {
    float: none;
}

#logo {
/* affichage du logo à gauche*/
    
   float: left;
    margin-left: 2em;
    display: block;
    width: 20%;
    margin-top: 2em;	
  
}

#headermodule {
/* affichage du module titre et fil d'arianne*/
   display: block;
	margin-left: auto;
	margin-right: auto;  
	width: 70%;
	padding-top: 1em;
}


/*rangée de 4 modules*/
#row1modules .row1module {
	 margin: auto;
	

}

/* 1 module */
#row1modules.n1 > .row1module {
    width: 75%
  
}

#row1modules.n1 > .row1module > div.inner {
	/* marges de 5 px de haut et en bas et 0px à gauche et à droite*/
    margin:  0 5em 0 5em;
}
/* 2 modules, premier module */
#row1modules.n2 > .row1module {
    width: 50%;
}

#row1modules.n2 > .row1module > div.inner {
    margin: 5px 3px 5px 0;
}
/* 2 modules, deuxieme module */
#row1modules.n2 > .row1module + div {
    width: 50%;
}

#row1modules.n2 > .row1module + div > div.inner {
    margin: 5px 0px 5px 3px;
}
/* 3 modules, premier module */
#row1modules.n3 > .row1module {
    width: 33.33%;
}

#row1modules.n3 > .row1module > div.inner {
    margin: 5px 3px 5px 0;
}
/* 3 modules, deuxieme module */
#row1modules.n3 > .row1module + div {
    width: 33.33%;
}

#row1modules.n3 > .row1module + div > div.inner {
    margin: 5px 3px 5px 3px;
}
/* 3 modules, troisieme module */
#row1modules.n3 > .row1module + div + div {
    width: 33.33%;
}

#row1modules.n3 > .row1module + div + div > div.inner {
    margin: 5px 0px 5px 3px;
}
/* 4 modules, premier module */
#row1modules.n4 > .row1module {
    width: 25%;
}

#row1modules.n4 > .row1module > div.inner {
    margin: 5px 3px 5px 0;
}
/* 4 modules, deuxieme module */
#row1modules.n4 > .row1module + div {
    width: 25%;
}

#row1modules.n4 > .row1module + div > div.inner {
    margin: 5px 3px 5px 3px;
}
/* 4 modules, troisieme module */
#row1modules.n4 > .row1module + div + div {
    width: 25%;
}

#row1modules.n4 > .row1module + div + div > div.inner {
    margin: 5px 3px 5px 3px;
}
/* 4 modules, quatrieme module */
#row1modules.n4 > .row1module + div + div + div {
    width: 25%;
}

#row1modules.n4 > .row1module + div + div + div > div.inner {
    margin: 5px 0px 5px 3px;
}


/*Contenu principal à 3 colonnes*/
#left, #right, #center {
    float: left;
}

#left {
    width: 20%;
}

#right {
    width: 20%;
}

#center {
    width: 60%;
}

.noleft #center {
    width: 80%;
}

.noright #center {
    width: 80%;
}

.noright.noleft #center {
    width: 100%;
}

#left > div.inner {
	margin-right: 10px;
	padding: 15px;
	text-align: left;
}

#right > div.inner {
	margin-left: 10px;
	padding: 15px;
	text-align: left;
}

#center > div.inner {
	padding: 10px;
	
}

/*Personnalisation du menu vertical*/
#left ul.menu li a, #left ul.menu li span.separator,
#right ul.menu li a, #right ul.menu li span.separator {
    display: block;
/*transforme le lien en balise de type bloc pour qu'elle prenne toute la largeur de son conteneur et pour qu'on puisse lui appliquer des dimensions et des marges. Sans cette propriété la zone cliquable du lien se limiterait au texte qu'il contient.*/
	background:  url(../images/puce.png) left center no-repeat;
	border-bottom: 1px solid #e3e3e3;
    box-shadow: 0 1px 0 #fff;
	padding-top: 5px;
	padding-bottom: 7px;
	padding-left: 20px;
	text-decoration: none;
}
/*Personnalisation du module de connexion*/
#form-login-username label, #form-login-password label {
/*bloc qui contient les champs pour l'identifiant*/
	display: block;
}

#form-login-username input, #form-login-password input {
/*bloc qui contient les champs pour le mot de passe*/
	padding: 3px;
	border: 1px solid #ddd;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#form-login-username input:focus, #form-login-password input:focus {
	border: 1px solid #036c9e;
}

#form-login-submit button {
/*bloc qui contient le bouton de connexion*/
	background: #efefef;
	border: 1px solid #c3c3c3;
	padding: 4px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
}

#form-login-submit button:hover {
	background: #ccc;
}

/*Personnalisation du titre des articles */
h1.item-title, h1.item-title > a {
	padding-left: 15px;
	margin-top: 15px;
}

/*Personnalisation du lien lire la suite*/
div.item a.btn {
	text-decoration: none;
	background: #efefef;
	border: 1px solid #c3c3c3;
	padding: 4px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
	margin: 7px;
	display:inline-block;
}

div.item a.btn:after {
/*ajout d'un ">" après le lien "lire la suite"*/
	content: " >";
}

/*Personnalisation du fil de navigation (fil d'ariane)*/
ul.breadcrumb li {
	display: inline;
	list-style: none;
	margin: 30px 0 0 20px;

}

ul.breadcrumb li a {
	text-decoration: none;
}

ul.breadcrumb .divider {
	margin: 3px;
}
/*Personnalisation de la navigation entre articles*/
div.item-page li {
	display: inline;
	list-style: none;
}

li.next{
	float: right;
}

/*Personnalisation des informations de l'article (date, auteur, etc. imprimer, envoyer par Email)*/
ul.actions li {
	float: right;
	padding: 2px 5px;
	background: #e3e3e3;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	margin: 3px;
}

ul.actions li a {
	color: #fff;
	text-decoration: none;
}



.article-info {
	color: #c3c3c3;
	font-size: 10px;
}

/*Articles en colonnes en mode blog*/
.cols-1
{
        display: block;
        float: none !important;
        margin: 0 !important;
}

.cols-2 .column-1
{
        width:46%;
        float:left;
}

.cols-2 .column-2
{
        width:46%;
        float:right;
        margin:0
}

.cols-3 .column-1
{
        float:left;
        width:29%;
        padding:0px 5px;
        margin-right:4%

}
.cols-3 .column-2
{
        float:left;
        width:29%;
        margin-left:0;
        padding:0px 5px
}
.cols-3 .column-3
{
        float:right;
        width:29%;
        padding:0px 5px
}


.items-row
{
        overflow:hidden;
        margin-bottom:10px !important;
}

.column-1,
.column-2,
.column-3
{
        padding:10px 5px
}

.column-2
{
        width:55%;
        margin-left:40%;
}

.column-3
{
        width:30%
}

/*Rangée de modules sous l'article*/
#row2modules .row2module {
	float: left;
}

/* 1 module */
#row2modules.n1 > .row2module {
    width: 100%;
}

#row2modules.n1 > .row2module > div.inner {
    margin: 5px 0;
}
/* 2 modules, premier module */
#row2modules.n2 > .row2module {
    width: 50%;
}

#row2modules.n2 > .row2module > div.inner {
    margin: 5px 3px 5px 0;
}
/* 2 modules, deuxieme module */
#row2modules.n2 > .row2module + div {
    width: 50%;
}

#row2modules.n2 > .row2module + div > div.inner {
    margin: 5px 0px 5px 3px;
}
/* 3 modules, premier module */
#row2modules.n3 > .row2module {
    width: 33.33%;
}

#row2modules.n3 > .row2module > div.inner {
    margin: 5px 3px 5px 0;
}
/* 3 modules, deuxieme module */
#row2modules.n3 > .row2module + div {
    width: 33.33%;
}

#row2modules.n3 > .row2module + div > div.inner {
    margin: 5px 3px 5px 3px;
}
/* 3 modules, troisieme module */
#row2modules.n3 > .row2module + div + div {
    width: 33.33%;
}

#row2modules.n3 > .row2module + div + div > div.inner {
    margin: 5px 0px 5px 3px;
}

/* 4 modules, premier module */
#row2modules.n4 > .row2module {
    width: 50%;
}

#row2modules.n4 > .row2module > div.inner {
    margin: 5px 3px 5px 0;
}
/* 4 modules, deuxieme module */
#row2modules.n4 > .row2module + div {
    width: 25%;
}

#row2modules.n4 > .row2module + div > div.inner {
    margin: 5px 3px 5px 3px;
}
/* 4 modules, troisieme module */
#row2modules.n4 > .row2module + div + div {
    width: 50%;
}

#row2modules.n4 > .row2module + div + div > div.inner {
    margin: 5px 3px 5px 3px;
}
/* 4 modules, quatrieme module */
#row2modules.n4 > .row2module + div + div + div {
    width: 25%;
}

#row2modules.n4 > .row2module + div + div + div > div.inner {
    margin: 5px 0px 5px 3px;
}


/* 2me rangŽe de 4 modules sous l'article */

#row3modules .row3module {
	float: left;
}

/* 1 module */
#row3modules.n1 > .row3module {
    width: 100%;
}

#row3modules.n1 > .row3module > div.inner {
    margin: 5px 0;
}
/* 2 modules, premier module */
#row3modules.n2 > .row3module {
    width: 66.6%;
}

#row3modules.n2 > .row3module > div.inner {
    margin: 5px 3px 5px 0;
}
/* 2 modules, deuxieme module */
#row3modules.n2 > .row3module + div {
    width: 33.3%;
}

#row3modules.n2 > .row3module + div > div.inner {
    margin: 5px 0px 5px 3px;
}
/* 3 modules, premier module */
#row3modules.n3 > .row3module {
    width: 33.33%;
}

#row3modules.n3 > .row3module > div.inner {
    margin: 5px 3px 5px 0;
}
/* 3 modules, deuxieme module */
#row3modules.n3 > .row3module + div {
    width: 33.33%;
}

#row3modules.n3 > .row3module + div > div.inner {
    margin: 5px 3px 5px 3px;
}
/* 3 modules, troisieme module */
#row3modules.n3 > .row3module + div + div {
    width: 33.33%;
}

#row3modules.n3 > .row3module + div + div > div.inner {
    margin: 5px 0px 5px 3px;
}
/* 4 modules, premier module */
#row3modules.n4 > .row3module {
    width: 25%;
}

#row3modules.n4 > .row3module > div.inner {
    margin: 5px 3px 5px 0;
}
/* 4 modules, deuxieme module */
#row3modules.n4 > .row3module + div {
    width: 25%;
}

#row3modules.n4 > .row3module + div > div.inner {
    margin: 5px 3px 5px 3px;
}
/* 4 modules, troisieme module */
#row3modules.n4 > .row3module + div + div {
    width: 25%;
}

#row3modules.n4 > .row3module + div + div > div.inner {
    margin: 5px 3px 5px 3px;
}
/* 4 modules, quatrieme module */
#row3modules.n4 > .row3module + div + div + div {
    width: 25%;
}

#row3modules.n4 > .row3module + div + div + div > div.inner {
    margin: 5px 0px 5px 3px;
}

#row3modules ul {
	margin-left: 40px;
}

#row3modules ul li {
	list-style: disc;
}

#row3modules ul li a {
	text-decoration: none;
}


#footer {	
	color: #000;
	
	text-align: center;	
	width: 100%;
}

.titreperso {
	color: #036c9e;
}


/* orientation iOS font-size fix */@media (orientation: landscape) and (max-device-width: 767px) {

	body {
	-webkit-text-size-adjust: 100%;
	}
}
@media only screen and (max-width: 769px) {
/* smartphone */


h1 {
	font-size: 2em;
	font-family: 'gatsbyflfbold', Segoe UI, sans-serif;
}

h2 {
	font-size: 1.7em;
	font-family: 'gatsbyflfbold', Segoe UI, sans-serif;
}

#logo {
	width: 30%;
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
        margin-top: 2em;
}

#headermodule {
/* affichage du module titre et fil d'arianne*/
   	
      width:80%;
}


/* rangŽe de 4 modules sous l'article*/
/* premier module */
#row2modules.n2 > .row2module {
    width: 100%;
	float: none;
}

/* 
deuxieme module */
#row2modules.n2 > .row2module + div {
    width: 100%;
	float: none !important;
}


/* 2�me rangŽe de 4 modules */
.row3module {
	
	width: 100% !important;
}