﻿/***************************GENERAL***********************/
*{
	margin: 0 auto;
	/* padding: 0; */
	font-family: 'Cabin', sans-serif; /* Police google */
}
body{
	background: url(img/parisfondnb.jpg) fixed;
	background-size: cover;
}
img{
	border: none; /*pour IE*/
}
.clear{
	clear: both; /* Pour être définitivement tranquille avec le class clear */
}
h1{
	color: navy;
}
h3{
	text-align: center;
	color: darkred;
}
h5{
	text-align: center;
	margin-top: 10px;
}
a:hover{
	cursor: url("http://downloads.totallyfreecursors.com/cursor_files/leaf.cur"), url("http://downloads.totallyfreecursors.com/thumbnails/leaf.gif"), auto;
	/* curseur beaucoup plus sympa que le curseur normal, un peu plus capricieux (et ne marche pas sur tous les navigateurs) mais, mine de rien, personnalise bien la navigation dans les menus */
}
/***********************************FIN GENERAL**********************/

/**********************************EN TETE**************************/
header{
	position:relative;
	width: 1000px;
	height: 150px;
	background: rgba(100, 149, 237, 0.2);
	overflow: hidden;
}
.logo{
	position: absolute;
	top:25px;
	left:25px;
}
/*********************menu principal********************/
nav{
	float: left;
}
nav a{
	text-decoration: none;
	color: white;
	font-size: 12px;
	margin-left: 15px;
	/*float: left;*/
	line-height: 150px;
	-moz-transition: all 900ms;
	/* 900ms peut sembler long mais donne une impression plus posée, plus calme à la navigation, correspond bien au caractère d'un hôtel de luxe */
	-webkit-transition: all 900ms;
	-ms-transition: all 900ms;
	-o-transition: all 900ms;
	transition: all 900ms;
}
nav a:first-child{
	margin-left: 270px;	/* Pour faire de la place au logo */
}
nav a:hover{
	color: darkred;	/* Couleur choisie en complément pour tous les hover de menu(voir plus loin) */
	padding: 0 10px;
}
/*******************fin menu principal**************/

/******************icones langues*****************/
.icone_langue{
	position: absolute;
	top: 20px;
	left: 270px;
}
.recherchez{
	position: absolute;
	top: 20px;
	left: 320px;
}

/*************divers header****************/

/**************** spécifique header de la page du blog**********/
.titre_blog{
	width: 350px;
	float: left;
	margin-top: 60px;
	margin-left: 460px;
}
.titre_blog h1{
	text-align:center;
	color:white;
	font-size: 35px;
}
/********************************FIN EN TETE****************************/

/********************************SECTION********************************/
#conteneur{
	width: 1000px;
	background: rgba(255, 248, 220, 0.7)
}

/*********SECTION GAUCHE (petite section)**********/

/**********section gauche général**********/
#section_gauche{
	width: 250px;
	/* background: rgba(255, 250, 205, 0.7);*/ /*fond mis en début de programmation mais alourdit inutilement la page. Gardé au cas où. */
	float: left;
	padding: 10px 0 10px 10px;
}
/*************boite de réservation*******/
#reserv{
	padding: 10px 10px;
	border-radius: 3px;
	box-shadow: 2px 2px 4px black;
	background: rgb(100, 149, 237);
}
#reserv h3{
	text-shadow: 1px 1px 1px black
}
/*****************liens en dessous boite de réservation************/
.avisnews{
	
	text-align: center;
	-moz-transition: all 300ms;
	-webkit-transition: all 300ms;
	-ms-transition: all 300ms;
	-o-transition: all 300ms;
	transition: all 300ms;
}
.avisnews a{
	text-decoration: none;
	color: darkblue;
	font-size: 15px;
}
.avisnews a:hover{
	color: darkred;
}
.avisnews:hover img{
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

.reservez{ /* Bouton RESEERVEZ qui mène à la page générale de réservation */
	background: goldenrod;
	width: 100px;
	height: 30px;
	text-align: center;
	text-decoration: none;
	color: white;
	-moz-transition: all 900ms;
	-webkit-transition: all 900ms;
	-ms-transition: all 900ms;
	-o-transition: all 900ms;
	transition: all 900ms;
}
.reservez a{
	text-decoration: none;
	color: white;
	-moz-transition: all 400ms;
	-webkit-transition: all 400ms;
	-ms-transition: all 400ms;
	-o-transition: all 400ms;
	transition: all 400ms;
	line-height: 30px;
}
.reservez a:hover{
	color: darkred;
}
/**************fin liens en dessous boite réservation***********/

/********** Promos ***********/
#promos{
	margin: 30px 0 0 0;
	text-align: center;
}
#promos p{
	margin:0 20px;
	text-align: justify;
}
#promos a{
	text-decoration: none;
	color: darkred;
}
#promos a:hover{
	color: darkgoldenrod;
}

