/* TERROIRS VIVANTS — canonical header/navigation */
body #app .shell>.topbar{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  align-items:center;
  width:100%;
  min-height:64px;
  padding:8px 20px;
  box-sizing:border-box;
  gap:20px;
  background:#f5f1e9;
  border-bottom:1px solid rgba(50,16,47,.14);
  overflow:visible;
}
body #app .shell>.topbar .brand,
body #app .shell>.topbar .brand-button{
  width:230px;
  min-width:230px;
  max-width:230px;
  margin:0;
}
body #app .shell>.topbar .brand-button{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:48px;
  padding:0;
  border:0;
  background:transparent;
  text-decoration:none;
  color:inherit;
}
body #app .shell>.topbar .brand .brand-horizontal{
  display:block;
  width:220px;
  height:47px;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
}
body #app .shell>.topbar .nav.nav-icons{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  overflow:visible;
  white-space:nowrap;
}
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;
  animation:none;
  transform:none;
  transition:background-color .15s,border-color .15s,color .15s;
  text-decoration:none;
}
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}
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;
  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;display:none}
body #app .shell>.topbar .nav.nav-icons .tev-orders-nav-count{
  position:absolute;
  top:-6px;
  right:-6px;
  z-index:2;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  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;
  pointer-events:none;
}

@media(max-width:760px){
  body #app .shell>.topbar{
    grid-template-columns:minmax(140px,170px) minmax(0,1fr);
    min-height:56px;
    padding:6px 10px;
    gap:10px;
  }
  body #app .shell>.topbar .brand,
  body #app .shell>.topbar .brand-button{
    width:170px;
    min-width:140px;
    max-width:170px;
  }
  body #app .shell>.topbar .brand .brand-horizontal{
    width:165px;
    height:40px;
  }
  body #app .shell>.topbar .nav.nav-icons{
    gap:5px;
    overflow-x:auto;
    overflow-y:visible;
    scrollbar-width:none;
  }
  body #app .shell>.topbar .nav.nav-icons::-webkit-scrollbar{display:none}
  body #app .shell>.topbar .nav.nav-icons .nav-icon{
    flex-basis:38px;
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    border-radius:12px;
  }
}
@media(max-width:520px){
  body #app .shell>.topbar{
    grid-template-columns:44px minmax(0,1fr);
    gap:8px;
    padding:6px 8px;
  }
  body #app .shell>.topbar .brand,
  body #app .shell>.topbar .brand-button{
    width:44px;
    min-width:44px;
    max-width:44px;
  }
  body #app .shell>.topbar .brand .brand-horizontal{
    width:44px;
    height:40px;
    object-fit:cover;
    object-position:left center;
  }
}
@media(prefers-reduced-motion:reduce){
  body #app .shell>.topbar .nav.nav-icons .nav-icon{transition:none}
}


/* V528 — stable viewport between admin views */
html{
  overflow-y:scroll;
  scrollbar-gutter:stable;
}
body{
  width:100%;
  min-width:0;
}
body #app,
body #app .shell{
  width:100%;
  min-width:0;
}
body #app .shell>.topbar{
  box-sizing:border-box;
  left:auto;
  right:auto;
}


/* V529 — hard lock desktop header/navigation geometry */
@media (min-width:761px){
  html{
    overflow-y:scroll!important;
    scrollbar-gutter:stable!important;
  }

  body #app .shell>.topbar{
    position:sticky!important;
    top:0!important;
    z-index:2000!important;
    display:block!important;
    width:100%!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    padding:0!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  body #app .shell>.topbar .brand,
  body #app .shell>.topbar .brand-button{
    position:absolute!important;
    left:20px!important;
    top:8px!important;
    width:230px!important;
    min-width:230px!important;
    max-width:230px!important;
    height:48px!important;
    margin:0!important;
    padding:0!important;
  }

  body #app .shell>.topbar .brand .brand-horizontal{
    width:220px!important;
    height:47px!important;
    max-width:220px!important;
  }

  body #app .shell>.topbar .nav.nav-icons{
    position:absolute!important;
    top:10px!important;
    right:20px!important;
    left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    margin:0!important;
    padding:0!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }

  body #app .shell>.topbar .nav.nav-icons .nav-icon{
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin-top:0!important;
    margin-bottom:0!important;
    transform:none!important;
  }

  body #app .shell>.topbar .nav.nav-icons .logout-btn{
    margin-left:3px!important;
    margin-right:0!important;
  }
}