/* Navigation presentation. The existing buttons retain their routes and labels. */
body #app .shell > .topbar{
  height:auto;
  min-height:64px;
  overflow:visible!important;
  flex-wrap:wrap;
  gap:8px 16px;
}
body #app .shell > .topbar .nav.nav-icons{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  flex-wrap:nowrap;
  justify-content:flex-end;
  gap:8px;
  width:max-content;
  max-width:100%;
  min-width:0;
  padding:8px;
  overflow:visible!important;
  box-sizing:border-box;
}
body #app .shell > .topbar .nav.nav-icons .nav-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  border:1px solid #dcd3d8;
  border-radius:13px;
  background:#fdfbf8;
  color:#402039;
  box-shadow:0 1px 2px rgb(50 16 47 / 4%);
  overflow:visible!important;
  animation:none;
  transform:none;
  transition:background-color .15s,border-color .15s,color .15s;
}
body #app .shell > .topbar .nav.nav-icons .nav-icon:hover{
  background:#f4edf5;
  border-color:#bca4c1;
}
body #app .shell > .topbar .nav.nav-icons .nav-icon.active{
  background:#e9dbef;
  border-color:#c8abd4;
  color:#5b2472;
  box-shadow:inset 0 0 0 1px rgb(91 36 114 / 4%);
}
body #app .shell > .topbar .nav.nav-icons .nav-icon:focus-visible{
  outline:2px solid #5b2472;
  outline-offset:3px;
}
body #app .shell > .topbar .nav.nav-icons .logout-btn{
  margin-left:3px;
  color:#fff;
  background:#76876b;
  border-color:#76876b;
}
body #app .shell > .topbar .nav.nav-icons .logout-btn:hover{background:#65745b}
body #app .shell > .topbar .nav-icon:is([aria-label="Catalogue"]){--tev-nav-mask:url("assets/ui/catalogue-solid.svg?v=451")}
body #app .shell > .topbar .nav-icon:is([aria-label^="Commandes"], [aria-label="Mes commandes"]){--tev-nav-mask:url("assets/ui/orders-solid.svg?v=451")}
body #app .shell > .topbar .nav-icon:is([aria-label="Clients"]){--tev-nav-mask:url("assets/ui/clients-solid.svg?v=451")}
body #app .shell > .topbar .nav-icon:is([aria-label="Emailing"]){--tev-nav-mask:url("assets/ui/emailing-solid.svg?v=451")}
body #app .shell > .topbar .nav-icon:is([aria-label="Réglages"]){--tev-nav-mask:url("assets/ui/settings-solid.svg?v=451")}
body #app .shell > .topbar .nav-icon:is([aria-label="Mon compte"], [aria-label="Mon profil"]){--tev-nav-mask:url("assets/ui/profile-solid.svg?v=451")}
body #app .shell > .topbar .nav-icon:is([aria-label="Déconnexion"]){--tev-nav-mask:url("assets/ui/logout-solid.svg?v=451")}
body #app .shell > .topbar .nav-icon:is([aria-label="Catalogue"], [aria-label^="Commandes"], [aria-label="Mes commandes"], [aria-label="Clients"], [aria-label="Emailing"], [aria-label="Réglages"], [aria-label="Mon compte"], [aria-label="Mon profil"], [aria-label="Déconnexion"]) > svg{display:none!important}
body #app .shell > .topbar .nav-icon:is([aria-label="Catalogue"], [aria-label^="Commandes"], [aria-label="Mes commandes"], [aria-label="Clients"], [aria-label="Emailing"], [aria-label="Réglages"], [aria-label="Mon compte"], [aria-label="Mon profil"], [aria-label="Déconnexion"])::before{
  content:"";
  display:block;
  flex:none;
  width:24px;
  height:24px;
  background:currentColor;
  -webkit-mask:var(--tev-nav-mask) center/contain no-repeat;
  mask:var(--tev-nav-mask) center/contain no-repeat;
  pointer-events:none;
}
body #app .shell > .topbar .nav.nav-icons .orders-attention::after{content:none!important;display:none!important}
body #app .shell > .topbar .nav.nav-icons .tev-orders-nav-count{
  position:absolute;
  top:-6px;
  right:-6px;
  bottom:auto;
  left:auto;
  z-index:2;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  min-width:20px;
  min-height:20px;
  max-width:20px;
  max-height:20px;
  aspect-ratio:1;
  padding:0;
  margin:0;
  border:2px solid #f5f1e9;
  border-radius:50%;
  box-sizing:border-box;
  background:#ed3346;
  color:#fff;
  font:700 10px/1 Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  text-align:center;
  box-shadow:none;
  animation:none;
  transform:none;
  pointer-events:none;
}
@media(max-width:600px){
  body #app .shell > .topbar{padding:6px 10px;gap:0 8px;justify-content:space-between}
  body #app .shell > .topbar .nav.nav-icons{gap:7px;margin-left:auto}
  body #app .shell > .topbar .nav.nav-icons .nav-icon{
    flex-basis:40px;width:40px;height:40px;min-width:40px;min-height:40px;border-radius:12px;
  }
}
@media(prefers-reduced-motion:reduce){
  body #app .shell > .topbar .nav.nav-icons .nav-icon{transition:none}
}

/* V464 - menu links behave like native links */
body #app .nav a.nav-icon{text-decoration:none;color:inherit}
body #app a.brand-button{text-decoration:none;color:inherit}