body{background-color:#CCCCCC; border:0;padding:0;margin:0;text-align:center;}
h1{width:100%;}
.XX{float:left;width:100%;}
.XX img{width:45%;}

#seule{image-orientation: from-image;width:100%;float:left;}
#seule a img{max-height:80%;max-width:80%;float:left;}


	.UneImage{
		float:left;
		width:23%;margin:1%;	
		}
	.UneImage img{
		float:left;
		width:100%;height:100%;	border:0.1em solid #000000;
		image-orientation: from-image;
		}
	#Gallerie{
		position:absolute;
		left:5%;
		width:90%;
		height:90%;
		}


	#Oeuvres_cinq{
		position:relative;float:left;
		top:2%;left:2%;
		width:74%;height:78.6%;
		background-color:#FFFFFF;
		}

.TextZip{font-size:1em;}

	#tout { position: absolute;border:1px solid #Z000000;
			width:100%;		 
			height:100%;
			text-align:left;  
			}		








.retour{z-index:30;}

@media (max-width:399px){
#Ind_texte{font-size:50%;}#Ind_deux p{font-size:1.6em;}
}
@media (min-width:400px) and (max-width:599px){
#Ind_texte{font-size:50%;}#Ind_deux p{font-size:2em;}
}

@media (min-width:600px) and (max-width:899px){
#Ind_texte{font-size:75%;}#Ind_deux p{font-size:2.4em;}
}

@media (min-width:900px) and (max-width:1199px){
#Ind_texte{font-size:100%;}#Ind_deux p{font-size:2.6em;}
}

@media (min-width:1200px) and (max-width:1999px){
#Ind_texte{font-size:180%;}#Ind_deux p{font-size:3em;}
}

@media (min-width:2000px) and (max-width:3999px){
#Ind_texte{font-size:400%;}#Ind_deux p{font-size:4em;}
}


@media (max-width:399px)
{
	
<!-- 
[#sept_RetourAccueil{		
		position:absolute;
		top:0%;
		left:1%;
		width:20%;
		height:8%;
		background-color:#FFFFFF;
		z-index:10;
		}		
		]
-->

	#cinq_oeuvre{
		position:absolute;
		top:30%;
		left:16%;
		width:40%;
		height:60%;
		background-color:#FFFFFF;
		float:left;
		}		
	#cinq_oeuvre img{
		display: block;
		margin-left: auto;
		margin-right: auto;width:100%;
		}
	
	#six_oeuvre{
		position:absolute;
		top:30%;
		left:66%;
		width:34%;
		height:60%;
		background-color:#FFFFFF;
		float:left;
		}	
		
		
	
	#Oeuvres_quatre{background-color:#FFFFFF;
		position:absolute;
		top:0%;left:0%;
		width:100%;height:17%;
		background-image:url(Menus/quatre.jpg);
		}
		
		



		

		
		
		
		
		
		
		
	
	#Ind_un{
		position:absolute;
		top:0%;left:0%;
		width:0%;height:0%;
		background-color:#FFFFFF;
		z-index:-10;
		}
	#Ind_deux{
		position:absolute;
		top:0%;left:0%;
		width:100%;height:11%;
		background-image:url(Menus/deux.jpg);
		}
	#Ind_deux p{ font-family: Arial, Helvetica, sans-serif;
		text-align:center;color:#FFFFFF;width:100%;margin:0px;
		}	
		
	#Ind_trois{
		position:absolute;
		top:11%;left:0%;
		width:100%;height:2%;
		background-color:#FFFFFF;
		}
				
	#Ind_quatre{background-color:#FFFFFF;
		position:absolute;
		top:83%;left:0%;
		width:100%;height:17%;
		background-image:url(Menus/quatre.jpg);
		}

		


	#Ind_cinq{
		position:absolute;
		top:1%;left:5%;
		width:10%;
		background-color:#FFFFFF;
		}
		
	#Ind_six{
		position:absolute;
		top:13%;left:5%;
		width:90%;height:65%;
		background-color:#FFFFFF;
		}	

	#Ind_sept{
		position:absolute;
		top:78%;left:0%;
		width:100%;height:2%;
		background-image:url(Menus/deux.jpg);z-index:3;
		}	

	#Ind_quatre_menu{/*text-align:left;*/
		/*margin-top:5%; */
		position:absolute;
		height:100%;
		width:100%;
		}

	#Ind_imagedaccueil{ border:5px solid #Z000000;
	  width:90%;position:absolute; float:left;left:5%;top:-10%;}	
	  
		
	#Ind_texte{float:left;margin-top:5%; border:5px solid #FFFFFF;
		position:absolute;
		text-align:center;
		width:80%;	
		background-color:#FFFFFF;	
		font-size:0.8em;}
		
	.Ind_M2,.Ind_M3,.Ind_M4,.Ind_M5,.Ind_M7,.Ind_M8 {
		position:absolute;
		float:none;		
		}	
	.Ind_M2{top:0%;left:2%;z-index:10;
		}	
	.Ind_M2 img{width:30%;}
	.Ind_M3{top:25%;left:2%;z-index:10;
		}	
	.Ind_M3 img{width:30%;}
	.Ind_M4{top:50%;left:2%;z-index:10;
		}	
	.Ind_M4 img{width:30%;}
	.Ind_M5{top:75%;left:2%;z-index:10;
		}	
	.Ind_M5 img{width:30%;}
	
	
	.Ind_M7{top:0%;left:38%;z-index:10;
		}	
	.Ind_M7 img{width:60%;}
	.Ind_M8{top:50%;left:38%;z-index:10;
		}	
	.Ind_M8 img{width:60%;}	
	
	
	.Ind_MI1,.Ind_MI6,.Ind_MI9{
		position:absolute;top:0%;left:0%;
		float:none;
		width:0%;height:0%;z-index:-10;
		}	
	}

























