/* importe les règles standard de pompage ; cette feuille de style modifiera simplement cette base pour s'adapter aux appareils portables (ainsi que les fenêtres réduites). */
@import "http://pompage.net/pompage_v3/styles.css";

/* L'équivalence px -> em est établie en suivant ce tableau :
	 2px	0.15em
	 5px	0.38em
	 9px	0.69em	xx-small
	10px	0.83em	x-small
	11px	0.90em
	12px	0.92
	13px	1.0em	small
	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 */
#site {
	margin: 0% auto;
	border: 1px solid #566;
	border-top-width: medium;
	width: auto;
	max-width: 450px;
	background-image: none;
/*
	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;
*/
}
#home #site {
/*
	background: #FFF;
*/
}



/*  ------------------------------------------
/*  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.
*/
#home h1 {
	width: auto;
	height: 1.5cm;
	margin: 0px;
	background: transparent none;
/*
	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"
*/
#home #header {
	overflow: hidden;
	height: 1.5cm;
	max-width: none;
	background: transparent none;
/*
	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
*/
#navigation {
	width: auto;
	height: auto;
	padding: 0px;
	text-align: center;
	background: #505050 url(images/nav-back.png) repeat;
/*
	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)
*/
#navigation 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
*/
#navigation a {
	display: inline;
	padding: 0% 0.5em;
	white-space: nowrap;
	line-height: 1.75em;
/*
	display: block;
	height: 100%;
*/
}

#navigation li a:link, #navigation li a:visited {
/*
	color: #FFF;
	text-decoration: none;
	font-variant: small-caps;
	font-weight: bold;
*/
}
#navhome {
/*
	width: 80px;
	background: url(/pompage_v3/nav_home.gif) no-repeat;
*/
}
#nav1 {
/*
	width: 142px;
	background: url(/pompage_v3/nav_articles.gif) no-repeat;
*/
}
#nav2 {
/*
	width: 101px;
	background: url(/pompage_v3/nav_ressources.gif) no-repeat;
*/
}
#nav3 {
/*
	width: 85px;
	background: url(/pompage_v3/nav_aprop.gif) no-repeat;
*/
}
#nav4 {
/*
	width: 78px;
	background: url(/pompage_v3/nav_contact.gif) no-repeat;
*/
}


/*  ------------------------------------------
/*  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
*/
#une, #article, #contenu2 {
	width: auto;
	max-width: 100%;
	float: none;
/*
	float: left;
	width: 430px;
	margin-top: 0px;
*/
}

/* ------------------- EXPLICATION -------------->
	annule la largeur et hauteur fixes
	attribue des espacements pour laisser respirer un peu le texte
	attribue une taille de police
et une indentation au titre masqué jusqu'à présent
	attribue des couleurs proches de celles de l'image originale, puis masque l'image
*/
#nouveau h2, #ancien h2 {
	width: auto;
	height: auto;
	padding: 0.1em 0.15em;
	font-size: 1.3em;
	text-indent: 1em;
	background: #ac1100 none;
	color: #fff;
}
#nouveau h2 {
/*
	width: 212px;
	height: 21px;
	background: url(/pompage_v3/t_derniere.gif) no-repeat;
	text-indent: -9000px;
	margin: 0 0 -0.5em;;
*/
}
/* ------------------- EXPLICATION -------------->
	attribue des couleurs proches de celles de l'image originale, puis masque l'image
	diminue un peu la marge supérieure
*/
#ancien h2 {
	background: #8a9701 none;
	margin-top: 1.5em;
/*
	width: 212px;
	height: 21px;
	background: url(/pompage_v3/t_precedent.gif) no-repeat;
	text-indent: -9000px;
	margin: 2em 0 -0.5em;
*/
}

/* ------------------- EXPLICATION -------------->
	réduit la taille du titre
	réduit l'espacement supérieur et l'indentation du titre
pour laisser la place à la nouvelle image (plus petite, plus légère)
*/
#une h3 {
	font-size: 1.2em;
	margin: 1em 0 0.2em 2%;
	text-indent: 11px;