/********************spécifique section gauche chambres***************/
.info_chambres{
	margin:0 5px;
}
.info_chambres a{
	text-decoration: none;
	color: dimgray;
}
.info_chambres a:hover{
	color: darkred;
}
.photos_materiel_chambre{
	float: left;
}
.photos_materiel_chambre img{
	margin-left: 15px;
}

.a1{
	float: left;
	margin-right: 5px;
}
.lien_chambres{
	width: 230px;
	margin: 0 auto;
	text-align: center;
}
.lien_chambres a{
	text-decoration: none;
	color: darkred;
}
.lien_chambres a:hover{
	color: darkgoldenrod;
}

.infos_generales p{
	text-align: center;
	font-size: 15px;
	font-weight: bold;
}
.archives p, h4 {
	text-align: center;
}
/**********spécifique section gauche tarifs*****************/
.info_tarifs {
	margin: 0 10px;
}
/************FIN SECTION GAUCHE**********/

/************SECTION DROITE (la grande)**************/

/****************section droite général**********/
#section_droite{
	width: 670px;
	float: left;
	background: rgba(176, 196, 222, 0.7); /*rgba(250, 235, 215, 0.7);*/
	padding: 20px;
	margin: 10px 15px 10px 15px;
}
#section_droite a{
	text-decoration: none;
	color: darkred;
}
#section_droite a:hover{
	color: darkgoldenrod;
}
/****************spécifique section droite page chambres*************/
#section_droite .chambres_classiques:hover img{
	-moz-transform: scale(1.1) translate(0px,-5px);
	-o-transform: scale(1.1) translate(0px,-5px);
	-ms-transform: scale(1.1) translate(0px,-5px);
	-webkit-transform: scale(1.1) translate(0px,-5px);
	transform: scale(1.1) translate(0px,-5px);
}
#section_droite .chambres_confort:hover img{
	-moz-transform: scale(1.1) translate(0px,-5px);
	-o-transform: scale(1.1) translate(0px,-5px);
	-ms-transform: scale(1.1) translate(0px,-5px);
	-webkit-transform: scale(1.1) translate(0px,-5px);
	transform: scale(1.1) translate(0px,-5px);
}
#section_droite .chambres_luxes:hover img{
	-moz-transform: scale(1.1) translate(0px,-5px);
	-o-transform: scale(1.1) translate(0px,-5px);
	-ms-transform: scale(1.1) translate(0px,-5px);
	-webkit-transform: scale(1.1) translate(0px,-5px);
	transform: scale(1.1) translate(0px,-5px);
}
#section_droite .chambres_suites:hover img{
	-moz-transform: scale(1.1) translate(0px,-5px);
	-o-transform: scale(1.1) translate(0px,-5px);
	-ms-transform: scale(1.1) translate(0px,-5px);
	-webkit-transform: scale(1.1) translate(0px,-5px);
	transform: scale(1.1) translate(0px,-5px);
}
#section_droite img{
	-moz-transition: all 800ms ease-in-out;
	-o-transition: all 800ms ease-in-out;
	-ms-transition: all 800ms ease-in-out;
	-webkit-transition: all 800ms ease-in-out;
	transition: all 800ms ease-in-out;
}
#section_droite h2{
	font-size: 20px;
}
.situation h5{
	color: midnightblue;
	text-align: left;
}
.situation h4{
	color: red;
	text-align: left;
}
.situation p{
	font-size: 14px;
}
/* Mise en page de tous les formulaires de contact */
#contact p, h5{
	padding: 10px;
	line-height: 23px;
}
#contact label{
	float: left;
	width: 240px;
}
#contact input:not(#envoyer), #contact textarea{
	width: 350px;
	padding: 5px;
}
#contact textarea{
	padding: 5px;
	height: 90px;
	resize: vertical;
}
#contact fieldset{
	border-color: darkred;
}
	
