* {
	font-family: Calibri,CenturyGothic,Helvetica, Arial, Geneva,"Myriad Pro",sans-serif;
}
html,body,header,footer,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,article,aside,nav,section ,caption{
	margin: 0;  /* marge exterieure */
	padding: 0; /* marge interieure */
	border: none; /* pas de bordure par défaut */
	/* outline: 0; est peu etre inutile ... fonction qui reste buggée sur certains navigateurs */
	font-size: 0.7 em; /*100%;*/ /*font-size: 0.7 em ; */
	vertical-align: baseline; /* alignement vertical du texte baseline est la valeur par defaut */
	list-style-type: none;   /* permet de specifier le type de liste */ 
}
h1,h2,h3,h4,h5,h6{ /*em,strong,caption  */
	font-size: 1em;
	font-weight: normal;
	font-style: normal;
}
header,section,footer  { /* a valider si on affiche tout sous forme de block #content_01,p,article,aside,section,img,div, */
	display: block;
}
html { /* a valider  le background va dependre de la page */
	/*background-image: url("Pictures/tn_DSC_5939.JPG");  */
	/*#614A3D ; marron foncé du debut *//*#675546 ;proche hotel *//*#4F422D; oceane*/ /*#917055 bouton menu  / /*#67574B; hotel*/ /*#2b241e; ancien */ /*#513D2B pas mal */
	min-height: device-height; /* hauteur du periphérique*/
}
.backgrnd_img_desc { /* fond d'écran sur la page description */
	background-image: url("../Pictures/DSC_5942_1600_1071.JPG");  
	background-repeat: no-repeat;  
	background-attachment: fixed;  
	background-position: 50% 50%;
	background-color: #675546 ;  /* couleur de fond */
	opacity: none ; /*0.92; */
}
.backgrnd_img_index { /* fond d'écran sur la page index */
	background-image: url("../Pictures/tn_DSC_5939.JPG"); 
	background-repeat: no-repeat;  
	background-attachment: fixed;  
	background-position: 50% 50%;	
	background-color: #675546 ;  /* couleur de fond */
	opacity:none ; /*0.92; */
}	
#global {
  margin: 0 auto;
  max-width:950px;
  background-color: #675546 ; /*#2b241e;*/
}
body {
margin:0; 
background-size: cover;  /* version standardisée  pour étirer l'image sur toute la page */;  
/*display : table;  /* sert à mettre le footer en bas de la page */
/*width: 95%; */
/*padding: 5em 2em 3em 3em;*/
}
header {
	max-width:950px; /*width:940px; max-width evite de rendre fixe */ /* a remonter sur une div regroupant header footer  body  */
	height: auto;
	min-height : 250px; /*a mettre toujours avec height... jamais seul */
	background-image : url("../Pictures/DSC_5834_900-250.jpg") ;
	background-repeat : no ;
	background-size: 100% 100% ; /*cover fonctionne aussi */
	/*background-color: #022777; bleu */
	/*background-color: #917055; marron clair */
	background-color: #675546 ; /*#2b241e;*/
	margin:0 auto;
	opacity : none; /* sur le header afin de rendre l'image en background plus nette  */ 
	position : relative;
	/*border: 1px solid black; pas de bordure */
	
}
footer {
	/*display : table-row; /* sert à mettre le footer en bas de la page mais attention la page ne sera pas référencée*/
	height: 4em; /*  */
	max-width:950px;
	/*background-color: #022777;*/
	/*background-color : #917055; */
	background-color:#2b241e;
	opacity:none; /*0.92*/
	/*border: 1px solid black; pas de bordure */
	margin:0 auto;
	clear:both ; /* tres important. evite de se positionner sur un element float du flux précedent */
}
section { /* ok */
	max-width:950px;
	height:auto;
	min-height : 100%;
	margin:0; 
	position:relative;
	background-color:  #675546 ; /*chocolat; */
	border: none; /*1px solid black;*/
	opacity:none; /*0.92;*/
	display : block;
    clear:both ; /* tres important. evite de se positionner sur un element float du flux précedent */
    /*min-height: 100px; idiot pour les images plus hautes que le texte , j'ai mis un color dans le conteneur global et unesection suit une autre section*/
}
h1 {
	color: #fff; /* blanc */
	padding: 20px 0 0 25px;
	font-size:36px;
	text-shadow: 2px 2px 2px #202020;
}
h2 {
	color: #fff; /* blanc */
	padding: 20px 0 0 25px;
	font-size:20px;
	text-shadow: 2px 2px 2px #202020;
}
h3 {
	color: #fff; /* blanc */
	padding: 1em 0 0 1em;
	font-size:1em;
	text-shadow: 2px 2px 2px #202020;
}
p{
	/*margin: 2px 0 3px 1px; *//* Marge extérieure 2 px de marge en haut, 0 px à droite (le px est facultatif dans ce cas), 3 px en bas, 1 px à gauche */
	/*margin: auto;*/ /* centrer le bloc avec auto */
	/*overflow: auto;*/
	text-align : justify;
	padding: 1em; /* Marge intérieure de 12px */
	word-wrap: break-word ; /* Couper les mots */
	opacity: none;
	/*font-size : 0.7 em;/*10 px; */
	font-weight : normal; 
	color: white ; /*couleur du texte */
	text-decoration: blink;
}
.souligne {
text-decoration: underline;
}
.barre {
text-decoration: line-through;
}
.ligne_dessus {
text-decoration: overline;
}
.droite {
margin-left:66%;
}
a, a:hover, a:active, a:visited { /* a valider */
	color: #fff;   /* laisser en blanc */
	text-decoration: none;
	cursor: pointer;
}
a:hover, a:active{ 
	/*color: #fff;   /* laisser en blanc */
	/*text-decoration: none; */
	background: #917055; 
	/*cursor: pointer;*/
}
.txtbottomright{/* texte  à afficher en bas à droite . ex dans le header  */
 position : absolute ; /*position absolute dans un block relative  */
 right : 0;
 bottom: 0;/*float : right;*/
 margin : 0em 1em 1em 1em;
 vertical-align: text-bottom; /* ne marche pas alignement sur les parties les plus basse */
}
img {
 /*responsive : empecher le débordement des images dans leur conteneur */
 max-width : 100%;
 height : auto;
}
.menu_actif { /*ok */
	background: #917055; 
}
/* style des tableaux */
table { /* balises de tableau  table caption tr th td thead tbody tfoot */
	/*border-collapse: collapse; pas d'espace entre 2 cellules*/
	border-spacing: 2px ;
	/*border-color : #fff ; sert à rien */
	margin:0 auto;
	background-color: #917055;
	opacity:1;
	box-shadow : 6px 6px 6px #2b241e;
}
caption { /* titre du tableau */
	color: #fff; /* blanc */
	padding: 2px 0 0 2px;
	font-size:16px;
	text-align: center;  
	text-shadow: 2px 2px 2px #202020;
	background-color: #917055;
	/*box-shadow : 6px 0px 6px #2b241e; comment afficher ombre sur le titre */
}
th { /* cellule d'entete */
	color: white; /* #fff; /* blanc */
	padding: 2px 0 0 2px;
	font-size:12px;
	text-align: center;  
	/*background-color: white;*/
}
td {   /* cellule */
	text-align: center;  
	margin-top: 2px;  
	margin-right: 2px;  
	margin-bottom: 2px;  
	margin-left: 2px;
	font-size:13px;
	color:white; /*#fff;*/
	/*background-color: white;*/
	border: thin solid #2b241e; /*marron foncé ; */
	padding : 2px 5px 2px 5px;
	border-spacing: 2px;  
    
  /*empty-cells: show;  
  border-collapse: collapse;  
  border-top-width: 2px;  
  border-right-width: 2px;  
  border-bottom-width: 2px;  
  border-left-width: 2px;  
  border-top-color: #fff;  
  border-right-color: #fff;  
  border-bottom-color: #fff;  
  border-left-color: #fff;*/
}
.resa_disponible {
	background-color: #33cc00;
	color: black;
}
.resa_reserve {  
	background-color: red;
	color: black;
}
.resa_aconfirmer {  
	background-color: yellow;
	color: black;
}
.description_img{ /* image affichée en float dans la description des pieces */
 position : relative ;
 float : left ;
 /*padding : 1em; en test trop gros*/
 margin : 1em; /*test car pb de débordement*/
}
.dispo_table{ /* tableau affichée en float dans la page tarif */
 position : relative ;
 float : right ;
 margin : 2em;
}
.petit_caractere {
 font-size:10px;	
}
	