/*
	font: italic 1.5em Georgia, "Times New Roman", Times, serif;
	color: #454545;
	text-indent: 19px;
	margin: 1.5em 0 0.2em;
*/
}

/* ------------------- EXPLICATION -------------->
change l'image pour une plus petite et moins lourde
*/
#nouveau h3 {
	background: url(images/dot_red.png) no-repeat 0 4px;
/*
	background: url(/pompage_v3/dot_bigred.gif) no-repeat 0 3px;
*/
}

/* ------------------- EXPLICATION -------------->
change l'image pour une plus petite et moins lourde
*/
#ancien h3 {
	background: url(images/dot_green.png) no-repeat 0 4px;
/*
	background: url(/pompage_v3/dot_biggreen.gif) no-repeat 0 3px;
*/
}

h3 span.auteur {
/*
	font-style: normal;
	font-size: 0.8em;
	font-weight: bold;
	color: #696969;
*/
}

/* ------------------- EXPLICATION -------------->
	assigne un "padding" en pourcentage (mise à l'échelle correcte)
	réduit la marge inférieure
*/
#une p {
	padding: 0% 2%;
	margin-bottom: 0.7em;
/*
	margin: 0 0 0.9em;
*/
}
/* ------------------- EXPLICATION -------------->
	permet à l'image de resté collée au contenu des ancres
*/
#site a.plus:after {
	white-space: nowrap;
/*
	content: "\0000a0"url(/pompage_v3/linkred.gif);
*/
}

#ancien a.plus:after {
	white-space: nowrap;
/*
	content: "\0000a0"url(/pompage_v3/linkgreen.gif);
*/
}



/*  ------------------------------------------
/*  Colonne de droite - Home
/*  ------------------------------------------
*/
/* ------------------- EXPLICATION -------------->
	annule la largeur fixe
	désactive le flottement -> mise en page d'une colonne
*/
#externes, #fiche, #bio, #tri {
	width: auto;
	margin: auto;
	float: none;
/*
	background: #E2E2E2;
	width: 241px;
	margin: 0px 0;
	padding: 0 10px;
	float: right;
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 221px;
*/
}
/* ------------------- EXPLICATION -------------->
	annule la largeur fixe
*/
#site>#externes, #site>#fiche, #site>#bio {
	width: auto;
/*
	width: 221px;
*/
}

/* ------------------- EXPLICATION -------------->
	annule la largeur et hauteur fixes
	attribue des espacements pour laisser respirer un peu le texte
	attribue une taille de police
et une indentation au titre masqué jusqu'à présent
	attribue des couleurs proches de celles de l'image originale, puis masque l'image
*/
#externes h2 {
	width: auto;
	height: auto;
	padding: 0.1em 0.15em;
	font-size: 1.3em;
	text-indent: 1em;
	background: #287cb1 none;
	color: #fff;
/*
	margin: 0 -10px;
	padding: 0;
	background: url(/pompage_v3/t_ailleurs.gif) no-repeat;
	width: 241px;
	height: 23px;
	text-indent: -9000px;
	font-size: 1.3em;
*/
}

/* ------------------- EXPLICATION -------------->
	homogénéise le titre de niveau 3 avec les autres,
tout en conservant les couleurs pour le distinguer
	change l'image pour une plus petite et moins lourde
	réduit l'espacement supérieur et l'indentation du titre
pour laisser la place à la nouvelle image
*/
#externes h3 {
	font-weight: normal;
	background: url(images/dot_blue.png) no-repeat 0 4px;
	margin: 1em 0 0.2em;
	text-indent: 11px;
/*
	font: bold 1.2em Georgia, "Times New Roman", Times, serif;
	color: #3C3C3C;
	background: url(/pompage_v3/dot_bigblue.gif) no-repeat 0 1px;
	padding: 0;
	margin: 0.5em 0;
	text-indent: 19px;
	line-height: 130%;
*/
}

