/* =========================================================
   QUARZEO V10.2
   Refonte visuelle ZÉO + contraste + densité dashboard
   ========================================================= */

:root {
  --qz10-2-navy: #071f34;
  --qz10-2-navy-light: #0c4667;
  --qz10-2-cyan: #25cce8;
  --qz10-2-text: #12364a;
  --qz10-2-muted: #667f8e;
  --qz10-2-border: #dce8ee;
  --qz10-2-surface: rgba(255, 255, 255, .96);
}

/* HERO PLUS COMPACT ET PLUS LISIBLE */

.qz-v9 .qz9-hero {
  min-height: 136px !important;
  grid-template-columns: 108px minmax(0, 1fr) auto !important;
  gap: 20px !important;
  padding: 22px 28px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(47, 214, 239, .18),
      transparent 28%
    ),
    linear-gradient(
      130deg,
      #07233a 0%,
      #0a3f5e 60%,
      #0b5d7d 100%
    ) !important;
}

.qz-v9 .qz9-hero h1,
.qz-v9 .qz9-hero h2,
.qz-v9 .qz9-hero h3 {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 20, 35, .16);
}

.qz-v9 .qz9-hero h2 {
  font-size: clamp(23px, 2.2vw, 34px) !important;
  line-height: 1.06 !important;
  margin: 4px 0 7px !important;
}

.qz-v9 .qz9-hero p {
  color: #d9eaf1 !important;
  max-width: 760px !important;
  line-height: 1.5 !important;
}

.qz-v9 .qz9-hero .qz9-kicker {
  color: #5fe2f4 !important;
}

/* ROBOT ZÉO V2 */

.qz10-zeo-v2 {
  width: 122px;
  height: 122px;
  filter:
    drop-shadow(0 18px 25px rgba(4, 34, 53, .18));
}

.qz10-zeo-v2 svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.qz10-zeo-v2 .zeo-shell {
  transform-origin: 50% 58%;
  animation: qz10ZeoFloat 3.8s ease-in-out infinite;
}

.qz10-zeo-v2 .zeo-eye {
  filter:
    drop-shadow(0 0 3px rgba(48, 215, 239, .85));
}

.qz10-zeo-v2 .zeo-left-arm,
.qz10-zeo-v2 .zeo-right-arm {
  transform-origin: center;
}

.qz10-zeo-v2[data-form="orb"] {
  width: 62px;
  height: 62px;
}

.qz10-zeo-v2[data-form="orb"] .zeo-left-arm,
.qz10-zeo-v2[data-form="orb"] .zeo-right-arm,
.qz10-zeo-v2[data-form="orb"] .zeo-body,
.qz10-zeo-v2[data-form="orb"] .zeo-core,
.qz10-zeo-v2[data-form="orb"] .zeo-core-ring {
  opacity: 0;
}

.qz10-zeo-v2[data-form="orb"] .zeo-head {
  transform:
    translateY(19px)
    scale(.9);
  transform-origin: center;
}

.qz10-zeo-v2[data-form="orb"] .zeo-visor,
.qz10-zeo-v2[data-form="orb"] .zeo-visor-glow,
.qz10-zeo-v2[data-form="orb"] .zeo-head-highlight,
.qz10-zeo-v2[data-form="orb"] .zeo-eye {
  transform:
    translateY(19px)
    scale(.9);
  transform-origin: center;
}

.qz10-zeo-v2[data-state="urgent"] .zeo-shell {
  animation: qz10ZeoAlert 1.8s ease-in-out infinite;
}

.qz10-zeo-v2[data-state="urgent"] .zeo-eye {
  stroke: #ff796f;
  filter:
    drop-shadow(0 0 4px rgba(255, 121, 111, .88));
}

.qz10-zeo-v2[data-state="verified"] .zeo-eye {
  stroke: #45ddae;
  filter:
    drop-shadow(0 0 4px rgba(69, 221, 174, .8));
}

.qz10-zeo-v2[data-state="insight"] .zeo-eye {
  stroke: #8f88ff;
  filter:
    drop-shadow(0 0 4px rgba(143, 136, 255, .8));
}

@keyframes qz10ZeoFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-.5deg);
  }

  50% {
    transform: translateY(-6px) rotate(.5deg);
  }
}

@keyframes qz10ZeoAlert {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px) scale(1.02);
  }
}

/* PAS DE DOUBLON ZÉO SUR LA HOME */

.qz10-zeo-refonte-active
.qz9-home
.qz10-zeo-secondary-card {
  display: none !important;
}

/*
  Si une ancienne carte ZÉO est imbriquée dans la grille,
  les éléments suivants prennent naturellement la place.
*/

.qz10-zeo-refonte-active
.qz9-home
.qz9-grid {
  grid-auto-flow: dense;
}

