@charset "utf-8";
* { box-sizing: border-box; }
body, div, ul { margin: 0; padding: 0; }
body { background-image: url(../images/hk-body.jpg); 


 font-family: 1.25rem Garamond, Times, serif; }
.global { margin: 0 auto; max-width: 1200px;
 background-color: whitesmoke;
 border: solid 1px lavender; border-top: none;} 


.entete img { display: block; width: 100%; } 


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


/* Structure de la page */ 


article { grid-area: page; }
aside { grid-area: cadre; }
main { display: grid; grid-template-columns: 3fr 1fr;
 grid-template-areas: "page cadre"; }
article, aside { padding: 20px; } 

 
aside { padding-top: 80px; text-align: center; } 

 
aside img { margin: 8% 0; } 


/* Pied de page */ 

 
.pied { padding: 10px;
 background: linear-gradient(whitesmoke, lightgray);
 border-top: solid 1px lightgray; }
 
/* Détails pour le menu de navigation */
#menu { display: flex; list-style-type: none; } 

 
#menu li { flex: 1 1 auto; } 


#menu li a, #menu li a:visited { 


 display: block; text-align: center;
 padding: 15px 0; border-right: solid lightgray 1px;
 font-family: Arial, sans-serif;
 font-size: 1.1rem; font-weight: bold;
 color: brown; text-shadow: white 2px 0 0;
 text-decoration: none; }
#menu li a:hover { 

 
 background: linear-gradient(silver, dimgray);
 color: white; text-shadow: none; }
 
/* Contenu de la page */
h1 { font-family: Arial, sans-serif;
 font-size: 1.6rem; color: #d06b19; } 

 
h2 { font-family: Arial, sans-serif;
 font-size: 1.3rem; color: brown;} 


/* Classes pour l’alignement */ 


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