map{
  width: 71%;
  height: 100%; 
  right: 0;
  top: 0px;
  position: absolute;
  overflow: hidden;
}
@media (max-width:690px){
	#map {
		position: fixed;
		width: 100%;
		top: 50px;
		height: 90%;
	}
	#sidenav{
		position: fixed;
		width: 60%;
		height: 96%;
	}
}
#sidenav-button,
#sidenav-close{
	touch-action:manipulation
}@media (min-width:690px){
	#sidenav-button,
	#sidenav-close{
		display:none
	}
}
@media (max-width:690px){
	#sidenav{
		position:fixed;
		height: 96%;
		overflow-x:hidden;
		overflow-y:auto;
		overflow:hidden auto;
		-ms-scroll-chaining:none;
		overscroll-behavior:contain;
		visibility:hidden;
		transform:translateX(-110vw);
		will-change:transform;
	}#sidenav:target{
		visibility:visible;
		transform:translateX(0);
	}
}
.leaflet-popup-content {
  font-size: 11px;
  /*max-width: 230px;*/
}
.html{
  font-size: .9em;
}
.icon{
  position: absolute;
  top: -30px;
  right: -30px;
  background: url('icon/icon.png');
  opacity: 0.5;
  height: 40px;
  width: 40px;
}
html{
  font-size: .9em;
} 
a{
  text-decoration: none;
  color: #d9d9d9
}
b{
  font-size: 13px;
  font-weight: bold;
  font-family: Arial;
  color: #252525;
}
p{
  font-size: 13px;
  font-family: Arial;
  color: #737373;
}
pre{
  margin-bottom: 25px;
}
titre{
  line-height: 1.8em;
  font-size: 15px;
  font-weight: normal;
  font-family: Arial;
  color: #252525;
}
hr {
  border: 0;
  border-top: 1.8px solid #bdbdbd;
  padding-top: 20px;
  padding-bottom: 14px;
}
.sidenav {
  height: 96%;
  width: 25%; /*194px;*/ 
  border-width: 1px;
  border-style: solid;
  border-color: #bdbdbd;
  /*border-radius: 5px 5px 5px 5px;*/
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0px;
  left: 0px;
  background-color: #ffffff; /*#eef3ef; /* #eceff1 #f0f0f0; */
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: hidden; 
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.dtlist input {
  font-family: Arial;
  font-size: 10px;
  margin-top: 10px;
  height: 10px;
/*  width: 225px; */
}
.dtlist datalist {
  /*background-color: white;*/
  border: 1px solid #bdbdbd;
  padding: 5px;
  height: 8px; /* Box size*/
  margin-top: 10px;
  overflow-y: auto;
}
.sidenav input {
  background-color: white;
  border: 1px solid #bdbdbd;
  font-family: sans-serif;
  font-size: 8;
  padding: 5px;
  height: 12px; /* Box size*/
  width: 94%;
  margin-top: 6px;
  overflow-y: auto;
}
/* When over the navigation links, change their color */
.sidenav label:hover {
  color: #252525;
}

/*Legend*/
.legend {
  padding: 6px 8px;
  font: 12px Arial, Helvetica, sans-serif;
  background: #ffffff; /* #f0f0f0; */
  /*background: rgba(255, 255, 255, 0.8);*/
  /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
  /*border-radius: 5px;*/
  line-height: 24px;
  color: #555;
}
.legend h4 {
  text-align: left;
  font-size: 14px;
  margin: 2px 12px 8px;
  color: #777;
}
.legend span {
  position: relative;
  bottom: 3px;
}
.sidenav i {
  width: 2px;/*18px;*/
  height: 4px;
  border-radius: 50%;
  float: left;
  margin: 2px .8px 0 1px;
  opacity: 0.7;
}
.sidenav j {
  width: 1.2px;
  height: 3.2px;
  border-radius: 50%;
  float: left;
  margin: 2px .8px 0 0;
  opacity: 0.7;
}
.hamburger{
	--size:4rem;
	display:flex;
	align-content:center;
	justify-content:center;
	place-content:center;
	padding:1rem;
	box-sizing:border-box;
	border-radius:50%;
	border:1px solid transparent;
	-webkit-margin-start:-1rem;
	margin-inline-start:-1rem;
	block-size:var(--size);
	inline-size:var(--size);
	outline:none;
/*	transition:border-color .25s ease,background-color .25s ease*/
}.hamburger:hover{
	border-color:hsl(var(--brandHSL)/50%)
}.hamburger:hover svg>line{
	color: "#252525";
/*	stroke:hsl(var(--brandHSL))*/
}.hamburger:active{
	background:hsl(var(--brandHSL)/20%)
}.hamburger>svg{
	width:100%
}.hamburger>svg>line{
	stroke:#bdbdbd;
	stroke-width:7px;
}