.navbar{
  background:#0e0e0e;
  border-bottom:1px solid rgba(255,215,0,.28);
  position:sticky;
  top:0;
  z-index:1000;
}

.navbar-container{
  max-width:1400px;
  margin:0 auto;
  padding:10px 16px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
}

.navbar-brand{
  font-size:1.7rem;
  font-weight:800;
  color:gold;
  text-decoration:none;
  letter-spacing:.3px;
  transition:filter .2s ease;
}
.navbar-brand:hover{ filter:brightness(1.1); }

.navbar-search{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:8px;
}
.navbar-search input{
  height:38px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,215,0,.30);
  background:#111;
  color:#fff;
  outline:none;
  width:clamp(220px, 42vw, 520px);
  transition:box-shadow .2s ease, border-color .2s ease;
  font-size:.95rem;
}
.navbar-search input:focus{
  border-color:gold;
  box-shadow:0 0 0 3px rgba(255,215,0,.12);
}
.navbar-search button{
  height:38px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,215,0,.40);
  background:gold;
  color:#111;
  font-weight:800;
  cursor:pointer;
  transition:filter .2s ease;
}
.navbar-search button:hover{ filter:brightness(1.06); }

.navbar-links{
  list-style:none;
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  padding:0;
  justify-self:end;
  flex-wrap:wrap;
}
.navbar-links a{
  color:#eee;
  text-decoration:none;
  font-weight:600;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.navbar-links a:hover{
  background:rgba(255,215,0,.10);
  border-color:rgba(255,215,0,.35);
  color:#fff;
}

/* lien actif */
.navbar-links a.is-active{
  background:gold;
  color:#111;
  border-color:rgba(255,215,0,.45);
}
.navbar-links a.is-active:hover{
  background:gold;
  color:#111;
}

@media (max-width: 980px){
  .navbar-container{
    grid-template-columns:auto 1fr;
    grid-auto-rows:auto;
    gap:10px;
  }
  .navbar-search{
    grid-column:1 / -1;
    justify-self:stretch;
  }
  .navbar-search input{
    width:100%;
  }
  .navbar-links{
    justify-self:end;
    gap:10px;
  }
}

@media (max-width: 520px){
  .navbar-brand{ font-size:1.45rem; }
  .navbar-links a{ padding:6px 8px; }
}