	* { 
		margin: 0; 
		padding: 0; 
	}
	body { 
		font: 14px/1.4 Georgia, Serif; 
	}
	#page-wrap {
		margin: 50px;
	}
	p {
		margin: 20px 0; 
	}
	/* 
	Generic Styling, for Desktops/Laptops 
	*/
	table { 
		margin: auto; /* Centre le tableau */
		border: 4px outset green; /* Bordure du tableau avec effet 3D (outset) */
		border-collapse: collapse; /* Colle les bordures entre elles */
		width:100%;
	}
	/* Zebra striping */
	tr:nth-of-type(odd) { 
		background: #eee; 
	}
	td /* Les cellules normales */
	{
		border: 1px solid black;
		font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
		text-align: center; /* Tous les textes des cellules seront centrés*/
		padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
	}
	th { 
		background-color: #006600;
		color: white;
		font-size: 1.1em;
		font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
		border:1px solid red;		
	}
	td, th { 
		padding: 6px; 
		border: 1px solid #ccc; 
		text-align: left; 
	}	
	caption /* Titre du tableau */
	{
		margin: auto; /* Centre le titre du tableau */
		font-family: Arial, Times, "Times New Roman", serif;
		font-weight: bold;
		font-size: 1.2em;
		color: #009900;
		margin-bottom: 20px; /* Pour éviter que le titre ne soit trop collé au tableau en-dessous */
	}

	.mobile { display: none; 
	} 
	body, div, ul { margin: 0; padding: 0; 
	}

	body { background-image: url(hk-body.jpg);
	  font-family: Garamond, Times, sans-serif; 
	  }

	.global { margin: 0 auto; max-width: 950px;  
	 background-color: whitesmoke;
	  border: solid 1px lavender; border-top: none; 
	  }
			header
			{
			position:fixed;
			top:0px;
			width:100%;
			background:url('../img/blue-grey-pentagonal-background.png');
			background-size:cover;
			height:25%;
			color:#fff;
			text-align:center;
      padding-top:10px;
			padding-left:10px;
			box-shadow: 0 5px 5px -5px #000;
			z-index:20;
			}
      header img
			{
			width:20%;
			height:100px;
			max-width:150px;
			border-radius:50%;
			}
	.entete img { display: block; width: 100%; } 

	#menu { height: 48px; background-color: lavender;
	  background: linear-gradient(lightgray, whitesmoke);
	  border-bottom: solid 1px lavender; }

	ul.afficher, ul.masquer { height: 48px; 
	}   

	 .contenu { clear: both; padding: 10px; margin-top:50%; }
	 .contenu img { max-width: 100%; } 

	article { float: left; width: 65%; }
	aside { float: right; width: 30%;
	padding-top: 15px; text-align: center; }
	.pied { clear: both; height: 50px; text-align: center; 
	background: linear-gradient(whitesmoke, lightgray);
	padding: 5px; border-top: solid 1px lightgray; }

	/* Détails pour le menu de navigation */
	#menu li { float: left; list-style-type: none;
		line-height: 28px; }

	#menu li a, #menu li a:visited {
	  display: block; padding: 10px 28px;
	  border-right: solid lightgray 1px;
	  font-family: Arial, sans-serif;
	  font-size: 1em; font-weight: bold;
	  color: brown; text-shadow: white 2px 0 0;
	  text-decoration: none; }

	#menu li a:hover {
	  background-color: lightsteelblue;
	  background: linear-gradient(silver, dimgray);
	  color: white; text-shadow: none; }

	/* Contenu de la page */
	h1 { font-family: Arial, sans-serif;
		font-size: 1.5em; color: #d06b19; }
	h2 { font-family: Arial, sans-serif;
		font-size: 1.2em; color: brown; }

	.droite { float: right; margin-left: 10px; }
	.gauche { float: left; margin-right: 10px; }

	/* RESPONSIVE */

	@media only screen and (min-width: 768px)
					   and (max-width: 959px) {  
	  body { background-image: none; }
	  #menu li a, #menu li a:visited {
		padding: 10px 15px; }
	}

	@media only screen and (min-width: 640px)
					   and (max-width: 767px) { 
	  body { background-image: none; }
	  #menu li a, #menu li a:visited {
		padding: 10px 8px; font-size: 0.95em; }
	  article { width: 60%; }
	  aside { width: 35%; }
	}

	@media only screen and (max-width: 639px) {     
	  body { background-image: none; }
	  .mobile { display: block; } 
	  #menu, #menu.masquer { height: 0; } 
	  #menu.afficher { height: 343px; } 

	#menu { transition: height 1s; overflow: hidden; 
		border-bottom: none; background: none; }
	#menu li { float: none; 
	  background-color: lightgray;
	  background: linear-gradient(lightgray, whitesmoke);
	  border-bottom: solid 1px lavender; }

	#menutitre { display: block; width: 100%; line-height: 3em; 
	  background-color: lightsteelblue;
	  background: linear-gradient(silver, gray);
	  text-align: center; font: 1.1em/2.5em Arial, sans-serif;
	  color: white; font-weight: bold; text-decoration: none; }

	article, aside { float: none; width: 100%; } 
	}