/* ------------------- EXPLICATION -------------->
	linéarise le titre
*/
#externes h3 span.auteur {
	display: inline;
/*
	display: block;
	font-size: 0.8em;
	text-indent: 0;
*/
}

/* ------------------- EXPLICATION -------------->
	réduit la marge inférieure
*/
#externes p {
	margin-bottom: 0.7em;
/*
	margin: 0 -10px;
	padding: 0 10px 1.5em;
	background: url(/pompage_v3/hr.gif) repeat-x bottom;
*/
}

/* ------------------- EXPLICATION -------------->
	permet à l'image de resté collée au contenu des ancres
*/
#externes a.plus:after {
	white-space: nowrap;
/*
	content: "\0000a0"url(/pompage_v3/linkblue.gif);
*/
}

p.plus {
/*
	text-align: right;
*/
}
p.plus a {
/*
	font-weight: bold;
	text-decoration: none;
*/
}

#externes p.plus {
/*
	background: url(/pompage_v3/greybox_bas.gif) no-repeat bottom;
	margin-top: 1em;
	padding-bottom: 0.5em;
*/
}

#externes p.plus a {
/*
	color: #398FC6;
*/
}



/*  ------------------------------------------
/*  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 !!!!!!!)
*/
#site>p#credits {
	width: auto;
	height: auto;
	padding: 0.25em 0.3em;
	font-size: 0.83em !important;
	background: #696969 url(images/foot-back.png) repeat;
/*
	height: 18px;
*/
}

/* footer des articles */
p#credits {
/*
	height: 26px;
	padding: 8px 5px 0;
	clear: both;
	background: url(/pompage_v3/footer2.gif) no-repeat 0 0px;
	color: #FFF;
	font-size: 10px !important;
	line-height: 120%;
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 18px;
*/
}

/* footer de la page d'accueil */
#home p#credits {
	/*width: auto;
	height: auto;
	padding: 0.25em 0.3em;
	font-size: 0.83em !important;
	background: #505050 url(images/foot-back.png) repeat;
/*
	height: 24px;
	padding: 5px 5px 0;
	background: #FFF url(/pompage_v3/footer.gif) no-repeat 0 5px;
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 19px;
*/
}
/* ------------------- EXPLICATION -------------->
	permet au contenu des ancres de rester groupé
*/
p#credits a {
	white-space: nowrap;
}



/*  ------------------------------------------
/*  Corps de texte - Général
/*  ------------------------------------------
*/
a:link, code a:link, a:link code, p.plus a:link, p.plus a:visited, #tri a:visited {
/*
	color: #398FC6;
*/
}

a:visited, code a:visited, a:visited code {
/*
	color: #525252;
*/
}

a:hover, code a:hover, a:hover code, p.plus a:hover, #tri a:hover {
/*
	color: #9FAC0B;
*/
}

a:active, a:focus, code a:active, a:active code, code a:focus, a:focus code, p.plus a:active, p.plus a:focus,#tri a:active, #tri a:focus {
/*
	color: #CB1804;
*/
}

a[hreflang|="en"]:after {
/*
	content: "\0000a0"url(/pompage_v3/linken.gif);
*/
}

a[hreflang] {
/*
	content: normal !important; /*  Hack pour Opera, qui ne comprend pas la règle précédente  */
}

a img {
/*
	border: 0;
*/
}

/*  ------------------------------------------
/*  Header - Pages intérieures
/*  ------------------------------------------
*/
/* ------------------- 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.
	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.
*/
#header {
	height: 1.5cm;
	background: transparent url(images/pompage.png) center no-repeat !important;
/*
	background: #FFF url(/pompage_v3/hdr_int.jpg) no-repeat;
	width: 100%;
	height: 67px;
	padding-bottom: 3px;
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 64px;
*/
}

