body {

  font-family: arial;
  margin: 0px; 
  padding: 0px;

}

@font-face {
    font-family: 'garage_gothicregular';
    src: url('garagegothicregular-webfont.woff2') format('woff2'),
         url('garagegothicregular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

a, a:visited {
	color : #346796;
 	text-decoration: none;
}

a:hover {
 	text-decoration: underline;
}

p
{
	color:black;
}

#entete {
		height : 108px;
		background:#780607;
}
#logodiv {
		float:left ;
		height : 108px; /* Paramétrer */
}
#banniere {
	height : 108px;    /* Paramétrer */
	text-align : center;
	background:url(../img/logo-fond-rouge.gif);
}
#div_reservation {
	text-align : right; 
		
	position:relative;   
	height:61px;
	width:100%;
    margin-right: 100cm;

}

#div_reservation img {
  position:absolute;
  right:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#div_reservation img.top:hover {
  opacity:0;
}

#div_reservation img {
	cursor: pointer;
}
#menu, #menutablette {
	font-family : arial;
	font-size: 11pt;
	font-weight : bold;
	display : inline-block ;
	margin: 0px; 
	padding: 0px;
	line-height:13px;
	
}

#menutablette {
	display : none ;
	visibility:hidden;
	background:#780606;
	width:100%;
	text-align:center;
}
#menu a {
	color:white;
	text-decoration : none ;
}
#menutablette a {
	color:white;
	text-decoration : none ;
}
#menu a:visited {
	color:white;
	text-decoration : none ;
}

#menu li, #menutablette li
{
	padding: 5px 5px;
	padding-right : 40px;
	display : inline-block ;
}
#logoimg {
  width:100%;
}

#boutonmenuimg {

}

#entetedivmobile { /* se supperpose au dessus d'entetediv */
	visibility:hidden;  
	position:absolute;
	z-index : 10 ;
	top:0;
	width:100%;
}

#aproposdiv {
	position:relative;
	height:100%;
	padding: 0px 0px 0px 0px;
	text-align:center;
	font-family: 'garage_gothicregular';
	font-size : 25px;
	color:#494948;
}

#pieddiv {
	background-color:#333333;
	color:white;
	text-align:center;
}

#menumobile {  /* se supperpose au div A propos */
	visibility:visible;
	display : none ;    /* enleve physiquement l'objet de manière temporaire */
	background:#3a2315;
}

#footer1, #footer2, #footer3 {
	padding:10px;
	text-align:center;
	font-family:arial;
	font-size:12px;
	color:white;
	line-height:1.4;
}
#footer1 {
	background-color:#ffffff;
	color:#40657f;
}

#footer3 {
	background-color:#780607;
}

#footer2 {
	background-color:#780607;
}
#footer2 ul {
  width: 90%;   /* évite l'apparition de l'ascenceur de débordement */
  display: table;   /* simule un tableau */
  table-layout: fixed; /* optional */
	
}

#footer1 a {
	color:#780607;
}

#footer2 a {
	color:white;
}
	

#footer2 ul li { 
  display: table-cell;
  width: auto;
  text-align: left;
}

#footer2apropos{
  text-align: left;
}
#boutonRemonter {
  visibility:hidden;
  position: fixed;
  bottom: 0;
  right: 0;
	
}
#boutonRemonter:hover, #boutonRemonter:focus{
	background-image:url('../img/bouton-remonter2.png');
}

#ariane {
	font-family:arial;
	background:#346796;
	width:100%;
	height:65px;

}

.cadre {
		margin : auto;
		padding-top:10px;
		padding-left:20px;
		width:600px;
		background:white;
		
		/* ombre */
	
		-webkit-box-shadow: 1px 1px 5px 0px #656565;
		-moz-box-shadow: 1px 1px 5px 0px #656565;
		box-shadow: 1px 1px 5px 0px #656565;
}
.cadre form {
			line-height:13px;
}

