:root {
/*     Orange
  --CouleurTitreBord : #9F391A;
  --CouleurTitre     : #FF8000;      
  --CouleurFondClair     : #FFDAA0;
*/
  
/*   Jaune 
  --CouleurTitreBord     : #fff83d;
  --CouleurTitre         : #fffcb5;
  --CouleurFondClair     : #D0F0FF;*/
  
/*   Noir */
  /*--CouleurTitreBord     : #b9b9b9;#e3a599;#eabeb6*/
  --CouleurTitreBord      : #f9c19f;
  --CouleurPageActive     : #BEBAB9;
  /*--CouleurTitre         : #e7e7e7;*/
  /*--CouleurTitre         : #c1a688;*/
  --CouleurTitre          : #d7d7d7;
  --CouleurFondClair      : #D0F0FF;

/*   Vert 
  --CouleurTitreBord     : #59ff5e;
  --CouleurTitre         : #d9ffda;
  --CouleurFondClair     : #D0F0FF;*/
  
/*   Bleu
  --CouleurTitreBord     : #4080FF;
  --CouleurTitre         : #6CD3FF;
  --CouleurFondClair     : #D0F0FF;*/
  
/*   Bleu 2 
  --CouleurTitreBord     : #4080FF;
  --CouleurTitre         : #defffd;
  --CouleurFondClair     : #D0F0FF;*/
  
  
  
  --CouleurMenuActif     : #FF0000;
  --CouleurMenuActifBord : #800000;
}

/* -------------------------------------------------------------------------------------- */

/*                            CSS Pour menus déroulants                                   */

/* -------------------------------------------------------------------------------------- */


#menu-deroul, #menu-deroul ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
white-space: nowrap;
}
#menu-deroul li{
display:inline-block;
position:relative;
border-radius: 8px 8px 8px 8px;
margin-top: 0px;
margin-bottom : 2px;
}
#menu-deroul ul li{
display:inherit;
border-radius:0;
}
#menu-deroul ul li:hover{
border-radius:0;
}

#menu-deroul ul li:first-child{
border-radius:8px 8px 0 0;          /* arrondi les coins des sous menus */
margin-bottom : 0px;
}
#menu-deroul ul li:nth-child(1n){
margin-bottom : 0px;
}
#menu-deroul ul li:last-child{
border-radius : 0 0 8px 8px;          /* arrondi les coins des sous menus */
margin-bottom : 0px;
}
#menu-deroul ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
border :0px;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}

#menu-deroul li:hover ul{
max-height:25em;
}

/*******************************/
/* background des liens menus  */
/*******************************/

#menu-deroul li:nth-child(1n){
	background-color: #000;
	/*background-image:-webkit-linear-gradient(top, var(--CouleurTitreBord) 0%, var(--CouleurTitre) 30%, var(--CouleurTitre) 70%, var(--CouleurTitreBord) 100%);*/
	background: var(--CouleurTitreBord);
	width  : 170px;
}


/***********************************/
/* background des liens sous menus */
/***********************************/


#menu-deroul li li:nth-child(1n){
	background: var(--CouleurTitreBord);
	border-style: solid;
	border-width: 1px;
	width : 168px;
	/*background-image:-webkit-linear-gradient(top, var(--CouleurTitreBord) 0%, var(--CouleurTitre) 30%, var(--CouleurTitre) 70%, var(--CouleurTitreBord) 100%);*/
}

/******************************************************/
/* background des liens menus et sous menus au survol */
/******************************************************/

#menu-deroul li:nth-child(1n):hover, #menu-deroul li:nth-child(2) li:hover{
	background-image:-webkit-linear-gradient(top, var(--CouleurMenuActifBord) 0%, var(--CouleurMenuActif) 30%, var(--CouleurMenuActif) 70%, var(--CouleurMenuActifBord) 100%);
}

/*******************************/
/*        les a href           */
/*******************************/
#menu-deroul a{
	text-decoration:none;
	display:block;
	padding:6px 0px;
	color:#000;
	font-family:arial;
	font-size: 14px;
}

#menu-deroul ul a{
	padding:6px 0;    /* Hauteur des sous menus */
}
#menu-deroul li:hover li a{
	color:#000;
	text-transform:inherit;
}
#menu-deroul li:hover a, #menu-deroul li li:hover a{
	color:#000;
}

