body
{
	margin: 10px 0 ;	/* Une petite marge pour ne pas coller le haut et le bas de la page au navigateur */
	padding: 0 ;		/* Pas de padding (marge intérieure) */
	
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;	/* Choix des polices de la page */
	/*font : 0.8em Arial;*/
	
	/* Choix d'une couleur de fond, autour de la page  (qui sera dans div#conteneur) */
	background: #F5F5F5;  /*#FEFDD8; /*#FFFDBF;/*#D8E8EE; /*#F5F5F5;  /*#D8E8EE;   /*#003079 ;*/
	
	/*background-image :url(img/fond2.gif);
	background-repeat: repeat-x;
	background-color: #FFFA97; /*#FFFCC4;  avec fond3.gif*/
}



/************************************/
/*      "conteneur" contient toute la page    */
/************************************/

	
	div#conteneur
	{
		width: 782px ;       /* Largeur de la page, qui sera la même pour le menu */
		margin: 0 auto ;     /* Marge automatique sur les côtés pour centrer la page */
		text-align: left ;   /* On aligne le texte à gauche par défaut */
		/*border: 1px solid  #003079 ;  /*#999999;  /* #fff; /* Bordure bleue autour de la page */
		background: #fff ;   /* Couleur de fond blanche derrière le texte */
	}

	div#conteneur2
	{
		width: 780px ;       /* Largeur de la page, qui sera la même pour le menu */
		margin: 0 auto ;     /* Marge automatique sur les côtés pour centrer la page */
		text-align: left ;   /* On aligne le texte à gauche par défaut */
		border: 1px solid  #003079 ;  /*#999999;  /* #fff; /* Bordure bleue autour de la page */
		border-bottom:none;
		padding-bottom:1px;  /* Pour palier au comportement "bizarre" de Firefox et Opéra qui ne veulent pas prolonger les bordures latérales jusqu'en bas  quand on supprire la bordure du bas*/
		background: #fff ;   /* Couleur de fond blanche derrière le texte */
	}

/********************************************/
/*      "header" correspond à la bannière de titre       */
/********************************************/
	
	div#header
	{
		height: 120px ;
		margin: 0 ;
		/*background: url(bandeau_metha14.gif) no-repeat left top ;*/
	}

/*******************************/
/*      Menu principal de la page        */
/*******************************/
	
	div#menu
	{
		height:35px ;
		width:780px;   /* On est obligé de fixer la largeur à la taille du "conteneur2" pour que le menu occupe toute la largeur de la page. */
					   /* C'est le cas parce qu'on positionne le menu en "absolute", pour appliquer un z-index. */
					   /* Cette largeur est facultative pour un positionnement "static" ou "relative", qui hériterait de la largeur du conteneur. */
					   
		background: url(img/fond_menu.jpg) repeat-x 0 -25px ;  /* On positionne le fond du menu (créé avec 60 px de haut) avec 25px de décalage,
															pour afficher une couleur de fond avec l'ombre sous le menu, mais pas la deuxième 
															couleur qui n'apparaitra qu'au survol du menu  */
		position :absolute;   /* On positionne le menu en "asbsolute" pour appliquer un z-index */
		z-index : 100;        /* On déclare le menu comme "au dessus"  du reste de la page, le menu déroulé recouvrira le contenu de la page */
	}
	
	/* "dl" = liste contenant 1 onglet principal (dt) et ses sous-menus (li à l'intérieur de dd). */
	div#menu dl
	{
		width : 130px;   /* Largeur de chaque onglet principal du menu */
		margin: 0 ;
		padding: 0 ;
		list-style-type: none ; /* On retire les puces de liste par défaut */
		float: left ;           /* On fait flotter les éléments à gauche, pour les positionner sur une même ligne, et obtenir un menu horizontal */
		text-align: center ;    /* On centre le texte du menu */
	}
	
	
	/* "dt" = onglet principal du menu (en bleu)  */
	div#menu dt a
	{
		line-height: 25px ;     /* On positionne le texte des onglets principaux au centre de l'onglet */
		font-size: 1.2em ;      /* Police un peu plus grande */
		font-weight: bold ;     /* Texte en gras */
		color: #fff ;           /* Texte en blanc */
		letter-spacing: 1px ;   /* On espace un peu les lettres du titre */
		display: block ;        /* On déclare les liens comme des blocks, qui rempliront l'espace disponible dans le menu */
		text-decoration: none ; /* On retire le soulignement par défaut des liens */
		border-right: 2px solid #c6d7d6 ; /* On place une bordure grise pour séparer chaque onglet */
	}
	

	div#menu dt a.last
	{
		border-right: none;  /* Correctif pour le dernier onglet , on retire la bordure grise à droite*/
	}
	
	div#menu dt a:hover, div#menu dt a:focus
	{
		background: url(img/fond_menu.jpg) repeat-x 0 0 ; /* Au survol, on modifie le fond du lien. La couleur change.  */
													  /* En fait, on a réaffiché l'image de fond du menu (déjà chargée), en affichant le haut (masqué pour le menu) qui est plus clair */
													  /* Comme le lien ne fait que 25px de haut, la bordure de bas du menu dépasse et est conservée */
	}
	
	/* "dd"= ensemble des onglets secondaires (éléments li)  d'un onglet principal du menu. */
	div#menu dd,div#menu dd ul, div#menu dd ul li 
	{
		margin: 0;
		padding: 0;
		list-style-type: none; /* Pas de puces par défaut pour les sous-menus. */
	}
	
	#menu dd 
	{
	width:128px; 
	display: none;          /* On masque les sous-menus, qui seront affichés par une fonction javascript. */
	background:#fcfcfd;/* #EBFAFF; /*#EBFAFF;    /* Fond bleu très clair pour le sous-menu */
	border: 1px solid #999999; /* Cadre gris autour du sous-menu */
	border-top:none;        /* Pas de bordure en haut pour ne pas faire de coupure avec le menu */
	}
	
	/* Correctifs de taille de sous-menus */
		#menu dd#smenu1
		{
		width:210px;
		}

		#menu dd#smenu2
		{
		width:220px;
		}

		#menu dd#smenu3
		{
		width:180px;
		}
		
		#menu dd#smenu5
		{
		width:165px;
		}
		
	#menu li a
	{
	width: auto;         /* 130px - (2 x 1px)  pour ne pas recouvrir les bordures de "dd" */
	color: #000;           /* On écrit en noir le texte */
	text-decoration: none; /* Pas de soulignement par défaut */
	display: block;        /* Le lien prend toute la place disponible dans le cadre */
	text-align : left;    /* Texte du lien aligné à gauche pour les sous-menus */
	text-indent: 15px;    /* place pour la puce */
	/*background: url(img/triangle.gif) no-repeat 3px; /*puce*/
	}
	
	#menu li a:hover
	{
	color: #fff;           /* Texte en blanc quand survolé */
	text-indent: 22px;     /* Décalage pour la puce */
	background: url(img/triangle_clair.gif) no-repeat 8px; /* puce */
	}
	
	/*#menu li a:focus
	{
	color: #000;          
	text-indent: 22px;   
	background: url(img/triangle.gif) no-repeat 8px; 
	}*/
	
	#menu li:hover
	{
	background: url(img/fond_menu.jpg) repeat-x 0 -5px; /* Avec un fond bleu dégradé */
	}
	
	
	
	
