@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');
 
 :root {
  --charteColor1: #908270;
  --charteColor1: #585552;
  --charteColor1L: #C59A6F;
  --charteColor2: #eb8905;
  --charteColor2: #FFB441;
  --charteColor2L: #F9C988;
  --charteColor3: #9f6e33;
  --charteColor3L: #9f6e33;
  --charteColor4: #f8f9fa;
  --charteColor4L: #f8f9fa;
  --charteColor5: #ececec;
  --charteColor5L: #ececec;
  
  --charteVert: #8DCD00;
  --charteVertLight: #DDFA9D;
  --charteVertDark: #3C5800;
  --charteGris: #f8f9fa;
  --charteGris2: #ececec;
  --charteGrisDark: #656565;
  --charteRed: #D20000;
  --charteBlue: #005c9f;
  --charteBlueLight: #6BC1FF;
}




*{
box-sizing: border-box; 
font-family: 'Poppins', sans-serif;
}
body{padding:0; margin:0;
background : #f8f9fa;}

table
{
border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
padding:0px;
margin:0px;
background : white;
border-radius:10px;
}





/* ----------------------------menu------------------------ */

#menuAction{
color:var(--charteColor1);	
position:absolute;
	left:15px;
	bottom:10px;
	z-index:3;
	font-size:25px;
	cursor:pointer;
	transform:rotate(45deg);
	
}

.menu:hover #menuAction {
  /* color: red !important; */
  	animation: punaise 2s linear infinite;

}


@keyframes punaise {
  0% {
    /* transform:rotate(45deg); */
	bottom:10px;
  }
  50% {
    transform:rotate(360deg);
	bottom:10px;
    
  }
  
  60% {
	bottom:0px;
  }
  
   70% {
    /* transform:rotate(360deg); */
	bottom:14px;
  }
  
   80% {
    /* transform:rotate(360deg); */
	bottom:10px;
    transform:rotate(360deg);
  }
  100% {
    transform:rotate(405deg);
  }
}

.menu{
	position:relative;
	border-right:1px solid silver;
	height:calc(100% - 5px);
	width:100%;
	background-color:white;
	}

.menuButton{
	display:flex;
	/* FLEX-WRAP:wrap; */
	width:calc(100% - margin);
    border:1px solid var(--charteColor1);
	border-radius:5px;
	padding:5px;
	ALIGN-ITEMS:center;
	/* ALIGN-CONTENT:flex-start; */
	margin:5px;
	margin-top:5px;
	cursor:pointer;
	
	transition:0.8s;
	/* border:1px solid blue; */
	}
	
.menuButton:hover{
	border:1px solid var(--charteColor1);
	background-color:var(--charteColor2);
	/* background-color:white; */
	transition:0.3s;
}



.menuButton>nav{
    padding-left:10px;
	display:block;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	width:150px;
	/* border:1px solid red; */
	
}
.menuButton>i{
    color: var(--charteColor1);
	font-size:25px;
	padding-right:5px;
	width:25px;
	}
	
.titreMenu{
	position:relative;
	display:flex;
	/* border:1px solid red; */
	width:200px;
	padding-bottom:10px;
	padding-top:10px;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	JUSTIFY-CONTENT:center;
	}
	

/* ----------------------------menu------------------------ */

.main{
	display:flex;
	width:100%;
	height:100vh;
	
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	
}

/* ----------------------------header ------------------------ */
.headerUser{
	display:flex;
	ALIGN-ITEMS:center;
	/* ALIGN-CONTENT:flex-start; */

	font-size:14px;
	/* border:1px solid black; */
	height:50px;
	margin-top:-5px;
	width:auto;
	}
.headerUser>div>i{
	font-size:30px;
	color:var(--charteColor1);
	}
.headerUser>div:nth-child(2){white-space: nowrap; text-align:left; color:var(--charteColor1);}

.headerUser>div{
	margin-right:5px;
	}
/* ----------------------------header ------------------------ */





.header{
    color: var(--marronCharte);
	background : white;
}

.mainMenu{
	width:200px;
	height:100%;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	transition:0.3s;
}

.mainMenuClose{
	width:50px;
	height:100%;
	/* display:none; */
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	transition:0.3s;
}

