/* ==========================================================================
   kdo-modal — Modales empilables avec overlay
   ========================================================================== */

.kdo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kdo-space-lg);
  opacity: 0;
  transition: opacity var(--kdo-transition-base);
  font-family: var(--kdo-font-family);
  font-size: var(--kdo-text-base);
  color: var(--kdo-text);
}
.kdo-modal-overlay--open    { opacity: 1; }
.kdo-modal-overlay--closing { opacity: 0; }

.kdo-modal-wrapper {
  display: contents;
}

.kdo-modal {
  background: var(--kdo-bg);
  border-radius: var(--kdo-radius-lg);
  box-shadow: var(--kdo-shadow-xl);
  max-height: calc(100vh - 2 * var(--kdo-space-lg));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-24px) scale(0.97);
  transition: transform var(--kdo-transition-base);
}
.kdo-modal-overlay--open .kdo-modal { transform: translateY(0) scale(1); }
.kdo-modal--top { align-self: flex-start; margin-top: var(--kdo-space-xl); }

/* Tailles */
.kdo-modal--sm   { width: 400px; max-width: 100%; }
.kdo-modal--md   { width: 600px; max-width: 100%; }
.kdo-modal--lg   { width: 900px; max-width: 100%; }
.kdo-modal--xl   { width: 95vw; height: 90vh; max-height: 95vh; }
.kdo-modal--auto { width: auto; max-width: 100%; }

/* Header */
.kdo-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--kdo-space-md) var(--kdo-space-lg);
  border-bottom: var(--kdo-border-width) solid var(--kdo-border);
  min-height: 48px;
}
.kdo-modal-titre {
  margin: 0;
  font-size: var(--kdo-text-lg);
  font-weight: var(--kdo-weight-semi);
  color: var(--kdo-text);
}
.kdo-modal-titre-placeholder { flex: 1; }

.kdo-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--kdo-gray-500);
  padding: 0 var(--kdo-space-sm);
  transition: color var(--kdo-transition-fast);
}
.kdo-modal-close:hover { color: var(--kdo-gray-800); }

/* Body */
.kdo-modal-body {
  padding: var(--kdo-space-lg);
  overflow-y: auto;
  flex: 1;
}
.kdo-modal-message { margin: 0; line-height: var(--kdo-line-normal); color: var(--kdo-text); }

/* Footer */
.kdo-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--kdo-space-sm);
  padding: var(--kdo-space-md) var(--kdo-space-lg);
  border-top: var(--kdo-border-width) solid var(--kdo-border);
  background: var(--kdo-bg-alt);
}

/* Boutons — partagés (pas juste pour les modales) */
.kdo-btn {
  padding: 8px 16px;
  border-radius: var(--kdo-radius-md);
  border: 1px solid transparent;
  font-size: var(--kdo-text-base);
  font-weight: var(--kdo-weight-medium);
  font-family: var(--kdo-font-family);
  cursor: pointer;
  transition: all var(--kdo-transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--kdo-space-xs);
  line-height: 1.2;
}
.kdo-btn:focus-visible { outline: 2px solid var(--kdo-primary); outline-offset: 2px; }

.kdo-btn--primary       { background: var(--kdo-primary); color: white; }
.kdo-btn--primary:hover { background: var(--kdo-primary-dark); }
.kdo-btn--secondary     { background: var(--kdo-bg); color: var(--kdo-text); border-color: var(--kdo-border); }
.kdo-btn--secondary:hover{ background: var(--kdo-gray-100); }
.kdo-btn--danger        { background: var(--kdo-danger); color: white; }
.kdo-btn--danger:hover  { background: #b91c1c; }
.kdo-btn--ghost         { background: none; color: var(--kdo-text); }
.kdo-btn--ghost:hover   { background: var(--kdo-gray-100); }