/* contournement d'un bug IE : http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html*/
html {
    font-size: 100%;
    font-family: serif;
    text-align: center;
    background-color: #faf8ce; /* STYLE */
}
a {
    color: black;
    text-decoration: none;
}
body {
    margin: 0%;
}
body#index {
    background-color: #faf8d6;
}
body > header {
    background-color: #ddd;
    padding-top: 2.5%;
}
body > header > a > img {
    /* height: 4.4em; */
}
body > header > p#subtitle {
    font-size: 1.5em;
    color: #9f0b47;
}
/*header p img {
    position: absolute;
    right: 0;
}*/
body > header nav menu {
    margin: 0%;
    padding: 1em 0em 0.2em 0em;	/* 704px de haut:1em 0em 0.15em 0em; 926px de haut:1em 0em 0.2em 0em;  zomé, le mieux, c'est 0.18em) */
    border-bottom: 0.1em solid #9f0b47; /* STYLE */
}
body > header nav menu li {
    display: inline;
    padding: 0.2em 0em;
    border: 0.1em solid #9f0b47; /* STYLE */
    border-radius: 0.4em 0.8em 0 0.4em;
}
body > header nav menu li#current {
    background-color: #faf8ce;
    border-bottom: 0.1em solid #faf8ce; /* NAV STYLE (same as html background-color)*/
}
body > header nav menu li a {
    padding: 0.2em 1em;
    color: #000;
    text-decoration: none;
    border-bottom: none;
}
body > header nav menu li a:hover {
    background-color: #222;
    color: #faf8ce;
    border-radius: 0.3em 0.7em 0em 0.3em;	/* valeurs numériquement fausses, mais esthétiquement meilleures */
}
/* suppression du formatage sur ", a:focus, a:active" car ça foutait la grouille! */
body > header nav menu li#current a {
    padding: 0.4em 1em 0.1em 1em;
    position: relative;
    top: 0.2em;
}
body > header nav menu li#current a:hover {
    padding: 0.4em 1em 0.1em 1em;	/* 704px de haut: 0.4em 1em 0.05em 1em; 926px de haut: 0.4em 1em 0.1em 1em;    zommé, le mieux, c'est 0.08em) */
}
body > footer {
    background-color: #222;
    color: #faf8ce;
    padding: 1em;
    text-align: center;
    font-style: italic;
}
body > footer a {
    color: #faf8ce;
}
body > footer p {
    padding: 0.2em;
    margin: 0;
}
body > footer img {
    vertical-align: middle;
}
article {
    background-color: #faf8ce;
    margin: 0%;
    padding: 1% 0% 0.5% 0%;
}
/* decorate link in text */
article a {
    background-image: url("media/lien.svg");
    background-size: 0.8em 0.8em;
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 0.8em;
    background-origin: padding-box;
}
article .colonne {
    display: inline-block;
    vertical-align: middle;
    margin: 2%;
}
article .colonne#more {
    width: 55%;
}
article .colonne#equal {
    width: 39%;
}
article .colonne#less {
    width: 25%;
}
article .colonne#three {
    width: 26%;
}
article .colonne > header {
    margin: 1em;
}
article .colonne > p, ul, ol, dl {
    text-align: justify;
}
article .colonne ol > li > dl dd {
    text-align: left;
}
article figure.colonne > img {
    display: block;
    padding: 2%;
    width: 100%;
}
article figure.colonne > a > img {
    display: block;
    padding: 2%;
    width: 100%;
}
article figure.colonne > img#deux_milieu {
    display: inline;
    vertical-align: middle;
    padding: 2% 1% 2% 1%;
    margin: 1%;
    width: 45%;
}
article figure.colonne > img#deux_quinconce_haut {
    display: inline;
    padding: 2% 0% 30% 0%;
    margin: 2%;
    width: 45%;
}
article figure.colonne > img#deux_quinconce_bas {
    display: inline;
    padding: 30% 0% 2% 0%;
    margin: 2%;
    width: 45%;
}
article figure.colonne > img#deux_quinconce_gauche {
    display: inline;
    padding: 1% 30% 1% 1%;
    width: 60%;
}
article figure.colonne > img#deux_quinconce_droite {
    display: inline;
    padding: 1% 0% 1% 30%;
    width: 60%;
}
article > section.gallery  {
    margin: 2em 10% 1em 10%;
}
article > section.gallery p {
    margin: 0;
}
article > section.gallery > header {
    font-size: 1.3em;
    font-weight: bold;
    margin: 0%;
}
article > section.gallery img {
    max-width: 27%;
    /*  --> 172px de hauteur (ou 141px ??); 800px en pleine taille*/
    margin: 1.5%;
}
/* page de garde */
body#index {
    margin: 0%;
    padding: 6% 10%;
    height: 87%
}
body#index header img {
    width: 97%;
    margin: 0% 2%;
}
body#index #subtitle {
    font-size: 1.6em;
    color: #9f0b47;
}
body#index img#illus {
    width: 97%;
    margin: 2%;
}
/* formatages génériques */
.text_left {
    text-align: left;
}
/* suppression des formatages excédentaires (flêche des liens par exemple) */
header a {
    background-image: none;
}
figure.colonne > a {
    background-image: none;
}
.gallery a {
    background-image: none;
}