:root {
    --main-bg : #ffffffff;
    --main-fg : #000000;
    --head-bg : #2f6690ff;
    --head-fg : #ffffff;
    --menu-bg : #16425bff;
    --menu-fg : #ffffff;
    --bottom-bg : #3a7ca5ff;
    --bottom-fg : #ffffff;
    --menu-hover : #f0f0f0;
    --link-fg : #2f6690ff;
    --link-hover : #3a7ca5ff; 
    --border-bg : #d9dcd6ff ;
}


/*********************/
/* Autour de la page */
/*********************/


#theme {
 background: var(--border-bg);
 padding-top:1em;
}

/*********************/
/* Style de l'entete */
/*********************/

#entete {
 background: var(--head-bg);
 color: var(--head-fg);
 margin: auto;
 padding-top:0.5em;
 padding-bottom:0.5em;
 padding-left:2em;
 padding-right:1em;
 position: relative;
 width: 80%;
 font: bold 1.6em
}


h1.title{
 text-align: left;
 font-weight: bold;
}

/***********************/             
/* Barre de navigation */
/***********************/

#nav { 
 background-color: var(--menu-bg);
 color: var(--menu-fg);
 margin: auto;
 position: relative;
 padding-left:2em ;
 padding-right: 1em;
 width: 80%;
}

#nav ul {
 list-style-type: none;
 margin: 0;
 padding: 0.5em 1em 0.5em 0;
}


#nav li { 
 display: inline;
 /* font: bold 1.2em sans-serif; */
 padding: 0 1em 0 0;
}

#nav a:link { 
 color: var(--menu-fg); 
}

#nav a:visited { 
 color: var(--menu-fg); 
}

#nav a:hover { 
 color: var(--menu-hover); 
}

/*****************************/
/* Partie principale         */
/*****************************/

#texte {
 background: var(--main-bg);
 color: var(--main-fg);
 margin: auto;
 padding-top:1em;
 padding-bottom:1.5em;
 padding-left:2em;
 padding-right:1em;
 position: relative;
 width: 80%
}


/***********************/             
/* Barre du bas */
/***********************/

#bottom { 
 background-color: var(--bottom-bg);
 color: var(--bottom-fg);
 margin: auto;
 position: relative;
 padding-top:0.5em ;
 padding-bottom:0.5em ;
 padding-left:2em ;
 padding-right: 1em;
 width: 80%;
}


/*******************************/
/* Divers                      */
/*******************************/

a:link{
 text-decoration: none;
 color: var(--link-fg)
}

a:visited{
 text-decoration: none;
 color: var(--link-fg)
}

a:hover{
 text-decoration: none;
 color: var(--link-hover)
}


body{
 font-family: sans-serif
}