body
{
  min-width: 320px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 2px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
	margin-left: 2px;  
	margin-right: 2px;
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
	background-color: rgb(153,221,255);
   font-family: "Microsoft sans serif";
   font-size: 100%;
   color: black;   
}
 
  
#bloc_page
{
  margin: auto;
  display: flex;
  flex-direction: column;
 }

#bloc_page img
 {max-width: 100%;
  border-radius:10px;
 }

 #bloc_page table
 {max-width: 100%;
 }
  
.gras
{
   font-weight: bold;
   }
   
a /* Tous les liens dans le corps */
{
   color: black;
   text-decoration: none;
}

   a:hover /* Quand on pointe sur un lien dans le corps */
{
  background-color: rgb(153,221,255);
  color: black;
}


/* L'en-tête */

header
{
   width: 98%;
   margin: auto;
   background-color:rgb(204,238,255);
   color: black;
   border: 2px solid black;
   border-radius:10px;
   display: flex;
   justify-content: center;
   padding: 5px;
   margin-bottom: 5px;
      }

/*SECTION*/

section
{
   width: 98%;
   margin: auto;
   background-color: rgb(204,238,255);
   color: black;
   border: 2px solid black;
   border-radius:10px;
   display: flex;
    justify-content: center;
    padding: 5px;
   margin-bottom: 5px;
       }

	   #imageblock1
	   {width: 45%;}
	

footer
{
   text-align: center;
   width: 99%;
   margin: auto;
   color: black;
  background-color: rgb(204,238,255);
   border: 2px solid black;
   border-radius:10px;
   display: flex;
   justify-content: center;
   
   }	
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX	*/
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	
/* IPad Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) 
  {
	  

/* L'en-tête */
header
{
   width: 100%;
      }
  
	h1
	{
	font-size: 150%;
				}
	  


section
{
   width: 100%;
     }
 
		
 
	   #imageblock1
	   {width: 80%;}



footer
{
   width: 102%;
    }
   
	
  } 
  
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX	*/
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	
/* IPad LANDSCAPE */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) 
  {
 

	
/* L'en-tête */
header
{
   width: 100%;
      }
  
  
	
	h1
	{
	font-size: 160%;
				}

  /* Le corps de la page */

section
{
   width: 100%;
     }
 
 
	   #imageblock1
	   {width: 60%;}
	

footer
{
   width: 101%;
    }
	



  }
  
     /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* IPhone LANDSCAPE*/ 
 
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (orientation: landscape)
  
  {

   
header
{
   width: 100%;
  justify-content: center;
   align-items: center;
            }
  
	h1
	{
		font-size: 130%;
		}
	
	section
{
        width: 100%;
	    }

 		
/* Le corps de la page */


	   #imageblock1
	   {width: 100%;}
	

	footer
{
   width: 102%;
   font-size: 70%;
       }
	#lien_email
  {
  background-color: rgb(153,221,255); 
}
  }
  /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* IPhone PORTRAIT*/ 
 
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (orientation: portrait)
  
  {

header
{
   width: 100%;
   justify-content: center;
   align-items: center;
            }
  
  
	h1
	{
		font-size: 100%;
		text-align: center;
		}
		

	section
{
   width: 100%;
   }
	
  
 
	   #imageblock1
	   {width: 100%;}
	

   
 /* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

footer
{
   width: 103%;
   font-size: 50%;  
   }		
  
  #lien_email
  {
  background-color: rgb(153,221,255); 
}
  
  
	}