/************************* STYLES PRINCIPAUX *******************************/
body {
	margin:0;
	font-family: Helvetica, Arial, sans-serif;
	position: relative;
	height: 100em;
}
#corps {
	display: flex;
	justify-content: center;
}
/************************** NAVBAR ET LOGO  ********************************/
header {
	height: 6em;
	background-color: #f1f1f1;
	display:flex;
	justify-content: center;
	position: fixed;
	width: 100%;
	top:0;
	z-index:10;
}
.boite {
	width: 77%;
	max-width: 1170px;
	display: flex;
	justify-content: space-between;
}
#logo {
	display: flex;
	align-items: flex-end;
	margin: 1em;
	margin-left: 0;
}
h1 {
	font-size: 0.8em;
	margin-left: 0.5em;
}
.show-menu { display: none;}
nav ul {
	display:flex;
	padding: 0;
	margin: 0;
	list-style-type: none;
}
nav li { padding-top: 2.3em; }
#menu a {
 	text-decoration: none;
 	color: #626262;
 	padding: 2.3em 3em;
 }
#menu a:hover {
	color: white;
	background-color: #db0203;
	cursor: pointer;
}
#menu li:hover a { color: #fff; }
/***************************************************************************
                                ENTETE
****************************************************************************/
/* SLIDER */
.boite2 {
	width: 77%;
	max-width: 1170px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#carousel {
	height:auto;
	margin: 2em 0;
	position:relative;
	margin-top:7em;
	overflow: hidden;
}
.frame      { display: none; }
.slide-fig  { width: 100%; }
#prev, #next {
  cursor: pointer;
  position: absolute;
  top:0;
  top: 35%;
  width: 2em;
  padding: 1.5em 0;
  color: #000;
  font-weight: bold;
  font-size: 18px;
  background-color: rgba(255,255,255,0.5);
  text-align: center;
  border:1px solid black;
}
#prev { left: 0; }
#next { right: 0; }
/*barre de chargement*/
#timeline {
  position: absolute;
  bottom: 0;
  height: 5px;
  background: #db0203;
  width: 100%;
}
/* fonction d'animation */
.run-animation { animation: timeliner 5s; }
@keyframes timeliner {
  0%    { width: 0; }
  100%  { width: 100%; }
}
/***************************************************************************
                 		SECTION : CARTE + ASIDE
****************************************************************************/
section {
	display: flex;
	margin: 2em 0;
	position:relative;
}
#map {
	height: 30em;
	flex: 2;
}
aside {
	height: 28em;
	flex: 0;
	border: 1px solid #000;
	display:none;
	flex-direction: column;
	padding: 1em;
	position:relative;
}
/******************************* ASIDE *************************************/
.aside{	animation: slideIn 0.8s;}
@keyframes slideIn {
	0% 		{flex : 0;}
	100% 	{flex: 1;}
}
#closer {
	position:absolute;
	top:1px;
	right:0;
	padding:0.1em 0.4em;
	background-color:#f1f1f1;
	border: 1px solid #000;
    border-radius: 3px;
    cursor: pointer;
}
aside h2{
	text-align: center;
	font-weight: bold;
	margin-top: 0;
}
aside p { margin: 1em auto; }
#red {
	color:rgb(255,0,0);
	font-weight: bold;
}
aside button {
	text-align: center;
	margin:auto;
	margin-top: 2em;
	cursor:pointer;
	width: 90%;
}
aside h3 { text-align: center; }
aside img {
	width: 5em;
    height: 5em;
    margin: 0 auto;
}

/************************** écran signature ********************************/
#popUp {
	position:fixed;
	top: 7em;
	width:100%;
	height:50em;
	background-color: rgba(0,0,0,0.5);
	display: flex;
}
#carreBlanc {
	margin:10em auto;
	height:26em;
	width: 60%;
	background-color: #fff;
	border:1px solid #000;
	position:relative;
	display:flex;
	flex-direction: column;
	align-items: center;
}
#carreBlanc h2 { text-align: center; margin-top: 30px;}
#carreBlanc button {
	width:300px;
	margin-top: 1em;
}
/*banniere erreur*/
#no-signature {
	border:1px dashed rgb(255,0,0);
	background-color: #ffdde0;
	width:293px;
	margin:auto;
	margin-bottom: 0;
	margin-top: 10px;
	padding: 3px;
}
#no-signature img {
	margin:0 2px;
	width:15px;
	height: 15px;
}
#drawbox{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width:300px;
	margin:auto;
  	margin-bottom:0;
  	margin-top: 0;
  	position:relative;
}
#drawbox img {
	width:30px;
	height: 25px;
	position:absolute;
	top:20px;
	left:0;
	pointer-events: none;
}
canvas {
	border:1px dashed #000;
	width: 300px;
  	height: 150px;
	background-color: #f9f9dd;
	cursor: pointer;
}
#effaceur {
	border: 1px solid #000;
	border-top:0;
	background-color: #db0203;
	color:#fff;
	width:3em;
	text-align: center;
	cursor: pointer;
}

/***************************************************************************
                 				PIED DE PAGE
****************************************************************************/
footer {
	background:url(../img/footer.png) no-repeat center bottom #f1f1f1;
	height:25.5em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position:absolute;
	bottom:0;
	margin-bottom: 3em;
	width: 100%; 
}
/*confirm*/
#confirmBox {
	display:none;
	flex-direction: column;
	align-items: center;
	background-color: rgba(255,255,255,0.8);
	border:2px solid #000;
	border-radius: 5px;
	margin-bottom: 5em;
	padding: 1em;
	height: 12em;
	margin: 2em 0;
	width: 50%;
}
#bandeau {
	background-color: #000;
	color:#fff;
	width: 100%;
	height: 3em;
	display:flex;
	align-items: center;
	position:absolute;
	bottom:0;
}
/***************************************************************************
                 				RESPONSIVE
****************************************************************************/
/*************************** 768 - 1024 px *********************************/
@media screen and (max-width: 1024px){
	body { height : 112em; }
	.boite, .boite2 { width: 90%; }
	#map 	{ height:49em; }
	.mapZoom { animation:slideOut 0.8s; }
	aside 	{height:19em; overflow:hidden; }
	aside img { height:3em; width:3em;}
	section {display: flex; flex-direction: column;}
	@keyframes slideIn {
		0% 		{height: 0;}
		100% 	{height: 19em;}
	}
	@keyframes slideOut {
		0%		{height:45em;}
		100%	{height: 28em;}
	}
	aside h2 { margin-bottom:0; }
	aside ul { margin: 0 auto; 	}
	aside p { text-align: center; }
	aside button { width:40%; }
	#confirmBox { width: 90%; }
}
/**************************** <= 768 px ************************************/
@media screen and (max-width: 768px){
	body { height : 106em; }
	#popUp {top:6em; height:32em;}
	#logo h1 { display:none; }
	aside h3 {font-size:1em;}
	#menu { display: none;}
	.show-menu { display: flex; margin: 2em; margin-right:0}
	#barreLaterale {
		border:1px solid #000;
		position: absolute;
		top:6em;
		right:1em;
		background-color: #fff;
	}
	#barreLaterale div { padding:2em; }
	#carreBlanc { width:100%; margin:3em auto; }
	#carreBlanc h2 { font-size: 1.4em; }
	aside button { width:250px; }
	#confirmBox { height:15em; }

	
}