rgb(77,77,76)
h1{
	width: 110px; height: 14px; padding: 0; margin: 10px; color: white; text-align: center; font-size: 0.8em; font-style:italic;
}

h2{
	text-align: center;
	font-size: 1.1em;
	font-style: italic;
	margin:0;
	font-family: "Arial Black", "Times New Roman", serif;
	color: white;
}
h3{
	position: absolute;
	font-size: 1.5em;
	font-family: "Arial Black", "Times New Roman", serif;
	color: rgb(209,22,172);
	}

h4{width: auto; font-size: 1em; color: rgb(209,22,172); margin: 0; margin-top: 5px; margin-bottom: 0;}

h6{
	font-family: Arial, "Arial Black", "Times New Roman", Times, serif; font-size: 0.6em; text-align: right; color: black; margin: 0;
	}


p{font-family: Arial, "Arial Black", "Times New Roman", Times, serif; font-size: 0.8em; text-align: left;}

body{
	margin :10px 10px;
}
#global{
	width: 1024px;
	height: 810px;
	margin: auto; /* Pour centrer automatiquement notre page */
	padding: 0;
	font-family: Arial, "Arial Black", "Times New Roman", Times, serif; 
   /*préfixes pour comptabilité avec anciens navigateurs */
   background-color: rgb(230,230,230); /* couleur de repli si les dégradés ne sont pas supportés */
   background: -webkit-linear-gradient(rgb(255,255,255), rgb(186,186,186));
   background:    -moz-linear-gradient(rgb(255,255,255), rgb(186,186,186));
   background:     -ms-linear-gradient(rgb(255,255,255), rgb(186,186,186));
   background:      -o-linear-gradient(rgb(255,255,255), rgb(186,186,186));
   background:         linear-gradient(rgb(255,255,255), rgb(186,186,186));
   background: linear-gradient(rgb(255,255,255), rgb(186,186,186));
	}
	

/*LA TETE*/
header{ /*block, occupe toute la largeur par defaut*/
	height: 130px;
	background: url("images_grange_clos_dauphin/imageTete.jpg");
	}
	
	
/*Les éléments ci-dessous ne peuvent pas être positionnés absolus car leurs ancêtres eux-mêmes (global et header) ne sont pas positionnés */
	header h1{
		display: inline-block;
		margin-top: 30px;
		margin-left:920px;
		position: relative;
		width: 90px;
		padding: 0;
		padding-bottom:2px;
		color: white;
		background-color:rgb(11,126,44);
		text-align: center; font-size: 0.8em; font-style:italic;
	}
	#logo{
	margin-top: -10px;	
	margin-left:950px;
	width: 30px;
	/*background-color:rgb(216,218,215); */
	}
	
	#logo img{
		display: block;
		margin:auto;
		margin-top: 5px;
	}

   
/*LE MENU*/
nav{
	margin-top: 10px;
	/*block dans le flux, occupe toute la largeur par defaut */
}

nav ul{
   display: table; /*affiche comme un élément principal de tableau */
   width: 900px;
   margin: 0 auto;
   padding:0;
   font-size: 0.8em;
}

nav ul li{
   display: table-cell; /*affiche comme une cellule de tableau de tableau */
   padding-left:5px,
   padding-right:5px;
   
   /*préfixes pour comptabilité avec anciens navigateurs */
   background: -webkit-linear-gradient(rgb(77,77,77) 0%, rgb(255,3,0));
   background:    -moz-linear-gradient(rgb(77,77,77) 0%, rgb(255,3,0));
   background:     -ms-linear-gradient(rgb(77,77,7) 0%, rgb(255,3,0));
   background:      -o-linear-gradient(rgb(77,77,7) 0%, rgb(255,3,0));
   background:         linear-gradient(rgb(77,77,7) 0%, rgb(255,3,0));
   background: linear-gradient(rgb(100,100,100), rgb(255,152,0));

   /*coins arrondis et ombre */
   border-radius: 3px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
               0 3px 5px rgba(0, 0, 0, .2),
               0 5px 10px rgba(0, 0, 0, .2),
               0 20px 20px rgba(0, 0, 0, .15);
}

nav ul li a{
   display: block;
   position: relative;
   text-align: center;
   color: white;
   text-decoration: none;
   padding: 8px 8px 17px 8px;
     /*retard e la transition au retour à l'état normal */
   transition: all .3s .1s;
      /*effets 3D sombre dans le bas et plus clair en montant*/
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
			   0 -1px 0 hsl(41, 92%, 30%) inset,
			   0 -2px 0 hsl(41, 92%, 35%) inset,
			   0 -3px 0 hsl(41, 92%, 40%) inset,
			   0 -4px 0 hsl(41, 92%, 42%) inset,
			   0 -5px 0 hsl(41, 92%, 45%) inset;
}

