/* Pour la dimension des boites identiques même avec un padding   */
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}



/* Pour les ordinateurs "Times New Roman", Times, serif*/
HTML
{
    font-size: 100%;    
}


body
{

 font: 1.1em/1em "Times New Roman", Times, arial;
 
  
 max-width:1200px;
 margin: auto;

}

input, select, textarea:
{
 font-size: 100%;
 }
 
 h1{
    
    font: 2em/1em;
	line-height:30px;
}

h2{
    
    font: 1.5em/1em;
}

h3{
    
    font: bold 1.2em/1em ;
	margin-bottom: 0.5em;
	margin-top: 0em;
} 

#logo
{
  width :100% ;
  height : auto;        
  background : ;
  float: none;
}

#logo img
{
	width :100% ;
	height : auto;
}

#menu
{
	display:none ;
	
}

#gauche
{
  width :20% ;
  height : auto;        
  background : ;
  float: left;
  padding-left: ;
  word-wrap: break-word;
   overflow: auto;
  
}

#gauche2
{
  width :100% ;
  height : 2500px;        
  background :#B0CC99 ;
  float: left;
  padding-left: 1%;
  word-wrap: break-word;
  overflow: auto;
  
}

#gauche1
{
  width :100% ;
  height : auto;        
  background :black ;
  color: white;
  float: left;
  padding-left: 1%;
  word-wrap: break-word;
  overflow: hidden;
}
#gauche1 a:link {  color: white ; text-decoration:undreline;}
#gauche1 a:visited {  color: white ; text-decoration:undreline;}
#gauche1 a:hover {  color: red ; text-decoration:undreline;}
  
}

#gauche3
{
  width :100% ;
  height : auto;        
  background : ;
  float: left;
  word-wrap: break-word;
  overflow: hidden;
  
}



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

#gauche4
{
  width :100% ;
  height : auto;        
  background :#B0CC99 ;
  float: left;
  padding-left: 1%;
  word-wrap: break-word;
  overflow: hidden;
  
}
 

#centre
{
  padding: 0.5em;	
  width :51% ;
  background : ;
  height : auto;
  float: left;
}

#centreresponsive
{
  	
  width :600px ;
  background: #EFEFEF;
  height : auto;
  border-style:solid;
  border-width:1px;
  float: left;
  word-wrap: break-word;
  
}

#centre1
{
  
  width :53% ;
  height : auto;
  background :#EFEFEF ;
  float: left;
  word-wrap: break-word;
   overflow: hidden;
   padding: 1%;

  
}

#centre11
{
 
  width :15% ;
  height : auto;
  background : ;
  float: right;
  word-wrap: break-word;
   overflow: hidden;
   padding: 1%;

  
}

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


#centre2
{
  
  width :40% ;
  height : 100%;
  background: #EFEFEF;
  float: right;
  word-wrap: break-word;
  text-align: center;
  padding: 1%;
 
  
}

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

#centre3
{
  
  width :100% ;
  height : 100%;
  background: ;
  float: right;
  word-wrap: break-word;
  text-align: center;
  padding: 1%;
 
  
}

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


 

#droit
{
  padding-left: 0.5em;
  width :29% ;
  background : ;
  height : auto;
  float: left;
}

#droit1
{
  padding-top: 1em;
  width :100% ;
  background : ;
  height : auto;
  float: left;
}

#droit1 img
{
	width :100% ;
	height : auto;
}

#droit2
{
  width :100% ;
  background : ;
  height : auto;
  float: left;
}

#droit2 img
{
	width :100% ;
	height : auto;
}

a:link {  color: black ; text-decoration:undreline;}
a:visited {  color: black ; text-decoration:undreline;}
a:hover {  color: red ; text-decoration:undreline;}

#pied
{
	width :100% ;
	height : auto;
	background-color: #008080;
	color: white;
	overflow: hidden;
}

/* Définit la couleur des liens hypertexte dans le div footer */
#pied a:link {  color: white ; text-decoration:undreline;}
#pied a:visited {  color: white ; text-decoration:undreline;}
#pied a:hover {  color: red ; text-decoration:undreline;}


 /* ***********************************************************************************Pour les tablettes **************************************************************************/
@media all and (max-width: 1200px) /* Pour les tablettes */
{
  
	
  #body
    {
    width: auto;
  }
  
  #gauche
{
  width :30% ;
  height : auto;        
  background : ;
  float: left;
}

 
#centre
   {
	  width :70% ;
	  background : ;
	  height : auto;
	  float: left;
  }
   
  #droit
    {
	display: none;
	
  }

  
  
  


  
}

/******************************************************************************** Pour les smartphones *********************************************************************************/

@media all and (max-width: 600px) /* Pour les smartphones */
{
	
	
  #body
    {
   	
   width: auto;
  }
  
 #logo
    {
   position:relative;
	top:0px;
  }
 
 #menu
{
	display:block ;
	font-size: 0.6em;
	
}
  
  #gauche
{
  
  display: none;
  
  
}

  
  #droit
    {
	display: none;
	
  }

  
  #centre
   {
	  width :100% ;
	  background : ;
	  height : auto;  /* La hauteur se définit automatiquement */
	  float: none;
	  overflow : hidden;
	   word-wrap: break-word;
  }
  
  #centreresponsive
   {
	  width :100% ;
	  height : auto;  /* La hauteur se définit automatiquement */
	  float: none;
	  overflow : hidden;
  }
  
  #centre1
{
  padding: 0.3em;
  font-size: 0.6em;
  width :70% ;
  
  height : auto;
  float: left;
}

#centre2
{
  width :30% ;
  background : ;
  height : auto;
  float: left;
}

#pied
{
	width :100% ;
	height : auto;
	background-color: #008080;
	color: white;
	overflow: hidden;
}
  
}