/* ======================= Toutes les pages ========================= */
/* palette inspirée de http://www.colourlovers.com/palette/4519672/soaring_striations 

/* #FDF2B6;	/* creme : cadres */
/* #E8C96C;	/* brun clair : cadre */
/* #7C6835;	/* brun : T2 T3 T4 */
/* #790909;	/* rouge sombre : lien */
/* #823700;	/* marron foncé : T1 et signal survol */




body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 24px;
	position: relative;
	/* background-color: #DADADA; */
	background: rgb(212,212,217);
	background: linear-gradient(180deg, rgba(212,212,217,1) 0%, rgba(116,115,115,1) 100%); 
}

a {
	color: #790909;	/* rouge sombre : lien */
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	font-style: italic;
	font-weight: bold;
	color: #823700;	/* marron foncé : T1 et signal survol */
}

h1, h2, h3 {
	padding: 0;
	margin: 0;
	clear:both
}
h1, h2 {
	font-family: "Times New Roman", Times, serif;
	text-align: center;
}
h1 {
	color:#823700;	/* marron foncé : T1 */
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 10px;
}
h2 {
	color:#7C6835;	/* brun : T2 T3 T4 */
	font-style: italic;
	font-size: 36px;
}
h3 {
	color:#7C6835;	/* brun : T2 T3 T4 */
	font-style: italic;
	font-weight: bold;
	font-size: 16px;
}
h4 {
	color:#7C6835;	/* brun : T2 T3 T4 */
	font-style: italic;
	font-weight: bold;
	font-size: 14px;
	margin-bottom: -10px;
	margin-top: 10px;
	clear:left
}
li.ens {
	text-indent: -25px;
	padding-left: 25px;
	list-style-position: outside;
	font-size: smaller;
	line-height: 16px; 
}
li.ens a {
	font-size: larger;
}


/* ======================= Toutes les pages ========================= */
#cadre_page {
	margin: auto;
	max-width: 1400px;
	min-width: 1100px;
	min-height: 800px;
	position: relative;
	padding-top: 10px;
	padding-right: 20px;
	padding-left: 50px;
	padding-bottom: 100px;
	border: 2px solid #E8C96C;	/* brun clair : cadre */
	background-color: #FFFFFF;
	margin-bottom: 150px;
}

/* ======================= Page d'accueil =========================== */
.titre {
	font-size: 14px;
	line-height: 30px;
	color: #2A1200;	/* marron foncé : T1 */
	font-weight: bold;
}
.gros {
	font-weight: bolder;
	font-size: 14px;
}
.petit {
	font-weight: lighter;
	font-size: 11px;
}
.mini {
	font-size: 10px;
	line-height: 12px;
}
.centre {
	background-position: center;
	text-align: center;
}
.message {
	margin-left: 100px;
}

#top {
	position: fixed;
	width: 200px;
	height: 50px;
	left: 500px;
	bottom: 100px;
	margin: 0 0 0 110px;
	opacity: 0.4;
}
/* ======================= Liste des grains ========================= */
.liste_grains {
/*	line-height: 10px;*/
	font-size: 12px;
	min-width: 800px;
	Margin-top:10px;
	margin-left: auto;
	margin-right: auto;	
}
.liste_grains th{
	font-size: 14px;
	color: #FFFFFF;
	background-color: #7C6835;	/* brun : T2 T3 T4 */
	text-align: left;
	line-height: 25px;
}

.liste_grains td:hover {font-weight: bold};  /* pseudo classe ":hover" ne passe pas sur <TD>, voir onMouseover ? */


.liste_grains td{
  white-space: nowrap;
  overflow: fade(50%);
}

