/* ============================================================
   Notifications — toasts + dialogue de confirmation (US-UX-01)
   Remplace les popups natives du navigateur (confirm/alert/prompt)
   par des composants du design system, accessibles (EAA).
   Tokens : voir tokens.css. Aucune couleur en dur hors fallback.
   ============================================================ */

/* Accessibilité : texte réservé aux lecteurs d'écran (pas de .sr-only global) */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Région toast (empilement) ---------- */
.toast-region {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: min(360px, calc(100vw - var(--space-8)));
    pointer-events: none; /* la région laisse passer les clics ; chaque toast les réactive */
}
.toast-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ---------- Toast ---------- */
.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-ink-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.45;
    color: var(--color-ink-900);
    /* état d'entrée (animé vers 0/1 via .toast--in) */
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 180ms ease, transform 180ms ease;
}
.toast--in { opacity: 1; transform: translateX(0); }
.toast--out { opacity: 0; transform: translateX(12px); }

.toast__icon { flex-shrink: 0; font-size: 18px; line-height: 1.3; }
.toast__body { flex: 1; min-width: 0; }
.toast__close {
    flex-shrink: 0;
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-ink-500);
    font-size: 18px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: var(--radius-xs);
}
.toast__close:hover { color: var(--color-ink-900); background: var(--color-navy-50); }
.toast__close:focus-visible { outline: 2px solid var(--color-navy-500); outline-offset: 1px; }

/* variantes : accent bordure + icône. Jamais la couleur seule (icône + texte). */
.toast--success { border-left-color: var(--color-success-500); }
.toast--success .toast__icon { color: var(--color-success-700); }
.toast--info    { border-left-color: var(--color-info-500); }
.toast--info .toast__icon { color: var(--color-info-700); }
.toast--warning { border-left-color: var(--color-warning-500); }
.toast--warning .toast__icon { color: var(--color-warning-700); }
.toast--error   { border-left-color: var(--color-danger-500); }
.toast--error .toast__icon { color: var(--color-danger-700); }

@media (max-width: 640px) {
    .toast-region {
        top: auto;
        bottom: var(--space-4);
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
    }
}

/* ---------- Dialogue de confirmation (<dialog> natif) ---------- */
.app-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(440px, calc(100vw - var(--space-8)));
    width: 100%;
}
.app-dialog::backdrop {
    background: rgba(20, 31, 78, 0.45);
    /* backdrop-filter volontairement léger pour rester lisible */
}
.app-dialog__card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    border-top: 4px solid var(--color-navy-500);
}
.app-dialog--danger .app-dialog__card { border-top-color: var(--color-danger-500); }

.app-dialog__title {
    font-family: var(--font-display);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
    color: var(--color-ink-900);
    margin: 0 0 var(--space-2);
}
.app-dialog--danger .app-dialog__title { color: var(--color-danger-700); }
.app-dialog__message {
    margin: 0 0 var(--space-4);
    color: var(--color-ink-700);
    line-height: 1.5;
    white-space: pre-line;
}

.app-dialog__reason { margin: 0 0 var(--space-4); }
.app-dialog__reason[hidden] { display: none; }
.app-dialog__reason-label {
    display: block;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--color-ink-900);
}
.app-dialog__reason textarea {
    width: 100%;
    min-height: 84px;
    resize: vertical;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-sm, 0.875rem);
}
.app-dialog__reason textarea:focus-visible { outline: 2px solid var(--color-navy-500); outline-offset: 1px; }
.app-dialog__reason-help { font-size: var(--text-xs, 0.75rem); color: var(--color-ink-500); margin: var(--space-1) 0 0; }
.app-dialog__reason-error {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-danger-700);
    margin: var(--space-1) 0 0;
    font-weight: 600;
}
.app-dialog__reason-error[hidden] { display: none; }

.app-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* Bouton d'action destructive (pas de .btn-danger dans base.css) */
.btn-danger {
    background: var(--color-danger-500);
    color: #fff;
    border: 1px solid var(--color-danger-500);
}
.btn-danger:hover { background: var(--color-danger-700); border-color: var(--color-danger-700); }
.btn-danger:focus-visible { outline: 2px solid var(--color-danger-700); outline-offset: 2px; }

/* Réduction du mouvement : pas d'animation de glissement */
@media (prefers-reduced-motion: reduce) {
    .toast {
        transition: opacity 120ms ease;
        transform: none;
    }
    .toast--in { transform: none; }
    .toast--out { transform: none; }
}