/* =========================================================
   QUARZEO PRO V13.20
   Refonte native produit / métier / visuelle
   ========================================================= */

:root{
  --qz-sidebar-width:218px;
  --qz-navy-1:#031526;
  --qz-navy-2:#052b45;
  --qz-navy-3:#07496b;
  --qz-cyan:#2bd0e5;
}

/* =========================
   SIDEBAR
   ========================= */

#app.app:not(.hidden) .sidebar{
  position:fixed !important;
  z-index:50 !important;

  left:0 !important;
  top:0 !important;
  bottom:0 !important;

  display:flex !important;
  flex-direction:column !important;

  width:var(--qz-sidebar-width) !important;
  height:100vh !important;

  margin:0 !important;
  padding:0 0 22px !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  transform:none !important;

  background:
    radial-gradient(
      circle at 0 0,
      rgba(43,208,229,.08),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      var(--qz-navy-1),
      var(--qz-navy-2)
    ) !important;

  pointer-events:auto !important;
}

#app.app:not(.hidden) .centerMini,
#app.app:not(.hidden) .sidebarFoot{
  display:none !important;
}

#app.app:not(.hidden) .sideBrand{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;

  min-height:68px !important;

  margin:0 !important;
  padding:12px 16px 8px !important;

  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#app.app:not(.hidden) .sideBrand img,
#app.app:not(.hidden) .sideBrand > span{
  display:none !important;
}

#app.app:not(.hidden) .sideBrand::before{
  color:#d9fbff !important;

  font-size:18px !important;
  font-weight:950 !important;
  line-height:1 !important;
  letter-spacing:.07em !important;

  content:"QUARZEO" !important;
}

#app.app:not(.hidden) .sideBrand::after{
  margin-top:5px !important;

  color:#55d8e6 !important;

  font-size:8px !important;
  font-weight:950 !important;
  letter-spacing:.24em !important;

  content:"PRO" !important;
}

#app.app:not(.hidden) #sideNav{
  position:relative !important;
  z-index:52 !important;

  display:flex !important;
  flex-direction:column !important;

  width:100% !important;

  margin:0 !important;
  padding:8px 9px 26px !important;

  pointer-events:auto !important;
}

#app.app:not(.hidden) #sideNav .navGroup{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;

  width:100% !important;

  margin:0 0 16px !important;
  padding:0 !important;
}

#app.app:not(.hidden) #sideNav .navGroup > span{
  margin:0 7px 7px !important;

  color:#7195a8 !important;

  font-size:8px !important;
  font-weight:950 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}

#app.app:not(.hidden) #sideNav a[data-page]{
  position:relative !important;
  z-index:53 !important;

  display:grid !important;
  grid-template-columns:30px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:9px !important;

  width:100% !important;
  min-height:42px !important;

  margin:0 !important;
  padding:5px 9px !important;

  border:1px solid transparent !important;
  border-radius:12px !important;

  background:transparent !important;
  color:#d6e7ee !important;

  box-sizing:border-box !important;

  font-size:10px !important;
  font-weight:850 !important;
  line-height:1.2 !important;
  text-decoration:none !important;

  cursor:pointer !important;
  pointer-events:auto !important;
}

#app.app:not(.hidden) #sideNav a[data-page] > *{
  pointer-events:none !important;
}

/* Une seule icône native ajoutée par app.js */

#app.app:not(.hidden) #sideNav .navSvg{
  display:grid !important;
  place-items:center !important;

  width:30px !important;
  height:30px !important;
  min-width:30px !important;

  margin:0 !important;

  border:1px solid rgba(81,207,229,.20) !important;
  border-radius:9px !important;

  background:rgba(39,185,209,.13) !important;
  color:#73dfe9 !important;
}

#app.app:not(.hidden) #sideNav .navSvg svg{
  width:15px !important;
  height:15px !important;

  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* Suppression des anciennes doubles icônes */

