:root{
  --sidebar-w:252px;
  --focus-ring:0 0 0 3px rgba(232,119,34,.28);
}

html{scroll-behavior:smooth}
body{min-width:320px}
button,input,select,textarea,a{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid rgba(232,119,34,.3)!important;
  outline-offset:2px;
}

aside{width:var(--sidebar-w);transition:transform .22s ease,width .22s ease}
main{margin-left:var(--sidebar-w);max-width:none;padding:22px 28px}
aside .logo b,aside .logo small,aside nav .sec,aside nav button span.txt,aside .side-pied .lg>div:last-child{display:block}
nav button{min-height:42px}
nav button .nav-ico{width:24px;display:inline-flex;justify-content:center;font-size:16px}
.side-pied a{padding:7px 0;min-height:34px}

.mobile-menu{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--bord);
  border-radius:10px;
  background:#fff;
  color:var(--marine);
  font-size:20px;
  cursor:pointer;
  flex:0 0 auto;
}
.nav-backdrop{display:none}
.topbar{position:sticky;top:0;z-index:30;background:rgba(238,241,246,.94);backdrop-filter:blur(10px);padding:8px 0;margin-top:-8px}
.topbar h1{font-size:20px;line-height:1.25}
.topbar-actions{display:flex;align-items:center;gap:8px}

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

.overlay[role="dialog"]{overscroll-behavior:contain}
.overlay.on .modal{animation:modal-in .16s ease-out}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}

.table-scroll,.prospect-table-wrap{scrollbar-width:thin;overscroll-behavior-x:contain}
.table-scroll{overflow:auto;border-radius:10px}
.empty{min-height:104px;display:grid;place-items:center;line-height:1.55}
.btn,.reload{min-height:38px}
.btn:disabled,.reload:disabled{opacity:.55;cursor:not-allowed}

.field-label{
  display:block;
  font-size:10.5px;
  font-weight:700;
  color:var(--gris);
  text-transform:uppercase;
  letter-spacing:.4px;
  margin:9px 0 3px;
}

.crm-toast-region{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:100;
  display:grid;
  gap:8px;
  width:min(360px,calc(100vw - 30px));
}
.crm-toast{
  background:#fff;
  color:#243047;
  border:1px solid var(--bord);
  border-left:4px solid var(--vert);
  border-radius:10px;
  box-shadow:0 14px 38px rgba(22,40,74,.2);
  padding:11px 13px;
  font-size:13px;
}
.crm-toast.error{border-left-color:var(--rouge)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media (max-width:1100px){
  :root{--sidebar-w:218px}
  main{padding:18px}
}

@media (max-width:820px){
  body.nav-open,body.modal-open{overflow:hidden}
  aside{
    width:min(84vw,310px)!important;
    transform:translateX(-105%);
    box-shadow:18px 0 50px rgba(10,24,48,.35);
  }
  aside.nav-open{transform:translateX(0)}
  aside .logo b,aside .logo small,aside nav .sec,aside nav button span.txt,aside .side-pied .lg>div:last-child{display:block!important}
  aside nav button{padding:11px 14px}
  main{margin-left:0!important;padding:12px 14px 26px}
  .mobile-menu{display:inline-grid;place-items:center}
  .nav-backdrop{
    position:fixed;
    inset:0;
    z-index:35;
    background:rgba(10,24,48,.48);
  }
  .nav-backdrop.on{display:block}
  .topbar{gap:9px;padding:8px 0}
  .topbar h1{font-size:17px;flex:1;min-width:180px}
  .live{margin-left:51px;order:3}
  .maj{order:4}
  .topbar .reload{order:5}
  .topbar .reload:last-child{margin-left:0}
  .kpis,.super-kpis,.prospect-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .fiche-grille,.modal .deux{grid-template-columns:1fr!important}
  .toolbar,.prospect-toolbar{align-items:stretch}
  .toolbar>*,.prospect-toolbar>*{min-width:0}
  .prospect-toolbar input[type=text]{min-width:100%;flex-basis:100%}
  .prospect-toolbar select{flex:1 1 calc(50% - 8px)}
  .prospect-toolbar .btn{flex:1 1 calc(50% - 8px)}
  .memoire-frame{height:calc(100vh - 150px);min-height:560px}
}

@media (max-width:560px){
  main{padding:10px 11px 22px}
  .topbar{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 42px;
    gap:7px 9px;
    margin-bottom:10px;
  }
  .mobile-menu{grid-column:1;grid-row:1}
  .topbar h1{grid-column:2;grid-row:1;min-width:0;font-size:17px}
  .topbar .reload[onclick="ouvrirNotifs()"]{grid-column:3;grid-row:1}
  .live{grid-column:2;grid-row:2;margin:0;justify-self:start}
  .maj{grid-column:3;grid-row:2;align-self:center;text-align:right}
  .topbar .reload:last-child{grid-column:1 / span 2;grid-row:3;justify-self:start}
  .kpis,.super-kpis,.prospect-kpis{grid-template-columns:1fr 1fr!important;gap:8px}
  .kpi{padding:11px 12px}
  .kpi .val{font-size:21px}
  .carte{padding:13px}
  .super-hero{padding:14px;gap:12px}
  .super-hero .hero-icon{width:42px;height:42px}
  .super-hero h2{font-size:16px}
  .profils-grille,.agents-grille{grid-template-columns:1fr}
  .modal{padding:18px 15px;border-radius:14px 14px 0 0;max-height:92vh;overflow:auto}
  .overlay{padding:8vh 0 0;align-items:flex-end}
  .overlay.on{display:flex}
  .modal .actions{position:sticky;bottom:-18px;background:#fff;padding:12px 0 2px}
  .modal .actions .btn{flex:1}
  .mail-bulle{max-width:94%}
  .crm-toast-region{right:10px;bottom:10px;width:calc(100vw - 20px)}
}

@media (max-width:380px){
  .kpis,.super-kpis,.prospect-kpis{grid-template-columns:1fr!important}
  .topbar h1{font-size:16px}
}