@charset "UTF-8";
	@font-face {
    font-family: 'desyrelregular';
    src: url('desyrel-webfont.eot');
    src: url('desyrel-webfont.eot?#iefix') format('embedded-opentype'),
         url('desyrel-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;


}
/* Média fluide simple
   Remarque : un média fluide exige que vous supprimiez les attributs de hauteur et de largeur du média du code HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
p{
	font-family:'Verdana';
	font-size: 12px;
}
/* IE 6 ne prend pas en charge max-width ; la largeur par défaut est donc fixée à 100% */
.ie6 img {
	width:100%;
}


/*
	Propriétés de grille fluide Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiré par "Responsive Web Design" par Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	et le système Golden Grid par Joni Korpi
	http://goldengridsystem.com/
*/

/* Disposition mobile : 480px et moins. */
@media only screen and (max-width: 414px){
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 98%;
	padding-left: 1.5%;
	padding-right: 1.5%;
	background-color: #E7E8D7;

}


header{
	width: 100%;
	display: inline-block;
	}

h1{
	font-family: "desyrelregular";
	font-size: 20px;
	text-align: center;
	}

}	
/* 2 tab Disposition tablette : 481px sur 768px. Hérite des styles de : Disposition mobile */

@media only screen and (min-width: 415px) {

.gridContainer {
	width: 100%;
	padding-left: 0.9%;
	padding-right: 0.9%;	
	background-color: #E7E8D7;
}
header{
	width: 100%;
	display: inline-block;
	}

h1{
	font-family: "desyrelregular";
	font-size: 20px;
	text-align: center;
	}

}
/* Disposition bureau : 769px à max. 1232px.  Hérite des styles de : Disposition mobile et disposition tablette */

@media only screen and (min-width: 769px) {

.gridContainer {
	width: 100%;
	background-color: #E7E8D7;
	padding-left: 0;
	padding-right: 0;

}
header{
	width: 100%;
	display: inline-block;
	background-color: #7C9274;
	}

h1{
	font-family: "desyrelregular";
	font-size: 30px;
	color: #7C9274;
	text-align: center;
	width: 95%;
	background-color: #FFF;
	margin-left: 2.5%;
	margin-top: 45px;
	font-weight: 200;
	}
	
.tel{
	font-family: arial;
	color: #7C9274;
	font-size: 12px;
	text-align: right;
	margin-top: -50px;
	margin-right: 3%;
	}
	
nav{
	display: inline-block;
	margin-top:10px;
	background-color: #000;
	width: 98.5%;
	text-align: right;
	z-index: 5;
	position: absolute;
	}
	
#nom{
	display: inline-block;
	font-family: "desyrelregular";
	font-size: 34px;
	font-weight: 300;
	color: #E7E8D7;
	text-align: left;
	float: left;
	margin-top: 22px;
	padding-left: 50px;
	}

#citation{
	width: 50%;
	margin-left: 50%;
	}
h2{
	font-family: "desyrelregular";
	font-size: 30px;
	color: #E7E8D7;
	text-align: center;
	margin-right: 2%;
	font-weight: 100;
	margin-top: 100px;
	}


	
photo{
	width: 100%;
	}

main{
	width: 100%;
	display: inline-block;
	}
	
article{
	display: inline-block;
	width: 55%;
	float: left;
 
	}
	
#article{
	width: 110%;
	background-color: #7C9274;
	margin-top: 20px;
	padding-top: 150px;
	z-index: 2;
	height:60px;
	}
	
h4{
	width: 85%;
	font-family: "desyrelregular";
	font-size: 22px;
	color: #65785E;
	text-align: center;
	font-weight: 200;
	margin-top: -40px;
	
	}
	
h5{
	font-family: "desyrelregular";
	font-size: 22px;
	color: #FFF;
	text-align: center;
	font-weight: 200;
	margin-top: -120px;
	margin-right: 10px;
	width: 45%;
	float: right;
	}
	
.article{
	float: right;
	width: 50%;
	color: #FFF;
	text-align: justify;
	margin-top: -20px;
	padding-right: 20px;
	}
	
section{
	display: inline-block;
	width: 45%;
	float: right;
	}
	
