/*
 * Dialog — partial layouts/_catalogue_modal, piloté par catalogue_modal_controller
 *   <div class="dialog-overlay is-open"><div class="dialog">
 *     <div class="dialog-header"><h3 class="dialog-title">…</h3><p class="dialog-description">…</p></div>
 *     <div class="dialog-body">…</div>
 *     <div class="dialog-footer"><button class="btn btn-default">…</button></div>
 *   </div></div>
 */

.dialog-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}
.dialog-overlay.is-open { display: flex; }

.dialog {
  width: 90%;
  max-width: 440px;
  padding: 3rem;
  background: var(--color-surface);
  color: var(--color-on-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.dialog-header { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.dialog-title { margin: 0; font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 400; }
.dialog-description { margin: 0; font-family: var(--font-serif); font-size: var(--text-sm); line-height: 1.6; color: var(--color-on-surface-muted); }

.dialog-body { display: flex; flex-direction: column; gap: 1rem; }
.dialog-footer { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }

.dialog-message { margin-top: 1rem; font-family: var(--font-sans); font-size: var(--text-sm); }
.dialog-message.is-success { color: var(--color-status-live); }
.dialog-message.is-error   { color: var(--color-status-error); }

@media (max-width: 768px) {
  .dialog { padding: 2rem 1.5rem; }
  .dialog-footer { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
  .dialog { width: 95%; }
}