@charset "utf-8";


@media screen and (min-width: 402px) and (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		min-width: 402px;
		width: auto;
		max-width: 640px;
		margin: 0;
		padding: 0;
/*
 background-image:url(../../../images/charte/fond_bleu_belleville.png); */
 background:#650000;
      background-position: center center;             
      background-size: 100% 100%; 
        background-repeat:repeat;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer les éléments superflus */

	.hide_mobile {
		display: none !important;
	}
	
	/* Un message personnalisé */
/*
	body:before {
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color: #777;
	}
	*/
	.coucheFond {
	   position:relative;
		width: 100%;

/*background-image:url(../../images/lesPanamas_12102016_6.png);*/
     background-repeat:no-repeat; 
      background-position: center center;             
      background-size: 100% 100%; 
      /* background:#F9DF19;
    
 background:#FEd400;
 background:#F98000;
        background:#edd400;   
       */    
}
}



.coucheEntete {
	   position:relative;
/*background:#420000;*/

       


            background-size: 100% 100%; 
}
.banEntete {
	   position:relative;
	     top:2px;
	        left:1px;
}
.coucheCorps {
   position:relative;
/*background:#65314E;
   background-repeat:no-repeat;
        background-image:url(../../images/bands/bellevilleCats/photo_bellevilleCatsFB_floue_1.png);
        
        affiche_auMetro_2017_05_06_1_650x400.png
        */
 
     top:2px;
     width:auto;  
     height:auto;     
     font-size:14px;
  align-content:center;
}
.couchePied {
   position:relative;
     background-position: center center;             
      background-size: 100% 100%; 
   background-repeat:no-repeat;
   /*     background-image:url(../../images/bands/bellevilleCats/photo_bellevilleCatsFB_floue.png);*/
     height:auto; 
   bottom:0;
   left:0;
   right:0;
}

  .testgrid{
  position:relative;

          width:auto; 
	     left:1px;
     top:1px; 
        font-size:14px; 
   /* display: grid;
 	 line-height:10px; /*hauteur de l'image de fond
  grid-template-columns:  30% 40% 30%;
 /* grid-template-rows: 20px 1fr; /* 100px + "hauteur restante" */
  }
   .testgrid a{
  text-decoration:none;
 text-align:center;	

  color:#white;
}
  .testgrid a:hover{
  text-decoration:none;
 text-align:center;	

  color:#CC5CCC;
}
  .testgrid table{
  width:99%;
  }
.elementNav0 {
	 line-height:15px; /*hauteur de l'image de fond*/
 text-align:center;	

 /* color:#CCCCCC;*/
}
.elementNav1 {
	 color:#FF0000;
	 line-height:15px; /*hauteur de l'image de fond*/
 text-align:center;	

  font-weight:bold;
}
  .nav0 {
  grid-column: 1; /* placement en colonne 1 */
  width: 30%;
}
  .nav1 {
  grid-column: 2; /* placement en colonne 1 */
  width: 40%;
}
  .nav2 {
  grid-column: 3; /* placement en colonne 1 */
    width: 30%;
}



ul {
	   width:100%;
 padding:1px;
 margin:1px;
 list-style-type:none;
 }
li {
 float:left; /*pour IE*/
/*
 border-right:1px solid grey;
  border-bottom:1px solid grey;
*/ 
  margin:2px;
 }
ul li a {
 display:block;
 float:left;   
 width:120px;
 line-height:30px; /*hauteur de l'image de fond background-image:url(../../images/grainRouge.png);*/
 color:#999999;
 text-decoration:none;
 text-align:center;
 }
ul li a:hover {
/* background:white;
  background-repeat: repeat-x;
  height:30px;*/
 color:green;
 }  
 
 a {
 /*display:block;*/
 float:center;   

 /*color:#121212;*/
 color:white; 
 text-decoration:none;

 }
 
 a:hover {

  /*background-repeat: repeat-x;
  line-height:30px;*/
 color:blueviolet;
 }  
 #texteSurBlanc {
    
 text-align:center;	

 display:block;

}
 #texteparagraphe {
   width:800px;  
 text-align:justify;	

 display:block;

}