#section{
	float: right;
	width:50%;
	background-color: #B1C8AD;
	margin-top: -160px;
	padding-top: 200px;
	z-index: 2;
	text-align: center;
	}
	
h3{
	width: 98%;
	float: right;
	font-family: "desyrelregular";
	font-size: 22px;
	color: #65785E;
	text-align: center;
	font-weight: 200;
	margin-top: -100px;
	}
	
.section{
	width: 90%;
	color: #65785E;
	text-align: center;
	padding: 0 40px 0 40px;
	margin-top: -50px;
	}
	
#shop{
	width: 70%;
	background-color: #7C9274;
	margin-top: 60px;
	padding-top: 15px;
	z-index: 2;
	float: right;
	}
	
h6{
	width: 90%;
	font-family: "desyrelregular";
	font-size: 22px;
	color: #FFF;
	text-align: center;
	font-weight: 200;
	margin-top: 10px;
	}
	
.shop{
	float: right;
	width: 45%;
	color: #FFF;
	text-align: justify;
	margin-top: -50px;
	padding-right: 20px;
	}

#escalade{
	float: right;
	margin-top: -70px;
	width: 50%;
	text-align: center;
	margin-top: 50px;
	}
h7{
	width: 50%;
	font-family: "desyrelregular";
	font-size: 22px;
	color: #65785E;
	float: right;
	font-weight: 200;
	margin-top: -70px;
	}
	
h8{
	width: 50%;
	font-family: "desyrelregular";
	font-size: 22px;
	color: #FFF;
	float: left;
	font-weight: 200;
	}
	
footer{
	width: 100%;
	background-color: #7C9274;
	display: inline-block;
	margin-top: 50px;
	}
	
#footer_left{
	width: 32%;
	float: left;
	border-right: 3px dotted;
	border-color: #FFF;
	background-color: #7C9274;
	display: inline-block;
	padding-left: 10px;
	}
	
.adresse{
	text-align: left;
	font-family: "Comic Sans MS", "arial";
	font-size: 12px;
	color: #FFF;
	font-weight: 200;
	margin-top: 50px;
	}
	
#footer_center{
	width: 32%;
	background-color: #7C9274;
	display: inline-block;
	padding-left: 10px;
	}
	
#footer_right{
	width: 32%;
	float: right;
	border-left: 3px dotted;
	border-color: #FFF;
	display: inline-block;
	padding-left: 10px;
	}
	
/* chambres */
	
#chambres{
		width: 98%;
	}

h9{
	width: 50%;
	font-family: "desyrelregular";
	font-size: 30px;
	color: #65785E;
	float: right;
	font-weight: 300;
	text-align: center;
	}
	