#app.app:not(.hidden) #sideNav a[data-page]::before,
#app.app:not(.hidden) #sideNav a[data-page]::after,
#app.app:not(.hidden) #sideNav a[data-page] > i,
#app.app:not(.hidden) #sideNav a[data-page] > em{
  display:none !important;
  content:none !important;
}

#app.app:not(.hidden) #sideNav a[data-page]:hover{
  border-color:rgba(77,210,231,.16) !important;
  background:rgba(255,255,255,.045) !important;
  color:#fff !important;
}

#app.app:not(.hidden) #sideNav a[data-page].active{
  border-color:rgba(43,208,229,.43) !important;

  background:
    linear-gradient(
      90deg,
      rgba(43,208,229,.20),
      rgba(43,208,229,.055)
    ) !important;

  color:#fff !important;

  box-shadow:
    inset 3px 0 0 #2bd0e5 !important;
}

#app.app:not(.hidden) #newLeadCount{
  display:none;

  min-width:19px;
  height:19px;

  padding:0 5px;

  border-radius:10px;

  background:#ef6370;
  color:#fff;

  font-size:9px;
  font-weight:950;
  line-height:19px;
  text-align:center;
}

#app.app:not(.hidden) #newLeadCount.show{
  display:block !important;
}

#app.app:not(.hidden) .qzProSoon{
  display:inline-flex !important;

  padding:3px 5px !important;

  border:1px solid rgba(63,211,227,.25) !important;
  border-radius:8px !important;

  background:rgba(63,211,227,.08) !important;
  color:#6edce7 !important;

  font-size:6px !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
}

/* =========================
   WORKSPACE ET HEADER
   ========================= */

#app.app:not(.hidden) .workspace{
  margin-left:var(--qz-sidebar-width) !important;
  width:calc(100% - var(--qz-sidebar-width)) !important;
}

#app.app:not(.hidden) .workspace > .topbar{
  position:sticky !important;
  z-index:40 !important;

  top:0 !important;

  min-height:76px !important;

  margin:0 !important;
  padding:13px 22px !important;

  border:0 !important;
  border-radius:0 0 20px 20px !important;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(43,208,229,.13),
      transparent 35%
    ),
    linear-gradient(
      90deg,
      var(--qz-navy-1),
      var(--qz-navy-2) 55%,
      var(--qz-navy-3)
    ) !important;

  box-shadow:0 14px 35px rgba(3,24,40,.20) !important;
}

#app.app:not(.hidden) #pageEyebrow{
  color:#69dde9 !important;

  font-size:8px !important;
  font-weight:950 !important;
  letter-spacing:.15em !important;
}

#app.app:not(.hidden) #pageTitle{
  margin-top:4px !important;

  color:#fff !important;

  font-size:24px !important;
  font-weight:950 !important;
  line-height:1 !important;
}

#app.app:not(.hidden) .topbar .globalSearch,
#app.app:not(.hidden) .topbar .iconBtn,
#app.app:not(.hidden) .topbar .profileChip{
  border:1px solid rgba(119,209,237,.17) !important;
  background:rgba(255,255,255,.97) !important;

  box-shadow:0 8px 22px rgba(0,15,27,.11) !important;
}

/* =========================
   ACCUEIL
   ========================= */

.qzProHomeV1320{
  display:grid;
  gap:13px;

  padding-bottom:76px;
}

.qzProHeroV1320{
  display:grid;
  grid-template-columns:82px minmax(0,1fr) auto;
  align-items:center;
  gap:15px;

  min-height:116px;

  padding:18px 22px;

  overflow:hidden;

  border:1px solid rgba(60,211,228,.18);
  border-radius:21px;

  background:
    radial-gradient(
      circle at 92% 0,
      rgba(48,214,230,.22),
      transparent 34%
    ),
    linear-gradient(
      130deg,
      #05233a,
      #074a6d 68%,
      #08778a
    );

  color:#fff;

  box-shadow:0 17px 39px rgba(4,42,65,.15);
}

#qzProHomeZeoV1320{
  display:grid;
  place-items:center;

  width:78px;
  height:78px;
}

