/* Dialogue de confirmation (<dialog> natif : focus piégé, Échap). */
.dialog { border: 0; padding: 0; background: transparent; max-width: min(92vw, 440px); width: 100%; margin: auto; }
.dialog::backdrop { background: var(--color-overlay); }
.dialog__panel { background: var(--color-paper); border-radius: var(--r-card); padding: 28px; box-shadow: var(--shadow-card-hover); display: flex; flex-direction: column; gap: 12px; }
.dialog__title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--color-forest); }
.dialog__message { color: var(--color-text-muted); line-height: 1.6; }
.dialog__actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.dialog__btn { min-height: 48px; padding: 0 22px; border-radius: var(--r-control); font-weight: 600; font-size: var(--fs-base); cursor: pointer; transition: background-color 160ms ease; }
.dialog__btn--secondary { border: 1.5px solid var(--color-border-field); background: transparent; color: var(--color-ink); }
.dialog__btn--secondary:hover { background: var(--color-surface-dim); }
.dialog__btn--primary { background: var(--color-forest); color: var(--color-paper); }
.dialog__btn--primary:hover { background: var(--color-forest-dark); }
.dialog__btn--danger { background: var(--color-alert); color: var(--color-paper); }
.dialog__btn--danger:hover { background: color-mix(in srgb, var(--color-alert) 85%, var(--color-ink)); }
.dialog__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }