@charset "UTF-8";
/* CSS Document */


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

}


@font-face {
    font-family: 'josefin_sanssemibold';
    src: url('../fonts/josefinsans-semibold-webfont.eot');
    src: url('../fonts/josefinsans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/josefinsans-semibold-webfont.woff2') format('woff2'),
         url('../fonts/josefinsans-semibold-webfont.woff') format('woff'),
         url('../fonts/josefinsans-semibold-webfont.ttf') format('truetype'),
         url('../fonts/josefinsans-semibold-webfont.svg#josefin_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
} 


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

}


body {
  margin:0;
  background-color:#f2f4f9; /* bleu de cobalt L+95 */
  overflow-y:scroll;
  font-size:13px;
}


a {
  text-decoration: none;
  color: #334e9e;
}


a:hover, a:focus {
  text-decoration: none;
  color: #002286;
}




a img {
  border:none;
  border-image:none;
}


img {
  max-width:100%;
  height:auto;
  width:auto;
  box-sizing:border-box;
}



/* ......................................... BORDURES LATERALES .................................................. */


.border {
  height: 100%;
  width: 40px;
  position: fixed;
  z-index: 100;
  background: #ccd3e7; /* bleu de cobalt L+80 */
}

.border.left, .border.right {
  width: 40px;
  height: 100%;
}

.border.right {
  left: auto;
  right: 0;
}

.border.left {
  top: auto;
  bottom: 0;
}


/* ......................................... EN-TETE ET MENU .................................................. */



#header {
  width:100%;
  height:40px;
  color:#002286;
  background-color:#ccd3e7; /* bleu de cobalt */
  float:left;
  font-family: 'josefin_sanssemibold', Arial, Helvetica, sans-serif;
  position:relative;
  z-index:1000;
}


#header a, #header a:hover, #header a:focus {
  color:#002286;
  text-decoration:none;
}
				

#contenuHeader {
  width:960px;
  /*width:74%; /* 950/1280=0.74*/
  margin-left:auto;
  margin-right:auto;
  background-color:#000066;
}



#nom {
  width:32%;
  font-size:38px;
  /*margin:8px 0px 0px 0px;*/
  float:left;
  /*line-height:1;*/
  height:57px;
  line-height:57px;
  background-color:#ccd3e7; /* bleu de cobalt */
  padding-left:1%;
  -moz-border-radius: 0px 0px 0px 5px;
  -webkit-border-radius:0px 0px 0px 5px;
  border-radius:0px 0px 0px 5px;
}



#conteneurMenu{
  width:67%;
  float:left;
  /*margin-bottom:5px;*/
}


#menu {
  width:100%;
  margin-left:auto;
  margin-right:auto;
  background-color:#ccd3e7; /* bleu de cobalt */
  color:#002286;
  /*font-family: 'ralewaysemibold', Arial, Helvetica, sans-serif;*/
  font-family: 'josefin_sansregular', Arial, Helvetica, sans-serif;
  font-size:24px;
   -moz-border-radius: 0px 0px 5px 0px;
  -webkit-border-radius:0px 0px 5px 0px;
  border-radius:0px 0px 5px 0px;
}


#navigation {
  margin: 0 ;
  padding: 0 ;
  list-style: none ;
  text-align: center ;
  height:57px;
  /*line-height:2;*/
  line-height:57px;
}

	
#navigation li {
  float:left;
  width:20%;
  /*padding:10px 0 0 0;*/
}



#navigation li.inactive1 a {
  color:#002286;
  text-decoration: none ;
  display:block;
  background-color:#ccd3e7; /* bleu de cobalt */
}


#navigation li.active a {
  background-color:#ccd3e7; /* bleu de cobalt */
  color:#002286;
  text-decoration: none ;
  display:block;
}


#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
  text-decoration: none ;
  display:block;
  background-color:#ccd3e7; /* bleu de cobalt */
}

#navigation li.inactive1 a:hover, #navigation li.inactive1 a:focus, #navigation li.inactive1 a:active {
  text-decoration: none ;
  display:block;
  background-color:#f4cccc; /* rouge irgazine */
  color:#9f0102;
}

#navigation li.inactive2 a:hover, #navigation li.inactive2 a:focus, #navigation li.inactive2 a:active {
  text-decoration: none ;
  display:block;
  background-color:#fff1cc; /* jaune de Naples */
  color:#996f01;
}

#navigation li.inactive3 a:hover, #navigation li.inactive3 a:focus, #navigation li.inactive3 a:active {
  text-decoration: none ;
  display:block;
  background-color:#cde6d5; /* vert émeraude */
  color:#025c20;
}

#navigation li.inactive4 a:hover, #navigation li.inactive4 a:focus, #navigation li.inactive4 a:active {
  text-decoration: none ;
  display:block;
  background-color:#f2daef; /* violet de cobalt */
  color:#86337c;
}


#navigation li.inactive5 a {
  text-decoration: none ;
  display:block;
  font-size:13px;
  margin-top:13px;
}


/*................................................................ MILIEU ................................................................................. */



#content { /* pour écrans 1280X800 */
  width:960px;
  margin-left:auto;
  margin-right:auto;
   /*padding-bottom:57px;*/
  min-height: 90vh; /* 90vh pour que la barre de nanoScroller ne s'étende pas entièrement */
}


ul, li {
  margin:0; 
  padding:0; 
  list-style:none;
}


/*p:first-letter {
  float:left;
  font-size: 6em;
  padding: 0.05em 0.05em 0 0;
}*/

#firstParag:first-letter {
  float:left;
  font-size: 32px;
  padding: 0.05em 0.05em 0 0;
  font-family: 'ralewayregular', Arial, Helvetica, sans-serif;
  color:#434343; /* gris 85% */
}

@media screen and (-webkit-min-device-pixel-ratio:0) { /* hack Chrome & Safari */
	#firstParag:first-letter {
  line-height:0.5;
}
}

	#firstParag:first-letter { /* hack IE9 et inférieur */
  line-height:0.5\9;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* hack IE 10 et 11 */
	#firstParag:first-letter {
  line-height:0.5;
}
}


/*p#titre:first-letter {
  float:left;
  padding: 0.05em 0.05em 0 0;
}*/

#texte-paragraphe {
  float:left;
  /*padding:10px 0px 10px 0px;*/
  padding:10px 10px 0px 10px;
  width:940px; /* 960-240=720, 720-padding=710 */
  text-align:justify;
  text-justify:newspaper;
  font-family: 'ralewayregular', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height:1.4;
  /*color:#434343; /* gris 85% */
  color:#313131; /* gris 90% */
  z-index:1;
  background-color:#f9fafc; /* bleu de cobalt L+98 */
  min-height: 95vh;
}

#info {
  font-family: 'ralewayregular', Arial, Helvetica, sans-serif;
  font-size: 14px;
  /*color:#535353; /* gris 80% */
  color:#434343; /* gris 85% */
}



#titre 
{
  /*font-family: 'ralewaysemibold', Arial, Helvetica, sans-serif;*/
  font-family: 'josefin_sansregular', Arial, Helvetica, sans-serif; 
  font-size:27px;
  color:#002286;
  /*padding:50px 0 0 0;*/
}



/* ............................. PIED ........................................... */


#footer {
  margin-top:20px;
  display:inline-block;
  width:100%;
  /*height:57px; /* hauteur menu */
  height:40px;
  line-height:40px;
  /*font-family: 'ralewaymedium', Arial, Helvetica, sans-serif;*/
  font-family: 'josefin_sansregular', Arial, Helvetica, sans-serif;
  font-size: 17px;
  letter-spacing:1px;
  color:#002286;
  background-color:#ccd3e7; /* bleu de cobalt */
  position:fixed;
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  z-index:1000;
}


#footer a {
  color:#002286;
  text-decoration:none;
  -webkit-transition-property: color;
  -webkit-transition-duration: 2s;
  -moz-transition-property: color;
  -moz-transition-duration: 2s;
  /* … et lorsque ce sera standardisé */
  transition-property: color;
  transition-duration: 2s;
}
				
#footer a:hover, #footer a:focus {
  color:#334e9e; 
  text-decoration:none;
}


/*........................ SLICKNAV (menu responsive) ................................*/

.slicknav_menu {
  display:none;
}


/* ............................. Automatic Image Montage ................... */

.am-wrapper{
  float:left;
  position:relative;
  overflow:hidden;
}

.am-wrapper img{
  position:absolute;
  outline:none;
}

.am-container {
  display:none;
}