#header a {
/*
	display: block;
	height: 100%;
	text-indent: -9000px;
	text-decoration: none;
*/
}



/*  ------------------------------------------
/*  Colonne principale - Articles
/*  ------------------------------------------
*/

/* ------------------- EXPLICATION -------------->
	ajoute une marge à tous les éléments directement inclus dans #article
*/
#article>* {
	margin-right: 2%;
	margin-left: 2%;
}
/* ------------------- EXPLICATION -------------->
	réduit la taille de la police : 2.2em serait énorme sur un petit périphérique
*/
#article h1 {
	font-size: 1.5em;
/*
	font: italic 2.2em Georgia, "Times New Roman", Times, serif;
	text-align: center;
	color: #CB1804;
*/
}

#article p.signature {
/*
	font: bold 1.3em Georgia, "Times New Roman", Times, serif;
	color: #626262;
	text-align: center;
	margin-top: -1em;
*/
}
p.signature a:link {
/*
	color: #626262;
*/
}
p.signature a {
/*
	text-decoration: none;
*/
}
p.signature a:after, #fiche a:after, #bio a:after {
/*
	content: "";
*/
}

/* ------------------- EXPLICATION -------------->
	réduit l'espacement gauche pour se rapprocher de la nouvelle image
	réduit les marges supérieures et inférieures et attibue une marge gauche identique aux autres éléments
	réduit la taille de la police : on s'adapte à celle de la page d'accueil
	change l'image pour une plus petite et moins lourde
*/
#article h2, #contenu h2, #contenu2 h2 {
	padding-left: 11px;
	margin: 1em 0 0.2em 2%;
	font-size: 1.3em;
	background: url(images/dot_red.png) no-repeat 0 5px;
/*
	font: bold 1.5em Georgia, "Times New Roman", Times, serif;
	color: #CB1804;
	background: url(/pompage_v3/dot_bigred.gif) no-repeat 0 3px;
	padding-left: 19px;
	margin-top: 2em;
*/
}
/* ------------------- EXPLICATION -------------->
	réduit la taille de la police : on s'adapte à celle de la page d'accueil
*/
#article h3 {
	font-size: 1.2em;
/*
	font: bold 1.3em Tahoma, Arial, Geneva, sans-serif;
	margin-top: 1.5em;
*/
}
#article h4 {
/*
	font: bold 1.1em Tahoma, Arial, Geneva, sans-serif;
	margin-top: 1.2em;
*/
}
#article h2 code, #article h3 code, #article h4 code {
/*
	color: #CB1804;
	font-style: italic;
*/
}

#article p, #contenu p {
/*
	font-size: 1.1em;
	line-height: 150%;
*/
}

/* ------------------- 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%;
/*

	margin: 1em 0 0.2em;
	text-indent: 11px;


	font-size: 1.05em;
	line-height: 130%;
	margin-left: 19px;
	padding-left: 19px;
	list-style: upper-roman;
*/
}

ul {
/*
	list-style: none;
	margin-left: 0;
	padding-left: 0;
*/
}

/* ------------------- EXPLICATION -------------->
	réduit la marge inférieure
*/
li {
	margin-bottom: 0.7em;
/*
	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 {
	background: url(images/puce.png) no-repeat 0 5px;
	text-indent: 11px;
	padding-left: 0%;
/*
	margin-left: 15px;
	padding-left: 16px;
	background: url(/pompage_v3/puce.gif) no-repeat 0 4px;
*/
}

dl {
/*
	font-size: 1.1em;
*/
}
dt {
/*
	margin: 1.5em 0 0.5em;
*/
}
dd {
/*
	margin-bottom: 0.75em;
*/
}