#qzProHomeZeoV1320 svg{
  width:74px !important;
  height:74px !important;
}

.qzProHeroV1320 small{
  display:block;

  margin-bottom:5px;

  color:#73e3eb;

  font-size:8px;
  font-weight:950;
  letter-spacing:.14em;
}

.qzProHeroV1320 h2{
  margin:0 0 6px;

  color:#fff;

  font-size:24px;
  font-weight:950;
  letter-spacing:-.035em;
}

.qzProHeroV1320 p{
  margin:0;

  color:#d9e9ef;

  font-size:10px;
}

.qzProPlanV1320{
  padding:8px 11px;

  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;

  background:rgba(255,255,255,.09);

  font-size:8px;
  font-weight:900;

  white-space:nowrap;
}

.qzProKpisV1320{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
}

.qzProKpisV1320 article{
  position:relative;

  min-height:126px;

  padding:15px;

  overflow:hidden;

  border:1px solid var(--qz-kpi-border);
  border-radius:17px;

  background:var(--qz-kpi-bg);

  box-shadow:0 9px 24px rgba(7,49,72,.05);
}

.qzProKpisV1320 article::after{
  position:absolute;
  right:-25px;
  bottom:-37px;

  width:98px;
  height:98px;

  border-radius:50%;

  background:var(--qz-kpi-orb);

  content:"";
}

