{{-- v4.2.0 §C2 — LA CARTE : un titre, un compteur, des lignes identiques, un pied.
     C'est la seule grammaire de l'espace client — pas de tuiles décoratives, pas de tableaux
     serrés, pas de texte d'explication dans les écrans. --}}
@props(['titre' => null, 'compteur' => null, 'pied' => null])

<section class="mb-5 rounded-xl border border-gray-200 bg-white shadow-sm dark:border-white/10 dark:bg-gray-900">
    @if ($titre)
        <div class="flex min-h-[3.1rem] items-center justify-between gap-3 border-b border-gray-200 px-4 py-3 dark:border-white/10">
            <h2 class="flex items-center gap-2 text-sm font-semibold text-gray-900 dark:text-white">
                {{ $titre }}
                @if ($compteur !== null)
                    <span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-semibold text-gray-500 dark:bg-white/10 dark:text-gray-400">{{ $compteur }}</span>
                @endif
            </h2>
            @isset($actions)
                <div class="flex flex-wrap justify-end gap-2">{{ $actions }}</div>
            @endisset
        </div>
    @endif

    <div>{{ $slot }}</div>

    @if ($pied)
        <div class="border-t border-gray-200 px-4 py-3 text-xs text-gray-500 dark:border-white/10 dark:text-gray-400">{{ $pied }}</div>
    @endif
</section>