.chambres{
	width: 80%;
	float: right;
	background-color: #B1C8AD;
	color: #65785E;
	text-align: center;
	padding: 40px 40px 0 40px;
	margin-top: 10px;
	}
	
	#Pich{
		display: inline-block;
		width: 96%;
		padding: 2%;
		float: left;
		text-align: right;
	}
	
	#slid1{
		display: inline-block;
		float: right;
		width: 60%
	}
	
	#presCh{
		display: inline-block;
		width: 35%;
		float:left;
		padding-left: 50px;
	}
	
	.titreCh{
		font-family: "desyrelregular";
		font-size: 40px;
		color:  #65785E;
		float: right;
		font-weight: 300;
		text-align: center;
		margin-top: -20px;
	}
	.Pich{
		color: #E7E8D7;
		width: 100%;
		float: right;
		text-align: justify;
		font-size: 13px;
		margin-top: -40px;		
		background-image: url("../images/chambres/fondT.png");
		background-repeat: no-repeat;
		padding-left: 40px;
		margin-left: 40px;
	}
	
	#Dde{
		display: inline-block;
		width: 96%;
		padding: 2%;
		float: right;
		text-align: left;
	}
	
	#slid2{
		display: inline-block;
		float: left;
		width: 60%
	}
	
	#presCh2{
		display: inline-block;
		width: 35%;
		float:right;
		padding-right: 50px;
	}
	
	.titreCh2{
		font-family: "desyrelregular";
		font-size: 40px;
		color:  #65785E;
		float: left;
		font-weight: 300;
		text-align: center;
		margin-top: -20px;
		margin-left: -50px;
	}
	.Pich2{
		color: #65785E;
		width: 100%;
		float: left;
		text-align: justify;
		font-size: 13px;
		margin-top: -40px;		
		background-image: url("../images/chambres/fondT2.png");
		background-repeat: no-repeat;
		padding-left: 40px;
		margin-right: 40px;
	}
	
	.Pich3{
		color: #E7E8D7;
		width: 100%;
		float: left;
		text-align: justify;
		font-size: 13px;
		margin-top: -40px;		
		background-image: url("../images/chambres/fondT3.png");
		background-repeat: no-repeat;
		padding-left: 40px;
		margin-right: 40px;
	}
	
	.Pich4{
		color: #65785E;
		width: 100%;
		float: right;
		text-align: justify;
		font-size: 13px;
		margin-top: -40px;		
		background-image: url("../images/chambres/fondT4.png");
		background-repeat: no-repeat;
		padding-left: 40px;
		margin-left: 40px;
	}

	.check{
	width: 50%;
	background-color: #B1C8AD;
	color: #65785E;
	text-align: left;
	padding: 20px 20px 20px 20px;
	margin-top: 10px;
	margin-left: 25%;
	}
	
	
	/* mag */
	
	#presMag{
		display: inline-block;
		width: 95%;
		float:left;
		margin-left: -40px;
		background-image: url("../images/mag/fondMag2.png");
		background-repeat: no-repeat;
	}
	
	#presMag2{
		display: inline-block;
		width: 95%;
		float:right;
		margin-left: -40px;
		background-image: url("../images/mag/fondMag2.png");
		background-repeat: no-repeat;
	}
	
	.titreMag{
		font-family: "desyrelregular";
		font-size: 40px;
		color:  #65785E;
		float: left;
		font-weight: 300;
		text-align: center;
		margin-top: -20px;
		margin-left: 200px;
	}
	
	.magasin{
	width: 80%;
	float: right;
	background-color: #B1C8AD;
	color: #65785E;
	text-align: center;
	padding: 20px 40px 20px 40px;
	margin-top: 10px;
	}
	
	.Mag{
		color: #65785E;
		width: 50%;
		float: left;
		text-align: justify;
		font-size: 14px;
		margin-top: 35px;
		margin-left: 110px;
		padding-left: 10px;
		
}
	
	
	#presPTD{
		display: inline-block;
		width: 70%;
		float:left;
		padding-left: 50px;
	}
	.PTD{
		color: #E7E8D7;
		width: 100%;
		float: right;
		text-align: justify;
		font-size: 13px;
		margin-top: -20px;		
		background-image: url("../images/tableHote/FondPTD.png");
		background-repeat: no-repeat;
		padding-left: 40px;
		margin-left: 40px;
	}
	
	#TDH{
		display: inline-block;
		width: 100%;
		padding: 1%;
		float: right;
		text-align: right;
	}
	
	.titreTDH{
		font-family: "desyrelregular";
		font-size: 40px;
		color:  #65785E;
		float: left;
		font-weight: 300;
		text-align: center;
		margin-top: -20px;
		margin-left: 120px;
	}
	.TDH{
		color: #65785E;
		width: 50%;
		float: right;
		text-align: justify;
		font-size: 13px;
		margin-top: -40px;		
		background-image: url("../images/tableHote/tdh.png");
		background-repeat: no-repeat;
		padding-left: 40px;
		padding-right: 40px;
	}
	
	/* contact */
	
	#section_contact{
		float: right;
		width:50%;
		background-color: #B1C8AD;
		margin-top: -350px;
		padding-top: 100px;
		z-index: 2;
		text-align: center;
	}
	
	.map{
		float: left;
		width: 50%;
		
	text-align: center;
	background-color: #B1C8AD;
	margin-top: -180px;
	padding: 40px;
	z-index: 2;
	text-align: center;
	}
	
	h10{
	width: 95%;
	font-family: "desyrelregular";
	font-size: 22px;
	color: #65785E;
	text-align: center;
	font-weight: 200;
	margin-top: 150px;
	
	}
	.contact{
		float: right;
		width : 45%;
		background-color: #65785E;
		padding: 40px;
		margin-top: -200px;
	}
		
}