.mainMenuClose:hover{width:200px;}

.mainContenu{
	/* border:1px solid red; */
	width:calc(100% - 200px);
	height:100%;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	flex:1;
	
}

.footer{
	text-align:center;
	width: 100%;
	height:50px;
	box-shadow: 10px 0px 10px 5px rgb(213 213 213 / 53%);
	border-top-left-radius : 10px;
	border-top-right-radius : 10px;
	background : white;
	border:1px solid var(--charteGris2);

}

.header{
	display:flex;
	justify-content:space-between;
	height:50px;
	text-align:center;
	width: calc(100%);
	box-shadow: 10px 0px 10px 5px rgb(213 213 213 / 53%);
	border-bottom-left-radius : 10px;
	border-bottom-right-radius : 10px;
	padding-top:5px;
}

.contenu{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-CONTENT:flex-start;
	ALIGN-CONTENT:flex-start;
	flex:1;
	
	width: calc(100%);
	height:calc(100% - 102px);
	min-width:800px;
	/* box-shadow: 10px 0px 10px 5px rgba(213,213,213,0.53); */
	/* border-bottom-left-radius : 10px; */
	/* border-bottom-right-radius : 10px; */
	/* border:1px solid red; */
	/* background-color:red; */
	overflow:auto;

}

.flexLeftWrap{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
}

.flexLeft{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
}

.flexRight{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :right;
}

.flexCenterWrap{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
}

.flexCenter{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
}

.flexCenterTopWrap{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :center;
}

.flexLeftTopWrap{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
}

.flexCenterTop{
	display:flex;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :center;
}

.alertBox{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	border:2px solid #920000;
	border-radius:5px;
	margin:5px 10px 5px 10px;
	padding:5px 10px 5px 10px;
	
	color:#920000;
	background-color:#92000033;
}

.iBase1{
	font-size:20px;
	padding:0px 5px 0px 5px;
	color:var(--charteColor1);
}

.iBase2{
	font-size:20px;
	padding:0px 5px 0px 5px;
	color:var(--charteColor1);
}

.listeVilles{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
	
	position:absolute;
	top:40px;
	left:200px;
	border:1px solid red;
	width:auto;
	min-width:352px;
	height:auto;
	min-height:35px;
	background-color:white;
	border:1px solid var(--charteColor1);
	border-radius:0px 0px 10px 10px ;
	display:none;
	padding-bottom:10px;
	z-index:3;
}

.listeVilles div{
	width:100%;
	height:25px;
	font-size:14px;
	border-bottom:1px solid var(--charteColor1);
	cursor:pointer;
	transition:0.3s;
	margin:0px 5px 0px 5px;
}

.listeVilles div:hover{
	font-weight:bold;
	background-color:var(--charteColor1L);
	transition:0.3s;
}

.kdTitre1{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :left;
	width:100%;
	padding:0px 20px 0px 5px;
	height:30px;
	color:var(--charteColor1);
	font-size:18px;
	font-weight:bold;
	
	border-bottom:1px solid var(--charteColor1);
	
	margin:10px 0px 10px 0px;
}


.kdFlexTopLeft{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :left;
}

.kdFlexTopRight{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :right;
}

.kdFlexTopCenter{
	display:flex;
	FLEX-WRAP:wrap;
	ALIGN-ITEMS:flex-start;
	ALIGN-CONTENT:flex-start;
	justify-content :center;
}

.kdMsgEphemereOff{
	
	opacity: 0;
	
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	flex:1;
	height:100%;
	
	margin:10px;
	
	border:1px solid var(--charteVertDark);
	border-radius:10px;
	background-color:var(--charteVert);
	
	color:var(--charteVertDark);
	font-weight:bold;
	
	transition:1s;
}

.kdMsgEphemereOn{
	display:flex;
	ALIGN-ITEMS:center;
	ALIGN-CONTENT:center;
	justify-content :center;
	
	flex:1;
	height:100%;
	
	margin:10px;
	
	border:1px solid var(--charteVertDark);
	border-radius:10px;
	background-color:var(--charteVert);
	
	color:var(--charteVertDark);
	font-weight:bold;
	
	transition:1s;
}