/*coins arrondis sur premier et dernier liens */
nav ul li:first-child a{
   border-radius: 3px 0 0 3px;
}
nav ul li:last-child a{
   border-radius: 0 3px 3px 0;
}
nav ul li a:hover,
nav ul li a:focus{
   background: rgba(255,255,255,.2);
               /*modification des marges au survol */
              padding: 8px 25px 17px 25px;
              /*transitions de fluidité (augmentation des marges internes progressivement) */
               transition: all .3s 0s;
               }
 
/*activation du lien */
nav ul li a:active{
   background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
   box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
}
/*ajout d'une lumière avec pseudo element noté ::  */
nav ul li a::before{
   content: '';
   position: absolute; /* au sein du parent relatif */
   left: 50%;
   bottom: 9px;
   margin-left: -2px;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: rgba(0, 0, 0, .5);
}
/*on allume la lumière  */
nav ul li a:hover::before,
nav ul li a:focus::before{
   background: white;
   box-shadow: 0 0 2px white,
               0 -1px 0 rgba(0, 0, 0, .4);
}


/*LE PIED*/
footer
{
	width:1024px;
	height:25px;
	background-color:rgb(209,22,172);
}
footer table{
	width: 800px;
	margin: auto;
}
footer table td{
	font-size: 0.7em; text-align: center; padding-top: 5px;
		color: rgb(193,193,193);

	}
#filet_vertical{
	border-left: solid 1px white; border-right: solid 1px white;
	}
footer a{
	color: rgb(193,193,193);
	}


/*--------------------------------
LES PAGES EN GENERAL
-----------------------------------*/
section{
	height: 545px;
	margin-top:20px;
	}

.mentions{text-align: center;} 



/*PAGE INDEX*/
#img_accueilA{
	display: block;
	position: absolute;
	width: 300px;
	height:380px;
	margin-left:10px;
}

#edito{
	display:inline-block;
	width: 670px;
	height:380px;
	margin-left:320px;
	}

#edito h1{
	position: absolute;
	width:125px;
	height:200px;
	margin-top:50px;
	text-align: right;
	font-size: 1.3em;
	font-family: "Arial Black", "Times New Roman", serif;
	font-style: italic;
	color: rgb(209,22,172);
	}
	
#edito p{
	display: inline-block;
	width:480px;
	margin-left:165px;
	font-size: 0.9em;
	text-align: center;
	margin-bottom: 7px;
}

#edito p:last-child{
font-size: 0.7em;
font-style: italic;
text-align: right;
}

#index{
	display: inline-block;
	width: 700px;
	margin-top:20px;
	margin-left:70px;
	padding:5px;
	background-color:rgb(253,185,119);
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
	           0 3px 5px rgba(0, 0, 0, .2),
	           0 5px 10px rgba(0, 0, 0, .2),
	           0 20px 20px rgba(0, 0, 0, .15);
	}
#index h2{
	font-size:1.5rem;
	color:red;	
}	
#index p{
text-align: center;
font-size:1rem;
line-height: 18px;
color: black;
}
.orange{
	display: inline-block;
	width:50px;
	height:50px;
	margin-top:30px;
	margin-left:80px;
	background-color:rgb(255,121,0);
}


/*PAGE LA BALME*/
#commune h3{
	width: 150px;
	margin-left:20px;
	margin-top:100px;
}
#commune article{
	display:inline-block;
    margin-left:170px;
	}
#commune p{
	width:600px;
	line-height: 1.2em;
	}
#commune aside{
		display: inline-block;
		width:200px;
		margin-left:20px;
		vertical-align:top;
}

#commune aside img{
			display: block;
			margin: 25px 10px 5px 15px;
}
.imgflotgauche{
	
	float: left;
	display: block;
	margin:5px 10px 0 0;
	}


/*PAGE GITE*/
#gite h3{
	width: 150px;
	margin-left:20px;
	margin-top:100px;
}
#gite article{
	display:inline-block;
	margin-top:30px;
    margin-left:190px;
	}
#gite p{
	width:450px;
	line-height: 1.2em;
	}
#gite aside{
	display: inline-block;
	width:auto;
	height:500px;
	margin: 25px 10px 5px 50px;
	vertical-align:top;
	border: 1px solid black;
}


