<style>

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
body{
  #background: #000000;
}
.bar_location{
	align-items: center;
	justify-content: center;
	height: 10%;
	}
nav{
	margin: 0 auto;
	background: #123E49;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 98%;
	height: 100%;
	#padding: 0 100px;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
}
nav .logo{
	width: 50px;
	height: 50px;
	object-fit: scale-down;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
}
nav .nav-items{
	width: 50px;
	height: 50px;
	object-fit: scale-down;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	flex: 2;
	#padding: 0 0;
}
nav .nav-items li{
	margin: 0px 50px;
	list-style: none;
	padding: 0 15px;
}
nav .nav-items li a{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}
nav .nav-items li a:hover{
  color: #ff3d00;
}

nav .nav-search{
	width: 50px;
	height: 50px;
	object-fit: scale-down;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	border: 2px solid red;
}

nav form{
	padding: 2px;
	background: #123E49;
	#min-width: 18%!important;
	border-radius: 5px;
	border: 1px solid rgba(155,155,155,0.2);
  	width: 50px;
	height: 100%;
	#object-fit: scale-down;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
}

nav form .search-data{
  width: 100%;
  height: 100%;
  padding: 0 10px;
  font-size: 17px;
  border: none;
  font-weight: 500;
  opacity: 1;

}

nav form button{
	padding: 0 15px;
	height: 50%;
	color: #fff;
	font-size: 17px;
	background: #ff3d00;
	border: none;
	border-radius: 2px;
	cursor: pointer;
}
nav form button:hover{
  background: #e63600;
}
nav .menu-icon,
nav .cancel-icon,
nav .search-icon{
  width: 40px;
  text-align: center;
  margin: 0 50px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  display: none;
}
nav .menu-icon span,
nav .cancel-icon,
nav .search-icon{
  display: none;
}

.search_select {
	background-color: #FFFFFF;
	border: 0px;
	width: 30px;
}

.page {
	text-align: center;
}

.box {
	display: inline-block;
	margin:0.20%;
	margin-top:20px;
	aspect-ratio : 1 / .99;
	padding-bottom: 0%;
	background: #fff;
	border: solid #ddd 1px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.box img {
	max-width: 100%;
	height: 80%;
}

.box_pieces {
	display: inline-block;
	margin:1px;
	overflow: hidden;
	aspect-ratio : 1 / .95;
	padding-bottom: 0%;
	background: #fff;
	border: solid #ddd 1px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.box_pieces img {
	max-width: 90%;
	height: 75%;
	cursor: pointer;
	#border: solid black 1px;
	#border-radius: 10px 10px;
}

.space{
  margin: 10px 0;
}

.btn {
	width: 49%;
	padding: 4px 0px;
	background: #123E49;
	color: #FFF;
	border-radius: 5px;
	text-align: center;
	font-size: 1.4vw;
	font-family: 'Montserrat', sans-serif;
	font-family:Verdana, Geneva, sans-serif;
	cursor:pointer;
}
.select {
	max-width: 200px;
	height:40%;
	border-radius: 2px;
}

.txt {
	width: 33%;
	padding: 4px 0px;
	background: #FFFFFF;
	color: #111111;
	border-radius: 5px;
	text-align: center;
}

.piedpage {
	display: block;
	position: fixed;
	bottom: 0px;
	left: 1%;
	right: 1%;
	width: 98%;
	height: 20px;
	padding-top: 0px; /*décalage du texte vers le bas*/
	text-align: center;
	text-indent: 0px; /*décalage du texte vers la droite*/
	color: #FFFFFF;
	background: #123E49;
	border-radius: 5px 5px;
}

/* CSS specific to Windows */
@supports not (-webkit-touch-callout: none) {
.box {
	font-size: 0.9vw;
	width: 24%;
}
.box_pieces {
	font-size: 0.9vw;	
}
.btn {
	font-size: 1vw;
	font-family: 'Montserrat', sans-serif;
}
	
}