.qzProKpisV1320 span{
  position:relative;
  z-index:1;

  color:var(--qz-kpi-label);

  font-size:8px;
  font-weight:950;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.qzProKpisV1320 strong{
  position:relative;
  z-index:1;

  display:block;

  margin:8px 0 5px;

  color:#173f55;

  font-size:28px;
  font-weight:950;
}

.qzProKpisV1320 p{
  position:relative;
  z-index:1;

  margin:0;

  color:#698493;

  font-size:9px;
  line-height:1.4;
}

.qzProKpisV1320 .cyan{
  --qz-kpi-bg:linear-gradient(145deg,#f2fcfe,#e5f8fb);
  --qz-kpi-border:#c7eaf0;
  --qz-kpi-label:#1495a8;
  --qz-kpi-orb:rgba(40,206,224,.14);
}

.qzProKpisV1320 .orange{
  --qz-kpi-bg:linear-gradient(145deg,#fffaf1,#fff1da);
  --qz-kpi-border:#f0dcba;
  --qz-kpi-label:#ba7923;
  --qz-kpi-orb:rgba(236,164,60,.16);
}

.qzProKpisV1320 .green{
  --qz-kpi-bg:linear-gradient(145deg,#f1fbf7,#e5f7ef);
  --qz-kpi-border:#cae8dc;
  --qz-kpi-label:#248a66;
  --qz-kpi-orb:rgba(37,185,133,.15);
}

.qzProKpisV1320 .purple{
  --qz-kpi-bg:linear-gradient(145deg,#f7f5ff,#edeafd);
  --qz-kpi-border:#dcd7f3;
  --qz-kpi-label:#6d65bb;
  --qz-kpi-orb:rgba(117,109,230,.14);
}

.qzProMainV1320{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(290px,.75fr);
  gap:12px;
}

.qzProPanelV1320,
.qzProZeoPanelV1320{
  border:1px solid #d9e7ed;
  border-radius:18px;

  background:#fff;

  box-shadow:0 10px 27px rgba(7,49,72,.055);
}

.qzProPanelV1320 > header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;

  padding:15px 16px 11px;
}

.qzProPanelV1320 header small{
  color:#1595aa;

  font-size:8px;
  font-weight:950;
  letter-spacing:.12em;
}

.qzProPanelV1320 header h3{
  margin:4px 0 0;

  color:#173f55;

  font-size:16px;
  font-weight:950;
}

.qzProPanelV1320 header p{
  margin:4px 0 0;

  color:#748d9a;

  font-size:9px;
}

.qzProActionsV1320{
  display:grid;
  gap:7px;

  padding:0 12px 13px;
}

.qzProActionV1320{
  display:grid;
  grid-template-columns:7px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;

  min-height:55px;

  padding:8px 10px;

  border:1px solid #e1ebef;
  border-radius:12px;

  background:#fbfdfe;
}

.qzProActionV1320 > i{
  width:7px;
  height:31px;

  border-radius:5px;

  background:#29b78f;
}

.qzProActionV1320.orange > i{
  background:#e8a13c;
}

.qzProActionV1320.red > i{
  background:#eb6370;
}

.qzProActionV1320 strong{
  display:block;

  color:#234b60;

  font-size:10px;
}

.qzProActionV1320 p{
  margin:3px 0 0;

  color:#78909d;

  font-size:8px;
}

.qzProActionV1320 span{
  padding:4px 7px;

  border-radius:8px;

  background:#eef5f7;
  color:#597687;

  font-size:7px;
  font-weight:900;
}

.qzProZeoPanelV1320{
  padding:16px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(42,207,225,.15),
      transparent 38%
    ),
    linear-gradient(155deg,#f4fcfe,#e8f7fa);
}

.qzProZeoPanelV1320 > small{
  color:#1596aa;

  font-size:8px;
  font-weight:950;
  letter-spacing:.12em;
}

.qzProZeoPanelV1320 h3{
  margin:8px 0 6px;

  color:#19485e;

  font-size:16px;
  font-weight:950;
}

.qzProZeoPanelV1320 p{
  margin:0;

  color:#6a8594;

  font-size:9px;
  line-height:1.5;
}

.qzProZeoPanelV1320 > div{
  margin-top:18px;
  padding:11px;

  border:1px solid rgba(42,190,210,.16);
  border-radius:12px;

  background:rgba(255,255,255,.72);
}

.qzProZeoPanelV1320 div strong{
  display:block;

  margin-bottom:4px;

  color:#24566b;

  font-size:9px;
}

.qzProZeoPanelV1320 div span{
  color:#718b98;

  font-size:8px;
  line-height:1.45;
}

.qzProBottomV1320{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}

.qzProBottomV1320 article{
  min-height:118px;

  padding:14px;

  border:1px solid #dbe8ed;
  border-radius:16px;

  background:#fff;

  box-shadow:0 8px 22px rgba(7,49,72,.045);
}

.qzProBottomV1320 span{
  color:#7894a2;

  font-size:8px;
  font-weight:950;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.qzProBottomV1320 strong{
  display:block;

  margin:7px 0 5px;

  color:#1c475d;

  font-size:17px;
  font-weight:950;
}

.qzProBottomV1320 p{
  margin:0;

  color:#718b98;

  font-size:9px;
  line-height:1.45;
}

.qzProBoostV1320{
  background:
    radial-gradient(
      circle at 92% 0,
      rgba(117,109,230,.18),
      transparent 35%
    ),
    linear-gradient(145deg,#f7f5ff,#eceafb) !important;
}

/* =========================
   FOOTBAR
   ========================= */

.qz9-footbar{
  left:calc(50% + 109px) !important;
  bottom:13px !important;

  max-width:760px !important;

  transform:translateX(-50%) !important;

  border:1px solid rgba(73,207,232,.20) !important;
  border-radius:17px !important;

  background:
    linear-gradient(
      90deg,
      #041d31,
      #073551
    ) !important;

  box-shadow:
    0 14px 33px rgba(2,20,34,.25) !important;
}

.qz9-footbar button{
  border-radius:10px !important;
}

/* =========================
   RESPONSIVE
   ========================= */

@media(max-width:1150px){
  .qzProKpisV1320{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .qzProMainV1320{
    grid-template-columns:1fr;
  }
}

@media(max-width:900px){
  :root{
    --qz-sidebar-width:190px;
  }

  .qzProHeroV1320{
    grid-template-columns:70px minmax(0,1fr);
  }

  .qzProPlanV1320{
    display:none;
  }

  .qzProBottomV1320{
    grid-template-columns:1fr;
  }

  .qz9-footbar{
    left:50% !important;
  }
}