/* Alternance de lignes grisées et blanches avec hauteur pour compenser padding et margin blanc */
.liste_grains tr:nth-child(even) {background: #E0E0E0; 	line-height: 8px;}  /* grisé */
.liste_grains tr:nth-child(odd) {background: #FFFFFF; 	line-height: 8px;}   /* blanc */

/* Surbrillance de la ligne au survol (voir affichage de l'image) */
.liste_grains tr:hover td{
    background-color: #F4D9B0;	/* brun clair : cadre */
}


/* ======================= Fin liste des grains ===================== */
/* ======================= */
/* ======================= DIV info (affiche au survol) ============== */
/*   -------------   */
/* Le survol du <div class='info'> déclenche l'affichage du <span> inclus dans le <div> */
/* ----------------  Avec un lien :                                   */
/* <div class="info"><a href="#"><img src='image.jpg'/><span>Texte ou image informatif</span></div></a> */
/* ----------------  Et même sans qu'il y ait un lien :               */
/* <div class="info"><img src='image.jpg'/><span class="texte">Texte ou image informatif</span></div> */
/* ----------------  ou avec un autre positionnement:                 */
/* <div class="info"><img src='image.jpg'/><span class="image">Texte ou image informatif</span></div> */
/* ----------------  ou un autre style :                              */
/* <div class="info"><img src='image.jpg'/><span class="autre">Texte ou image informatif</span></div> */
/*   -------------   */

/* ======================= DIV info (affiche au survol) ============== */
/*      <a href="#">   <div class="info">   <img src='image.jpg'/>   <span>Texte ou image informatif</span>   </div>   </a>      */
/* Le lien est sur le <div class="info">
/* qui encadre <img> & <span> */
.info {
   position: relative;
}
/* le <span> contenu dans le <div class='info'> ne doit pas s'afficher */
.info span {
   display: none;
}
/* sauf au survol du <div> (peut même fonctionner sans lien) */
.info:hover span {
	display: inline;
	position: absolute;
	white-space: nowrap;
/*	top: 5px;
	left: 5px;
*/	background: white;
	color: black;
	padding: 3px;
	font-size: 12px;
	line-height: 14px;
	z-index: 50;
}
/* image affichée au survol d'un texte */
.info:hover span.image {
	top: -100px;
	left: 200px;
	background:rgba(255,255,255,1);
	border-style: solid;
	border-width: 1px;
}
/* texte affiché au survol d'une image */
.info:hover span.texte {
	top: -20px;
	left: 70px;
	background:rgba(255,255,255,0.5);
*/
	font-size: 10px;
	line-height: 15px;
	font-style: italic;
	border-width: 2px;
	border-style: outset;
	padding: 2px;
/*	margin: 50px;*/
}

a.voir {
	/* pour donner une couleur spéciale au lien '#' qui n'existe que pour l'info  */
/* <a href="#" class="voir">lien<span class="info" >information ou image à afficher au survol</span></a> */
	color: #996600; 
    text-decoration: none;
    border-bottom: dotted 1px #790909;	/* rouge sombre : lien */
}




/* ======================= Divers mise en forme  ============== */
p.retrait {
	margin-left: 50px;
	margin-right: 300px;	
}
p.p2 {
	margin-left: 90px;
	margin-right: 400px;
	margin-top: -10px;
	font-style: italic;
	text-indent: -20px;
	font-size: smaller;
	line-height: 18px;
}
/* ----------- Images */
.pict {
	padding: 3px;
	color: #333333;
	border-width: 3px;
	border-style: solid;
}	
.picright {
	background-color: #F9F9F9;
	border: 1px solid #CCCCCC;
	padding: 3px;
	font-size: x-small;
	color: #F00;
	margin: 1em;
	float:right;
	position: relative;
	font-style: italic;
	text-align: center;
	clear: right;
} 
.picleft {
	background-color: #F9F9F9;
	border: 1px solid #CCCCCC;
	padding: 3px;
	font-size: x-small;
	color: #808040;
	margin: 1em;
	float:left;
	position: relative;
	font-style: italic;
	text-align: center;
	clear: left;
} 
/* ----------- Présentaion 'touche clavier'  */
.touche {
	color: #FFFFFF;
	background-color: #666666;
	line-height: 1.2em;
	border: thin solid #000000;
	margin: 2px;
}
/* ----------- Sur mosaique
	émule une image 20x20 avec une image 10x10
	pour simulation vignette 20x20 avec les 'perdu' de 10x10 
	A poursuivre ?   
*/
/* Flou */
.flou10 {
	-webkit-filter: blur(2.1px);
	filter: blur(2.1x);
}
.flou10 div:hover img {
	-webkit-filter: blur(0);
	filter: blur(0);
}

.zoom10 {
/*   transition: transform .3s; /* Animation */
	transform-origin: top left;
}
.zoom10:hover {
    transform: scale(2);
	z-index:1
}