/* HTML :   = 1 espace,   = 2 espaces,   = 4 espaces */



/*-----------------
  bandeau du bas
-----------------*/
/* Fond bandeau du bas */
.bandeau_bas {
  z-index: 1000;
	width: 100%;
  position:static;
	/* linear-gradient : A gradient going from the bottom right to the top left corner, starting blue and finishing red */
	background-image:linear-gradient(to left top, #FADDCA, #CFE5C1);
}

/* bandeau du bas : Style lien mail */
.bandeau_bas tr td a:link {color:#0062BA;}
.bandeau_bas tr td a:visited {color:#0062BA;}
.bandeau_bas tr td a:hover {color:#C02E00;}


/*------------------
  bandeau du haut
------------------*/
/* Fond bandeau du haut */
.bandeau_haut {
  z-index: 1000;
	width: 100%;
  position:fixed;
	/* linear-gradient : A gradient going from the bottom right to the top left corner, starting blue and finishing red */
	background-image:linear-gradient(to left top, #FADDCA, #E1EFD9);
}

/* bandeau du haut : LOGO reseau sociaux */
.logo_reseaux_sociaux {
	vertical-align:bottom;
	padding-bottom: 5px;
}

/* bandeau du haut : Style titre haut */
.style_titre {
	color:#0062BA; 
	vertical-align:middle;
	text-align:center; 
	line-height:24px; 
	font-family: Arial, Verdana, sans-serif;
	font-weight: bold; 
}

/* Pour le cadre menu principal */
.menu_haut {
  display: flex;
	justify-content: center;  /* centrage horizontal menu ppal */
	align-items: center;  /* centrage vertical menu ppal */
}

/* masquer les sous-menus */ 
.menu_haut ul {
  display: none;
}

/* Suppression des puces et des marges des listes */
.menu_haut,
.menu_haut ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

/* Affinage de la position des sous-menus */
.menu_haut li {
  position: relative;    /* permet de positionner les sous-menu "li" */
}

/* Mise en forme du menu principal */
.menu_haut > li > a {
  display: block;  /* liens transformés en blocs pour pouvoir les dimensionner */
	text-decoration: none;  /* Suppression du soulignement */
  width: auto;  /* largeur des liens (nécessite display: block;) */
  padding: 5px 0px 5px 0px;  /* marges autour des libellés */
  text-align: center;  /* centrage horizontal du texte des menus */
	margin: 0px 10px 0px 10px;  /* marges externes à la bordure */
	font-weight: bold;  /* gras */
	font-family: Arial,Verdana, sans-serif;  /* polices */
	font-size:14px;  /* taille police menus ppal */
}

/* Mise en forme séparé de chaque menu principal : bande + couleur */
.menu_haut > li:first-child > a {  /* menu association */
	color:#666666; 
	border-top: 1px solid #666666; 
	border-bottom: 2px solid #666666;
}
.menu_haut > li:nth-child(2) > a {  /* menu Transition Écologique */
	color:#678604; 
	border-top: 1px solid #678604; 
	border-bottom: 2px solid #678604;
}
.menu_haut > li:nth-child(3) > a {  /* menu Transition Énergétique */
	color:#C02E00; 
	border-top: 1px solid #C02E00; 
	border-bottom: 2px solid #C02E00;
}
.menu_haut > li:last-child > a {  /* menu Ressources */
	color:#175ba4; 
	border-top: 1px solid #175ba4; 
	border-bottom: 2px solid #175ba4;
}

/* Mise en forme commune des sous menus */
.menu_haut li ul li a {
  display: block;  /* liens transformés en blocs pour pouvoir les dimensionner */
  text-decoration: none;  /* Suppression du soulignement */
  padding: 10px 5px 5px 5px;  /* marges autour des libellés */
  text-align: left;  /* centrage horizontal du texte des menus */
	margin: 0px 0px 0px 0px;  /* marges externes à la bordure */
	color: #333333;  /* couleur texte sous menus */
	font-weight: bold;  /* gras */
	font-family: Arial,Verdana, sans-serif;  /* polices */
	font-size:13px;  /* taille police menus ppal */
}

/* Couleur de fond différente pour chaque menu ppal lors du survol sur les menus et sous menus */
/* menu association */
.menu_haut li:first-child:hover,
.menu_haut li:first-child li:hover { background-color: #666666; }
/* menu Transition Écologique */
.menu_haut li:nth-child(2):hover,
.menu_haut li:nth-child(2) li:hover { background-color: #678604; }
/* menu Transition Énergétique */
.menu_haut li:nth-child(3):hover,
.menu_haut li:nth-child(3) li:hover { background-color: #C02E00; }
/* menu Ressources */
.menu_haut li:last-child:hover,
.menu_haut li:last-child li:hover { background-color:#175ba4; color: #ffffff;}

/* bordure commune aux menus ppaux lors du survol sur les menus et sous menus */
.menu_haut li:hover,
.menu_haut li li:hover { border-radius:4px 4px 0px 0px; }
	
/* couleur texte commune des menus ppaux lors du survol sur les menus et sous menus */
.menu_haut > li:hover > a { 
	color: #ffffff;
	padding: 5px 5px 5px 5px;
	transition: all 0.5s ease-out;  /* transition entre vers affichage survol menu (nom | durée | fonction | retard) */
}

/* Affichage cadre autour de la fenetre des sous menus lors du survol sur les menus et sous menus*/
.menu_haut > li:hover > ul {
	border: 1px solid #cccccc;
	display: block;
  position: absolute;
  top: 30px;  /* déclage du bloc sous-menus vers le bas */
  left: 0px;  /* déclage du bloc sous-menus vers la droite */
  z-index: 100;  /* superposition des sous-menus : les sous-menus soient bien au dessus du reste de la page */
}

/* Couleur du fond de chaque sous menus lors du survol sur les menus et sous menus */
/* menu association */
.menu_haut > li:first-child > ul a { background-color: #F3F3F3; }
/* menu Transition Écologique */
.menu_haut > li:nth-child(2) > ul a { background-color: #EAF4E4; }
/* menu Transition Énergétique */
.menu_haut > li:nth-child(3) > ul a { background-color: #FDF1E9; }
/* menu Ressources */
.menu_haut > li:last-child > ul a { background-color: #F0F7FE; }

/* Mise en forme texte des sous menus lors du survol des sous menus */
.menu_haut > li ul li:hover a {
	background-color: #0081E2;
	color:#ffffff;
}

/* Couleur du fond de chaque sous menus lors du survol des sous menus */
/* menu association */
.menu_haut > li:first-child > ul li a:hover { background-color: #666666; }
/* menu Transition Écologique */
.menu_haut > li:nth-child(2) > ul li a:hover { background-color: #678604; }
/* menu Transition Énergétique */
.menu_haut > li:nth-child(3) > ul li a:hover { background-color: #C02E00; }
/* menu Ressources */
.menu_haut > li:last-child > ul li a:hover { background-color: #175ba4; }