/* ----- PARAM : fixer les params généraux qui fiabilisent le calcul de position du scroll parallax ------- */
html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	position:relative;
	}
html, body {
	line-height: 1;
	min-height:100%;
	font-family: Georgia, serif;
	}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
	}

/* ----- FOND ECRAN : images de fond en scroll parallax (niveau dessous et dessus) ------------------------ */
#fondDessus {
	z-index:50;
	top: 0;
	left:0;
	width:100%;
	height:100%;
	opacity:5%;
	background: repeat 0 0;
	background-size: contain;
	}
#fondDessous {
	z-index:49;
	top:0;
	width:100%;
	height:100%;
	opacity:0.07;
	background-repeat: repeat-y;
	background-size: 20%;
	}
	
/* ----- ENTETE DE PAGE ----------------------------------------------------------------------------------- */
/* Entête : image d'accueil de 1ère page */
#enteteImg {
	left: 0;	
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 60;
    background-position: center top;
	background-attachment: scroll;
    background-size: cover;
    background-repeat: no-repeat;
	}
/* Entête : image pilier gauche portail */
#entetePilierG {
	left: 0;
	top: 0;
	width: 6.75vw; /* 1.5 * ref 4.5% (pourcentage proportionnelle entre les tailles des piliers et battants calculés sous Fireworks) */
	max-width: 72px;
	height: 100vh;
	z-index: 61;
    background-position: left bottom;
	background-attachment: scroll;
    background-size: contain;
    background-repeat: no-repeat;
	}
/* Entête : image battant gauche portail (partie mobile) */
#enteteBattantG {
	left: min(72px, 6.75%); /* 72px est le max du entetePilierG pour faire coller son battant dessus ; 6.75% = 1.5 * ref 4.5% */
	top: 0;
	width: 27.9vw; /* 1.5 * ref 18.6% */
	max-width: 300px;
	height: 100vh;
	z-index: 61;
    background-position: left bottom;
	background-attachment: scroll;
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: center left;
    transform: rotateY(0deg);
	}
/* Entête : image battant droit portail (partie mobile) */
#enteteBattantD {
	right: min(72px, 6.75%); /* 72px est le max du entetePilierD pour faire coller son battant dessus ; 6.75% = 1.5 * ref 4.5% */
	top: 0;
	width: 27.9vw; /* 1.5 * ref 18.6% */
	max-width: 300px;
	height: 100vh;
	z-index: 61;
    background-position: right bottom;
	background-attachment: scroll;
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: center right;
    transform:rotateY(0deg);
	}
/* Entête : image pilier droit portail */
#entetePilierD {
	right: 0;	
	top: 0;
	width: 6.75vw; /* 1.5 * ref 4.5% */
	max-width: 72px;
	height: 100vh;
	z-index: 61;
    background-position: right bottom;
	background-attachment: scroll;
    background-size: contain;
    background-repeat: no-repeat;
	}
/* Entête : contener et image médaillon rond traversant le portail vers le bas au-dessus du texte corpsDiv */
#enteteMedaillon {
	display: block;
	margin: 0 auto;
	right: 0;
	left: 0;
	height: 16vmax;
 	width: 16vmax;
	min-width: 80px;
	min-height: 80px;
	z-index: 70;
	}
#enteteMedaillonImg {
	display: block;
	width: 16vmax;
	min-width: 80px;
	}
/* Entête : titre et sous-titre de page remontant */
#enteteTitre {
	left: 0;
	width: 100vw;
	text-align:center;
	z-index: 71;
	font-size:150%;
}
h1 {
	font-size:1.8em;
	color: white; 
	text-shadow: 0px 0px 0.4em black;
	font-family: Verdana, Arial; 
	margin-top: 0;
	margin-bottom: 0.5em;
	}
h2 {
	font-size:1.2em;
	color: white; 
	font-family: "Times New Roman", Times, serif;
	text-shadow: 0px 0px 0.4em black;
	margin: 0;
	font-style: italic;
	font-weight: bold;
	}

/* ----- CORPS DE PAGE ------------------------------------------------------------------------------------ */
/* Corps : cadre incluant le corps et l'enpied de page */
#corpsDiv {
	width:100%;	
	z-index: 69;
	}