/* CSS specific to iPhone */
@supports  (-webkit-touch-callout: none) {
nav{
    padding: 0px;
  }
  nav .logo{
    flex: 2;
    text-align: center;
  }
 
 nav .nav-search{
	display: none;
}
  nav .nav-items{
    position: fixed;
    z-index: 99;
    top: 70px;
    width: 100%;
    left: -100%;
    height: 100%;
    padding: 10px 50px 0 50px;
    text-align: center;
    background: #123E49;
    display: inline-block;
    transition: left 0.3s ease;
  }
  nav .nav-items.active{
    left: 0px;
  }
  nav .nav-items li{
    line-height: 40px;
    margin: 30px 0;
  }
  nav .nav-items li a{
    font-size: 20px;
  }
  nav form{
    position: absolute;
    top: 80px;
    right: 50px;
	height: 50px;
	width: 250px;
    opacity: 0;
    #pointer-events: none;
    #transition: top 0.3s ease, opacity 0.1s ease;
	#border: 10px solid #1e232b;
  }
  nav form.active{
    top: 95px;
    opacity: 1;
    pointer-events: auto;;
  }
  nav form:before{
    position: absolute;
    content: "";
    top: 0px;
    right: 10px;
    width: 0;
    height: 0;
    z-index: -1;
    border: 10px solid transparent;
    border-bottom-color: #1e232b;
    margin: -30px 0 0;
  }
  
  nav .menu-icon{
    display: block;
  }
  nav .search-icon,
  nav .menu-icon span{
    display: block;
  }
  nav .menu-icon span.hide,
  nav .search-icon.hide{
    display: none;
  }
  nav .cancel-icon.show{
    display: block;
  }
 .select {
	max-width: 150px;
	height:25%;
	border-radius: 2px;
}
.btn {
	font-size: 1.5vw;
	font-family: 'Montserrat', sans-serif;
}
.piedpage {
	font-size: 3vw;
}

@media only screen  and (orientation : landscape) {
.bar_location{
	height: 20%;
	}
.box, .box_pieces {
	font-size: 1vw;
	width: 24%;
}
.piedpage {
	font-size: 2vw;
}
}
@media only screen and (orientation : portrait) {

.box {
	font-size: 1.5vw;
	width: 32%;
}
.box_pieces {
	font-size: 1.5vw;
	width: 24%;	
}

.btn {
	font-size: 1.7vw;
	font-family: 'Montserrat', sans-serif;
}

}
}

</style>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Lego</title>
      <link rel="stylesheet" href="style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
   	<div class="bar_location">
      <nav>
         <div class="menu-icon">
            <span class="fas fa-bars"></span>
         </div>
         <div class="logo">
            	<img src="lego.png" width="50" height="50" </img>
         </div>
         <div class="nav-items">
            <li><a href="index.php">Mes&nbsp;lego</a></li>
			<li><a href="delete.php">Supprimer</a></a></li>
			<li><a href="search.php">Ajouter</a></li>
			<li><a href="categories.php">Categories</a></li>
         </div>

         <div class="search-icon">
            <span class="fas fa-search"></span>
         </div>
         <div class="cancel-icon">
            <span class="fas fa-times"></span>
         </div>

	<form class="text" action="mespieces.php" style="margin:auto">
	<input style="width: 120px;height:50%;border-radius: 2px 0 0 2px;border: 0px" type="text" name="part_num" placeholder="Recherche..."search2">
	<select style="width: 100px;height:50%;	border-radius: 0px;" class="search_select" name="etat" >
	<option value=""></option>
	<option value="neuf">neuf</option>
	<option value="Occasion">Occasion</option>
	</select>
	<button type="submit"><i class="fa fa-search"></i></button>
	</form>
      </nav>
      <script>
         const menuBtn = document.querySelector(".menu-icon span");
         const searchBtn = document.querySelector(".search-icon");
         const cancelBtn = document.querySelector(".cancel-icon");
         const items = document.querySelector(".nav-items");
         const form = document.querySelector("form");
         menuBtn.onclick = ()=>{
           items.classList.add("active");
           menuBtn.classList.add("hide");
           searchBtn.classList.add("hide");
           cancelBtn.classList.add("show");
         }
         cancelBtn.onclick = ()=>{
           items.classList.remove("active");
           menuBtn.classList.remove("hide");
           searchBtn.classList.remove("hide");
           cancelBtn.classList.remove("show");
           form.classList.remove("active");
           cancelBtn.style.color = "#ff3d00";
         }
         searchBtn.onclick = ()=>{
           form.classList.add("active");
           searchBtn.classList.add("hide");
           cancelBtn.classList.add("show");
         }
      </script>