/* =========================================================
   QUARZEO PILOT V10.6
   Refonte visuelle sûre — CSS uniquement
   ========================================================= */

.qz9-home {
  width: 100%;
  max-width: none;
  gap: 18px !important;
}

/* HERO */

.qz9-home > .qz9-hero {
  position: relative;
  min-height: 142px !important;
  grid-template-columns: 104px minmax(0, 1fr) !important;
  gap: 24px !important;
  padding: 22px 30px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 25px !important;
  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(42, 205, 232, .14),
      transparent 35%
    ),
    linear-gradient(
      120deg,
      #08293f 0%,
      #0a4665 58%,
      #086483 100%
    ) !important;
  box-shadow:
    0 20px 48px rgba(7, 46, 70, .16) !important;
}

.qz9-home > .qz9-hero::after {
  position: absolute;
  right: -70px;
  top: -125px;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
  box-shadow:
    0 0 0 50px rgba(255, 255, 255, .025),
    0 0 0 105px rgba(255, 255, 255, .018);
  content: "";
  pointer-events: none;
}

.qz9-home > .qz9-hero > div {
  position: relative;
  z-index: 1;
}

.qz9-home > .qz9-hero .qz9-zeo,
.qz9-home > .qz9-hero .qz10-zeo {
  width: 100px !important;
  height: 100px !important;
  filter:
    drop-shadow(0 14px 18px rgba(0, 17, 27, .24));
}

.qz9-home > .qz9-hero .qz9-kicker {
  color: #55d9ee !important;
  font-size: 9px !important;
  letter-spacing: .16em !important;
}

