html { width:100%; height: 100%;
  font-size: 100.01%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: font-family: 'parmapetitregular', sans-serif;
}


body {width:100%; height: 100%;
  font-size: 1em;
  line-height: 1.5; font-family: sans-serif; background-color: white;

}

*, *::before, *::after {
  box-sizing: border-box;
}



/* structure site */

#logo {
  height: 10%;
  width: 55vw;
  position: fixed; top:0; left:15vw;
  text-align: center; margin:0;
z-index: 2}

#logo img { height: auto; width:80%;  margin: auto;}

#footer {width: 55vw; 
	position: fixed; 
	bottom: 0; left: 15vw; 
	padding-top: 5px; 
padding-bottom: 5px;
	background-color: #5a91a3; 
	z-index: 2;        
	text-align:center; 
	font-size: 0.7em;}

#contener-img {
	width: 55vw; 
	height: 100%; 
	position: fixed;
	top:0; left:15vw;
	margin: 0; 
	padding:0;
	z-index: 0;
    background-color: #c5baa9
}

#contener-img img {width: 100%; height: auto}



#sociaux2 {position: fixed; right: 0; top: 0; padding: 0.5em; z-index: 5000; text-align: right; }




/* rubriques */

#bandeau {position: absolute; 
          top: 0; right: 0; 
          height: 100vh; width: 30vw; 
          z-index: 14 !important; overflow-y: scroll; 
          background-color: #ece4da; 
          padding: 1.5em; 
          text-align: justify;  
          box-shadow: -5px 10px 10px #333333 ;
	-webkit-box-shadow: -5px 10px 10px #333333;
	-moz-box-shadow: -5px 10px 10px #333333;  }



#rub1 {position: absolute; top: 87vh; left: 17vw; z-index: 50 !important }
#rub2 {position: absolute; top: 87vh; right: 32vw; z-index: 50 !important }

a.rub {color: white;  text-decoration: none; font-weight: bold; padding: 1em; background-color: #466675; -webkit-border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;}
a.rub:hover {color: white !important; background-color: #5a91a3; }
a.rub:active {color: white !important;background-color: #5a91a3; }
a.rub:visited {color: white !important;  background-color:  #466675; }




.item_navg {margin:0.5em; display: block; position: relative; float: left; border: 3px solid white; padding:0; width:100%;}
.item_navg img {width: 100% !important; height: auto; padding:0; margin:0}
.item_navg_titre {position: absolute; bottom: 0em; left: 0;width: 100%; z-index:3; margin:0; text-align:center; text-transform: uppercase; font-size: 0.7em; color: white; padding:0.2em; background-color:rgba(0,0,0,0.5);}

.item_navg2 {margin: 0.5em; display: block; position: relative; float: left; border: 3px solid white; padding:0; width:45%;}
.item_navg2 img {width: 100% !important; height: auto; padding:0; margin:0}


/* articles */

#article {position: absolute; top: 15vh; left: 20vw; width: 50vw; height: 65vh; overflow: scroll; background-color: rgba(236,228,218,0.9); padding: 1.5em; text-align: justify}
#article img {width: 20%; height:auto; position: relative; float:left; border: 2px solid white; margin: 0.5em}

#affiche {position: absolute; top: 15vh; left: 20vw; width: 50vw; height: 65vh; overflow: scroll; background-color: rgba(236,228,218,0.9); padding: 1.5em; text-align: justify}
#affiche img {width: auto; height:100%; position: relative; float:left; border: 2px solid white; margin-right: 1.5em}


/* navigation menu */

#nav_gauche {
	width: 15vw; 
	height: 100%;
	position: absolute;
	top:0; left:0; 
	background-color: #466675;
	box-shadow: 5px 10px 10px #333333 ;
	-webkit-box-shadow: 5px 10px 10px #333333;
	-moz-box-shadow: 5px 10px 10px #333333;  
	z-index: 3;
	margin:0;
	overflow-y: scroll; 
	padding:2em;
    font-size: 0.8em; 
    text-align: left;
    color: white }
	
.spip_document figure {margin: 0 !important; padding:0!important;}

p {padding-bottom: 1em;}