/* Navigation principale : plus lisible, réactive au survol et au défilement. */
.topbar{
  height:88px;
  position:sticky;
  top:0;
  z-index:20;
  gap:clamp(22px,3vw,48px);
  background:rgba(11,13,12,.96);
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}

#navigation{
  gap:clamp(7px,1vw,15px);
  padding:7px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}

#navigation:hover,#navigation:focus-within{
  background:rgba(255,255,255,.1);
  border-color:rgba(244,196,48,.5);
  box-shadow:0 7px 22px rgba(0,0,0,.18);
}

#navigation a{
  position:relative;
  isolation:isolate;
  padding:11px 14px;
  border-radius:999px;
  color:rgba(255,255,255,.76);
  font-size:14px;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
  transition:color .2s ease,background .2s ease,transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease;
}

#navigation a::after{
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  background:var(--lime);
  opacity:0;
  transform:scale(.82);
  transition:opacity .2s ease,transform .2s cubic-bezier(.22,.61,.36,1);
}

#navigation a:hover,#navigation a:focus-visible,#navigation a.is-previewed,#navigation a.is-active{
  color:var(--ink);
  outline:0;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.2);
}

#navigation a:hover::after,#navigation a:focus-visible::after,#navigation a.is-previewed::after,#navigation a.is-active::after{
  opacity:1;
  transform:scale(1);
}

.nav-cta{
  padding:13px 18px;
  border-color:rgba(244,196,48,.65);
  font-size:14px;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}

.nav-cta:hover,.nav-cta:focus-visible{background:var(--lime);color:var(--ink);transform:translateY(-2px);outline:0}
.nav-cta:hover span,.nav-cta:focus-visible span{color:var(--ink)}

@media(max-width:1120px) and (min-width:761px){
  .topbar{padding-inline:clamp(20px,3vw,40px);gap:16px}
  #navigation a{padding:10px 9px;font-size:12px}
  .nav-cta{padding:11px 13px;font-size:12px}
}

@media(max-width:760px){
  .topbar{height:66px;position:relative;box-shadow:none}
  #navigation{top:66px;border:0;border-radius:0;padding:15px 20px 25px;background:var(--ink);gap:2px}
  #navigation:hover,#navigation:focus-within{box-shadow:none}
  #navigation a{width:100%;padding:14px 12px;font-size:15px}
}

@media(prefers-reduced-motion:reduce){
  #navigation,#navigation a,#navigation a::after,.nav-cta{transition:none}
}