#navbar {
  position:fixed; top:0; width:100%; z-index:1000;
  display:flex; justify-content:center; align-items:center;
  padding:.25rem 0; backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-100%);
  transition:background-color var(--transition-speed) ease, opacity .35s ease, transform .35s ease, visibility .35s ease;
}
#navbar.hero-exited {
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
#navbar nav {
  position:relative;
  display:flex; justify-content:space-between; align-items:center;
  max-width:1200px; width:100%; padding:.25rem 2rem;
  border-radius:12px; transition:background-color var(--transition-speed) ease;
}

#navbar.scrolled {
  background: var(--bg-navbar-scrolled);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.nav-menu {
  list-style:none; display:flex; gap:2.5rem; margin:0; padding:0;
  transition:transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
}
.nav-menu li a {
  color:var(--color-accent-nav); font-weight:600; text-decoration:none;
  padding:.7rem 1rem; border-radius:.25rem;
  font-size:1.05rem; letter-spacing:.03em;
  transition:all var(--transition-speed) ease;
}
.nav-menu li a:hover {
  color:var(--color-secondary); background-color:var(--bg-hover-link);
  transform:translateY(-2px);
}
.nav-menu.desktop-view{width:100%; max-width:none; margin:0;}
.nav-menu.desktop-view li{display:flex; align-items:center;}

.nav-social-links {
  display:flex;
  align-items:center;
  gap:.35rem;
}
.mobile-nav-socials {display:none;}
.nav-menu .nav-social-links a {
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:2.5rem;
  height:2.5rem;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:.25rem;
  font-size:1rem;
  line-height:1;
}
.nav-menu .nav-social-links a i {
  display:grid;
  place-items:center;
  width:1em;
  height:1em;
  line-height:1;
}
.nav-menu .nav-social-links a:hover,
.nav-menu .nav-social-links a:focus-visible {
  color:var(--color-secondary);
  border-color:rgba(255,213,79,.65);
  background:var(--bg-hover-link);
  transform:translateY(-2px);
}

.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0;
}

#menu-toggle {
  display:none; position:fixed; top:50%; right:1rem; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; z-index:1001;
  width:4rem; height:4rem; display:flex;
  justify-content:center; align-items:center; flex-direction:column;
}
#menu-toggle span {
  display:block; width:2.2rem; height:.2rem; margin:.3rem 0;
  background:var(--color-ham-nav); border-radius:2px;
  transition:transform .35s ease, opacity .35s ease, height .35s ease;
  transform-origin:center;
}
#menu-toggle.open span:nth-child(1){transform:translateY(.75rem) rotate(45deg);}
#menu-toggle.open span:nth-child(2){opacity:0;}
#menu-toggle.open span:nth-child(3){transform:translateY(-.75rem) rotate(-45deg);}

.mobile-overlay {
  position:fixed; inset:0; background:var(--bg-overlay);
  backdrop-filter:blur(6px); opacity:0; pointer-events:none;
  transition:opacity .35s ease; z-index:998;
}
.mobile-overlay.active{opacity:1; pointer-events:auto;}
body.menu-open{overflow:hidden; touch-action:none;}

