    
<style type="text/css">
<!--
@charset "UTF-8";
html { margin:0; 
    height: 100%;}
body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #d6af91;;
	background-image: url(images/fond_index.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	/* ADAPTER L4IMAGE DE FOND A LA FENETRE DU NAVIGATEUR */
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover; /* version standardisée */
	font-size: 14px;
}
p {
}
ul {padding-left: 0px;
}

h1{
    font-size: 28px;
	padding: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
    color: #FFF;
    background-color: #d6af91;;
	margin-top: 5px;
	margin-bottom: 0px;
	}	
a {
    color: #FFF;
    background-color: #d6af91;;
	background-color: #d6af91;
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
}
a:visited {
    color: #FFF;
    background-color: #d6af91;;
	background-color: #d6af91;
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
}
a.calendrier_bouton_next  {
	border-radius: 5px; 
	padding: 5px; 
}
.calendrier_table{
    border-color: #d6af91;;
}
#menu_langue {
	float: left;
	width: auto;
	height: auto; 
	margin-left: 50px; 
	margin-top: 20px; 
}
#menu_langue a {
	width: 20px;
	height: 20px;
	padding: 5px;
	margin-right: 5px;
	font-weight: bold;
	text-decoration: none;
	color:#d6af91;;
	background-color: hsla(0,0%,100%,0.5);
	-moz-radius: 5px;
	border-radius: 5px;
	/*ombre fonctionne uniquement avec css3*/
	-moz-box-shadow: 2px 2px 10px #999;
	-webkit-box-shadow: 2px 2px 10px #999;
	box-shadow: 2px 2px 10px #999; /*ombre: decalage_droite decalage_bas taille_fondu couleur */
	border-right:solid 1px #333;
	border-bottom:solid 1px #333;
}
#menu_langue a:hover {
	width: 20px;
	height: 20px;
	padding: 5px;
	margin-right: 5px;
	font-weight: bold;
	color:#FFF;
	background-color: #b2835e;;
}
.active_langue {
	color:#FFF;
	background-color: #d6af91;;
}
	
#menu_top {
	position: fixed;
	z-index: 20;
	top: 0px;
	text-align: center;
	min-width: 1000px;
	/*background-image: url(images/fond_blanc_w32.png);*/
	margin-left: calc(50% - 500px);
	height: 100px; 
	/*padding-left: 200PX;
	background-origin:padding-box;*/
	background-color: hsla(0,0%,100%,0.5);
	background:linear-gradient(to left,
    rgba(0,0%,100%,0) 20%,
    rgba(0,0%,100%,0.5) 80%);
	background:linear-gradient(to left,
    rgba(255,255,255,0.5) 2%,
    rgba(255,255,255,0.5) 80%,
    rgba(255,255,255,0) 80%,
    rgba(255,255,255,0) 100%);
}
#main{
	position: fixed;
	padding-top: 20px;
	padding-bottom: 40px;
	padding-right: 40px;
	padding-left: 40px;
	margin-left: calc(50% - 368px);
	margin-top: 100px; 
	width: 100%;
	max-width: 787px; 
	min-width: 300px; 
	background-color: hsla(0,0%,100%,0.9);
	background-image: url(images/fond_blanc_w32.png);
	opacity: 1;
	-webkit-transition: opacity .6s ease-in-out;
	-moz-transition: opacity .6s ease-in-out;
	-o-transition: opacity .6s ease-in-out;
	-ms-transition: opacity .6s ease-in-out;
	transition: opacity .6s ease-in-out;
	overflow: auto;
	  height: 90%;                        /* para falta de suporte */  
	  height: -webkit-calc(90% - 100px);  /* para Chrome */
	  height: -moz-calc(90% - 100px);     /* para Firefox */
	  height: calc(90% - 100px);          /* para suporte nativo */
	text-align: left;
	
	}

#menu_top a {
	z-index: 20;
 	display:inline-block;
	vertical-align: top;
	text-align: center;
    width:100px;
    height:80px;
	padding: 10px;
	text-decoration: none;
    color: #FFF;
    background-color: #d6af91;;
	/*background-image: url(images/fond_bleu_w32.jpg);*/
}
#display_mobile_ok {display: none;}
	