/*PAGE GALERIE PHOTOS*/
#photos h3{
	width: 150px;
	margin-left:20px;
	margin-top:100px;
}
#photos article{
	display: block; 
	position: absolute; /* parce que la grande image se positionne en absolu par rapport à ARTICLE*/
    width: 730px;
    height: 530px;
    margin-left:200px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .8),
        0 3px 5px rgba(0, 0, 0, .2),
        0 5px 10px rgba(0, 0, 0, .2),
        0 20px 20px rgba(0, 0, 0, .15);
}
#photos article p{
	display: block;
	width: 200px;
	text-align: left;
	padding-left:5px;
	margin-left: 130px;
	margin-top:170px;
	margin-bottom:155px;
	color:rgb(255,255,0);
	background-color:black;
	}
#photos img{
	display: inline-block; 
	width: auto;
	height: auto;
	margin-right:10px;
	margin-top: 5px;
	margin-bottom: 10px;
	vertical-align: bottom;
	border:0;
}
#decal1{
	margin-left: 3px;
}

#decal2{
	margin-left: 100px;
}
#photos article a {margin:0; text-decoration:none;}
#photos article a:hover {
  background-color:none;} /*valeur neutre au lien pour que hover fonctionne*/
#photos article a .affgrande {
	display:none;
} /*pour éviter l'affichage avant le survol*/
#photos article a:hover .affgrande
{ 
  display: block;
  position:absolute;
  top:70px; left: 118px; width:auto; height:400px;
  border: 1px solid white;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .8),
           0 3px 5px rgba(0, 0, 0, .2),
           0 5px 10px rgba(0, 0, 0, .2),
           0 20px 20px rgba(0, 0, 0, .15);
}
#photos article a .vertical{
	display: block;
	margin-top: 10px;
	}

/*PAGE HISTOIRE*/
#histoire h3{
	width: 200px;
	margin-left:20px;
	margin-top:100px;
}
#histoire h6{
	display: inline-block;
	width: 140px;
	margin-left:850px;
}
#histoire article{
	display:inline-block;
	margin-top:50px;
    margin-left:280px;
	}
#histoire p{
	width:500px;
	line-height: 1.2em;
	}
.ital {font-style: italic;}
#histoire a{
	color: black;
	}
#histoire img{
	display:inline-block;
	width: 200px;
    margin-left:20px;
	} 


/*PAGE VILLES PROCHES*/
#villesPro h3{
	width: 170px;
	margin-left:20px;
	margin-top:100px;
}
#villesPro article{
	display:inline-block;
	margin-top:50px;
    margin-left:200px;
	}
#villesPro p{
	color: rgb(255,121,0);
	background-color: rgb(99,99,99);
	padding: 3px 10px 3px 10px;
	}
#tableau_villes{
	width: 400px; height: 355px; top: 130px; margin: 0px;
	border-collapse: collapse; background-color: rgb(185,186,184); color: black;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .8),
	           0 3px 5px rgba(0, 0, 0, .2),
	           0 5px 10px rgba(0, 0, 0, .2),
	           0 20px 20px rgba(0, 0, 0, .15);
	}
#tableau_villes td{text-align: center; font-size: 0.8em; border: solid 1px rgb(99,99,99);}
#tableau_villes a{color: black;}
#tableau_villes a:hover
	{display: block; margin: 0; background-color: rgb(66,111,18); color: white;} /*display block rend la cellule cliquable*/
#tableau_villes a:active
	{background-color: rgb(66,111,18) ; color: white;}
	
	
#villesPro img{
	display:inline-block;
	width: 350px;
	vertical-align: top;
    margin-top:97px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .8),
	           0 3px 5px rgba(0, 0, 0, .2),
	           0 5px 10px rgba(0, 0, 0, .2),
	           0 20px 20px rgba(0, 0, 0, .15);
	} 
	

/*PAGE ACTIVITES*/
#activites h3{
	width: 170px;
	margin-left:20px;
	margin-top:100px;
}
#activites aside{
	display:inline-block;
	width:200px;
	height:400px;
	vertical-align:top;
	margin-top:20px;
    margin-left:200px;
}
#activites article{
	display:inline-block;
	margin-top:20px;
	width:580px;
    margin-left:10px;
	}
#activites p{
	line-height: 1.2em;
	}
#activites a{
	color: black;
	}


/*PAGE ACCES*/
#acces h3{
	width: 170px;
	margin-left:20px;
	margin-top:100px;
	text-align: right;
}
#acces article{
	display:inline-block;
	width: 250px;
	vertical-align: top;
	margin-top:20px;
	margin-left:50px;
	}
#acces p{
	line-height: 1.2em;
	}
#carte{
	display:inline-block;
	margin-top:20px;
	width:400px;
	height:400px;
	margin-left:240px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .8),
	           0 3px 5px rgba(0, 0, 0, .2),
	           0 5px 10px rgba(0, 0, 0, .2),
	           0 20px 20px rgba(0, 0, 0, .15);
	}
#acces table{
	width: 300px;
	margin:auto;
	margin-top: 40px;
	}
