@charset "utf-8";
/* CSS Document */



/*BUGS CONNUS*/
	/*2/*appel de l'appli PIE pour IE ATTENTION BUG:Fonction zoom sur IE7 décale tout, à corriger en créant les fonds, fonctionne sous IE8, a priori pas de fonction zoom sous lt IE7*/
		/*On peut essayer ça pour les dégradés : 	/* For Internet Explorer 5.5 - 7  : filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FDFCD7, endColorstr=#BAF57E); /* For Internet Explorer 8  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FDFCD7, endColorstr=#BAF57E)"; */

	
	/*3/*min-width, max-width, min-height et max-height n'étant pas reconnus par les versions antérieures à IE7, une solution javascript peut être utilisée, voir ici : http://www.alsacreations.com/tuto/lire/547-faire-un-site-pour-toutes-les-resolutions.html
	Cette solution permet de fixer une largeur si JS est désactivé et de définir une largeur maxi et mini sinon (1002 et pas 1000, juste pour que les 2 valeurs ne soient pas les mêmes, sinon, IE6 "fige"!!!), voici le code à placer dans le head :
	<!--[if lt IE 7]> 
<style type="text/css"> 
div { 
width: 770px; 
width: expression(document.body.clientWidth <= 602? "600px" : document.body.clientWidth >= 1002? "1000px" : "auto"); 
} 
</style> 
<![endif]--> 
	*/
	
/************************************************************************/
/*							PLACEMENT									*/
/************************************************************************/

* {margin:0;padding:0;}

html {
width:100%;
height:100%;
}

body {
width:100%;
height:100%;
position:absolute;
min-width:830px;
min-height:600px;
}

#fondfirst {height:100%;z-index:-2}

#entete {
width:90%;/*pour laisser l'accès à la scrollbar de "reference", le z-index la faisant passer par-dessus, on laisse le tout centré avec le left:5%*/
left:5%;
height:5%;
text-align:center;
z-index:3;
position:absolute;
/*top:0;
left:0;*/
}
#menu {

}

#reference {/*clip:rect(75px auto  auto  auto);*//*problème avec cette solution : ça coupe la scrollbar avec !!!*/
width:100%;
height:100%;
overflow:auto;
position:relative;
z-index:1
}

#contenu {
width:54%;
position:relative;
left:50%;
top:95px;
margin-left:-26.5%;/*légèrement décalé à droite lorsque qu'il n'y a pas de scrollbar, mais parfait pour petits écrans, au minimum, les bords touchent juste les petites images de menu, les grandes dépassent...*/
padding-bottom:152px;
}
#cache1 {position:absolute; top:0; width:98%;/*Penser à enlever 2% pour laisser place à la scrollbar*/ height:75px; background-image:url(../images/motif18.jpg);background-repeat:repeat; background-position:0 top; z-index:2}
#cache2 {position:absolute; bottom:0; width:98%;/*Penser à enlever 2% pour laisser place à la scrollbar*/ height:152px; background-image:url(../images/motif18.jpg);background-repeat:repeat; background-position:0 45%;z-index:2}

#pied {
width:98%;/*pour laisser l'accès à la scrollbar de "reference", le z-index la faisant passer par-dessus*/
left:0;
height:5%;
position:absolute;
bottom:0;
overflow:hidden;
z-index:4
}

#pied p, #entete p{
margin:0;
padding:0;
position:relative;
text-align:center;
}

#footer {text-align:right; position:absolute; width:50%;bottom:2px; right:0}
#footer a{font-size:0.7em;text-decoration: underline}


#Accueil,#NotreMaison,#Chambre,#Village,#Environs,#Activites,#ContactAcces {
	position:absolute;
	display:block;
	padding:0;
	margin:0;
	width:210px;
	height:152px;
	z-index:3;
}
#Accueil {left:0.2%;top:5%;background-position:left bottom
}
#NotreMaison {left:0.2%;top:35%;background-position:-210px bottom
}
#Chambre {left:8%;bottom:6%;background-position:-420px bottom
}
#Village {left:50%;bottom:1%;margin-left:-105px;background-position:-630px bottom
}
#Environs {right:8%;bottom:6%;background-position:-840px bottom;
	margin-right:5px/*pour équiliibrer*/
}
#Activites {right:0.2%;top:35%;background-position:-1050px bottom;
	margin-right:10px/*place pour la scrollbar*/
}
#ContactAcces { right:0.2%;top:6%;background-position:-1260px bottom;
	margin-right:10px/*place pour la scrollbar*/
}