.transition {
		position:relative;
		margin : auto;
		padding-top:10px;
		padding-left:20px;
		width:600px;
		height:28px;	
		background:url('../img/rumduol.gif') white;
		
}
.inputtext {
	width:250px;
	height:25px;
	border-radius: 4px;
	background-color : #efefef;
}
.inputarea {
	width:250px;
	height:100px;
	border-radius: 4px;
	background-color : #efefef;
}
.inputbutton {
	width:250px;
	height:25px;
	border-radius: 4px;
	background-color : #fda420;
}

.bleu_marine {
	color: #346796;
}

#erreur404 {
	width:75%;
	height:75%;
}

#menumobile {  /* se supperpose au div A propos */
	visibility:visible;
	display : none ;    /* enleve physiquement l'objet de manière temporaire */
	background:#c30002;
}

/* =========== requêtes media ============= */
/* =======
	1024 
	768
	360
   ======= */


@media screen and (max-width: 1024px)
{
	#menu {
		display : none ;   /* enlève physiquement l'objet, différent de hidden qui cache l'objet mais est présent */
		visibility:hidden;
	}

	#menutablette {
		visibility:visible;
		display : inline-block ;
	}

}

@media screen and (max-width: 800px)
{

	#div_reservation {
		visibility:hidden;

	}
	.transition {
		position:relative;
		margin : auto;
		padding-top:10px;
		padding-left:20px;
		width:75%;
		height:28px;	
		background:url('../img/rumduol.gif') white;
		
	}
	
	.cadre {
		margin : auto;
		padding-top:10px;
		padding-left:10px;
		padding-right:10px;
		width:75%;
		background:white;

		
		/* ombre */
	
		-webkit-box-shadow: 1px 1px 5px 0px #656565;
		-moz-box-shadow: 1px 1px 5px 0px #656565;
		box-shadow: 1px 1px 5px 0px #656565;
}

	#menumobile {  /* se supperpose au div A propos */
		position:absolute;
		z-index : 10;
		visibility:hidden;
		top:100px;
		left:0;
		width : 100%;	
		height: 100%;
		text-align:center;
	}
	#menumobile li {
		list-style-type:none;

	}
	#menumobile hr {
	position : relative;
		left:-15px;
	}
	#menumobile a {
	color : white ;
	}
/*
	#menumobile {  
		position:absolute;
		z-index : 10;
		visibility:hidden;
		top:85px;
		left:0;
		width : 100%;	
		height: 100%;
		text-align:center;
	}
	#menumobile li {
		list-style-type:none;

	}
	#menumobile hr {
	position : relative;
		left:-15px;
	}

	#entetediv {	
		height:100px;   
	}

	#aproposdiv {
		height:100%;
		padding: 0px 0px 0px 0px;
		width:50px;
		margin: auto;

	}

	#aproposdiv li {
		vertical-align : top;
		padding: 0px 0px 0px 0px; 
	}
	#boutiqueimg {
		visibility:hidden;
		padding: 0px 0px 0px 0px; 
		width:50%;
	}

	#contactimg {
		visibility:hidden;
		padding: 0px 0px 0px 0px; 
		width:10%;
	}
	
	#logoimg {
		width:90%;
		height:90%;
	}
	.titre_gros {
		font-family : verdana;
		font-size : 1.25em;     
		font-weight : normal;
		color : #ffffff;
	}
*/

}

@media screen and (max-width: 640px)
{
	#menutablette {
		visibility:hidden;
		display:none;
	}
	#entetedivmobile { 
	visibility:visible;  
	text-align : right;
	}
	.rubrique {
		width:75%;

	}
	#slider {
	margin-left: auto;
    margin-right: auto ;
	width:100%; 
	}
}


@media screen and (max-width: 360px)
{

	#logodiv {
		width :100%;
	
	}
	.inputtext, .inputarea, .inputbutton {
	width:200px;
	}

}


/* =========== fin requêtes media ============= */

}