/*sept2015: regroupe elements pour zone aide + animation + adaptation selon largeur page*/
/*juin2016: ce qui concerne  border-box  pourra etre supprime quand tout sera en v2 (en attendant, sert corriger l'affichage pour la v1 suite a v2)*/
/*pour bloc aide pour debutant*/

#fondDePageSombre {
	display:none;
	background-color: rgba(53, 59, 74, 0.97);
	top: 0; left:0; position: fixed; width: 100%; height: 100%;
	z-index: 200;
}

#zoneAidePage {
	margin-top: 20px;
	text-align: center;
}
#zoneAidePage .zone_div {
	display: inline-block;
}
#zoneAidePage .zone_div.au1erPlan { /*zone d'aide toujorus viisble (mais quand animation de l'ai aide pour la masquer => le met en 1er plan - par-dessus fondDePageSombre - pour bien le voir)*/
	/*background-color: white;*//*pas utile si dessin avec contour blanc*/
	position: relative;
	z-index: 201;  /*au-dessus de fondDePageSombre*/
}
#zoneAidePage .zone_div svg {
	width:128px; /* divise par 2,5 l'original (320/2,5 = 128)*/
	height:108px;  /* (270/2,5 = 108)*/
}
/*menu basique de l'aide pour debutant*/
.aideDebutants {
	text-align: center;
	-moz-osx-font-smoothing: grayscale; /*astuce non standard pour FF (car pb aliasing dans FF)*//*source: https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth */
}
.aideDebutants > .zone_div {
	display: inline-block;
	text-align: left;  line-height: 1.4em;
	/*top:0px;*/  /*height: 7em;*/
	/*-webkit-transition-property: height;  -webkit-transition-duration: 1s;*/
	/*-webkit-transition-property: all;  -webkit-transition-duration: 1s;
	background-color: red;
	width:100%;  max-width: 320px;*/  /*width pour avoir une largeur defini et ainsi l'animation lors du masquage de l'aide pourra se faire*/
	background-color: #FFF;
	margin: 3px 0px 19px 0; /*marge du bas + grand. Est corrigee seolon page (ex: fondPageRecherche)*/
	padding: 7px;
	border-radius: 4px;
}
.aideDebutants > .zone_div .titre {
	font-weight: bold;
	margin:0;  margin-bottom: 4px;
}
.aideDebutants > .zone_div ul {
	text-align: left;
	margin: 0;  padding: 0;
	list-style-type: none ;
}

.aideDebutants > .zone_div .txt_lienBouton.texteDiscret {
	opacity: 0.5;  /*pour que ce soit quand-meme visible sur appareil tactile*/
	-webkit-font-smoothing: antialiased;

	/*-webkit-transition-property:	opacity;
	-moz-transition-property:		opacity;
	-ms-transition-property:		opacity;
	-o-transition-property:			opacity;
	transition-property:			opacity;

	-webkit-transition-duration:	0.5s;
	-moz-transition-duration:		0.5s;
	-ms-transition-duration:		0.5s;
	-o-transition-duration:			0.5s;
	transition-duration:			0.5s;
*/
	font-weight:normal;
}
.aideDebutants > .zone_div:hover .txt_lienBouton.texteDiscret {
	opacity: 1;
}
.txt_lienBouton.discret {
	Xcolor:#CCC;
}


/*animation pour faire disparaitre la zone d'aide vers le menu (pour savoir où il se cache)*/
.aideDebutants > .zone_div.masquer
, .aideCompleteDebutants.masquer  {
	-webkit-transition-property:	all;
	-moz-transition-property:		all;
	-ms-transition-property:		all;
	-o-transition-property:			all;
	transition-property:			all;

	-webkit-transition-duration:	1s;
	-moz-transition-duration:		1s;
	-ms-transition-duration:		1s;
	-o-transition-duration:			1s;
	transition-duration:			1s;

	border: 2px solid #0095dc;
	border-radius: 100px;
	width: 17px !important;
	height: 17px;
	overflow:hidden;
	/*position:absolute;*/
	top: 280px;
	/*left: 3px;
	top:120px;*/
	z-index:101;
}

