@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&display=swap');

/* Navigation globale THE GATE — SERIES */
.gatebar{
  height:68px;
  border-bottom:1px solid #24292d;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 3vw;
  background:#050708;
  position:sticky;
  top:0;
  z-index:100;
}
.gate-brand{
  color:#fff;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  flex:0 0 auto;
}
.gate-brand strong{
  font:700 31px/25px "Barlow Condensed",Inter,Arial,sans-serif;
  letter-spacing:1px;
}
.gate-brand span{
  font:600 8px Inter,Arial,sans-serif;
  letter-spacing:1.4px;
  margin-top:6px;
}
.gate-nav{display:flex;gap:38px;align-self:stretch}
.gate-nav a{
  display:flex;
  align-items:center;
  font:600 17px "Barlow Condensed",Inter,Arial,sans-serif;
  letter-spacing:.5px;
  color:#eee;
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding:1px 0 0;
}
.gate-nav a:hover{color:#ffc400}
.gate-nav a.active{color:#ffc400;border-bottom-color:#ffc400}

/* La sidebar SERIES commence sous la navigation globale. */
.gatebar + .sidebar{top:68px}

@media(max-width:800px){
  .gatebar{padding:0 18px}
  .gate-nav{gap:20px}
  .gate-nav a{font-size:15px}
  .gate-brand strong{font-size:27px}
}
@media(max-width:560px){
  .gatebar{height:60px;padding:0 12px}
  .gate-brand span{display:none}
  .gate-brand strong{font-size:23px}
  .gate-nav{gap:12px}
  .gate-nav a{font-size:13px}
  .gatebar + .sidebar{top:60px}
}