@media screen and (max-width:1000px)
{
	#menu_top {
	display: none;	}
	#display_mobile_no{
	display: none;	}
	#display_mobile_ok{
	display: inline-block;
	width: 100%;
	/*background-image: url(images/fond_blanc_w32.png);*/
	/*background-color: hsla(0,0%,100%,0.5);
	background:linear-gradient(to left,
    rgba(0,0%,100%,0) 20%,
    rgba(0,0%,100%,0.5) 80%);
	background:linear-gradient(to left,
    rgba(255,255,255,0.5) 2%,
    rgba(255,255,255,0.5) 80%,
    rgba(255,255,255,0) 200px);*/
	}
	#menu_langue {
		margin-left: 5px; 
		margin-top: 10px; 
	}
	#display_mobile_ok #menu_langue{
	float: left;
	margin-left: 0px;
	display: inline-block;
	}

}
@media screen and (max-width:1000px)
{
	#main{
		margin-left: 0px;
		margin-right: 0px;
		margin-top: -20px; 
		width: calc(100% - 80px);
		max-width: calc(100% - 80px);
		padding-bottom: 20px;
		overflow:scroll;
		/*height: calc(100% - 20px);*/
		height: calc(100% - 100px);
		overflow: scroll;
		}
}
	
#colonne_babelouane{
	display: inline-block;
	width: 48%;
	vertical-align: top;
	margin-right: 3%
	}
#colonne_babargane{
	display: inline-block;
	width: 48%
	}

@media screen and (max-width:600px)
{
	#colonne_babelouane{
		width: 100%;
		display: block;
		}
	#colonne_babargane{
		margin-top: 60px;
		width: 100%;
		display: block;
		}
}

#div_bouton_menu_alpha_deroulant {
	display: none;
}
@media screen and (max-width:1000px)
{
	#div_bouton_menu_alpha_deroulant {
		display:inline-block;
		border: solid 1px #2434;
	}
}
@media screen and (min-width:1000px)
{
		#volet_menu_alpha_clos {
		display:none;
	}

}
	
