/* DÈfinition des polices personnalisées */
@font-face
{
    font-family: 'FontleroyBrown';
    src: url('Polices/FontleroyBrown-webfont.eot');
    src: url('Polices/FontleroyBrown-webfont.eot?#iefix') format('embedded-opentype'),
         url('Polices/FontleroyBrown-webfont.woff') format('woff'),
         url('Polices/FontleroyBrown-webfont.ttf') format('truetype'),
         url('Polices/FontleroyBrown-webfont.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'arberkley';
    src: url('Polices/arberkley.eot');
    src: url('Polices/arberkley.eot?#iefix') format('embedded-opentype'),
         url('Polices/arberkley.woff') format('woff'),
         url('Polices/arberkley.ttf') format('truetype'),
         url('Polices/arberkley.svg#ar_berkleyregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'heydings';
    src: url('Polices/heydings.eot');
    src: url('Polices/heydings.eot?#iefix') format('embedded-opentype'),
         url('Polices/heydings.woff') format('woff'),
         url('Polices/heydings.ttf') format('truetype'),
         url('Polices/heydings.svg#heydings') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face
{
    font-family: 'Pacifico';
    src: url('Polices/Pacifico-webfont.eot');
    src: url('Polices/Pacifico-webfont.eot?#iefix') format('embedded-opentype'),
         url('Polices/Pacifico-webfont.woff') format('woff'),
         url('Polices/Pacifico-webfont.ttf') format('truetype'),
         url('Polices/Pacifico-webfont.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* ElÈments principaux de la page */
body
{	
	background: url('images/fond_ecran.gif'); background-color: rgb(166,229,247);
	background-attachment : fixed ;
	background-position : center ;
	background-repeat : no-repeat ;   
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
    margin: 0px;
    padding: 0px;
}
#bloc_page
{
    width: 900px;
    margin: auto;
	background-color: rgba(62,138,57); /*pour les navigateurs anciens */
	background-color: rgba(62,138,57,0.6); /*pour les navigateurs plus rÈcents */
	border-radius : 20px ;
}
h1 {
    font-family: 'Pacifico', serif;
    font-size: 2.5em;
    font-weight: normal;
    padding-left: 10px ;
}
h2 {
    font-family: 'Pacifico', serif;
    font-size: 1.5em;
    font-weight: normal;
    padding-left: 10px ;
}
/* Header Banniere */
#banniere
{
    background: url('../banniere/banniere.jpg');
	width : 900 px; height : 150px ;
	border-radius : 20px ;
}
#banniere1
{
font-family: 'arberkley', serif;
	text-align : left ;
    font-size: 2em;
    font-weight: normal;
	padding-left: 50px ;
	height : 70px ;
	
	color: #f5b377;
}
#banniere2
{
    font-family:  'arberkley',serif;
	text-align : left ;
    font-size: 1.52em;
    font-weight: normal;
	padding-left: 50px ;
	height : 70px ;
	color: #f5b377;
}
.titre {text-align : center ;}
.titre2 {width: 200px ; text-align : center ;}
/* Page Index
************ */
.conteneur { width: 900px ; display: flex; flex-wrap: wrap; justify-content: center }
.conteneur2 { width: 900px ;padding-top: 140px ; display: flex; flex-wrap: wrap; justify-content: space-around;}
.conteneur_gauche {width: 520px ; padding: 5px }
.conteneur_gauche_premier{
    position : relative ;
    width : 420px ; height : 300px ;
    margin : 2px ;
    background: url('images/Premier/plan_premier.png'); background-color: rgb(166,229,247);
    background-position : center ;
    background-repeat : no-repeat ; 
}
.conteneur_gauche_RdC{
    position : relative ;
    width : 400px ; height : 300px ;
    margin : 2px ;
    background: url('images/RdC/plan_RdC.png'); background-color: rgb(166,229,247);
    background-position : center ;
    background-repeat : no-repeat ;  
}
.conteneur_gauche_RdJ{
    position : relative ;
    width : 400px ; height : 300px ;
    margin : 2px ;
    background: url('images/RdJ/plan_RdJ.png'); background-color: rgb(166,229,247);
    background-position : center ;
    background-repeat : no-repeat ;   
}
.conteneur_gauche_village {
    position : relative ;
    width : 420px ; height : 243px ; border-radius : 20px ;
    margin : 5px ;
    background: url('images/Village/planVillage.jpg'); background-color: rgb(166,229,247);
    background-position : center ;
    background-repeat : no-repeat ;
}
.conteneur_gauche_jardin {width: 420px ; padding: 5px }
.conteneur_droite {width: 370px }
.conteneur_droite_premier { width : 460px ;  margin : 2px ;}
.conteneur_droite_RdC, .conteneur_droite_RdJ { width : 480px ;  margin : 2px ;}
.conteneur_droite_village { width : 460px ;  margin : 2px ;}

.conteneur_droite_contact , .conteneur_gauche_contact {width: 400px ; margin: 5px ; padding: 5px ; background-color: rgb(166,229,247)}

.conteneur_plan {width: 610px ; padding: 5px }

.gras_bleu { font-size : 1.2em ; color : blue ;}
.diapo_accueil{
    position: absolute; /*les images vont se supperposer*/
    display: none; /*Par défaut, elles ne seront pas affichées*/
}
/* Premier étage
**************** */
.village_cadre { width: 900px ; background: #f5b377; border-radius : 20px ; margin : 5px;}
.village_texte {width: 800px ;  background-color: rgb(166,229,247); margin : 5px; border-radius : 20px ;}
.contP {display: flex; text-align: center; position: relative; justify-content: center;}
.premier_legende {background-color: rgb(166,229,247) }
.boiteP {width: 420px ; border: solid black 2px ; position: relative;}
.imageP {position: relative;}
#imageG {width: 900px ; position: fixed; top: 10px ;right: 10px ; visibility: hidden; background-color: rgb(166,229,247) ; z-index: 200}
.agrandir {width: 100px ; border: black solid 1px ; position: absolute; right: 5px ; bottom: 5px ;background-color: rgb(166,229,247)}
.agrandir:hover,.agrandir:focus {cursor:pointer;}

/*
#monBouton:hover,#monBouton:focus{
  background-color:rgb(200,200,200);
  cursor:pointer;
}
*/


/*pour placer les flèches*/

.cache {visibility: hidden}


/* Le village
**************** */
/* Positionnement des flèches */
.fleche {position: absolute;width:20px;height:20px;vertical-align:center;}
.fleche p {font-family: 'heydings'; margin:0px; padding:0px; color:red;text-align:center;}
.fleche p:hover {color:green;}

#fleche1{left: 171px;top: 148px;-webkit-transform:rotate(5deg); -moz-transform: rotate(5deg);-ms-transform: rotate(5deg);-o-transform: rotate(5deg);transform: rotate(5deg);}
#fleche2{left: 151px;top: 104px;-webkit-transform:rotate(10deg); -moz-transform: rotate(10deg);-ms-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg);}
#fleche3{left: 220px;top: 135px;-webkit-transform:rotate(196deg); -moz-transform: rotate(196deg);-ms-transform: rotate(196deg);-o-transform: rotate(196deg);transform: rotate(196deg);}
#fleche4{left: 102px;top: 165px;-webkit-transform:rotate(165deg); -moz-transform: rotate(165deg);-ms-transform: rotate(165deg);-o-transform: rotate(165deg);transform: rotate(165deg);}
#fleche5{left: 361px;top: 186px;-webkit-transform:rotate(165deg); -moz-transform: rotate(15deg);-ms-transform: rotate(15deg);-o-transform: rotate(15deg);transform: rotate(15deg);}
#fleche6{left: 361px;top: 152px;-webkit-transform:rotate(15deg); -moz-transform: rotate(15deg);-ms-transform: rotate(15deg);-o-transform: rotate(15deg);transform: rotate(15deg);}
#fleche7{left: 245px;top: 162px;-webkit-transform:rotate(-135deg); -moz-transform: rotate(-135deg);-ms-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);}
#fleche8{left: 240px;top: 140px;-webkit-transform:rotate(100deg); -moz-transform: rotate(100deg);-ms-transform: rotate(100deg);-o-transform: rotate(100deg);transform: rotate(100deg);}
#fleche10{left: 227px;top: 125px;-webkit-transform:rotate(90deg); -moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);}

/* Video de Pierre Perret
*********************** */
#PierrePerret {width :360px;margin: auto;}

/* Contact
*********************** */
.conteneur_gauche_contact h2 {text-align: center;}
.conteneur_droite_contact h2 {text-align: center;}
.contact_recap {width: 600px ; margin: 5px ; padding: 5px ; background-color: rgb(166,229,247)}
.separation {width: 90% ;height: 3px ;background-color: white ; margin: auto; margin-bottom: 3px}

/*/* page partenaires */
#tarif h1 {text-align: center; color :white; background :blue;}
.partenaire {width : 250px; text-align : center; margin : 5px ; display: inline-block; vertical-align : top ;}


#ValEnvoi {width: 300px ;border: 1px solid black; text-align: left ; padding: 5px ; margin: 1px; background-color: yellow;}
#ValEnvoi { color: blue;}
#ValEnvoi:hover {text-decoration: underline; color: red; background-color: white;}

/* page Gestion des photos
************************ */
.cont { width: 900px ; display: flex ;}
.cont_gauche {width: 600px ; margin: 0px ; padding: 0px ; background-color: rgb(166,229,247)}
.cont_droite {width: 290px ; position: relative; background-color: rgb(166,229,247)}
.boite {width: 600px ;display: flex; flex-direction: column; align-items: center;}
.boite1 {width: 600px ; border: solid black 2px ; position: relative;}
#imageMaison {width: 600px ; text-align : center ; z-index: 0; background-color: rgb(166,229,247)}