/* aide complete pour debutant : */
.aideCompleteDebutants {
	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; /*la largeur de l'element incluera les bordures et padding*/

	display:none;
	/*text-align: center;  margin: auto;*/
	/*positionne par dessus le reste*/
	/*background-color: rgba(53, 59, 74, 0.62);*/ /*assombri le fond de page*/
	z-index: 201;
	/*top:0;  position: absolute;
	width: 100%;*/

	/*height: 100%;  overflow-y: scroll;*/ /*permet de faire défiler le contenu sans que le contenu de l'aide soit + haut que la hauteur de la page*/ /*pas ok sous iOS*/

	padding: 5px ;

	-webkit-transition:	all 0.2s ;
	-moz-transition:	all 0.2s ;
	-ms-transition:		all 0.2s ;
	-o-transition:		all 0.2s ;
	transition:			all 0.2s ;

}
.aideCompleteDebutants > .contenu { /*contenu direct enfant de aideCompleteDebutants*/
	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; /*la largeur de l'element incluera les bordures et padding*/

	display:inline-block;
	text-align:left;
	padding: 10px 10px;
	background-color: #FFF;
	/*border: 3px solid #771CC9;*/ /*violet*/
	border-radius: 10px;

	max-width: 800px;
	width:auto;
	/*margin:5px;*/

	/*height: 100%;  overflow-y: scroll;*/ /*pas ok sous iOS*/


	font-size: 1.1em; /*grossi un peu toute l'aide*/
	line-height: 1.4em;
	color:#857f96;/*texte violet/gris clair par defaut*/
}
.aideCompleteDebutants h1 {
	font-size: 1.4em;  line-height: 1.0em;
	margin: 0px;  padding: 8px 0; /*evite petit saute d'animation quand on masque/affiche le  ul  du dessous*/
	color:#0095dc; /*bleu*/

	/*pour aller jusqu'aux bords*/
	margin-left: -10px; 	margin-right: -10px;
	padding-left:10px;	padding-right:10px;

	-webkit-transition-property:	background-color , color;
	-moz-transition-property:		background-color , color;
	-ms-transition-property:		background-color , color;
	-o-transition-property:			background-color , color;
	transition-property:			background-color , color;

	-webkit-transition-duration:	0.5s;
	-moz-transition-duration:		0.5s;
	-ms-transition-duration:		0.5s;
	-o-transition-duration:			0.5s;
	transition-duration:			0.5s;
}
.aideCompleteDebutants h1 span:first-child { /*le picto devan tle titre*/
	display: inline-block;
	margin-right: 5px;
	line-height: 0.35em;
	font-size: 2em;
	float: left;
}

.aideCompleteDebutants h1:hover
, .aideCompleteDebutants h1.actif {
	background-color: #0095dc; /*bleu*/
	color: yellow;
	cursor:pointer;
}
.aideCompleteDebutants h1.actif {
	color: #FFF;
}
.aideCompleteDebutants h1.actif span:first-child {
	color: yellow;
}


.aideCompleteDebutants ul.liste_niv1 {
	list-style-type: decimal;
	margin: 0px;
	display:none;/*non visible par defaut*/
}
.aideCompleteDebutants ul.liste_niv1 h2 {
	color: #771CC9; /*violet*/
	font-size:1.2em;
	font-weight:normal;
	margin-bottom:4px;  margin-top:4px;
}
.aideCompleteDebutants ul.liste_niv2 {
	list-style-type: square;
}

.aideCompleteDebutants ul li {
	margin-bottom: 1em;
}
.aideCompleteDebutants ul.liste_niv2 li {
	margin: 0.2em 0em;
}

.aideCompleteDebutants ul.liste_niv1 > li
, .aideCompleteDebutants strong  {
	-webkit-transition-property:	color;
	-moz-transition-property:		color;
	-ms-transition-property:		color;
	-o-transition-property:			color;
	transition-property:			color;

	-webkit-transition-duration:	0.5s;
	-moz-transition-duration:		0.5s;
	-ms-transition-duration:		0.5s;
	-o-transition-duration:			0.5s;
	transition-duration:			0.5s;

}
.aideCompleteDebutants ul.liste_niv1 > li:hover {
	color:#3b0e64; /**violet/noir sombre*//*colorise le texte au survol pour + le contraster*/
}
.aideCompleteDebutants strong {
	color:#88829a; /*violet/gris (#857f96) clair mais legerement + de contraste*/
	font-size:1.1em;
}
.aideCompleteDebutants strong.enValeur {
	color:#88829a;
	font-size:1.1em;
}
.aideCompleteDebutants ul.liste_niv1 > li:hover strong {
	color:#000;
}
.aideCompleteDebutants ul.liste_niv1 > li:hover strong.enValeur {
	color:#771CC9;
}

