/* =========================================================
   QUARZEO PILOT V10.11
   Navigation stable — ciblage direct de la vraie sidebar
   ========================================================= */

/* SIDEBAR : surcharge directe de qz-v9.css */

body.qz-v9 .sidebar,
body .sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: 254px !important;
  padding: 17px 13px !important;

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

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

  background:
    radial-gradient(
      circle at 28% 5%,
      rgba(38, 204, 231, .17),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #0b3552 0%,
      #082940 45%,
      #061f33 72%,
      #051a2b 100%
    ) !important;

  color: #dcebf1 !important;

  border-right:
    1px solid rgba(85, 202, 226, .20) !important;

  box-shadow:
    14px 0 38px rgba(3, 28, 44, .18) !important;

  z-index: 30 !important;
}

/* Marque */

body.qz-v9 .sidebar .sideBrand,
.sidebar .sideBrand {
  display: block !important;
  margin: 0 4px 12px !important;
  padding: 13px 14px !important;

  border:
    1px solid rgba(93, 222, 241, .22) !important;
  border-radius: 15px !important;

  background:
    linear-gradient(
      135deg,
      #0a4b78,
      #087cad
    ) !important;

  box-shadow:
    0 13px 27px rgba(0, 15, 27, .25) !important;
}

body.qz-v9 .sidebar .sideBrand img {
  display: none !important;
}

body.qz-v9 .sidebar .sideBrand::before {
  display: block;
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .06em;
  content: "QUARZEO";
}

body.qz-v9 .sidebar .sideBrand span {
  display: block !important;
  width: fit-content;
  margin-top: 5px;
  padding: 0 !important;

  background: transparent !important;
  color: #69e1f2 !important;

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

/* Profil */

body.qz-v9 .sidebar .roleCard,
.sidebar .roleCard {
  margin: 0 4px 16px !important;
  padding: 13px !important;

  border:
    1px solid rgba(138, 193, 212, .14) !important;
  border-radius: 16px !important;

  background:
    rgba(255, 255, 255, .055) !important;

  box-shadow: none !important;
}

.sidebar .roleCard strong {
  color: #ffffff !important;
  font-size: 12px !important;
}

.sidebar .roleCard span {
  color: #91b3c1 !important;
}

.sidebar .roleCard b {
  border:
    1px solid rgba(71, 216, 238, .24) !important;

  background:
    rgba(38, 204, 231, .13) !important;

  color: #71e1f1 !important;
}

/* Titres des groupes */

.sidebar .navGroup {
  margin-top: 9px !important;
}

.sidebar .navGroup > span {
  display: block !important;
  padding: 8px 11px 6px !important;

  color: #73a5b8 !important;

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

/* Liens */

.sidebar .navGroup a {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;

  min-height: 42px !important;

  margin: 3px 0 !important;
  padding: 7px 10px !important;

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

  background: transparent !important;

  color: #b9ced8 !important;

  font-size: 11px !important;
  font-weight: 760 !important;

  opacity: 1 !important;

  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease !important;
}

.sidebar .navGroup a:hover {
  border-color:
    rgba(75, 211, 235, .18) !important;

  background:
    rgba(38, 195, 221, .10) !important;

  color: #ffffff !important;

  transform: translateX(2px);
}

.sidebar .navGroup a.active {
  border-color:
    rgba(86, 220, 241, .28) !important;

  background:
    linear-gradient(
      135deg,
      rgba(35, 195, 222, .29),
      rgba(22, 126, 172, .22)
    ) !important;

  color: #ffffff !important;

  box-shadow:
    inset 3px 0 0 #49daf0,
    0 9px 20px rgba(0, 15, 26, .17) !important;
}

/* Icônes SVG natives */

.sidebar .navIcon {
  display: grid !important;
  place-items: center !important;

  flex: 0 0 30px !important;

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

  border:
    1px solid rgba(132, 193, 214, .15) !important;
  border-radius: 10px !important;

  background:
    rgba(255, 255, 255, .055) !important;

  color: #82b5c7 !important;
}

.sidebar .navIcon svg {
  display: block !important;

  width: 17px !important;
  height: 17px !important;

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

.sidebar .navGroup a:hover .navIcon {
  border-color:
    rgba(84, 221, 241, .28) !important;

  background:
    rgba(38, 204, 231, .14) !important;

  color: #61dff1 !important;
}

.sidebar .navGroup a.active .navIcon {
  border-color:
    rgba(103, 232, 247, .34) !important;

  background:
    rgba(38, 204, 231, .19) !important;

  color: #70e5f4 !important;
}

/* Supprime les icônes injectées lors des anciens essais */

.sidebar .qz10-sidebar-svg,
.sidebar .qz10-nav-svg {
  display: none !important;
}

/* Badge rouge */

.sidebar .navGroup a b {
  margin-left: auto !important;

  border:
    2px solid #082940 !important;

  background: #ef6972 !important;
  color: #ffffff !important;

  box-shadow:
    0 6px 14px rgba(239, 105, 114, .22) !important;
}

/* Pied de sidebar */

.sidebar .sidebarFoot {
  margin-top: auto !important;
  padding-top: 11px !important;

  border-top:
    1px solid rgba(136, 190, 209, .12) !important;
}

.sidebar .sidebarFoot a,
.sidebar .sidebarFoot button {
  color: #83a7b6 !important;
}

.sidebar .sidebarFoot a:hover,
.sidebar .sidebarFoot button:hover {
  background:
    rgba(38, 204, 231, .09) !important;

  color: #67def0 !important;
}

/* =========================================================
   BARRE RAPIDE DU BAS
   ========================================================= */

body.qz-v9 #qz9Footbar,
body.qz-v9 .qz9-footbar,
#qz9Footbar,
.qz9-footbar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;

  min-width: 660px !important;
  min-height: 56px !important;

  bottom: 14px !important;

  padding: 8px 12px !important;

  border:
    1px solid rgba(88, 213, 235, .24) !important;
  border-radius: 19px !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(43, 205, 232, .15),
      transparent 52%
    ),
    linear-gradient(
      135deg,
      rgba(6, 34, 54, .98),
      rgba(7, 63, 88, .98)
    ) !important;

  box-shadow:
    0 17px 40px rgba(3, 25, 40, .26) !important;

  opacity: 1 !important;

  transform:
    translateX(-50%) scale(1) !important;

  backdrop-filter: blur(16px);
}

.qz9-footbar strong,
#qz9Footbar strong {
  margin: 0 9px 0 4px !important;

  color: #91b9c8 !important;

  font-size: 9px !important;
  font-weight: 850 !important;

  opacity: 1 !important;
}