@media (min-width: 400px)
{

	#sept_RetourAccueil{		
		position:absolute;
		top:0%;
		left:1%;
		width:20%;
		height:8%;
		background-color:#FFFFFF;
		z-index:10;
		}		

	#cinq_oeuvre{
		position:absolute;
		top:16%;
		left:0%;
		width:52%;
		height:60%;
		background-color:#FFFFFF;
		float:left;
		}		
	#cinq_oeuvre img{
		display:block;
		margin-left: auto;
		margin-right: auto;width:50%;
		}
	
	#cinq_oeuvre2{
		display:none;z-index:40;
		position:absolute;
		top:16%;
		left:0%;
		width:52%;
		height:60%;
		float:left;
		}		
	#cinq_oeuvre2 img{display:block;z-index:40;		
		margin-left: auto;
		margin-right: auto;width:50%;
		}
	#fond_grisee{background-image:url("Oeuvre-Fond.png");
		width:100%;height:100%;
		position:absolute;
		z-index:-20;display:none;	
		}
	
	#six_oeuvre{
		position:absolute;
		top:16%;
		left:55%;
		width:44%;
		height:60%;
		background-color:#FFFFFF;
		float:left;
		}	
		
	#UneOeuvre_cinq{
		position:absolute;
		top:14.4%;left:26%;
		width:74%;height:78.6%;
		background-color:#FFFFFF;
		}
	#UneOeuvre_GaucheDroite #gauche{position:absolute;left:17%;top:0%;
			}	
	#UneOeuvre_GaucheDroite #centre{position:absolute;left:22%;top:0%;
			}	
	#UneOeuvre_GaucheDroite #droite{position:absolute;left:27%;top:0%;
			}	
	
	
	
	
	
	#Oeuvres_quatre{background-color:#FFFFFF;
		position:absolute;
		top:21.4%;left:0%;
		width:26%;height:68.6%;
		background-image:url(Menus/quatre.jpg);
		}
		

				
		
		

	#GaucheDroite{position:absolute;
		top:0%;
		left:8%;
		width:20%;
		height:10%;
		}
		
	#GaucheDroite #gauche{position:absolute;left:0%;top:0%;
			}	
	#GaucheDroite #droite{position:absolute;left:0%;top:60%;
			}	







		
	#Gallerie{
		position:absolute;
		top:12.7%;
		left:5%;
		width:90%;
		height:90%;
		}
		
	.UneImage{
		float:left;
		width:23%;margin:1%;	
		}
	.UneImage img{
		float:left;
		width:100%;height:100%;	border:0.1em solid #000000;
		}
















	#Ind_un{
		position:absolute;
		top:0%;left:0%;
		width:44.2%;height:11%;
		background-color:#FFFFFF;
		z-index:-10;
		}
		
		
	#Ind_deux{
		position:absolute;
		top:0%;left:44.2%;
		width:55.8%;height:11%;
		background-image:url(Menus/deux.jpg);
		}
	#Ind_deux p{ font-family: Arial, Helvetica, sans-serif;
		text-align:center;color:#FFFFFF;
		vertical-align:text-top;margin:0;
		}			
	#Ind_trois{
		position:absolute;
		top:11%;left:0%;
		width:100%;height:10.4%;
		background-color:#FFFFFF;
		}
				
	#Ind_quatre{background-color:#FFFFFF;
		position:absolute;
		top:21.4%;left:0%;
		width:26%;height:68.6%;
		background-image:url(Menus/quatre.jpg);
		}


	#Ind_cinq{
		position:absolute;
		top:21.4%;left:26%;
		width:37%;height:68.6%;
		background-color:#FFFFFF;
		}
		
	#Ind_six{
		position:absolute;
		top:21.4%;left:63%;
		width:37%;height:68.6%;
		background-color:#FFFFFF;
		}	

	#Ind_sept{
		position:absolute;
		top:90%;left:0%;
		width:100%;height:10%;
		background-color:#FFFFFF;z-index:-3;
		}	


	#Ind_quatre_menu{text-align:right;margin-top:5%; 
		position:absolute;
		height:100%;
		width:100%;
		}

	#Ind_imagedaccueil{ border:5px solid #Z000000;
	  width:90%;position:absolute; float:left;left:5%;top:-10%;}	
	  
		
	#Ind_texte{float:left;margin-top:5%; border:5px solid #FFFFFF;
		position:absolute;
		text-align:center;
		width:80%;	
		background-color:#FFFFFF;	
		}
		
		
	.Ind_M2,.Ind_M3,.Ind_M4,.Ind_M5,.Ind_M7,.Ind_M8 {
		position:relative;
		float:none;
		width:100%;		
		}	
		
	.Ind_M2 img{width:100%;}


	.Ind_M3 img{width:100%;}


	.Ind_M4 img{width:100%;}


	.Ind_M5 img{width:100%;}
	
	


	.Ind_M7 img{width:100%;}


	.Ind_M8 img{width:100%;}	
		
		
	.Ind_MI1,.Ind_MI6,.Ind_MI9{
		position:relative;
		float:none;
		width:100%;
		}	
		.Ind_MI1 img,.Ind_MI6 img,.Ind_MI9 img{width:100%;}
	}
	