.aideCompleteDebutants .attenuer { /*ex: pour texte entre parenthese)*/
	color:#aba3c1;/*texte violet/gris clair par defaut*//*pour pas trop charger visuellement*/
}

.aideCompleteDebutants ul p {
	margin: 0;
	margin-top:0.5em;
}


#zone_imageAide1 { /*zone image aide avec bulle info par-dessus*/
/*text-align:center;*/
	margin-left:-37px;
	margin-top:-20px; /*passe par-dessus phrase :  Touchez l'image pour afficher les bulles d'aides */
	margin-bottom:-13px; /*se reppoche du bas car si bulle d'aide affichee au survol, on a beaucoup de blanc*/
}
#zone_imageAide1
, #imageAide1_normal
, #imageAide1_survol {
	width: 448px; height: 532px; /*force largeur*/
}
#imageAide1_survol {

	-webkit-transition-property:	opacity;
	-moz-transition-property:		opacity;
	-ms-transition-property:		opacity;
	-o-transition-property:			opacity;
	transition-property:			opacity;

	-webkit-transition-duration:	0.5s;
	-moz-transition-duration:		0.5s;
	-ms-transition-duration:		0.5s;
	-o-transition-duration:			0.5s;
	transition-duration:			0.5s;
}
#imageAide1_survol.actifAuSurvol {
	opacity:0;
}
#imageAide1_survol.actifAuSurvol:hover
, #imageAide1_survol.actifAuClick {
	opacity:1;
	transition-duration:		1.2s; /*ralenti pour afficher*/
}


.aideDebutants > .zone_div ul li { /*vibration rapide des li*/
-webkit-animation: vibration 8s infinite ;  /*ajouter  infinite  pour animer en boucle*/
   -moz-animation: vibration 8s infinite ;
    -ms-animation: vibration 8s infinite ;
     -o-animation: vibration 8s infinite ;
        animation: vibration 8s infinite ; /*1juin2016: l'animation fait bugguer le menu sous Chrome (le menu horizontal fixed ne defile que par a coup et encore !) : resolu via astuce sur l'element fixed : Cf classe bug_fixed*/
}
.aideDebutants > .zone_div ul li:hover {  /*interrompt l'aniamtion si survol du li*/
-webkit-animation: none ;
   -moz-animation: none ;
    -ms-animation: none ;
     -o-animation: none ;
        animation: none ;
}
/*fait demarrer l'animation en decalage pour chaque li*/
.aideDebutants > .zone_div ul li:nth-child(1) { /*le 1er (ici, ne commence pas a 0)*/
	-webkit-animation-delay: 0.3s;
	   -moz-animation-delay: 0.3s;
	    -ms-animation-delay: 0.3s;
	     -o-animation-delay: 0.3s;
	        animation-delay: 0.3s;
}
.aideDebutants > .zone_div ul li:nth-child(2) {
	-webkit-animation-delay: 0.5s;
	   -moz-animation-delay: 0.5s;
	    -ms-animation-delay: 0.5s;
	     -o-animation-delay: 0.5s;
	        animation-delay: 0.5s;
}
.aideDebutants > .zone_div ul li:nth-child(3) {
	-webkit-animation-delay: 0.7s;
	   -moz-animation-delay: 0.7s;
	    -ms-animation-delay: 0.7s;
	     -o-animation-delay: 0.7s;
	        animation-delay: 0.7s;
}

