/* GENERAL et fonds */
body,th {font-family: Georgia, Times New Roman, Times, serif;
	        color: #4a0101;
	        font-weight: bold;
            max-width: 1015px;
	        background-attachment: fixed;
			background-size: 100%;
			background: #d5d0b7;
			background-repeat: no-repeat;
	        background-position: center;
			text-decoration: none;
			text-align: center;	  
/*
	background-image: url(img/background_index.jpg);
	background-color: #006;
	
	
  font-size: 1.4em;  
  margin: 0 auto;
  padding: 2rem;
  line-height: 1.4;
  font-family: georgia, sans-serif;
 */ 
  
}						
			
html,body {background-color: #d5d0b7;
      width: 100%;
	  height: 100%;
	  margin-left: auto;
      margin-right: auto;}
	  

div {
	width: 880px;
	text-align: center;
/*  max-width: 1024px;
  min-width: 700px;*/
}

tr {background: #b79100;
    text-align: center;}			

td {
	background-color:  #8d7200;
	text-align: left;}
	  
#container {
	width:100%; // Taille de votre contenu centré
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	position:relative;
}

p {
	text-align: left;
	font-weight: normal;
   }

h1 {font-size: 58px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	text-shadow: 2px 2px #450910;}
	
/*	
h1 {
  margin-top: 20px;
  margin-bottom: 40px;
  color: #789;
  text-align: center;
  text-shadow: 1px 1px #fff;
}	
	
*/	
	
	
	
	
h2 {font-size: 38px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	text-shadow: 2px 2px #450910;}
	
h3 {font-size: 26px;
	color: #FFF;
	text-align: center;
	text-shadow: 2px 2px #450910;}
	
h4 {font-size: 18px;
	color: #FFF;
	text-align: center;
	text-shadow: 2px 2px #450910;}
	
h5 {font-size: 12px;
	color: #FFF;
	text-align: center;
	text-shadow: 2px 2px #450910;}
	
h6 {font-size: 10px;
	color: #FFF;
	text-align: center;
	text-shadow: 2px 2px #450910;}


.col_fond {color: #d5d0b7;}

.col_td {color: #8d7200;}

.col_blanc {color: #FEFFFF;}

.Centre {
	font-weight: italic;
	text-align: center;
}


.txt_n_n {font-style: normal;
          font-weight: normal;}
			   
.txt_n_B {font-style: normal;
          font-weight: bold;}

.txt10n {font-size: 10px;
         font-style: normal;}
		 
.txt10B {font-size: 10px;
	     font-weight: bold;}
		   
.txt10it {font-size: 10px;
	      font-style: italic;}
		 
.txt14n {font-size: 14px;
         font-style: normal;}
		 
.txt14B {font-size: 14px;
	     font-weight: bold;}
		   
.txt14it {font-size: 14px;
	      font-style: italic;}
		  
.txt14it_n {font-size: 14px;
	      font-style: italic;
		  font-weight: normal; } 
		  
.txt16n {font-size: 16px;
         font-style: normal;}
		 
.txt16B {font-size: 16px;
	     font-weight: bold;}
		   
.txt16it {font-size: 16px;
	      font-style: italic;}
		  
.txt16it_n {font-size: 16px;
	      font-style: italic;
		  font-weight: normal; } 
		 
.txt18n {font-size: 18px;
         font-style: normal;}
		 
.txt18B {font-size: 18px;
	     font-weight: bold;}
		   
.txt18it {font-size: 18px;
	      font-style: italic;}
		  
.txt18it_n {font-size: 18px;
	      font-style: italic;
		  font-weight: normal; }
		  
.txt20n {font-size: 20px;
         font-style: normal;}
		 
.txt20B {font-size: 20px;
	     font-weight: bold;}
		   
.txt20it {font-size: 20px;
	      font-style: italic;}
		  
.txt20it_n {font-size: 20px;
	      font-style: italic;
		  font-weight: normal; } 
		  
.txt22n {font-size: 22px;
         font-style: normal;}
		 
.txt22B {font-size: 22px;
	     font-weight: bold;}
		   
.txt22it {font-size: 22px;
	      font-style: italic;}
		  
.txt22it_n {font-size: 22px;
	      font-style: italic;
		  font-weight: normal; } 
		 
.txt24n {font-size: 24px;
         font-style: normal;}
		
.txt24B {font-size: 24px;
	     font-weight: bold;}
		   
.txt24it {font-size: 24px;
	      font-style: italic;}
		  
.txt26n {font-size: 26px;
         font-style: normal;}
		
.txt26B {font-size: 26px;
	     font-weight: bold;}
		   
.txt26it {font-size: 26px;
	      font-style: italic;}
		  
.txt28n {font-size: 28px;
         font-style: normal;}
		
.txt28B {font-size: 28px;
	     font-weight: bold;}
		   
.txt28it {font-size: 28px;
	      font-style: italic;}
		  
.txt30n {font-size: 30px;
         font-style: normal;}
		 
.txt30B {font-size: 30px;
	       font-weight: bold;}
		   
.txt30it {font-size: 30px;
	        font-style: italic;}
			
.txt38n {font-size: 38px;
         font-style: normal;}
		 
.txt38B {font-size: 38px;
	       font-weight: bold;}
		   
.txt38it {font-size: 38px;
	        font-style: italic;}
			
.txt48n {font-size: 48px;
         font-style: normal;}
		 
.txt48B {font-size: 48px;
	       font-weight: bold;}
		   
.txt48it {font-size: 48px;
	        font-style: italic;}
		  
.txt20ombre {
	font-size: 20px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}
		  
.txt22ombre {
	font-size: 22px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}

.txt24ombre {
	font-size: 24px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}
	
.txt26ombre {
	font-size: 26px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}
			
.txt28ombre {
	font-size: 28px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}
	
.txt30ombre {
	font-size: 30px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}
		 
.txt32ombre {
	font-size: 32px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}
	
.txt34ombre {
	font-size: 34px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}
			
.txt36ombre {
	font-size: 36px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}
		 
.txt38ombre {
	font-size: 38px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}
	
.txt40ombre {
	font-size: 40px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}
		   
.txt42ombre {
	font-size: 42px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}
		 

.txt48ombre {
	font-size: 48px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}
	
.txt56ombre {
	font-size: 56px;
	font-weight: bold;
	color: #4e0000;
	text-align: center;
	text-shadow: 2px 2px #ffbe51;}
			
ul,li {
	font-weight: normal;
	text-align: left;
	}
			 		
a:link {
	color:#861f00;
	text-decoration:none;
	background-color:none;
    text-align: center;
}
a:visited {
	color:#861f00;
	text-decoration:none;
	background-color:none;
}
a:hover {
	color:#861f00;
	text-decoration:none;
	background-color:#7a7a52;
}
a:active {
	color: #861f00;
	text-decoration: none;
	background-color:none;
}

.Centre_n {
	text-align: center;
	font-weight: normal;
}

div#tst
{
	position:absolute;
	left:50px;
	top:970px;
	width:850px;
	height:80px;
	overflow:auto;
	border-width:1pt;
	border-style:solid;
	visibility: hidden;
}

#apDiv1 {
	position:absolute;
	left:11px;
	top:188px;
	width:737px;
	height:107px;
	z-index:1;
	visibility: hidden;
}

.arrondie {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}

.arrondie2 {
border:2px solid blue;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}

/* Entoure le texte d'un cadre couleur rouge arrondi*/ 
.cadre_ombre_arrondi {
	background-color: #d7ab00;
	/*border: 1px solid white;*/
	padding: 5px 14px 5px 14px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	box-shadow: 2px 2px 10px white inset;
	-moz-box-shadow: 2px 2px 10px white inset;
	-webkit-box-shadow: 2px 2px 10px white inset;
	text-align: center;
}

/* Entoure le texte orangé d'un cadre couleur rouge arrondi plus étroit*/ 
.cadre_ombre_arrondi1 {
	background-color: #d7ab00;
	/*border: 1px solid white;*/
	padding: 2px 9px 2px 9px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 2px 2px 8px white inset;
	-moz-box-shadow: 2px 2px 8px white inset;
	-webkit-box-shadow: 2px 2px 8px white inset;
	text-align: center;
}

.cadre_ombre_arrondi2 {
	background-color: #d7ab00;
	color: #FFF;
	/*border: 1px solid white;*/
	padding: 2px 9px 2px 9px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 2px 2px 8px white inset;
	-moz-box-shadow: 2px 2px 8px white inset;
	-webkit-box-shadow: 2px 2px 8px white inset;
	text-align: center;
}


.ecart_text {
	line-height: 180%;
	}
	
/* Entoure le texte d'une couleur bleue arrondie sans cadre, avec bordure large*/ 
.cadre_ombre_arrondi_brun {
	background-color: #796618;
	/*border: 1px solid white;*/
	padding: 5px 12px 5px 12px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	box-shadow: 2px 2px 10px white inset;
	-moz-box-shadow: 2px 2px 10px white inset;
	-webkit-box-shadow: 2px 2px 10px white inset;
	text-align: center;
}

.cadre_ombre_arrondi_brun_it {
	background-color: #796618;
	/*border: 1px solid white;*/
	padding: 2px 9px 2px 9px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 2px 2px 8px white inset;
	-moz-box-shadow: 2px 2px 8px white inset;
	-webkit-box-shadow: 2px 2px 8px white inset;
	font-style: italic;
	font-weight: normal;
	font-size: 18px;
}


.expand1:hover{
    color: #edcfa2; 
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
  opacity: 1;
  transform: scale(1.1);
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari and Chrome */

}

.expand1-3:hover{
    color: #edcfa2; 
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
  opacity: 1;
  transform: scale(1.3);
  -ms-transform: scale(1.3); /* IE 9 */
  -webkit-transform: scale(1.3); /* Safari and Chrome */

}

.expand1-5:hover{
    color: #edcfa2; 
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
  opacity: 1;
  transform: scale(1.5);
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari and Chrome */

}

.expand2:hover{
    color: #edcfa2; 
  -webkit-transition: all .6s ease-in;
  -moz-transition: all .6s ease-in;
  -ms-transition: all .6s ease-in;
  -o-transition: all .6s ease-in;
  transition: all .6s ease-in;
  opacity: 1;
  transform: scale(2);
  -ms-transform: scale(2); /* IE 9 */
  -webkit-transform: scale(2); /* Safari and Chrome */

}


.expand3:hover{
    color: #edcfa2; 
  -webkit-transition: all .6s ease-in;
  -moz-transition: all .6s ease-in;
  -ms-transition: all .6s ease-in;
  -o-transition: all .6s ease-in;
  transition: all .6s ease-in;
  opacity: 1;
  transform: scale(3);
  -ms-transform: scale(3); /* IE 9 */
  -webkit-transform: scale(3); /* Safari and Chrome */

}

.expand4:hover{
    color: #edcfa2; 
  -webkit-transition: all .6s ease-in;
  -moz-transition: all .6s ease-in;
  -ms-transition: all .6s ease-in;
  -o-transition: all .6s ease-in;
  transition: all .6s ease-in;
  opacity: 1;
  transform: scale(4.15);
  -ms-transform: scale(4.15); /* IE 9 */
  -webkit-transform: scale(4.15); /* Safari and Chrome */

}

.expand5-7:hover{
    color: #edcfa2; 
  -webkit-transition: all .6s ease-in;
  -moz-transition: all .6s ease-in;
  -ms-transition: all .6s ease-in;
  -o-transition: all .6s ease-in;
  transition: all .6s ease-in;
  opacity: 1;
  transform: scale(5.7);
  -ms-transform: scale(5.7); /* IE 9 */
  -webkit-transform: scale(5.7); /* Safari and Chrome */

}


   .image
{
    background:url(images/back.png);
    height:100px;
    width:100px;
    display: block;
    float:left;
}

.image  a {
    display: none;
}

.image  a:hover {
    display: block;
}

audio{
background: #edcfa2;
	color: #edcfa2;
	width: 35%;
	height: 50%;
}


.bestiole 
{
	position: absolute;
	top: 407px;
	left: 522px;
	height: 231px;
}


.infobulle {
  position: relative;  /* les .infobulle deviennent référents */
  cursor: help;
}

/* on génère un élément :after lors du survol et du focus :*/

.infobulle:hover::after,
.infobulle:focus::after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -4.4em;  /* met le texte + bas ou + haut*/
  left: 200%;
  transform: translateX(-45%); /* centre le texte horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne */

  font-size: 1.4em;
  
}


/* Pour afficher VOIR LA REPONSE dans une infobulle*/

.picto-item {
  position: relative;  /*les .picto-item deviennent référents*/
  cursor: help;
  border-radius: 50%;
}

/* on génère un élément "after" lors du survol (hover) et du focus :*/

.picto-item:hover:after,
.picto-item:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -23em;  /* règle la hauteur de la bulle quand mouse-over */
  left: 50%; /* met la flèche au milieu */
	transform: translateX(180%); /* centre la bulle horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative - ne change rien apparemment !!! */
  white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 5px 14px; /* longueur du fond de l'infobulle */
  background: #413219; /* couleur de fond de l'infobulle */
  color: #fff; /* couleur du texte de l'infobulle */
  border-radius: 22px; /* arrondit les bords du fond de l'infobulle */
  font-size: 1.2rem; /* agrandit l'infobulle (et son fond) */
}

/* on génère un second élément en :before pour la flèche */

[aria-label]:hover:before,
[aria-label]:focus:before {
  content: "▼";
  position: absolute; /* stabilise */
  top: -20.7em; /* change la position verticale de la flèche */
	left: 0%; /* centre la flèche */
	transform: translateX(25em); /* met la flèche au centre  */
  font-size: 20px; /* change la taille de la flèche */
  color: #413219; /* change la couleur de la flèche */
}

/* pas de contour durant le :focus */
[aria-label]:focus {
  outline: none;
}

}
p, .pictos {
  text-align: center;
}

/* __________________________________________
Pour afficher ATTENTION... pour l'option 2/4 
*/

p, .pictos2 {
  text-align: center;
}

.picto-item2 {
  position: relative;  /*les .picto-item deviennent référents*/
  cursor: help;
  border-radius: 50%;
}

.picto-item2:hover:after,
.picto-item2:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -6.4em;  /* règle la hauteur de la bulle quand mouse-over */
  left: 50%; /* met la flèche au milieu */
	transform: translateX(-42%); /* centre la bulle horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative - ne change rien apparemment !!! */
  white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 3px 20px; /* HAUTEUR ET longueur du fond de l'infobulle PAR RAPPORT AU TEXTE (importance du débordement)*/
  background: #d0e481; /* couleur de fond de l'infobulle */
  color: #442302; /* couleur du texte de l'infobulle */
  border-radius: 22px; /* arrondit les bords du fond de l'infobulle */
  font-size: 1.2rem; /* agrandit l'infobulle (et son fond) */
}

/* on génère un second élément en :before pour la flèche */

[aria-label2]:hover:before,
[aria-label2]:focus:before {
  content: "▼";
  position: absolute; /* stabilise */
  top: -10em; /* change la position verticale de la flèche */
	left: 0%; /* centre la flèche */
	transform: translateX(2.6em); /* met la flèche au centre  */
  font-size: 20px; /* change la taille de la flèche */
  color: #d0e481; /* change la couleur de la flèche */
}
[aria-label2]:focus {
  outline: none;
}


/* __________________________________________
Pour afficher ATTENTION... pour l'option 2/4 (2ème ligne)
*/

p, .pictos3 {
  text-align: center;
}

.picto-item3 {
  position: relative;  /*les .picto-item deviennent référents*/
  cursor: help;
  border-radius: 50%;
}

.picto-item3:hover:after,
.picto-item3:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -5.4em;  /* règle la hauteur de la bulle quand mouse-over */
  left: 50%; /* met la flèche au milieu */
	transform: translateX(-42%); /* centre la bulle horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative - ne change rien apparemment !!! */
  white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 3px 20px; /* HAUTEUR ET longueur du fond de l'infobulle PAR RAPPORT AU TEXTE (importance du débordement)*/
  background: #d0e481; /* couleur de fond de l'infobulle */
  color: #442302; /* couleur du texte de l'infobulle */
  border-radius: 22px; /* arrondit les bords du fond de l'infobulle */
  font-size: 1.2rem; /* agrandit l'infobulle (et son fond) */
}

/* on génère un second élément en :before pour la flèche */

[aria-label3]:hover:before,
[aria-label3]:focus:before {
  content: "▼";
  position: absolute; /* stabilise */
  top: -10em; /* change la position verticale de la flèche */
	left: 0%; /* centre la flèche */
	transform: translateX(2.6em); /* met la flèche au centre  */
  font-size: 20px; /* change la taille de la flèche */
  color: #d0e481; /* change la couleur de la flèche */
}
[aria-label3]:focus {
  outline: none;
}


$( 'audio' ).audioPlayer({
   classPrefix: 'audioplayer',
   strPlay: 'Play',
   strPause: 'Pause',
   strVolume: 'Volume'
});