/* ML UREL — HEADER FINAL V7 — 30/09/2026
   Portée : habillage graphique de l'en-tête + navigation uniquement.
   Aucun style métier, calcul, donnée, route ou composant de contenu n'est modifié. */

#app.topnav-layout .top-app-header.ml-header-v7{
  position:relative!important;
  z-index:80!important;
  min-height:78px!important;
  padding:8px 22px 7px!important;
  display:grid!important;
  grid-template-columns:minmax(205px,auto) minmax(280px,1fr) minmax(260px,.9fr) auto!important;
  align-items:center!important;
  gap:18px!important;
  background:#fff!important;
  border-bottom:1px solid #dce5ef!important;
  box-shadow:none!important;
}
#app.topnav-layout .top-app-header.ml-header-v7::before{
  content:""!important;
  position:absolute!important;
  top:0!important;left:0!important;right:0!important;
  height:4px!important;
  background:#262626!important;
}

/* Bloc application ML UREL à gauche */
#app.topnav-layout .ml-header-v7 .top-brand{
  min-width:205px!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding-right:16px!important;
  border-right:1px solid #dce4ee!important;
  cursor:pointer!important;
}
#app.topnav-layout .ml-header-v7 .top-brand .top-app-logo{
  width:76px!important;
  height:58px!important;
  max-width:none!important;
  flex:0 0 76px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
  border:0!important;
  border-radius:0!important;
}
#app.topnav-layout .ml-header-v7 .top-brand>div{
  display:flex!important;
  flex-direction:column!important;
  min-width:76px!important;
}
#app.topnav-layout .ml-header-v7 .top-brand strong{
  color:#082d60!important;
  font-size:16px!important;
  font-weight:750!important;
  line-height:1.05!important;
  letter-spacing:-.2px!important;
  white-space:nowrap!important;
}
#app.topnav-layout .ml-header-v7 .top-brand span{
  color:#697c96!important;
  font-size:9px!important;
  font-weight:500!important;
  margin-top:5px!important;
  white-space:nowrap!important;
}

/* Titre qui change avec le menu principal */
#app.topnav-layout .ml-header-v7 .top-title-block{
  min-width:0!important;
  padding-left:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
#app.topnav-layout .ml-header-v7 .top-title-block strong{
  color:#082d60!important;
  font-size:18px!important;
  font-weight:750!important;
  line-height:1.15!important;
  letter-spacing:-.35px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#app.topnav-layout .ml-header-v7 .top-title-block span{
  color:#6d7f97!important;
  font-size:9.5px!important;
  font-weight:500!important;
  margin-top:5px!important;
  white-space:nowrap!important;
}

/* Logo institutionnel Maroc Lait centré et volontairement grand */
#app.topnav-layout .ml-header-v7 .top-corporate-brand{
  min-width:260px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 12px!important;
}
#app.topnav-layout .ml-header-v7 .top-corporate-brand img{
  display:block!important;
  width:255px!important;
  max-width:100%!important;
  height:58px!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Les filtres restent dans la barre globale sous les menus. */
#app.topnav-layout .ml-header-v7 .top-context-filters{display:none!important}

/* Zone utilisateur à droite */
#app.topnav-layout .ml-header-v7 .top-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  white-space:nowrap!important;
}
#app.topnav-layout .ml-header-v7 .top-action-btn,
#app.topnav-layout .ml-header-v7 .top-logout-btn{
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #d7e2ef!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#0d58ad!important;
  box-shadow:none!important;
  font-size:14px!important;
}
#app.topnav-layout .ml-header-v7 .top-action-btn:hover,
#app.topnav-layout .ml-header-v7 .top-logout-btn:hover{background:#f4f8fd!important}
#app.topnav-layout .ml-header-v7 .top-user-box{gap:8px!important;padding-left:2px!important}
#app.topnav-layout .ml-header-v7 .top-user-box .ubadge{
  width:34px!important;height:34px!important;
  display:grid!important;place-items:center!important;
  border:1px solid #d6e1ee!important;
  border-radius:9px!important;
  background:#edf4fc!important;
  color:#1e5aa4!important;
  font-size:10px!important;
  font-weight:800!important;
}
#app.topnav-layout .ml-header-v7 .top-user-box>div:last-child{max-width:145px!important}
#app.topnav-layout .ml-header-v7 .top-user-box strong{font-size:9.5px!important;font-weight:650!important;color:#14345d!important}
#app.topnav-layout .ml-header-v7 .top-user-box span{font-size:8px!important;color:#6d7e96!important;margin-top:2px!important}

