/* L'équivalence px -> em est établie en suivant ce tableau :
	 2px	0.15em
	 5px	0.38em
	 8px	0.62em
	 9px	0.69em	xx-small
	10px	0.83em	x-small
	11px	0.90em
	12px	0.92
	13px	1.0em	small
	14px	1.16em
	16px	1.2em
	25px	1.6em
	(basé sur l'équivalence 13px == 1em == small, puisque ALA utilise "small" comme taille de caractère pour ses paragraphes) et en modofiant légèrement les résultats (eg: passer les tailles de caractère de 0.85em à 0.90em et celles de 0.77em à 0.83em) */

/* ------------------- EXPLICATION -------------->
	réduit les images à la taille de l'écran ; certains téléphones ne peuvent pas défiler horizontalement
	height: auto est ajouté pour que le redimmensionnement soit proportionnel avec Firefox.
*/
img	{
	max-width: 100%;
	height: auto;
}

/*  ------------------------------------------
/*  Corps Principal
/*  ------------------------------------------
*/
/* ------------------- EXPLICATION -------------->
	diminue légèrement "margin"
	supprime "border" (il y a redondance lorsque le spacing est petit)
	spécifie une seule famille de police de caractère générique, pas une police spécifique ; un appareil portable est enclin à définir une police par défaut plus lisible de cette façon. */
body {
	border-top: none;
	font-family: sans-serif;
	padding-bottom: 5px;
/*
	background: #FFF;
	margin: 0;
	padding: 0;
	font: 100% Verdana, Geneva, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
	text-align: center;
*/
}

/* ------------------- EXPLICATION -------------->
	réduit à peine l'épaisseur de "margin" et "border"
	utilise un mot-clé pour le "border-width" supérieur à 3px
	renvoie "width" à 'auto' et définit un "max-width" à la place */
div#global {
	margin: 0% auto;
	border: 1px solid #566;
	border-top-width: medium;
	width: auto;
	max-width: 450px;
	background-image: none;
	padding: 0px;
/*
	width: 700px;
	margin: 8px auto;
	padding: 0;
	text-align: left;
	font-size: 70%;
	line-height: 150%;
	background: url(/pompage_v3/decodroite.gif) repeat-y 459px 0;
*/
}

/*  ------------------------------------------
/*  Header
/*  ------------------------------------------
*/
/* ------------------- EXPLICATION -------------->
	Annule la largeur fixe
	Limite l'espace vertical nécessaire à la bannière :
elle ne devrait pas occuper autant de place sur l'écran !
	Nous nous préoccupons de la taille réelle dans ce cas, pas de la résolution de l'écran.
	Annule les marges extérieures
	spécifie une image de fond pour le titre en lui attribuant le mot-clé !important
	afin de forcer l'affichage de cette image,
	sinon nous nous retrouvons sans titre visible.
*/
span#header span.typeH1 {
	width: auto;
/*	height: 2cm;*/
	margin: 0px;
	color: #ffce00;
	background: #002b53;
	/*background: #fff url(images/fondcolonnedroite.jpg) repeat-x;	*/
/*
	width: 216px;
	height: 145px;
	margin: 0 0 0 481px;
	padding: 0px;
	background: url(/pompage_v3/pompage.gif) no-repeat bottom;
	text-indent: -9000px;
*/
}

/* ------------------- EXPLICATION -------------->
	Limite l'espace vertical nécessaire à la bannière :
elle ne devrait pas occuper autant de place sur l'écran !
	Nous nous préoccupons de la taille réelle dans ce cas, pas de la résolution de l'écran.
	La majeure partie de l'image peut très bien être rognée sans problème,
laissons donc "max-width" et masquons "overflow"
*/
span#header {
	overflow: hidden;
/*	height: 2cm;*/
	max-width: none;
	display: block;
/*
	background: #FFF url(/pompage_v3/hdr_hme.jpg) no-repeat;
	height: 222px;
	margin: 0;
	padding-bottom: 1px;
*/
}



/*  ------------------------------------------
/*  Navigation
/*  ------------------------------------------
*/

/* ------------------- EXPLICATION -------------->
	annule la largeur et hauteur fixes
	annule les espacements
	aligne le texte au centre
	définit une couleur de fond (dans le cas où les images seraient désactivées
et une image de fond reprennant l'image du site original
*/
div#content div#menu {
	width: auto;
	height: auto;
	padding: 0px;
	text-align: center;
	background: #002b53;
/*
	width: 700px;
	height: 25px;
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	list-style: none;
	background: #FFF url(/pompage_v3/nav.gif) no-repeat;
*/
}

/* ------------------- EXPLICATION -------------->
	annule la largeur et hauteur fixes
	annule le flottement et attribue un affichage en ligne
	supprime les images afin de ne garder que l'essentiel de l'information
	annule l'indentation négative du texte pour lui donner une valeur
rendant le texte visible (puisque l'on désactive les images)
*/
div#content div#menu li {
	width: auto;
	height: 1.5em;
	float: none;
	display: inline;
	text-indent: 0%;
	background: transparent none;