<!-- Structure de notre page : -->
<!--

   Idéal :400x[280;+inf[	tout 100% x 100%
   
--------------- index -------------------------------	
	1		|		2:image
^<--30%-->	| ^  <----------- 70% --------->      
|			| |
10%			| 10%
|			| |
v			| v
------------|-----------------------------------
4 menu		|    5
<-- 25 % -->| <----------- 75% --------->      
^			|^	
|			||				
|			||				
90%			|90%
|			||			
|			||
v			|v
------------|------------------------------------
			|
			|
	
	
	
	
	
	-->
	
	
#Ind_M1,#Ind_M2,#Ind_M3,#Ind_M4,#Ind_M5 {position:relative;}
	
	#zInd_T
	#zzzInd_animalaccueil {background-color:#AFFADF;}


#zInd_cinqsix{
	position:relative;
	top:0px;
	left:0%;
	width:73%;
	height:60%;
	background-color:#FFFFFF;	
	float:left;
	}

	

	#zsix-accueil{
	position:relative;
	top:0px;
	left:0%;
	width:50%;
	height:90%;background-color:#FFFFFF;float:left;
	}	

	

#Ind_sept{
	position:relative;
	top:2px;
	left:0px;
	width:98%;
	height:5%;background-color:#FFFFFF;z-index:0;float:left;
	}	
	
	
#zzInd_trois{float:left;
	position:relative;
	width:98%;
	height:5%;
	background-color:#FFFFFF;
	}	
	
-->