@media(max-width:659px) {
  #menu-toggle{display:flex; width:48px; height:48px;}
  #navbar nav{justify-content:flex-end; padding:16px 24px;}
  .mobile-nav-socials {
    position:fixed;
    top:50%;
    left:1.25rem;
    z-index:1001;
    display:flex;
    align-items:center;
    gap:.45rem;
    transform:translateY(-50%);
  }
  .mobile-nav-socials a {
    display:grid;
    width:2rem;
    height:2rem;
    place-items:center;
    border:1px solid rgba(255,255,255,.16);
    border-radius:.25rem;
    color:var(--color-accent-nav);
    text-decoration:none;
  }
  .mobile-nav-socials a i {
    font-size:.85rem;
  }
  .mobile-nav-socials a:hover,
  .mobile-nav-socials a:focus-visible {
    color:var(--color-secondary);
    border-color:rgba(255,213,79,.65);
    background:var(--bg-hover-link);
  }
  .nav-social-item{display:none !important;}
  #menu-toggle span{width:30px; height:2px; margin:4.5px 0;}
  #menu-toggle.open span:nth-child(1){transform:translateY(12px) rotate(45deg);}
  #menu-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
  #menu-toggle.open span:nth-child(1),
  #menu-toggle.open span:nth-child(3){height:1.5px;}

  .nav-menu {
    position:fixed; top: 40px; right:10px; flex-direction:column;
    background:var(--bg-mobile-menu); padding:32px 24px; gap:24px;
    width:max-content; min-width:180px; border-radius:12px;
    opacity:0; pointer-events:none; transform:translateX(110%);
    transition:transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
    box-shadow:var(--shadow-mobile-menu);
  }
  .nav-menu.mobile-active{opacity:.95; pointer-events:auto; transform:translateX(0);}
  .nav-menu li{opacity:0; transform:translateY(15px); display:flex; justify-content:center;}
  .nav-menu li a{
    width:100%; text-align:center; color:var(--color-mobile-text);font-size:18px; padding:12px 16px;
    -webkit-tap-highlight-color:transparent;
    -webkit-user-select:none; -moz-user-select:none;
    -ms-user-select:none; user-select:none;
    -webkit-touch-callout:none; touch-action:manipulation;
  }
  .nav-social-links a{width:2.75rem; height:2.75rem; padding:0;}
  .nav-menu.mobile-active li{animation:menuItem .4s ease forwards;}
  .nav-menu.mobile-active li:nth-child(1){animation-delay:.05s;}
  .nav-menu.mobile-active li:nth-child(2){animation-delay:.15s;}
  .nav-menu.mobile-active li:nth-child(3){animation-delay:.25s;}
  .nav-menu.mobile-active li:nth-child(4){animation-delay:.35s;}
  .nav-menu.mobile-active li:nth-child(5){animation-delay:.45s;}
  .nav-menu.mobile-active li:nth-child(6){animation-delay:.55s;}
}

@media(min-width:660px) {
  #menu-toggle{display:none;}
  .nav-menu:not(.desktop-view){display:none;}
  .nav-menu.desktop-view {
    display:grid;
    grid-template-columns:minmax(0, 1fr) repeat(6, max-content) minmax(0, 1fr);
    align-items:center;
    gap:1rem;
  }
  .nav-menu.desktop-view > li:first-child {
    grid-column:2;
  }
  .nav-menu.desktop-view .nav-social-item {
    grid-column:8;
    grid-row:1;
    justify-self:end;
  }
}

@media(min-width:660px) and (max-width:1099px) {
  #navbar nav{padding:.25rem 1rem;}
  .nav-menu li a{padding:.6rem .45rem; font-size:.88rem;}
  .nav-menu .nav-social-links{gap:.25rem;}
  .nav-menu .nav-social-links a{width:2.25rem; height:2.25rem; padding:0;}
}

@media(min-width:1100px) {
  .nav-menu.desktop-view{gap:2.5rem;}
}

@keyframes menuItem {
  from{opacity:0; transform:translateY(15px);}
  to{opacity:1; transform:translateY(0);}
}

@media (max-width: 659px) and (orientation: landscape) {

  #navbar nav {
    padding: 15px 15px;
  }

  .nav-menu {
    top: 28px;
    right: 8px;
    padding: 16px 18px;
    gap: 12px;
    min-width: 150px;
  }

  .nav-menu li a {
    font-size: 15px;
    padding: 8px 12px;
  }

  .nav-menu li {
    transform: translateY(8px);
  }

  #menu-toggle {
    width: 40px;
    height: 40px;
  }

  #menu-toggle span {
    width: 24px;
    height: 2px;
    margin: 3px 0;
  }

  #menu-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  #menu-toggle.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* Copyright RZU Informatique */