/*-----------------------            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 {font-family:1.2rem Garamond,Times, serif;}
.contenu * {letter-spacing: normal;}
.contenu img {max-width: 100%; height:auto;}
article {box-sizing:border-box; display: inline-block; vertical-align:top; padding:20px;}
article {width:100%;}
.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 {float:right; margin:5px;}   */
/*    -------------------  image -------------------------------------*/
 .border {  font-family:'Times New Roman';     font-style :italic;     font-size  :170%;
        text-align :center;    padding:60px;  width :500px;  
        background :url('../imaggin/b1.gif') top    left  no-repeat,
                     url('../imaggin/b2.gif') top    right no-repeat,
                     url('../imaggin/b3.gif') bottom left  no-repeat,
                     url('../imaggin/b4.gif') bottom right no-repeat,
                     url('../imaggin/ba.gif') top          repeat-x,
                     url('../imaggin/bb.gif') left         repeat-y,
                     url('../imaggin/bc.gif') right        repeat-y,
                     url('../imaggin/bd.gif') bottom       repeat-x      }
/*    -------------------fin  image -------------------------------------*/
    

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

table {background:url(img/marbre.gif); width:100%; }
td {vertical-align:middle; }

  /*-----------------------            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:100%;}
 .border {  font-family:'Times New Roman';     font-style :italic;     font-size  :100%;
        text-align :center;    padding:6px;  width :400px;  
        background :url('../imaggin/b1.gif') top    left  no-repeat,
                    url('../imaggin/b2.gif') top    right no-repeat,
                    url('../imaggin/b3.gif') bottom left  no-repeat,
                    url('../imaggin/b4.gif') bottom right no-repeat,
                    url('../imaggin/ba.gif') top          repeat-x,
                    url('../imaggin/bb.gif') left         repeat-y,
                    url('../imaggin/bc.gif') right        repeat-y,
                    url('../imaggin/bd.gif') bottom       repeat-x      }  }



@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;}
  .border {  font-family:'Times New Roman';     font-style :italic;     font-size  :100%;
        text-align :center;    padding:6px;  width :300px; 
        background :url('../imaggin/b1.gif') top    left  no-repeat,
                    url('../imaggin/b2.gif') top    right no-repeat,
                    url('../imaggin/b3.gif') bottom left  no-repeat,
                    url('../imaggin/b4.gif') bottom right no-repeat,
                    url('../maggin/ba.gif') top          repeat-x,
                    url('../imaggin/bb.gif') left         repeat-y,
                    url('../imaggin/bc.gif') right        repeat-y,
                    url('../imaggin/bd.gif') bottom       repeat-x      }  
.gege {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;} }