#menu_top a:hover {
    color: #FFF;
	background-color: #b2835e;;
	background-image: none;
}
#menu_top .a_active {
	font-weight: bold;
    background-color: #b2835e;;
    /*background-color: hsla(0,0%,100%,0.7);*/
	/*background-image: url(images/fond_blanc_w32.png);*/
}
		/*VOLET_DEROULANT_DIV_MOBILE ////////////////////////////////////////////////////////////////////////*/
		#volet_menu_alpha { /* style du volet_menu_alpha */
			width: 300px;
            /*max-height: 400px;*/
			overflow:auto;
			padding: 10px;
			padding-bottom:30px;
			/*background: #999;*/
			/*background-image: url(images/bg_noir80pourcent.png);*/
			color: #fff;
			position: absolute;
			background-color: #FFF;
			-moz-radius: 0px 0px 8px 0px;
			border-radius: 0px 0px 8px 0px;/*coins arrondis border-radius: top-left top-right bottom-right bottom-left*/
			/*ombre fonctionne uniquement avec css3*/
			-moz-box-shadow: 4px 4px 15px #000000;
			-webkit-box-shadow: 4px 4px 15px #000000;
			box-shadow: 4px 4px 15px #000000; /*ombre: decalage_droite decalage_bas taille_fondu couleur */
			border-right:solid 1px #FFFFFF;
			border-bottom:solid 1px #FFFFFF;
		}
		#volet_menu_alpha li { /* style du volet_menu_alpha */
		margin: 10px;
    	font-size: 22px;
		}
		#volet_menu_alpha a { /* style du volet_menu_alpha */
		border-radius: 3px 3px 3px 3px;
		background-origin: border-box;background-size: cover;
		}
		/* style des BOUTONS ouvrir/fermer dans le volet_menu_alpha */
		#volet_menu_alpha a.ouvrir,
		#volet_menu_alpha a.fermer {  
			text-align:center;
        	padding:4px 8px 4px 8px;
			box-shadow:0px 1px 1px rgba(0,0,0,0.15);
			border-radius:3px;
			background:#FFF;
			text-shadow:0px 1px 0px rgba(0,0,0,0.5);
			color:#777;
			font-size:12px;
			text-decoration: none;
			position: absolute;
			right: 10px;
			top: 10px;
			/*-webkit-transform: rotate(270deg);*//*pivoter le bouton de 90° anti-horaire*/
			/*-moz-transform: rotate(270deg);
			-o-transform: rotate(270deg);
			-ms-transform: rotate(270deg);*/
			-moz-radius: 3px 3px 3px 3px;
			border-radius: 3px 3px 3px 3px;/*coins arrondis border-radius: top-left top-right bottom-right bottom-left*/
		}
		
		/* style quand le volet_menu_alpha est ouvert */
		#volet_menu_alpha { 
			left: -1000px;  /* mettre la largeur du volet_menu_alpha ou une valeur plus grande*/
			-webkit-transition: all .5s ease-in;
			-moz-transition: all .5s ease-in;
			transition: all .5s ease-in;
		}
		#volet_menu_alpha a.fermer {
			display: none;
		}
		#volet_menu_alpha:target {
			left: 20px;
		}
		/* code pour la fermeture */
		#volet_menu_alpha:target a.fermer {
			display: block;
		}
		#volet_menu_alpha:target a.ouvrir {
			display: none;
		}
		#volet_menu_alpha_clos:target #volet_menu_alpha {
			left: -350px;/* mettre la largeur du volet_menu_alpha ou une valeur plus grande*/
		}
		 /* test fixed + scroll */
		#volet_menu_alpha_clos { /* style quand le volet_menu_alpha est fermé */
			position: fixed; 
			top: 0px; left: -20px;
			z-index:100;/*Pour que le volet_menu_alpha s'affiche au dessus du reste*/
		}
		/*BOUTON EN DEHORS DU volet_menu_alpha---------------------------------*/
		#bouton_menu_alpha_deroulant a.ouvrir,
		#bouton_menu_alpha_deroulant a.fermer {  /* style des BOUTONS ouvrir/fermer dans le volet_menu_alpha */
			text-align:center;
        	padding:4px 6px 4px 6px;
			box-shadow:0px 1px 1px rgba(0,0,0,0.15);
			border-radius:3px;
			background-color: #d6af91;;
			/*background-image: url(images/fond_bleu_w32.jpg);*/
			text-shadow:0px 1px 0px rgba(0,0,0,0.5);
			color:#FFF;
			font-size:18px;
			text-decoration: none;
			/*-webkit-transform: rotate(270deg);*//*pivoter le bouton de 90° anti-horaire*/
			/*-moz-transform: rotate(270deg);
			-o-transform: rotate(270deg);
			-ms-transform: rotate(270deg);*/
			-moz-radius: 3px 3px 3px 3px;
			border-radius: 3px 3px 3px 3px;/*coins arrondis border-radius: top-left top-right bottom-right bottom-left*/
		}
		/*FIN BOUTON EN DEHORS DU volet_menu_alpha---------------------------------*/
#menu_left a{
font-size: 24px;
	display: block;
	padding-bottom: 10px;
	padding-top: 10px;
	background-color: #d6af91;;
	border-radius: 8px;
	margin-bottom: 10px;
	margin-top: 10px;
}
p {
    font-size: 14px;
	margin-bottom: 10px;
	margin-top: 5px;
	text-align: justify;
}
ul {
    font-size: 14px;
}
h2{
	display: inline-block;
    font-size: 18px;
	padding: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
    color: #FFF;
    background-color: #d6af91;;
	margin-top: 0px;
	margin-bottom: 5px;
	}	
h3{
	display: inline-block;
    font-size: 18px;
    color: #d6af91;;
	margin-top: 5px;
	margin-bottom: 2px;
	}	
#main .en{
	max-width: 666px; 
	}	

#main:target {
	opacity: 0;
}
.mettre_en_avant {
    color: #d6af91;;
	font-weight: bold;
}
.reserve {
    background-color: #d6af91;;
}
.no_reserve {}
#bouton_cadre a {
font-size: 18px;
	padding: 6px;
	border-radius: 4px;
}
	#content_txt h1 {
	background-color: transparent;
		color: #d6af91;;
		font-size: 34px;
		margin-left: 0px;
		padding-left: 0px;
	}
#diaporama_photos a  {
	background-color: transparent;
}
#div_chambre {margin-bottom: 10px;}
.chambre {
	background-color: #d6af91;;
	padding: 4px;
	color: white;
	
}
#tarifs h2  {
	margin-top: 20px;
	margin-bottom: 4px;
}
#tarifs h3  {
	margin-top: 0px;
}
</style>