/* ===========================
   Carte modale (contenu)
   =========================== */

:is(#zoaRelationsDialog, #zoaOrganicsDialog) .modal-content {
  width: min(92vw, 980px);
  max-height: min(70vh, 680px);
  display: flex;
  flex-direction: column;
  padding: 0;

  color: var(--zoa-text, #1f2937);
  background: var(--zoa-surface, #fff);
  border: 1px solid var(--zoa-line, rgba(15,23,42,.12));
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);

  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}

/* Animation d’ouverture */
:is(#zoaRelationsDialog, #zoaOrganicsDialog)[open] .modal-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

:is(#zoaRelationsDialog, #zoaOrganicsDialog) .modal-body {
  padding: 12px 12px 2px 12px;
  overflow: auto;
}

/* ===========================
   Grille
   =========================== */

:is(#zoaRelationsDialog, #zoaOrganicsDialog) .modal-body .grid {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 768px) {
  :is(#zoaRelationsDialog, #zoaOrganicsDialog) .modal-body .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  :is(#zoaRelationsDialog, #zoaOrganicsDialog) .modal-body .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===========================
   Cartes & contenus
   =========================== */

:is(#zoaRelationsDialog, #zoaOrganicsDialog) .card {
  position: static !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--zoa-surface, #fff);
  border: 1px solid var(--zoa-line, rgba(15,23,42,.12));
  border-radius: 12px;
}
:is(#zoaRelationsDialog, #zoaOrganicsDialog) .card-title {
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.2;
}
:is(#zoaRelationsDialog, #zoaOrganicsDialog) .muted { color: var(--zoa-muted, #6b7280); }
:is(#zoaRelationsDialog, #zoaOrganicsDialog) .text-sm { font-size: .875rem; }

/* ECharts demi-donut */
:is(#zoaRelationsDialog, #zoaOrganicsDialog) .zoa-echart.half-donut {
  display: block !important;
  width: 100% !important;
  height: clamp(180px, 26vw, 300px);
  min-height: 160px;
  overflow: visible;
  margin-bottom: 6px;
}
:is(#zoaRelationsDialog, #zoaOrganicsDialog) .muted.text-sm { margin-top: 6px; }

/* ===========================
   Boutons
   =========================== */

:is(#zoaRelationsDialog, #zoaOrganicsDialog) .btn {
  appearance: none;
  border: 1px solid var(--zoa-line, rgba(15,23,42,.12));
  background: var(--zoa-surface, #fff);
  color: var(--zoa-text, #1f2937);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
}
:is(#zoaRelationsDialog, #zoaOrganicsDialog) .btn.primary {
  background: #1661f3;
  border-color: transparent;
  color: #fff;
}
:is(#zoaRelationsDialog, #zoaOrganicsDialog) .btn:focus {
  outline: 2px solid #1661f3;
  outline-offset: 2px;
}