/*--------------------------------------------------------------------------
menu et disposition des liens du menu
--------------------------------------------------------------------------*/
#btn_up {
	position: fixed;
	bottom: 60px;
	right: 25px;
	cursor: pointer;
	display:none;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 4px;
	z-index: 100;
} 
/*-----------------------------------------------------------
menu langues
-----------------------------------------------------------*/
/*le container pour les boutons fr et de*/
#langues {
	right:0;
	text-align: center;
	padding: 0;
	margin: 0;
	padding-top: 16px;
}
#langues ul {
	display: inline-block;
	
}
#langues a {
	color: white;
	text-decoration: none;
}
#langues a:focus {
	color: white;
}
#langues li { 
	border-radius: 2px;
	padding: 6px;
	background-color: #000;
	display: inline;
	}
#langues li:hover {
	background-color: orange;
}
/*------------------------------------------------- 
responsive nav
----------------------------------------------------*/
nav { 
	font-size: 16px; 
	text-align: center;
	position: relative; /*pour faire fonctionner z-index*/
	z-index: 100;
	}
nav ul {
	margin: 0; 
	padding: 0; 
	list-style: none;
	}
nav li {
	background-color: black;/*#AA373E;rgba(59, 52, 52, 0.7); red*/
	padding: 0; 
	float: left; /*les deux dernières déclarations sont importantes*/
	margin: auto;
	} 
nav li a {
	display: block; 
	width: 150px; 
	color: white; 
	text-decoration: none; 
	padding: 10px;}
nav li a:hover {
	background-color: #ff6347;
	}
nav ul li ul {display: none;}
nav ul li:hover ul {
	display: block;
	}
nav li:hover ul li {float: none;}
nav li ul {position: absolute;}

nav {transform: scale(1,1);}
nav a#deroule {
	display: none; 
	font-size: 18px;
	background: url("../images/icone_menu.png") no-repeat right;
	background-color: rgba(59, 52, 52, 0.7); /*red*/
	padding: 10px 0;
	margin: auto;
	border-bottom: 1px solid white;}
#deroule  {color: white; text-decoration: none; text-align: left; text-indent: 10px;}
/*---------------------------------------------------
narrow: tablette et smartphone
----------------------------------------------------*/
@media (min-width: 869px) {
	#langues {float: right;}
	#redux {display: none;}
}
@media (min-width: 481px) and (max-width: 868px) {
  nav a#deroule { display: block;}
  nav ul {display: none;}
  nav {width: 100%; margin: auto; text-align: center;}
  nav li { width: 100%; margin: auto; background-color: rgba(59, 52, 52, 0.9);} 
  nav li a {
	width: 100%;
	padding: 10px 0;
    border-bottom: 1px solid #fff; 
	margin: auto;
  }
  nav ul li ul {width: 100%; visibility: hidden;}
  nav li:hover ul li {float: none; visibility: visible;}
  #langues {padding: 2em 0;}
  #langues li {font-size: 18px; border-radius: 2px; padding: 10px;}
}
@media (min-width: 321px) and (max-width: 480px) {
  nav a#deroule { display: block; background-color: #AA373E;}
  nav ul {display: none;}
  nav { width: 100%; margin: auto; text-align: center;}
  nav li { width: 100%; margin: auto;} 
  nav li a {
	width: 100%;
	padding: 10px 0;
    border-bottom: 1px solid #fff; 
	margin: auto;
  }
  nav ul li ul {width: 100%; margin: auto; visibility: hidden;}
  nav li:hover ul li {float: none; visibility: visible;}
  #langues {padding: 2em 0;}
  #langues li {font-size: 18px; border-radius: 2px; padding: 10px;}
}
/*---------------------------------------------------
iphone
----------------------------------------------------*/
@media screen and (max-width: 320px) {
  nav ul {visibility: visible;}
  nav { width: 100%; margin: auto; text-align: center; font-size: 18px;}
  nav li {display: block; width: 100%; margin: auto;} 
  nav li a {
	width: 100%;
	padding: 18px 0;
    border-bottom: 1px solid #fff; 
	margin: auto;
  }
  nav ul li ul {width: 100%; margin: auto; visibility: hidden;}
  nav li:hover ul li {float: none; visibility: visible;}
  #langues {padding: 2em 0;}
  #langues li {font-size: 18px; border-radius: 6px; padding: 14px;}
}