caption{
	font-size: 0.9em;
	font-weight: bold;
	color: rgb(209,22,172);
}
#acces td{
	width: 250px;
	height: 30px;
	font-size: 0.8em;
	text-align: center;
	background-color: rgb(99,99,99);
	}
#acces a{
	color: white;
	}


/*PAGE SÉJOUR*/
#sejour h3{
	width: 100px;
	margin-left:20px;
	margin-top:20px;
}
#sejour p{
	line-height: 1.2em;
	}
#sejour1 {display:inline-block;
	width: 370px;
	height: auto;
	margin-left: 200px;
	vertical-align:top;
}
#sejour2 {
	display:inline-block;
	width: 370px;
	height: auto;
	margin-left: 20px;
	vertical-align:top;
}
#sejour1 p, #sejour2 p{font-size: 0.7em; text-align: justify; margin-top: 0 ; margin-bottom: 5px;}
#sejour1 a, #sejour2 a{color: rgb(209,22,172);}


/*PAGE TARIFS*/
#tarifs h3{
	width: 150px;
	margin-left:20px;
	margin-top:100px;
}
#tarifs article{
	display:inline-block;
	width:700px;
	height:300px;
	margin-top:10px;
    margin-left:240px;
	}
#tarifs caption{text-align: center; font-size: 0.9em; font-weight: bold; color: rgb(209,22,172); margin-top: 10px; margin-bottom: 10px;}
#tarifs table{
	width: 700px;
	height: auto;
	border-collapse: collapse;
	background-color: rgb(225,225,225);
	color: black;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .8),
           0 3px 5px rgba(0, 0, 0, .2),
           0 5px 10px rgba(0, 0, 0, .2),
           0 20px 20px rgba(0, 0, 0, .15);

}
#tarifs td{text-align: center; font-size: 0.8em; height: 40px; border: solid 1px rgb(66,111,18);}
#tarifs p{text-align: center; font-weight: bold; color: white; margin-top: 10px; margin-bottom: 10px;}


/*PAGE RÉSERVATIONS*/
#reserv h3{
	width: 200px;
	margin-left:20px;
	margin-top:100px;
}
#reserv article{
	display:inline-block;
	width:400px;
	height:300px;
	margin-top:50px;
    margin-left:240px;
	}
#reserv a{color: rgb(209,22,172);}
#reserv p{line-height: 1.1em; text-align: right; margin-bottom: 10px;}
#reserv p strong{font-size: 1.1em; font-weight: bold; color: white; padding:5px; background-color:rgb(209,22,172);}
#reserv p em{font-size: 1.1em; font-weight: bold; color: white; padding:5px; background-color:rgb(255,121,0);}
#reserv img{
	display:inline-block;
	width:300px;
	margin-top:50px;
    margin-left:20px;
	}

/*PAGE LIVRE D'OR*/
#livre h3{
	width: 200px;
	margin-left:20px;
	margin-top:100px;
}
#livre article{
	display:inline-block;
	width:700px;
	height:300px;
	margin-top:50px;
    margin-left:240px;
	}
#livre table{
border-collapse: collapse; 
background-color: rgb(221,236,172);
color: black;
box-shadow: 0 1px 3px rgba(0, 0, 0, .8),
           0 3px 5px rgba(0, 0, 0, .2),
           0 5px 10px rgba(0, 0, 0, .2),
           0 20px 20px rgba(0, 0, 0, .15);
overflow: auto;
}
#livre td{font-size: 0.8em;
border: solid 1px black;
padding: 10px;
vertical-align: top;}

.client{font-weight: bold; width: 160px; background-color: rgb(255,255,255);}
.message_client{width: 500px; background-color: rgb(225,225,225)}
#livre aside{width: 700px; height: auto; position: absolute; left: 330px; top: 700px ; color: black; border: solid 1px white;}
#livre aside p {text-align: center;}
#livre aside a {color:white;}

/*PAGE LIENS UTILES*/
#liens h3{
	width: 200px;
	margin-left:20px;
	margin-top:100px;
}
#liens article{
	display:inline-block;
	width:700px;
	height:300px;
	margin-top:50px;
    margin-left:240px;
	}
/* #liens_ut{width: 500px; height: auto; position: absolute; left: 120px; top: 70px ;}  */
#liens dt{
	margin-top:20px;
	}
#liens dd{
	text-align: left;
}
#liens a{
	font-size: 0.9em;
	color: black;
	line-height:1.5em;
	}

/*PAGE MENTIONS*/
#mentions article {	display:inline-block;
	width: 424px;
	height: auto; 
	margin-left: 300px;
	margin-top: 100px ;}
#mentions p{
	text-align: center;
	}
#mentions a{
	color:black;
	}