/* ------------------- EXPLICATION -------------->
	annule la largeur fixe
et la remplace par une largeur maximum
	remplace les pixels par des ems, mieux adaptés aux petits écrans
	ajoute une bordure pour palier au changement de l'image de base
	force le retour à la ligne du contenu des blocs pré-formatés
	attribue une couleur et une image de fond similaire aux originales
*/
pre {
	width: auto;
	max-width: 411px;
	padding: 1.5em 0.5em 0.5em;
	border: solid 1px #91ab1f;
	white-space: -moz-pre-wrap; /* extension propre au navigateur fonctionnant sous Gecko (Mozilla, Firefox, k-meleon, etc.) */
	/* white-space: -pre-wrap; /* extension propre à Opera 6, n'est plus d'actualité aujourd'hui */
	white-space: pre-wrap; /* ajouté à CSS 2.1, la seule valeur qui devrait être reconnue sur les navigateurs respectant CS */
	background: #EFEFEF url(images/prebloc.png) repeat-x 0 0;
/*
	background: #EFEFEF url(/pompage_v3/prebloc.gif) no-repeat 0 0;
	width: 411px;
	padding: 30px 5px 10px;
	font-size: 1.3em;
	line-height: 1.6em;
	overflow: auto;
	overflow-y: hidden; /* IE seulement */
}

/* ------------------- EXPLICATION -------------->
	annule la marge négative pour que les blocs pré-formatés
aient les même marges que les listes auxquelles elles appartiennent.
*/
ul pre, ol pre {
	margin-left: 0em;
/*
	margin-left: -15px;
*/
}

code {
/*
	font-size: 1.2em;
	color: #526011;
*/
}

pre code {
/*
	color: #000;
	font-size: 0.9em;
*/
}
pre>code {
/*
	font-size: 1em;
*/
}

tt {
/*
	font-size: 1.3em;
*/
}

/* ------------------- EXPLICATION -------------->
	annule les marges
	réduit les espacements
	repositionne l'image en fonction de des modifications effectuées
*/
.moreInfo {
	margin: 0%;
	padding: 0.3em 0.5em;
	background-position: 0.5em 0.5em;
/*
	background: #EFEFEF url(/pompage_v3/aide.gif) no-repeat 10px 12px;
	margin: 10px;
	padding: 10px;
	border: 2px solid #2B7FB5;
*/
}
p.moreInfo {
/*
	text-indent: 17px;
*/
}

/* ------------------- EXPLICATION -------------->
	modifie l'indentation des paragraphes
*/
.moreInfo p {
	text-indent: 1.5em;
/*
	text-indent: 17px;
	margin-top: 0;
*/
}
.moreInfo p+p {
/*
	text-indent: 0;
*/
}

abbr[title], acronym[title], .help {
/*
	border-bottom: 1px dotted;
	cursor: help;
*/
}


blockquote {
/*
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	min-height: 60px;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	background: url(/pompage_v3/quote.gif) no-repeat 0 0;
*/
}

/* ------------------- EXPLICATION -------------->
	réduit la marge gauche en em, 85px, ça fait beaucoup sur un petit écran
*/
blockquote p {
	margin-left: 1.5em;
/*
	margin-left: 85px;
	margin-bottom: 0em;
	padding-bottom: 0;
*/
}
blockquote>p {
	margin-left: 1.5em;
/*
	margin-left: 55px;
*/
}

q {
/*
	font-style: italic;
	quotes: "ý\0000a0" "\0000a0ý";
*/
}
cite {
/*
	font-style: italic;
*/
}



/*  ------------------------------------------
/*  Colonne de droite - Articles
/*  ------------------------------------------
*/
/* ------------------- EXPLICATION -------------->
	supprime les images décoratives tout en conservant la couleur de fond
*/
#fiche, #tri {
	background: #E2E2E2 none;
	padding-bottom: 0.5em;
/*
	background: #E2E2E2 url(/pompage_v3/greybox_bas2.gif) no-repeat 0 100%;
	padding-bottom: 20px;
	réduit un peu la hauteur de ligne
*/
}
#bio {
	background: #E2E2E2 none;
	padding-bottom: 0.5em;
	line-height: 130%;