#pictoAideAnimation {
	display: none;
	/*display: inline-block;*/
	position: fixed;
	/*padding: 10px; width: 40px;  height: 40px; font-size: 2.5em; line-height: 1.25em; */ /**avant v2 :*/
	padding: 4px; width: 66px; height: 66px; font-size: 3.5em; line-height: 1.2em;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;  /*pour v2 mais que si avec borderBox => ajout ci-apres :*/



	z-index: 202; /*par-dessus  #zoneAidePage .zone_div  , lui-meme par-dessus  fondDePageSombre*/
	background-color: #FFF;

	-webkit-transition-property:	top , left , width, height, padding, font-size , line-height;  /*pas  all  sinon fadeIn/Out slideUp/Down,... (en JQuery) seron perturber pour l'animation*/
	-moz-transition-property:		top , left , width, height, padding, font-size , line-height;
	-ms-transition-property:		top , left , width, height, padding, font-size , line-height;
	-o-transition-property:			top , left , width, height, padding, font-size , line-height;
	transition-property:			top , left , width, height, padding, font-size , line-height;

	-webkit-transition-duration:	1s;
	-moz-transition-duration:		1s;
	-ms-transition-duration:		1s;
	-o-transition-duration:			1s;
	transition-duration:			1s;

	border-radius: 100px;
	text-align: center;
	background-color: #FFF;
	left: 50%;
	margin-left: -30px; /* 30px = width + padding*2 / 2 */
	bottom: 50%;
	margin-top: -30px;


}
#pictoAideAnimation span {
	border: 2px solid #0095dc;
	border-radius: 100px;
	width:100%;
	height:100%;
	display: inline-block;
	/*margin:-2px;*//*juin2016: avant v2*/
	color: #0095dc;
	font-weight: bold;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;  /*pour v2 mais que si avec borderBox => ajout ci-apres :*/
}
#pictoAideAnimation.reduit  /*pour l'animation*/
{ /*meme bulle mais dans la zone aide du bas (+ simple de separer celle pour l'animation)*/
	font-size: 1.3em;
	line-height: 1em;
	/*width: 16px; height: 16px; padding: 3px;*/ /*juin2016: avant v2 :*/
	width: 27px; height: 27px; padding: 3px  3px  3px  3px;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;  /*pour v2 mais que si avec borderBox => ajout ci-apres :*/
}

#pictoAideAnimation.masquer { /*pas utilise*/
	width: 16px; height:16px;  padding:2px;
	bottom:30px;
	font-size: 1.2em;  	line-height: 1em;
	border-width: 1px;
	margin-left: -10px; /* 10px = width + padding*2 / 2 */
	margin-top: -10px;
	/*poru mieux voir si pas utilise :*/
		background-color:red;
		width: 66px;
		display:block;

	/*
-webkit-animation: ranger_pictoAideAnimation 2s ;
   -moz-animation: ranger_pictoAideAnimation 2s ;
    -ms-animation: ranger_pictoAideAnimation 2s ;
     -o-animation: ranger_pictoAideAnimation 2s ;
        animation: ranger_pictoAideAnimation 2s ;
		*/
}

#zoneAidePage .bulle {
	display:none;
	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; /*la largeur de l'element incluera les bordures et padding*/

	border: 2px solid #771CC9; /*violet*/
	border-radius: 100px;
	color: #771CC9;
	font-weight: bold;
	/*adapte pour etre le + proche de  pictoAideAnimation.reduit  */
	font-size: 1.1em;
	line-height: 0.9em;
	/*font-size: 1.1em; width: 20px; height: 20px; padding: 3px;*/ /*juin2016: avant v2 :*/
	font-size: 1.3em; width: 21px; height: 21px; padding: 1px 3px 3px 4px;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;  /*pour v2 mais que si avec borderBox => ajout ci-apres :*/


	/*en relative mais occupe espace => pb quand display:none*/
	/*position: relative;
	top:22px;
	left:50px;*/
	/*en absolute, j'utilie margin pour bien position (et pas left/top car par rapport a la page)*/
	position: absolute;
	margin-left:54px;
	margin-top:5px;
}

#zoneAidePage .zone_div:hover {
	cursor:pointer;
}

#zoneAidePage .zone_div:hover .bulle {
	border-color: #0095dc; /*bleu*/
	color: #0095dc;
}



.fondPageRecherche .aideDebutants {
	float: right;
	margin-right:3px;
}
.fondPageConnexion .aideDebutants {
	margin-left: 65px;  /*pour quasi-centrer comme la zone de connexion qui est quasi-centree*/
}
.fondPageConnexion .aideDebutants .zone_div {
	margin-bottom:0px;  /*car la zone en-dessous met deja une marge*/
}
#laPage #zoneAidePage { /*page accueil*/
	margin-top:0px; /*amrge au-dessu ap sutiel car deja marge de l'element au-dessus*/
}