.news img{
	float:left;
	margin-right: 10px;
}
/* div de présentation des chambres */
.cla{
	float: left;
}
.cla2{
	width: 250px;
	margin: 10px auto;
}
/* image en fin de cuisine dans page restaurant */
.resto{
	width:350px;
	position: relative;
}
.resto p{
	position: absolute;
	width: 340px;
	height: 26px;
	line-height:26px;
	color:white;
	top:130px;
	background: rgba(0,0,0,0.6);
	text-align: right;
	padding-right:10px;
}
#menu{
	width: 490px;
}
.menu1{
	width: 150px;
	text-align:center;
	float:left;
}
.menu1{
	margin-left:20px;
}
/**************spécifique section droite livre d'or (fichier avis)**********/
.avis label{
	width: 50px;
	float: left;

}
.avis input{
	width: 150px;
	float: left;
	margin-right: 15px;
}
.or{
	background: url(img/livre_or.png);
	background-size: cover;
}
.or h3{
	text-align: left;
	color: black;
}
/***********section droite spa***********/

.soins{
	float: left;
	width: 300px;
	padding: 10px;
	border: 3px solid goldenrod;
	background: bisque;
}
.soins p{
	font-size:14px;
}
.soins_luxe{
	float: left;
	width: 644px;
	padding: 10px;
	border: 3px solid goldenrod;
	background: bisque;
	margin:15px 0;
}
.soins img{
	float: left;
	margin-right: 5px;
}
.soins_luxe p{
	font-size:14px;
}
.soins_luxe img{
	float: left;
	margin-right: 5px;
}
/***************tableaux tarifs*************/
table{
	border-collapse: collapse;
	border: 2px solid black;
	box-shadow: 2px 3px 5px black;
	text-align: center;
	background: whitesmoke;
}
table th, table td{
	padding: 5px;
	border: 1px solid black;
}
table th{
	color: darkblue;
}
/**************FIN SECTION DROITE********/

/**************section spéciale sur page "A VOIR" (section unique)***************/
#section_photo{
	width:960px;
	padding: 20px;
}
#section_photo h2{
	color: gray;
}

#section_photo a{
	float: left;
	margin-right: 15px;
	margin-bottom: 10px;
}
#section_photo h3{
	color: midnightblue;
}
.videos{
	width: 560px;
	margin: 0 auto;
	}
/*************FIN DE SECTION********************/

/********************PIED DE PAGE***************************/
footer{
	width: 1000px;
	background: rgba(0, 0, 255, 0.3);
	color: white;
	font-size: 13px;
	padding:10px 0;
	text-align: center;
}
footer .adresse{
	float: left;
	margin-left: 15px;
	margin-bottom: 10px;
}
footer .mentions{
	float: right;
	margin-right: 15px;
	margin-bottom: 10px;
}
footer a{
	text-decoration: none;
	color: white;
}
footer a:hover{
	color: darkred;
}
/*********** FIN DE PIED DE PAGE ********************/