@charset "UTF-8";
/* CSS Document */
/*--------------------------------*/
body {color:#FFF;}

.village { !important
	width: 100%;
	height: 100%;
	background: #FFF url(/image/commune/village-lioux.png) no-repeat fixed center top;
	background-size: cover;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	opacity: 1;
	min-height: calc(100vh - 1vh);
	color: #0033FF;
}
	
.header-village {
	font: italic bold small-caps 54px/110px "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: #FFFFFF;
	text-shadow: 2px 2px 3px #0033FF;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	height:auto;
	top: 0px;
	margin-left: auto;
	margin-bottom: 10px;
	margin-right: auto;
	position: relative;
	text-align: center;
	display: inline-block;
}

.header-container{
	max-width: 1200px;
	height: auto;
	margin: 0 auto 0px;
	padding-bottom: 10px;
	font-size: 16px;
}

.header-nav-logo {
	width: 100px;
	position: absolute;
	top: 15px;
	height: auto;
}

/*--------------------------------CSS HAMBURGER -----------------------------------*/

/*Reset CSS*/
*{
	margin: 0px;
	padding: 0px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

nav{
	color: #0033FF;
	width: 100%;
	margin: 0 auto;
	position: sticky;
	top: 0px;
	z-index: 10;
}

.conteneur-nav{
	position: relative;
	width: 100%;
	bottom:110px;
}

nav input[type=checkbox]{
    display: none;
}

nav label{
	display: inline-block;
	width: 42px;
	padding: 6px;
	height: 42px;
	background-image: url(/image/autre/burger-blanc.png);
	background-repeat: no-repeat;
	background-position: center center;
	float: right;
	border: none;
}

nav ul{
	display: none;
	list-style-type: none;
        background-color: #dfecf5;	
		border: 1px solid #0033FF;
		border-radiant: 6px;	
	margin-bottom: 0px;
}
nav input[type=checkbox]:checked + ul{
    display: flex;
    flex-flow : column wrap;
}
nav ul li{
    flex: 1 1 auto;
    text-align: center;
	color:#0033FF;
}
nav > div > ul > li > a{
    color: white;
}
nav a{
    display: block;
    text-decoration: none;
    color: #0033FF;
    padding: 10px 0px;
}
.sous{
    display: flex;
    flex-flow: column wrap;
    z-index: 10;
}

.sous li{
    flex: 1 1 auto;
    text-align: left;
}

.sous a{
	padding: 2px 10px;
	background-color: white;
}

.img-photo { !important
	display: inline-block;
	background: #ffffff;
	max-width: 100%;
	height: auto;
	margin: 6px 0px;
	padding: 0px 6px 0px 0px;
	float: left;
	vertical-align: top;
}

.img-photog {
	background: #ffffff;
	max-width: 100%;
	height: auto;
	margin: 6px;
	padding: 0px 6px 0px 0px;
	float: left;
}

.img-photod {
	background: #ffffff;
	max-width: 100%;
	height: auto;
	margin: 6px;
	float: right;
	padding: 0px 0px 0px 6px;
}

@media screen and (min-width: 1200px) {
	* {
		font-size: 20px;
	}
}

@media screen and (min-width: 980px){
    .conteneur-nav{
        position: static;
	   }
	   
    nav label, nav input {
        display: none;
    }
	
    nav input[type=checkbox]:checked + ul, nav ul{
        display: flex;
        flex-flow: row wrap;
    }
	
    nav ul li{
	position: relative;
    }
	
    nav > div > ul > li > a{
        color: #0033FF;
    }
	
    nav a{
        border-bottom: 2px solid transparent;
  }
  
    nav a:hover{
        color: orange;
        border-bottom: 2px solid gold;
   }
   
    .sous{
	display: none;
	box-shadow: 0px 1px 2px #CCC;
	background-color: white;
	position: absolute;
	width: 100%;
    }
	
    nav > div > ul li:hover .sous{
        display: flex;
        flex-flow: column wrap;
    }
	
    .sous a{
        border-bottom: none;
        background-color: white;
   }
	
    .sous a:hover{
        border-bottom: none;
        background-color: white;
    }
	
    .deroulant > a::after{
	content: " ▼";
	font-size: 12px;
	color: #f3c300;
    }
}

@media screen and (max-width: 750px) {
.header-container{
	width: 100%;
	margin: 0 auto;
	padding: 10px;
	font-size: 16px;
	display: block;
}
	
.header-village {
	font: italic bold small-caps 36px/90px "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: #FFFFFF;
	text-shadow: 2px 2px 3px #0033FF;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	height:auto;
	top: 0px;
	margin-left: auto;
	margin-bottom: 10px;
	margin-right: auto;
	position: relative;
	text-align: center;
	display: inline-block;
}
	
.header-nav-logo {display:none;}

	nav { border-style: none; }	
}


.conteneur-contenu{
	margin: 50px auto;
	height: 1500px;
}