body{ 
	background:#fff;
	font-family: 'Roboto', sans-serif;
	margin:0; padding:0;
	font-size:14px;
}

h2, h3{
	font-weight:300;
	font-size:29px;
	margin-top:0;
	padding-top:0;
}

h2, h3, 
a, a:visited,
#contact span{
	color:#F71FAB;
}

ul, li{ margin:0; padding:0}


/*	header	*/
#header{ 
	width:100%; height:500px;
	background:#D8D2C2 url(elements/slide.jpg) no-repeat center center;
	position:relative;
	overflow:hidden;
}

.logo{ 
	width:100%; 
	height:70px; 
	background:#fff;
	position:relative;
	z-index:101;
}

.logo div{ 
	width:1025px; 
	margin:0 auto; 
	padding-top:18px;
}

.logo h1{ 
	margin:0; 
	padding:0; 
	background: url(elements/logo.png) no-repeat;
	text-indent:-3000px;
	width:361px;
	height:100px;
	overflow:hidden;
	margin:0px;
}

.info{
	position:absolute;
	top: -1px;
	right: 190px;
	height:500px;
	background:url(elements/overlay.png) repeat;
	padding:80px;
	padding-top:110px;
}

.info span{ 
	text-transform: uppercase;
	font-size: 25px;
	font-weight: 300;
}

.info ul{ margin-top:15px;}

.info li{ 
	width:100%;
	border-bottom:1px dotted #ccc;
	padding:8px 0 8px 40px;
	font-size:20px;
	list-style:none;
	background: url(elements/puce.png) no-repeat 0  center;
}
.info li:last-child{ border:none;}


/*	conteneur	*/
#conteneur{
	width:100%;
	padding:70px 0 50px;
}
#conteneur .wrapper{ 
	width:1050px;
	margin:0 auto;
	padding:0 10px;
	overflow:hidden;
}

#footer{
	background:#fff; 
	padding:30px 0;
	color:#ccc;
	font-size:12px;
	text-align:center;
}

.panel{
	padding:20px;
	margin-bottom:20px;
	background:#fff;
	box-shadow:1px 1px 10px #aaa;
	-moz-box-shadow:1px 1px 10px #aaa;
	-webkit-box-shadow:1px 1px 10px #aaa;
	width:560px;
	float:left;
	border-top:5px solid #F71FAB;
	line-height:25px;
}

#contact,
#description{ 
	float:right;
	width: 350px;
}

.adresse{ 
	display:block; 
	font-family:"Courier New", Courier, monospace; 
	font-size:15px; 
	margin-top:20px;
}

#diaporama,
#village{ overflow:hidden;}

#diaporama ul{ margin:0; padding:0;}

#diaporama li {
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	width:100px;
	height:100px;
	background:#efefef;
	list-style:none;
	overflow:hidden;
}
#diaporama li img{ 
	height:100%;
}


#village ul{ margin:20px 0 0 0; padding:0}

#village li {
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	width:175px;
	height:120px;
	background:#efefef;
	list-style:none;
	overflow:hidden;
}
#village li img{ 
	width:100%;
}



@media (max-width:  320px) {
 /* passer tous les éléments de largeur fixe en largeur automatique */
body{
	margin: 0;
	padding: 0;
	width: auto;
	min-width: 320px;	
	font-size:14px;
}

h2,h3{ font-size:22px;}

#conteneur{ padding-bottom:0px;}
#conteneur .wrapper,
.logo div{ width:auto; margin:0;}

#header{ height:auto}

.info{ 
	width:auto; height:auto;
	padding:0; 
	position:relative; 
	top:0; right:0; 
	padding:60px 15px 40px 15px;
}
.info li{ font-size:18px;}
.info span {font-size: 22px;}


#diaporama li{ 
	width:75px; 
	height:75px;
	margin-bottom:11px;
	margin-right:11px;
	overflow:hidden;
}

#village li{ 
	width:75px; 
	height:75px;
	margin-bottom:11px;
	margin-right:11px;
	overflow:hidden;
}



 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
   max-width: 100%;
 }
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
 img {
   height: auto; width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word; /* passage à la ligne forcé */
   -webkit-hyphens: auto; /* césure propre */
   -moz-hyphens: auto;
   hyphens: auto;
 }
 code, pre, samp {
   white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }

 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
 .panel,
 #contact,
 #description{
   float: none;
   width: auto;
 }


.logo h1{
	background: url(elements/logo-mobil.png) no-repeat;
	width:250px; height:77px;
	margin :0 auto;
}


 /* masquer les éléments superflus */
 .hide_mobile {
   display: none !important;
 }

}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
	.logo h1{
		background-image: url(elements/logo-mobil@x2.png);
		background-repeat:no-repeat;
		background-size: 250px 77px;
	}
}