{{-- Modale de notification unique (succès / erreur) : lue depuis la session,
partagée par toutes les pages (layout applicatif et page d'accueil). --}}
<div x-data="notification"
     data-message="{{ session('success') ?? session('error') ?? '' }}"
     data-type="{{ session('success') ? 'success' : (session('error') ? 'error' : '') }}"
     x-show="show"
     x-transition
     class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="fixed inset-0 bg-black/50"></div>
    <div class="bg-white rounded-lg shadow-xl p-6 z-10 max-w-sm w-full mx-4">
        <div class="flex items-center gap-3 mb-4">
            <template x-if="type === 'success'">
                <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </template>
            <template x-if="type === 'error'">
                <svg class="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </template>
            <h3 class="text-lg font-semibold" x-text="type === 'success' ? 'Succès' : 'Erreur'"></h3>
        </div>
        <p class="text-gray-600 mb-6" x-text="message"></p>
        <div class="flex justify-end">
            <button @click="close()" class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700">OK</button>
        </div>
    </div>
</div>