.qz9-home > .qz9-hero h2 {
  max-width: 920px;
  margin: 5px 0 8px !important;
  color: #fff !important;
  font-size: clamp(25px, 2.25vw, 35px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em;
}

.qz9-home > .qz9-hero p {
  max-width: 800px;
  color: #d9ebf2 !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}

/* KPI */

.qz9-home > .qz9-grid:not(.two):not(.three) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.qz9-home > .qz9-grid:not(.two):not(.three) .qz9-module {
  position: relative;
  min-height: 112px !important;
  padding: 17px 18px 16px !important;
  overflow: hidden;
  border: 1px solid #dce8ed !important;
  border-radius: 20px !important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(248,252,253,.98)
    ) !important;
  box-shadow:
    0 12px 32px rgba(11, 48, 70, .07) !important;
}

.qz9-home > .qz9-grid:not(.two):not(.three) .qz9-module::after {
  position: absolute;
  right: -32px;
  bottom: -48px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(38, 204, 231, .07);
  content: "";
}

.qz9-home .qz9-module.orange::after {
  background: rgba(242, 161, 46, .09) !important;
}

.qz9-home .qz9-module.green::after {
  background: rgba(35, 185, 122, .09) !important;
}

.qz9-home .qz9-module.violet::after {
  background: rgba(115, 105, 231, .09) !important;
}

.qz9-home .qz9-module span,
.qz9-home .qz9-module strong,
.qz9-home .qz9-module p {
  position: relative;
  z-index: 1;
}

.qz9-home .qz9-module span {
  color: #638091 !important;
  font-size: 9px !important;
  letter-spacing: .12em !important;
}

.qz9-home .qz9-module strong {
  margin-top: 5px;
  color: #12384d !important;
  font-size: 25px !important;
  line-height: 1 !important;
}

.qz9-home .qz9-module p {
  margin-top: 7px !important;
  color: #6a8290 !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
}

/* SUPPRESSION DU DEUXIÈME ZEO */

.qz9-home .qz9-grid.two > .qz9-zeo-active {
  display: none !important;
}

.qz9-home .qz9-grid.two {
  display: block !important;
  width: 100% !important;
}

.qz9-home .qz9-grid.two > .qz9-panel {
  width: 100% !important;
  max-width: none !important;
}

/* PANNEAUX */

.qz9-home .qz9-panel {
  border: 1px solid #dce8ed !important;
  border-radius: 22px !important;
  padding: 19px 20px !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow:
    0 15px 38px rgba(11, 48, 70, .065) !important;
}

.qz9-home .qz9-panel-head {
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #e6eef2;
}

.qz9-home .qz9-panel-head h3 {
  margin-top: 4px !important;
  color: #12384d !important;
  font-size: 18px !important;
}

.qz9-home .qz9-panel-head .qz9-kicker {
  color: #17a9c3 !important;
}

.qz9-home .qz9-row {
  min-height: 64px !important;
  padding: 12px 14px !important;
  border: 1px solid #e0ebef !important;
  border-radius: 15px !important;
  background: #fbfdfe !important;
  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.qz9-home .qz9-row:hover {
  transform: translateY(-1px);
  border-color: #b7dae4 !important;
  box-shadow: 0 9px 20px rgba(11, 48, 70, .055);
}

.qz9-home .qz9-row h4 {
  color: #12384d !important;
  font-size: 12px !important;
}

.qz9-home .qz9-row p {
  margin-top: 4px !important;
  color: #6b8290 !important;
  font-size: 9px !important;
}

/* COMMERCIAL : CONTACTS CHAUDS PLUS VISUELS */

.qz9-home > .qz9-panel:last-child .qz9-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.qz9-home > .qz9-panel:last-child .qz9-module {
  min-height: 104px !important;
}

/* BOUTONS */

.qz9-home .qz9-btn {
  min-height: 31px !important;
  border-radius: 11px !important;
  padding: 7px 11px !important;
  border-color: #d5e5eb !important;
  background: #fff !important;
  color: #315d72 !important;
  font-size: 9px !important;
  font-weight: 850 !important;
}

.qz9-home .qz9-btn:hover {
  border-color: #90d4e1 !important;
  color: #07849f !important;
}

.qz9-home .qz9-btn.primary {
  border-color: transparent !important;
  background:
    linear-gradient(135deg, #0b7097, #109fba) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(11, 112, 151, .16);
}

/* FOOTBAR PLUS DISCRÈTE */

.qz9-footbar {
  bottom: 13px !important;
  min-height: 37px !important;
  padding: 5px 8px !important;
  opacity: .88;
  transform: translateX(-50%) scale(.9) !important;
  box-shadow:
    0 10px 25px rgba(9, 43, 64, .09) !important;
}

.qz9-footbar strong {
  opacity: .45;
}

.qz9-footbar button {
  min-height: 25px !important;
  padding: 5px 9px !important;
  font-size: 8px !important;
}

/* ZEO FLOTTANT */

.qz9-zeo-dock:not(.open) .qz9-zeo-button {
  width: 62px !important;
  height: 62px !important;
  border-radius: 20px !important;
}

/* DIFFÉRENCIATION COMMERCIAL / SECRÉTARIAT */

body[data-role="commercial"] .qz9-home > .qz9-hero,
body.commercial .qz9-home > .qz9-hero {
  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(54, 214, 240, .17),
      transparent 35%
    ),
    linear-gradient(
      120deg,
      #08283f,
      #075477 62%,
      #087da0
    ) !important;
}

body[data-role="secretariat"] .qz9-home > .qz9-hero,
body.secretariat .qz9-home > .qz9-hero {
  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(94, 215, 238, .13),
      transparent 35%
    ),
    linear-gradient(
      120deg,
      #092d43,
      #0b4d69 62%,
      #096a83
    ) !important;
}

/* RESPONSIVE */

@media (max-width: 1180px) {
  .qz9-home > .qz9-grid:not(.two):not(.three) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .qz9-home > .qz9-panel:last-child .qz9-grid.three {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .qz9-home > .qz9-hero {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 18px !important;
  }

  .qz9-home > .qz9-hero .qz9-zeo,
  .qz9-home > .qz9-hero .qz10-zeo {
    width: 72px !important;
    height: 72px !important;
  }

  .qz9-home > .qz9-grid:not(.two):not(.three),
  .qz9-home > .qz9-panel:last-child .qz9-grid.three {
    grid-template-columns: 1fr !important;
  }
}