/*
	height: 25px;
	margin: 0;
	padding: 0;
	float: left;
	text-indent: -9000px;
*/
}
/* ------------------- EXPLICATION -------------->
	annule les flottements pour linéariser le menu
	donne des espacements à chaque contenu d'item pour que ça respire un peu
	permet au contenu de chaque item de rester sur la même ligne
	spécifie la hauteur de ligne
*/
div#content div#menu a {
	display: inline;
	padding: 0% 0.5em;
	white-space: nowrap;
	line-height: 1.75em;
/*
	display: block;
	height: 100%;
*/
}

div#content div#menu a:link, div#content div#menu li a:visited {
	color: #ffce00;
/*
	color: #FFF;
	text-decoration: none;
	font-variant: small-caps;
	font-weight: bold;
*/
}

div#content div#menu dt {
	color: #ffce00;
}

div#content div#menu #imagePremierMenu{
	display: none;
}

/*  ------------------------------------------
/*  Colonne principale - Home
/*  ------------------------------------------
*/

/* ------------------- EXPLICATION -------------->
	annule la largeur fixe et définit une taille maximale à la place
	annule le flottement pour une mise en page sur une colonne
*/
div#content div#contenuPrincipal {
	width: auto;
	max-width: 100%;
	float: none;
/*
	float: left;
	width: 430px;
	margin-top: 0px;
*/
}

/*  ------------------------------------------
/*  Colonne de droite - Home
/*  ------------------------------------------
*/
/* ------------------- EXPLICATION -------------->
	annule la largeur fixe
	désactive le flottement -> mise en page d'une colonne
*/
div#sidebar {
	width: auto;
	margin: auto;
	float: none;
	background: #fff url(images/fondcolonnedroite.jpg) repeat-x;
/*
	background: #E2E2E2;
	width: 241px;
	margin: 0px 0;
	padding: 0 10px;
	float: right;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 221px;
*/
}

div#sidebar h3{
/*	width: 100%;*/
	background: #ffce00 url(images/fondh3colonnedroite.jpg) repeat-x;
	font-size: 1.16em;
	color: #002b53;/*#0c467e;*/
}

div#sidebar a {
	color: white;
	text-decoration: underline;
}

.bleufonce {
	color: #002b53 !important;
}

.bleufonce a {
	color: #002b53 !important;
}

.gras {
	font-weight: bold;
}

/*  ------------------------------------------
/*  Footer
/*  ------------------------------------------
*/
/* ------------------- EXPLICATION -------------->
	annule la largeur et la hauteur fixe
	aère un peu le contenu du footer avec des ems
	remplace les pixels par des ems : les pixels sont mal rendus
	définit une couleur de fond (dans le cas où les images seraient désactivées)
et une image de fond reprennant l'image du site original (trouver la couleur de fond !!!!!!!)
*/
div#footer {
	width: auto;
	height: auto;
	padding: 0.25em 0.3em;
	font-size: 0.83em !important;
	background: #002b53;
	color: #ffce00;
	text-align: center;
	margin: 0px 0;
/*	font-size: 0.9em;*/
}

div#footer a {
	color: #ffce00;
	white-space: nowrap;
}


div#content div#contenuPrincipal {
	margin-right: 2%;
	margin-left: 2%;
}

/* ------------------- EXPLICATION -------------->
	réduit la taille de la police : 2.2em serait énorme sur un petit périphérique
*/
div#content div#contenuPrincipal h1 {
	font-size: 1.5em;
/*
	font: italic 2.2em Georgia, "Times New Roman", Times, serif;
	text-align: center;
	color: #CB1804;
*/
}

/* ------------------- EXPLICATION -------------->
	réduit la taille de la police : on s'adapte à celle de la page d'accueil
*/
div#content div#contenuPrincipal h2 {
	font-size: 1.2em;
/*
	font: bold 1.3em Tahoma, Arial, Geneva, sans-serif;
	margin-top: 1.5em;
*/
}
/* ------------------- EXPLICATION -------------->
	annule l'espacement gauche au profit d'une indentation de la première ligne un peu plus loin
Cela permet de laisser un espace pour l'image sur la première ligne,
mais d'optimiser la quantité de contenu sur les lignes suivantes
*/
ul, ol {
	padding-left: 0%;
	list-style: none;
}

/* ------------------- EXPLICATION -------------->
	réduit la marge inférieure
*/
li {
/*
	margin-bottom: 1em;
*/
}

/* ------------------- EXPLICATION -------------->
	change l'image pour une plus petite
	indente la première ligne de chaque bloc pour laisser de la place à l'image
	annule l'espacement (remplacé par le text-indent)
*/
ul li {
	text-indent: 11px;
	padding-left: 0%;
/*
	margin-left: 15px;
	padding-left: 16px;
	background: url(/pompage_v3/puce.gif) no-repeat 0 4px;
*/
}