{% extends 'base.html.twig' %}

{% block title %}Badge - Design System - Bubul{% endblock %}

{% block body %}
<div class="min-h-screen bg-gray-50">

    {# ===== HEADER ===== #}
    <header class="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div class="max-w-7xl mx-auto px-6 py-4">
            <div class="flex items-center gap-4">
                <a href="{{ path('admin_design_system') }}" class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </a>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-gray-500">Atomes</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-[Poppins]">Badge</h1>
                    </div>
                    <p class="text-sm text-gray-500">Indicateurs visuels pour statuts et compteurs</p>
                </div>
            </div>
        </div>
    </header>

    <div class="max-w-7xl mx-auto px-6 py-8">

        {# ===== NAVIGATION RAPIDE ===== #}
        <nav class="mb-8 bg-white rounded-xl p-4 shadow-sm border border-gray-200">
            <div class="flex flex-wrap gap-2">
                <a href="#usage" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Usage</a>
                <a href="#variantes" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Variantes</a>
                <a href="#tailles" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Tailles</a>
                <a href="#dots" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Dots</a>
                <a href="#icones" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Icônes</a>
                <a href="#compteurs" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Compteurs</a>
                <a href="#outline" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Outline</a>
                <a href="#white" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">White</a>
                <a href="#pulse" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Pulse</a>
                <a href="#dot-variant" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">dotVariant</a>
                <a href="#custom-color" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">customColor</a>
                <a href="#parametres" class="px-3 py-1.5 text-sm rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">Paramètres</a>
            </div>
        </nav>

        {# ===== USAGE ===== #}
        <section id="usage" class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Usage</h2>
            </div>
            <div class="p-6">
                <p class="text-gray-600 mb-4">
                    Le composant Badge est utilisé pour afficher des statuts, des catégories ou des compteurs.
                    Idéal pour les tableaux, les cartes et les listes.
                </p>

                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{# Utilisation basique #}
{% include '_atoms/badge/badge.html.twig' with {
    label: 'Nouveau'
} %}

{# Avec variante et dot #}
{% include '_atoms/badge/badge.html.twig' with {
    label: 'Actif',
    variant: 'success',
    dot: true
} %}{% endverbatim %}</code></pre>
                </div>

                <div class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="flex gap-2">
                        <svg class="w-5 h-5 text-blue-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <div class="text-sm text-blue-800">
                            <strong>Fichier :</strong> <code class="bg-blue-100 px-1 rounded">templates/_atoms/badge/badge.html.twig</code>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# ===== VARIANTES ===== #}
        <section id="variantes" class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Variantes</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">variant</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-4">
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Primary', variant: 'primary' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Success', variant: 'success' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Warning', variant: 'warning' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Error', variant: 'error' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Info', variant: 'info' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Cohorts', variant: 'cohorts' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Neutral', variant: 'neutral' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Dark', variant: 'dark' } %}
                </div>
                <div class="flex flex-wrap items-center gap-4 mt-4 p-4 bg-gray-700 rounded-lg">
                    {% include '_atoms/badge/badge.html.twig' with { label: 'White', variant: 'white' } %}
                    <span class="text-xs text-gray-400">Sur fond sombre</span>
                </div>

                <div class="mt-6 overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="text-left py-2 px-3 font-medium text-gray-700">Variante</th>
                                <th class="text-left py-2 px-3 font-medium text-gray-700">Utilisation</th>
                            </tr>
                        </thead>
                        <tbody class="text-gray-600">
                            <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>primary</code></td><td class="py-2 px-3">Actions principales, liens</td></tr>
                            <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>success</code></td><td class="py-2 px-3">Actif, validé, terminé</td></tr>
                            <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>warning</code></td><td class="py-2 px-3">En attente, attention requise</td></tr>
                            <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>error</code></td><td class="py-2 px-3">Erreur, inactif, bloqué</td></tr>
                            <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>info</code></td><td class="py-2 px-3">Information, note</td></tr>
                            <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>cohorts</code></td><td class="py-2 px-3">Cohortes, groupes, tags</td></tr>
                            <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>neutral</code></td><td class="py-2 px-3">Défaut, catégorie générique</td></tr>
                            <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>dark</code></td><td class="py-2 px-3">Emphase forte</td></tr>
                            <tr><td class="py-2 px-3"><code>white</code></td><td class="py-2 px-3">Sur fonds sombres ou colores</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        {# ===== TAILLES ===== #}
        <section id="tailles" class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Tailles</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">size</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-4">
                    {% include '_atoms/badge/badge.html.twig' with { label: 'XS', variant: 'primary', size: 'xs' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Small', variant: 'primary', size: 'sm' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Medium', variant: 'primary', size: 'md' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Large', variant: 'primary', size: 'lg' } %}
                </div>

                <div class="mt-6 overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="text-left py-2 px-3 font-medium text-gray-700">Taille</th>
                                <th class="text-left py-2 px-3 font-medium text-gray-700">Hauteur</th>
                                <th class="text-left py-2 px-3 font-medium text-gray-700">Font</th>
                            </tr>
                        </thead>
                        <tbody class="text-gray-600">
                            <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>xs</code></td><td class="py-2 px-3">20px</td><td class="py-2 px-3">12px</td></tr>
                            <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>sm</code></td><td class="py-2 px-3">24px</td><td class="py-2 px-3">12px</td></tr>
                            <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>md</code></td><td class="py-2 px-3">28px</td><td class="py-2 px-3">14px</td></tr>
                            <tr><td class="py-2 px-3"><code>lg</code></td><td class="py-2 px-3">32px</td><td class="py-2 px-3">14px</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        {# ===== DOTS ===== #}
        <section id="dots" class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Avec dot de statut</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">dot: true</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-4">
                    {% include '_atoms/badge/badge.html.twig' with { label: 'En ligne', variant: 'success', dot: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Absent', variant: 'neutral', dot: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'En attente', variant: 'warning', dot: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Hors ligne', variant: 'error', dot: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Cohorte A', variant: 'cohorts', dot: true } %}
                </div>

                <p class="text-sm text-gray-500 mt-4">Idéal pour les statuts de connexion, états de publication, disponibilité.</p>

                <div class="mt-4 bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% include '_atoms/badge/badge.html.twig' with {
    label: 'En ligne',
    variant: 'success',
    dot: true
} %}{% endverbatim %}</code></pre>
                </div>
            </div>
        </section>

        {# ===== ICÔNES ===== #}
        <section id="icones" class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Avec icônes</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">icon</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-4">
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Validé', variant: 'success', icon: 'check' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Attention', variant: 'warning', icon: 'alert-triangle' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Erreur', variant: 'error', icon: 'x' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Info', variant: 'info', icon: 'info' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Favori', variant: 'primary', icon: 'star' } %}
                </div>

                <div class="mt-4 bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% include '_atoms/badge/badge.html.twig' with {
    label: 'Validé',
    variant: 'success',
    icon: 'check'
} %}{% endverbatim %}</code></pre>
                </div>
            </div>
        </section>

        {# ===== COMPTEURS ===== #}
        <section id="compteurs" class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Avec compteur</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">count</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-4">
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Messages', variant: 'primary', count: 5 } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Notifications', variant: 'error', count: 12 } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Tâches', variant: 'warning', count: 3 } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Utilisateurs', variant: 'success', icon: 'users', count: 42 } %}
                </div>

                <div class="mt-4 bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% include '_atoms/badge/badge.html.twig' with {
    label: 'Messages',
    variant: 'primary',
    count: 5
} %}{% endverbatim %}</code></pre>
                </div>
            </div>
        </section>

        {# ===== OUTLINE ===== #}
        <section id="outline" class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Variantes Outline</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">outline: true</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-4">
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Primary', variant: 'primary', outline: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Success', variant: 'success', outline: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Warning', variant: 'warning', outline: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Error', variant: 'error', outline: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Info', variant: 'info', outline: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Cohorts', variant: 'cohorts', outline: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Neutral', variant: 'neutral', outline: true } %}
                </div>

                <p class="text-sm text-gray-500 mt-4">Version plus légère, idéale quand le badge ne doit pas trop attirer l'attention.</p>
            </div>
        </section>

        {# ===== VARIANTE WHITE ===== #}
        <section id="white" class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Variante White</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">variant: 'white'</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-4 p-6 bg-gray-800 rounded-lg">
                    {% include '_atoms/badge/badge.html.twig' with { label: 'White badge', variant: 'white' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Avec dot', variant: 'white', dot: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Avec icone', variant: 'white', icon: 'star' } %}
                </div>

                <p class="text-sm text-gray-500 mt-4">Ideal sur les fonds sombres ou colores. Fond blanc, bordure grise, texte gris fonce.</p>

                <div class="mt-4 bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% include '_atoms/badge/badge.html.twig' with {
    label: 'White badge',
    variant: 'white'
} %}{% endverbatim %}</code></pre>
                </div>
            </div>
        </section>

        {# ===== PULSE DOT ===== #}
        <section id="pulse" class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Dot animé (pulse)</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètres : <code class="bg-gray-200 px-1 rounded">dot: true, pulse: true</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-4">
                    {% include '_atoms/badge/badge.html.twig' with { label: 'En ligne', variant: 'success', dot: true, pulse: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Live', variant: 'error', dot: true, pulse: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'En attente', variant: 'warning', dot: true, pulse: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Actif', variant: 'primary', dot: true, pulse: true } %}
                </div>

                <p class="text-sm text-gray-500 mt-4">Le dot pulse en utilisant <code class="bg-gray-100 px-1 rounded">animate-ping</code> de Tailwind. Nécessite <code class="bg-gray-100 px-1 rounded">dot: true</code>.</p>

                <div class="mt-4 bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% include '_atoms/badge/badge.html.twig' with {
    label: 'En ligne',
    variant: 'success',
    dot: true,
    pulse: true
} %}{% endverbatim %}</code></pre>
                </div>
            </div>
        </section>

        {# ===== DOT VARIANT ===== #}
        <section id="dot-variant" class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">dotVariant — Override couleur du dot</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">dotVariant</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-4">
                    {% include '_atoms/badge/badge.html.twig' with { label: 'En cours', variant: 'neutral', dot: true, dotVariant: 'warning' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Actif', variant: 'neutral', dot: true, dotVariant: 'success' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Erreur', variant: 'neutral', dot: true, dotVariant: 'error' } %}
                </div>

                <p class="text-sm text-gray-500 mt-4">Utile quand le badge est neutre mais que le statut doit avoir une couleur specifique.</p>

                <div class="mt-4 bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% include '_atoms/badge/badge.html.twig' with {
    label: 'En cours',
    variant: 'neutral',
    dot: true,
    dotVariant: 'warning'
} %}{% endverbatim %}</code></pre>
                </div>
            </div>
        </section>

        {# ===== CUSTOM COLOR ===== #}
        <section id="custom-color" class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">customColor — Couleur dynamique</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">customColor: '#309344'</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-4">
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Vert Castia', customColor: '#309344' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Rose Slidia', customColor: '#E91E8C' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Orange Monalisia', customColor: '#ED8600' } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Avec dot', customColor: '#0C81E4', dot: true } %}
                    {% include '_atoms/badge/badge.html.twig' with { label: 'Avec pulse', customColor: '#309344', dot: true, pulse: true } %}
                </div>

                <p class="text-sm text-gray-500 mt-4">
                    Override complet de la variante. Le fond est la couleur a 6% d'opacite (<code class="bg-gray-100 px-1 rounded">color + '0f'</code>),
                    la bordure a 16% (<code class="bg-gray-100 px-1 rounded">color + '28'</code>), et le texte a la couleur pleine.
                    Utile pour les couleurs provenant de la base de donnees (<code class="bg-gray-100 px-1 rounded">tool_color_details</code>).
                </p>

                <div class="mt-4 bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% include '_atoms/badge/badge.html.twig' with {
    label: 'Feature label',
    customColor: '#309344'
} %}