.qz9-footbar button,
#qz9Footbar button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;

  min-height: 38px !important;

  padding: 7px 12px !important;

  border:
    1px solid rgba(133, 195, 214, .15) !important;
  border-radius: 12px !important;

  background:
    rgba(255, 255, 255, .06) !important;

  color: #c7dce4 !important;

  font-size: 9px !important;
  font-weight: 820 !important;
}

.qz9-footbar button:hover,
#qz9Footbar button:hover {
  border-color:
    rgba(85, 223, 242, .29) !important;

  background:
    rgba(38, 204, 231, .14) !important;

  color: #ffffff !important;
}

.qz11-foot-icon {
  display: grid;
  place-items: center;

  width: 25px;
  height: 25px;

  border-radius: 8px;

  background:
    var(--qz11-soft, rgba(38, 204, 231, .14));

  color:
    var(--qz11-color, #5edff0);
}

.qz11-foot-icon svg {
  width: 15px;
  height: 15px;

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

.qz11-tone-orange {
  --qz11-color: #f2b35b;
  --qz11-soft: rgba(242, 161, 46, .15);
}

.qz11-tone-blue {
  --qz11-color: #78aff8;
  --qz11-soft: rgba(69, 132, 222, .15);
}

.qz11-tone-green {
  --qz11-color: #5edcaf;
  --qz11-soft: rgba(38, 185, 125, .15);
}

.qz11-tone-cyan {
  --qz11-color: #5edff0;
  --qz11-soft: rgba(38, 204, 231, .15);
}

.qz11-tone-purple {
  --qz11-color: #aaa1ff;
  --qz11-soft: rgba(115, 105, 231, .16);
}

@media (max-width: 900px) {
  #qz9Footbar,
  .qz9-footbar {
    width: calc(100vw - 30px) !important;
    min-width: 0 !important;

    justify-content: flex-start !important;
    overflow-x: auto !important;
  }

  #qz9Footbar strong,
  .qz9-footbar strong {
    display: none !important;
  }
}