body {
	min-width: 286px; /* Largeur min sous laquelle l'écran se réorganise mal sous IE */
    margin: 0px;  /* Colle le bandeau à gauche et gagne de la place en taille en min-width  */
	font-family: Georgia, serif;
	}
/* Corps page ssmenu - cadre contenant tout le corps de page avec ses marges */
.contenerCorpsPage {
	margin-left: 10px;
	margin-right: 10px;
	}
/* Corps page ssmenu - Rubrique - cadre contenant le titre de la rubrique du domaine */
.contenerRubrique {
	position: relative; 
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 1em;
	padding-bottom: 0em;
	}
/* Corps page ssmenu - Rubrique - sépérateur image */
.imageSeparateur {
	width: 50%;
	height: 50%;
	}
/* Corps page ssmenu - Rubrique - centrer le block div */
.centrerBlock {
	margin: auto;
	/* border: 1px solid red; */
	}
/* Corps page ssmenu - Rubrique - libellé de la rubrique */
.textRubrique {
	font-size: 1.8em;
	color: maroon;
	}
/* Corps page ssmenu - Rubrique - centrer le libellé de la rubrique */
.centrerText {	
    text-align: center;
	margin: 0px 20px 0px 0px;
	padding: 0px;
	}
/* Corps page ssmenu - texte en gras */
.gras {
	font-weight: bold;
	}
/* Corps page ssmenu - ImageDeco - cadre image décoration dispersés dans les menus avec son animation zoom */
.contenerImageDeco {
	width: 50vw;
	height: 25vw;
	margin-top: 0px;
	margin-bottom: 8px;
	margin-left: 0px;
	margin-right: 10px;
	padding: 0px;
	overflow: hidden;
	border: 1px solid #333333;
	-webkit-box-shadow: 5px 5px 5px #999999;
			box-shadow: 5px 5px 5px #999999;
	}
/* Corps page ssmenu - ImageDeco - image à zoomer - occupe tout son conteneur au repos + style transition pour zoom */
.zoom img {
	width: 100%;
	height: 100%;
	-webkit-transition: all 1s ease-out;
			transition: all 1s ease-out;
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	}
/* Corps page ssmenu - ImageDeco - zoom sur hover image - agrandi l'image au passage souris comme transition */
.zoom img:hover {
	width: 120%;
	height: 120%;
	}
/* Corps page ssmenu - ImageDeco - aligner à gauche */
.alignGauche {
	float: left;
	}
/* Corps page ssmenu - ImageDeco - aligner à droite  */
.alignDroite {
	float: right;
	margin-left: 10px;
	}
/* Corps page ssmenu - Ouvrage - titre de l'ouvrage */
.titreOuvrage {
	font-size: 1.3em;
	font-weight: bold;
	text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
	display: inline;
	}
/* Corps page ssmenu - Ouvrage - icone du titre de l'ouvrage - ratio width: 45px; height: 33px;*/
.icoTitre {
	width: 1.9em;
	height: 1.4em;
	margin-right: 5px;
	background: url("/img/ico-item-biblio-off.gif") no-repeat;
	display: inline-block;
	background-size: cover;
	background-repeat: no-repeat;
	vertical-align: middle;
	-webkit-transition: all 0.5s ease-out;
			transition: all 0.5s ease-out;
	z-index:50;
    }
/* Corps page ssmenu - Ouvrage - conteneur titre de l'ouvrage */
.contenerTitreOuvrage {
	}
/* Corps page ssmenu - Ouvrage - permuter l'icone du titre d'ouvrage sur ON quand survol du titre adjacent - déport de l'action hover de la balise parent (balise A encadrant l'icone et le titre de l'ouvrage) sur son descendant (icone du titre à permuter en image on) */
.contenerTitreOuvrage:hover .icoTitre {
	background: url("/img/ico-item-biblio-on.gif") no-repeat;
	background-size: cover;
	vertical-align: middle;
    }
/* Corps page ssmenu - Ouvrage - inhiber le souligner par défaut des liens + couleur */
a.inhiberSouligner:link {
	text-decoration:none;
	color: #000099; /* bleu */
	font-weight: bold;
	}
