:root{
	--fond : #99ff66 0%, #ffcc66 80%, #99ff66 100%;  		/* var(--fond)		background-color : #B8860B; */
	--menu : #ddd;
	 --sousmenu : #70510A ; 				/* var(--menu) #B8860B  var(--sousmenu); */
	--fondsousmenu : #ADFF2F; 
	--espace: 40px;							 /*espace entre les menus  var(--espace) */
	--fond_footer: #333; 						/* var(--footer)  */
	}

body, html {
height : 100%; margin : 0; padding : 0; color : #000;
background-image: linear-gradient(to right, var(--fond) );
}
backToTop {
position : fixed;
top : 20px; right : 20px; z-index : 10; height : 32px; width : 36px;
background-color : #ccc; border-radius : 4px; transition : background-color 0.2s ease-in, opacity 0.2s linear;
opacity : 0; text-align : left;
}
body { display : flex; flex-direction : column; }

/* 						liens 					*/
a {
color : blue;
text-decoration : none; 
}

a[href*="http"] {
color : blue;
text-decoration : none; 
background-size : 10px 10px;
/* padding-right : 18px; */
}

#haut { position : sticky; top : 0; }

/* 					navigation 					*/
nav > div > a:hover 		{ color : green; text-decoration : none; }
nav > div > a:active, a:focus	{ color : green; text-decoration : none; }
nav > div > a:link		{ color : white; text-decoration : none; }
nav > div > a:visited		{ color : grey ; text-decoration : none; }
/*nav > div { position : absolute; top : 10px; right : 10px; text-align : right; color : white; font-weight : bold; } */
nav { width : 100%; background-color : var(--sousmenu); } /* #B8860B ; */

nav > ul { margin : 0; padding : 0; }
nav > ul::after { content : ""; display : block; clear : both; }
nav > ul > li { float : left; position : relative; }
nav > ul > li a { padding : 10px var(--espace); color : #FFF; }
nav > ul > li:hover a { padding : 7px var(--espace) 10px var(--espace);}
.menu:hover { border-top : 3px solid yellow; }	/* barre haut */

nav li { list-style-type : none; }

nav a { display : inline-block; text-decoration : none; }
nav li:hover .submenu { display : inline-block; position : absolute;
top : 100%; left : 0; padding : 0; z-index : 1000; }

.menu a {  color : #ddd ; font-weight : bold; }	/* color : #ddd;  color : var(--menu);  affiche noir */
.menu a:hover { color : #FFF; font-weight : bold; }

.submenu { display : none; }
.submenu li { border-bottom : 1px solid #CCC; }
.submenu li a { padding : 50px 50px;
font-size : 15px; width : 200px;
color : #ddd; font-weight : bold;
}
.submenu { background-color : var(--sousmenu);  } /*  #B8860B;  */
.submenu li:hover a { color : #fff; font-weight : bold; }


#bas { position : sticky; bottom : 0;
}
/* 					footer			*/

#footer {
margin-top : auto;
font-size : small;
text-align : center;
vertical-align : center;
background: var(--fond_footer) ; 
color : #777;
padding : 8px 0; 
width : 100%;
}
#footer a {
/*font-size : small; */
/*vertical-align : text-top;*/
color : #ccc;
}
#footer a[href*="http"] {
color : #0ff;
text-decoration : none;
}