body, html {height:100%; margin: 0px; padding: 0px;
   /* background-image: linear-gradient(to right, #cccc00 0%, #ffcc66 100%); */
  /* background: linear-gradient(to right, #d580ff 0%, #ff9933 100%); } */ 

background-image : url("fond-mus.jpg"); background-size: cover; }

/* body > gainsbourg {background-image : url("note.png"); background-size: cover; } */

backToTop { /* ne fonctionne pas */
    position: fixed;
    top: 20px;    right: 20px;
    z-index: 10;     height: 32px;    width: 36px;
    background-color: #ccc;
    border-radius: 4px;
    transition: background-color .2s ease-in,opacity .2s linear;
    opacity: 0;    text-align: left;
}

/* sert a placer le footer en bas mais HR ne fonctionne plus */
body {  display: flex;  flex-direction: column; } 

/* __________________________________ menu ________________________ */
#haut {  position: sticky;  top: 0px; }

nav > div > a:hover { color: solid white; text-decoration: none;	}
nav > div > a:active, a:focus { color: white; text-decoration: none;}
nav > div > a:link 	{ color: white ; text-decoration: none; } 
nav > div > a:visited { color: white; text-decoration: none; }

nav { width: 100%; background-color: #cc9900;} /* fond bandeau b31aff #D2691E */ 
nav > ul { margin: 0px; padding: 0px; solid #fff;}
nav > ul::after {content:"";display: block; clear: both;}
nav > ul > li { float: left; position: relative; }
/* taille menu */
nav > ul > li a {padding: 10px 30px; color: #FFF; } /* couleur menu FFF - 30px espace entre les menus  */
 /*  barre sur le menu 7+3=10 pixels couleur (228,77,38,0.15) */
nav > ul > li:hover a {padding:7px 30px 10px 30px;} /* 30px espace entre les menus - 10px debut sous menus */
.menu:hover   {border-top:3px solid yellow ;  background-color: RBGa(0,255,0,0.15); } /* petite barre  - 255,255,0,0.15 */ 

nav li { list-style-type: none; }
.submenu {display: none } /* cacher les sous menu */
nav  a{ display: inline-block; text-decoration:none;}
nav li:hover .submenu{display: inline-block; position: absolute;
                    top: 100%; left: 0px; padding: 0px; z-index: 1000;}
/* menu */
.menu a {color:#ddd;font-weight:bold;}
.menu a:hover {color:#FFF;font-weight:bold;}                  
/* sous menus */
.submenu li { border-bottom: 1px solid #CCC; } /* lignes de separation solid #CCC */
/* texte  hauteur 15px largeur 300 px  couleur #ddd sous menu */
.submenu li a{ padding:50px 50px;font-size:15px;width: 300px;color:#ddd;font-weight:bold;} /* largeur sous menu - couleur :#220000; */
/* fond sous menu */
.submenu { background-color: #cc9900;}  /* fond sous-menu  #b36b00*/
.submenu li:hover a{color:#fff;font-weight:bold;} 

/* ------------------------------------------------------------- heure à droite --- */
nav > div {position: absolute; top: 10px;  right: 10px ; text-align: right;  color: white; font-weight: bold;} 

/* ------------------ centrage -------------------------------------- */
/*
.element {
  margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
/*
  transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
}
/* ------------------ footer -------------------------------------- */

#bas {   position: sticky;  bottom:0; top: bottom; }  

#footer { margin-top: auto;
  font-size: small; text-align: center; vertical-align: center; font-weight: small;
  background: #808080 ;  color: #fff;  /* #2599C2; #cc9900 ; */
  padding: 8px 0px; width: 100%;}

#footer a { font-size: small; vertical-align: text-top; color: #fff;}