/*
	background: url(/pompage_v3/greybox_bas3.gif) no-repeat 0 100%;
	padding-bottom: 20px;
	line-height: 170%;
*/
}

/* ------------------- EXPLICATION -------------->
	annule la largeur et hauteur fixes
	attribue des espacements pour laisser respirer un peu le texte
	attribue une taille de police
et une indentation au titre masqué jusqu'à présent
	attribue des couleurs proches de celles de l'image originale, puis masque l'image
*/
#fiche h2, #bio h2, #tri h2 {
	width: auto;
	height: auto;
	padding: 0.2em 2%;
	font-size: 1.1em;
	text-indent: 0%;
	background: #287cb1 none;
	color: #fff;
/*
	width: 241px;
	height: 23px;
	text-indent: -9000px;
	background: url(/pompage_v3/t_fiche.gif) no-repeat;
	margin: 0 -10px;
*/
}

#bio h2 {
/*
	background-image: url(/pompage_v3/t_bio.gif);
*/
}
/* ------------------- EXPLICATION -------------->
	réduit les espacements et les marges en laissant quand même respirer un peu le texte
	attribue une taille de police plus petite
*/
#bio p {
	padding: 0.3em 0% 0.3em;
	margin: 0.3em 0%;
	font-size: 0.83em;
/*
	background: #E2E2E2;
	margin: 0 -10px -1px;
	padding: 10px 10px 5px;
*/
}

/* ------------------- EXPLICATION -------------->
	réduit les espacements et les marges en laissant quand même respirer un peu le texte
	attribue une taille de police plus petite
	annule l'indentation du texte définit pour les li en général
	réduit la heuteur de ligne
*/
#fiche li {
	padding: 0%;
	margin: 0.3em 0%;
	font-size: 0.83em;
	text-indent: 0px;
	line-height: 130%;
/*
	background: none;
	margin-left: 0;
	padding-left: 0;
	margin-bottom: 0.5em;
	font-size: 0.9em;
*/
}

#fiche em {
/*
	font-style: normal;
	font-weight: bold;
*/
}




/*  ------------------------------------------
/*  Page Tous les Articles
/*  ------------------------------------------
*/
/* ------------------- EXPLICATION -------------->
	annule la largeur fixe
	affiche le titre masqué jusqu'à présent
	affiche le texte en lettres capitales
et affine le texte pour mieux coller à l'image originale
	réduit la taille de la police
	donne une couleur de fond et désactive l'affichage de l'image
	donne une couleur blanche au texte
*/
h1#articles, h1#ailleurs, h1#ressources, h1#apropos, h1#contact, h1#liste, h1#about {
	width: auto;
	text-indent: 0%;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.5em;
	background: transparent none;
	color: #ac1100;
}
h1#articles {
/*
	background: url(/pompage_v3/t_articles.gif) no-repeat;
	text-indent: -9000px;
	width: 184px;
	height: 17px;
*/
}
h1#ailleurs {
/*
	background: url(/pompage_v3/t_tousailleurs.gif) no-repeat;
	text-indent: -9000px;
	width: 376px;
	height: 17px;
*/
}

/* ------------------- EXPLICATION -------------->
	annule l'espacement (remplacé par le text-indent)
	réduit les marges
	indente la première ligne de chaque bloc pour laisser de la place à l'image
	change l'image pour une plus petite
*/
dl.listeArticles dt, dl.liensExternes dt {
	padding-left: 0%;
	margin: 0% 0% 0.1em 1em;
	text-indent: 8px;
	background: url(images/puce.png) no-repeat 0 5px;
/*
	font-weight: bold;
	background: url(/pompage_v3/puce.gif) no-repeat 0 6px;
	margin: 0 0 0.3em 15px;
	padding-left: 15px;
*/
}
dl.listeArticles dt span.auteur {
/*
	font-weight: normal;
	font-size: 0.9em;
	color: #626262;
*/
}


