/*-----------------------            css adaptative    -------------------- */
.mobile {display:none;}
body,div,ul {margin:0; padding:0;}
body {background-image:url(xxx.jpg); font-family:1.2rem Garamond,Times, serif;}
.global {margin:0 auto; max-width:1200px; background-color:whitesmoke; border:solid 1px lavander; border-top:none; }
.entete img {display:block; width:100%; height:5%;}
#menu {background:linear-gradient(lightgray, whitesmoke); border-bottom:solid 1px lavander; }
.contenu {letter-spacing: -0.31rem;}
.contenu * {letter-spacing: normal;}
.contenu img {max-width: 100%; height:auto;}
article, aside {box-sizing:border-box; display: inline-block; vertical-align:top; padding:20px;}
article {width:70%;}
aside   {width:28%; padding-top:20px; text-align:center;}
.pied {padding:10px; background:linear-gradient(whitesmoke, lightgray); border-top:solid 1px lightgray;}
  /*-----------------------            menu 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:1rem;  
                font-weight:bold; text-decoration:none; color:brown; text-shadow:white 2px 0 0;} 

#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.5rem; color:#d06b19;}
h1 {font-family: Arial, sans-serif; font-size:1.2rem; color:brown;}
img {vertical-align:top; margin:5px;}

.droite {float:right; margin-left:10px;}
.gauche {float:left; margin-right:10px;}
  /*-----------------------            reponse adaptative     -------------------- */
@media only screen and (min-width:640px) and (max-width:799px) {
body {background-image:none;}  
#menu li a, #menu li a:visited {padding:10px 0; font-size:0.9rem;}
article {width:60%;}
aside {width:40%;}   }

@media only screen and (max-width:639px)  {
body {background-image:none;}  
.mobile {display:block;}   
#menu, #menu.masquer  {display:block; height:0;}
#menu.afficher { height:427px;}
#menu {transition:height 1s; overflow:hidden; border-bottom:none; background:none;}
#menu li {line-height:30px; background:linear-gradient(lightgray, whitesmoke); border-bottom:solid 1px lavander;  }
#menu li a, #menu li a:visited {text-align:left; padding-left:10%;}
#menutitre {display:block; line-height:3rem; background:linear-gradient(silver, gray); text-align: center;
                   font:bold 1.1rem/2.5rem Arial, sans serif; color:white; text-decoration:none; }
article, aside {width:100%; padding-top:0;}
   }