:root{--mockup-bar-height:56px}
.mockup-bar{box-sizing:border-box;background:#111827;color:#D1D5DB;font-family:Rubik,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.4;border-bottom:3px solid #F4A3BB;-webkit-font-smoothing:antialiased}
.mockup-bar *{box-sizing:border-box}
.mockup-bar a{text-decoration:none}
.mockup-bar a:focus-visible{outline:2px solid #F4A3BB;outline-offset:2px}
.mockup-bar .mockup-bar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:10px;padding-bottom:10px}
.mockup-bar .mockup-bar__title{margin:0;display:flex;align-items:center;gap:10px;color:#fff}
.mockup-bar .mockup-bar__badge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#F4A3BB;color:#111827;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.mockup-bar .mockup-bar__navigation{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.mockup-bar .mockup-bar__tabs,.mockup-bar .mockup-bar__switch{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.1)}
.mockup-bar .mockup-bar__tab,.mockup-bar .mockup-bar__switch-option,.mockup-bar .mockup-bar__summary-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 16px;border-radius:9px;color:#E5E7EB;font-weight:500;white-space:nowrap;transition:background .2s,color .2s}
.mockup-bar .mockup-bar__summary-link{padding:0 12px 0 8px}
.mockup-bar .mockup-bar__tab:hover,.mockup-bar .mockup-bar__switch-option:hover,.mockup-bar .mockup-bar__summary-link:hover{background:rgba(255,255,255,.14);color:#fff}
.mockup-bar .mockup-bar__tab--current,.mockup-bar .mockup-bar__tab--current:hover{background:#fff;color:#111827}
.mockup-bar .mockup-bar__switch-option--current,.mockup-bar .mockup-bar__switch-option--current:hover{background:#F4A3BB;color:#111827}
.mockup-bar .mockup-bar__label-short{display:none}
.mockup-bar--with-switch .mockup-bar__tab .mockup-bar__label-long{display:none}
.mockup-bar--with-switch .mockup-bar__tab .mockup-bar__label-short{display:inline}

.mockup-bar.mockup-bar--fixed{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--mockup-bar-height)}
.mockup-bar--fixed .mockup-bar__inner{height:100%;flex-wrap:nowrap;padding:0 20px}
body.has-mockup-bar{padding-top:var(--mockup-bar-height)}
.has-mockup-bar .app{min-height:calc(100vh - var(--mockup-bar-height))}
.has-mockup-bar .sidebar{top:var(--mockup-bar-height);height:calc(100vh - var(--mockup-bar-height))}
.has-mockup-bar .login{min-height:calc(100vh - var(--mockup-bar-height))}
body.has-mockup-bar:not(.ecran-telephone) .drawer{top:var(--mockup-bar-height)}
@media (min-width:600px){body.ecran-telephone.has-mockup-bar{padding-top:calc(var(--mockup-bar-height) + 40px)}}
@media (max-width:599px){body.ecran-telephone.has-mockup-bar .phone{height:calc(100vh - var(--mockup-bar-height));height:calc(100dvh - var(--mockup-bar-height))}}

@media (max-width:640px){
  .mockup-bar .mockup-bar__inner{gap:8px 16px}
  .mockup-bar .mockup-bar__title{font-size:13px}
  .mockup-bar .mockup-bar__navigation{width:100%;display:grid;gap:8px}
  .mockup-bar .mockup-bar__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .mockup-bar .mockup-bar__switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mockup-bar .mockup-bar__tab,.mockup-bar .mockup-bar__switch-option{padding:0 6px;font-size:13px;min-height:40px}
  .mockup-bar .mockup-bar__tab .mockup-bar__label-long{display:none}
  .mockup-bar .mockup-bar__tab .mockup-bar__label-short{display:inline}
  .mockup-bar--fixed .mockup-bar__inner{gap:8px;padding:0 12px}
  .mockup-bar--fixed .mockup-bar__note{display:none}
  .mockup-bar--fixed .mockup-bar__navigation{width:auto;display:flex;flex-wrap:nowrap;gap:6px}
  .mockup-bar--fixed .mockup-bar__switch{display:flex}
  .mockup-bar--fixed .mockup-bar__switch-option{padding:0 10px}
  .mockup-bar--fixed .mockup-bar__switch .mockup-bar__label-long{display:none}
  .mockup-bar--fixed .mockup-bar__switch .mockup-bar__label-short{display:inline}
}