/* ------------------- EXPLICATION -------------->
	réduit les marges
*/
dl.listeArticles dd, dl.liensExternes dd {
	margin: 0 0 0.7em 2em;
/*
	margin: 0 0 1.5em 30px;
	font-size: 0.9em;
*/
}

/* ------------------- EXPLICATION -------------->
	supprime l'image remplaçant le titre
en lui attribuant la couleur de fond par défaut (défini auparavant)
*/
#tri h2 {
	background: inherit none;
/*
	background-image: url(/pompage_v3/t_tri.gif);
*/
}

/* ------------------- EXPLICATION -------------->
	réduit les marges
	réduit la taille du texte
	réduit la hauteur de ligne
*/
#tri ul {
	margin: 0.6em 0% 0% -1.5em;
	font-size: 1em;
	line-height: 0.9em;
/*
	margin-left: -17px;
*/
}
#tri a {
/*
	font-weight: bold;
	text-decoration: none;
*/
}





/*  ------------------------------------------
/*  Autres
/*  ------------------------------------------
*/
body.autre #site {
/*
	background-image: none;
*/
}

#credits a {
/*
	color: #FFF;
*/
}

/*  ------------------------------------------
/*  Page Ressources
/*  ------------------------------------------
*/
h1#ressources {
/*
	background: url(/pompage_v3/t_ressources.gif) no-repeat;
	text-indent: -9000px;
	width: 127px;
	height: 20px;
*/
}

/* ------------------- EXPLICATION -------------->
	réduit la marge inférieure
*/
dl.liensExternes {
	margin-bottom: 0.7em;
/*
	margin-bottom: 1em;
*/
}
dl.liensExternes dt {
/*
	margin-top: 0;
	margin-left: 23px;
	padding-left: 15px;
	background: url(/pompage_v3/puce.gif) no-repeat 0 5px;
	font-weight: bold;
*/
}


/*  ------------------------------------------
/*  Page A Propos
/*  ------------------------------------------
*/
h1#apropos {
/*
	background: url(/pompage_v3/t_apropos.gif) no-repeat;
	text-indent: -9000px;
	width: 243px;
	height: 20px;
*/
}


/*  ------------------------------------------
/*  Page Contact
/*  ------------------------------------------
*/
h1#contact {
/*
	background: url(/pompage_v3/t_contact.gif) no-repeat;
	text-indent: -9000px;
	width: 185px;
	height: 17px;
*/
}

#contenu2 input.champ, #contenu2 textarea {
	width: 100%;
	margin-bottom: 0.7em;
	font-size: 1em;
	background: #F5F5F5 url(images/fondform.png) no-repeat 0 50%;
/*
	background: #F5F5F5 url(/pompage_v3/fondform.gif) no-repeat 0 50%;
	border: 1px solid #B7B7B7;
	width: 250px;
	padding: 2px;
	margin-bottom: 2em;
	display: block;
	font: 1.2em "Courier New" Courier monospace;
*/
}

#contenu2 textarea {
/*
	width: 100%;
	height: 150px;
*/
}

#contenu2 label {
/*
	font-weight: bold;
	text-transform: uppercase;
*/
}
/* ------------------- EXPLICATION -------------->
	ajoute une marge de 2% à chaque élément dans #contenu et #contenu2
*/
#contenu>*, #contenu2>* {
	margin-right: 2%;
	margin-left: 2%;
}


/*  ------------------------------------------
/*  Page Liste
/*  ------------------------------------------
*/
h1#liste {
/*
	background: url(/pompage_v3/t_liste.gif) no-repeat;
	text-indent: -9000px;
	width: 201px;
	height: 17px;
*/
}


/*  ------------------------------------------
/*  Page About
/*  ------------------------------------------
*/
h1#about {
/*
	background: url(/pompage_v3/t_about.gif) no-repeat;
	text-indent: -9000px;
	width: 179px;
	height: 17px;
*/
}