/***************************************/
/*     Chemin à la page actuelle sur le site         */
/***************************************/

	div#chemin
	{
		z-index:1;       /* Le contenu (z-index faible)  est sur un calque inférieur au menu (de z-index élevé) et sera donc recouvert par un sous-menu déroulé... */
		margin-top:45px; /* Pour laisser la place au menu qui est positionné en "absolute" */
		
		padding: 0 0 0 30px; /* Positionnement du chemin dans la page */
	}

	div#chemin a
	{
		color: #3266B5 ;
	}
	
	div#chemin a:hover
	{
		color: #3266B5 ;
	}
	
/******************/
/*     Plan du site        */
/******************/

	div#plan
	{
		z-index:1;       /* Le contenu (z-index faible)  est sur un calque inférieur au menu (de z-index élevé) et sera donc recouvert par un sous-menu déroulé... */
		margin-top:40px; /* Pour laisser la place au menu qui est positionné en "absolute" */
		
		padding: 0 30px 0 0 ; /* Positionnement du texte dans la page */
		display:block;
		float:right;
	}

	div#plan a
	{
		color: #3266B5 ;
	}
	
	div#plan a:hover
	{
		color: #3266B5 ;
	}


	
/**********************************/
/*      Contenu  principal de la page         */
/**********************************/

	
	div#contenu
	{
		z-index:1;       /* Le contenu (z-index faible)  est sur un calque inférieur au menu (de z-index élevé) et sera donc recouvert par un sous-menu déroulé... */
		margin-top:50px; /* Pour laisser un espace après le chemin */
		
		padding: 0 25px 0 70px ; /* Positionnement du texte dans la page */
	}
	
	
	
	div#contenu h1
	{
		padding-left: 30px ;   /* On décale le titre à droite pour laisser la place à l'icone de titre */
		line-height: 25px ;
		font-size: 1.2em ; 
		font-weight:bold;
		background: url(img/fleche_bleue.gif) no-repeat left bottom ; /* Icone du titre, alignée à gauche et vers le bas */
		color: #3266B5; /*#FF5400;  */
		border-bottom: 1px solid #3266B5; /*#FF5400;/*
		/*border-top : 1px solid #FF5400;*/
	}
	
	div#contenu h2
	{
		margin-left: 20px ;
		/*border-left: 3px solid #3266B5 ;
		padding-left: 5px ;*/
		background: url(img/puce_titre2.gif) no-repeat left bottom;
		padding-left:20px;
		line-height: 25px ;
		font-size: 1.2em ;
		font-weight:bold;
		border-bottom: 1px solid #3266B5 ;
		color: #3266B5 ;
	}
	
	
	div#contenu p
	{
		text-align: justify ;  /* On justifie le texte des paragraphes */
		text-indent: 2em ;     /* On met un alinéa devant chaque début de paragraphe */
		line-height: 1.7em ;   /* On aère un peu le texte en espacant les lignes */
	}
	
	div#contenu li
	{
		text-align: justify ;  /* On justifie le texte des paragraphes */
		line-height: 1.7em ;   /* On aère un peu le texte en espacant les lignes */
	}
	
	div#contenu p.last
	{
		margin-bottom:40px;
	}
	
	div#contenu a
	{
		color: #3266B5 ;
	}
	
	div#contenu a:hover
	{
		color: #3266B5 ;
	}
	
	
	/***********************************/
	/*       Mise en page des coordonnées        */
	/***********************************/

	div#contenu p.nom
	{
	}

	div#contenu p.courrier
	{
		margin-left:50px;
		padding-left:15px;
		background: url(img/courrier.png) no-repeat left bottom;
	}
	
	div#contenu p.mail
	{
		margin-left:50px;
		padding-left:15px;
		background: url(img/mail.png) no-repeat left bottom;
	}
	
	div#contenu p.tel
	{
		margin-left:50px;
		padding-left:15px;
		background: url(img/telephone.png) no-repeat left bottom;
	}
	/******************************************/
	/*       Mise en page images, listes et tableaux       */
	/******************************************/
	
	div#contenu img
	{
		border:none;           /* Pas de bordure bleue horrible autour des images */
	}
	
	div#contenu img.illustration   /* On centre les illustrations */
	{
		display:block;
		margin:30px auto;
	}
	
	div#contenu img.illustration2   /* Illustration déplacée vers la droite */
	{
		display:block;
		float:right;
		margin-right:140px;
	}
	
	div#contenu h2.decale   /* On descend le titre pour laisser la place à l'illustration */
	{
		margin-top:140px;
	}
	
	div#contenu table.illustration   /* On centre les tableaux d'illustration */
	{
		display:block;
		margin-left:200px;
		margin-bottom:30px;
		border:none;
		border-collapse:collapse; /* On condense les bordures des éléments td, th entre elles */
	}
	
	div#contenu table.illustration th, div#contenu table.illustration td /* Mise en page du contenu du tableau et création des bordures bleues */
	{
		border:1px solid #3266B5;
		padding:3px;
		text-align: center;
	}

	div#contenu table.illustration th 
	{
		color:#3266B5;
		font-weight:bold;
	}
	
	div#contenu ul
	{
		list-style:url(img/puce1.gif);  /* Modification de la puce par défaut des listes */
	}
	
	div#contenu li
	{
		margin-bottom:5px;  /* On "décolle" un peu les éléments d'une liste */
	}

	/************************************/
	/*      Cadres de liens ou de sommaire         */
	/************************************/

	
	h3.cadre /* Titre d'un cadre de liens */
	{
		display:block;
		text-decoration:none;
		font-variant:normal;
		font-size:1.3em;
		margin:0px;
		text-indent:20px;
		padding:3px;
		font-family:Arial, 'Times New Roman', Times, serif;
		color: #2C485C;
		background: url(img/haut_cadre.gif) left no-repeat;
		padding-left: 120px;
		font-size: 110%;
		border-left: 0px;
	}
	.bloc_cadre
	{
		border-bottom: 1px solid #b5c4d3;
		/*background: #b1c1d0;*/
		background-color:#fff;
		margin-bottom:45px;
		margin-left:auto;
		margin-right:auto;
		width:514px;
	}
	.contenu_cadre
	{
		padding:20px;
		margin:none;
		background: #fff;
		border-left: 1px solid rgb(181,196,211);
		border-right: 1px solid rgb(181,196,211);
		border-top: 1px solid rgb(181,196,211);
	}

	.contenu_cadre ul
	{
		list-style-type: none; /* Pas de puces par défaut pour les listes*/
	}
	
	.contenu_cadre ol
	{
		list-style-type: lower-roman;
	}
	
	.contenu_cadre ol.principal
	{
		list-style-type: upper-roman;
	}

	/***************************/
	/*      Liens de bas de page         */
	/***************************/
	
	div#liens_bdp
	{
		margin-left:200px;
	}
	
	/*******************************/
	/*      Mise en page du glossaire        */
	/*******************************/

	dl#glossaire
	{
		margin-top:40px;
	}
	dl#glossaire dt
	{
		font-size: 1em ; 
		font-weight:bold;
		color: #3266B5;
	}
	
	dl#glossaire dd
	{
		text-align:justify;
		margin-top:5px;
		margin-bottom:10px;
		padding:5px;
		border:5px #3266B5;
	}

/*******************/
/*     Bas de page         */
/*******************/
	div#footer
	{
		height:50px;
		background: url(img/bandeau_bas.gif) no-repeat;
	}
	
	div#contenu_footer
	{
		padding-top: 18px;
		padding-left: 360px;
	}
	
	div#footer img
	{
		border:none;
	}

	
	div#footer span.copyright  
	{
		display:none;
		color:#3266B5 ;
		margin-left: 200px ;
	}