/* * * ANIMATION * * */





  #zoneAidePage.dort .zone_div:hover svg #oreille-gauche-levee
{  /*si chat dort => au survol, bouge oreille et moustache*/
	display:inline;
}
  #zoneAidePage.dort .zone_div:hover svg #oreille-gauche-rabattue
{  /*si chat dort => au survol, bouge oreille*/
	display:none;
}

  #zoneAidePage.dort .zone_div svg #moustache-zone-droite:hover #moustache-droite-normale
, #zoneAidePage.dort .zone_div svg #moustache-zone-gauche:hover #moustache-gauche-normale
{  /*si chat dort => au survol d'une moustache, on la releve*/
	display:inline;
}
  #zoneAidePage.dort .zone_div svg #moustache-zone-droite:hover #moustache-droite-pendante
, #zoneAidePage.dort .zone_div svg #moustache-zone-gauche:hover #moustache-gauche-pendante
{  /*et on masque celle qui etait pendante*/
	display:none;
}


#zoneAidePage.ecoute .zone_div svg #queue-levee
{
-webkit-transform-origin: 180px 250px ;  /*position par rapport au coin superieur gauche du svg (en pixels par rapport au format original du fichier - 320x270px - soit valeur souhaitee multipliee par 2,5)*/
   -moz-transform-origin: 180px 250px ;
    -ms-transform-origin: 180px 250px ;
     -o-transform-origin: 180px 250px ;
        transform-origin: 180px 250px ;

-webkit-animation: queue_oscillante 2s linear 1s ;    /*a l'affichage de la page, bouge un peu*//*1re seconde = duree, 2e = delay*/
   -moz-animation: queue_oscillante 2s linear 1s ;
    -ms-animation: queue_oscillante 2s linear 1s ;
     -o-animation: queue_oscillante 2s linear 1s ;
        animation: queue_oscillante 2s linear 1s ;

	/*-webkit-transform: rotateY(0deg) rotateZ(-0deg);*/
}


#zoneAidePage.ecoute .zone_div:hover svg #queue-levee
{  /*au survol du chat, il bouge un peu legerement queue*/

-webkit-animation: queue_oscillante 6s linear 0s infinite ;  /*ajouter  infinite  pour animer en boucle*//*1re seconde = duree, 2e = delay*/
   -moz-animation: queue_oscillante 8s linear 0s infinite ;
    -ms-animation: queue_oscillante 8s linear 0s infinite ;
     -o-animation: queue_oscillante 8s linear 0s infinite ;
        animation: queue_oscillante 8s infinite ;
}


