{{-- Une ligne de liste : une pastille ou une date, un titre, une ligne d'information, une fin. --}}
@props(['tete' => null, 'titre', 'meta' => null])

<div class="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-4 border-t border-gray-100 px-4 py-3 first:border-t-0 sm:grid-cols-[auto_minmax(0,1fr)_auto] dark:border-white/5">
    <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-gray-100 text-xs font-semibold text-gray-500 dark:bg-white/10 dark:text-gray-400">
        {{ $tete }}
    </div>
    <div class="min-w-0">
        <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $titre }}</p>
        @if ($meta)
            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ $meta }}</p>
        @endif
    </div>
    <div class="col-span-2 flex flex-wrap items-center justify-end gap-2 sm:col-span-1">{{ $slot }}</div>
</div>