{# Modale de confirmation globale, pilotée par data-confirm sur les formulaires (voir app.js). #}
<div x-data x-cloak x-show="$store.confirm.open" class="fixed inset-0 z-[80] flex items-center justify-center p-4"
     role="alertdialog" aria-modal="true" @keydown.escape.window="$store.confirm.open = false">
  <div x-show="$store.confirm.open" x-transition.opacity class="absolute inset-0 bg-brand-950/60 backdrop-blur-sm" @click="$store.confirm.open = false"></div>
  <div x-show="$store.confirm.open" x-transition x-trap="$store.confirm.open" class="relative w-full max-w-md rounded-2xl bg-white p-6 shadow-(--shadow-raised)">
    <div class="flex gap-4">
      <div class="flex size-11 shrink-0 items-center justify-center rounded-full"
           :class="$store.confirm.variant === 'danger' ? 'bg-signal-50 text-signal-600' : 'bg-brand-50 text-brand-700'">
        {% icon "warning" "size-6" %}
      </div>
      <div>
        <h2 class="text-base font-bold text-brand-900" x-text="$store.confirm.title"></h2>
        <p class="mt-1 text-sm text-slate-600" x-text="$store.confirm.message"></p>
      </div>
    </div>
    <div class="mt-6 flex justify-end gap-2">
      <button type="button" class="btn btn-secondary" @click="$store.confirm.open = false">Annuler</button>
      <button type="button" class="btn" :class="$store.confirm.variant === 'danger' ? 'btn-danger' : 'btn-primary'"
              @click="$store.confirm.accept()" x-text="$store.confirm.label"></button>
    </div>
  </div>
</div>