@-webkit-keyframes queue_oscillante  { /*oct2015 - remet legerement la queue*/
	0% {-webkit-transform: rotateY(0deg) rotateZ(0deg);
		   -moz-transform: rotateY(0deg) rotateZ(0deg);
			-ms-transform: rotateY(0deg) rotateZ(0deg);
			 -o-transform: rotateY(0deg) rotateZ(0deg);
				transform: rotateY(0deg) rotateZ(0deg);
	}
	33% {-webkit-transform: rotateY(30deg) rotateZ(-1deg) scale(1 , 0.93);
		   -moz-transform: rotateY(30deg) rotateZ(-1deg) scale(1 , 0.93);
			-ms-transform: rotateY(30deg) rotateZ(-1deg) scale(1 , 0.93);
			 -o-transform: rotateY(30deg) rotateZ(-1deg) scale(1 , 0.93);
				transform: rotateY(30deg) rotateZ(-1deg) scale(1 , 0.93);
	}
	66% {-webkit-transform: rotateY(-30deg) rotateZ(4deg) scale(1 , 1.07);
		   -moz-transform: rotateY(-30deg) rotateZ(4deg) scale(1 , 1.07);
			-ms-transform: rotateY(-30deg) rotateZ(4deg) scale(1 , 1.07);
			 -o-transform: rotateY(-30deg) rotateZ(4deg) scale(1 , 1.07);
				transform: rotateY(-30deg) rotateZ(4deg) scale(1 , 1.07);
	}
	100% {-webkit-transform: rotateY(0deg) rotateZ(0deg);
		   -moz-transform: rotateY(0deg) rotateZ(0deg);
			-ms-transform: rotateY(0deg) rotateZ(0deg);
			 -o-transform: rotateY(0deg) rotateZ(0deg);
				transform: rotateY(0deg) rotateZ(0deg);
	}
}
@keyframes queue_oscillante  { /*idem sans prefixe*/
	0% {-webkit-transform: rotateY(0deg) rotateZ(0deg);
		   -moz-transform: rotateY(0deg) rotateZ(0deg);
			-ms-transform: rotateY(0deg) rotateZ(0deg);
			 -o-transform: rotateY(0deg) rotateZ(0deg);
				transform: rotateY(0deg) rotateZ(0deg);
	}
	33% {-webkit-transform: rotateY(30deg) rotateZ(-1deg) scale(1 , 0.93);
		   -moz-transform: rotateY(30deg) rotateZ(-1deg) scale(1 , 0.93);
			-ms-transform: rotateY(30deg) rotateZ(-1deg) scale(1 , 0.93);
			 -o-transform: rotateY(30deg) rotateZ(-1deg) scale(1 , 0.93);
				transform: rotateY(30deg) rotateZ(-1deg) scale(1 , 0.93);
	}
	66% {-webkit-transform: rotateY(-30deg) rotateZ(4deg) scale(1 , 1.07);
		   -moz-transform: rotateY(-30deg) rotateZ(4deg) scale(1 , 1.07);
			-ms-transform: rotateY(-30deg) rotateZ(4deg) scale(1 , 1.07);
			 -o-transform: rotateY(-30deg) rotateZ(4deg) scale(1 , 1.07);
				transform: rotateY(-30deg) rotateZ(4deg) scale(1 , 1.07);
	}
	100% {-webkit-transform: rotateY(0deg) rotateZ(0deg);
		   -moz-transform: rotateY(0deg) rotateZ(0deg);
			-ms-transform: rotateY(0deg) rotateZ(0deg);
			 -o-transform: rotateY(0deg) rotateZ(0deg);
				transform: rotateY(0deg) rotateZ(0deg);
	}
}


@-webkit-keyframes queue_penche { /*oct2015 - pas utilise mais pourrait etre utile*/
	0% { -webkit-transform: rotateX(0deg);
		   -moz-transform: rotateX(0deg);
			-ms-transform: rotateX(0deg);
			 -o-transform: rotateX(0deg);
				transform: rotateX(0deg);
	}
	50% { -webkit-transform: rotateX(20deg);
		   -moz-transform: rotateX(20deg);
			-ms-transform: rotateX(20deg);
			 -o-transform: rotateX(20deg);
				transform: rotateX(20deg);
	}
	100% { -webkit-transform: rotateX(0deg);
		   -moz-transform: rotateX(0deg);
			-ms-transform: rotateX(0deg);
			 -o-transform: rotateX(0deg);
				transform: rotateX(0deg);
	}
}


