body
{
background-image: url("../DSC_0033.JPG");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
font-family: arial;
width: 100%;
margin:0px;

}

header
{
display: flex;
width: 100%;
border-bottom: solid white 5px;
background-color:#373737;
padding-bottom: 5px;
min-height: 8vw;
min-height:80px;
color: white;
opacity: 0.9;
flex-direction: column;

}


.titre
{
width: 100%;
margin: auto;
font: century gotic;
text-align: center;
font-size: 5vw;
font-variant: small-caps;


}
.titre2{
	width: 100%;
	text-align: center;
font-size: 1em;
}
.soustitre
{
	text-decoration: underline;
}

#nav
{

margin-top:5px;
margin-bottom:60px;
margin-right:30px;
width: 200px;
height: 230px;
padding-bottom: 20px;
}

section
{
display: flex;
flex-wrap: wrap;
justify-content: center;

}

#menu1
{

}

#menu2
{

margin-bottom:50px;
padding: 0px;
padding-bottom: 10px;
background: #6d6d6d;
padding-top: 10px;
text-align: center;
color: black;
font-family: arial;
border: solid #8cb3e2 1px;
border-top: none;
}

#corps
{
margin-top:20px;
margin-bottom: 20px;
width:90%;
max-width: 600px;
padding: 20px;
padding-bottom: 10px;
background-color: rgba(251, 251, 251, 0.8);
}

footer
{
	display: flex;
	width: 100%;
height: 4vw;
min-height:80px;
	background-color: #373737;
	color: white;
}

.actuel{
	background-color: #dadbdc;
}
.actuel:hover{
	background-color: #bcbdbe;
}
.cont
{
	font-size: 4em;
	color: #646464;
	display: float;
	width:1px;
	font-weight: bold;
}

#contact
{
	margin: auto;
	text-align: center;
}


.images 
{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

img
{
margin-top: 10px;
padding-bottom: 20px;
max-width: 100%;
height: auto;
}
a
{
font-size: 1.2em;
color: #292929;
text-decoration: none;
text-align: center;
}

a:hover
{
text-decoration: underline;
}

li:hover{
	background: #dadbdc;

}

.haut
{
font-size: 1em;
display:block;
margin-left: auto;
margin-right: auto;

}

a img
{
border: none;
}

#nav a{
		text-decoration: none;
}
ul 
{
list-style-type: none;
}

li 
{
padding: 3px;
padding-left: 5px;
background: #f2f2f2;
border-bottom:solid #8cb3e2 1px;
margin-left: -40px;
text-align: left;
}


.img3
{
display:inline;
text-align: center;
}

#menu_haut
{
	display:none;

}

#menu_mobile
{
	display:none;

}



.icon-bar {

    display: block;

    width: 18px;

    height: 3px;

    background-color: #292929;

    -webkit-border-radius: 1px; /* Ce sont des préfixes, pour que les navigateurs */

       -moz-border-radius: 1px; /* prennent en charge les nouvelles propriétés. */

            border-radius: 1px;

}


.icon-bar + .icon-bar { /* Le + permet de sélectionner les éléments qui suivent */

    margin-top: 3px;

}

@media (max-width: 700px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* 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 */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

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

	.hide_mobile {
		display: none !important;
	}
	

	.titre{
		font-size: 9vw;
	}

#nav
{
display:none;
margin-top:20px;
margin-left: auto;
margin-right: auto;
margin-bottom:0px;
padding-left: 0px;
width: 200px;
height: auto;
border: none;
}



#corps
{
width:98%;
}
#menu_haut
{
display: block;
width: 100%;

}

#menu_mobile
{
	display: flex;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 10 px;
	width: 100%;
}
footer{
	font-size: 0.8em;
}
footer a{
		color: white;
}
.cont{
	font-size: 1em;
	display:block;
}

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