/* CSS Document */
#main {
  width: 80%;
  display:-webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  margin-left:10%;
  z-index:900;
}


#main .item1 {width:20%; margin: 10px; z-index:1000;} 
 .item1 img{width:89%;}
#main .item2 {width:50%; margin: 10px;z-index:1000;} 
#main .item3 {width:25%; z-index:1000;} 
#main .item4 {width:60%; margin: 10px;z-index:1000;} 

 @media only screen and (max-width: 1020px) {
 #main {
  width: 90%;
   margin-left:5%;
  }
  #main .item1 {width:18%; margin: 10px; z-index:1000;} 
 .item1 img{width:89%;}
#main .item2 {width:48%; margin: 10px;z-index:1000;} 
#main .item3 {width:23%; z-index:1000;} 
#main .item4 {width:60%; margin: 10px;z-index:1000;} 
h4{font-size:0.9em;line-height:1.2em;}
.item1 img{width:100%;}
img.gimik{width:37%;}
.calendarWrap{width:27%;}
.loupindex{width:70%; height:70%; }
titre-nom{font-size: 1.1em;}
texte,texte-fiche{font-size: 0.85em;word-spacing:normal; line-height:1.2em;}
}
@media only screen and (max-width: 600px) {
body.index{height:auto;overflow:scroll;}
#main {width: 96%;margin-left:2%;}
#main .item1 {width:18%; margin: 10px; z-index:1000; text-align:center;} 
.item1 img{width:89%;}
#main .item2 {width:48%; margin: 10px;z-index:1000; text-align:center;} 
#main .item3 {width:23%; z-index:1000;} 
#main .item4 {width:60%; margin: 10px;z-index:1000; text-align:center;} 
h4{font-size:0.85em;line-height:1.15em;}
.item1 img{width:100%;}
 img.gimik{width:22%;}
 .calendarWrap{width:50%; text-align:center; left:25%;}
.loupindex{width:60%; height:60%; }
titre-nom{font-size: 1.05em;}
texte,texte-fiche{font-size: 0.8em;word-spacing:normal; line-height:1.15em;}
}

@media only screen and (max-width: 500px) {
body.index{height:auto;overflow:scroll;}
#main {width: 96%;margin-left:2%; flex-wrap:wrap;}
#main .item1 {width:90%; margin: 10px; z-index:1000; text-align:center;} 
.item1 img{width:89%;}
#main .item2 {width:90%; margin: 10px;z-index:1000; text-align:center;} 
#main .item3 {width:90%; z-index:1000;} 
#main .item4 {width:60%; margin: 10px;z-index:1000; text-align:center;} 
h4{font-size:0.8em;line-height:1.05em;}
.item1 img{width:100%;}
.item2{height:750px;}
 img.gimik{width:20%;}
 .calendarWrap{width:60%;; left:20%;}
.loupindex{width:50%; height:50%; }
titre-nom{font-size: 1em;}
texte,texte-fiche{font-size: 0.75em;word-spacing:normal; line-height:1.2em;}
} 
	
	/*——————————————————— NOUVEAU ——————————————————————*/



#sommaire {
	position: absolute;
	width:300px;
	top:90px;
	margin-left:100px;
	background-color: #999 ; opacity: 0.85;
border-radius: 8px 8px 8px 8px ;
	}
.gdtitre {
	font-family: "Saira Condensed";
	color: #FFF;
	margin:10px 20px 10px 20px;
}
.gdtitre a:hover {
-webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
	color: #F00;
}
#foottext {
	position: relative;
	background-color: #F00;
	color: #FFF;
	width: 100%;
	z-index: 10000;
}
#foottext a:link {
	text-decoration: none;
	}
#footer {
	position: fixed;
	max-height:50px;
	-webkit-transition: all .6s ease-in;
    -moz-transition: all .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
	z-index: 10000;
	left: 0;
	right: 0;
	bottom: -5px;
}

#footer:hover {
	max-height:500px;
}

.typofoot:hover a {
	visibility: visible;
.typofoot{
	font-family: Verdana, Geneva, sans-serif;
	color: #FFF;
	border: 5pt dotted #F00;
}
.typofoot a {
	font-size: 0.9vw;
	line-height: 13pt;
	color: #FFF;
	visibility: hidden;
}
.typofoot a:hover {
	color: #333;
}