.menu { 
	position:absolute;
	top:13px;
	left:15px;
	width:180px;
	height:126px;
}
.menu:active {width:210px;height:152px;top:0;left:0;}

.txtmenu {
	position:absolute;
	bottom:0;
	height:30px;/*ou 20%, cela permet d'avoir le même rendu sur grandes et petites vignettes*/
	margin:0;
	width:100%;
	text-align:center; 
}
h1{
	padding:15px 0 0 0;
}

#backintro {position:absolute;left:5px;bottom:2px;width:48px;height:24px}

#booknow {
		/*positionnement*/
	position:absolute;
	top:0;
	right:0;
	color: #A3051D;}


#booknow a:link, #booknow a:visited {text-decoration:none;color: #A3051D;}

#booknow img {position:relative;top:5px}
/************************************************************************/
/*						DEFINITION DES FONDS							*/
/************************************************************************/

			/*Fonds de tests*/
/*#html {background-color:#FFFF99}
#body {background-color:#000}
#menu {background-color:#FFF}/*
#entete {background-color:#00FFFF}/*
#h1 {background-color:#FFCCFF}/*
#reference {background-color:#00FF00}
#contenu {background-color:#FF0066}/*
#pied {background-color:#CC0066;}
#pied p, #entete p{background:#000}
#Accueil,#NotreMaison,#Chambre,#Village,#Environs,#Activites,#ContactAcces {background-color:#000}/*
.menu { background-color:#FF9933;}/*
.txtmenu {background-color:rgba(105,92,180,0.7)}
			/*FIN Fonds de tests*/
html {background-color:rgba(234,211,90,1); background-image:url(../images/motif18.jpg);background-repeat:repeat; background-size:auto 200%}/*le fond ne s'étend pas sous ie donc on le double en hauteur avec le dégradé dans l'autre sens pour ne pas voir de coupure lorsque le fond doit se répéter(d'où 200% pour garder le même aspect sous firefox), cela permet aussi de corriger le bas de page lorsqu'on doit scroller car à ce moment là, 100% de html n'est pas 100% de reference, ce dernier est plus grand, le fond se répète donc il y aurait coupure...*/
#fondfirst {background-image:url(../images/100_1423_motif18_v2.jpg);background-position: center top; background-repeat:no-repeat;background-size:auto 100%; background-attachment:fixed}/*ce fond serait trop volumineux en png, il faut donc replacer le fond choisi sur le fichier png avant de convertir l'ensemble en jpg. Attention, la hauteur à 100% est en lien avec la hauteur du fond à 200%!!!*/

			/*Sprite pour vignettes du menu*/
.backmenuact{background-image:url(../images/vignettes/sprite_all_v3.jpg);background-repeat:no-repeat;z-index:1}/*fond vignette menu actif*/
.menu {background-image:url(../images/vignettes/sprite_all_v3.jpg);background-repeat:no-repeat;}/*fond vignettes menus non actifs*/

#bienvenue {background-position:-0px -152px}
#bienvenue:hover, #bienvenue:focus {background-position:-0px top}
#bienvenue:active {background-position:-0px bottom}

#maison {background-position:-210px -152px;}
#maison:hover, #maison:focus {background-position:-210px top;}
#maison:active {background-position:-210px bottom}

#chbre {background-position:-435px -165px}
#chbre:hover, #chbre:focus {background-position:-435px -13px}
#chbre:active {background-position:-420px bottom}

#Chatenay {background-position:-630px -152px}
#Chatenay:hover, #Chatenay:focus {background-position:-630px top}
#Chatenay:active {background-position:-630px bottom}

#visites {background-position:-840px -152px}
#visites:hover, #visites:focus {background-position:-840px top}
#visites:active {background-position:-840px bottom}

#loisirs {background-position:-1050px -152px}
#loisirs:hover, #loisirs:focus {background-position:-1050px top}
#loisirs:active {background-position:-1050px bottom}

#reservez {background-position:-1260px -152px}
#reservez:hover, #reservez:focus {background-position:-1260px top}
#reservez:active {background-position:-1260px bottom}
			/*FIN Sprite pour vignettes du menu*/
			