/* Barre principale fidèle à la validation */
#app.topnav-layout .top-nav-stack .top-main-nav{
  height:42px!important;
  padding:0 16px!important;
  background:linear-gradient(90deg,#063d82 0%,#0b4f9f 100%)!important;
  border:0!important;
  box-shadow:none!important;
}
#app.topnav-layout .top-nav-tab,
#app.topnav-layout .top-nav-stack .top-direct-menu{
  height:42px!important;
  padding:0 20px!important;
  gap:8px!important;
  color:#fff!important;
  border-left:1px solid rgba(255,255,255,.09)!important;
  border-right:1px solid rgba(255,255,255,.09)!important;
  background:transparent!important;
  font-size:11px!important;
  font-weight:750!important;
}
#app.topnav-layout .top-nav-tab:hover,
#app.topnav-layout .top-nav-tab.expanded,
#app.topnav-layout .top-nav-tab.active,
#app.topnav-layout .top-nav-stack .top-direct-menu:hover,
#app.topnav-layout .top-nav-stack .top-direct-menu.active{
  background:#0872d2!important;
  color:#fff!important;
}
#app.topnav-layout .top-nav-icon{font-size:14px!important}

/* Sous-menu : blanc, compact et soulignement bleu */
#app.topnav-layout .top-sub-nav{height:38px!important;background:#fff!important;border-bottom:1px solid #dce5ef!important}
#app.topnav-layout .top-sub-nav-inner{height:38px!important;padding:0 28px!important;gap:3px!important}
#app.topnav-layout .top-sub-nav a{height:38px!important;padding:0 14px!important;color:#36516f!important;font-size:9.5px!important;font-weight:600!important;background:transparent!important}
#app.topnav-layout .top-sub-nav a.active{color:#0b64cf!important;background:#fafcff!important}
#app.topnav-layout .top-sub-nav a.active::after{height:2px!important;background:#1477e9!important;left:9px!important;right:9px!important}

@media(max-width:1320px){
  #app.topnav-layout .top-app-header.ml-header-v7{grid-template-columns:minmax(185px,auto) minmax(220px,1fr) minmax(210px,.7fr) auto!important;gap:12px!important;padding-left:14px!important;padding-right:14px!important}
  #app.topnav-layout .ml-header-v7 .top-brand{min-width:185px!important;gap:9px!important;padding-right:11px!important}
  #app.topnav-layout .ml-header-v7 .top-brand .top-app-logo{width:66px!important;height:54px!important;flex-basis:66px!important}
  #app.topnav-layout .ml-header-v7 .top-corporate-brand{min-width:210px!important;padding:0 6px!important}
  #app.topnav-layout .ml-header-v7 .top-corporate-brand img{width:220px!important;height:52px!important}
  #app.topnav-layout .ml-header-v7 .top-title-block strong{font-size:16px!important}
}
@media(max-width:1050px){
  #app.topnav-layout .top-app-header.ml-header-v7{grid-template-columns:auto minmax(190px,1fr) auto!important}
  #app.topnav-layout .ml-header-v7 .top-corporate-brand{display:none!important}
  #app.topnav-layout .ml-header-v7 .top-brand{min-width:178px!important}
  #app.topnav-layout .top-nav-stack .top-main-nav{overflow-x:auto!important;padding:0 7px!important}
  #app.topnav-layout .top-nav-tab,#app.topnav-layout .top-nav-stack .top-direct-menu{padding:0 14px!important;white-space:nowrap!important}
}
@media(max-width:720px){
  #app.topnav-layout .top-app-header.ml-header-v7{min-height:66px!important;grid-template-columns:auto minmax(0,1fr) auto!important;padding:7px 9px!important;gap:8px!important}
  #app.topnav-layout .ml-header-v7 .top-brand{min-width:0!important;padding-right:9px!important;gap:0!important}
  #app.topnav-layout .ml-header-v7 .top-brand .top-app-logo{width:62px!important;height:50px!important;flex-basis:62px!important}
  #app.topnav-layout .ml-header-v7 .top-brand>div{display:none!important}
  #app.topnav-layout .ml-header-v7 .top-title-block strong{font-size:13px!important}
  #app.topnav-layout .ml-header-v7 .top-title-block span{font-size:8px!important}
  #app.topnav-layout .ml-header-v7 .top-user-box>div:last-child{display:none!important}
  #app.topnav-layout .ml-header-v7 .top-action-btn{display:none!important}
  #app.topnav-layout .top-nav-tab,#app.topnav-layout .top-nav-stack .top-direct-menu{padding:0 11px!important;font-size:10px!important}
  #app.topnav-layout .top-sub-nav-inner{padding:0 6px!important}
}