/* PANNEAU ZÉO PLUS COMPACT */

.qz9-zeo-dock-v2 .qz9-zeo-panel {
  width: min(380px, calc(100vw - 28px)) !important;
  max-height: min(650px, calc(100vh - 42px)) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  border:
    1px solid rgba(177, 210, 222, .76) !important;
  box-shadow:
    0 28px 80px rgba(5, 38, 59, .24) !important;
}

.qz9-zeo-dock-v2 .qz9-zeo-head {
  min-height: 74px !important;
  padding: 10px 14px !important;
  display: grid !important;
  grid-template-columns: 58px 1fr 32px !important;
  gap: 10px !important;
  align-items: center !important;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(52, 217, 240, .16),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #08253b,
      #0a4d6c
    ) !important;
}

.qz9-zeo-dock-v2 .qz9-zeo-title strong {
  display: block;
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1.1;
}

.qz9-zeo-dock-v2 .qz9-zeo-title small {
  color: #b9dce8 !important;
  font-size: 9px !important;
}

.qz9-zeo-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.qz9-zeo-close:hover {
  background: rgba(255, 255, 255, .18);
}

.qz9-zeo-dock-v2 .qz9-zeo-status {
  padding: 14px 15px !important;
  background: #f7fbfd !important;
  border-bottom: 1px solid #e8f0f3 !important;
}

.qz9-zeo-dock-v2 .qz9-zeo-status b {
  color: #0b829d !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}

.qz9-zeo-dock-v2 .qz9-zeo-status span {
  color: #587280 !important;
  line-height: 1.45 !important;
}

.qz9-zeo-actions {
  display: flex;
  gap: 7px;
  padding: 11px 13px 4px;
  overflow-x: auto;
  background: #ffffff;
}

.qz9-zeo-actions button {
  flex: 0 0 auto;
  border: 1px solid #dce9ee;
  border-radius: 999px;
  padding: 7px 10px;
  background: #f6fafc;
  color: #31596d;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.qz9-zeo-actions button:hover {
  border-color: #9cdeea;
  background: #ecfafd;
  color: #087e9b;
}

.qz9-zeo-dock-v2 .qz9-zeo-chat {
  min-height: 130px !important;
  max-height: 250px !important;
  padding: 12px 13px !important;
  background: #ffffff !important;
}

.qz9-zeo-dock-v2 .qz9-zeo-form {
  gap: 8px !important;
  padding: 10px 12px !important;
  background: #ffffff !important;
  border-top: 1px solid #e8eff3 !important;
}

.qz9-zeo-dock-v2 .qz9-zeo-form textarea {
  min-height: 48px !important;
  max-height: 92px !important;
  border-radius: 13px !important;
}

.qz9-zeo-dock-v2 .qz9-zeo-button {
  width: 66px !important;
  height: 66px !important;
  border:
    1px solid rgba(173, 211, 223, .72) !important;
  background:
    rgba(255, 255, 255, .92) !important;
  box-shadow:
    0 16px 42px rgba(6, 48, 70, .18) !important;
  backdrop-filter: blur(12px);
}

/* DASHBOARD : MEILLEUR CONTRASTE ET DENSITÉ */

.qz-v9 .qz9-module,
.qz-v9 .qz9-panel {
  background: var(--qz10-2-surface) !important;
}

.qz-v9 .qz9-module strong,
.qz-v9 .qz9-panel h3,
.qz-v9 .qz9-panel h4 {
  color: var(--qz10-2-text) !important;
}

.qz-v9 .qz9-module p,
.qz-v9 .qz9-panel p {
  color: var(--qz10-2-muted) !important;
}

.qz-v9 .qz9-module {
  min-height: 112px !important;
  padding: 17px 18px !important;
}

.qz-v9 .qz9-panel {
  padding: 19px !important;
}

.qz-v9 .qz9-row {
  min-height: 58px;
  background: #fbfdfe !important;
}

/* FOOTBAR MOINS « DÉMO » */

.qz9-footbar {
  opacity: .92;
  transform: scale(.94);
  transform-origin: bottom center;
  box-shadow:
    0 10px 34px rgba(8, 42, 64, .12) !important;
}

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

/* RESPONSIVE */

@media (max-width: 980px) {
  .qz-v9 .qz9-hero {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    min-height: 124px !important;
    padding: 20px !important;
  }

  .qz10-zeo-v2 {
    width: 96px;
    height: 96px;
  }
}

@media (max-width: 650px) {
  .qz-v9 .qz9-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .qz-v9 .qz9-hero > :first-child {
    display: none !important;
  }

  .qz9-zeo-dock-v2 .qz9-zeo-panel {
    width: calc(100vw - 20px) !important;
  }

  .qz9-footbar {
    transform: none;
  }
}