/* Corps page ssmenu - Ouvrage - conteneur auteur de l'ouvrage */
.contenerAuteurOuvrage {
	margin-top: 0.3em;
	}
/* Corps page ssmenu - Ouvrage - auteur de l'ouvrage */
.auteurOuvrage {
	font-size: 1em;
	font-style: italic;
	display:inline;
	-webkit-transition: all 0.5s ease;
			transition: all 0.5s ease;
	}
/* Corps page ssmenu - Ouvrage - résumé de l'ouvrage */
.resumerOuvrage {
	padding-top:0.3em;
    text-align: justify;
    text-justify: inter-word;
	font: 1em "Fira Sans", serif;
	color: black;
	}
/* Corps page ssmenu - Ouvrage - renvoi de l'ouvrage (voir aussi) */
.renvoiOuvrage {
	margin-top: 5px;
	margin-right: 5px;
    text-align: justify;
    text-justify: inter-word;
	font: 1em "Fira Sans", serif;
	color: black;
	font-style: italic;
	}
/* Corps page ssmenu - titre de notes en fin de page sous-menu */
.titreNoteSousmenu {
	font-size: 1.1em;
	font-weight: bold;
	text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
	line-height: 150%;
	display: inline;
	color: #404040; /* DarkGray */
	}
/* Corps page ssmenu - notes en fin de page sous-menu */
.noteSousmenu {
	/*border: 1px solid red;*/
	padding-top:0.3em;
    text-align: justify;
    text-justify: inter-word;
	font: 0.9em "Fira Sans", serif;
	color: #404040; /* DarkGray */
	font-style: italic;
	}
/* Corps page ssmenu - Ouvrage - icone de téléchargement PDF de l'ouvrage + style transition permutation sur ON - original width: 230px; height: 282px; */
.icoTelecharger {
	width: 1.2em;
	height: 1.47em;
	margin-right: 5px;
	background: url("/img/ico-pdf-off.gif") no-repeat;
	display: inline-block;
	background-size: cover;
	background-repeat: no-repeat;
	vertical-align: middle;
	-webkit-transition: all 0.5s ease-out;
			transition: all 0.5s ease-out;
    }
/* Corps page ssmenu - Ouvrage - permutation sur ON de l'icone de téléchargement PDF de l'ouvrage */
.icoTelecharger:hover {
	background: url("/img/ico-pdf-on.gif") no-repeat;
	background-size: cover;
	vertical-align: middle;
    }
/*----------------------- Version ecran: mobiles ou tablettes (moins de 1030px de large) ------------ */
@media only screen and (max-device-width: 1030px) { 
	/* Corps page ssmenu - Rubrique - sépérateur image - plus large si ecran petit */
	.imageSeparateur {
		width: 90%;
		height: 90%;
		}
	/* Augmenter la taille de l'icone télécharger pour plus visible sur les mobiles ou tablettes (moins de 1030px de large) */
	.icoTelecharger {
		width: 1.7em;
		height: 2em;
		/*width:34px;
		height:45px;
		max-width: 6vw;
		max-height: 8vw;*/
		}
} /* Fin - media : ecran mobiles ou tablettes */
/*----------------------- Version ecran: très petit ecran (moins de 500px de large) ----------------- */
@media screen and (max-width: 500px) {
	/* Corps page ssmenu - Rubrique - réduire la taille du libellé de la rubrique (plus lisible sur très petit ecran) */
/*
	.textRubrique {
		font-size: 1.4em;
		font-weight: bold;
		}
*/
	/* Corps page ssmenu - Ouvrage - réduire la taille du titre de l'ouvrage (plus lisible sur très petit ecran) */
/*
	.titreOuvrage {
		font-size: 1.2em;
		}
*/
	/* Corps page ssmenu - ImageDeco - étendre les ImageDeco de menu sur toute la largeur de l'écran (plus lisible sur très petit ecran) */
	.contenerImageDeco {
		width: 94vw;
		height: 47vw;
		margin-left: 0px;
		margin-right: 3px;
		float: none;
		}
} /* Fin - media : très petit ecran */