@-webkit-keyframes vibration { /*pourcentage tres proche pour faire rapidement entre 15 et 20 %. Reste du temps : pause. Le tout durant 8s (defini avant)*/
	15% {-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	15.5%, 16% {-webkit-transform: scale(1) rotate(-3deg);
				   -moz-transform: scale(1) rotate(-3deg);
					-ms-transform: scale(1) rotate(-3deg);
					 -o-transform: scale(1) rotate(-3deg);
						transform: scale(1) rotate(-3deg);
	}
	16.5%, 17.5%, 18.5%, 19.5% {-webkit-transform: scale(1) rotate(3deg);
								   -moz-transform: scale(1) rotate(3deg);
									-ms-transform: scale(1) rotate(3deg);
									 -o-transform: scale(1) rotate(3deg);
										transform: scale(1) rotate(3deg);
	}
	17%, 18%, 19% {-webkit-transform: scale(1) rotate(-3deg);
					   -moz-transform: scale(1) rotate(-3deg);
						-ms-transform: scale(1) rotate(-3deg);
						 -o-transform: scale(1) rotate(-3deg);
							transform: scale(1) rotate(-3deg);
	}
	15.5% {-webkit-transform: scale(1) rotate(0);
			   -moz-transform: scale(1) rotate(0);
				-ms-transform: scale(1) rotate(0);
				 -o-transform: scale(1) rotate(0);
					transform: scale(1) rotate(0);
	}
	20% {-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
@keyframes vibration { /*idem sans prefixe*/
	15% {-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	15.5%, 16% {-webkit-transform: scale(1) rotate(-3deg);
				   -moz-transform: scale(1) rotate(-3deg);
					-ms-transform: scale(1) rotate(-3deg);
					 -o-transform: scale(1) rotate(-3deg);
						transform: scale(1) rotate(-3deg);
	}
	16.5%, 17.5%, 18.5%, 19.5% {-webkit-transform: scale(1) rotate(3deg);
								   -moz-transform: scale(1) rotate(3deg);
									-ms-transform: scale(1) rotate(3deg);
									 -o-transform: scale(1) rotate(3deg);
										transform: scale(1) rotate(3deg);
	}
	17%, 18%, 19% {-webkit-transform: scale(1) rotate(-3deg);
					   -moz-transform: scale(1) rotate(-3deg);
						-ms-transform: scale(1) rotate(-3deg);
						 -o-transform: scale(1) rotate(-3deg);
							transform: scale(1) rotate(-3deg);
	}
	15.5% {-webkit-transform: scale(1) rotate(0);
			   -moz-transform: scale(1) rotate(0);
				-ms-transform: scale(1) rotate(0);
				 -o-transform: scale(1) rotate(0);
					transform: scale(1) rotate(0);
	}
	20% {-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}

/*
@-webkit-keyframes ranger_pictoAideAnimation {
	100% { width: 17px; height:17px; bottom:30px; }
}
*/

/*FIN pour bloc aide pour debutant*/


/*animation du SVG (chat)*/
/*base (essayer de trier du haut vers le bas)*/
  #zoneAidePage.base svg #cercle-au-dessus-tete
, #zoneAidePage.base svg #cercle-sur-tete
, #zoneAidePage.base svg #oreille-gauche-levee
, #zoneAidePage.base svg #oreille-gauche-rabattue
, #zoneAidePage.base svg #yeux-ouvert
, #zoneAidePage.base svg #yeux-clos
, #zoneAidePage.base svg #bouche-neutre
, #zoneAidePage.base svg #bouche-pendante
, #zoneAidePage.base svg #moustache-droite-normale
, #zoneAidePage.base svg #moustache-droite-pendante
, #zoneAidePage.base svg #moustache-gauche-normale
, #zoneAidePage.base svg #moustache-gauche-pendante
, #zoneAidePage.base svg #queue-serpent
, #zoneAidePage.base svg #queue-levee
{
	display:none;  /*masque tout à la base*/
}

/*ecoute*/
  #zoneAidePage.ecoute svg #cercle-au-dessus-tete
, #zoneAidePage.ecoute svg #oreille-gauche-levee
, #zoneAidePage.ecoute svg #yeux-ouvert
, #zoneAidePage.ecoute svg #bouche-neutre
, #zoneAidePage.ecoute svg #moustache-droite-normale
, #zoneAidePage.ecoute svg #moustache-gauche-normale
, #zoneAidePage.ecoute svg #queue-levee
{
	display:inline; /*par rapport à la base, car on mettra toujours au moins 2 classes (ex: base + ecoute) */
}

/*dort*/
  #zoneAidePage.dort svg #cercle-sur-tete
, #zoneAidePage.dort svg #oreille-gauche-rabattue
, #zoneAidePage.dort svg #yeux-clos
, #zoneAidePage.dort svg #bouche-pendante
, #zoneAidePage.dort svg #moustache-droite-pendante
, #zoneAidePage.dort svg #moustache-gauche-pendante
, #zoneAidePage.dort svg #queue-serpent
{
	display:inline;
}


/*exception si je ne veux pas du cercle (ex: pour plutot afficher bulle aide)*/
  #zoneAidePage.sansCercle svg #cercle-au-dessus-tete
, #zoneAidePage.sansCercle svg #cercle-sur-tete
{
	display:none;  /*masque tout à la base*/
}




@media (max-width: 800px) { /* si trop etroit */

	.aideCompleteDebutants
	, .aideCompleteDebutants > .contenu
	{
		width:100%;
	}

}