p{

	color:#fff;
}

body::-webkit-scrollbar{

	width:10px;
}


body::-webkit-scrollbar-thumb{
	background-color:#729EBF ; 
   background-image:linear-gradient(#333A40 0% , #729EBF, #333A40 100%);  
}


html {
  box-sizing: border-box;
  font-family: lato;
  font-size: 20px;
  font-weight: 200;
  width: 100%;
}

body
{
background:#0c1021;
/* margin-top:118px; */
margin-bottom:60px;
}


.menuhaut ul{
   display: table;
   width: 100%;
   padding: 0;
   padding-top:10px;
   margin:auto;
            
   background-color:#729EBF; 
   background-image:-webkit-linear-gradient(top, #333A40 0% , #729EBF);
   background-image: linear-gradient(to bottom, #333A40 0%, #729EBF); 
}

.menuhaut ul li a{ 

height: 33px; 
display: block;
margin-left:  20px ;
text-decoration: none;
text-align:center;
color: #fff;
font-family: "Times New Roman", Times, "Liberation Serif", FreeSerif, serif;
font-size:1.5em ;		 
}


.menuhaut{
display: flex;
position: fixed;
top: 0px;
left: 0;
width: 100%;
z-index:1;
background:#1e3c72;
border-bottom:1px solid #729ebf;
justify-content : center ;
align-items : center ;
}


a{
  text-decoration:none; 
  color: white;
  /* text-transform: uppercase; */
}

button {
	
    margin: 10px;
    padding: 3px 20px;
	
    border: none;
    background: none;
    background: none;
    border-radius: 5px;
    font-size: 25px;
    cursor: pointer;
    /* position: relative; */
    /* z-index: 1; */
}

button .text {    
    position: relative;
    z-index: 2;
    display: block;
	letter-spacing:3px;
}

button:before, button:after {
    position: relative;
    z-index: 1;
}

button:active {
    transform: translateY(1px);
}

button:active .text {
    transform: scale(0.95);
}

button.glass {
	left:7%;
	 width:80%;
    overflow: hidden;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    background-image: radial-gradient(circle at center, rgba(0, 120, 170, 0.25), rgba(0, 80, 110, 0.5));
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.75), inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 -6px 6px -3px rgba(0, 129, 174, 0.2);
    position: absolute;
}

button.glass:after {
	
    content: "";
    background: rgba(0, 167, 225, 0.2);
    display: block;
    position: absolute;
    z-index: 0;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(3px) saturate(400%);
    -webkit-backdrop-filter: blur(3px) saturate(400%);
}

button.glass:before {
 content: "";
 display: block;
 position: absolute;
 width: calc(100% - 4px);
 height: 35px;
 background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
 top: 2px;
 left: 2px;
 border-radius: 30px 30px 200px 200px;
 opacity: 0.7;
}

button.glass:hover {
 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

button.glass:hover:before {
 opacity: 1;
}

button.glass:active {
 text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
 box-shadow: 0 3px 8px rgba(0, 0, 0, 0.75), inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 -6px 6px -3px rgba(0, 129, 174, 0.2);
}

button.glass:active:before {
 height: 25px;
}
		

.numchap{
	position: relative;
	font-weight:bold;
	top:20px;
	color:#ff6400;
}


 h1
{
text-align: center; 
font-size:2.30em ;
text-shadow: 3px 3px 3px #808080;
letter-spacing:2px;
} 


.search-form {
  width: 80%;
  padding: 20px;
border: 1px solid black;
}

input {
  width: 100%;
  padding: 7px;
/* outline:none; */
border: 0px solid ;
font-size: 30px;
}

.search-form {
  /* width: 80%; */
  padding: 20px;
/* border: 1px solid black; */
}
.chiffre{
	font-weight:bold;
	color:#00fefe;
}

.result-plus-compteur{
display:flex;
margin-bottom: 100px;
margin:auto;
text-align: center;
outline:none;
border: 10px solid #7f90b5;
width: 90%;
left: -10%;
position: relative;
position: sticky;
top: 52px;
z-index: 2;
border-radius: 5px;
font-size: 40px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
}

.name{
	outline:none;
	
}


::placeholder{
	color:#607D8B;
	transition:  2s;
}

input:focus::-webkit-input-placeholder{
	opacity:0;
}

input:focus::-moz-placeholder{
	opacity:0;
}

input:focus::-ms-placeholder{
	opacity:0;
}

input.search {

  outline:none;
}

.search-result{
display: flex;
align-items: center;
padding-right:5%;
padding-left:5%;
background-color:#7f90b5;
color:#FFFFFF;
font-weight:bold;
}



.suggestions {
	
  margin: 0;
  padding: 20px;
  position: relative;
  margin-top:50px;
}

.suggestions li {

  background: white;
  list-style: none;
  border-bottom: 1px solid #D8D8D8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
  margin: 0;
  padding: 20px;
  /* transition: background 0.2s; */
  display: flex;
  justify-content: space-between;
  text-transform: capitalize;
}



span.population {
  font-size: 15px;
}

.hl {
  background: #ffc600;
  color:black;
}

/* barre de progression */

 .progress-bar {
    width: 100%;
	padding-left:1px;
    background-color:#0e909c;
    height: 30px;
    margin-top: -40px;
    border-radius: 5px;
    overflow: hidden;
  }

  .progress {
    width: 0%;
    height: 100%;
    background-color: #263238;
    text-align: center;
    line-height: 30px;
    color: white;
    transition: width 0.3s ease-in-out;
  }
/* barre de progression */