/**************************/
/* style du menu dropdown */
/**************************/
.toggle, [id^=drop] {
 display: none;
}
nav {
  width: 100% ; 
  padding: 0;
  background : linear-gradient(to bottom, #917055 0%, #2b241e 100%) repeat scroll 0% 0% transparent;   /*quartz*/
  border-bottom: 2px solid #283744;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
nav ul {
  float: left; /* dh1 */
  padding: 0;
  margin: 0 auto; /* dh1 auto */
  list-style: none;
  position: relative;
}
nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  min-width : 190px;
  text-align: center;
}
nav a {
  display: block;
  padding: 0 5px;
  color: #FFF;
  font-size: 1em;/* 1.5em*/
  line-height: 40px; /* dh1 60 */
  text-decoration: none;
  /* bordure */
  border-right: 1px solid #576979;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
nav li:last-child a {
  border-right: 0;
}
nav a:hover {  /* tous les a sur hoover */
  box-shadow:inset 0 0 3px lightblue;
  background:radial-gradient(farthest-corner at 50% 100%,rgba(31,43,244,1) 0%,rgba(0,28,78,1) 100%);   /* bleu eu bleu foncé*/
  -webkit-box-reflect: below 0 linear-gradient(transparent 50%, rgba(0,0,0,.3)) /* reflet bleu sur chrome + opera */
}
nav ul ul { /* on n'affiche pas le niveau 2 */
  display: none;
  position: absolute;
}
nav ul li:hover > ul {  /* on affiche le niveau 2 si hover*/
  display: inherit; 
}
nav ul li:hover > ul a { /* magnifique une ombre bleue sous le bouton du niveau 1 */
  box-shadow:inset 0 0 3px lightblue;
  background:radial-gradient(farthest-corner at 50% 100%,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%); 
  /* bleu clair en dégradé */
  -webkit-box-reflect: below 0 linear-gradient(transparent 50%, rgba(0,0,0,.3)) /* reflet bleu sur chrome + opera */
  /*background:radial-gradient(farthest-corner at 50% 100%,rgba(91,171,38,1) 0%, rgba(0,77,9, 1) 100%)*/
  /* vert  à mettre en bleu clair */
}
nav ul li:hover > ul a:hover { /* oui cela marche bleu foncé sur hover niveau 2 */
  box-shadow:inset 0 0 3px lightblue;
  background:radial-gradient(farthest-corner at 50% 100%,rgba(31,43,244,1) 0%,rgba(0,28,78,1) 100%); /* bleu eu bleu foncé*/
  -webkit-box-reflect: below 0 linear-gradient(transparent 50%, rgba(0,0,0,.3)) /* reflet bleu sur chrome + opera */
}
nav ul ul li {/* affiche en vertical list item le niv 2 */
  width: 190px;
  float: none;
  display: list-item;
  position: relative;
}
nav ul ul ul li { /* affiche en vertical list item le niv 3  et on le decale à droite de son pere */
  position: relative;
  top: -40px; /* dh1 -60 */
  left: 190px;
}
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }

/**************************/
/* Media Queries          */
/**************************/
@media all and (max-width : 980px) {
nav { /* a valider */
  margin: 0; 
} 
.toggle + a, .menu { /* cache le menu si non selectionné */
  display: none; 
}
.toggle {
  display: block;
  border-bottom: 1px solid #576979;
  /*background-color: green ; /*#254441; /*gris #254441*/
  /*background : linear-gradient(to bottom, #917055 0%, #2b241e 100%) repeat scroll 0% 0% transparent;   /*quartz*/
  background : linear-gradient(rgb(145, 112, 85) 0%, rgb(43, 36, 30) 100%);   /* quartz dégradé */
  color: #FFF;
  font-size: 1em;
  line-height: 40px;
  text-decoration: none;
  /*border: none;*/
  padding: 0 0 0 1em;
}
[id^=drop]:checked + ul { /* affiche les ul si un drop est checked */ 
  display: block;
}
.toggle:hover { 
  background:radial-gradient(farthest-corner at 50% 100%,rgba(31,43,244,1) 0%,rgba(0,28,78,1) 100%);
  /* bleu eu bleu foncé*/
} 
nav ul li { /* affiche le nemu en vertical */
  display: block;
  width: 100%;
}
nav ul ul .toggle, nav ul ul a {
  padding: 0 40px; 
}
nav ul ul ul a {
  padding: 0 80px;
}
nav li a {
  border-bottom: 1px solid #576979;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
nav  li li .toggle,  nav ul ul a { /* laisse en bleu clair le niveau 2 si niv1 sélectionné */
background:radial-gradient(farthest-corner at 50% 100%,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%); /* bleu clair en dégradé */
}
nav ul ul { /* permet d'inserer les niveaux 2 entre 2 niveaux 1 verticaux */
  float: none;
  position: static;
  /*color: #ffffff;*/
}
nav ul ul li:hover > ul, nav ul li:hover > ul {
  display: none;
}
nav ul ul li { /* niv 2 s'affiche sur toute la largeur */
  display: block;
  width: 100%;
}
nav ul ul ul li { /* pas de decalage du niv 3 */
  position: static;
}
}


/***********************************************/
/* Test des fonctions du formulaire de contact */
/***********************************************/
#formulaire { 
	text-shadow:0 1px 0 #FFF; :/*blanc*/
	border-radius:8px;
	  -webkit-border-radius:8px;
	  -moz-border-radius:8px;
	background:#917055;
	padding:25px;
    box-shadow : 6px 6px 6px #2b241e;
    margin: 27px auto; /* 47 */
	max-width:480px; /*582*/
}
#formulaire_case label { 
	cursor:pointer;
	margin:1px 0; /*4px 0 */
	color: #fff; /* blanc */
	display:block;
	font-size:1em; /*font-weight:800;*/
	text-shadow: 2px 2px 2px #202020;
}
input { 
	display:block;
	width:90%;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	background-color:#f4f4f4;
	color:#000;
	border:1px solid #5f5f5f;
	padding:10px;
	margin-bottom:25px;
}
textarea { 
	display:block;
	width:90%;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	background-color:#f4f4f4;
	color:#000;
	border:1px solid #5f5f5f;
	padding:10px;
	margin-bottom:25px;
}
.sendButton {
	cursor:pointer;
	-moz-box-shadow:inset 0px 1px 0px 0px #2b241e 917055;
	-webkit-box-shadow:inset 0px 1px 0px 0px #2b241e 917055;
	box-shadow:inset 0px 1px 0px 0px #2b241e 917055;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #917055), color-stop(1, #fb9e25) );
	background:-moz-linear-gradient( center top, #917055 5%, #2b241e 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
	background-color:#ffc477;
	-webkit-border-radius:16px;
	-moz-border-radius:16px;
	border-radius:16px;
	border:1px solid #eeb44f;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	width:25%;
	font-weight:bold;
	text-shadow:1px 1px 0px #cc9f52;
}
.sendButton:hover {
	background:-webkit-gradient( linear, left bottom, left top, color-stop(0.05, #917055), color-stop(1, #ffc477) );
	background:-moz-linear-gradient( center top, 917055 5%, #ffc477 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
	background-color:#fb9e25;
}