.txtmenu {background-image:url(../images/1pxviolet70.png); background-repeat:repeat; border-radius:0 0 35px 35px;/*bords arrondis*/} /*/*background-color:rgba(105,92,180,0.7) pourrait suffir mais ne fonctionne pas sous ie!!!*/

#backintro {background-color:#00FFCC; background-image:url(../images/controlsperso.png); background-position:0 0}
#backintro:hover, #backintro:focus{ background-position:0 -24px; background-color:#CC0033;}


/************************************************************************/
/*						DEFINITION DES BALISES							*/
/************************************************************************/

body {font-family:"Comic sans MS",Tahoma,Arial,Geneva, Kalimati,sans-serif}


h1{
	font-family: 'AndyMTRegular',Andy,Chiller,Mistral,Haettenschweiler,Juice ITC,Abadi MT Condensed Extra Bold,Arial Narrow,Arial;
	font-size:3.5em;
	color: #8B3402;
		/*ombre texte*/
	text-shadow:2px 2px 2px #DC8D23, -1px -1px 1px rgba(254,227,1,0.8); /*(décalage horizontal/décalage vertical/niveau de flou/couleur)*/
	line-height:0.8em;
}

h1 span {
	font-size:0.3em;
	line-height:1em;
	display:block
}

@font-face {
    font-family: 'AndyMTRegular';
    src: url('../Fonts/Andy_MT/andy_mt-webfont.eot');
    src: url('../Fonts/Andy_MT/andy_mt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Andy_MT/andy_mt-webfont.woff') format('woff'),
         url('../Fonts/Andy_MT/andy_mt-webfont.ttf') format('truetype'),
         url('../Fonts/Andy_MT/andy_mt-webfont.svg#AndyMTRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h2{font-weight:normal;font-size:1.5em}
h2:first-letter {font-size:1.8em; padding-left:10px;color:#8B3402}

h3 {text-align:center;font-size:1.6em}

ul li{text-align:justify;list-style-type:none}
ol  li{ list-style-type:circle; margin-left:12%}

#pied span {position:absolute;bottom:5px;color:#8B3402;margin-left:60px}
a img {border:none}
#retourintro {text-decoration: none ;}

/************************************************************************/
/*						DEFINITION DES CLASSES							*/
/************************************************************************/
						
.backmenuact{color:#FFFFFF;font-size:1.6em;font-weight:900;}
		
.menu{text-decoration:none;color:#FFFFFF;font-size:1.4em;font-weight:800;}
.menu:link{color:#FFF}
.menu:visited{color:#FFF}
.menu:hover, .menu:focus {text-decoration:underline;color:#000}/*hover pour souris, focus pour tab*/

.lien{text-decoration:none;color:inherit}
.lien:link{color:inherit}
.lien:visited{color:inherit}
.lien:hover, .lien:focus {text-decoration:underline;color:#999}/*hover pour souris, focus pour tab*/

/*ombre box*/
.menu{
	-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.8),
						-2px -2px 0 rgba(255,255,255,0.4);
	-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.8),
					-2px -2px 0 rgba(255,255,255,0.4);
	box-shadow: 3px 3px 3px rgba(0,0,0,0.8),
				-2px -2px 0 rgba(255,255,255,0.4);
}

.txtmenu {
	font-family:"Bradley Hand ITC",Arial,Verdana, Myranda,Helvetica,sans-serif;
/*	border-radius:0 0 35px 35px;/*bords arrondis enlevés car a priori, le background du texte passe bien en-dessous de la balise a (son parent) est est donc automatiquement arrondi !!! Cela me permet de faire un box-shadow même sur les côtés*/
	-moz-border-radius:0 0 35px 35px;/*bords arrondis*//*laissé pour firefox 3.6, pas besoin pour firefox 5*/
	-webkit-border-radius:0 0 35px 35px;/*bords arrondis*//*Dans le doute, je le laisse ! */
/*	-moz-box-shadow: 0 -0.5px 0px rgba(148,157,82,0.9), 0 -1px 0px rgba(148,157,82,0.8), 0 -1.5px 0px rgba(148,157,82,0.7), 0 -2px 0px rgba(148,157,82,0.6), 0 -2.5px 0px rgba(148,157,82,0.5), 0 -3px 0px rgba(148,157,82,0.4), 0 -3.5px 0px rgba(148,157,82,0.3),0 -4px 0px rgba(148,157,82,0.3), 0 -4.5px 0px rgba(148,157,82,0.2), 0 -5px 0px rgba(148,157,82,0.1); /*permet de faire un semblant de dégradé entre la photo et le texte des vignettes (peut-être remplacé par une image !!!)*/
	text-decoration:none;
}

.rond10 {/*Bords Arrondis*/
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.rond35 {/*Bords Arrondis*/
	-webkit-border-radius:35px;
	-moz-border-radius:35px;
	border-radius:35px
}


/************************************************************************************************************************/
/*										***	FIN	DES DEFINITIONS GENERALES***											*/
/************************************************************************************************************************/



/********************************************OUTILS***************************************************/

		/*ombre texte*/
/*	text-shadow:0px 1px 0px rgba(255,255,255,0.2); /*(décalage horizontal/décalage vertical/niveau de flou/couleur)*/
/*	filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=1); /*ie   Direction: 0=haut, 45=haut droite, 90=droite, 135=bas droite, 180=bas, 225=bas gauche, 315=haut gauche.*/
		/*dégradé en fond*/
/*	background: -webkit-gradient(linear, left top, left bottom, from(#FDFCD7), to(#BAF57E));      
	background: -moz-linear-gradient(top, #555, #2C2C2C); 	
	-pie-background: linear-gradient(#555, #2C2C2C);
	background: linear-gradient(#FDFCD7, #BAF57E);
		/*ombre box*/
/*	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5),
						0 -1px 0 rgba(255,255,255,0.4);
	-moz-box-shadow:0 0 5px rgba(0,0,0,0.5),
					0 -1px 0 rgba(255,255,255,0.4);
	box-shadow: 0 0 5px rgba(0,0,0,0.5),
				0 -1px 0 rgba(255,255,255,0.4);
		/**/

/************************************************************************************************************************/
/*								***	DEFINITIONS SPECIFIQUES A LA FEUILLE ACCUEIL	***									*/
/************************************************************************************************************************/

.contenuaccueil hr { clear:both; visibility:hidden}

#info{
	float:right;
	background-image:url(../images/1pxblanc65.png);
	background-repeat:repeat;
	margin-top:40%;
	padding:1%;
	text-align:center;
	max-width:45%;
}
#Tarifs h2 { text-align:center}

#Tarifs{
	float:left;
	background-image:url(../images/1pxblanc75.png);
	background-repeat:repeat;
	margin:1em 0 0 0;
	text-align:left;
	max-width:50%
}
#toprural-calendar{
position:absolute;
left:0;
}

.cache{visibility:hidden}

/************************************************************************************************************************/
/*							***	DEFINITIONS SPECIFIQUES A LA FEUILLE NOTRE MAISON	***									*/
/************************************************************************************************************************/
.logopano { text-align:center; font-style:italic; font-size:0.8em; margin-top:20px}
.logopano img, .logopano span { vertical-align:middle; display:inline-block; margin-bottom:40px}

/************************************************************************************************************************/
/*							***	DEFINITIONS SPECIFIQUES A LA FEUILLE VOTRE CHAMBRE	***									*/
/************************************************************************************************************************/
ul#listechambres {margin:0 auto; width:552px;overflow: hidden ;position:relative}
ul#listechambres li {
				float: left ;
				width: 135px ;
				border: 1px solid #600 ;
				margin-right: 1px ;
				color: #fff ;
				
				
				}
ul#listechambres li a {
				display: block ;
				color: #fff ;
				font: 1em "Trebuchet MS",Arial,sans-serif ;
				line-height: 1em ;
				padding: 4px 0 ;
				text-align: center ;
				text-decoration: none ;
				background-image:url(../images/1pxviolet70.png); background-repeat:repeat;
				}
ul#listechambres li a:hover, ul#listechambres li a:focus, ul#listechambres li a:active {
				background-color:#695CB4;
				text-decoration: underline ;
				}
.chambre { text-align:center; margin-top:20px}/*20px pour pouvoir cliquer facilement sur les boutons des chambres*/
.chambre p { font-style:italic;font-size:0.8em; color:#000; margin-bottom:-10px}
.chambre img {width:70%;background-color: #000000;border: 15px outset #A0A0A4;margin:15px auto}
/************************************************************************************************************************/
/*								***	DEFINITIONS SPECIFIQUES A LA PRESENTATION ENCADREE	***								*/
/************************************************************************************************************************/

/*************************************Présentation simple****************************************/
/*boites (cadres)*/
/*.simplecenter {margin-top:50px}*//*Attention:bug IE7 à cause de PIE.htc ; remplacé par un subterfuge nommé .ancre (voir ci-dessous)*/
.simpledr, .simplega , .simplecenter{
	overflow:hidden;
	margin-bottom:20px;
/*Bords Arrondis*/
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
	border-radius:15px;
/*ombre box*/
	-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2),
						-2px -2px 0 rgba(255,255,255,0.6);
	-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.2),
					-2px -2px 0 rgba(255,255,255,0.6);
	box-shadow: 3px 3px 3px rgba(0,0,0,0.2),
				-2px -2px 0 rgba(255,255,255,0.6);
}
.simpledr hr, .simplega hr, .simplecenter hr {clear:both;visibility:hidden; height:0;line-height:0;}

/*titres*/
.ancre { padding-top:90px; margin-top:-30px}/*au départ j'avais fait pointer les liens dans la page vers les "id" des titres h3, cela ne fonctionnait plus depuis que c'est la div "reference" qui scroll et pas "contenu", donc le titre était caché sous mon entête, j'ai donc mis un padding-top et margin équivalent, ce qui étend la div vers le haut donc sur les titres h3, cela modifiait la mise en forme du titre, sur une div contenant tout cela avec fond transparent, tout s'arrange !!! au départ réglés respectivement à 50px et -50px, ils ont été ramenés à 90px et -30px pour créer une marge entre chaque section et par de là supprimer le bug IE7 du au padding-top des boites aux bords arrondis.*/
.simplecenter h2 {text-align:center}
h2 + p{padding-top:15px}
.sstitre { background-color:#666666;}
dt {text-align:center; font-size:1.3em; font-weight:bold}
/*autres textes*/
.simpledr p:first-letter, .simplega p:first-letter, .simplecenter p:first-letter {padding-left:30px}
.simpledr p, .simplega p, .simplecenter p, .simpledr ul, .simplega ul, .simplecenter ul {margin:10px 10px 0 10px; text-align:justify;font-size:1em}
.liste li {margin-left:20px;list-style-type:disc}

/*arrondis images*/
.simpledr img {
	-webkit-border-radius:0 15px 15px 0;
	-moz-border-radius:0 15px 15px 0;
	clip-path: url(resources.svg#2dr);
	border-radius:0 15px 15px 0;
}
.simplega img {
	-webkit-border-radius:15px 0 0 15px;
	-moz-border-radius:15px 0 0 15px;
	clip-path: url(resources.svg#2ga);
	border-radius:15px 0 0 15px;
}
    /*clip-path: url(resources.svg#c1); /*utilise le fichier resources.svg (qui doit être placé dans le même répertoire que ce fichier), id c1, qui "clip" l'image ou la div visée par cette classe,
	permet de corriger le bug sous Firefox 3.5 et 3.6 et certaines anciennes versions d'opéra où le border-radius ne fonctionne pas ou mal
	(sous ff 3.6, les bordures sont arrondies, les div aussi, donc avec une image en background, on peut obtenir des arrondis, mais les images ne sont pas arrondies).
	Penser à ajouter xmlns:svg="https://www.w3.org/2000/svg" dans la définition de la balise html, ça fonctionne sans sous ff3.6 mais peut-être est-ce utile pour une meilleure compatibilité. Touts ces infos trouvées ici :
	http://www.boogdesign.com/b2evo/index.php/firefox-img-rounded-corners-svg?blog=2
	et ici :
	https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content
	filter: url(resources.svg#desaturate); ce code permet de faire une image en noir et blanc...*/
	/*BUG : Le problème, c'est que je n'ai pas trouvé comment définir les arrondis en pixels, ils sont définis en pourcentages et donc, plus l'image est grande et plus l'arrondi est grand,
	ce qui peut poser des soucis pour des grandes résolutions. Sachant aussi que les versions suivantes de ff tiennent compte du clip svg même si ils sont capables d'appliquer le border-radius et du coup,
	l'arrondi de l'image ne correspond pas avec l'arrondi "ombré". J'ai donc fixé à 0.04 le rayon (4%) pour que ça créé un arrondi toujours plus petit que 15px (ou presque !)*/
	
/*images seules*/
.simpledr dd > img {float:right; max-width:50%;margin: 0 0 -2px 10px; max-height:350px;}
.simplega dd > img {float:left; max-width:50%;margin: 0 10px -2px 0; max-height:350px;}

/* diapo */
/*Taille des photos : 335px X 335px Pour changer cette taille, penser à modifier TOUTES les photos et modifier le max-width ci-dessous en fonction*/
.simpledr .diap{float:right; width:40%;margin: 0 0 -2px 10px;max-width:335px;}
.simplega .diap{float:left; width:40%;margin: 0 10px -2px 0;max-width:335px;}
.simpledr .diap img {width:100%;/*Pour corriger le dépassement des images sans javascript*/}
.simplega .diap img {width:100%;/*Pour corriger le dépassement des images sans javascript*/}

/************************************************************************************************************************/
/*								***	DEFINITIONS SPECIFIQUES AUX RESEAUX SOCIAUX	***								*/
/************************************************************************************************************************/
.social_container{margin-bottom:300px; overflow:visible;}
.social{
float:left;
width:25%;
height:110px;
text-align:center;
margin-top:23px;
}

/************************************************************************************************************************/
/*								***	DEFINITIONS SPECIFIQUES AU DIAPORAMA FULL SCREEN	***								*/
/************************************************************************************************************************/

/*on place le bandeau des boutons*/
#boutons{
	position:absolute;
	top:5px;
	right:10px;
	z-index:10000
}
/*On définit les propriétés du bouton "close"*/
#close{
	display:block;
	width:18px;
	height:18px;
	background: url(/images/logos/close-button-sprite.png) 0 0 no-repeat;
}
/* on décale l'image de fond de la hauteur du lien, soit 18 px */ 
#close:hover,#close:active,#close:focus{ 
  background-position:0 -18px; 
} 
/* permet de cacher le texte du lien */ 
#close span{ 
  display:none; /*text gradient ??? */
} 

/************************************************************************************************************************/
/*								***	DEFINITIONS SPECIFIQUES A LA FEUILLE CONTACT ET ACCES	***							*/
/************************************************************************************************************************/
#googlemap {float:left; width:100%; margin-top:15px}
.contact {text-align:center;display:block;padding:3px}
/*.contact:first-child {float:left;margin-right:10px}*//*Le but était de n'utiliser que 2 lignes mais c'est pas super beau !...*/

/************************************************************************************************************************/
/*										***	DEFINITIONS SPECIFIQUES AU FOOTER	***										*/
/************************************************************************************************************************/
.ml p:first-letter {padding-left:0}
.ml h4 {margin-top:15px}

/***********************************************************************/
/*      Modifs pour traduction       */
/*******************************************************************/
#google_translate_element {height:16px;top:5px;position:absolute;}
#google_translate_element img {border:0;position:absolute;z-index:1;opacity:1;
		 -webkit-transition: all .5s ease;
			-moz-transition: all .5s ease;
			 -ms-transition: all .5s ease;
			  -o-transition: all .5s ease;
				 transition: all .5s ease;
				 transition:all .5s ease}
.goog-te-gadget {position:absolute;opacity:0;
		 -webkit-transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			 -ms-transition: all 0.5s ease;
			  -o-transition: all 0.5s ease;
				 transition: all 0.5s ease;
		transition-delay:.3s}
#google_translate_element:hover >img {z-index:-1;opacity:0} 
#google_translate_element:hover .goog-te-gadget {opacity:1}

html.translated-ltr body div#menu div#pied {bottom:40px} /*permet de relever la barre de menu du bas lorsque l'affichage de la barre de traduction la ferait baisser...*/
html.translated-ltr body div#menu ul li#Village {bottom:20px}/*même remarque pour la vignette "Le Village"*/
/*.skiptranslate ~ div#menu div#pied {bottom:40px} .skiptranslate ~ div#menu ul li#Village {bottom:20px} permettrait de conserver la barre du bas au bon niveau, même lorsqu'on clic sur "afficher original" mais lorsqu'on ferme la barre google translate, ça ne redescend pas : très laid...*/

/***********************************************************************/
/*      Modifs pour page bons-cadeaux       */
/*******************************************************************/
.floatleft {float:left;margin:10px}