.MenuSelect {
	background-image:-webkit-linear-gradient(top, var(--CouleurMenuActifBord) 0%, var(--CouleurMenuActif) 30%, var(--CouleurMenuActif) 70%, var(--CouleurMenuActifBord) 100%);
	border-radius: 8px 8px 8px 8px;
}

.SousMenuSelect {
	background-image:-webkit-linear-gradient(top, var(--CouleurMenuActifBord) 0%, var(--CouleurMenuActif) 30%, var(--CouleurMenuActif) 70%, var(--CouleurMenuActifBord) 100%);
	border-radius: 0 0 0 0;
}


/* -------------------------------------------------------------------------------------- */

/*                            CSS pour la page de titre                                   */

/* -------------------------------------------------------------------------------------- */

.Barre {
	padding : 0;
	background: black;	
	height:5px;
	width:100%;
}

#Accueil-Titre {
	border-collapse  : collapse;
	padding          : 0;
	border-spacing   : 0;

	font-size        : 26px;
	font-weight      : bold;
	
	text-align       : center;
	vertical-align   : middle;
	height           : 140px;
	width            : 100%;

	background-image : -webkit-linear-gradient(top, var(--CouleurTitreBord) 0%, var(--CouleurTitre) 20%, var(--CouleurTitre) 80%, var(--CouleurTitreBord) 100%);
	color            : var{--CouleurMenuFondActif};
}

#Accueil-Menu {
	padding:0;
	background:black;
	text-align:left;
	width:100%;
}

#Accueil-PageActive-Avant {
	background-image:-webkit-linear-gradient(top, var(--CouleurTitreBord) 0%, var(--CouleurPageActive) 100%);
	height:30px;
}

#Accueil-PageActive-Apres {
	background-image:-webkit-linear-gradient(top, var(--CouleurPageActive) 0%, var(--CouleurTitreBord) 100%);
	height:30px;
}

#Accueil-PageActive {
	background: var(--CouleurPageActive);
	/*background : url("../_Images/fond.jpg");*/
	text-align:center;
	vertical-align: top;
	width:100%;
}

#Accueil-Bas {
	background: var(--CouleurTitre);
	text-align:left;
	vertical-align: middle;
	width:100%;
	height:20px;
	font-size:11px;
}

#Accueil-Bas-Avant {
	background-image:-webkit-linear-gradient(top, var(--CouleurTitreBord) 20%, var(--CouleurTitre) 100%);
	height:10px;
}

#Accueil-Bas-Apres {
	background-image:-webkit-linear-gradient(top, var(--CouleurTitre) 0%, var(--CouleurTitreBord) 20%);
	height:5px;
}


/* -------------------------------------------------------------------------------------- */

/*                                   Tableau                                              */

/* -------------------------------------------------------------------------------------- */

.TabTable {
	padding        : 0px;
	border-spacing : 0px;
	text-align     : center;
	margin-left    : auto;
	margin-right   : auto;
	border         : 1px solid #000;
}

.TabCell {
	background     : #fce8dc;
	text-align     : center;
	vertical-align : middle;
	border         : 1px solid #000;
}

.TabTitre {
	background     : var(--CouleurTitreBord);	
	text-align     : center;
	vertical-align : middle;
	border         : 1px solid #000;
}

.TabSelect {
	background     : var(--CouleurMenuActif);	
	text-align     : center;
	vertical-align : middle;
	border         : 1px solid #000;
}

.TabCellClicable {
	background     : #fce8dc;	
	text-align     : center;
	vertical-align : middle;
	border         : 1px solid #000;
}

.TabCellClicable:hover {
	background     : var(--CouleurMenuActif);	
}

.TabTitreClicable {
	background     : var(--CouleurTitreBord);
	text-align     : center;
	vertical-align : middle;
	border         : 1px solid #000;
}

.TabTitreClicable:hover {
	background     : var(--CouleurMenuActif);	
}

/* -------------------------------------------------------------------------------------- */

/*                                   Lien                                              */

/* -------------------------------------------------------------------------------------- */

a:active {
	text-decoration: none; 
	COLOR: #000000; 
}

a:link {
	text-decoration: none;
	COLOR: #000000;
}

a:visited {
	text-decoration: none; 
	COLOR: #000000; 
}

a:hover { 
	text-decoration: underline; 
	COLOR: #000000; 
}



/* -------------------------------------------------------------------------------------- */

/*                                     Autre                                              */

/* -------------------------------------------------------------------------------------- */


.Input {
	width  : 100px;
	background: var(--CouleurFondClair);	
}