{# Avec couleur dynamique depuis DB #}
{% set toolColor = tool_color_details['castia'].primary ?? '#309344' %}
{% include '_atoms/badge/badge.html.twig' with {
    label: 'Creation flexible',
    customColor: toolColor
} %}{% endverbatim %}</code></pre>
                </div>
            </div>
        </section>

        {# ===== EXEMPLES CONCRETS ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Exemples concrets</h2>
            </div>
            <div class="p-6 space-y-6">

                {# Exemple tableau #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-3">Dans un tableau</h3>
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <table class="w-full text-sm">
                            <thead class="bg-gray-50 border-b border-gray-200">
                                <tr>
                                    <th class="text-left py-3 px-4 font-medium text-gray-700">Utilisateur</th>
                                    <th class="text-left py-3 px-4 font-medium text-gray-700">Rôle</th>
                                    <th class="text-left py-3 px-4 font-medium text-gray-700">Statut</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-gray-100">
                                    <td class="py-3 px-4">Jean Dupont</td>
                                    <td class="py-3 px-4">{% include '_atoms/badge/badge.html.twig' with { label: 'Admin', variant: 'primary', size: 'sm' } %}</td>
                                    <td class="py-3 px-4">{% include '_atoms/badge/badge.html.twig' with { label: 'Actif', variant: 'success', dot: true, size: 'sm' } %}</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-3 px-4">Marie Martin</td>
                                    <td class="py-3 px-4">{% include '_atoms/badge/badge.html.twig' with { label: 'Utilisateur', variant: 'neutral', size: 'sm' } %}</td>
                                    <td class="py-3 px-4">{% include '_atoms/badge/badge.html.twig' with { label: 'En attente', variant: 'warning', dot: true, size: 'sm' } %}</td>
                                </tr>
                                <tr>
                                    <td class="py-3 px-4">Pierre Durand</td>
                                    <td class="py-3 px-4">{% include '_atoms/badge/badge.html.twig' with { label: 'Manager', variant: 'info', size: 'sm' } %}</td>
                                    <td class="py-3 px-4">{% include '_atoms/badge/badge.html.twig' with { label: 'Inactif', variant: 'error', dot: true, size: 'sm' } %}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {# Exemple carte #}
                <div>
                    <h3 class="text-sm font-medium text-gray-700 mb-3">Dans une carte</h3>
                    <div class="border border-gray-200 rounded-lg p-4 max-w-sm">
                        <div class="flex items-start justify-between mb-3">
                            <h4 class="font-semibold text-gray-900">Formation React</h4>
                            {% include '_atoms/badge/badge.html.twig' with { label: 'Nouveau', variant: 'primary', size: 'xs' } %}
                        </div>
                        <p class="text-sm text-gray-500 mb-3">Apprenez React de A à Z avec ce cours complet.</p>
                        <div class="flex gap-2">
                            {% include '_atoms/badge/badge.html.twig' with { label: 'JavaScript', variant: 'neutral', size: 'xs' } %}
                            {% include '_atoms/badge/badge.html.twig' with { label: 'Frontend', variant: 'neutral', size: 'xs' } %}
                            {% include '_atoms/badge/badge.html.twig' with { label: '12h', variant: 'info', size: 'xs' } %}
                        </div>
                    </div>
                </div>

            </div>
        </section>

        {# ===== PARAMÈTRES ===== #}
        <section id="parametres" class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Référence des paramètres</h2>
            </div>
            <div class="p-6 overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-3 px-3 font-medium text-gray-700">Paramètre</th>
                            <th class="text-left py-3 px-3 font-medium text-gray-700">Type</th>
                            <th class="text-left py-3 px-3 font-medium text-gray-700">Défaut</th>
                            <th class="text-left py-3 px-3 font-medium text-gray-700">Options</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600">
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">label</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>''</code></td>
                            <td class="py-3 px-3">Texte du badge</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">variant</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>'neutral'</code></td>
                            <td class="py-3 px-3">primary, success, warning, error, info, cohorts, neutral, dark, white</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">size</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>'md'</code></td>
                            <td class="py-3 px-3">xs, sm, md, lg</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">dot</code></td>
                            <td class="py-3 px-3">bool</td>
                            <td class="py-3 px-3"><code>false</code></td>
                            <td class="py-3 px-3">Affiche un point de statut</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">icon</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>null</code></td>
                            <td class="py-3 px-3">Nom de l'icône (check, alert, etc.)</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">count</code></td>
                            <td class="py-3 px-3">number</td>
                            <td class="py-3 px-3"><code>null</code></td>
                            <td class="py-3 px-3">Compteur affiché à droite</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">outline</code></td>
                            <td class="py-3 px-3">bool</td>
                            <td class="py-3 px-3"><code>false</code></td>
                            <td class="py-3 px-3">Version bordure sans fond</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">rounded</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>'full'</code></td>
                            <td class="py-3 px-3">sm, md, lg, full</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">pulse</code></td>
                            <td class="py-3 px-3">bool</td>
                            <td class="py-3 px-3"><code>false</code></td>
                            <td class="py-3 px-3">Anime le dot avec animate-ping. Nécessite dot: true</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">dotVariant</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>null</code></td>
                            <td class="py-3 px-3">Override de la couleur du dot (primary, success, warning, error, info...)</td>
                        </tr>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 px-3"><code class="text-pink-600">customColor</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>null</code></td>
                            <td class="py-3 px-3">Couleur hex dynamique (ex: '#309344'). Override variant avec bg 6%, border 16%</td>
                        </tr>
                        <tr>
                            <td class="py-3 px-3"><code class="text-pink-600">class</code></td>
                            <td class="py-3 px-3">string</td>
                            <td class="py-3 px-3"><code>''</code></td>
                            <td class="py-3 px-3">Classes Tailwind additionnelles</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

    </div>
</div>
{% endblock %}